/* =============================================================================
   NABSEED · composants
   Aucune valeur littérale de couleur, de police ou de rythme. Tout vient de
   tokens.css. Si un composant a besoin d'une valeur qui n'existe pas en jeton,
   c'est le jeton qui manque, pas la valeur qui s'écrit ici.

   Principe tenu partout : l'espace vide est un élément graphique. Un composant
   qui remplit son conteneur a échoué.
   ============================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--voix-recit);font-weight:300;font-size:var(--t6);
  line-height:1.62;letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--d-reveal) var(--ease),color var(--d-reveal) var(--ease);
}
/* ---- LES TITRES PARLENT DE LA VOIX DE TITRE. Faible specificite a dessein :
   .pied h4, qui est en monospace, la surclasse tout seul et reste en place. */
h1,h2,h3,h4,h5,h6{font-family:var(--voix-titre)}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:var(--bg)}

/* Le focus est visible partout. Une sophistication qui coûte la navigation au
   clavier n'est pas une sophistication. */
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.wrap{padding-inline:var(--pad)}
.sec{padding-block:var(--sec);border-top:var(--filet) solid var(--filet-faible)}
.sec:first-of-type{border-top:0}
.reg-b{background:var(--bg);color:var(--fg)}

/* --------------------------------------------------------------- 01 · EN-TÊTE */
.entete{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);
  padding:18px var(--pad);
  background:rgba(var(--bg-rgb),.88);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:var(--filet) solid var(--filet-faible);
}
@media (prefers-reduced-transparency:reduce){
  .entete{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* Le logotype est un tracé, il ne dépend d'aucune police chargée. */
.marque{display:inline-flex;align-items:center;color:var(--fg)}
.marque svg{height:13px;width:auto;fill:currentColor}
@media(min-width:760px){.marque svg{height:15px}}

/* ------------------------------------------------------------ 02 · NAVIGATION */
.nav{display:none;gap:clamp(18px,2.4vw,34px);align-items:center}
@media(min-width:900px){.nav{display:flex}}
.nav a{
  font-size:var(--t9);letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--fg2);position:relative;padding-block:6px;
  transition:color var(--d-court) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--filet);
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform var(--d-moyen) var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

/* Navigation mobile. Pensée pour le pouce, pas réduite depuis le bureau. */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:0;cursor:pointer;padding:0;
  margin-inline-start:auto;color:var(--fg);
}
@media(min-width:900px){.burger{display:none}}
.burger i{display:block;width:20px;height:var(--filet);background:currentColor;
  transition:transform var(--d-moyen) var(--ease),opacity var(--d-court) var(--ease)}
/* LE BURGER OUVERT, EPAISSI. Les trois barres font un demi-pixel de haut et 20 px de
   long : fermees, elles se lisent tres bien, mais une fois croisees, a 45 degres, sur un
   fond clair, la croix se devine plus qu elle ne se voit. On l epaissit et on l allonge
   a l ouverture seulement, et on lui donne l accent : c est le seul bouton qui ferme le
   menu, il n a pas le droit d etre discret.
   Note pour plus tard : ne PAS poser une croix dans le voile. Le voile porte z-index 39,
   l en-tete 40, et une croix posee dans le voile se retrouve derriere l en-tete, qui
   intercepte son clic. Mesure faite le 18.09.2026 : elementFromPoint rendait HEADER. */
.burger[aria-expanded="true"] i{height:2px;width:24px;background:var(--acc)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.voile{
  position:fixed;inset:0;z-index:39;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:var(--pad);
  opacity:0;visibility:hidden;transition:opacity var(--d-long) var(--ease),visibility var(--d-long);
}
.voile[data-ouvert="true"]{opacity:1;visibility:visible}
.voile a{
  font-size:var(--t2);letter-spacing:var(--ls-soft);line-height:1.24;
  padding-block:10px;color:var(--fg);
  border-bottom:var(--filet) solid var(--filet-faible);
}
.voile a span{font-family:var(--mono);font-size:var(--t9);color:var(--fg2);
  display:block;margin-bottom:4px;letter-spacing:var(--ls-caps)}

/* ----------------------------------------------------------------- 03 · HERO */
.hero{
  min-height:82vh;min-height:82dvh;          /* dvh : vh ment sur Safari iOS */
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--sec) var(--pad) clamp(40px,7vh,90px);
  position:relative;overflow:hidden;
}
.hero h1{
  font-size:var(--t1);font-weight:300;line-height:1.02;letter-spacing:var(--ls-tight);
  margin:0 0 clamp(18px,3vh,34px);max-width:17ch;
}
.hero h1 em{font-style:normal;color:var(--acc);display:block}
.hero .lead{max-width:46ch;margin:0}

/* ------------------------------------------------- 04 · SECTION ÉDITORIALE */
.tete{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:end;margin-bottom:clamp(28px,5vh,54px);padding-inline:var(--pad);
}
.rang{grid-column:1 / -1;font-family:var(--mono);font-size:var(--t9);
  letter-spacing:var(--ls-caps);color:var(--fg2);margin:0 0 12px}
.tete h2{
  grid-column:1 / span 12;margin:0;font-weight:300;
  font-size:var(--t2);line-height:1.1;letter-spacing:var(--ls-soft);
}
.tete .lead{grid-column:1 / span 12;margin:14px 0 0}
@media(min-width:900px){
  .tete h2{grid-column:1 / span 7}
  .tete .lead{grid-column:9 / span 4;margin:0}
}
.lead{font-size:var(--t4);line-height:1.55;color:var(--fg2);max-width:52ch}
.corps{padding-inline:var(--pad);max-width:74ch;color:var(--fg2)}
.corps p{margin:0 0 16px;font-size:var(--t5);line-height:1.68}
.corps p strong{font-weight:500;color:var(--fg)}
.corps p:last-child{margin-bottom:0}

/* ------------------------------------------------------- 05 · BLOC IMAGE */
.visuel{margin-block:clamp(28px,5vh,60px)}
.visuel img{width:100%;object-fit:cover}
.visuel.plein img{height:clamp(280px,62vh,660px)}
.visuel.duo{display:grid;gap:var(--gap);padding-inline:var(--pad)}
@media(min-width:760px){.visuel.duo{grid-template-columns:1fr 1fr}}
.visuel figcaption{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2);margin-top:12px;padding-inline:var(--pad);
}
.visuel.duo figcaption{padding-inline:0}

/* ------------------------------------------------------------ 06 · CITATION */
.citation{padding-inline:var(--pad);margin-block:clamp(34px,6vh,80px)}
.citation blockquote{
  margin:0;font-size:var(--t3);font-weight:300;line-height:1.34;
  letter-spacing:var(--ls-soft);max-width:26ch;color:var(--fg);
}
.citation cite{
  display:block;margin-top:16px;font-style:normal;font-family:var(--mono);
  font-size:var(--t9);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg2);
}

/* ------------------------------------------------------- 07 · BLOC DE RÉCIT */
.recit{padding-inline:var(--pad);display:grid;gap:var(--gap)}
@media(min-width:900px){.recit{grid-template-columns:1fr 1fr;align-items:start}}
.recit .part{border-top:var(--filet) solid var(--filet-net);padding-top:20px}
.recit .part h3{
  margin:0 0 10px;font-weight:400;font-size:var(--t3);letter-spacing:var(--ls-soft);
}
.recit .part p{margin:0;color:var(--fg2);font-size:var(--t5);line-height:1.66}
.recit .part .n{
  font-family:var(--mono);font-size:var(--t9);color:var(--acc);
  letter-spacing:var(--ls-caps);display:block;margin-bottom:10px;
}

/* ------------------------------------------------------- 08 · MARQUEUR, LOT */
.marqueur{
  display:grid;grid-template-columns:34px 1fr;gap:var(--gap);
  align-items:baseline;padding:16px 0;
  border-bottom:var(--filet) solid var(--filet-faible);
}
@media(min-width:760px){.marqueur{grid-template-columns:44px 1.3fr 1.7fr auto}}
.marqueur .n{font-family:var(--mono);font-size:var(--t9);color:var(--fg2)}
.marqueur b{font-weight:400;font-size:var(--t5)}
.marqueur p{margin:6px 0 0;color:var(--fg2);font-size:var(--t7);grid-column:2 / -1}
@media(min-width:760px){.marqueur p{margin:0;grid-column:auto}}
.marqueur .etat{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2);white-space:nowrap;grid-column:2 / -1;
}
@media(min-width:760px){.marqueur .etat{grid-column:auto;text-align:right}}

.fiche{padding-inline:var(--pad)}
.carte{border:var(--filet) solid var(--filet-net);padding:clamp(22px,4vw,44px)}
.carte .haut{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  align-items:baseline;margin-bottom:24px;
}
.carte .haut b{font-family:var(--mono);font-weight:400;font-size:var(--t4);letter-spacing:.06em}
.carte .haut span{font-family:var(--mono);font-size:var(--t9);color:var(--fg2)}
.ligne{
  display:grid;grid-template-columns:1fr auto auto;gap:var(--gap);
  align-items:baseline;padding:12px 0;
  border-bottom:var(--filet) solid var(--filet-faible);font-size:var(--t7);
}
.ligne:last-of-type{border-bottom:0}
.ligne.fort{color:var(--fg)}
.ligne var{font-family:var(--mono);font-style:normal;color:var(--fg)}
.ligne .st{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg2);white-space:nowrap;font-style:normal;
}
.ligne .st-mesure,.ligne .st-verifiable{color:var(--acc)}
@media(max-width:520px){
  .ligne{grid-template-columns:1fr auto;row-gap:4px}
  .ligne .st{grid-column:1 / -1;text-align:right}
}
.carte .bas{margin:24px 0 0;font-size:var(--t7);color:var(--fg2);max-width:66ch}

/* ------------------------------------------------------------- 09 · PRODUIT */
.produits{padding-inline:var(--pad);display:grid;gap:var(--gap)}
@media(min-width:760px){.produits{grid-template-columns:repeat(3,1fr)}}
.produit{border-top:var(--filet) solid var(--filet-net);padding-top:20px}
.produit .k{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--acc);display:block;margin-bottom:10px;
}
.produit h3{margin:0 0 8px;font-weight:400;font-size:var(--t3);letter-spacing:var(--ls-soft)}
.produit p{margin:0;color:var(--fg2);font-size:var(--t7);line-height:1.62}
.produit dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  font-family:var(--mono);font-size:var(--t9)}
.produit dt{color:var(--fg2);letter-spacing:.06em;text-transform:uppercase}
.produit dd{margin:0;color:var(--fg)}

/* ------------------------------------------------------------- 10 · APPEL */
/* Pas de bouton encadré : un cadre est une injonction, une injonction est une
   persuasion. La grammaire admise est le filet et la flèche. */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg);padding-block:10px;
  border-bottom:var(--filet) solid var(--filet-net);
  transition:color var(--d-court) var(--ease),border-color var(--d-court) var(--ease);
}
.btn:hover{color:var(--acc);border-color:var(--acc)}
.btn .arw{
  width:26px;height:var(--filet);background:currentColor;position:relative;
  transition:width var(--d-moyen) var(--ease);
}
.btn:hover .arw{width:38px}
.btn .arw::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:var(--filet) solid currentColor;border-right:var(--filet) solid currentColor;
  transform:rotate(45deg);
}
.btn.acc{color:var(--acc);border-color:var(--acc)}
.appels{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);padding-inline:var(--pad);
  margin-top:clamp(22px,4vh,44px)}

/* ------------------------------------------------- 11 · INDICATEUR DE CHAPITRE */
.chapitre{
  position:fixed;left:var(--pad);bottom:26px;z-index:30;
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2);pointer-events:none;
  opacity:0;transition:opacity var(--d-long) var(--ease);
}
.chapitre[data-actif="true"]{opacity:1}
@media(max-width:760px){.chapitre{display:none}}

/* --------------------------------------------------------------- 12 · PIED */
.pied{
  border-top:var(--filet) solid var(--filet-faible);
  padding:clamp(40px,7vh,84px) var(--pad) clamp(26px,4vh,44px);
  display:grid;gap:var(--gap);
}
@media(min-width:760px){.pied{grid-template-columns:1.4fr 1fr 1fr}}
.pied h4{
  margin:0 0 12px;font-family:var(--mono);font-weight:400;font-size:var(--t9);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--fg2);
}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pied a{font-size:var(--t7);color:var(--fg2);transition:color var(--d-court) var(--ease)}
.pied a:hover{color:var(--fg)}
.pied .legal{
  grid-column:1 / -1;border-top:var(--filet) solid var(--filet-faible);
  margin-top:clamp(24px,4vh,44px);padding-top:20px;
  font-family:var(--mono);font-size:var(--t9);color:var(--fg2);
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
}

/* ------------------------------------------------------------ 13 · RÉVÉLATION */
/* Le mouvement sert le temps. Il joue une fois, il ne boucle jamais, et il
   disparaît entièrement si le lecteur a demandé moins d'animation. */
.rise{opacity:0;transform:translateY(14px);
  transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease)}
.rise.in{opacity:1;transform:none}
.d1{transition-delay:.09s}.d2{transition-delay:.18s}.d3{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
}

/* --------------------------------------------------------------- 14 · DEMANDE */
.form{padding-inline:var(--pad);display:grid;gap:var(--gap);max-width:640px}
.champ{display:grid;gap:7px}
.champ label{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2);
}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-size:var(--t6);font-weight:300;color:var(--fg);
  background:transparent;border:0;border-bottom:var(--filet) solid var(--filet-net);
  padding:10px 0;border-radius:var(--rayon);
  transition:border-color var(--d-court) var(--ease);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--acc)}
.champ textarea{resize:vertical;min-height:96px;line-height:1.6}
.paire{display:grid;gap:var(--gap)}
@media(min-width:600px){.paire{grid-template-columns:1fr 1fr}}
.form .note{font-family:var(--mono);font-size:var(--t9);color:var(--fg2);line-height:1.7}

/* ----------------------------------------------------------- 15 · ÉTATS VIDES */
.vide{
  padding-inline:var(--pad);font-family:var(--mono);font-size:var(--t7);
  color:var(--fg2);border-left:2px solid var(--acc);padding-block:14px;
}

/* =============================================================================
   RAILS AU DOIGT, sous 760 px. Une liste de trois ou quatre blocs empiles fait
   defiler le telephone sur trois ecrans pour dire une seule chose. En rail, elle
   tient sur un ecran et se parcourt au pouce, comme tout le reste du telephone.

   Aucun script. Le defilement tactile, l'inertie et l'accrochage sont natifs :
   c'est plus fluide que n'importe quel carrousel fait main, et ca marche meme si
   le JS ne se charge pas. scroll-snap accroche chaque carte, overscroll-behavior
   empeche le geste de faire reculer la page.

   La carte ne fait pas toute la largeur : la suivante depasse de 18 %, et cette
   amorce est ce qui dit au doigt qu'il y a autre chose a droite. Un rail dont on
   ne voit pas le bord suivant se lit comme une colonne et ne se fait pas glisser.
   ============================================================================= */
@media(max-width:759px){
  .gammes,.axes,.preuves,.produits{
    display:flex;gap:var(--gap);
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-padding-left:var(--pad);
    padding-bottom:14px;
    /* LE RAIL NE SORT PLUS DES MARGES, et voici pourquoi.
       L intention etait que la carte affleure le bord de l ecran. Mais la marge
       negative annulait un padding de page que le parent NE PORTE PAS : mesure le
       18.09.2026, SECTION.sec a padding-left 0. Elle ne compensait donc rien, elle
       faisait deborder, de 20 px a gauche et 20 a droite, sur tous les telephones.
       Le padding interne suffit a l effet voulu : la premiere carte demarre a la
       marge de page, et les suivantes passent sous le bord quand on fait glisser. */
    padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .gammes::-webkit-scrollbar,.axes::-webkit-scrollbar,
  .preuves::-webkit-scrollbar,.produits::-webkit-scrollbar{display:none}

  .gammes>*,.axes>*,.preuves>*,.produits>*{
    flex:0 0 82%;scroll-snap-align:start;min-width:0;
  }
  /* les axes portent des filets de separation verticaux en grille : en rail ils
     deviennent un cadre par carte, sinon le dernier filet flotte dans le vide */
  .axes{border-top:0}
  .axes>*{
    border-bottom:0;border-top:1px solid var(--filet-net);
    padding:20px 0 0;
  }
  .preuves>*{padding-top:16px}
}

/* Le pouce vise 44 px. Sous cette taille, une cible se rate une fois sur trois,
   et l'erreur ne se voit sur aucune capture d'ecran. */
@media(max-width:759px) and (pointer:coarse){
  .langue button{min-height:44px}
  /* La puce est un trait d'un pixel : lui donner 44 px de haut en ferait un bloc.
     On agrandit la ZONE ATTEIGNABLE, pas le dessin, avec un pseudo-element
     transparent qui deborde. Le trait reste un trait, le pouce touche 44 px. */
  .puces button{position:relative}
  .puces button::after{content:"";position:absolute;left:-6px;right:-6px;top:-22px;bottom:-22px}
}

/* =============================================================================
   GARDE-FOU RESPONSIVE, pose le 18.09.2026 apres mesure.

   LE DEFAUT. Les rails glissants (.gammes, .axes, .preuves, .produits) sortent des
   marges de page par une marge negative, pour que la premiere carte affleure le bord.
   L intention est bonne, mais rien ne retenait ce debordement : mesure a 390 px de
   large, le document faisait 395 px pour une fenetre de 375, soit 20 px de defilement
   horizontal parasite sur TOUS les telephones. Sur tablette et bureau, zero.

   POURQUOI overflow-x:clip ET NON hidden. hidden fabrique un conteneur de defilement,
   et un conteneur de defilement casse position:sticky des elements qu il contient :
   l en-tete, justement, est collant. clip coupe sans creer ce conteneur, donc l en-tete
   survit. Le repli hidden n est servi qu aux navigateurs qui ignorent clip, ou le
   debordement est le defaut le plus grave des deux.

   Mesure a refaire apres toute modification des rails : scrollWidth doit valoir
   clientWidth a 320, 360, 390, 430, 768, 1024 et 1440.
   ============================================================================= */
html{overflow-x:clip}
@supports not (overflow:clip){html{overflow-x:hidden}}

/* =============================================================================
   LE SELECTEUR DE LANGUE, DANS LE MENU. Decision du fondateur, 18.09.2026.

   Il etait pose a cote du menu, comme un outil de l en-tete. Une langue n est pas un
   outil de page, c est une entree de navigation. Deux consequences de le deplacer, et
   les deux se reglent ici :

   1. Dans la barre de navigation, il devient le dernier element du menu. On le detache
      legerement des pages par un filet vertical : c est une entree d une autre nature,
      et rien ne doit laisser croire qu on va vers une septieme page.
   2. Sous 900 px la barre de navigation est masquee. Si le selecteur n existait que
      dans elle, il DISPARAITRAIT du site sur tout telephone. Il est donc aussi en pied
      du menu plein ecran, ou il retrouve la seule place qui ait un sens.
   ============================================================================= */
.nav .langue{
  margin-inline-start:clamp(10px,1.4vw,20px);
  padding-inline-start:clamp(12px,1.6vw,22px);
  border-inline-start:1px solid var(--filet-faible);
}

/* le pied de langues du menu plein ecran */
.voile-langues{
  display:flex;gap:22px;align-items:center;
  /* pas de margin-top:auto : le voile centre ses enfants, et une marge automatique y
     pousserait tout le menu vers le haut au lieu de descendre ce seul bloc. Les langues
     se posent donc juste sous les entrees, dans le meme bloc centre. */
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--filet-faible);
}
.voile-langues a{
  font-family:var(--mono);font-size:var(--t9);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--fg2);text-decoration:none;
  /* Une cible au doigt fait 44 px. Le commentaire precedent l affirmait, la mesure
     disait 33 : l affirmation etait fausse. On impose donc la hauteur au lieu de
     l esperer d un padding, et on centre le texte dedans. */
  min-height:44px;display:inline-flex;align-items:center;padding:0 4px;
  transition:color var(--d-court) var(--ease);
}
.voile-langues a:hover,.voile-langues a[aria-current]{color:var(--acc)}