/* ========================================================================
   ENKOR Web Studio — FEUILLE DE STYLE UNIQUE du site. DA « LE SCEAU ».

   RÔLE. Toutes les pages chargent cette feuille, et elle n'est jamais
   dupliquée : une variable modifiée ici change partout. C'est voulu — il n'y a
   pas de feuille par page à tenir en accord.

   D'OÙ VIENNENT LES COULEURS. Le bloc :root ci-dessous est la recopie du socle
   labs/etudes/2026-08-13-sceau-partout/socle/tokens-sceau.css (chantier S2),
   avec les @font-face réécrits sur le chemin réel de cette surface
   (../polices/). Les trois couleurs — papier #f4f0e6, encre #110e0b, cinabre
   #e0431e — sont FIGÉES depuis le 08/08/2026 : elles ne se retouchent pas ici.
   Les ratios de contraste de chaque couple sont mesurés dans
   socle/00-NOTE-DE-MESURE.md § 2, et rappelés en fin de ligne ci-dessous.

   CE QU'IL NE FAUT PAS Y TOUCHER.
     · Aucune requête externe. Les deux polices sont AUTO-HÉBERGÉES dans
       assets/polices/ : aucun CDN, aucun appel à fonts.googleapis. C'est ce qui
       laisse le site sans ressource tierce, donc sans cookie.
     · Aucun script, nulle part — ni ici ni dans les pages. C'est la condition
       qui rend la bascule possible sans toucher à la CSP du .htaccess.
     · Le paramètre ?v= des balises <link> doit être changé à chaque
       modification de ce fichier, sinon les visiteurs déjà venus gardent
       l'ancienne feuille en cache pendant un mois (max-age 30 jours).
       Valeur en cours : ?v=2026-08-13-sceau
     · La règle des 24 px, qui n'est pas une préférence mais une mesure :
       le cinabre plein #e0431e sur le papier ne donne que 3,69:1 — conforme en
       GRAND texte (≥ 24 px) et en élément d'interface, PAS en texte courant.
       Donc : ≥ 24 px → --sceau-cinabre ; < 24 px ou lien → --sceau-cinabre-lisible.
       Sur l'aplat de cinabre : jamais de réserve claire sous 24 px.
       Sur la carte de nuit #e8613c : jamais de réserve claire DU TOUT (2,97:1).

   CE QUI A DISPARU AVEC LA DÉCLINAISON, ET POURQUOI.
     · assets/js/marque.js et les 16 <canvas> : la marque est maintenant un
       fichier figé, assets/img/sceau-enkor-carre-jour.svg, posé en <img>. Le
       couplage « --signal recopiée en dur dans marque.js » que documentait
       l'ancienne tête de feuille N'EXISTE PLUS — il est retiré avec lui.
       (La Piste D pose « une seule irrégularité, gravée une fois, jamais
       reproduite au hasard » : un canvas qui la régénérait à chaque chargement
       contredisait la DA qu'il servait.)
     · Le biseau : clip-path du .cta, skewX(-20deg) du soulignement de nav,
       clip-path des bandes .bloc.alt / .bloc.ink et du .slab du héros, et la
       rotation des cartes. Ils étaient la signature de l'ancienne DA. Le Sceau
       a la sienne — l'irrégularité d'encrage du tampon, figée dans le .svg —
       et elle se suffit. La variable --skew était DÉJÀ morte (déclarée, lue
       nulle part) : elle n'est pas remplacée, elle n'est simplement plus là.

   LES CARACTÈRES QUI NE SONT DANS AUCUNE DES DEUX POLICES.
     Mesuré à la table cmap des .woff2 (pas supposé) : → ≈ ≤ ʳ ᵉ ◆ en sont
     absents, et les sous-ensembles ne peuvent pas être étendus (aucune source
     .ttf/.otf au dépôt). Donc : la flèche de lien et le losange de case cochée
     sont DESSINÉS EN CSS ci-dessous (.fl et .opt:has(input:checked) .t::before),
     jamais posés en caractère ; ≈ et ≤ sont écrits en toutes lettres dans les
     pages ; ʳ ᵉ sont rendus « 1re » en caractères ordinaires.
   ======================================================================== */

/* ═══ @font-face — polices auto-hébergées ════════════════════════════════
   ⚠️ AUCUN unicode-range n'est déclaré ici, et c'est un écart VOLONTAIRE au
   type du socle, sur mesure faite au disque le 13/08/2026 (lecture de la
   table cmap des deux .woff2, pas une supposition) :

     Bebas Neue  223 codepoints, dont 31 HORS de U+0000-00FF
     Inter       230 codepoints, dont 39 HORS de U+0000-00FF

   Le socle proposait `unicode-range:U+0000-00FF`. Cette plage aurait EXCLU
   des glyphes qui sont réellement dans les fichiers et que le site emploie
   massivement : le tiret cadratin — (293 occurrences), l'euro € (128),
   les points de suspension …, l'apostrophe courbe ’, le signe moins −,
   les ligatures Œ/œ. Tous auraient basculé sur une police système, à côté
   de Bebas et d'Inter, exactement le décrochage qu'on cherchait à éviter.
   Sans unicode-range, le navigateur emploie la police partout où elle a le
   glyphe et ne retombe que sur les caractères réellement absents — ce qui
   est le comportement voulu. Rien n'est téléchargé en plus : les deux
   polices servent sur chacune des 8 pages.
   → Écart signalé à 18 pour report au socle S2. */

@font-face{
  font-family:'Bebas Neue';
  src:url('../polices/BebasNeue-400-latin.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Inter';
  src:url('../polices/Inter-100-900-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* L'italique est bien employé (balises <i> de la page des offres et des
   libellés injectés par le configurateur) : le fichier est copié à dessein. */
@font-face{
  font-family:'Inter';
  src:url('../polices/Inter-100-900-italic-latin.woff2') format('woff2');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

:root{
  color-scheme: light only; /* Verrou de thème. Le mode sombre automatique de certains navigateurs
                               mobiles recolore d'autorité une palette claire : fonds clairs assombris,
                               couleurs de marque dérivées. Cette déclaration l'interdit. Le doublon en
                               <meta name="color-scheme"> dans chaque page couvre le cas où cette
                               feuille arrive en retard ou depuis le cache ; les deux doivent rester
                               d'accord. */

  /* ─── 1 · LES TROIS COULEURS — FIGÉES le 08/08/2026 ───────────────────── */
  --sceau-papier:  #f4f0e6;   /* fond jour · réserve claire la nuit */
  --sceau-encre:   #110e0b;   /* texte courant jour · texte de corps la nuit */
  --sceau-cinabre: #e0431e;   /* le rouge ENKOR · aplats, marque, grand texte */

  /* ─── 2 · DÉRIVÉS MESURÉS ────────────────────────────────────────────── */
  --sceau-bande:   #ece4d2;                /* bande alternée et carte, jour — 1,11:1 sur le papier */
  --sceau-cinabre-lisible: #b83719;        /* cinabre × 0,82 — 5,12:1 papier · 4,61:1 bande.
                                              RÉSERVÉ au texte < 24 px et aux liens. Le #e0431e
                                              n'est PAS touché : aplat, marque, grands titres,
                                              filets, boutons. */
  --sceau-encre-douce:  #3a352a;           /* 10,71:1 papier · 9,63:1 bande */
  --sceau-encre-fine:   #5b5647;           /*  6,43:1 papier · 5,78:1 bande */
  --sceau-filet:      rgba(17,14,11,.16);  /* filet DÉCORATIF — 1,41:1 composé, arbitré hors seuil */
  --sceau-filet-fort: #857e6c;             /* filet PORTEUR — 3,54:1 papier · 3,19:1 bande */
  --sceau-ok: #3f6b2c;                     /* état « conforme » — 5,50:1 papier. 4ᵉ couleur hors DA,
                                              tranchée au chantier tunnel (T1), pas ici. */

  /* ─── 3 · MODE NUIT — le positif/négatif vrai ────────────────────────── */
  --sceau-nuit-fond:        var(--sceau-cinabre);  /* l'aplat */
  --sceau-nuit-texte:       var(--sceau-encre);    /* texte courant en nuit — 4,57:1 */
  --sceau-nuit-titre:       var(--sceau-papier);   /* réserve claire, GRAND TEXTE SEULEMENT — 3,69:1 */
  --sceau-nuit-texte-doux:  var(--sceau-encre);    /* alias volontaire : aucune teinte plus claire ne
                                                      tient AA sur le cinabre. Aucune opacity sur du
                                                      texte en nuit — elle rabote le rapport. */
  --sceau-nuit-carte-fond:  #e8613c;               /* carte posée SUR l'aplat — un cinabre ÉCLAIRCI */
  --sceau-nuit-carte-texte: var(--sceau-encre);    /* 5,68:1 — titre compris */
  --sceau-nuit-filet:       rgba(17,14,11,.28);    /* décoratif, composé 1,59:1 — arbitré */
  --sceau-nuit-filet-fort:  var(--sceau-encre);    /* filet PORTEUR en nuit — 4,57:1 */
  --sceau-nuit-lien:        var(--sceau-encre);    /* le lien en nuit se distingue par le SOULIGNEMENT */

  /* ─── 4 · RÔLES D'INTERACTION ────────────────────────────────────────── */
  --sceau-lien:            var(--sceau-cinabre-lisible);
  --sceau-lien-visite:     #8b2a13;                /* cinabre × 0,62 — 7,56:1 papier */
  --sceau-focus:           var(--sceau-cinabre-lisible);
  --sceau-bouton-fond:     var(--sceau-cinabre);   /* aplat de cinabre… */
  --sceau-bouton-texte:    var(--sceau-encre);     /* …libellé à l'ENCRE (4,57:1), pas en réserve
                                                      claire (3,69:1 pour un libellé de 13-15 px).
                                                      Seul écart visible du Sceau par rapport au
                                                      bouton de la v3, et il est imposé par la mesure. */
  --sceau-bouton-2-fond:   var(--sceau-bande);
  --sceau-bouton-2-texte:  var(--sceau-encre);     /* 15,16:1 */
  --sceau-selection-fond:  var(--sceau-cinabre);
  --sceau-selection-texte: var(--sceau-encre);

  /* ─── 5 · LES POLICES ────────────────────────────────────────────────── */
  --sceau-titre: 'Bebas Neue','Haettenschweiler','Arial Narrow',system-ui,sans-serif;
  --sceau-texte: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --sceau-mono:  ui-monospace,'SFMono-Regular','Consolas','Liberation Mono',Menlo,monospace;

  /* ─── 6 · L'ÉCHELLE TYPOGRAPHIQUE ────────────────────────────────────── */
  --enk-h1-taille:        clamp(38px,6.4vw,72px);
  --enk-h2-taille:        clamp(28px,4vw,42px);
  --enk-h3-taille:        23px;
  --enk-titre-graisse:    400;   /* Bebas Neue n'a qu'un poids — ce n'est pas un choix */
  --enk-titre-interligne: .98;
  --enk-h1-approche:      .01em;
  --enk-h2-approche:      .005em;
  --enk-texte-taille:     17px;
  --enk-texte-graisse:    400;
  --enk-texte-interligne: 1.6;
  --enk-texte-mesure:     65ch;
  --enk-legende-taille:   13.5px;
  --enk-legende-graisse:  400;
  --enk-kicker-taille:    15px;  /* kicker en BEBAS, pas en Inter */
  --enk-kicker-approche:  .2em;
  --enk-kicker-graisse:   400;
  --sceau-lead-taille:    18.5px;
  --sceau-lead-mesure:    50ch;
  --sceau-titre-mesure:   14ch;
  --sceau-marque-taille:  24px;
  --sceau-marque-approche: .06em;

  /* ─── 7 · MISE EN PAGE ───────────────────────────────────────────────── */
  --sceau-largeur:         min(1120px,92vw);
  --sceau-largeur-etroite: min(760px,92vw);
  --sceau-seuil-mobile:    760px;

  /* ─── 8 · PONTS VERS LES NOMS DE LA v3 ───────────────────────────────── */
  --ink:        var(--sceau-encre);
  --paper:      var(--sceau-papier);
  --paper2:     var(--sceau-bande);
  --line:       var(--sceau-filet);
  --signal:     var(--sceau-cinabre);
  --signal-ink: var(--sceau-cinabre-lisible);
  --ok:         var(--sceau-ok);
  --sans:       var(--sceau-texte);
  --serif:      var(--sceau-titre);  /* le rôle « titre » de la v3 : ce n'est plus une serif */
  --mono:       var(--sceau-mono);
  --seuil-mobile: 760px;             /* doit rester égal au SEUIL_MOBILE de assets/js/nav.js */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--sceau-papier);color:var(--sceau-encre);font-family:var(--sceau-texte);
  font-size:var(--enk-texte-taille);font-weight:var(--enk-texte-graisse);
  line-height:var(--enk-texte-interligne);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;}
/* Bebas Neue ne porte JAMAIS un paragraphe — titres courts et kickers seulement.
   Garde-fou de la DA, non négociable. */
h1,h2,h3{font-family:var(--sceau-titre);font-weight:var(--enk-titre-graisse);
  line-height:var(--enk-titre-interligne);letter-spacing:var(--enk-h2-approche);}
.eyebrow,.brand,.prix,.badge,.chiffre{font-family:var(--sceau-titre);}
.mono{font-family:var(--sceau-mono);}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{width:var(--sceau-largeur);margin-inline:auto;}
.wrap.etroit{width:var(--sceau-largeur-etroite);}
::selection{background:var(--sceau-selection-fond);color:var(--sceau-selection-texte);}
:focus-visible{outline:3px solid var(--sceau-focus);outline-offset:3px;}
main{display:block;}

/* ══ La flèche de lien — DESSINÉE, jamais un caractère ══
   U+2192 n'est dans aucune des deux polices embarquées (mesuré à la cmap) et
   les sous-ensembles ne peuvent pas être étendus : aucune source .ttf/.otf au
   dépôt. Dessinée ici, elle hérite de la couleur et de la taille de son texte
   (currentColor, em) et ne dépend plus d'aucune fonte. La hampe et la pointe
   sont deux boîtes bordées — aucune URL, aucune image, aucun glyphe. */
.fl{display:inline-block;position:relative;width:.92em;height:.62em;
  margin-left:.42em;vertical-align:-.02em;flex:none;}
.fl::before{content:"";position:absolute;left:0;top:50%;width:100%;height:.09em;
  margin-top:-.045em;background:currentColor;}
.fl::after{content:"";position:absolute;right:0;top:50%;width:0;height:0;
  margin-top:-.25em;border-top:.25em solid transparent;border-bottom:.25em solid transparent;
  border-left:.34em solid currentColor;}

/* ══ En-tête ══ */
.entete{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:16px min(4vw,34px);background:color-mix(in srgb,var(--sceau-papier) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--sceau-encre);}
.brand{display:flex;align-items:center;gap:11px;font-size:var(--sceau-marque-taille);
  letter-spacing:var(--sceau-marque-approche);
  text-transform:uppercase;line-height:1;
  font-variant-ligatures:none;text-decoration:none;font-weight:400;}
/* La marque est un FICHIER, plus un canvas : assets/img/sceau-enkor-carre-jour.svg,
   posé en <img> (et non en <svg> inline) parce qu'elle est posée DEUX fois par
   page — deux inline identiques donneraient deux fois le même id de filtre dans
   le même document. En <img>, l'identifiant reste enfermé dans le fichier.
   41 px : le trait le plus fin du cadre y rend 2,4 px, au-dessus du seuil de
   36 px sous lequel l'irrégularité d'encrage se referme (socle/marques § 3.b).
   Le nom accessible du lien reste le texte « ENKOR » posé à côté : l'image est
   décorative, alt="". */
.brand .marque{width:41px;height:41px;flex:none;}
.brand small{display:block;font-family:var(--sceau-texte);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.4;
  font-variant-ligatures:none;color:var(--sceau-encre-fine);font-weight:400;margin-top:3px;}
.burger{margin-left:auto;display:none;font-family:var(--sceau-texte);font-size:13px;
  background:var(--sceau-encre);color:var(--sceau-papier);border:0;padding:9px 14px;letter-spacing:.06em;
  cursor:pointer;}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
/* La nav reste en Inter, pas en Bebas : à 13 px en capitales espacées, une
   condensée à un seul poids se lit mal et se distingue mal d'un item à l'autre.
   Bebas garde les titres, les kickers et la marque. */
.navlinks a{text-decoration:none;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  font-variant-ligatures:none;
  position:relative;padding-bottom:3px;}
.navlinks a[aria-current="page"]:not(.cta){color:var(--sceau-cinabre-lisible);}
/* Soulignement droit : le skewX(-20deg) appartenait à l'ancienne DA. */
.navlinks a:not(.cta)::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--sceau-cinabre);transform:scaleX(0);transform-origin:0 50%;transition:transform .2s;}
.navlinks a:not(.cta):hover::after,
.navlinks a[aria-current="page"]:not(.cta)::after{transform:scaleX(1);}
/* Le calque du CTA reste un ::before DÉCORATIF derrière le bouton (z-index:-1) —
   jamais sur la boîte cliquable elle-même, pour que l'anneau de focus clavier
   (:focus-visible) reste entier : un clip-path posé directement sur l'élément
   focusable découpe aussi son propre outline, et l'anneau disparaît en partie —
   défaut réel, mesuré, pas théorique.
   Le clip-path biseauté a été RETIRÉ (ancienne DA) ; le calque reste, il porte
   maintenant un aplat droit. NE JAMAIS poser clip-path sur .cta lui-même. */
.cta{position:relative;isolation:isolate;background:transparent;color:var(--sceau-bouton-texte);
  text-decoration:none;
  font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  font-variant-ligatures:none;padding:11px 20px;
  transition:transform .15s;display:inline-block;border:0;cursor:pointer;font-family:var(--sceau-texte);}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sceau-bouton-fond);}
.cta:hover{transform:translateY(-2px);}
.cta.sec{color:var(--sceau-bouton-2-texte);}
.cta.sec::before{background:var(--sceau-bouton-2-fond);}

@media (max-width:760px){
  .burger{display:block;}
  /* Panneau caché par défaut via `display:none` — pas `transform`, dont ce
     panneau ne devait pas dépendre : mesuré au vrai DOM (getBoundingClientRect)
     dans Chrome piloté, le panneau restait visible malgré translateX(100%)
     déclaré. `display` est sans ambiguïté possible et n'a besoin d'aucune
     transition pour rester lisible — un panneau qui apparaît d'un coup au clic
     n'est pas un défaut d'accessibilité. */
  .navlinks{display:none;position:fixed;inset:0 0 0 auto;top:var(--h-entete,64px);
    width:min(84vw,320px);height:calc(100vh - var(--h-entete,64px));
    flex-direction:column;align-items:flex-start;gap:0;background:var(--sceau-papier);
    border-left:2px solid var(--sceau-encre);padding:18px 22px;overflow-y:auto;}
  .navlinks[data-ouvert="oui"]{display:flex;}
  .navlinks a{width:100%;padding:13px 0;border-bottom:1px solid var(--sceau-filet);}
  .navlinks a.cta{margin-top:14px;text-align:center;}
}

/* ══ Héros — asymétrique, PAS centré ══ */
.hero{position:relative;padding:min(11vw,110px) 0 min(9vw,80px);overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.55fr 1fr;gap:min(5vw,60px);align-items:center;}
/* Le kicker est en BEBAS et en cinabre LISIBLE : à 15 px il est du texte
   courant, le cinabre plein n'y tiendrait que 3,69:1. */
.eyebrow{font-size:var(--enk-kicker-taille);letter-spacing:var(--enk-kicker-approche);
  font-weight:var(--enk-kicker-graisse);line-height:1.2;
  text-transform:uppercase;font-variant-ligatures:none;color:var(--sceau-cinabre-lisible);
  margin-bottom:18px;}
.hero h1{font-size:var(--enk-h1-taille);letter-spacing:var(--enk-h1-approche);
  max-width:var(--sceau-titre-mesure);}
/* Le mot en réserve claire sur l'aplat de cinabre : c'est du GRAND texte
   (38 px au plus petit), 3,69:1 — le garde-fou de la DA, appliqué à la lettre.
   Le biseau du calque a été retiré : l'aplat est droit. */
.hero h1 .slab{display:inline-block;position:relative;color:var(--sceau-nuit-titre);
  padding:0 .18em;margin:0 -.05em;}
.hero h1 .slab::before{content:"";position:absolute;inset:6% -6%;background:var(--sceau-cinabre);
  z-index:-1;}
.hero .sous{max-width:var(--sceau-lead-mesure);margin-top:22px;font-size:var(--sceau-lead-taille);
  color:var(--sceau-encre-douce);}
.hero .actions{margin-top:32px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;}
.lien-doux{text-decoration:none;font-family:var(--sceau-texte);font-size:14px;letter-spacing:.02em;
  color:var(--sceau-lien);border-bottom:2px solid var(--sceau-cinabre);padding-bottom:2px;}
.lien-doux:visited{color:var(--sceau-lien-visite);}

/* ══ Le sceau en grand — la signature du héros ══
   Remplace la plaque hachurée biseautée de l'ancienne DA. Le tampon touche ses
   quatre bords à dessein (le trait déborde du viewBox et s'y fait rogner) : sa
   zone de respiration est donc entièrement EXTERNE, jamais interne. */
.panneau{position:relative;justify-self:end;width:min(100%,300px);
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:6%;}
.panneau .sceau{width:100%;height:auto;aspect-ratio:1/1;}
.panneau .legende{font-family:var(--sceau-titre);font-size:var(--enk-kicker-taille);
  letter-spacing:var(--enk-kicker-approche);text-transform:uppercase;
  color:var(--sceau-encre-fine);text-align:center;line-height:1.2;}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;}
  .panneau{width:min(100%,220px);justify-self:start;margin-top:10px;}
}

/* ══ Petit héros de page intérieure — même grammaire, une colonne ══ */
.tete-page{position:relative;padding:min(9vw,84px) 0 min(6vw,40px);overflow:hidden;}
.tete-page h1{font-size:var(--enk-h2-taille);letter-spacing:var(--enk-h1-approche);}
.tete-page .sous{max-width:var(--enk-texte-mesure);margin-top:18px;font-size:var(--sceau-lead-taille);
  color:var(--sceau-encre-douce);}

/* ══ Bandes de section — le fond bascule, JAMAIS le texte lisible ══
   Les bandes sont droites : les clip-path biseautés appartenaient à l'ancienne
   DA. .bloc.ink devient l'APLAT DE CINABRE — c'est le mode nuit du Sceau, un
   positif/négatif vrai (mêmes trois couleurs, rôles inversés), et non un thème
   sombre. Le garde-fou s'y applique mot pour mot : SEUL le grand titre passe en
   réserve claire, tout le reste reste à l'encre. */
.bloc{position:relative;padding:min(9vw,86px) 0;}
.bloc.alt{background:var(--sceau-bande);}
.bloc.ink{background:var(--sceau-nuit-fond);color:var(--sceau-nuit-texte);}
.bloc.ink .eyebrow{color:var(--sceau-nuit-texte);}   /* 15 px : encre obligatoire, 4,57:1 */
.sec-head{max-width:62ch;margin-bottom:40px;}
.sec-head h2{font-size:var(--enk-h2-taille);letter-spacing:var(--enk-h2-approche);margin-top:8px;}
.sec-head h1 em,.sec-head h2 em{font-style:normal;color:var(--sceau-cinabre);}  /* ≥ 28 px : cinabre PLEIN */
.bloc.ink .sec-head h2{color:var(--sceau-nuit-titre);}  /* ≥ 28 px : réserve claire autorisée, 3,69:1 */
.bloc.ink .sec-head h2 em{color:var(--sceau-nuit-titre);}
.sec-head p{margin-top:14px;color:var(--sceau-encre-douce);max-width:56ch;}
.bloc.ink .sec-head p{color:var(--sceau-nuit-texte-doux);}

/* ══ Cartes — droites, alignées, pressées comme un cachet ══
   La rotation « cartes cassées » de l'ancienne DA est retirée : l'irrégularité
   du Sceau est celle de l'encrage, pas celle de la mise en page. */
.grille{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px;}
.grille.g2{grid-template-columns:repeat(2,1fr);}
.carte{border:1.5px solid var(--sceau-encre);background:var(--sceau-papier);padding:26px 24px;
  position:relative;}
/* 🆕 14/08/2026 — verdict du gérant en revue, devant la bande : « B ». Sur
   l'aplat de cinabre, les cartes perdent leur boîte — ni bordure ni fond
   propre : trois entrées à l'encre directement sur le cinabre, façon affiche,
   dans la continuité typographique du titre de la bande. C'est la proposition
   consignée par S4 (07-CALENDRIER-AVANT-LE-20.md § 7.7 : ne pas poser de
   cartes sur l'aplat) : le problème du papier sur la carte de nuit (2,97:1)
   DISPARAÎT au lieu d'être géré — la carte éclaircie n'existe plus. Aucun
   jeton ne bouge ; --sceau-nuit-carte-fond reste défini (encore employé en
   défensif par .bloc.ink .tarifs). Seul le h2 de la bande reste en réserve
   papier, tout le reste est à l'encre (garde-fou du 08/08 intact). La barre
   de survol ::after s'éteint ici : cinabre sur cinabre, elle serait
   invisible. Périmètre : la seule bande .bloc.ink à cartes est #refuse sur
   l'accueil — les autres grilles vivent sur le papier et gardent leur boîte. */
.bloc.ink .carte{background:none;border:none;padding:0;}
.bloc.ink .carte::after{content:none;}
.carte h2,.carte h3{font-size:var(--enk-h3-taille);margin-bottom:10px;letter-spacing:var(--enk-h2-approche);}
/* Le titre d'une entrée sur l'aplat reste à l'ENCRE (5,68:1 sur la carte
   d'hier, 4,57:1 sur l'aplat) : le garde-fou « seul le grand titre en
   réserve » ne s'applique qu'au h2 de la bande. */
.bloc.ink .carte h2,.bloc.ink .carte h3{color:var(--sceau-nuit-carte-texte);}
.carte p{font-size:15px;color:var(--sceau-encre-douce);}
.bloc.ink .carte p{color:var(--sceau-nuit-carte-texte);}
.carte b{color:var(--sceau-cinabre-lisible);font-weight:700;}
.bloc.ink .carte b{color:var(--sceau-nuit-carte-texte);}  /* pas d'accent sur l'aplat : le gras suffit */
.carte::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;
  background:var(--sceau-cinabre);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .25s;}
.carte:hover::after{transform:scaleX(1);}
.carte a:not(.cta){color:var(--sceau-lien);text-decoration:none;border-bottom:2px solid var(--sceau-cinabre);}
.carte a:not(.cta):visited{color:var(--sceau-lien-visite);}
.bloc.ink .carte a:not(.cta){color:var(--sceau-nuit-lien);border-bottom-color:var(--sceau-nuit-filet-fort);}
@media (max-width:900px){.grille{grid-template-columns:1fr;}}

/* ══ Offres — table brute, chiffres tabulaires ══
   .offre.star est un aplat d'ENCRE, pas de cinabre : le Sceau se presse UNE
   fois par page. Sur l'accueil, la bande .bloc.ink porte déjà l'aplat de
   cinabre ; un second aplat rouge sur la même page diluerait le geste. */
.offres{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.offre{border:2px solid var(--sceau-encre);padding:30px 26px;position:relative;overflow:hidden;}
.offre.star{background:var(--sceau-encre);color:var(--sceau-papier);}
.offre h2,.offre h3{font-size:var(--enk-h3-taille);margin-bottom:6px;}
.offre.star h2,.offre.star h3{color:var(--sceau-papier);}
.offre .prix{font-size:30px;font-variant-numeric:tabular-nums;margin-bottom:14px;line-height:1.05;
  color:var(--sceau-cinabre);}                       /* 30 px : cinabre PLEIN, 3,69:1 ≥ 3 */
.offre.star .prix{color:var(--sceau-papier);}        /* sur l'encre : réserve claire, 16,90:1 */
.offre .prix small{font-family:var(--sceau-texte);font-size:13px;color:var(--sceau-encre-fine);
  font-weight:400;}
.offre.star .prix small{color:var(--sceau-papier);}
.offre ul{padding-left:18px;font-size:14.5px;}
.offre li{margin-bottom:8px;}
.offre li b{color:var(--sceau-cinabre-lisible);}
.offre.star li b{color:var(--sceau-papier);}
@media (max-width:820px){.offres{grid-template-columns:1fr;}}

.preuve{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.preuve .item{border-left:3px solid var(--sceau-cinabre);padding-left:18px;}
.preuve .item .chiffre{display:block;font-size:26px;line-height:1.05;color:var(--sceau-cinabre);
  margin-bottom:6px;}                                /* 26 px : cinabre PLEIN */
.bloc.ink .preuve .item .chiffre{color:var(--sceau-nuit-titre);}  /* 26 px sur l'aplat : réserve claire */
.preuve .item p{font-size:14.5px;color:var(--sceau-encre-douce);}
.bloc.ink .preuve .item p{color:var(--sceau-nuit-texte-doux);}
@media (max-width:820px){.preuve{grid-template-columns:1fr;}}

.cta-final{text-align:left;}
.cta-final .wrap{max-width:640px;}

footer{border-top:2px solid var(--sceau-encre);padding:40px min(4vw,34px);}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:center;}
footer p{font-size:13px;color:var(--sceau-encre-fine);}
footer nav a{margin-right:16px;font-size:12.5px;text-decoration:none;letter-spacing:.04em;}
/* .note-fine — la mention discrète. DISCRÈTE, PAS ILLISIBLE.
   Défaut relevé par la salle du 06/08/2026 (routage n° 9) : la classe portait,
   entre autres, le cumul des options de maintenance.
   LE LEVIER RETENU EST LA COULEUR, pas la taille : à 12,5 px le seuil qui
   s'applique est 4,5:1 ; le seuil allégé de 3:1 ne commence qu'à 24 px (ou
   18,66 px gras). Grossir une mention jusqu'à la taille d'un titre pour la
   rendre conforme serait absurde ; l'assombrir ne coûte rien à la hiérarchie.
   La valeur posée n'est pas neuve : c'est --sceau-encre-fine, employée aussi
   par .note, footer p et .ligne-tarif .v small — aucune couleur ajoutée.
   Mesuré au socle : 6,43:1 sur le papier · 5,78:1 sur la bande.
   ⚠️ À re-mesurer si le papier, la bande ou l'encre changent (ils ne changent pas). */
.note-fine{font-size:12.5px;color:var(--sceau-encre-fine);margin-top:6px;}
.bloc.ink .note-fine{color:var(--sceau-nuit-texte-doux);}

/* .note-cumul — le total que le client paiera VRAIMENT.
   La salle du 06/08 : « le seul nombre qui dit au client ce qu'il paiera
   vraiment est le texte le moins lisible de la page ». Ce n'est pas une
   mention légale : c'est l'information qui l'engage. Elle sort donc de
   .note-fine et prend la taille du texte courant. */
.note-cumul{font-size:15px;color:var(--sceau-encre-douce);margin-top:6px;max-width:70ch;}
.note-cumul b{color:var(--sceau-encre);}
.bloc.ink .note-cumul{color:var(--sceau-nuit-texte-doux);}
.bloc.ink .note-cumul b{color:var(--sceau-nuit-texte);}

/* ══ Liste de tarifs « à la carte » — lignes brutes, prix en mono ══ */
.tarifs{border:1.5px solid var(--sceau-encre);background:var(--sceau-papier);}
.bloc.ink .tarifs{background:var(--sceau-nuit-carte-fond);border-color:var(--sceau-nuit-filet-fort);}
.ligne-tarif{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:18px 22px;border-top:1px solid var(--sceau-filet);}
.bloc.ink .ligne-tarif{border-color:var(--sceau-nuit-filet);}
.ligne-tarif:first-child{border-top:0;}
.ligne-tarif .lib{flex:1 1 auto;}
.ligne-tarif .lib h3{font-family:var(--sceau-texte);font-size:15.5px;font-weight:700;
  line-height:1.35;letter-spacing:0;margin-bottom:4px;}
.ligne-tarif .lib p{font-size:13.5px;color:var(--sceau-encre-douce);max-width:56ch;}
.bloc.ink .ligne-tarif .lib p{color:var(--sceau-nuit-carte-texte);}
.ligne-tarif .v{flex:none;font-family:var(--sceau-mono);font-size:16px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--sceau-cinabre-lisible);text-align:right;}
.bloc.ink .ligne-tarif .v{color:var(--sceau-nuit-carte-texte);}
.ligne-tarif .v small{display:block;font-family:var(--sceau-texte);font-size:11px;
  color:var(--sceau-encre-fine);font-weight:400;}
.bloc.ink .ligne-tarif .v small{color:var(--sceau-nuit-carte-texte);}
.ligne-tarif .v.offert{color:var(--sceau-ok);}
.encart{border-left:3px solid var(--sceau-cinabre);padding:4px 0 4px 22px;margin:28px 0;}
.encart h2,.encart h3{font-size:var(--enk-h3-taille);margin-bottom:8px;}
.encart p{font-size:15px;color:var(--sceau-encre-douce);max-width:70ch;}
.bloc.ink .encart p{color:var(--sceau-nuit-texte-doux);}

/* ══ Méthode — étapes numérotées ══ */
.etapes{display:flex;flex-direction:column;gap:0;}
.etape{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:22px 0;
  border-top:1px solid var(--sceau-filet);}
.etape:first-child{border-top:0;}
.etape .n{font-family:var(--sceau-titre);font-size:26px;color:var(--sceau-cinabre);line-height:1;}
.etape h2,.etape h3{font-size:var(--enk-h3-taille);margin-bottom:8px;}
.etape p{font-size:15px;color:var(--sceau-encre-douce);max-width:64ch;}
@media (max-width:600px){.etape{grid-template-columns:1fr;gap:6px;}
  .etape .n{font-size:19px;}}

/* ══ Configurateur — cartes à cocher ══ */
.choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;}
.opt{position:relative;display:block;border:1.5px solid var(--sceau-encre);background:var(--sceau-papier);
  padding:18px 20px;cursor:pointer;transition:border-color .15s,background .15s;}
.opt input{position:absolute;opacity:0;width:1px;height:1px;}
.opt .t{font-family:var(--sceau-texte);font-size:16px;font-weight:700;display:flex;
  justify-content:space-between;gap:10px;align-items:baseline;}
.opt .p{font-family:var(--sceau-mono);font-weight:400;font-size:14px;
  color:var(--sceau-cinabre-lisible);white-space:nowrap;}
.opt .d{font-size:13.5px;color:var(--sceau-encre-douce);margin-top:7px;}
.opt.gratuit .p{color:var(--sceau-ok);}
.opt:hover{border-color:var(--sceau-cinabre-lisible);}
.opt:has(input:checked){border-color:var(--sceau-cinabre);
  background:color-mix(in srgb,var(--sceau-cinabre) 8%,var(--sceau-papier));}
/* Le losange de case cochée est DESSINÉ, pas écrit : U+25C6 ◆ n'est dans
   aucune des deux polices embarquées (mesuré à la cmap). Un carré tourné à
   45° — le geste du tampon, et zéro dépendance de fonte. */
.opt:has(input:checked) .t::before{content:"";display:inline-block;width:.5em;height:.5em;
  margin-right:.55em;background:var(--sceau-cinabre);transform:rotate(45deg);flex:none;
  align-self:center;}
.opt:has(input:focus-visible){outline:3px solid var(--sceau-focus);outline-offset:2px;}
.opt .voir{display:inline-block;margin-top:9px;font-family:var(--sceau-texte);font-size:12.5px;
  color:var(--sceau-lien);text-decoration:none;border-bottom:1px solid var(--sceau-cinabre);}

.pages-bloc{border:1.5px solid var(--sceau-encre);background:var(--sceau-papier);padding:18px 20px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;}
.pages-bloc label{font-family:var(--sceau-texte);font-size:15.5px;font-weight:700;}
.pages-bloc input[type=number]{background:var(--sceau-bande);color:var(--sceau-encre);
  border:1.5px solid var(--sceau-encre);
  padding:9px 10px;font:inherit;font-family:var(--sceau-mono);font-size:16px;width:5em;text-align:center;}
.pages-bloc .pages-detail{font-size:13.5px;color:var(--sceau-encre-douce);flex:1 1 240px;}
.pages-bloc .pages-detail b{color:var(--sceau-cinabre-lisible);}

.recap{border:2px solid var(--sceau-encre);background:var(--sceau-papier);padding:22px 24px;margin-top:36px;}
.recap h3{font-size:var(--enk-h3-taille);margin-bottom:12px;}
.recap ul{list-style:none;font-size:14.5px;}
.recap li{padding:8px 0;border-top:1px solid var(--sceau-filet);display:flex;justify-content:space-between;gap:14px;}
.recap li:first-child{border-top:none;}
.recap .rien{color:var(--sceau-encre-fine);font-style:italic;}

/* Bloc de coordonnées du configurateur. Ces trois champs remplacent des
   lignes que le visiteur devait taper lui-même dans son courriel : leur mise
   en forme reste volontairement sobre, ce n'est pas un formulaire vitrine mais
   un relevé.
   ⚠️ La bordure d'un champ de saisie est un filet PORTEUR : elle doit tenir
   3:1. C'est --sceau-encre qui la porte ici (16,90:1), jamais --sceau-filet
   (1,41:1, décoratif). */
.coord{margin-top:16px;padding-top:16px;border-top:1px solid var(--sceau-filet);}
.coord .duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.coord label{display:block;font-size:12.5px;color:var(--sceau-encre-fine);margin-bottom:4px;}
.coord input,.coord textarea{width:100%;background:var(--sceau-bande);color:var(--sceau-encre);
  border:1.5px solid var(--sceau-encre);border-radius:0;padding:9px 10px;font:inherit;font-size:14px;}
.coord input:focus-visible,.coord textarea:focus-visible{outline:3px solid var(--sceau-focus);outline-offset:2px;}
.coord textarea{min-height:56px;resize:vertical;margin-top:10px;}
.coord .note-coord{color:var(--sceau-encre-fine);font-size:12px;margin-top:8px;}

.repli{border:2px solid var(--sceau-cinabre);background:var(--sceau-papier);padding:22px 24px;margin-top:20px;}
.repli h3{font-size:var(--enk-h3-taille);margin-bottom:8px;}
.repli .expl{font-size:14.5px;color:var(--sceau-encre-douce);margin-bottom:14px;}
.repli textarea{width:100%;background:var(--sceau-bande);color:var(--sceau-encre);
  border:1.5px solid var(--sceau-encre);
  padding:12px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;}
.repli .actions-repli{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.btn{font-family:var(--sceau-texte);font-weight:700;font-size:14px;letter-spacing:.02em;
  text-transform:uppercase;padding:12px 20px;border:1.5px solid var(--sceau-encre);
  background:var(--sceau-papier);
  color:var(--sceau-encre);cursor:pointer;text-decoration:none;display:inline-block;}
.btn:hover{border-color:var(--sceau-cinabre-lisible);color:var(--sceau-cinabre-lisible);}
.btn.primaire{background:var(--sceau-encre);color:var(--sceau-papier);}
/* Au survol, le bouton primaire devient le bouton du Sceau : aplat de cinabre,
   libellé à l'encre (4,57:1). */
.btn.primaire:hover{background:var(--sceau-bouton-fond);color:var(--sceau-bouton-texte);
  border-color:var(--sceau-encre);}

/* La barre de total est un aplat d'ENCRE, pas de cinabre : elle est présente en
   permanence à l'écran, un aplat rouge collant en bas de page écraserait le
   sceau de l'en-tête. Le filet qui la coiffe, lui, est en cinabre. */
.total{position:sticky;bottom:0;left:0;right:0;background:var(--sceau-encre);color:var(--sceau-papier);
  border-top:3px solid var(--sceau-cinabre);padding:14px min(4vw,26px);z-index:20;margin-top:44px;}
.total-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;}
.chiffres .barre{color:var(--sceau-encre-fine);text-decoration:line-through;
  font-family:var(--sceau-mono);font-size:14px;}
.chiffres .net{font-family:var(--sceau-titre);font-size:28px;line-height:1.05;color:var(--sceau-papier);}
.chiffres .det{color:var(--sceau-papier);font-size:12.5px;}

.note{font-size:12.5px;color:var(--sceau-encre-fine);margin-top:30px;line-height:1.8;
  border-top:1px solid var(--sceau-filet);padding-top:18px;}
.note b{color:var(--sceau-encre);}

/* == Replis mobiles du configurateur ==
   Éléments <details>/<summary> natifs : navigation clavier et lecteurs d'écran
   fonctionnent sans une ligne de JavaScript, et les plis restent ouvrables même
   si aucun script ne se charge.
   Le dépliage automatique sur grand écran passe par ::details-content forcé
   visible, sous @supports. Un navigateur qui ne connaît pas ce sélecteur garde
   des plis FERMÉS mais ouvrables à la main : la dégradation est lisible, jamais
   invisible. C'est la raison du @supports — ne pas le retirer en croyant
   simplifier.
   La mention de TVA reste hors de tout pli, côté HTML.
   Le « + » et le « − » (U+2212) sont présents dans les deux polices — mesuré à
   la cmap le 13/08/2026 — ils restent donc des caractères. == */
.pli summary{cursor:pointer;font-family:var(--sceau-texte);font-size:12.5px;
  color:var(--sceau-lien);padding:11px 0;user-select:none;list-style:none;}
.pli summary::-webkit-details-marker{display:none;}
.pli summary::before{content:"+ ";}
.pli[open] summary::before{content:"\2212\00a0";}
.pli-texte{max-width:56ch;}
.pli-texte p{margin-top:6px;}
/* Règles prévues pour une variante « cartes d'options » du configurateur, non
   utilisée à ce jour : sans les classes correspondantes dans le HTML, elles
   sont inertes. Conservées parce qu'elles coûtent quelques octets et évitent
   de refaire le travail ; à supprimer si la variante est abandonnée. */
.opt-choix{display:block;cursor:pointer;}
.opt-detail .d{margin-top:0;padding-bottom:4px;}
@media (min-width:768px){
  @supports selector(::details-content){
    /* bureau : la page d'aujourd'hui — summaries masqués, contenu déplié d'office. */
    .pli summary{display:none;}
    .pli::details-content{content-visibility:visible;}
    /* exception : les trois plis de la note finale avaient déjà un intitulé en
       gras sur bureau — on garde le summary affiché comme simple libellé. */
    .pli-note summary{display:block;font-family:inherit;font-size:inherit;
      font-weight:bold;color:var(--sceau-encre);padding:6px 0 0;pointer-events:none;}
    .pli-note summary::before,.pli-note[open] summary::before{content:"";}
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}
@media (max-width:600px){
  .choix{grid-template-columns:1fr;}
  .total-in{flex-direction:column;align-items:stretch;text-align:center;}
}