/* ==========================================================================
   EMAH ADVISORY — feuille UNIQUE du site.

   L'ADN commune vit ici et nulle part ailleurs. Avant cette feuille, les
   cinq pages portaient chacune leur <style> inline : trois largeurs de
   colonne (760 / 860 / 1120), trois tailles de texte (16 / 18 / 19), trois
   bords gauches (328 / 378 / 471 px a 1440), et le lockup ecrit cinq fois.
   Personne n'avait mal travaille — c'est la duplication qui derive toute
   seule, parce qu'une correction doit etre faite cinq fois pour tenir.

   Les trois regles de la coquille :
     1. UN SEUL RAIL  — `.wrap` fait --shell (1120px) sur toutes les pages.
        Logo et pied commencent au MEME bord gauche, partout.
     2. DEUX VOIES DANS LE RAIL — a gauche --marge (230px), la voie des
        REPERES : titre de section sur une page de document, sommaire sur
        un article. A droite --mesure, la colonne de LECTURE, exprimee en em
        donc constante a ~72 caracteres quelle que soit la taille du texte.
        C'est la zone ou l'oeil retrouve la ligne suivante sans la chercher.
        Un lecteur qui passe d'une page legale a un article ne change pas de
        grammaire : le repere est toujours a gauche, le texte toujours a
        droite. Le rail est plein, il n'y a plus de vide a droite — c'etait
        le defaut du 21/08 au matin, ou le texte occupait le bord gauche et
        laissait 400px morts.
     3. UNE SEULE ECHELLE — un h1, un h2, un corps de texte. Une page qui a
        besoin d'autre chose l'ecrit dans SON bloc, jamais en redefinissant
        un token ici.
        Corps a 19px depuis le 21/08 (Eddy : « le texte est encore en petit
        de partout » sur les pages legales). Le corps n'etait pas seul en
        cause : le H2 faisait 19 contre un corps a 17, soit un ecart de 12 %
        que l'oeil ne voit pas. Un document dont les titres ne se detachent
        pas se lit petit meme quand son corps est correct. H2 a 24 : le rang
        existe. La colonne suit toute seule, --mesure etant en em.

   Gate : `tests/test_adn_commune.py` refuse toute page qui redefinit un
   token ou une regle de coquille dans son <style> local. On n'interdit pas
   d'ajouter, on interdit de re-diverger en silence.
   ========================================================================== */

:root{
  /* --- couleurs (charte EMAH, brain/style/brand-emah-advisory.md) -------- */
  --bg:#FBFBF8;              /* blanc casse chaud */
  --surface:#FFFFFF;
  --ink:#14201B;             /* texte fort, titres */
  --ink-soft:#3F4B44;        /* corps de texte */
  --ink-mut:#5E6C64;         /* secondaire — 5,3:1 sur --bg ; le --muted de
                                charte (#7C8A82) echoue AA, on ne l'utilise pas */
  --green:#15795B;           /* accent unique */
  --deep:#0B3D2E;            /* wordmark, aplats fonces */
  --paper:#EDEDE6;           /* fond des encarts */
  --line:rgba(20,32,27,.14);
  --line-strong:rgba(20,32,27,.22);

  /* --- geometrie -------------------------------------------------------- */
  --shell:1120px;            /* le rail : largeur du cadre, toutes pages */
  --mesure:38em;             /* la colonne de lecture : ~72 caracteres */
  --gouttiere:clamp(22px,5vw,40px);
  --marge:230px;             /* la voie des reperes, a gauche du texte */
  --entrecolonne:clamp(30px,4.4vw,64px);

  /* --- mouvement -------------------------------------------------------- */
  --t:.16s;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);color:var(--ink-soft);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:400;
  font-size:19px;line-height:1.66;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
::selection{background:rgba(21,121,91,.16)}
:where(a):focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

/* --- le rail --------------------------------------------------------------
   Une seule largeur de cadre pour tout le site. Le contenu de `main` se
   plie a la mesure de lecture ; une page qui veut la pleine largeur (une
   grille a deux colonnes, par exemple) le declare sur l'element concerne. */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gouttiere)}
main .wrap > *{max-width:var(--mesure)}
main .wrap > .pleine-largeur{max-width:none}

/* --- l'en-tete ------------------------------------------------------------
   Le lockup a gauche, une seule sortie a droite. Identique sur toutes les
   pages qui en portent un ; l'accueil n'en a pas (c'est une plaque). */
header{border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}

.back{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mut);transition:color var(--t) ease}
.back:hover{color:var(--green)}

/* --- le lockup ------------------------------------------------------------
   Dessine en CSS, aucun asset : net a toutes les densites. Tout se pilote
   depuis --lh (hauteur du mark). Le meme dessin que l'icone d'onglet et que
   celle du Hub — une seule marque.
   Les margin-right negatifs corrigent la chasse que le letter-spacing
   ajoute APRES la derniere lettre, et qui decentre optiquement un bloc. */
.brand{--lh:34px;display:inline-flex;align-items:center;gap:calc(var(--lh)*.38)}
.mark{flex:none;display:grid;place-items:center;
  width:var(--lh);height:var(--lh);border-radius:calc(var(--lh)*.24);
  background:var(--green);color:#fff;
  font-size:calc(var(--lh)*.50);font-weight:500;line-height:1;padding-right:.02em}
.word{display:flex;flex-direction:column;gap:calc(var(--lh)*.10);line-height:1}
.word b{font-size:calc(var(--lh)*.47);font-weight:600;letter-spacing:.01em;color:var(--deep)}
.word i{font-style:normal;font-size:calc(var(--lh)*.32);font-weight:500;
  letter-spacing:.22em;color:var(--ink-mut);margin-right:-.22em}

/* --- le document ----------------------------------------------------------
   Une seule echelle pour tout le site. Un surtitre en petites capitales, un
   titre serif, un corps de texte. Rien d'autre n'a le droit d'exister sans
   etre ajoute ICI. */
main{padding:clamp(48px,7vw,88px) 0 clamp(60px,8vw,110px)}

.label{font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mut)}

h1{margin-top:14px;font-family:'Newsreader',Georgia,serif;font-weight:300;
  font-size:clamp(34px,5vw,56px);line-height:1.06;letter-spacing:-.02em;
  color:var(--ink);text-wrap:balance}

.updated{margin-top:16px;font-size:16px;color:var(--ink-mut)}

.intro{margin-top:22px;font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--ink-soft);
  text-wrap:pretty}

h2{margin-top:clamp(42px,4.8vw,60px);font-size:24px;font-weight:600;
  letter-spacing:-.008em;color:var(--ink)}
h2 + p{margin-top:14px}

p + p{margin-top:16px}
strong{font-weight:600;color:var(--ink)}
em{font-style:italic}

ul{margin-top:12px;padding-left:1.1em;list-style:disc}
li{margin-top:10px}
li::marker{color:var(--ink-mut)}

/* le lien dans le texte : vert, souligne fin — jamais un bouton */
.lnk{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(21,121,91,.35);
  transition:text-decoration-color var(--t) ease}
.lnk:hover{text-decoration-color:var(--green)}

/* l'adresse mail : l'unique action du site, souligne typographiquement */
.mail{display:inline-block;font-size:21px;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.26em;text-decoration-color:var(--line-strong);
  transition:color var(--t) ease,text-decoration-color var(--t) ease}
.mail:hover{color:var(--green);text-decoration-color:var(--green)}

/* --- le document a marge parlante -----------------------------------------
   Pose le 21/08 apres un « je trouve pas ca ouf » d'Eddy sur les pages
   legales. Ce qui n'allait pas, et qui n'etait pas une question de gout :
   le rail faisait 1120, le texte 722, et rien n'occupait les 400 px de
   droite — ca ne se lit pas comme de l'air, ca se lit comme un document
   tronque. Huit sections sans un repere, sans un filet, sans un numero. Et
   deux voix qui ne se parlaient pas : un H1 serif suivi de H2 en gras
   Inter, la signature d'un document de traitement de texte.

   Le patron : le titre de section vit dans la voie de GAUCHE, le texte dans
   la seconde, et un filet traverse toute la largeur a chaque section. La
   page se balaie verticalement par ses reperes et occupe le rail en entier.

   C'est un SYSTEME, pas une page : dans ce monde-la, la voie de gauche est
   toujours celle des reperes. Le sommaire de l'article y vit aussi, et le
   texte est toujours en seconde colonne. Un ecran qui veut mettre son texte
   ailleurs sort du systeme, il ne l'amenage pas.

   Marquage attendu :
     <div class="document pleine-largeur">
       <div class="head"> label + h1 + updated </div>
       <section id="…"> <h2>…</h2> <div class="txt"> … </div> </section>
   ------------------------------------------------------------------------ */
.document .head,
.document section{display:grid;
  grid-template-columns:var(--marge) minmax(0,var(--mesure));
  column-gap:var(--entrecolonne)}

.document .head .label{grid-column:1;align-self:start;margin-top:16px}
.document .head h1{grid-column:2;margin-top:0}
.document .head .updated{grid-column:2}

.document section{margin-top:clamp(40px,4.6vw,58px);
  padding-top:clamp(26px,2.8vw,34px);border-top:1px solid var(--line)}
/* le repere : petit, dense, en Inter — il ANNONCE la section, il ne la
   crie pas. C'est le filet et la position qui portent la hierarchie, plus
   la graisse du titre. */
.document section h2{grid-column:1;margin-top:0;
  font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:600;
  line-height:1.35;letter-spacing:.01em;color:var(--ink);text-wrap:balance;
  scroll-margin-top:26px}
.document section .txt{grid-column:2}
.document section .txt > :first-child{margin-top:0}

/* sous 900px la marge n'a plus la place d'exister : le repere repasse
   au-dessus de son texte, et reprend une taille de titre. */
@media (max-width:900px){
  .document .head,
  .document section{grid-template-columns:minmax(0,1fr);row-gap:14px}
  .document .head .label,
  .document .head h1,
  .document .head .updated,
  .document section h2,
  .document section .txt{grid-column:1}
  .document .head .label{margin-top:0}
  .document section h2{font-size:21px}
}

/* --- le pied -------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:30px 0 40px}
.foot{display:flex;align-items:center;justify-content:space-between;
  gap:16px 28px;flex-wrap:wrap;font-size:14px;color:var(--ink-mut)}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a{transition:color var(--t) ease}
.foot a:hover{color:var(--green)}
.foot a.cur{color:var(--ink)}

@media (max-width:620px){
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}