/* ==========================================================================
   Groupe Balthazar — charte v3 (11/08/2026)
   MOBILE-FIRST. 80 % du trafic est mobile : le socle est le telephone,
   les media queries n'AJOUTENT que pour les grands ecrans.

   ── CE QUI A CHANGE EN v3, ET POURQUOI ───────────────────────────────
   La v2 etait sobre, pas delicate : sans-serif systeme, gras 700 partout,
   cartes rectangulaires cerclees. Elle gardait la COULEUR du logo et
   perdait sa MAIN. Le logo est une aquarelle avec un script manuscrit :
   finesse, volupte, delicatesse. Six leviers, par ordre d'impact —
     1. un SERIF a fort contraste de graisse (Cormorant Garamond), en
        graisse LEGERE : c'est 80 % du ressenti ;
     2. l'ITALIQUE serif pour les accroches — la volupte tient a ca ;
     3. le VIDE : interlignes larges, colonnes etroites, marges genereuses ;
     4. MOINS DE BOITES : un cadre ferme est dur ; un filet, un fond a
        peine teinte et une ombre diffuse sont doux ;
     5. le FILET DORE de 1 px, repris de l'aquarelle du logo ;
     6. de VRAIS lavis, et l'etoile a 4 branches en ornement.

   ⚠️ UNE SEULE COULEUR D'ACTION : --action (#2F6B4F). Le sauge #A0B59A est
      la MARQUE et une SURFACE — jamais un bouton : sauge + blanc = 2,19:1.
   ⚠️ L'or #C9A227 = 2,42:1 sur blanc : ORNEMENT SEUL, jamais du texte.
   ⚠️ Le serif est reserve aux TITRES et aux ACCROCHES. Le corps reste en
      sans-serif : un Garamond fin en petit corps fatigue sur telephone.
   ⚠️ Cormorant a une petite hauteur d'x : a taille egale il parait plus
      petit qu'une sans-serif. Les tailles de titre sont donc majorees.
   ========================================================================== */

/* --- police auto-hebergee (SIL OFL 1.1, licence dans assets/polices/) ---
   ⚠️ AUCUN appel a Google Fonts : RGPD (l'IP du visiteur partirait chez un
      tiers) et performance (une connexion de moins). */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('../polices/cormorant-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('../polices/cormorant-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../polices/cormorant-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../polices/cormorant-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('../polices/cormorant-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('../polices/cormorant-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- la sans-serif de texte : Mulish (SIL OFL 1.1, 52 Ko) --------------
   ⚠️ REMPLACE `ui-sans-serif` le 11/08. La police systeme resout vers Segoe
      UI sur Windows et San Francisco sur Mac : une grotesque NEUTRE, aux
      terminaisons droites et a l'axe vertical. Cormorant est un Garamond de
      Renaissance — axe oblique, formes calligraphiques. Les deux ne
      s'accordaient pas, et cela se voyait.
      Mulish est une geometrique HUMANISTE : formes ouvertes, hauteur d'x
      genereuse (donc lisible en petit corps sur telephone), sans les
      terminaisons seches d'une grotesque. Elle tient la conversation avec
      un Garamond sans lui voler la vedette.
   ⚠️ Deux graisses seulement (400 et 600) : chaque graisse ajoutee coute
      26 Ko, et le site n'en demande pas plus. */
@font-face {
  font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../polices/mulish-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Mulish'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../polices/mulish-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:'Mulish'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../polices/mulish-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:'Mulish'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../polices/mulish-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --encre:        #2A2F28;
  --encre-doux:   #55604F;
  --action:       #2F6B4F;
  --action-fonce: #24543E;
  --sauge:        #A0B59A;
  --sauge-clair:  #D8E0D4;
  --sauge-voile:  #EDF2EB;
  --creme:        #F7F9F5;
  --or:           #C9A227;
  --or-voile:     rgba(201,162,39,.34);
  --blanc:        #FFFFFF;
  --trait:        rgba(42,47,40,.09);

  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem;
  --e5:1.5rem; --e6:2rem;  --e7:3.25rem; --e8:5rem; --e9:7rem;

  --titre: 'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --texte: 'Mulish', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
           Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-xs:.8125rem; --t-sm:.9375rem; --t-md:1rem; --t-lg:1.125rem;

  --rayon: 10px;
  --ombre:  0 1px 2px rgba(42,47,40,.04), 0 8px 30px rgba(47,107,79,.055);
  --ombre-f: 0 2px 6px rgba(42,47,40,.05), 0 18px 46px rgba(47,107,79,.11);
  --largeur: 1140px;
}

/* --- socle ------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family: var(--texte); font-size: var(--t-md);
  line-height: 1.78;                    /* le vide : premier levier de douceur */
  color: var(--encre); background: var(--blanc);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img,svg,video { max-width:100%; height:auto; display:block; }
a { color: var(--action); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color: var(--action-fonce); }
:focus-visible { outline:2px solid var(--action); outline-offset:4px; border-radius:3px; }

/* --- typographie : le serif, en graisse legere ------------------------ */
h1,h2,h3,h4 {
  font-family: var(--titre); font-weight: 300;
  line-height: 1.14; letter-spacing:-.012em;
  margin: 0 0 var(--e4); color: var(--encre);
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2.05rem; }
h3 { font-size: 1.45rem; font-weight: 400; letter-spacing:-.005em; }
h4 { font-size: 1.2rem;  font-weight: 400; }
p { margin: 0 0 var(--e4); }
ul,ol { margin:0 0 var(--e4); padding-left:1.15rem; }
li { margin-bottom: var(--e2); }
strong { font-weight: 600; }        /* 700 fait lourd : 600 suffit */
em { font-family: var(--titre); font-style: italic; font-size:1.08em; }

.defile-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- mise en page ----------------------------------------------------- */
.conteneur { width:100%; max-width:var(--largeur); margin:0 auto; padding:0 var(--e5); }
.section { padding: var(--e8) 0; }
.section-creme { background: var(--creme); }
.section-voile { background: var(--sauge-voile); }

/* Lavis d'aquarelle : trois taches douces qui se recouvrent, jamais un
   aplat franc. C'est le principe graphique du logo, transpose en CSS. */
.lavis {
  position: relative;
  background:
    radial-gradient(62% 48% at 8%  -6%,  rgba(160,181,154,.40), transparent 68%),
    radial-gradient(46% 40% at 96% 12%,  rgba(201,162,39,.14),  transparent 70%),
    radial-gradient(70% 55% at 60% 106%, rgba(160,181,154,.22), transparent 72%),
    var(--creme);
}

/* --- ornement : filet — etoile — filet -------------------------------- */
.ornement {
  display:flex; align-items:center; justify-content:center; gap:var(--e4);
  margin: var(--e6) 0; color: var(--or); font-size:.8rem; line-height:1;
}
.ornement::before, .ornement::after {
  content:""; display:block; width:clamp(36px,12vw,88px); height:1px;
  background: linear-gradient(90deg, transparent, var(--or-voile), transparent);
}

/* --- en-tete ---------------------------------------------------------- */
.entete {
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete-rangee { display:flex; align-items:center; justify-content:space-between; gap:var(--e4); min-height:72px; }
.logo { display:inline-flex; align-items:center; }
.logo img { height:42px; width:auto; }

/* ⚠️⚠️ LE MENU MOBILE — mesure au navigateur le 11/08, menu OUVERT :
   la nav faisait 121 px de large, plantee a x=230, coincee a cote du
   burger comme troisieme element d'un flex `row nowrap`. Sept liens
   empiles sur 121 px. Sur 80 % de trafic mobile, c'est le pire endroit
   possible — et rien ne le signalait : la page repondait 200 et le menu
   « s'ouvrait » bien.
   La correction tient a `flex-wrap` + `flex-basis:100%` : la nav passe
   a la ligne et prend toute la largeur. Le reste est du confort. */
.bascule-nav { display:none; }
.entete-rangee { flex-wrap: wrap; }

.burger {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border:1px solid var(--trait);
  border-radius:50%; background:transparent; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.burger:hover { background: var(--sauge-voile); }
.burger span, .burger span::before, .burger span::after {
  content:""; display:block; width:19px; height:1px;
  background: var(--encre); border-radius:1px;
  transition: transform .28s ease, opacity .2s ease;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(5px); }
/* ouvert : les trois traits deviennent une croix — l'etat est LISIBLE */
.bascule-nav:checked ~ .burger { background: var(--sauge-voile); border-color: var(--sauge); }
.bascule-nav:checked ~ .burger span { background: transparent; }
.bascule-nav:checked ~ .burger span::before { transform: rotate(45deg); }
.bascule-nav:checked ~ .burger span::after  { transform: rotate(-45deg) translateY(0); }

.nav { display:none; }
.bascule-nav:checked ~ .nav {
  display:block;
  flex-basis:100%;          /* ⚠️ LA ligne qui repare : passe a la ligne */
  order:3;                  /* et se place APRES logo et burger */
}
.nav ul {
  list-style:none; margin:0; padding: var(--e4) 0 var(--e6);
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--trait);
}
.nav li { margin:0; }
.nav li + li { border-top:1px solid var(--trait); }
.nav a {
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--e4) var(--e1); min-height:54px;   /* geste au pouce, confortable */
  color: var(--encre); text-decoration:none;
  font-family: var(--titre); font-size:1.35rem; font-weight:300; letter-spacing:0;
}
/* le chevron n'est pas decoratif : il dit que la ligne entiere est cliquable */
.nav a::after { content:"→"; color: var(--sauge); font-family: var(--texte); font-size:1rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--action-fonce); }
.nav a[aria-current="page"]::after { content:"✦"; color: var(--or); }
/* le bouton se detache de la liste et prend toute la largeur */
.nav li:has(.btn-1) { border-top:0; margin-top: var(--e5); }
.nav a.btn-1 { justify-content:center; font-family: var(--texte); font-size: var(--t-sm); font-weight:500; }
.nav a.btn-1::after { content:none; }

/* ⚠️⚠️ Le bouton de la nav doit REPRENDRE ses couleurs : `.nav a` a une
   specificite de 0,1,1 et l'emporte sur `.btn-1` (0,1,0). Sans ces lignes,
   « Parlons-en » sortait en texte ENCRE sur fond VERT FONCE — 2,04:1,
   illisible. Trouve par le DOM le 11/08, pas a l'oeil. */
.nav a.btn-1 { color: var(--blanc); background: var(--action); }
.nav a.btn-1:hover, .nav a.btn-1[aria-current="page"] { color: var(--blanc); background: var(--action-fonce); }

/* --- boutons : plus fins, plus larges, moins gras --------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  padding: var(--e3) var(--e6); min-height:48px;      /* cible tactile */
  border-radius:999px; border:1px solid transparent;
  font-family: var(--texte); font-size: var(--t-sm); font-weight:500;
  letter-spacing:.045em; text-decoration:none; cursor:pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.btn-1 { background: var(--action); color: var(--blanc); }
.btn-1:hover { background: var(--action-fonce); color: var(--blanc); transform: translateY(-1px); }
.btn-2 { background: transparent; color: var(--action); border-color: rgba(47,107,79,.35); }
.btn-2:hover { background: var(--action); color: var(--blanc); border-color: var(--action); }
.btn-large { padding: var(--e4) var(--e7); font-size: var(--t-md); }
.btns { display:flex; flex-direction:column; gap:var(--e3); }

/* --- hero ------------------------------------------------------------- */
.hero { padding: var(--e8) 0 var(--e9); }
.hero h1 { font-size:2.9rem; margin-bottom: var(--e5); max-width:16ch; }
.hero .accroche {
  font-family: var(--titre); font-style: italic; font-weight:400;
  font-size:1.4rem; line-height:1.55; color: var(--encre-doux);
  max-width: 44ch; margin-bottom: var(--e6);
}
.surtitre {
  display:inline-flex; align-items:center; gap:var(--e2);
  margin-bottom: var(--e4);
  font-family: var(--texte); font-size:.72rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color: var(--action);
}
.surtitre::before { content:"✦"; color: var(--or); letter-spacing:0; font-size:.85rem; }

/* --- hero a deux colonnes --------------------------------------------- */
/* Le texte garde sa colonne etroite, et on met QUELQUE CHOSE en face :
   sans ca, le h1 occupait 43 % de la largeur et laissait 661 px de vide.
   ⚠️ Sur mobile, la colonne laterale passe simplement dessous. */
.hero-duo { display:grid; grid-template-columns:1fr; gap: var(--e7); align-items:center; }
.hero-cote { display:grid; gap: var(--e5); }
.hero-cote .preuve { text-align:left; padding:0; border-left:1px solid var(--or-voile); padding-left: var(--e5); }
@media (min-width:1000px) {
  .hero-duo { grid-template-columns: 1.15fr .85fr; gap: var(--e9); }
  .hero-duo .accroche { margin-bottom: var(--e6); }
}

/* Les deux registres de titre sont definis EN FIN DE FEUILLE : voir la
   section « registres de titre ». Les poser ici ne marchait pas. */


/* La valeur du bloc « en bref » : lisible, pas un chiffre-vedette. */
.bref-valeur { display:block; font-family: var(--titre); font-size:1.25rem;
  font-weight:400; line-height:1.35; color: var(--encre); }
.hero-cote .preuve .preuve-lb { font-size:.68rem; text-transform:uppercase;
  letter-spacing:.18em; color: var(--action); }


/* Le portrait : rond, filet dore — le meme geste que les ornements. */
.portrait-img img { border-radius:50%; box-shadow: var(--ombre-f);
  border:1px solid var(--or-voile); max-width:320px; margin-inline:auto; }
@media (min-width:1000px) { .portrait-img img { max-width:100%; } }

/* --- tuiles : plus de cadre, un filet dore au survol ------------------ */
.tuiles { display:grid; grid-template-columns:1fr; gap: var(--e5); }
.tuile {
  position:relative; display:flex; flex-direction:column; gap:var(--e3);
  padding: var(--e6) var(--e5) var(--e5);
  background: var(--blanc); border:0; border-radius: var(--rayon);
  box-shadow: var(--ombre); text-decoration:none; color: var(--encre);
  transition: transform .26s ease, box-shadow .26s ease;
}
.tuile::after {                       /* le filet dore, qui se revele */
  content:""; position:absolute; left:var(--e5); right:var(--e5); bottom:0;
  height:1px; background: linear-gradient(90deg, transparent, var(--or), transparent);
  opacity:0; transition: opacity .26s ease;
}
.tuile:hover, .tuile:focus-visible { transform: translateY(-4px); box-shadow: var(--ombre-f); color: var(--encre); }
.tuile:hover::after, .tuile:focus-visible::after { opacity:.8; }
.tuile h3 { margin:0; font-size:1.4rem; }
.tuile p  { margin:0; color: var(--encre-doux); font-size: var(--t-sm); line-height:1.7; }
.tuile .etoile { color: var(--or); font-size:1rem; line-height:1; }
.tuile .fleche { margin-top:auto; padding-top: var(--e4); color: var(--action); font-size: var(--t-xs); letter-spacing:.1em; text-transform:uppercase; }

/* --- cartes ----------------------------------------------------------- */
.grille { display:grid; grid-template-columns:1fr; gap: var(--e5); }
.carte { padding: var(--e6) var(--e5); background: var(--blanc); border:0; border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-sauge { background: var(--sauge-voile); box-shadow:none; }
.carte-nue { background:transparent; box-shadow:none; padding: var(--e4) 0; border-top:1px solid var(--trait); }

/* --- chiffres cles : sans boite, separes par un filet ----------------- */
.preuves { display:grid; grid-template-columns:repeat(2,1fr); gap: var(--e5) var(--e4); }
.preuve { text-align:center; padding: var(--e3) var(--e2); }
.preuve-nb {
  display:block; font-family: var(--titre); font-weight:300;
  font-size:2.7rem; line-height:1; color: var(--action); letter-spacing:-.02em;
}
.preuve-lb { display:block; font-size: var(--t-xs); color: var(--encre-doux); margin-top: var(--e2); line-height:1.5; }

/* --- etapes ----------------------------------------------------------- */
.etapes { list-style:none; margin:0; padding:0; display:grid; gap: var(--e6); }
.etape { display:flex; gap: var(--e4); margin:0; }
.etape-nb {
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--or-voile); background:transparent; color: var(--action);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--titre); font-size:1.3rem; font-weight:400;
}
.etape h3 { font-size:1.2rem; margin-bottom: var(--e1); }
.etape p  { margin:0; color: var(--encre-doux); font-size: var(--t-sm); }

/* --- listes a etoile -------------------------------------------------- */
.liste-etoile { list-style:none; padding:0; }
.liste-etoile li { position:relative; padding-left:1.7rem; }
.liste-etoile li::before { content:"✦"; position:absolute; left:0; top:.1em; color: var(--or); font-size:.85em; }

/* --- prose ------------------------------------------------------------ */
/* ⚠️ `margin-inline:auto` : la colonne de lecture reste etroite (62 car,
   la bonne mesure typographique) mais elle est CENTREE. Mesure du 11/08 :
   collee a gauche, elle laissait 703 px de vide a droite sur un ecran de
   1440 — un vide SUBI, pas compose. Centre, il devient symetrique. */
.prose { max-width:62ch; line-height:1.85; margin-inline:auto; }
.prose h2 { margin-top: var(--e8); }
.prose h3 { margin-top: var(--e6); }
.prose > p:first-of-type { font-size:1.1rem; }

/* --- sommaire d'article ----------------------------------------------- */
/* MOBILE D'ABORD : un <details> replie qui ne repousse pas l'article.
   Sur grand ecran il devient une colonne collante a gauche — utile pour
   le lecteur, et il compose le vide lateral (36 % d'occupation mesures). */
.article-duo { display:grid; grid-template-columns:1fr; gap: var(--e6); }
.sommaire-boite {
  border:1px solid var(--trait); border-radius: var(--rayon);
  background: var(--creme); padding: var(--e4) var(--e5);
}
.sommaire-boite summary {
  cursor:pointer; list-style:none; font-family: var(--texte);
  font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color: var(--action); padding: var(--e2) 0;
}
.sommaire-boite summary::-webkit-details-marker { display:none; }
.sommaire-boite summary::after { content:" ▾"; color: var(--or); }
.sommaire-boite[open] summary::after { content:" ▴"; }
.sommaire-boite ol { list-style:none; margin: var(--e3) 0 0; padding:0; counter-reset: som; }
.sommaire-boite li { margin:0; counter-increment: som; }
.sommaire-boite a {
  display:block; padding: var(--e2) 0; padding-left:1.9rem; position:relative;
  color: var(--encre-doux); text-decoration:none;
  font-size: var(--t-sm); line-height:1.45;
  border-top:1px solid var(--trait);
}
.sommaire-boite li:first-child a { border-top:0; }
.sommaire-boite a::before {
  content: counter(som, decimal-leading-zero);
  position:absolute; left:0; top: var(--e2);
  font-family: var(--titre); font-size:.85rem; color: var(--or);
}
.sommaire-boite a:hover { color: var(--action-fonce); }

/* ⚠️ L'ancre doit s'arreter SOUS l'en-tete collant, sinon le titre vise
   passe dessous et le lecteur croit avoir rate le lien. */
.prose-article h2 { scroll-margin-top: 90px; }

@media (min-width:1100px) {
  .article-duo { grid-template-columns: 260px 1fr; gap: var(--e8); align-items:start; }
  .sommaire { position:sticky; top: 96px; }
  .sommaire-boite { background:transparent; border:0; border-left:1px solid var(--or-voile); border-radius:0; padding: 0 0 0 var(--e5); }
  .sommaire-boite summary { pointer-events:none; }   /* toujours ouvert ici */
  .sommaire-boite summary::after { content:none; }
  .prose-article { margin-inline:0; max-width:68ch; }
}

/* --- FAQ : plus de cadre, un filet entre les questions ---------------- */
.faq { display:grid; gap:0; }
.faq-item { padding: var(--e5) 0; border-top:1px solid var(--trait); }
.faq-item:last-child { border-bottom:1px solid var(--trait); }
.faq-item h3 { font-size:1.3rem; margin-bottom: var(--e3); }
.faq-item p  { margin:0; color: var(--encre-doux); font-size: var(--t-sm); max-width:64ch; }
/* ⚠️ Sur grand ecran, la question passe A GAUCHE et la reponse A DROITE.
   Mesure du 11/08 : empilees, les reponses n'occupaient que 36 % de la
   largeur et laissaient 754 px de vide. En deux colonnes, la ligne de
   lecture reste courte ET la largeur est occupee — on ne gagne pas l'un
   contre l'autre. Motif classique de l'edition. */
@media (min-width:1100px) {
  .faq-item { display:grid; grid-template-columns: 1fr 1.35fr; gap: var(--e7); align-items:start; }
  .faq-item h3 { margin-bottom:0; }
  .faq-item p  { max-width:none; }
}

/* --- appel a l'action ------------------------------------------------- */
.cta { border-radius: var(--rayon); padding: var(--e8) var(--e5); text-align:center; }
.cta h2 { margin-bottom: var(--e4); }
.cta p { color: var(--encre-doux); max-width:48ch; margin-inline:auto; }

/* --- formulaires ------------------------------------------------------ */
/* ⚠️ Ces regles existent parce que contact.php pose `.champ`. Une classe
   ecrite dans le HTML et absente du CSS ne leve RIEN : le bloc sort sans
   style et la page repond 200. Toujours verifier qu'une classe existe
   avant de s'en servir. */
.champ { margin-bottom: var(--e5); }
.champ label {
  display:block; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight:600; letter-spacing:.02em; color: var(--encre);
}
.champ input, .champ textarea, .champ select {
  width:100%; padding: var(--e3) var(--e4); min-height:48px;   /* cible tactile */
  font-family: var(--texte); font-size: var(--t-md); color: var(--encre);
  background: var(--blanc);
  border:1px solid var(--trait); border-radius: var(--rayon);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ textarea { min-height:auto; line-height:1.7; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color:#9AA396; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline:none; border-color: var(--action);
  box-shadow: 0 0 0 3px rgba(47,107,79,.14);
}
.champ input:user-invalid, .champ textarea:user-invalid { border-color:#B4472F; }
form button.btn { width:100%; }
@media (min-width:768px) { form button.btn { width:auto; } }

/* --- le brief en deux temps ------------------------------------------- */
/* ⚠️ Demander son nom avant de savoir de quoi on parle fait abandonner.
   Decrire son probleme engage — on donne ses coordonnees pour FINIR ce
   qu'on a commence. D'ou l'ordre : situation, puis identite. */
.bloc-form { border:0; padding:0; margin:0 0 var(--e7); }
.bloc-form > legend {
  display:flex; align-items:center; gap: var(--e3); padding:0;
  margin-bottom: var(--e5); width:100%;
  font-family: var(--titre); font-size:1.6rem; font-weight:300; color: var(--encre);
}
.bloc-num {
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--or-voile); color: var(--action);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; font-family: var(--titre);
}
.champ-duo { display:grid; grid-template-columns:1fr; gap:0 var(--e4); }
@media (min-width:600px) { .champ-duo { grid-template-columns:1fr 1fr; } }

.aide { font-size: var(--t-xs); color: var(--encre-doux); margin: var(--e2) 0 0; }

/* Les choix uniques : des lignes cliquables, pas des puces minuscules. */
.radios { border:0; padding:0; margin-bottom: var(--e5); }
.radios > legend {
  padding:0; margin-bottom: var(--e2);
  font-size: var(--t-sm); font-weight:600; color: var(--encre);
}
.radios label {
  display:flex; align-items:center; gap: var(--e3);
  padding: var(--e3) var(--e4); min-height:48px;    /* cible tactile */
  border:1px solid var(--trait); border-radius: var(--rayon);
  margin-bottom: var(--e2); cursor:pointer;
  font-size: var(--t-sm); transition: border-color .2s ease, background .2s ease;
}
.radios label:hover { border-color: var(--sauge); background: var(--sauge-voile); }
.radios input { width:auto; min-height:0; accent-color: var(--action); }
.radios label:has(input:checked) { border-color: var(--action); background: var(--sauge-voile); }


/* --- les outils -------------------------------------------------------- */
/* MOBILE D ABORD : saisie puis resultat, empiles. Sur grand ecran le
   resultat devient COLLANT a droite — on modifie une valeur et on voit
   le chiffre bouger sans faire defiler. C est tout l interet de l outil. */
.outil .grille { gap: var(--e7); }
.outil-saisie { max-width:38rem; }
.outil-saisie h2 { font-size:1.5rem; }
.saisie-unite { display:flex; align-items:stretch; }
.saisie-unite input { border-top-right-radius:0; border-bottom-right-radius:0; }
.saisie-unite span { display:inline-flex; align-items:center; padding:0 var(--e4);
  border:1px solid var(--trait); border-left:0; border-radius:0 var(--rayon) var(--rayon) 0;
  background: var(--sauge-voile); color: var(--encre-doux); font-size: var(--t-sm); white-space:nowrap; }
.resultat { font-family: var(--titre); font-weight:300; font-size:2.6rem; line-height:1;
  color: var(--action); margin: var(--e2) 0 var(--e2); letter-spacing:-.02em; }
.detail { width:100%; border-collapse:collapse; margin-top: var(--e5); font-size: var(--t-sm); }
.detail th, .detail td { text-align:left; padding: var(--e3) 0; border-top:1px solid var(--trait); font-weight:400; }
.detail td { text-align:right; font-variant-numeric: tabular-nums; }
.detail .total th, .detail .total td { font-weight:600; color: var(--encre); border-top:1px solid var(--sauge); }
@media (min-width:900px) { .outil-sortie { position:sticky; top:96px; } }

/* --- fil d'Ariane ----------------------------------------------------- */
.ariane { font-size: var(--t-xs); color: var(--encre-doux); padding: var(--e5) 0 0; }
.ariane ol { list-style:none; display:flex; flex-wrap:wrap; gap: var(--e2); margin:0; padding:0; }
.ariane li { margin:0; }
.ariane li + li::before { content:"✦"; margin-right: var(--e2); color: var(--or); font-size:.7em; }

/* --- pied de page ----------------------------------------------------- */
/* ⚠️ REFAIT le 11/08 pour la COHERENCE. Le pied etait un bloc presque noir
   au bas d'un site tout en creme, sauge et lavis : il rompait net avec la
   douceur de tout le reste, et obligeait a redresser chaque couleur
   utilitaire posee dessus (`.texte-sec` y tombait a 2,07:1).
   Il reprend maintenant la palette du site — creme, lavis, filet dore —
   et prolonge les pages au lieu d'y mettre un point final. */
.pied {
  position:relative;
  background:
    radial-gradient(58% 60% at 6% 0%,   rgba(160,181,154,.30), transparent 70%),
    radial-gradient(48% 55% at 94% 20%, rgba(201,162,39,.10),  transparent 72%),
    var(--creme);
  color: var(--encre);
  padding: var(--e9) 0 var(--e6);
  margin-top: var(--e9);
  border-top:1px solid var(--or-voile);
}
.pied a { color: var(--encre); text-decoration:none; }
.pied a:hover { color: var(--action-fonce); text-decoration:underline; text-underline-offset:4px; }
.pied h3 { font-family: var(--texte); color: var(--action); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.2em; margin-bottom: var(--e4); }
.pied ul { list-style:none; padding:0; margin:0; }
.pied li { margin-bottom: var(--e2); font-size: var(--t-sm); }
.pied-grille { display:grid; grid-template-columns:1fr; gap: var(--e7); }
.pied-bas {
  margin-top: var(--e7); padding-top: var(--e5);
  border-top:1px solid var(--trait);
  font-size: var(--t-xs); color: var(--encre-doux);
  display:flex; flex-wrap:wrap; gap: var(--e3) var(--e5);
}
.pied-bas a { color: var(--encre-doux); }
/* La marque du pied, en typographie plutot qu'en image — voir pied.php. */
.pied-marque {
  font-family: var(--titre); font-weight:300; font-size:2rem;
  color: var(--encre); letter-spacing:.01em; line-height:1.1;
  margin:0 0 var(--e5);
}
.pied-marque span { color: var(--or); font-size:.7em; vertical-align:.15em; }
/* ⚠️ `.texte-sec` porte l'encre douce, pensee pour un fond CLAIR. Dans le
   pied, le fond est l'encre foncee : le texte tombait a 2,07:1 —
   illisible. Une classe utilitaire ne connait pas le fond sur lequel on
   la pose ; il faut la redresser dans chaque contexte sombre.
   #A8B2A4 sur #2A2F28 = 5,85:1. Meme famille que le bouton de la nav. */
/* ⓘ Le fond du pied est clair : .texte-sec retrouve son contraste (7,2:1). */

/* --- utilitaires ------------------------------------------------------ */
.texte-sec { color: var(--encre-doux); }
.centre { text-align:center; }
.mt-0 { margin-top:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.saut-contenu { position:absolute; left:-9999px; top:0; z-index:100; background:var(--action); color:var(--blanc); padding:var(--e3) var(--e4); }
.saut-contenu:focus { left:var(--e4); top:var(--e2); }

/* ==========================================================================
   >= 768px — on AJOUTE
   ========================================================================== */
@media (min-width:768px) {
  :root { --t-md:1.0625rem; }
  h1 { font-size:3.6rem; }
  h2 { font-size:2.6rem; }
  h3 { font-size:1.6rem; }
  .section { padding: var(--e9) 0; }
  .hero { padding: var(--e9) 0 calc(var(--e9) + var(--e6)); }
  .hero h1 { font-size:4.4rem; }
  .hero .accroche { font-size:1.6rem; }
  .btns { flex-direction:row; flex-wrap:wrap; gap: var(--e4); }
  .tuiles { grid-template-columns:repeat(2,1fr); }
  .grille { grid-template-columns:repeat(2,1fr); gap: var(--e7); }
  .preuves { grid-template-columns:repeat(4,1fr); }
  .preuve-nb { font-size:3.2rem; }
  .etapes { grid-template-columns:repeat(2,1fr); gap: var(--e7); }
  .pied-grille { grid-template-columns:2fr 1fr 1fr; }
  .cta { padding: var(--e9) var(--e8); }
  .faq-item { padding: var(--e6) 0; }

  /* ⚠️⚠️ LE HEADER DESKTOP, REPARE LE 11/08.
     Ma correction du menu MOBILE (flex-wrap + police de titre sur les liens)
     s'appliquait aussi ici : l'en-tete passait de 73 a 137 px, la nav
     retombait SOUS le logo, les liens sortaient en Cormorant 21,6 px — donc
     183 px de large chacun, 1 071 px au total — et se touchaient a 4 px.
     Tout ce qui a ete pose pour le telephone doit etre ANNULE ici. */
  .entete-rangee { flex-wrap: nowrap; gap: var(--e5); }
  .burger { display:none; }
  .nav { display:block !important; flex-basis:auto; order:0; }
  .nav ul { flex-direction:row; align-items:center; gap:var(--e1); padding:0; border-top:0; }
  .nav li + li { border-top:0; }
  .nav a {
    display:inline-flex; min-height:0;
    padding: var(--e2) var(--e3);
    font-family: var(--texte); font-size: var(--t-sm); font-weight:500;
    letter-spacing:.015em; border-radius: var(--rayon);
  }
  .nav a::after { content:none; }              /* pas de chevron en barre */
  .nav a[aria-current="page"]::after { content:none; }
  .nav a:hover, .nav a[aria-current="page"] { background: var(--sauge-voile); }
  .nav li:has(.btn-1) { margin-top:0; margin-left: var(--e3); }
  .nav a.btn-1 { padding: var(--e3) var(--e5); }
  .logo img { height:48px; }                   /* le script a besoin d'air */
}

@media (min-width:1100px) {
  .tuiles { grid-template-columns:repeat(3,1fr); }
  .grille-3 { grid-template-columns:repeat(3,1fr); }
  .etapes { grid-template-columns:repeat(4,1fr); }
  .nav a { padding: var(--e2) var(--e4); }
  .hero h1 { font-size:5rem; }
}

/* ==========================================================================
   REGISTRES DE TITRE — ⚠️ A LAISSER EN FIN DE FEUILLE
   --------------------------------------------------------------------------
   Le grand titre de 80 px est le titre de MARQUE : accueil, hubs, fiches
   d'intervention. Applique tel quel a « Cookies » ou au titre d'un article,
   ce n'est pas de la finesse, c'est de l'emphase mal placee — releve au
   navigateur le 11/08 (h1 a 80 px sur les 11 pages, legales comprises).

   ⚠️⚠️ CES REGLES ETAIENT D'ABORD PLACEES PLUS HAUT, ET NE S'APPLIQUAIENT
   PAS. `.hero-article h1` et `.hero h1` ont la MEME specificite (0,1,1) :
   a specificite egale, LA DERNIERE GAGNE — et `.hero h1` de la media query
   768px venait apres. Le navigateur rendait donc 80 px partout, sans que
   rien ne le signale. Ne pas remonter ce bloc.
   ========================================================================== */
.hero-article h1 { font-size:2.1rem; max-width:26ch; }
.hero-page    h1 { font-size:2rem;   max-width:20ch; }
.hero-page { padding-bottom: var(--e6); }

@media (min-width:768px) {
  .hero-article h1 { font-size:3rem; }
  .hero-page    h1 { font-size:2.6rem; }
}
@media (min-width:1100px) {
  .hero-article h1 { font-size:3.4rem; }
  .hero-page    h1 { font-size:2.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
@media print { .entete,.pied,.btns,.cta { display:none; } body { color:#000; } }