/* ============================================================
   Polices servies depuis le serveur Klario, plus depuis Google.
   Motif : tant qu'elles venaient de fonts.googleapis.com, chaque
   visiteur transmettait son adresse IP a Google. C'etait la seule
   connexion tierce du site, et la politique de confidentialite en
   annoncait la suppression. Voir assets/fonts/LICENCE.txt.
   Albert Sans est variable : un fichier pour les graisses 400 a 600.
   `font-display:swap` : le texte s'affiche tout de suite, dans la
   police de repli, puis bascule.
   ============================================================ */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dm-serif-display-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dm-serif-display-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/albert-sans-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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/assets/fonts/albert-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   KLARIO : charte « Nature first » v1
   Toutes les valeurs viennent de « Klario - Charte Nature first ».
   Palette verrouillee, aucune autre couleur.
   ============================================================ */
:root{
  --fond:#F7EFE1; --fond-2:#EFE1C4;
  --ambre:#EFB84A; --ambre-fonce:#6B4712;
  --terra:#CC6633; --terra-fonce:#7A3315;
  --brun:#3A2317; --brun-profond:#241309;
  --texte:#241608; --texte-2:#69573F;
  --filet:#241309;
  --filet-leger:rgba(36,19,9,.18);
  --gabarit:1180px; --marge:40px;

  /* Echelle typographique figee (specification de design, 2.2).
     Bloquante : tout composant construit ensuite s'y appuie. */
  --t-display:56px;  --l-display:64px;
  --t-h1:44px;       --l-h1:52px;
  --t-h2:32px;       --l-h2:40px;
  --t-h3:22px;       --l-h3:30px;
  --t-corps:17px;    --l-corps:28px;
  --t-petit:14px;    --l-petit:22px;
  --t-micro:12px;    --l-micro:18px;

  /* Echelle d'espacement (2.3) */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px;
  --e6:32px; --e7:48px; --e8:64px; --e9:96px; --e10:128px;
  --section:96px;
}
@media (max-width:640px){
  :root{
    --marge:20px;
    --t-display:34px; --l-display:40px;
    --t-h1:30px;      --l-h1:36px;
    --t-h2:24px;      --l-h2:30px;
    --t-h3:19px;      --l-h3:26px;
    --t-corps:16px;   --l-corps:26px;
    --section:64px;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--fond); color:var(--texte);
  font-family:'Albert Sans',system-ui,sans-serif; font-weight:400;
  font-size:var(--t-corps); line-height:var(--l-corps); -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-.015em}
a{color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
*:focus-visible{outline:2px solid var(--terra) !important;outline-offset:3px}
.zone{max-width:var(--gabarit);margin:0 auto;padding:0 var(--marge)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:16px;top:16px;z-index:99;background:var(--brun-profond);color:var(--fond);padding:12px 16px}

/* Trame retro : grain sable, faible opacite, sans requete reseau */
.trame{
  position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- NAVIGATION : barre en verre, statique ---------- */
.entete{position:sticky;top:16px;z-index:60;padding:0 40px;margin-top:16px}
.barre{
  max-width:calc(var(--gabarit) - 48px);margin:0 auto;height:64px;
  display:flex;align-items:center;gap:40px;padding:0 24px;border-radius:16px;
  background:rgba(247,239,225,.66);backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--filet-leger);
}
.logo{display:inline-flex;align-items:flex-end;gap:8px;font-family:'DM Serif Display',serif;font-size:23px;text-decoration:none;letter-spacing:-.02em}
.barres{display:inline-flex;align-items:flex-end;gap:3px;height:19px}
.barres i{display:block;width:3px;background:var(--terra)}
.barres i:nth-child(1){height:8px}.barres i:nth-child(2){height:13px}.barres i:nth-child(3){height:19px}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.nav a{text-decoration:none;color:var(--texte-2);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.nav a:hover{color:var(--texte);border-bottom-color:var(--terra)}
.nav .cta{background:var(--brun-profond);color:var(--fond)!important;padding:11px 18px;border-bottom:none!important;font-weight:600;letter-spacing:.06em;transition:background .18s}
.nav .cta:hover{background:var(--terra-fonce)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--filet-leger);padding:9px 14px;font:inherit;font-size:13px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* ---------- HERO : texture ciel + trame en bas ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 80px;isolation:isolate}
/* Halo ambre en haut, radial 90% x 60%, fondu F7EFE1 -> EFE1C4.
   EMPLACEMENT VIDEO : remplacer .ciel par
   <video class="ciel" autoplay muted loop playsinline preload="metadata" poster="...">
   Plan attendu : ciel ou matiere sable en mouvement tres lent, palette Klario,
   1920x1080, 8 a 12 s, boucle sans raccord visible, moins de 2 Mo en WebM.
   Jamais de texte ni de personnage dans la video. */
.ciel{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(239,184,74,.5) 0%, rgba(239,184,74,0) 62%),
    linear-gradient(180deg,var(--fond) 0%,var(--fond-2) 100%);
  animation:respire 42s ease-in-out infinite alternate;
}
@keyframes respire{from{transform:scale(1) translateY(0)}to{transform:scale(1.06) translateY(-14px)}}
/* Le noir du masque n'est pas une couleur de charte : c'est un palier d'opacite */
.hero .trame{z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent 45%,black 100%);mask-image:linear-gradient(180deg,transparent 45%,black 100%)}
.hero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.surtitre{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;margin-bottom:24px}
h1{font-size:clamp(40px,5.3vw,76px);line-height:1.04;margin-bottom:24px;max-width:15ch}
.lead{font-size:clamp(19px,1.6vw,26px);line-height:1.3;color:var(--brun);max-width:32ch;margin-bottom:36px}
.boutons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.b1,.b2{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;font-size:15px;font-weight:600;text-decoration:none;border-radius:0;transition:background .18s,color .18s}
.b1{background:var(--brun-profond);color:var(--fond)}
.b1:hover{background:var(--terra-fonce)}
.b2{border:1px solid var(--filet);color:var(--texte)}
.b2:hover{background:rgba(36,19,9,.05)}
.fl{transition:transform .2s}
.b1:hover .fl,.b2:hover .fl,.lien:hover .fl{transform:translateX(4px)}
.lien{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--terra-fonce);text-decoration:none}
.lien:hover{color:var(--terra)}

/* ---------- CADRE EXEMPLE : verre statique, jamais anime ---------- */
.verre{
  border-radius:20px;border:1px solid var(--filet-leger);overflow:hidden;
  background:rgba(247,239,225,.55);backdrop-filter:blur(18px) saturate(150%);
}
.verre-tete{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--filet-leger);font-size:13px;color:var(--texte-2)}
.badge{margin-left:auto;background:var(--ambre);color:var(--brun-profond);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px}
.verre-corps{padding:28px}
.consigne{font-size:13px;color:var(--texte-2);margin-bottom:20px;letter-spacing:.02em}
.consigne b{color:var(--texte);font-weight:600}
.brouillon p{font-size:16px;line-height:1.65;margin-bottom:9px;white-space:nowrap;overflow:hidden;width:0;animation:ecrire 1.4s steps(44) forwards}
.brouillon p:nth-child(1){animation-delay:.6s}
.brouillon p:nth-child(2){animation-delay:2.2s}
.brouillon p:nth-child(3){animation-delay:3.8s}
.cur{display:inline-block;width:2px;height:1em;background:var(--terra);vertical-align:-.14em;margin-left:2px;animation:clign 1.1s steps(1) infinite}
.vignettes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:24px}
.vig{aspect-ratio:4/5;border-radius:10px;border:1px solid var(--filet-leger);background:rgba(247,239,225,.8);display:flex;align-items:flex-end;padding:8px;opacity:0;animation:surgir .4s ease forwards}
.vig span{display:block;height:3px;background:var(--terra)}
.vig:nth-child(1){animation-delay:5.4s}.vig:nth-child(1) span{width:62%}
.vig:nth-child(2){animation-delay:5.65s}.vig:nth-child(2) span{width:84%}
.vig:nth-child(3){animation-delay:5.9s}.vig:nth-child(3) span{width:46%}
.vig:nth-child(4){animation-delay:6.15s}.vig:nth-child(4) span{width:72%}
.vig:nth-child(5){animation-delay:6.4s}.vig:nth-child(5) span{width:36%}
.programme{display:inline-flex;align-items:center;gap:10px;margin-top:24px;background:var(--brun-profond);color:var(--fond);padding:11px 16px;font-size:13px;font-weight:600;opacity:0;animation:surgir .5s ease 7s forwards}
.pt{width:7px;height:7px;border-radius:50%;background:var(--ambre)}
@keyframes ecrire{from{width:0}to{width:100%}}
@keyframes surgir{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes clign{50%{opacity:0}}

/* ---------- SECTIONS : le filet remplace la carte ---------- */
.section{padding:96px 0;border-top:1px solid var(--filet);position:relative}
.section h2{font-size:clamp(30px,3.4vw,48px);line-height:1.08;margin:20px 0 24px;max-width:24ch}
.texte{font-size:19px;line-height:1.6;color:var(--texte-2);max-width:62ch}
.texte + .lien{margin-top:20px}

/* Trois piliers : blocs textures, un halo different par pilier */
.piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:48px 0 32px}
.pilier{position:relative;overflow:hidden;border-top:1px solid var(--filet);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:32px 28px}
.pilier .halo{position:absolute;inset:0;z-index:-1}
.p1 .halo{background:radial-gradient(80% 55% at 50% 0%,rgba(239,184,74,.55),rgba(239,184,74,0) 70%),var(--fond-2)}
.p2 .halo{background:radial-gradient(80% 55% at 50% 0%,rgba(204,102,51,.42),rgba(204,102,51,0) 70%),var(--fond-2)}
.p3 .halo{background:radial-gradient(80% 55% at 50% 0%,rgba(107,71,18,.38),rgba(107,71,18,0) 70%),var(--fond-2)}
.pilier .num{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;margin-bottom:10px}
.pilier h3{font-size:29px;line-height:1.1;margin-bottom:10px}
.pilier p{font-size:16px;line-height:1.55;color:var(--texte-2)}

/* Deux mondes */
.mondes{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:48px}
.monde{border-top:1px solid var(--filet);padding-top:28px}
.monde h3{font-size:30px;line-height:1.1;margin-bottom:16px}
.monde p{color:var(--texte-2);margin-bottom:20px;font-size:18px;line-height:1.6}

/* Frise de methode : filet qui se remplit, chiffres romains */
.methode{position:relative;isolation:isolate}
.methode .halo{position:absolute;inset:0;z-index:-1;background:radial-gradient(100% 70% at 50% 100%,rgba(204,102,51,.3),rgba(204,102,51,0) 68%)}
.frise{margin-top:48px}
.rail{position:relative;height:1px;background:var(--filet-leger);margin-bottom:28px}
.rail i{position:absolute;inset:0 auto 0 0;width:0;background:var(--terra);animation:remplir 2.4s ease forwards;animation-delay:.3s}
@keyframes remplir{to{width:100%}}
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.etape .rom{font-family:'DM Serif Display',serif;font-size:15px;letter-spacing:.24em;color:var(--terra);display:block;margin-bottom:8px}
.etape b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;line-height:1.1;margin-bottom:8px}
.etape p{font-size:16px;color:var(--texte-2);line-height:1.55}

/* Travail : le seul aplat sombre du site */
.travail{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;margin-top:48px;align-items:start}
.sombre{background:var(--brun-profond);color:var(--fond);padding:36px 32px}
.sombre .sur{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambre);font-weight:600;margin-bottom:20px}
.sombre b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;line-height:1.15;margin-bottom:8px}
.sombre p{color:rgba(247,239,225,.74);font-size:16px;line-height:1.6;margin-bottom:24px}
.sombre .lien{color:var(--ambre)}
.sombre hr{border:0;border-top:1px solid rgba(247,239,225,.2);margin:28px 0}

/* Bandeau + pied */
.bandeau{position:relative;isolation:isolate;padding:110px 0;text-align:center;border-top:1px solid var(--filet)}
.bandeau .halo{position:absolute;inset:0;z-index:-1;background:radial-gradient(100% 70% at 50% 100%,rgba(204,102,51,.32),rgba(204,102,51,0) 66%)}
.bandeau h2{font-size:clamp(32px,3.6vw,52px);line-height:1.06;max-width:19ch;margin:0 auto 32px}
.bandeau .boutons{justify-content:center}
.pied{background:var(--brun);color:var(--fond);padding:72px 0 32px;font-size:16px;position:relative;overflow:hidden}
.pied-in{display:grid;grid-template-columns:2fr 1fr;gap:56px;position:relative;z-index:1}
.pied a{color:rgba(247,239,225,.84);text-decoration:none}
.pied a:hover{color:var(--ambre)}
.pied nav{display:flex;flex-direction:column;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.pied-bas{border-top:1px solid rgba(247,239,225,.2);margin-top:48px;padding-top:24px;color:rgba(247,239,225,.62);font-size:13px;position:relative;z-index:1}

/* ---------- APPARITION AU DEFILEMENT : 16 px, 400 ms ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
.rv.vu{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  :root{--marge:28px}
  .entete{padding:0 20px}
  .nav{display:none}
  .burger{display:block}
  .nav.ouvert{display:flex;position:fixed;inset:88px 20px auto;flex-direction:column;align-items:stretch;gap:0;background:var(--fond);border:1px solid var(--filet-leger);border-radius:16px;padding:16px 20px;font-size:16px;letter-spacing:.04em}
  .nav.ouvert a{padding:14px 0;border-bottom:1px solid var(--filet-leger)}
  .nav.ouvert .cta{margin-top:12px;text-align:center}
  .hero-in,.mondes,.travail{grid-template-columns:1fr;gap:40px}
  .piliers{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .section{padding:64px 0}
  .hero{padding:56px 0 56px}
  .etapes{grid-template-columns:1fr}
  .vignettes{grid-template-columns:repeat(3,1fr)}
  .vig:nth-child(4),.vig:nth-child(5){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .brouillon p{width:100%}
  .vig,.programme{opacity:1}
  .rail i{width:100%}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   COMPOSANTS DE PAGES INTERNES
   ============================================================ */
.hero.interne{padding:72px 0 64px}
.hero.interne h1{max-width:20ch}
.ancre{scroll-margin-top:104px}
.bloc{border-top:1px solid var(--filet);padding-top:28px;margin-top:48px}
.section .bloc h2,.bloc h2,.bloc h3{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-bottom:16px}
.bloc p{font-size:18px;line-height:1.6;color:var(--texte-2);max-width:66ch;margin-bottom:16px}
.bloc p.fort{color:var(--texte)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:32px}
.duo h3,.duo h4,.liste h3,.liste h4{font-family:'Albert Sans',sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);margin-bottom:12px}
.liste{list-style:none}
.liste li{font-size:17px;line-height:1.55;color:var(--texte-2);padding:10px 0;border-bottom:1px solid var(--filet-leger)}
.liste li b{color:var(--texte);font-weight:600}

/* Gradation du clair au fonce : les trois niveaux d'entree */
.grad{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.niv{padding:32px 28px;display:flex;flex-direction:column}
.niv1{background:var(--fond-2)}
.niv2{background:var(--ambre);color:var(--brun-profond)}
.niv3{background:var(--brun-profond);color:var(--fond)}
.niv .prix{font-family:'DM Serif Display',serif;font-size:34px;line-height:1;margin:8px 0 16px}
.niv h3{font-size:24px;line-height:1.15;margin-bottom:4px}
.niv3 h3{color:var(--fond)}
.niv p{font-size:16px;line-height:1.6;margin-bottom:14px}
.niv1 p{color:var(--texte-2)}
.niv2 p{color:var(--ambre-fonce)}
.niv3 p{color:rgba(247,239,225,.78)}
.niv .limite{font-size:15px;border-top:1px solid currentColor;padding-top:14px;margin-top:auto;opacity:.85}

/* Forfaits */
.forfaits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.forfait{border-top:1px solid var(--filet);padding-top:24px;display:flex;flex-direction:column}
.forfait.reco{background:var(--brun-profond);color:var(--fond);border-top-color:var(--ambre);padding:24px 24px 28px;margin-top:-24px}
.forfait .tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre);display:block;margin-bottom:10px}
.forfait h3{font-size:26px;line-height:1.1;margin-bottom:6px}
.forfait.reco h3{color:var(--fond)}
.forfait .prix{font-family:'DM Serif Display',serif;font-size:32px;margin-bottom:14px}
.forfait .pour{font-weight:600;color:var(--texte);margin-bottom:12px;font-size:17px}
.forfait.reco .pour{color:var(--ambre)}
.forfait p{font-size:16px;line-height:1.6;color:var(--texte-2);margin-bottom:12px}
.forfait.reco p{color:rgba(247,239,225,.78)}
.forfait .hors{font-size:15px;font-style:italic;border-top:1px solid var(--filet-leger);padding-top:12px;margin-top:auto}

/* Tableau des complements */
.tableau{width:100%;border-collapse:collapse;margin-top:32px;font-size:16px}
.tableau th{text-align:left;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;padding:0 16px 12px 0;border-bottom:1px solid var(--filet)}
.tableau td{padding:16px 16px 16px 0;border-bottom:1px solid var(--filet-leger);vertical-align:top;color:var(--texte-2)}
.tableau td:first-child{color:var(--texte);font-weight:600;width:26%}
.tableau td:nth-child(3){white-space:nowrap;font-weight:600;color:var(--texte)}
.tab-enveloppe{overflow-x:auto}

/* Avant / apres */
.av-ap{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.av,.ap{padding:28px 26px}
.av{background:var(--fond-2)}
.av p{color:var(--texte-2)}
.ap{background:var(--brun-profond);color:var(--fond)}
.ap p{color:rgba(247,239,225,.86)}
.av h3,.av h4,.ap h3,.ap h4{margin-bottom:14px}
.ap h3,.ap h4{color:var(--ambre)}
.av .cite,.ap .cite{font-size:17px;line-height:1.65;margin-bottom:20px}
.pourquoi{list-style:none;font-size:15px;line-height:1.55;border-top:1px solid currentColor;padding-top:14px;opacity:.9}
.pourquoi li{padding:5px 0}
.pourquoi li::before{content:": ";opacity:.6}

/* FAQ */
.faq{margin-top:32px;border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet-leger)}
.faq summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-family:'DM Serif Display',serif;font-size:21px;line-height:1.25;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:20px;font-family:'Albert Sans',sans-serif;font-size:22px;color:var(--terra);transition:transform .25s}
.faq details[open] summary::after{content:"−"}
.faq details p{font-size:17px;line-height:1.65;color:var(--texte-2);padding:0 0 22px;max-width:70ch}

/* Schema de workflow */
.flux{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;font-size:15px}
.flux span{border:1px solid var(--filet);padding:11px 15px;background:var(--fond-2)}
.flux span:last-child{background:var(--brun-profond);color:var(--fond);border-color:var(--brun-profond)}
.flux i{color:var(--terra);font-style:normal}

@media (max-width:1000px){
  .duo,.grad,.forfaits,.av-ap{grid-template-columns:1fr}
  .forfait.reco{margin-top:0}
}

/* Les piliers sont des liens : etat de survol et focus */
a.pilier{text-decoration:none;color:inherit;transition:transform .2s}
a.pilier:hover{transform:translateY(-3px)}
a.pilier:hover h3{color:var(--terra-fonce)}
a.pilier .lien{font-size:14px}

/* Sequence email : cartes reliees par un filet terracotta vertical */
.sequence{position:relative;margin-top:32px;padding-left:88px}
.sequence::before{content:"";position:absolute;left:36px;top:14px;bottom:14px;width:1px;background:var(--terra)}
.mail{position:relative;border-top:1px solid var(--filet);padding:22px 0}
.mail .delai{position:absolute;left:-88px;top:22px;width:56px;text-align:right;font-size:12px;letter-spacing:.14em;font-weight:600;color:var(--terra-fonce)}
.mail .delai::after{content:"";position:absolute;right:-53px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--terra)}
.mail summary{cursor:pointer;list-style:none;font-family:'DM Serif Display',serif;font-size:21px;line-height:1.25;padding-right:32px;position:relative}
.mail summary::-webkit-details-marker{display:none}
.mail summary::after{content:"+";position:absolute;right:0;top:0;font-family:'Albert Sans',sans-serif;font-size:22px;color:var(--terra)}
.mail[open] summary::after{content:"−"}
.mail .corps{font-size:17px;line-height:1.7;color:var(--texte-2);padding-top:16px;max-width:64ch}
.mail .corps b{color:var(--texte)}
.mail .note{font-style:italic;font-size:16px;color:var(--texte-2);border-top:1px solid var(--filet-leger);margin-top:16px;padding-top:14px}
.gabarit{border-top:1px solid var(--filet);padding-top:24px;margin-top:32px}
.gabarit dl{margin-top:16px}
.gabarit dt{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;margin-top:18px}
.gabarit dd{font-size:17px;line-height:1.6;color:var(--texte-2);margin-top:6px}
@media (max-width:620px){ .sequence{padding-left:0} .sequence::before{display:none}
  .mail .delai{position:static;width:auto;text-align:left;display:block;margin-bottom:8px}
  .mail .delai::after{display:none} }

/* ------------------------------------------------------------
   Composants de la page Exemples, du contact et des pages legales
   ------------------------------------------------------------ */

/* Sommaire d'ancres, en tete de page longue */
.sommaire{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--filet);margin-top:40px}
.sommaire a{flex:1 1 220px;text-decoration:none;padding:20px 24px 22px 0;border-right:1px solid var(--filet-leger)}
.sommaire a:last-child{border-right:0}
.sommaire a span{display:block;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600}
.sommaire a b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:23px;margin-top:8px}
.sommaire a:hover b{color:var(--terra-fonce)}

/* Apercu de document livre : couverture, indicateurs, constats */
.doc{border:1px solid var(--filet-leger);border-radius:16px;overflow:hidden;
  background:rgba(247,239,225,.55);backdrop-filter:blur(18px) saturate(150%);max-width:560px}
.doc-tete{background:var(--brun-profond);color:var(--fond);padding:26px 28px}
.doc-tete span{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.doc-tete b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:27px;line-height:1.15;margin-top:10px}
.doc-tete em{display:block;font-style:normal;font-size:13px;color:rgba(247,239,225,.7);margin-top:8px}
.doc-corps{padding:26px 28px 34px;position:relative}
.doc-corps::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,rgba(247,239,225,0),var(--fond))}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filet-leger);border:1px solid var(--filet-leger)}
.kpi{background:var(--fond);padding:14px 12px}
.kpi b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;line-height:1}
.kpi span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--texte-2);margin-top:6px}
.constats{margin-top:22px}
.constats li{list-style:none;border-top:1px solid var(--filet-leger);padding:11px 0;font-size:15px;color:var(--texte-2);display:flex;gap:14px}
.constats li i{font-style:normal;font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--terra-fonce);min-width:64px;padding-top:3px}
.courbe{display:flex;align-items:flex-end;gap:6px;height:74px;margin-top:22px}
.courbe i{flex:1;background:var(--terra);opacity:.34}
.courbe i:last-child{opacity:1;background:var(--ambre)}

/* Encadre de reserve pour un visuel a produire (Higgsfield) */
.reserve{border:1px dashed var(--filet-leger);padding:18px 20px;margin-top:24px;font-size:14px;color:var(--texte-2);max-width:560px}
.reserve b{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);margin-bottom:8px}

/* Portes d'entree du contact */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--filet);margin-top:44px}
.porte{padding:30px 28px 32px 0;border-right:1px solid var(--filet-leger)}
.porte:last-child{border-right:0;padding-right:0}
.porte .prix{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600}
.porte h3{font-size:26px;line-height:1.15;margin-top:10px}
.porte p{font-size:16px;line-height:1.6;color:var(--texte-2);margin-top:12px}
.porte .lien{margin-top:16px;display:inline-flex}

/* Formulaire */
.form{border-top:1px solid var(--filet);padding-top:34px;margin-top:44px;max-width:720px}
.champ{margin-bottom:22px}
.champ label{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;margin-bottom:8px}
.champ input,.champ select,.champ textarea{width:100%;font-family:inherit;font-size:17px;color:var(--texte);
  background:rgba(247,239,225,.6);border:1px solid var(--filet-leger);border-radius:0;padding:13px 14px}
.champ textarea{min-height:130px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--terra);outline-offset:0}
.champ .aide{font-size:14px;color:var(--texte-2);margin-top:7px}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.consentement{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--texte-2);margin:8px 0 26px}
.consentement input{width:18px;height:18px;margin-top:3px;flex:none}

/* Pages legales : texte long, filets, ancrage lateral */
.legal{max-width:74ch}
.legal h2{font-size:32px;margin-top:0}
.legal h3{font-size:21px;margin-top:30px}
.legal p,.legal li{font-size:17px;line-height:1.7;color:var(--texte-2);margin-top:12px}
.legal ul{margin-top:12px;padding-left:20px}
.legal li{margin-top:8px}
.legal dl{margin-top:16px}
.legal dt{font-weight:600;color:var(--texte);margin-top:16px}
.legal dd{color:var(--texte-2);margin-top:4px}
.legal .avert{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:18px 0;margin:28px 0;font-size:15px;color:var(--texte-2)}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .portes{grid-template-columns:1fr}
  .porte{border-right:0;border-bottom:1px solid var(--filet-leger);padding-right:0}
  .porte:last-child{border-bottom:0}
  .duo-champ{grid-template-columns:1fr}
  .sommaire a{border-right:0;border-bottom:1px solid var(--filet-leger)}
}

/* Estimateur de perimetre : trois reglages, une sortie calculee */
.estim{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--filet);margin-top:36px}
.estim-reglages{padding:32px 40px 34px 0;border-right:1px solid var(--filet-leger)}
.estim-reglages .champ:last-child{margin-bottom:0}
.estim-sortie{background:var(--brun-profond);color:var(--fond);padding:34px 36px 36px}
.estim-sortie .sur{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.estim-sortie b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:31px;line-height:1.12;margin-top:10px}
.estim-sortie p{font-size:15px;line-height:1.55;color:rgba(247,239,225,.76);margin-top:10px}
.estim-sortie hr{border:0;border-top:1px solid rgba(247,239,225,.2);margin:26px 0}
.estim-sortie .lien{margin-top:20px;color:var(--ambre)}
@media (max-width:900px){
  .estim{grid-template-columns:1fr}
  .estim-reglages{border-right:0;border-bottom:1px solid var(--filet-leger);padding:28px 0}
}

/* Fin de bloc pilier : deux liens sortants, jamais un cul-de-sac */
.suite{display:flex;flex-wrap:wrap;gap:12px 32px;border-top:1px solid var(--filet-leger);margin-top:26px;padding-top:20px}
.suite .lien{font-size:15px}

/* ------------------------------------------------------------
   Article de blog : colonne de lecture, chapo, tableau, sources
   ------------------------------------------------------------ */
.art{max-width:72ch;margin:0 auto}
.art .meta{display:flex;flex-wrap:wrap;gap:8px 22px;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  padding:16px 0;margin:36px 0 44px;font-size:14px;color:var(--texte-2)}
.art .meta b{color:var(--texte);font-weight:600}
.art .chapo{font-size:21px;line-height:1.5;color:var(--texte);border-left:2px solid var(--terra);padding-left:22px;margin-bottom:44px}
.art h2{font-size:34px;line-height:1.12;margin:56px 0 4px}
.art h3{font-size:23px;line-height:1.2;margin:38px 0 4px}
.art p{font-size:18px;line-height:1.65;color:var(--texte-2);margin-top:14px}
.art p b,.art li b{color:var(--texte)}
.art ul,.art ol{margin:16px 0 0 22px}
.art li{font-size:18px;line-height:1.6;color:var(--texte-2);margin-top:9px}
.art .encadre{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:22px 0;margin:36px 0}
.art .encadre p:first-child{margin-top:0}
.art .sources{border-top:1px solid var(--filet);margin-top:56px;padding-top:22px}
.art .sources li{font-size:15px}
.art .fin{border-top:1px solid var(--filet);margin-top:48px;padding-top:26px;display:flex;flex-wrap:wrap;gap:12px 32px}

/* Liste des articles sur le hub */
.articles{border-top:1px solid var(--filet);margin-top:40px}
.article-ligne{display:grid;grid-template-columns:150px 1fr;gap:32px;border-bottom:1px solid var(--filet-leger);
  padding:28px 0;text-decoration:none}
.article-ligne:hover h3{color:var(--terra-fonce)}
.article-ligne .quand{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;padding-top:6px}
.article-ligne h3{font-size:27px;line-height:1.15}
.article-ligne p{font-size:16px;line-height:1.55;color:var(--texte-2);margin-top:8px;max-width:70ch}
.article-ligne .duree{font-size:13px;color:var(--texte-2);margin-top:10px;display:block}
@media (max-width:760px){ .article-ligne{grid-template-columns:1fr;gap:10px} }

/* Estimateur : curseurs, jauge de palier, sortie chiffree */
.champ label .val{float:right;font-family:'DM Serif Display',serif;font-weight:400;font-size:20px;
  letter-spacing:0;text-transform:none;color:var(--texte);line-height:1}
.champ input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--filet-leger);
  border:0;padding:0;margin:12px 0 4px;cursor:pointer}
.champ input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--terra);border:3px solid var(--fond);box-shadow:0 0 0 1px var(--terra)}
.champ input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--terra);
  border:3px solid var(--fond);box-shadow:0 0 0 1px var(--terra)}
.champ input[type=range]:focus-visible{outline:2px solid var(--terra);outline-offset:6px}
.jauge{margin:22px 0 30px}
.jauge-rail{position:relative;height:2px;background:rgba(247,239,225,.24)}
.jauge-remplie{position:absolute;left:0;top:0;height:2px;background:var(--ambre);transition:width .35s ease}
.jauge-cran{position:absolute;top:-4px;width:1px;height:10px;background:rgba(247,239,225,.45);transform:translateX(-1px)}
.jauge-legende{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,239,225,.6)}
.estim-sortie .sur + b{margin-bottom:2px}
.estim-sortie .sur{margin-top:22px}
.estim-sortie > .sur:first-child{margin-top:0}

/* Questionnaire d'audit : choix en cases cliquables, pas en listes deroulantes */
.q{border-top:1px solid var(--filet);padding-top:26px;margin-top:34px}
.q:first-of-type{margin-top:0}
.q legend{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600;padding:0}
.q h3{font-size:25px;line-height:1.18;margin-top:10px}
.q .prec{font-size:15px;color:var(--texte-2);margin-top:8px}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:10px;margin-top:20px}
.case{position:relative}
.case input{position:absolute;opacity:0;width:0;height:0}
.case span{display:block;border:1px solid var(--filet-leger);padding:15px 17px;font-size:16px;line-height:1.35;
  cursor:pointer;background:rgba(247,239,225,.5);transition:border-color .15s,background .15s}
.case input:hover + span{border-color:var(--terra)}
.case input:checked + span{border-color:var(--brun-profond);background:var(--fond-2);box-shadow:inset 3px 0 0 var(--terra)}
.case input:focus-visible + span{outline:2px solid var(--terra);outline-offset:2px}
.avancement{position:sticky;top:0;z-index:5;background:var(--fond);padding:14px 0 12px;border-bottom:1px solid var(--filet-leger);
  display:flex;align-items:center;gap:16px;font-size:13px;color:var(--texte-2);margin-bottom:8px}
.avancement .rail{flex:1;height:2px;background:var(--filet-leger);position:relative}
.avancement .rail i{position:absolute;left:0;top:0;height:2px;background:var(--terra);width:0;transition:width .3s ease}

/* ------------------------------------------------------------
   Branche facturation electronique (temporaire, retrait mars 2028)
   Tout ce bloc se supprime d'un tenant avec la page.
   ------------------------------------------------------------ */
.echeance{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--filet);margin-top:40px}
.echeance div{padding:26px 30px 28px 0;border-right:1px solid var(--filet-leger)}
.echeance div:last-child{border-right:0;padding-right:0}
.echeance .date{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600}
.echeance b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:27px;line-height:1.14;margin-top:10px}
.echeance p{font-size:16px;line-height:1.55;color:var(--texte-2);margin-top:10px}

.acteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--filet);margin-top:40px}
.acteur{padding:28px 28px 30px 0;border-right:1px solid var(--filet-leger)}
.acteur:last-child{border-right:0;padding-right:0}
.acteur .qui{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--terra-fonce);font-weight:600}
.acteur h3{font-size:23px;line-height:1.18;margin-top:10px}
.acteur p{font-size:16px;line-height:1.55;color:var(--texte-2);margin-top:10px}

.grille-prix{border-top:1px solid var(--filet);margin-top:34px}
.ligne-prix{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--filet-leger);padding:16px 0}
.ligne-prix span:first-child{flex:1;font-size:18px}
.ligne-prix .pointille{flex:0 1 auto;border-bottom:1px dotted var(--filet-leger);min-width:24px;align-self:center;height:1px}
.ligne-prix b{font-family:'DM Serif Display',serif;font-weight:400;font-size:24px;white-space:nowrap}
.ligne-prix.option span:first-child{color:var(--texte-2);font-size:17px}
.ligne-prix.option b{font-size:20px}

.autotest{border-top:1px solid var(--filet);margin-top:36px;padding-top:30px;max-width:760px}
.autotest .q{border-top:0;padding-top:0;margin-top:30px}
.autotest .q:first-of-type{margin-top:0}
.autotest .verdict{background:var(--brun-profond);color:var(--fond);padding:30px 32px;margin-top:34px}
.autotest .verdict span{display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ambre);font-weight:600}
.autotest .verdict b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:29px;line-height:1.14;margin-top:10px}
.autotest .verdict p{font-size:16px;line-height:1.6;color:rgba(247,239,225,.78);margin-top:12px}
.autotest .verdict .lien{color:var(--ambre);margin-top:18px}

.clause{border:1px solid var(--filet-leger);padding:30px 32px;margin-top:44px;max-width:74ch}
.clause h3{font-size:21px;margin-bottom:6px}
.clause p{font-size:16px;line-height:1.65;color:var(--texte-2);margin-top:12px}

@media (max-width:900px){
  .echeance,.acteurs{grid-template-columns:1fr}
  .echeance div,.acteur{border-right:0;border-bottom:1px solid var(--filet-leger);padding-right:0}
  .echeance div:last-child,.acteur:last-child{border-bottom:0}
}

/* Branche facturation electronique, suite : faits sources, statuts, cabinet */
.faits{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--filet);margin-top:40px}
.fait{padding:26px 30px 28px 0;border-right:1px solid var(--filet-leger);border-bottom:1px solid var(--filet-leger)}
.fait:nth-child(2n){border-right:0;padding-right:0}
.fait b{display:block;font-family:'DM Serif Display',serif;font-weight:400;font-size:26px;line-height:1.14}
.fait p{font-size:16px;line-height:1.55;color:var(--texte-2);margin-top:10px}
.fait .src{display:block;font-size:13px;color:var(--terra-fonce);margin-top:12px;font-style:italic}
.fait .avr{display:inline-block;background:var(--fond-2);border:1px dashed var(--filet-leger);padding:3px 8px;font-size:13px;font-style:normal;color:var(--texte-2)}
.statuts td:first-child{font-family:'DM Serif Display',serif;font-size:20px;white-space:nowrap}
.cabinet{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:30px 0;margin-top:48px;max-width:74ch}
.cabinet h2{font-size:27px;margin:8px 0 0;max-width:none}
.cabinet p{font-size:17px;line-height:1.62;color:var(--texte-2);margin-top:14px}
@media (max-width:900px){
  .faits{grid-template-columns:1fr}
  .fait{border-right:0;padding-right:0}
}

/* Bloc d'engagements de service : liste sobre, filets fins, aucun ornement */
.liste.engagements{margin-top:30px;max-width:76ch}
.liste.engagements li{border-top:1px solid var(--filet-leger);padding:15px 0;margin-top:0;font-size:18px;line-height:1.55}
.liste.engagements li:first-child{border-top:1px solid var(--filet)}
.liste.engagements li::before{display:none}

/* Bloc d'engagements de service : liste sobre, filets fins, aucun ornement */
.liste.engagements{margin-top:30px;max-width:76ch}
.liste.engagements li{border-top:1px solid var(--filet-leger);padding:15px 0;margin-top:0;font-size:18px;line-height:1.55}
.liste.engagements li:first-child{border-top:1px solid var(--filet)}
.liste.engagements li::before{display:none}

/* Traduction des noms de forfaits : le nom ne suffit pas, la definition suit */
.forfait .traduction{font-size:15px;line-height:1.45;color:var(--texte-2);margin:6px 0 14px}
.forfait.reco .traduction{color:var(--ambre-fonce)}

/* ============================================================
   Specification de design, phase 1 : application de l'echelle.
   Ces regles arrivent en fin de feuille pour primer sur les
   valeurs historiques, sans avoir a les retirer une a une.
   ============================================================ */
.hero h1{font-size:var(--t-display);line-height:var(--l-display);letter-spacing:-.015em}
.hero.interne h1{font-size:var(--t-h1);line-height:var(--l-h1)}
.section h2,.bandeau h2{font-size:var(--t-h2);line-height:var(--l-h2)}
.section .bloc h2,.bloc h2,.bloc h3,.art h2{font-size:var(--t-h3);line-height:var(--l-h3)}
.art h2{font-size:var(--t-h2);line-height:var(--l-h2)}
.art h3{font-size:var(--t-h3);line-height:var(--l-h3)}
.lead{font-size:20px;line-height:30px}
.surtitre,.sombre .sur,.fait .src,.micro{font-size:var(--t-micro);line-height:var(--l-micro)}
.texte,.art p,.bloc p{font-size:var(--t-corps);line-height:var(--l-corps)}
.section{padding:var(--section) 0}

/* Chiffres de prix : chasse fixe pour l'alignement vertical des colonnes,
   jamais d'animation dessus (2.2). */
.forfait .prix,.niv .prix,.ligne-prix b,.kpi b,.estim-sortie b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Elevation au survol : 2 px, 150 ms, rien d'autre (5.1) */
a.pilier:hover,.article-ligne:hover,.porte:hover{transform:translateY(-2px)}
a.pilier,.article-ligne,.porte{transition:transform .15s ease}
.b1:hover,.b2:hover{transform:translateY(-2px)}
.b1,.b2{transition:transform .15s ease,background .15s ease,border-color .15s ease}

/* Mouvement reduit : tout s'affiche, rien ne bouge (2bis.8, 7) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1 !important;transform:none !important}
}
html{scroll-behavior:smooth}

/* ============================================================
   Phase 2 : le hero (specification 2 bis)
   ============================================================ */
.hero{min-height:auto;max-height:82vh;padding:120px 0 var(--e9)}
.hero .zone{max-width:var(--gabarit)}
.hero h1{max-width:16ch}
.hero .lead{max-width:520px}
@media (min-width:1025px){
  .hero .zone > *{max-width:calc(100% * 7 / 12)}
  .hero{display:flex;align-items:center}
}
@media (max-width:640px){
  .hero{max-height:none;padding:96px 0 var(--e8)}
  .hero .boutons{flex-direction:column;align-items:stretch}
  .hero .boutons .b1,.hero .boutons .b2{width:100%;justify-content:center;min-height:48px}
}

/* Animation d'entree : une seule fois, jamais rejouee (2bis.8) */
@keyframes entree{from{opacity:0;transform:translateY(var(--dy,8px))}to{opacity:1;transform:none}}
.hero .surtitre{animation:entree .4s ease-out both}
.hero h1{--dy:12px;animation:entree .4s ease-out .12s both}
.hero .lead{animation:entree .4s ease-out .24s both}
.hero .boutons{--dy:0px;animation:entree .4s ease-out .34s both}

/* En-tete au defilement : le verre n'est autorise qu'ici (2bis.7) */
.entete{transition:background .25s ease,box-shadow .25s ease,padding .25s ease}
.entete.figee{background:rgba(247,239,225,.82);backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 1px 0 var(--filet-leger)}
.entete.figee .barre{padding-top:10px;padding-bottom:10px}

/* Indice de defilement : il annonce le moment signature, il ne decore pas (2bis.9) */
.indice{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:1px;height:24px;
  background:var(--terra);opacity:.4;animation:respirer 2s ease-in-out infinite;pointer-events:none}
@keyframes respirer{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
.indice.partie{opacity:0;transition:opacity .3s}
@media (max-width:640px){ .indice{display:none} }

/* Barre collante apres 900 px (5.1) */
.barre-collante{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--brun-profond);
  color:var(--fond);padding:12px var(--marge);display:flex;align-items:center;justify-content:space-between;
  gap:16px;transform:translateY(110%);transition:transform .3s ease;font-size:15px}
.barre-collante.visible{transform:none}
.barre-collante a{color:var(--ambre);font-weight:600;text-decoration:none;white-space:nowrap}
.barre-collante span{color:rgba(247,239,225,.8)}
@media (max-width:640px){ .barre-collante{font-size:14px;padding:10px 16px} .barre-collante span{display:none} }

/* Le moment signature, repli CSS. La sequence en quatre etapes se deroule
   une fois, en boucle calme. Aucun indicateur de performance : on montre
   le livrable, jamais le resultat (specification 3.3). */
.etapes-prod{list-style:none;margin:0;padding:0}
.ep{position:relative;padding:0 0 0 40px;margin-top:22px;opacity:0;animation:surgir .4s ease forwards}
.ep:first-child{margin-top:0}
.ep1{animation-delay:.3s} .ep2{animation-delay:1.1s} .ep3{animation-delay:4.6s} .ep4{animation-delay:6.4s}
.ep-num{position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--filet-leger);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--terra-fonce)}
.ep-lib{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--texte-2)}
.ep .consigne{margin:6px 0 0}
.ep .brouillon{margin-top:8px}
.ep .vignettes{margin-top:10px}
.ep .programme{margin-top:8px;animation-delay:6.6s}
@media (prefers-reduced-motion: reduce){
  .ep,.ep .vig,.ep .programme{opacity:1;animation:none}
  .brouillon p{width:auto;animation:none}
  .cur{display:none}
}

/* ============================================================
   Phase 4 : composants
   ============================================================ */

/* --- Frise de methode : le filet se remplit au defilement -----
   Specification 5.1 : le remplissage est declenche par le defilement,
   pas par le chargement, et les pastilles s'allument une a une.
   Specification 6.1 : sur l'accueil la frise est immobile. L'animation
   n'est donc portee que par `.frise.animee`, pose sur la seule page
   Methode. */
.rail i{animation:none;width:0;transition:width 2.4s ease .3s}
.frise.animee.vu .rail i{width:100%}
/* Hors page Methode, le filet est deja plein et ne bouge pas. */
.frise:not(.animee) .rail i{width:100%;transition:none}
.plots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.plots span{justify-self:center;align-self:center;width:9px;height:9px;border-radius:50%;
  background:var(--fond);border:1px solid var(--filet);box-sizing:border-box;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.frise.animee.vu .plots span{background:var(--terra);border-color:var(--terra)}
.frise.animee.vu .plots span:nth-child(1){transition-delay:.4s}
.frise.animee.vu .plots span:nth-child(2){transition-delay:1s}
.frise.animee.vu .plots span:nth-child(3){transition-delay:1.6s}
.frise.animee.vu .plots span:nth-child(4){transition-delay:2.2s}

/* --- Avant / apres a curseur glissant (I7, 5.1, 2.4, 6.4) -----
   Sans JavaScript, `.av-ap` reste la grille a deux colonnes : le
   composant est un enrichissement, jamais une condition de lecture.
   Le curseur ne s'active donc que sur `.av-ap.glisse`, classe posee
   par le script apres verification de la largeur. */
.av-ap.glisse{position:relative;grid-template-columns:1fr;gap:0;overflow:hidden;
  touch-action:pan-y;user-select:none}
.av-ap.glisse > .av,.av-ap.glisse > .ap{grid-area:1/1;width:100%}
.av-ap.glisse > .av{clip-path:inset(0 calc(100% - var(--x,50%)) 0 0)}
.av-ap.glisse > .ap{clip-path:inset(0 0 0 var(--x,50%))}
.av-ap.glisse .poignee{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;
  background:var(--terra);transform:translateX(-1px);border:0;padding:0;cursor:col-resize;
  z-index:2;touch-action:none}
.av-ap.glisse .poignee::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--terra);
  box-shadow:0 2px 10px rgba(36,19,9,.22)}
.av-ap.glisse .poignee::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:8px;
  transform:translate(-50%,-50%);z-index:1;
  background:linear-gradient(90deg,var(--fond) 0 3px,transparent 3px 5px,var(--fond) 5px 9px,
    transparent 9px 11px,var(--fond) 11px 14px)}
.av-ap.glisse .poignee:focus-visible{outline:2px solid var(--terra-fonce);outline-offset:3px}
.glisse-aide{font-size:var(--t-petit);color:var(--texte-2);margin-top:10px}

@media (max-width:620px){
  /* La frise passe a la verticale : un filet a gauche, une pastille par etape. */
  .frise .rail{display:none}
  .etapes{gap:0;border-left:1px solid var(--filet-leger);padding-left:24px}
  .etape{position:relative;padding:18px 0}
  .etape::before{content:"";position:absolute;left:-28px;top:24px;width:9px;height:9px;
    border-radius:50%;background:var(--fond);border:1px solid var(--filet);box-sizing:border-box}
  .frise.animee.vu .etape::before{background:var(--terra);border-color:var(--terra)}
}
@media (prefers-reduced-motion: reduce){
  .frise .rail i{width:100%;transition:none}
  .plots span{transition:none}
}

/* --- Mega-menu a deux entrees (2.4) --------------------------
   Bati sur `details` / `summary` : il s'ouvre au clavier et sans
   JavaScript, le script n'ajoute que le survol, la fermeture par
   Echap et la fermeture au clic exterieur. Sur mobile, la meme
   structure devient un accordeon dans le menu plein ecran. */
.barre{position:relative}
/* Le panneau se cale sur la barre, pas sur son entete : centre sur une
   entree, il debordait du cadre et ses colonnes se serraient. */
.men{position:static}
.men-tete{list-style:none;cursor:pointer;color:var(--texte-2);padding-bottom:3px;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.men-tete::-webkit-details-marker{display:none}
.men-tete::after{content:"";width:6px;height:6px;border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease}
.men[open] > .men-tete{color:var(--texte);border-bottom-color:var(--terra)}
.men[open] > .men-tete::after{transform:rotate(225deg) translate(-3px,-3px)}
.men-tete:hover{color:var(--texte);border-bottom-color:var(--terra)}
.men-tete:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.men-panneau{position:absolute;top:calc(100% + 14px);left:0;right:0;background:var(--fond);
  border:1px solid var(--filet-leger);border-top:2px solid var(--terra);
  box-shadow:0 18px 40px rgba(36,19,9,.14);padding:32px 40px;z-index:70}
/* Passerelle invisible : le curseur traverse l'ecart entete-panneau sans le fermer. */
.men-panneau::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.men-zone{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.men-col{display:flex;flex-direction:column;gap:2px}
.men-titre{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--terra-fonce);margin-bottom:10px}
.nav .men-col a{text-transform:none;letter-spacing:0;font-size:15px;line-height:1.4;
  padding:8px 0;border-bottom:1px solid var(--filet-leger);color:var(--texte)}
.nav .men-col a:last-child{border-bottom:1px solid var(--filet-leger)}
.nav .men-col a:hover{color:var(--terra-fonce);border-bottom-color:var(--terra)}

@media (max-width:1000px){
  /* Le verre de la barre creait un bloc conteneur : `backdrop-filter` fait
     qu'un enfant en `position:fixed` se cale sur la barre et non sur la
     fenetre. Le menu plein ecran restait donc enferme dans l'entete, haut
     de 128 px. Mesure faite au rendu, pas deduite. Sur mobile le verre est
     invisible de toute facon : on le remplace par un fond quasi opaque. */
  .barre,.entete.figee{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(247,239,225,.95)}
  /* Le logo et le bouton de fermeture restent au-dessus du menu plein
     ecran : sans cela, le menu recouvre son propre bouton de fermeture. */
  .logo,.burger{position:relative;z-index:80}
  /* Menu plein ecran, chaque entree devient un accordeon (2.4). */
  .nav.ouvert{position:fixed;inset:0;border:0;border-radius:0;padding:88px 24px 40px;
    overflow-y:auto;background:var(--fond);gap:0;text-transform:none;letter-spacing:0;font-size:17px}
  .nav.ouvert .men{width:100%}
  .nav.ouvert .men-tete{width:100%;justify-content:space-between;padding:16px 0;
    border-bottom:1px solid var(--filet-leger);text-transform:uppercase;
    letter-spacing:.1em;font-size:13px;font-weight:500}
  .nav.ouvert .men-panneau{position:static;transform:none;min-width:0;max-width:none;
    border:0;border-top:0;box-shadow:none;padding:8px 0 16px 14px;background:none}
  .nav.ouvert .men-zone{grid-template-columns:1fr;gap:18px}
  .nav.ouvert .men-titre{margin-bottom:6px}
}

/* --- Page Tarifs : sommaire collant et estimateur detache (6.2) ---
   C'est la page la plus dense du site : le sommaire suit la lecture et se
   reduit une fois depasse, l'estimateur sort du fond commun parce que
   c'est le seul dispositif que les concurrents n'ont pas. */
.sommaire-collant{position:sticky;top:92px;z-index:30;background:var(--fond);
  transition:box-shadow .25s ease}
.sommaire-collant .sommaire{margin-top:0}
.sommaire-collant.reduite{box-shadow:0 1px 0 var(--filet-leger)}
.sommaire a{transition:padding .25s ease}
.sommaire a span{transition:opacity .2s ease,height .25s ease,margin .25s ease}
.reduite .sommaire a{padding:11px 22px 12px 0}
.reduite .sommaire a span{opacity:0;height:0;overflow:hidden;margin:0}
.reduite .sommaire a b{font-size:17px;margin-top:0}
#estimateur{background:var(--fond-2)}
#estimateur .estim{background:var(--fond);border:1px solid var(--filet-leger);border-top:2px solid var(--terra);
  margin-top:36px}
#estimateur .estim-reglages{padding:32px 36px 34px}

/* --- Accueil : bento hierarchise et deux cartes de situation (6.1) ---
   Le pilier dominant occupe une case plus grande parce que son information
   est plus lourde, pas pour decorer. Angles droits : la charte interdit les
   series de cartes a coins arrondis, pas le fond secondaire. */
.monde{background:var(--fond-2);padding:32px 30px 34px;border-top:1px solid var(--filet)}
@media (min-width:1001px){
  .piliers.bento{grid-template-columns:repeat(2,1fr)}
  .bento > .pilier:first-child{grid-column:1 / -1;min-height:240px}
  .bento > .pilier:first-child h3{font-size:34px}
  .bento > .pilier:first-child p{max-width:62ch}
}
@media (max-width:760px){
  .sommaire-collant{position:static}
}

/* --- Blog : filtres par pilier et etat vide (6.6) ---------------
   La barre est masquee dans le HTML et revelee par le script : sans
   JavaScript, la liste complete reste affichee plutot qu'un filtre mort. */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.filtres button{font:inherit;font-size:var(--t-petit);letter-spacing:.06em;
  background:none;border:1px solid var(--filet-leger);color:var(--texte-2);
  padding:9px 15px;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.filtres button:hover{border-color:var(--terra);color:var(--texte)}
.filtres button[aria-pressed="true"]{background:var(--brun-profond);color:var(--fond);
  border-color:var(--brun-profond)}
.filtres button:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.vide{border-top:1px solid var(--filet);padding-top:22px;margin-top:8px;
  font-size:17px;line-height:1.6;color:var(--texte-2);max-width:66ch}

/* Ancres : l'entete collante recouvrait la cible d'un lien interne. */
main [id]{scroll-margin-top:120px}
.sommaire-collant ~ section[id],.sommaire-collant ~ section [id]{scroll-margin-top:176px}

/* `hidden` doit gagner sur tout `display` pose par la charte : sans cette
   ligne, un article filtre reste visible parce que `.article-ligne` est en
   `display:grid`. Mesure faite au rendu. */
[hidden]{display:none!important}

/* --- Pictogrammes des piliers (I3) ------------------------------
   Traits fins, formes abstraites, jamais de loupe ni d'ampoule : le
   dossier de design interdit les icones figuratives, vues partout et
   sans information. Visibilite, un point et trois arcs concentriques.
   Contenu, trois lignes decroissantes dans un cadre. Automatisation,
   trois noeuds relies en boucle fermee. SVG inline, aucune police
   d'icones, aucun sprite. */
.ico{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round;color:var(--terra-fonce);
  margin-bottom:auto;display:block}
.pilier .ico{position:relative}

/* --- Apercu de livrable sur la page Tarifs (I5) ------------------
   Montrer le document plutot que le decrire. Le degrade du bas de `.doc`
   fait le flou partiel demande : on lit la structure, pas le detail. */
.livrable{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;margin-top:56px}
.livrable h3{font-size:30px;line-height:1.12;margin:16px 0 14px}
.livrable .doc{max-width:none}
@media (max-width:900px){ .livrable{grid-template-columns:1fr;gap:32px} }

/* --- Schema de citation generative (I4) --------------------------
   Une question a gauche, la reponse construite au centre, les sources
   citees a droite dont la votre en ambre. En HTML, pas en image : il se
   lit au lecteur d'ecran, il se traduit, il ne pese rien. */
.cite-schema{margin:40px 0 8px;border-top:1px solid var(--filet);padding-top:26px}
.cite-schema figcaption{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--terra-fonce);margin-bottom:22px}
.cite-flux{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch}
.cite-col{background:var(--fond-2);padding:20px 20px 22px;display:flex;flex-direction:column}
.cite-col.cite-rep{background:var(--brun-profond);color:var(--fond)}
.cite-lib{display:block;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--texte-2);margin-bottom:12px}
.cite-rep .cite-lib{color:var(--ambre)}
.cite-col p{font-size:16px;line-height:1.55;margin:0}
.cite-rep p{color:rgba(247,239,225,.82)}
.cite-q{font-family:'DM Serif Display',serif;font-size:20px;line-height:1.25}
.cite-fl{align-self:center;color:var(--terra);font-size:20px}
.cite-src{margin:0;padding-left:18px;font-size:16px;line-height:1.5}
.cite-src li{padding:5px 0;color:var(--texte-2)}
.cite-src li.vous{color:var(--texte);font-weight:600;
  box-shadow:inset 3px 0 0 var(--ambre);padding-left:12px;margin-left:-12px}
.cite-note{font-size:16px;line-height:1.6;color:var(--texte-2);margin-top:20px;max-width:72ch}
@media (max-width:900px){
  .cite-flux{grid-template-columns:1fr;gap:12px}
  .cite-fl{justify-self:center;transform:rotate(90deg)}
}
/* Le rapport de fiabilisation est un tableau, pas des encarts chiffres :
   son objet est la ligne a corriger. Meme cadre, meme flou du bas. */
.livrable .doc .tableau{margin-top:0;font-size:15px}
.livrable .doc .tableau td,.livrable .doc .tableau th{padding-right:14px}
.livrable .doc .doc-corps{padding-bottom:44px}

/* ============================================================
   Le hero, corrige au rendu le 11/09/2026
   ============================================================
   Trois defauts mesures, pas supposes, sur l'accueil a 1440x900 :
   le hero coupait 229 px de son propre contenu (262 px sur un
   MacBook 1512x820), donc SES DEUX BOUTONS N'ETAIENT PAS VISIBLES ;
   le H1 tenait sur neuf lignes la ou la specification 2bis.4 en
   autorise deux ; et sa colonne faisait 311 px au lieu des sept
   douziemes demandes, parce que la demonstration occupait la moitie
   droite du meme rang.

   Le defaut ne se voyait pas sur telephone : la, rien ne coupe.
   C'est un defaut de bureau uniquement. */

/* 82 vh devient un minimum, plus un maximum. Un maximum double d'un
   `overflow:hidden` est exactement ce qui avait masque les boutons :
   la hauteur tenait, le contenu non, et rien ne le signalait. */
.hero{display:flex;align-items:center;min-height:82vh;max-height:none;
  overflow:visible;padding:150px 0 80px}
.hero .zone{width:100%}
/* Sept colonnes sur douze, gouttiere 24 px (specification 2.3).
   Le tiers droit reste vide : c'est le vide assume de la partie 1.3. */
.hero .zone > *{max-width:calc((100% - 264px) / 12 * 7 + 144px)}
.hero h1{max-width:none}
.hero .lead{max-width:520px;margin-top:24px}
.hero .boutons{margin-top:36px}

/* Le moment signature, juste sous le hero. Peu de marge haute : son bord
   superieur doit depasser sous la ligne de flottaison, sinon il ne
   declenche aucun defilement. */
.signature{padding:0 0 var(--section);border-top:0}
/* Pleine largeur de contenu, comme le demande la partie 6.1 du dossier.
   A 560 px pousse a droite, la moitie gauche restait vide et le panneau
   lisait comme un trou, pas comme une demonstration. */
.signature .verre{margin:0;max-width:none}
.signature .etapes-prod{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;align-items:start}
.signature .ep{margin-top:0;padding-left:36px}
.signature .verre-corps{padding:32px 36px 36px}
@media (max-width:900px){
  .signature .etapes-prod{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .signature .etapes-prod{grid-template-columns:1fr;gap:22px}
}

@media (max-width:1024px){
  .hero{min-height:auto;padding:120px 0 64px}
  .hero .zone > *{max-width:none}
  .signature .verre{margin:0;max-width:none}
  .signature{padding-top:48px}
}
@media (max-width:640px){
  .hero{padding:96px 0 48px}
}
/* Deux details releves au rendu de la sequence en quatre colonnes :
   cinq vignettes dans une colonne de 250 px se lisaient comme des points,
   et la pastille « Programme » se cassait sur trois lignes. */
.signature .vignettes{grid-template-columns:repeat(3,1fr);gap:8px}
.signature .vig:nth-child(4),.signature .vig:nth-child(5){display:none}
.signature .programme{display:block;padding:12px 14px;line-height:1.45}