/* =====================================================================
   ALPICARE — maquette « mouvement »
   Direction retenue : la structure et la retenue du design de mouvement,
   mais la palette chaude de Flytel plutôt que le gris et le bleu de tout
   le monde. Crème pour le papier, lac pour l'encre, terre pour l'accent,
   sable pour les fonds secondaires. Photographie du paysage franco-suisse
   à lumière rasante. Tout se révèle au défilement, et rien ne bouge si le
   lecteur a demandé moins d'animation.
   ===================================================================== */

:root{
  /* Papier et encre */
  --creme:#F6F1E7;      /* fond général */
  --craie:#FFFCF6;      /* cartes et surfaces posées */
  --sable:#EFE4CF;      /* fond secondaire, réserves d'image */
  --regle:#E2D7C2;      /* filets et séparateurs */
  --lac:#123047;        /* encre, bleu profond du Léman */
  --gris:#6C7583;       /* texte secondaire */

  /* Accent */
  --terre:#B04520;      /* accent principal, terracotta */
  --terre-vif:#E8733F;  /* accent clair, sur fond sombre */

  /* Alias hérités de la première maquette, conservés pour le balisage */
  --fond:var(--creme);--fond-2:var(--sable);--encre:var(--lac);
  --gris-2:var(--regle);--blanc:var(--craie);--bleu:var(--terre);

  --display:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;
  --texte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --edito:"Literata",Georgia,"Times New Roman",serif;

  --e1:8px;--e2:16px;--e3:24px;--e4:40px;--e5:64px;--e6:96px;--e7:140px;
  --marge:20px;--rayon:16px;
  --sortie:cubic-bezier(.16,1,.3,1);
  --ombre:0 1px 2px rgba(18,48,71,.05),0 18px 44px rgba(18,48,71,.07);
  --ombre-haute:0 30px 70px rgba(18,48,71,.12);
}
@media(min-width:900px){:root{--marge:56px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--lac);font-family:var(--texte);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.env{max-width:1240px;margin:0 auto;padding:0 var(--marge)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typographie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.022em;line-height:1.02}
h1{font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.06}
h2{font-size:clamp(1.85rem,3.7vw,2.9rem)}
h3{font-family:var(--texte);font-weight:700;font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.01em;line-height:1.2}
.sur{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--terre)}
.slogan{font-family:var(--edito);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.5rem);
  line-height:1.3;color:var(--terre)}
.pied__slogan{font-family:var(--edito);font-style:italic;font-size:16px;color:var(--terre-vif);margin-top:8px}
.lead{font-family:var(--edito);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--gris);max-width:46ch}
.note{font-size:13px;line-height:1.65;color:var(--gris)}
.bleu{color:var(--terre)}
mark{background:transparent;color:var(--terre)}

/* ---------- Progression et barre ---------- */
.progres{position:fixed;top:0;left:0;height:3px;width:100%;z-index:80;background:transparent}
/* Largeur fixe et transformation : le compositeur étire la barre sans refaire la page. */
.progres i{display:block;height:100%;width:100%;background:var(--terre);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.barre{position:fixed;top:0;left:0;right:0;z-index:70;padding:var(--e3) 0;
  transition:background .3s var(--sortie),padding .3s var(--sortie),box-shadow .3s var(--sortie)}
.barre--pose{background:rgba(246,241,231,.97);padding:var(--e2) 0;
  box-shadow:0 1px 0 rgba(18,48,71,.1)}
.barre__i{max-width:1240px;margin:0 auto;padding:0 var(--marge);display:flex;align-items:center;gap:var(--e3)}
.marque{font-family:var(--display);font-size:21px;letter-spacing:-.03em;text-decoration:none}
.barre nav{display:none;gap:var(--e3);margin-left:auto;font-size:14px;color:var(--gris)}
@media(min-width:820px){.barre nav{display:flex}}
.barre nav a{text-decoration:none}
.barre nav a:hover{color:var(--lac)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 var(--e4);
  border-radius:999px;background:var(--lac);color:var(--creme);font-weight:600;font-size:15px;text-decoration:none;
  border:0;cursor:pointer;transition:transform .3s var(--sortie),background .3s var(--sortie)}
.btn:hover{transform:translateY(-2px);background:var(--terre)}
.btn--bleu{background:var(--terre)}
.btn--bleu:hover{background:var(--lac)}
.btn--clair{background:transparent;color:var(--lac);box-shadow:inset 0 0 0 1.5px var(--regle)}
.btn--clair:hover{background:var(--lac);color:var(--creme);box-shadow:none}
.btn--sm{min-height:42px;font-size:14px;padding:0 var(--e3)}
.barre .btn{margin-left:auto}
@media(min-width:820px){.barre .btn{margin-left:0}}

/* ---------- Hero ---------- */
.hero{padding:150px 0 var(--e6);position:relative}
.hero__g{display:grid;gap:var(--e5);align-items:center;margin-top:var(--e5)}
@media(min-width:900px){.hero__g{grid-template-columns:1fr .82fr;gap:var(--e6)}}
.hero h1{margin-top:var(--e3)}
.hero h1 span{display:block}
.hero .lead{margin-top:0}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e4)}
.hero__img{position:relative;border-radius:var(--rayon);overflow:hidden;background:var(--sable);aspect-ratio:4/3;
  box-shadow:var(--ombre-haute)}
@media(min-width:900px){.hero__img{aspect-ratio:4/3}}
.hero__img img{width:100%;height:100%;object-fit:cover;will-change:transform}
.hero__bas{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e6);
  padding-top:var(--e3);border-top:1px solid var(--regle);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris)}
.defiler{display:inline-flex;align-items:center;gap:10px}
.defiler i{display:block;width:26px;height:1px;background:var(--terre);animation:pousse 1.8s var(--sortie) infinite}
@keyframes pousse{0%,100%{transform:scaleX(1);transform-origin:left}50%{transform:scaleX(.35);transform-origin:left}}
@media(prefers-reduced-motion:reduce){.defiler i{animation:none}}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;gap:var(--e4);padding:var(--e6) 0;border-top:1px solid var(--regle)}
@media(min-width:760px){.chiffres{grid-template-columns:repeat(3,1fr)}}
.chiffre b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5.4vw,3.9rem);letter-spacing:-.03em;line-height:1}
.chiffre span{display:block;margin-top:var(--e2);font-family:var(--edito);font-size:15px;line-height:1.55;
  color:var(--gris);max-width:32ch}

/* ---------- Section épinglée ---------- */
.epingle{position:relative;padding:var(--e6) var(--marge)}
.epingle__g{display:grid;gap:var(--e5)}
@media(min-width:900px){.epingle__g{grid-template-columns:1fr 1fr;gap:var(--e6);align-items:start}}
.epingle__v{position:relative;border-radius:var(--rayon);overflow:hidden;background:var(--sable);aspect-ratio:1/1;
  box-shadow:var(--ombre)}
@media(min-width:900px){.epingle__v{position:sticky;top:22vh}}
.epingle__v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .7s var(--sortie),transform .7s var(--sortie);transform:scale(1.04)}
.epingle__v img.on{opacity:1;transform:none}
.etape{padding:var(--e5) 0;border-top:1px solid var(--regle);opacity:.36;transition:opacity .45s var(--sortie)}
.etape.on{opacity:1}
.etape:first-child{border-top:0}
.etape b{display:block;font-family:var(--display);font-size:12px;letter-spacing:.16em;color:var(--terre);margin-bottom:var(--e2)}
.etape p{margin-top:var(--e2);color:var(--gris)}

/* ---------- Réglage ---------- */
.reglage{display:grid;gap:var(--e4);padding:var(--e4);background:var(--craie);border-radius:var(--rayon);
  box-shadow:var(--ombre);margin-top:var(--e5)}
@media(min-width:980px){.reglage{grid-template-columns:1.4fr 1fr 1.3fr;align-items:end;gap:var(--e5)}}
.champ__l{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:var(--e2)}
.champ__l b{font-family:var(--display);font-size:19px;letter-spacing:-.02em;color:var(--lac)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--regle);cursor:pointer;border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--terre);
  border:4px solid var(--craie);box-shadow:0 2px 8px rgba(176,69,32,.35);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--terre);border:4px solid var(--craie);cursor:grab}
.groupe{display:flex;flex-wrap:wrap;gap:var(--e1)}
.opt{min-height:42px;padding:0 var(--e3);border-radius:999px;border:0;background:var(--sable);color:var(--lac);
  font-family:var(--texte);font-size:14px;font-weight:500;cursor:pointer;transition:background .25s var(--sortie),color .25s var(--sortie)}
.opt[aria-pressed=true]{background:var(--lac);color:var(--creme)}
.compteur{display:inline-flex;align-items:center;gap:var(--e1);background:var(--sable);border-radius:999px;padding:0 6px;min-height:42px}
.compteur button{width:32px;height:32px;border:0;border-radius:50%;background:transparent;font-size:18px;cursor:pointer;color:var(--lac)}
.compteur button:disabled{opacity:.25;cursor:not-allowed}
.compteur span{font-size:14px;padding:0 4px;white-space:nowrap}

/* ---------- Formules ---------- */
.trio{display:grid;gap:var(--e3);margin-top:var(--e4)}
@media(min-width:900px){.trio{grid-template-columns:repeat(3,1fr)}}
.carte{position:relative;background:var(--craie);border-radius:var(--rayon);padding:var(--e4);display:flex;flex-direction:column;
  transition:transform .4s var(--sortie),box-shadow .4s var(--sortie)}
.carte:hover{transform:translateY(-6px);box-shadow:var(--ombre-haute)}
.carte--phare{background:var(--lac);color:var(--creme)}
.carte--phare .note,.carte--phare li span{color:rgba(246,241,231,.7)}
.carte__b{position:absolute;top:var(--e3);right:var(--e3);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terre-vif)}
.carte ul{list-style:none;display:grid;gap:var(--e2);margin:var(--e3) 0 var(--e4)}
.carte li{display:grid;grid-template-columns:1fr auto;gap:var(--e2);align-items:baseline;font-size:14px;
  padding-bottom:var(--e2);border-bottom:1px solid rgba(108,117,131,.24)}
.carte--phare li{border-bottom-color:rgba(246,241,231,.2)}
.carte li b{font-weight:600;white-space:nowrap}
.prix{font-family:var(--display);font-size:clamp(2.8rem,5.4vw,3.7rem);letter-spacing:-.035em;line-height:1;margin-top:auto;
  font-variant-numeric:tabular-nums}
.prix small{display:block;font-family:var(--texte);font-weight:400;font-size:13px;letter-spacing:0;color:var(--gris);margin-top:6px}
.carte--phare .prix small{color:rgba(246,241,231,.65)}
.carte .btn{margin-top:var(--e3);width:100%}
.carte--phare .btn{background:var(--terre-vif);color:var(--lac)}
.carte--phare .btn:hover{background:var(--creme)}

/* ---------- Bande d'image pleine largeur ---------- */
.bande{margin:var(--e6) 0;border-radius:var(--rayon);overflow:hidden;position:relative;background:var(--sable);aspect-ratio:16/6}
.bande img{width:100%;height:100%;object-fit:cover}
[data-parallaxe]{will-change:transform}
.bande__leg{position:absolute;inset:auto 0 0 0;margin:0;padding:var(--e6) var(--e4) var(--e4);
  background:linear-gradient(to top,rgba(18,48,71,.82),rgba(18,48,71,.35) 55%,rgba(18,48,71,0));
  color:var(--creme);font-family:var(--edito);font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.45}
@media(min-width:760px){.bande__leg{padding-right:46%}}

/* ---------- Deux pays : texte et illustration ---------- */
.duo{display:grid;gap:var(--e5);align-items:center;padding:var(--e6) 0}
@media(min-width:900px){.duo{grid-template-columns:1fr 1.05fr;gap:var(--e6)}}
.duo__img{border-radius:var(--rayon);overflow:hidden;background:var(--sable);box-shadow:var(--ombre)}
.duo__img img{width:100%;height:auto}
.liste{list-style:none;display:grid;gap:0;margin-top:var(--e4)}
.liste li{display:grid;grid-template-columns:1fr auto;gap:var(--e3);align-items:baseline;
  padding:var(--e3) 0;border-top:1px solid var(--regle)}
.liste li:first-child{border-top:0}
.liste b{font-size:15px;font-weight:600}
.liste small{display:block;margin-top:3px;font-size:13px;color:var(--gris)}
.liste i{font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--terre);white-space:nowrap}

/* ---------- Page « Poser une question » ---------- */
/* Le réglage de la situation : trois curseurs et les trois cotisations en regard. */
.situation{margin-top:var(--e5);padding:var(--e4);background:var(--craie);
  border:1px solid var(--regle);border-radius:var(--rayon)}
.situation__d{margin-top:var(--e2);font-family:var(--edito);font-size:1.02rem;line-height:1.5;
  color:var(--gris);max-width:60ch}
.situation__r{display:grid;gap:var(--e3);margin-top:var(--e4)}
@media(min-width:900px){.situation__r{grid-template-columns:1fr 1fr;gap:var(--e4)}
  .situation__r>div:last-child{grid-column:1/-1}}
.situation__r .groupe{display:flex;flex-wrap:wrap;gap:var(--e1);margin-top:var(--e1)}
.situation__p{list-style:none;display:grid;gap:var(--e2);margin-top:var(--e4)}
@media(min-width:640px){.situation__p{grid-template-columns:repeat(3,1fr)}}
.situation__p .carte{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);
  padding:var(--e3) var(--e4);background:var(--creme);border-radius:var(--rayon);border:0;box-shadow:none}
.situation__p .carte span{font-size:14px;color:var(--gris)}
.situation__p .carte b{font-family:var(--display);font-weight:400;font-size:1.3rem;color:var(--lac)}
.situation__n{margin-top:var(--e2);max-width:76ch}


/* Les deux colonnes « ce qu'il fait / ce qu'il ne fait pas ». */
.deux-listes{display:grid;gap:var(--e4);margin-top:var(--e4)}
@media(min-width:900px){.deux-listes{grid-template-columns:1fr 1fr;gap:var(--e5)}}
.deux-listes h3{font-size:1.05rem}
.deux-listes .liste{margin-top:var(--e2)}

/* ---------- Onglets des formules ---------- */
/* Trois produits comparables : on les empile en onglets plutôt que sur cinq mille
   pixels de défilement, sinon comparer le dentaire de l'un à celui de l'autre demande
   deux allers-retours. Sans JavaScript, les trois panneaux s'affichent l'un après
   l'autre, chacun sous son titre : la page reste entière. */
.onglets{display:grid;gap:var(--e1);margin-top:var(--e3)}
@media(min-width:760px){.onglets{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e2)}}
.onglet{display:grid;gap:3px;text-align:left;min-width:0;padding:var(--e3) var(--e4);
  border:1px solid var(--regle);border-radius:var(--rayon);background:var(--craie);
  color:var(--lac);cursor:pointer;font-family:var(--texte);
  transition:background .25s var(--sortie),border-color .25s var(--sortie),color .25s var(--sortie)}
.onglet b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em}
.onglet small{font-size:13px;line-height:1.35;color:var(--gris);text-wrap:pretty}
.onglet:hover{border-color:var(--lac)}
.onglet[aria-selected="true"]{background:var(--lac);border-color:var(--lac);color:var(--creme)}
.onglet[aria-selected="true"] small{color:var(--sable)}
/* « volet » et non « panneau » : .panneau est déjà, dans ce système, la grande carte
   bleu nuit des sections d'appel. Réemployer son nom peignait les trois formules en
   bleu nuit — le genre de collision qui ne se voit qu'à l'écran. */
.volet{margin-top:var(--e4);min-width:0}
/* Dans un volet, le duo d'ouverture n'est pas une section autonome : il ouvre le volet.
   Ses 96 px de respiration hauts et bas creusaient deux trous, l'un sous les onglets,
   l'autre avant « En France ». */
.volet>.duo{padding-top:0;padding-bottom:var(--e4);align-items:start}
.volet:focus{outline:none}
.volet>.duo>div>h2{margin-top:0}
/* Sans script, un filet sépare les trois volets ; avec, un seul est visible. */
.volet+.volet{padding-top:var(--e5);border-top:1px solid var(--regle)}
html.js .volet+.volet{padding-top:0;border-top:0}

/* ---------- Régime : la page se règle sur l'affiliation du lecteur ---------- */
.regime{display:grid;gap:var(--e3);margin-top:var(--e4);padding:var(--e4);
  background:var(--craie);border-radius:var(--rayon);border:1px solid var(--regle)}
@media(min-width:840px){.regime{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--e5)}}
.regime__t{margin-top:var(--e2);font-family:var(--edito);font-size:1.05rem;line-height:1.5;max-width:54ch}
.regime .note{margin-top:var(--e2);max-width:62ch}
.regime .groupe{display:flex;flex-wrap:wrap;gap:var(--e1)}
.h3__n{display:block;margin-top:5px;font-family:var(--texte);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--gris)}
.pour{min-width:0}
/* Sans JavaScript, les deux régimes s'affichent l'un après l'autre : la page reste
   entière et lisible. Le script n'en masque un que s'il a pu prendre la main. */
html.js .pour[data-pour]{display:none}
html.js[data-regime-actif="lamal"] .pour[data-pour="lamal"],
html.js[data-regime-actif="cmu"] .pour[data-pour="cmu"]{display:block}

/* ---------- Trois vignettes de paysage ---------- */
.mosaique{display:grid;gap:var(--e3);margin-top:var(--e5)}
@media(min-width:760px){.mosaique{grid-template-columns:repeat(3,1fr)}}
.vignette{border-radius:var(--rayon);overflow:hidden;background:var(--sable);position:relative;aspect-ratio:1/1;
  box-shadow:var(--ombre)}
.vignette img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--sortie)}
.vignette:hover img{transform:scale(1.04)}
.vignette figcaption{position:absolute;left:var(--e3);right:var(--e3);bottom:var(--e3);color:var(--creme);
  font-size:13px;line-height:1.45;text-shadow:0 1px 18px rgba(18,48,71,.65)}

/* ---------- Adhésion ---------- */
.adh{padding:var(--e6) var(--marge)}
.adh__g{display:grid;gap:var(--e5)}
@media(min-width:900px){.adh__g{grid-template-columns:1fr 1fr;gap:var(--e6)}}
.adh ol{list-style:none;counter-reset:e;display:grid;gap:0}
.adh li{counter-increment:e;display:grid;grid-template-columns:auto 1fr;gap:var(--e3);padding:var(--e3) 0;
  border-top:1px solid var(--regle);font-size:15px}
.adh li::before{content:counter(e,decimal-leading-zero);font-family:var(--display);font-size:13px;color:var(--terre);letter-spacing:.08em}
.adh li b{display:block;margin-bottom:2px}
.adh li span{color:var(--gris);font-size:14px}
.adh__img{margin-top:var(--e5);border-radius:var(--rayon);overflow:hidden;background:var(--sable);
  aspect-ratio:3/2;box-shadow:var(--ombre)}
.adh__img img{width:100%;height:100%;object-fit:cover}

/* ---------- Pied ---------- */
.pied{background:var(--lac);color:rgba(246,241,231,.66);padding:var(--e6) 0 var(--e4);font-size:13px;
  line-height:1.7;margin-top:var(--e6)}
.pied .marque{color:var(--creme);font-size:28px}
.pied__g{display:grid;gap:var(--e4);margin-top:var(--e4)}
@media(min-width:820px){.pied__g{grid-template-columns:1.5fr 1fr 1fr}}
.pied b{color:var(--creme)}
.pied mark{color:var(--terre-vif)}

/* ---------- Apparitions ---------- */
.js .pose{opacity:0;transform:translateY(26px);transition:opacity .7s var(--sortie),transform .7s var(--sortie)}
.js .pose.vu{opacity:1;transform:none}
.js .mot{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s var(--sortie),transform .5s var(--sortie)}
.js .mot.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .pose,.js .mot{opacity:1!important;transform:none!important;transition:none}
  .hero__img img,.bande img,.vignette img{transform:none!important}
}

/* =====================================================================
   Composants des pages intérieures — même écriture que l'accueil :
   filets fins, craie sur crème, terre pour l'accent, Literata pour lire.
   ===================================================================== */

/* ---------- Navigation entre les pages ---------- */
.barre nav a[aria-current]{color:var(--lac)}
.barre nav a[aria-current]::after{content:"";display:block;height:1.5px;background:var(--terre);margin-top:3px}

/* ---------- En-tête de page intérieure ---------- */
.tete{padding-top:112px;padding-bottom:var(--e3)}
@media(min-width:900px){.tete{padding-top:132px;padding-bottom:var(--e4)}}
.tete h1{margin-top:var(--e2);max-width:18ch}
.tete .lead{margin-top:var(--e3)}
.tete__bas{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e4)}

/* ---------- Article long ---------- */
.article{display:grid;gap:var(--e6);align-items:start}
@media(min-width:1040px){.article{grid-template-columns:230px minmax(0,1fr);gap:var(--e7)}
  /* Une page sans sommaire garde toute la largeur : sans cela, sa colonne de
     texte irait se loger dans la gouttière prévue pour le sommaire. */
  .article--seul{grid-template-columns:minmax(0,1fr)}}
.article__c{max-width:74ch}
.article__c h2{margin:var(--e7) 0 var(--e3);max-width:30ch}
.article__c h2:first-child{margin-top:0}
/* L'œil qui annonce une section appartient à son titre, pas à la section précédente.
   La respiration se met donc AVANT lui, et le titre le suit de près : sinon on lit
   « 01 · La LAMal », cent quarante pixels de vide, puis un titre qui semble orphelin. */
.article__c .sur{margin-top:var(--e7)}
.article__c .sur:first-child{margin-top:0}
.article__c .sur + h2{margin-top:var(--e2)}
.article__c .sur + h3{margin-top:var(--e2)}
.article__c h3{margin:var(--e5) 0 var(--e2)}
.article__c p{margin-top:var(--e3);font-family:var(--edito);font-size:1.05rem;line-height:1.7}
.article__c p.note{font-family:var(--texte);font-size:13px;line-height:1.65}
.article__c ul,.article__c ol{margin:var(--e3) 0 0 var(--e3);padding-left:var(--e3)}
.article__c li{margin-top:var(--e2);font-family:var(--edito);line-height:1.65}
.article__c a{color:var(--terre);text-decoration:underline;text-underline-offset:3px}
.article__c strong,.article__c b{font-weight:700}

/* ---------- Sommaire collant ---------- */
.sommaire{font-size:14px}
@media(min-width:1040px){.sommaire{position:sticky;top:110px}}
.sommaire b{display:block;font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terre);margin-bottom:var(--e3)}
.sommaire ol{list-style:none;display:grid;gap:0}
.sommaire li{border-top:1px solid var(--regle)}
.sommaire li:first-child{border-top:0}
.sommaire a{display:block;padding:var(--e2) 0;color:var(--gris);text-decoration:none;line-height:1.35}
.sommaire a:hover{color:var(--lac)}

/* ---------- Encart en marge du texte ---------- */
.encart{margin:var(--e5) 0;padding:var(--e5);background:var(--craie);border-radius:var(--rayon);
  box-shadow:var(--ombre)}
.encart b{display:block;font-size:15px;font-weight:700;margin-bottom:var(--e2)}
.encart p{margin-top:var(--e2);font-family:var(--texte);font-size:14px;line-height:1.6;color:var(--gris)}
.encart ul{margin:var(--e2) 0 0;padding-left:var(--e3)}
.encart li{font-family:var(--texte);font-size:14px;line-height:1.6;color:var(--gris)}

/* ---------- Tableau ---------- */
.tableau{overflow-x:auto;margin-top:var(--e5);border-radius:var(--rayon);background:var(--craie);
  box-shadow:var(--ombre)}
.tableau table{width:100%;border-collapse:collapse;font-size:14px;min-width:720px}
.tableau caption{text-align:left;padding:var(--e4) var(--e4) 0;font-size:13px;color:var(--gris)}
.tableau th,.tableau td{padding:var(--e3) var(--e4);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--regle)}
.tableau thead th{font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);white-space:nowrap}
.tableau thead th small{display:block;margin-top:4px;font-size:11px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--gris)}
.tableau tbody tr:last-child th,.tableau tbody tr:last-child td{border-bottom:0}
.tableau tbody th{font-weight:700;color:var(--lac);white-space:nowrap}
.tableau tbody th small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--gris)}
.tableau td small{display:block;margin-top:2px;font-size:12px;color:var(--gris)}
.tableau .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau tr.phare{background:color-mix(in srgb,var(--sable) 30%,var(--craie))}
.tableau tr.groupe td{font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terre);background:color-mix(in srgb,var(--sable) 22%,var(--craie))}
.tableau .non{color:var(--gris)}
@media(max-width:719px){.tableau table{min-width:0}
  .tableau thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tableau tbody tr{display:block;border-bottom:1px solid var(--regle);padding:var(--e3) 0}
  .tableau tbody tr:last-child{border-bottom:0}
  .tableau tbody th,.tableau tbody td{display:block;border:0;padding:4px var(--e4)}
  .tableau tbody td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}}

/* ---------- Repli (details) ---------- */
.repli{margin-top:var(--e4);border-top:1px solid var(--regle)}
.repli summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--e3);padding:var(--e4) 0;font-size:16px;font-weight:600;color:var(--lac)}
.repli summary::-webkit-details-marker{display:none}
.repli summary::after{content:"";width:9px;height:9px;flex:none;border-right:1.5px solid var(--terre);
  border-bottom:1.5px solid var(--terre);transform:rotate(45deg) translateY(-2px);
  transition:transform .3s var(--sortie)}
.repli[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.repli__c{padding-bottom:var(--e5);color:var(--gris);font-size:15px;line-height:1.65;max-width:74ch}
.repli__c p+p{margin-top:var(--e3)}

/* ---------- Questions ---------- */
.faq{margin-top:var(--e5)}
.faq .repli:last-child{border-bottom:1px solid var(--regle)}

/* ---------- Choix de régime ---------- */
.choix{display:grid;gap:var(--e3);margin-top:var(--e5)}
@media(min-width:640px){.choix{grid-template-columns:1fr 1fr}}
.choix label{position:relative;display:flex;gap:var(--e3);padding:var(--e4) var(--e5);background:var(--craie);
  border:1px solid var(--regle);border-radius:var(--rayon);cursor:pointer;transition:border-color .25s var(--sortie)}
.choix label:has(input:checked){border-color:var(--terre)}
.choix input{position:absolute;opacity:0;width:1px;height:1px}
.choix__pt{width:18px;height:18px;flex:none;margin-top:3px;border-radius:50%;border:1.5px solid var(--regle);position:relative}
.choix label:has(input:checked) .choix__pt{border-color:var(--terre)}
.choix label:has(input:checked) .choix__pt::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--terre)}
.choix b{display:block;font-size:15px;font-weight:600}
.choix small{display:block;margin-top:3px;font-size:13px;color:var(--gris);line-height:1.5}

/* ---------- Documents ---------- */
.docs{list-style:none;display:grid;gap:0;margin-top:var(--e5)}
.docs li{border-top:1px solid var(--regle)}
.docs li:last-child{border-bottom:1px solid var(--regle)}
.docs a:hover b{color:var(--terre)}
.docs b{font-size:15px;font-weight:600}
.docs small{display:block;margin-top:3px;font-size:13px;color:var(--gris)}
.docs i{font-style:normal;font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terre);white-space:nowrap}

/* ---------- Simulateur ---------- */
.simu{display:grid;gap:var(--e5);margin-top:var(--e5);align-items:start}
@media(min-width:1040px){.simu{grid-template-columns:1.15fr .85fr;gap:var(--e6)}}
.simu__q{background:var(--craie);border-radius:var(--rayon);padding:var(--e5);box-shadow:var(--ombre)}
.simu__g{margin-top:var(--e5)}
.simu__g:first-child{margin-top:0}
.simu__g>b{display:block;font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terre);margin-bottom:var(--e2)}
.simu__g>p{font-size:14px;color:var(--gris);margin-bottom:var(--e3)}
.pastilles{display:flex;flex-wrap:wrap;gap:var(--e1)}
.pastille{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 var(--e3);
  border-radius:999px;background:color-mix(in srgb,var(--sable) 40%,var(--craie));font-size:14px;cursor:pointer}
.pastille input{position:absolute;opacity:0;width:1px;height:1px}
.pastille:has(input:checked){background:var(--lac);color:var(--creme)}
.simu__r{background:var(--lac);color:var(--creme);border-radius:var(--rayon);padding:var(--e5);
  box-shadow:var(--ombre)}
@media(min-width:1040px){.simu__r{position:sticky;top:110px}}
.simu__r h3{color:var(--creme)}
.simu__niv{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1;color:var(--creme)}
.simu__niv small{display:block;margin-top:var(--e2);font-family:var(--texte);font-size:13px;font-weight:400;
  color:rgba(246,241,231,.7);line-height:1.5}
.simu__prix{margin-top:var(--e4);padding-top:var(--e4);border-top:1px solid rgba(246,241,231,.2)}
.simu__prix b{font-family:var(--display);font-size:clamp(2rem,4vw,2.6rem);line-height:1;color:var(--creme)}
.simu__prix span{display:block;margin-top:6px;font-size:13px;color:rgba(246,241,231,.7)}
.simu__msg{margin-top:var(--e4);font-size:14px;line-height:1.6;color:rgba(246,241,231,.86)}
.simu__msg b{color:var(--terre-vif)}
.simu__msg--alerte{padding:var(--e4);border-radius:12px;background:rgba(232,115,63,.14)}
.simu__f{display:grid;gap:var(--e1);margin-top:var(--e4)}
.simu__fc{display:grid;grid-template-columns:1fr auto;gap:var(--e3);align-items:baseline;padding:var(--e3) 0;
  border-top:1px solid rgba(246,241,231,.16);font-size:14px}
.simu__fc b{font-weight:600;color:var(--creme)}
.simu__fc i{font-style:normal;margin-left:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(246,241,231,.6)}
.simu__fc--on b{color:var(--terre-vif)}
.simu__fc .n{font-family:var(--display);font-size:1.15rem;color:var(--creme);white-space:nowrap}
.simu__fc .n small{display:block;font-family:var(--texte);font-size:11px;color:rgba(246,241,231,.6);text-align:right}
.simu__c{margin-top:var(--e5)}
.simu__c h3{color:var(--creme)}
.simu__c p{font-size:13px;color:rgba(246,241,231,.7);margin-top:var(--e2)}
.simu__hyp{margin-top:var(--e4);font-size:12.5px;line-height:1.6;color:rgba(246,241,231,.62)}
.simu__hyp b{color:rgba(246,241,231,.86)}
.simu__raisons{list-style:none;margin-top:var(--e4);display:grid;gap:0}
.simu__raisons li{padding:var(--e3) 0;border-top:1px solid rgba(246,241,231,.16);font-size:13.5px;
  line-height:1.55;color:rgba(246,241,231,.86)}

/* ---------- Lexique ---------- */
.lexique{margin-top:var(--e5);display:grid;gap:0}
.lexique div{padding:var(--e4) 0;border-top:1px solid var(--regle)}
.lexique dt{font-size:15px;font-weight:600}
.lexique dd{margin-top:4px;font-size:14px;color:var(--gris);line-height:1.6}

/* ---------- Pied de page à colonnes ---------- */
.pied nav{display:grid;gap:var(--e2)}
.pied nav b{font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,241,231,.5);margin-bottom:var(--e1)}
.pied nav a{color:rgba(246,241,231,.8);text-decoration:none}
.pied nav a:hover{color:var(--creme)}
.pied__legal{margin-top:var(--e6);padding-top:var(--e4);border-top:1px solid rgba(246,241,231,.16);
  font-size:12px;line-height:1.7;color:rgba(246,241,231,.55)}
.pied__legal p+p{margin-top:var(--e3)}

/* ---------- Bandeau d'adhésion collant, sur mobile ---------- */
.collante{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:var(--e3);padding:var(--e2) var(--marge);
  background:rgba(246,241,231,.98);box-shadow:0 -1px 0 var(--regle)}
.collante b{font-family:var(--display);font-size:1.1rem}
.collante small{display:block;font-family:var(--texte);font-size:11px;font-weight:400;color:var(--gris)}
@media(min-width:900px){.collante{display:none}}

/* ---------- Panneau sombre (comment se forme le prix) ---------- */
.panneau{background:var(--lac);color:var(--creme);border-radius:var(--rayon);padding:var(--e6);
  box-shadow:var(--ombre)}
@media(min-width:900px){.panneau{padding:var(--e7)}}
.panneau h2{color:var(--creme);margin-top:var(--e3);max-width:24ch}
.panneau p{margin-top:var(--e4);font-family:var(--edito);font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.6;color:rgba(246,241,231,.82);max-width:60ch}
.panneau .sur{color:var(--terre-vif)}
.liste--clair li{border-top-color:rgba(246,241,231,.2)}
.liste--clair b{color:var(--creme)}
.liste--clair small{color:rgba(246,241,231,.7)}

/* ---------- Liste à deux niveaux, sans valeur à droite ---------- */
.liste li>span{display:block}
.liste small{display:block;margin-top:3px;font-size:13px;color:var(--gris);line-height:1.55}

/* ---------- Sélecteur de département et de proposition ---------- */
.simu__g select{width:100%;min-height:44px;padding:0 var(--e3);border-radius:999px;border:1px solid var(--regle);
  background:var(--craie);color:var(--lac);font-family:var(--texte);font-size:14px;cursor:pointer}

/* ---------- Détails du fichier des documents ---------- */
.docs>li>a,.docs>li>span{display:grid;grid-template-columns:1fr auto;gap:var(--e3);align-items:baseline;
  padding:var(--e4) 0;color:inherit;text-decoration:none}
.docs>li>a>span,.docs>li>span>span{display:block}

/* ---------- Lien de texte ---------- */
.lien{color:var(--terre);text-decoration:underline;text-underline-offset:3px}

/* ---------- Tableau dense : huit colonnes qui doivent tenir ---------- */
.tableau--dense table{font-size:13px;min-width:0}
.tableau--dense th,.tableau--dense td{padding:var(--e3) var(--e2)}
.tableau--dense th:first-child,.tableau--dense td:first-child{padding-left:var(--e4)}
.tableau--dense th:last-child,.tableau--dense td:last-child{padding-right:var(--e4)}
.tableau--dense thead th{font-size:10px;letter-spacing:.1em;white-space:normal}

/* ---------- Typographie propre à l'article ---------- */
.article__c h2{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.12}
.article__c h3{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.article__c .lead{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:none}
.article__c .chiffres{grid-template-columns:1fr;gap:var(--e4);padding:var(--e5) 0;border-bottom:1px solid var(--regle)}
@media(min-width:640px){.article__c .chiffres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1240px){.article__c .chiffres{grid-template-columns:repeat(4,1fr)}}
.article__c .chiffre b{font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.02em}
.article__c .chiffre span{font-family:var(--texte);font-size:13.5px;line-height:1.5;max-width:none}
.article__c .tableau{margin-bottom:var(--e5)}
.article__c figure{margin:var(--e5) 0}
.article__c .figure,.article__c figure.figure{position:relative;border-radius:var(--rayon);overflow:hidden;
  background:var(--sable);box-shadow:var(--ombre)}
.article__c .figure img{width:100%;height:auto}
.article__c .figure__c{position:absolute;inset:auto 0 0 0;margin:0;padding:var(--e6) var(--e5) var(--e4);
  background:linear-gradient(to top,color-mix(in srgb,var(--lac) 86%,transparent),
    color-mix(in srgb,var(--lac) 40%,transparent) 60%,transparent);
  color:var(--creme);font-family:var(--edito);font-size:15px;line-height:1.5}
.article__c .figure__c b{display:block;font-family:var(--texte);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terre-vif);margin-bottom:6px}
.article__c .situation{margin:var(--e5) 0;padding-top:var(--e5);border-top:1px solid var(--regle)}
.article__c .carte{margin-top:var(--e4)}
.article__c .trio,.article__c .voir__g{display:grid;gap:var(--e3);margin-top:var(--e4)}
@media(min-width:760px){.article__c .trio,.article__c .voir__g{grid-template-columns:repeat(3,1fr)}}
.article__c .sources li,.article__c .note{font-family:var(--texte);font-size:13px;color:var(--gris)}

/* ---------- Bouton crème, sur fond lac ---------- */
.btn--creme{background:var(--creme);color:var(--lac)}
.btn--creme:hover{background:var(--terre-vif);color:var(--lac)}
.simu__r .btn{margin-top:var(--e4);width:100%}

/* ---------- Ligne de formule du simulateur ---------- */
.simu__fc{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"b n" "s n";row-gap:2px}
.simu__fc b{grid-area:b}
.simu__fc small{grid-area:s;font-size:12px;color:rgba(246,241,231,.6);line-height:1.4}
.simu__fc .n{grid-area:n;align-self:center}
@media(min-width:1040px){.simu{grid-template-columns:1fr .9fr}}
.simu__r .btn{padding:0 var(--e3);font-size:14px}
/* Un enfant de grille ne doit jamais imposer sa largeur intrinsèque au parent */
.article>*{min-width:0}
.simu>*{min-width:0}

/* ---------- Deux actions au pied d'une carte de formule ---------- */
.carte__a{margin-top:auto;display:grid;gap:var(--e2);justify-items:start}
.carte__a .btn{width:100%;margin-top:var(--e3)}
.carte__plus{font-size:13px;color:var(--terre);text-decoration:underline;text-underline-offset:3px}
.carte--phare .carte__plus{color:var(--terre-vif)}

@media(min-width:760px){.parcours ol{grid-template-columns:repeat(3,1fr);gap:var(--e3)}}
.parcours li[data-etat=fait]::before{color:var(--terre)}
/* Sans script, les trois écrans se lisent à la suite : il leur faut un filet de séparation. */
.ecran+.ecran{border-top:1px solid var(--regle)}
.js .ecran+.ecran{border-top:0}
.ecran>h2{max-width:20ch}
.ecran>h2:focus{outline:none}
.ecran>h2:focus-visible{outline:2px solid var(--terre);outline-offset:6px}
@media(min-width:720px){
  .champs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .champs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .champ--court{max-width:180px}
}
.champ .champ__l{margin-bottom:0}
.saisie:hover{border-color:color-mix(in srgb,var(--lac) 30%,var(--regle))}
.erreur:empty{display:none}
.choix label:focus-within{border-color:var(--terre);box-shadow:0 0 0 3px rgba(176,69,32,.16)}
.pastille:focus-within{outline:2px solid var(--terre);outline-offset:2px}
.besoin:first-of-type{margin-top:var(--e4)}
.besoin .aide{margin-top:4px}
.besoin .erreur{margin-top:var(--e2)}
.carte--choix .prix{margin-top:var(--e4)}
.carte--choix[data-choisie=oui] .carte__etat,.carte--choix:has(input:checked) .carte__etat{color:var(--terre)}
.carte--choix[data-choisie=oui] .carte__coche,.carte--choix:has(input:checked) .carte__coche{border-color:var(--terre)}
.carte--choix[data-choisie=oui] .carte__coche::after,.carte--choix:has(input:checked) .carte__coche::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--terre)}
.carte__b[data-conseille=oui]{color:var(--terre)}
.recap div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e3);align-items:baseline;
  padding:var(--e3) 0;border-top:1px solid var(--regle)}
.recap div:first-child{border-top:0}
.accord input:focus-visible{outline:2px solid var(--terre);outline-offset:3px}
.accord input[aria-invalid=true]{outline:2px solid var(--terre);outline-offset:3px}
.erreurs b{color:var(--terre)}
.erreurs li{margin-top:4px;line-height:1.5}
@media(min-width:600px){.pilote .btn--bleu,.pilote [type=submit]{margin-left:auto}}
.panneau--serre{margin:var(--e5) 0 var(--e6);padding:var(--e5) var(--e4)}
@media(min-width:900px){.panneau--serre{padding:var(--e6)}}
.panneau--serre h2:focus{outline:none}
.panneau--serre h2:focus-visible{outline:2px solid var(--terre-vif);outline-offset:6px}
.panneau--serre .liste{margin-top:var(--e5)}
/* ---------- Repli sans script : les trois écrans se lisent d'affilée ---------- */
/* La barre n'indique alors plus d'étape en cours, puisqu'il n'y en a pas. */
html:not(.js) .parcours [data-compte-ecrans]{display:none}
html:not(.js) .parcours li{border-top-color:var(--terre);color:var(--lac)}
html:not(.js) .parcours li::before{color:var(--terre)}
.adm code,.adm__carte code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;
  background:var(--sable);padding:1px 6px;border-radius:6px}
.adm__saisie:focus-visible{outline:2px solid var(--terre);outline-offset:2px;border-color:var(--terre)}
@media(min-width:760px){.adm__onglets{grid-template-columns:repeat(3,1fr)}}
.adm__tete h1{max-width:16ch}
.adm__outils h2{font-size:clamp(1.4rem,2.4vw,1.95rem)}
.adm__outils h3{margin-top:var(--e1)}
.adm__tableau table{min-width:640px;font-size:13.5px}
.adm__tableau th,.adm__tableau td{padding:var(--e2) var(--e3)}
.adm__ligne:focus-visible{outline:2px solid var(--terre);outline-offset:-2px}
.adm__etat::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gris)}
.adm__etat[data-etat=a_relire]::before,.adm__etat[data-etat=pieces_attendues]::before{background:var(--terre)}
.adm__etat[data-etat=valide]::before{background:var(--terre-vif)}
.adm__etat[data-etat=refuse],.adm__etat[data-etat=clos]{color:var(--gris);box-shadow:inset 0 0 0 1px var(--regle);background:transparent}
@media(min-width:640px){.adm__champs{grid-template-columns:auto minmax(0,1fr);column-gap:var(--e4)}}
@media(min-width:640px){.adm__champs dd{border-top:1px solid var(--regle)}}
@media(min-width:820px){.adm__suivi{grid-template-columns:1fr 1.7fr auto}}
@media(min-width:960px){.adm__lecture{grid-template-columns:1.1fr .9fr;gap:var(--e5)}}
.adm__relecture .adm__outils{margin-top:0}
@media(min-width:700px){.adm__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.adm__grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.adm__champ{min-width:0}
.adm__conf--absente{background:transparent;color:var(--gris);box-shadow:inset 0 0 0 1px var(--regle)}
.adm__liste-msg li::before{content:"";position:absolute;left:0;top:calc(var(--e2) + 6px);width:8px;height:8px;
  border-radius:50%;background:var(--gris)}
.adm__liste-msg .adm__msg--erreur::before{background:var(--terre)}
.adm__liste-msg .adm__msg--ok::before{background:var(--lac)}
.adm__controle .adm__l{margin-top:var(--e4)}
.adm__export .adm__outils{margin-top:0}
/* =====================================================================
   Assistant de questions et réponses : la section « Posez votre question »
   de l’accueil, le bouton flottant et le panneau de conversation.
   Même vocabulaire que le reste : craie sur crème, encre du lac, terre
   pour l’accent, filets fins, rien qui bouge si on a demandé moins
   d’animation.
   ===================================================================== */

/* ---------- Section « Posez votre question » (dans un .panneau) ---------- */
/* Le panneau respire moins sur un téléphone : ses 96 px de marge y laisseraient
   des boutons de questions trop étroits. */
.panneau--questions{padding:var(--e5) var(--e4)}
@media(min-width:640px){.panneau--questions{padding:var(--e6)}}
@media(min-width:900px){.panneau--questions{padding:var(--e7)}}
.questions__g{display:grid;gap:var(--e2);margin-top:var(--e5)}
@media(min-width:760px){.questions__g{grid-template-columns:1fr 1fr}}
.questions__q{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);width:100%;
  padding:var(--e3);border:0;border-radius:12px;background:rgba(246,241,231,.08);color:var(--creme);
  font-family:var(--texte);font-size:15px;line-height:1.4;text-align:left;cursor:pointer;
  transition:background .3s var(--sortie),transform .3s var(--sortie)}
.questions__q:hover{background:rgba(246,241,231,.16);transform:translateY(-2px)}
.questions__q::after{content:"";width:9px;height:9px;flex:none;border-top:1.5px solid var(--terre-vif);
  border-right:1.5px solid var(--terre-vif);transform:rotate(45deg)}
.questions__a{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e3);margin-top:var(--e5)}
.questions__n{margin-top:var(--e4);font-size:12.5px;line-height:1.6;color:rgba(246,241,231,.6);max-width:70ch}
.panneau .lien{color:var(--terre-vif)}
html:not(.js) .questions__g,html:not(.js) .questions__a{display:none}
.js .questions__sans{display:none}
/* ---------- Bouton flottant ---------- */
.assistant__btn{position:fixed;right:var(--marge);bottom:calc(var(--e3) + env(safe-area-inset-bottom,0px));
  z-index:60;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--e3);
  border:0;border-radius:999px;background:var(--lac);color:var(--creme);font-family:var(--texte);
  font-size:15px;font-weight:600;cursor:pointer;box-shadow:var(--ombre-haute);
  transition:transform .3s var(--sortie),background .3s var(--sortie)}
.assistant__btn:hover{transform:translateY(-2px);background:var(--terre)}
.assistant__btn[aria-expanded=true]{background:var(--terre)}
@media(max-width:899px){.assistant__btn{bottom:calc(76px + env(safe-area-inset-bottom,0px))}}
@media(max-width:400px){.assistant__btn span{display:none}
  .assistant__btn{padding:0;width:52px;justify-content:center}}
/* ---------- Panneau de conversation ---------- */
.assistant{position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;overflow:hidden;
  background:var(--craie);color:var(--lac);font-family:var(--texte);box-shadow:var(--ombre-haute)}
@media(min-width:641px){
  .assistant{inset:auto var(--marge) calc(var(--e3) + 64px) auto;width:400px;
    max-width:calc(100vw - 2 * var(--marge));height:min(620px,calc(100vh - 170px));border-radius:var(--rayon)}
}
.assistant[hidden],.assistant__sugg[hidden],.assistant__eff[hidden]{display:none}
@media(max-width:640px){body.assistant-ouvert{overflow:hidden}}
.assistant__h{display:flex;align-items:flex-start;gap:var(--e2);padding:var(--e3);
  background:var(--lac);color:var(--creme)}
.assistant__t b{display:block;font-family:var(--display);font-size:15px;letter-spacing:-.015em}
.assistant__t small{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:rgba(246,241,231,.62)}
.assistant__eff{margin-left:auto;padding:0;border:0;background:transparent;color:rgba(246,241,231,.68);
  font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.assistant__eff:hover{color:var(--terre-vif)}
.assistant__fermer{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;
  background:rgba(246,241,231,.12);color:var(--creme);cursor:pointer;transition:background .25s var(--sortie)}
.assistant__fermer:hover{background:var(--terre-vif);color:var(--lac)}
.assistant__fil{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--e2);
  padding:var(--e3);background:var(--creme)}
.assistant__fil:focus-visible{outline:2px solid var(--terre);outline-offset:-2px}
.assistant__m{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.55}
.assistant__m p+p{margin-top:8px}
.assistant__m ul{margin:8px 0 0;padding-left:18px;display:grid;gap:4px}
.assistant__m b{font-weight:700}
.assistant__m--lui{align-self:flex-start;background:var(--craie);border-radius:14px 14px 14px 4px;box-shadow:var(--ombre)}
.assistant__m--vous{align-self:flex-end;background:var(--lac);color:var(--creme);border-radius:14px 14px 4px 14px}
.assistant__m--accueil{max-width:100%;padding:2px 2px var(--e1);background:none;box-shadow:none;
  font-family:var(--edito);font-size:14.5px;line-height:1.6;color:var(--gris)}
.assistant__m--info{max-width:100%;background:color-mix(in srgb,var(--terre) 9%,var(--craie));
  border-left:2px solid var(--terre);border-radius:4px 14px 14px 4px;box-shadow:none;font-size:14px;color:var(--lac)}
.assistant__m--attente{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--gris)}
.assistant__pts{display:inline-flex;gap:4px}
.assistant__pts i{width:5px;height:5px;border-radius:50%;background:var(--terre);
  animation:assistant-pts 1.2s var(--sortie) infinite}
.assistant__pts i:nth-child(2){animation-delay:.16s}
.assistant__pts i:nth-child(3){animation-delay:.32s}
@keyframes assistant-pts{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.assistant__journal{width:100%;margin:0;padding:0;list-style:none;display:grid;gap:2px}
.assistant__journal li{position:relative;padding-left:16px;font-size:12px;line-height:1.5;color:var(--gris)}
.assistant__journal li::before{content:"✓";position:absolute;left:0;color:var(--terre)}
.assistant__curseur{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;
  background:var(--terre);animation:assistant-curseur 1s steps(2,end) infinite}
@keyframes assistant-curseur{0%,49%{opacity:1}50%,100%{opacity:0}}
.assistant__sugg{display:flex;flex-wrap:wrap;gap:var(--e1);padding:0 var(--e3) var(--e2);background:var(--creme)}
.assistant__chip{padding:9px 14px;border:0;border-radius:999px;
  background:color-mix(in srgb,var(--sable) 55%,var(--craie));color:var(--lac);
  font-family:var(--texte);font-size:13px;line-height:1.3;text-align:left;cursor:pointer;
  transition:background .25s var(--sortie),color .25s var(--sortie)}
.assistant__chip:hover{background:var(--lac);color:var(--creme)}
.assistant__form{display:flex;align-items:flex-end;gap:var(--e1);padding:var(--e2) var(--e3);
  border-top:1px solid var(--regle);background:var(--craie)}
.assistant__form textarea{flex:1;min-width:0;min-height:44px;max-height:132px;padding:11px 14px;
  border:1px solid var(--regle);border-radius:18px;background:var(--creme);color:var(--lac);
  font-family:var(--texte);font-size:14.5px;line-height:1.45;resize:none}
.assistant__form textarea:focus{outline:none;border-color:var(--terre)}
.assistant__envoyer{flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;
  background:var(--terre);color:var(--creme);cursor:pointer;transition:background .25s var(--sortie)}
.assistant__envoyer:hover{background:var(--lac)}
.assistant__envoyer:disabled{opacity:.4;cursor:not-allowed}
.assistant__note{padding:0 var(--e3) var(--e3);background:var(--craie);font-size:11.5px;line-height:1.5;color:var(--gris)}
.assistant__btn:focus-visible,.assistant__chip:focus-visible,.assistant__eff:focus-visible,
.assistant__fermer:focus-visible,.assistant__envoyer:focus-visible,.questions__q:focus-visible{
  outline:2px solid var(--terre-vif);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .assistant__pts i,.assistant__curseur{animation:none}
  .assistant__btn:hover,.questions__q:hover{transform:none}
}

/* ---------- Repris du <style> en ligne de parcours d’adhésion ---------- */
/* =====================================================================
   Le parcours d’adhésion — les composants propres à cette page.
   Ils n’existent pas encore dans styles.css : la feuille commune n’a
   jamais été ouverte en écriture pour cette brique, et sans eux la page
   s’affichait sans mise en forme. Ils sont donc posés ici, bâtis
   uniquement sur les jetons de la feuille commune, et ils ont vocation
   à la rejoindre telle quelle dès qu’on pourra la modifier.
   ===================================================================== */

/* La feuille commune ne pose pas cette règle, et plusieurs blocs ci-dessous
   déclarent un display : sans elle, la liste des raisons du conseil garderait
   sa marge alors qu’elle est cachée. admin.html en porte la même copie ; les
   deux disparaissent le jour où la règle rejoint la tête de styles.css. */
[hidden]{display:none!important}

/* ---------- Le fil des trois écrans ---------- */
.parcours{margin-top:0}
.parcours ol{list-style:none;counter-reset:e;display:grid;gap:var(--e2)}
@media(min-width:760px){.parcours ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e3)}}
.parcours li{counter-increment:e;display:flex;align-items:baseline;gap:var(--e2);
  padding-top:var(--e2);border-top:2px solid var(--regle);font-size:14px;color:var(--gris)}
.parcours li::before{content:counter(e,decimal-leading-zero);font-family:var(--display);
  font-size:12px;letter-spacing:.08em}
.parcours li[data-etat=fait]{border-top-color:var(--lac);color:var(--lac)}
.parcours li[aria-current=step]{border-top-color:var(--terre);color:var(--lac);font-weight:600}
.parcours li[aria-current=step]::before{color:var(--terre)}
.parcours .note{margin-top:var(--e2)}

/* ---------- Un écran ---------- */
.ecran{margin-top:var(--e4);padding-bottom:var(--e5)}

/* ---------- Le résumé de ce qui manque ---------- */
.erreurs{margin-top:var(--e4);padding:var(--e4);border-radius:var(--rayon);
  background:var(--craie);box-shadow:inset 0 0 0 1.5px var(--terre)}
.erreurs>b{display:block;font-size:15px;font-weight:700;color:var(--terre)}
.erreurs ul{list-style:none;margin-top:var(--e2);display:grid;gap:6px}
.erreurs a{font-size:14px;color:var(--terre);text-decoration:underline;text-underline-offset:3px}

/* ---------- Un bloc de questions ---------- */
.bloc{display:grid;justify-items:stretch;border:0;min-width:0;min-inline-size:0;margin-top:var(--e4);padding:var(--e4);
  background:var(--craie);border-radius:var(--rayon);box-shadow:var(--ombre)}
@media(min-width:760px){.bloc{padding:var(--e5)}}
.bloc__t{float:none;width:auto;padding:0;margin:0 0 var(--e2);font-family:var(--texte);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terre)}
.bloc__d{margin-top:var(--e2);font-size:14px;line-height:1.6;color:var(--gris);max-width:64ch}
.bloc .choix{margin-top:var(--e3)}
.bloc .trio{margin-top:var(--e4)}
.champ__q{margin-top:var(--e4);font-size:15px;font-weight:600}

/* ---------- Les champs de saisie ---------- */
.champs{display:grid;gap:var(--e3);margin-top:var(--e3)}
.champs>*{min-width:0}
@media(min-width:760px){
  .champs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .champs--3{grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,1fr)}
}
.champ{display:flex;flex-direction:column;min-width:0}
.champ--court{max-width:240px}
/* L’étiquette s’appelle .champ__e et non .champ__l : styles.css réserve déjà .champ__l
   au réglage de prix de l’accueil, où le b intérieur s’affiche en Archivo Black. Recopier
   ce bloc à la fin de la feuille commune sous l’ancien nom aurait défiguré ce réglage. */
.champ__e{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
.champ__e b{font-weight:400;color:var(--gris)}
.champ__f{margin-left:6px;font-size:12px;font-weight:400;color:var(--gris)}
.saisie{width:100%;min-height:48px;padding:0 var(--e3);border-radius:999px;
  border:1px solid var(--regle);background:var(--craie);color:var(--lac);
  font-family:var(--texte);font-size:15px;line-height:normal}
select.saisie{cursor:pointer}
.saisie::placeholder{color:var(--gris);opacity:.75}
.saisie:focus{outline:2px solid var(--terre);outline-offset:2px;border-color:var(--terre)}
.saisie[aria-invalid=true]{border-color:var(--terre);
  background:color-mix(in srgb,var(--terre) 6%,var(--craie))}
.saisie--chiffres{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.saisie--signature{font-family:var(--edito);font-size:18px}
.aide{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--gris)}
.erreur{display:block;font-size:12.5px;line-height:1.5;font-weight:600;color:var(--terre)}
.erreur:not(:empty){margin-top:6px}
.choix[data-invalide],.pastilles[data-invalide],.trio[data-invalide]{
  outline:1.5px solid var(--terre);outline-offset:8px;border-radius:var(--rayon)}

/* ---------- Une question du recueil des besoins ---------- */
.besoin{margin-top:var(--e4)}
.besoin>.champ__q{margin-top:0}
.besoin .pastilles{margin-top:var(--e3)}
.besoin>.aide{margin-top:4px}

/* ---------- Le conseil motivé ---------- */
.conseil{margin-top:var(--e5);padding:var(--e4);border-radius:var(--rayon);
  background:var(--lac);color:var(--creme)}
@media(min-width:760px){.conseil{padding:var(--e5)}}
.conseil__t{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terre-vif)}
.conseil__p{margin-top:var(--e3);font-family:var(--edito);
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;max-width:60ch}
.conseil__l{list-style:none;margin-top:var(--e4);display:grid;gap:0}
.conseil__l li{padding:var(--e3) 0;font-size:14px;line-height:1.6;
  color:color-mix(in srgb,var(--creme) 86%,transparent);
  border-top:1px solid color-mix(in srgb,var(--creme) 20%,transparent)}
.conseil__n{margin-top:var(--e3);color:color-mix(in srgb,var(--creme) 62%,transparent)}

/* ---------- Les trois formules, en choix ---------- */
.carte--choix{cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--regle);
  transition:box-shadow .25s var(--sortie),transform .4s var(--sortie)}
.carte--choix input{position:absolute;opacity:0;width:1px;height:1px}
.carte--choix:has(input:checked),.carte--choix[data-choisie=oui]{box-shadow:inset 0 0 0 2px var(--terre)}
.carte--choix:focus-within{outline:2px solid var(--terre);outline-offset:3px}
.carte__etat{display:flex;align-items:center;gap:10px;margin-top:var(--e3);
  font-size:14px;font-weight:600;color:var(--terre)}
.carte__coche{position:relative;flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--regle)}
.carte--choix:has(input:checked) .carte__coche,
.carte--choix[data-choisie=oui] .carte__coche{border-color:var(--terre)}
.carte--choix:has(input:checked) .carte__coche::after,
.carte--choix[data-choisie=oui] .carte__coche::after{content:"";position:absolute;inset:4px;
  border-radius:50%;background:var(--terre)}

/* ---------- Une case à cocher et son explication ---------- */
.accord{display:flex;align-items:flex-start;gap:var(--e3);margin-top:var(--e4);padding:var(--e3);
  border-radius:var(--rayon);cursor:pointer;
  background:color-mix(in srgb,var(--sable) 40%,var(--craie))}
.accord input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--terre);cursor:pointer}
.accord b{display:block;font-size:14.5px;font-weight:600;line-height:1.5}
.accord small{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--gris)}
.accord:has(input:checked){background:color-mix(in srgb,var(--terre) 8%,var(--craie))}

/* ---------- Le récapitulatif ---------- */
.recap{display:grid;gap:0;margin-top:var(--e3)}
.recap>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e3);
  align-items:baseline;padding:var(--e3) 0;border-top:1px solid var(--regle)}
.recap>div:first-child{border-top:0}
.recap dt{font-size:14px;color:var(--gris)}
.recap dd{font-size:15px;font-weight:600;text-align:right}

/* ---------- Les boutons au pied d’un écran ---------- */
.pilote{display:flex;flex-wrap:wrap;gap:var(--e2);margin-top:var(--e5)}
.pilote .btn{flex:1 1 260px}
.pilote--clair{margin-top:var(--e5)}
.btn--sur-lac{background:transparent;color:var(--creme);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--creme) 34%,transparent)}
.btn--sur-lac:hover{background:var(--creme);color:var(--lac);box-shadow:none}

/* ---------- Les annonces et le panneau resserré ---------- */
.annonce{margin-top:var(--e3);font-size:14px;font-weight:600;color:var(--terre)}
.annonce:empty{margin:0}
.lien--bouton{padding:0;border:0;background:transparent;font:inherit;cursor:pointer}

/* ---------- Repris du <style> en ligne de plateforme d’administration ---------- */
/* =====================================================================
   Habillage du poste de gestion. Ce bloc n'emploie que les jetons de
   site/styles.css : aucune couleur, aucune police et aucune mesure ne sont
   écrites en dur. Il vit ici plutôt que dans la feuille commune parce que
   la page est interne et qu'elle est la seule à s'en servir ; le jour où
   ces composants serviront ailleurs, il se recopie tel quel à la fin de
   site/styles.css, sans rien changer.
   ===================================================================== */

/* Un seul ajout au jeu de jetons : une pile monospace du système, sans rien à
   télécharger. Les chemins de fichiers et surtout l'export à colonnes fixes ne se
   lisent pas dans une police à chasse variable. */
:root{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* La feuille commune ne pose pas cette règle, et plusieurs blocs ci-dessous
   déclarent un display : sans elle, l'attribut hidden ne cacherait rien. */
[hidden]{display:none!important}

/* ---------- barre et cadre général ---------- */
/* La barre du site est fixe et les pages publiques lui réservent 130 px en tête.
   Ici elle est collante : le poste de gestion défile beaucoup, et rien ne doit
   passer sous elle. */
.adm__barre{position:sticky;top:0;left:auto;right:auto}
.adm__titre{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.adm__barre .btn{margin-left:auto}
.adm{padding-bottom:var(--e6)}
.adm__tete{padding:var(--e5) 0 var(--e4)}

/* ---------- la porte ---------- */
.adm__porte{display:flex;justify-content:center;padding:var(--e6) var(--marge) var(--e7)}
.adm__carte{width:100%;max-width:520px;background:var(--craie);border-radius:var(--rayon);
  padding:var(--e5);box-shadow:var(--ombre);display:grid;gap:var(--e2)}
.adm__carte h1{font-size:clamp(1.9rem,4vw,2.6rem);margin-top:var(--e2)}
.adm__carte .lead{font-size:15px;max-width:none;margin:var(--e2) 0 var(--e3)}
.adm__carte code{font-family:var(--mono);font-size:.88em;
  background:var(--sable);border-radius:6px;padding:1px 5px}
.adm__carte .btn{margin-top:var(--e2);width:100%}
.adm__carte .note{margin-top:var(--e2)}

/* ---------- champs de saisie ---------- */
.adm__l{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin-bottom:var(--e1)}
.adm__saisie{width:100%;min-height:48px;padding:0 var(--e2);background:var(--craie);color:var(--lac);
  border:1.5px solid var(--regle);border-radius:10px;font-family:var(--texte);font-size:15px;
  transition:border-color .25s var(--sortie)}
select.adm__saisie{padding-right:var(--e3)}
.adm__saisie:focus{outline:none;border-color:var(--terre)}
.adm__saisie--court{max-width:230px}
.adm__aide{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--gris)}
.adm__ob{font-style:normal;color:var(--terre);margin-left:4px}

/* ---------- messages ---------- */
.adm__msg{margin-top:var(--e2);padding:var(--e2);border-radius:10px;font-size:14px;line-height:1.55;
  background:var(--sable);color:var(--gris)}
.adm__msg--erreur{background:color-mix(in srgb,var(--terre) 10%,var(--craie));color:var(--terre)}
.adm__msg--ok{background:color-mix(in srgb,var(--lac) 8%,var(--craie));color:var(--lac)}
.adm__msg--info{background:var(--sable);color:var(--lac)}

/* ---------- les trois onglets ---------- */
.adm__onglets{display:grid;gap:var(--e1);margin-top:var(--e4);
  border-top:1px solid var(--regle);border-bottom:1px solid var(--regle);padding:var(--e2) 0}
@media(min-width:760px){.adm__onglets{grid-template-columns:repeat(3,1fr);gap:var(--e2)}}
.adm__onglet{text-align:left;padding:var(--e2) var(--e3);border:0;border-radius:12px;cursor:pointer;
  background:transparent;color:var(--gris);font-family:var(--texte);
  transition:background .25s var(--sortie),color .25s var(--sortie)}
.adm__onglet b{display:block;font-size:15px;font-weight:700;color:var(--lac)}
.adm__onglet small{display:block;margin-top:2px;font-size:12px}
.adm__onglet:hover{background:var(--sable)}
.adm__onglet[aria-selected=true]{background:var(--lac)}
.adm__onglet[aria-selected=true] b{color:var(--creme)}
.adm__onglet[aria-selected=true] small{color:var(--terre-vif)}
.adm__onglet:focus-visible{outline:2px solid var(--terre);outline-offset:2px}

/* ---------- panneaux et barres d'outils ---------- */
.adm__panneau{padding-top:var(--e5)}
.adm__panneau:focus{outline:none}
.adm__outils{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e3);margin-top:var(--e5)}
.adm__panneau>.adm__outils:first-child{margin-top:0}
.adm__outils .note{margin-top:var(--e1);max-width:62ch}
.adm__actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e2)}
.adm__actions--large{margin-top:var(--e3);width:100%}
.adm__actions--large>div{flex:1 1 220px}

/* ---------- tableaux ---------- */
.adm__tableau{margin-top:var(--e3)}
.adm__vide{margin-top:var(--e3);padding:var(--e4);background:var(--craie);border-radius:var(--rayon);
  font-size:14px;color:var(--gris)}
.adm__lien{border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--regle);text-underline-offset:3px}
.adm__lien:hover{color:var(--terre)}
.adm__ligne{cursor:pointer}
.adm__ligne:hover{background:color-mix(in srgb,var(--sable) 34%,var(--craie))}
.adm__etat{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;
  white-space:nowrap;background:var(--sable);color:var(--gris)}
.adm__etat[data-etat=a_relire],.adm__etat[data-etat=pieces_attendues]{
  background:color-mix(in srgb,var(--terre) 14%,var(--craie));color:var(--terre)}
.adm__etat[data-etat=valide]{background:var(--lac);color:var(--creme)}
.adm__etat[data-etat=refuse]{background:var(--terre);color:var(--creme)}

/* ---------- le détail d'un dossier ---------- */
.adm__detail{margin-top:var(--e4);padding:var(--e4);background:var(--craie);border-radius:var(--rayon);
  box-shadow:var(--ombre)}
.adm__champs{display:grid;gap:0;margin-top:var(--e3)}
@media(min-width:700px){.adm__champs{grid-template-columns:auto 1fr}}
.adm__champs dt{padding:var(--e2) 0;border-top:1px solid var(--regle);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.adm__champs dd{padding:var(--e2) 0;border-top:1px solid var(--regle);font-size:15px}
@media(max-width:699px){.adm__champs dd{padding-top:0;border-top:0}}
@media(min-width:700px){.adm__champs dd{padding-left:var(--e4)}}
.adm__suivi{display:grid;gap:var(--e3);margin-top:var(--e4);align-items:end}
@media(min-width:820px){.adm__suivi{grid-template-columns:230px 1fr auto}}

/* ---------- le dépôt d'une pièce ---------- */
.adm__lecture{display:grid;gap:var(--e4);margin-top:var(--e4);align-items:start}
@media(min-width:940px){.adm__lecture{grid-template-columns:1.25fr 1fr;gap:var(--e5)}}
.adm__depot{display:block;padding:var(--e5) var(--e4);text-align:center;cursor:pointer;
  background:var(--craie);border:1.5px dashed var(--regle);border-radius:var(--rayon);
  transition:border-color .25s var(--sortie),background .25s var(--sortie)}
.adm__depot:hover,.adm__depot--vise{border-color:var(--terre);background:color-mix(in srgb,var(--sable) 45%,var(--craie))}
.adm__depot b{display:block;font-size:15px;font-weight:600}
.adm__depot small{display:block;margin-top:6px;font-size:13px;color:var(--gris)}
.adm__depot:focus-within{border-color:var(--terre)}
.adm__apercu{margin-top:var(--e3);padding:var(--e2);background:var(--craie);border-radius:var(--rayon);
  border:1px solid var(--regle)}
.adm__apercu img{max-height:320px;width:auto;margin:0 auto;border-radius:8px}
.adm__encart{margin:0}
.adm__encart--large{margin-top:var(--e4)}

/* ---------- la relecture, champ par champ ---------- */
.adm__relecture{margin-top:var(--e5);padding:var(--e4);background:var(--craie);border-radius:var(--rayon);
  box-shadow:var(--ombre)}
.adm__grille{display:grid;gap:var(--e3);margin-top:var(--e4)}
@media(min-width:680px){.adm__grille{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.adm__grille{grid-template-columns:repeat(3,1fr)}}
.adm__champ__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e1)}
.adm__champ__h .adm__l{margin-bottom:6px}
.adm__conf{flex:none;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--sable);color:var(--gris)}
.adm__conf--haute{background:color-mix(in srgb,var(--lac) 10%,var(--craie));color:var(--lac)}
.adm__conf--moyenne{background:color-mix(in srgb,var(--terre) 14%,var(--craie));color:var(--terre)}
.adm__conf--basse{background:var(--terre);color:var(--creme)}
.adm__atteste{display:flex;gap:var(--e2);align-items:flex-start;margin-top:var(--e4);
  padding:var(--e3);background:var(--sable);border-radius:12px;font-size:14px;line-height:1.55;cursor:pointer}
.adm__atteste input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--terre);cursor:pointer}

/* ---------- le contrôle et l'export ---------- */
.adm__controle{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--regle)}
.adm__liste-msg{list-style:none;display:grid;gap:var(--e1);margin-top:var(--e2)}
.adm__liste-msg li{padding:var(--e2);border-radius:10px;font-size:14px;line-height:1.55;
  background:var(--sable);color:var(--gris)}
.adm__sortie{margin-top:var(--e2);padding:var(--e3);overflow-x:auto;background:var(--lac);color:var(--creme);
  border-radius:12px;font-family:var(--mono);font-size:12px;
  line-height:1.7;white-space:pre;-webkit-overflow-scrolling:touch}
.adm__sortie--haute{max-height:min(60vh,460px);overflow-y:auto}
.adm__export{margin-top:var(--e4);padding:var(--e4);background:var(--craie);border-radius:var(--rayon);
  box-shadow:var(--ombre)}
.adm__repli{margin-top:var(--e5)}
.adm__pied{margin-top:0}

/* ---------- L’assistant en pleine page ---------- */
/* Le panneau flottant devient le contenu de la page : mêmes classes, mêmes composants,
   seul le cadre change. Rien n'est réécrit en double, donc rien ne peut diverger. */
.assistant--page{position:static;inset:auto;width:auto;max-width:none;height:min(680px,78vh);
  border:1px solid var(--regle);border-radius:var(--rayon);box-shadow:var(--ombre);z-index:auto}
.assistant--page .assistant__fermer{display:none}
.assistant--page .assistant__h{padding:var(--e3) var(--e4)}
.assistant--page .assistant__fil{padding:var(--e4)}
/* En page, le rail porte douze questions rangées par thème : les quatre
   amorces du panneau feraient double emploi. */
.assistant--page .assistant__sugg{display:none}
.assistant--page .assistant__form{padding:var(--e3) var(--e4)}
.assistant--page .assistant__note{padding:0 var(--e4) var(--e3)}

/* L'avertissement d'intelligence artificielle, permanent, au-dessus de la conversation.
   Il ne défile pas avec le fil : quelqu'un qui arrive au milieu d'un échange doit le voir. */
.assistant__ia{display:flex;gap:9px;align-items:flex-start;margin:0;
  padding:11px var(--e3);background:var(--sable);color:var(--lac);
  font-size:12.5px;line-height:1.45;border-bottom:1px solid var(--regle)}
.assistant__ia svg{flex:none;margin-top:1px;color:var(--terre)}
.assistant__ia b{font-weight:700}
.assistant--page .assistant__ia{padding:13px var(--e4);font-size:13.5px}

/* Les marqueurs de source. Ils disaient la vérité — ces chiffres sont nos calculs, pas
   des valeurs relevées — mais entre crochets, en pleine phrase, ils se lisaient comme
   les « [à compléter] » d'une page inachevée. */
.src{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:999px;
  background:var(--sable);color:var(--gris);font-family:var(--texte);font-size:10.5px;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  vertical-align:2px;white-space:nowrap;cursor:help}
.article__c .src{font-size:10px}

/* ---------- Tableau de comparaison, resserré ---------- */
/* Première tentative, mauvaise : je l'avais fait déborder vers la gauche, où se trouve
   le sommaire collant. Résultat, 230 px de chevauchement et deux textes l'un sur l'autre.
   Un tableau ne sort pas de sa colonne quand une colonne collante l'occupe déjà : on le
   resserre plutôt. Le libellé passe de 40 % à 24 % de la largeur, et les lignes de
   200 px à moins de 130. */
.tableau--large table{font-size:13.5px;min-width:520px}
.tableau--large th,.tableau--large td{padding:var(--e2) var(--e3);vertical-align:top}
.tableau--large th[scope="row"]{width:24%;min-width:132px;line-height:1.35}
.tableau--large small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--gris)}
.tableau--large thead th{white-space:normal}

/* ---------- Page « Poser une question » : la conversation d'abord ---------- */
/* Première version, mauvaise : mille quatre cents pixels de titre, de chapô et de
   réglages avant d'atteindre l'assistant. Sur une page dont l'assistant EST le sujet,
   il doit être visible sans défiler. Le réglage et les amorces l'accompagnent dans le
   rail au lieu de le repousser. */
.tete--serre{padding-top:clamp(96px,11vw,124px);padding-bottom:var(--e2)}
.tete--serre h1{max-width:14ch}
.tete--serre .lead{max-width:74ch}

.reglage-court{padding:var(--e3) var(--e4);background:var(--craie);
  border:1px solid var(--regle);border-radius:var(--rayon)}
.reglage-court .note{margin-top:4px}
.reglage-court__l{margin-top:var(--e3)}
.reglage-court__l .groupe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.reglage-court__l .opt{min-height:36px;font-size:13px;padding:0 var(--e2)}
.reglage-court__l .compteur{min-height:36px}
.reglage-court__l .compteur span{font-size:13px}
.prix-court{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:var(--e3)}
.prix-court .carte{display:grid;gap:1px;padding:8px 10px;background:var(--creme);
  border:0;border-radius:10px;box-shadow:none;text-align:center}
.prix-court .carte span{font-size:11.5px;color:var(--gris);line-height:1.2}
.prix-court .carte b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--lac)}

/* La conversation occupe l'écran : c'est le sujet de la page. */
.dialogue .assistant--page{height:min(760px,74vh)}

@media(max-width:1039px){
  .dialogue{display:flex;flex-direction:column;align-items:stretch}
  .dialogue .reglage-court{order:1}
  .dialogue__fil{order:2}
  .dialogue__rail{order:3}
  .dialogue .assistant--page{height:min(620px,72vh)}
}

/* ---------- Le hub de l'assistant ---------- */
/* Trois bandes empilées, pleine largeur : le réglage, la conversation, les amorces.
   La colonne de gauche a été retirée — elle repoussait l'assistant hors de l'écran
   sur un téléphone, et elle le rétrécissait sur un grand. */
.hub{margin-top:var(--e4)}
.hub__reglage{display:grid;gap:var(--e3);padding:var(--e3) var(--e4);
  background:var(--craie);border:1px solid var(--regle);
  border-radius:var(--rayon) var(--rayon) 0 0;border-bottom:0}
@media(min-width:1100px){
  /* Une seule ligne, et des étiquettes alignées : le groupe « foyer » passait à la
     ligne, ce qui remontait son étiquette au-dessus des deux autres. */
  .hub__reglage{grid-template-columns:minmax(210px,1fr) minmax(176px,auto) minmax(330px,auto) auto;
    align-items:start;gap:var(--e4)}
  /* Les étiquettes tiennent sur une ligne : « Votre âge » coupé en deux et « 30 ans »
     rejeté à la ligne suivante donnaient trois hauteurs différentes sur la même bande. */
  .hub__champ .champ__l{white-space:nowrap}
}
.hub__champ{display:flex;flex-direction:column;justify-content:flex-start}
.hub__champ .groupe{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.hub__champ .opt{min-height:38px;font-size:13.5px;padding:0 var(--e3)}
.hub__champ .compteur{min-height:38px}
.prix-court{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:22px 0 0}
.prix-court .carte{display:grid;gap:1px;padding:7px 12px;background:var(--creme);
  border:0;border-radius:10px;box-shadow:none;text-align:center;min-width:74px}
.prix-court .carte span{font-size:11.5px;color:var(--gris);line-height:1.2}
.prix-court .carte b{font-family:var(--display);font-weight:400;font-size:1rem;color:var(--lac)}

/* La conversation, en pleine largeur, soudée au réglage qui la surmonte. */
.hub__fil .assistant--page{height:min(720px,68vh);border-radius:0 0 var(--rayon) var(--rayon)}
@media(max-width:899px){.hub__fil .assistant--page{height:min(560px,64vh)}}

.hub__amorces{margin-top:var(--e4)}
.amorces{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--e2)}
.amorces .theme__q{width:auto;margin-top:0;border-radius:999px;padding:9px 15px}

/* ---------- Les trois cartes se répondent ligne à ligne ---------- */
/* Trois cartes côte à côte servent à être comparées : une rangée doit se trouver à la
   même hauteur dans les trois, sinon les filets se décalent, le prix et le bouton
   flottent chacun à leur étage, et l'œil ne compare plus rien. Il suffisait d'une
   valeur repliée sur deux lignes ou d'un argumentaire plus long d'une ligne pour tout
   désaligner — et cela arrivait à chaque changement de régime.
   Égaliser à la main (des hauteurs fixes, des textes coupés) ne tient pas : le contenu
   change avec le régime, l'âge et le foyer. On fait donc porter les rangées par le
   conteneur : la grille des trois colonnes définit huit pistes, chaque carte s'y cale
   par sous-grille, et sa liste s'y cale à son tour. Les filets retombent au même
   endroit quoi qu'on écrive dedans.
   Les écarts restent ceux des marges déjà posées sur chaque bloc : la sous-grille
   n'apporte pas de gouttière, elle ne fait qu'aligner. */
@supports (grid-template-rows: subgrid){
  @media(min-width:900px){
    .trio{grid-template-rows:repeat(8,auto)}
    .trio>.carte{grid-row:span 8;display:grid;grid-template-rows:subgrid;row-gap:0}
    .trio>.carte>ul{grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--e2)}
    /* Le calage par le bas ne sert plus : les cartes ont désormais la même hauteur. */
    .trio>.carte>.prix,.trio>.carte>.carte__a{margin-top:0}
  }
}

/* ---------- Bandeau d'état, posé et retiré par outils/juridique.py ---------- */
/* La promesse de souscrire est faite six fois en haut de l'accueil ; l'état du projet
   ne se lisait qu'au bas de la page. Le bandeau le dit avant, et il disparaît de
   lui-même le jour où la souscription ouvre. */
/* La barre de navigation est en position fixe : un bandeau posé dans le flux passait
   dessous. On le fixe au-dessus d'elle, et on décale tout ce qui est fixé en haut. */
.bandeau-etat{position:fixed;top:0;left:0;right:0;z-index:75;
  background:var(--lac);color:var(--creme);padding:9px var(--marge);
  font-size:13.5px;line-height:1.45;text-align:center}
.avec-bandeau .barre,.avec-bandeau .progres{top:var(--h-bandeau,38px)}
.avec-bandeau{padding-top:var(--h-bandeau,38px)}
@media(max-width:700px){.bandeau-etat{font-size:12.5px;padding:8px 14px}
  .avec-bandeau .barre,.avec-bandeau .progres{top:var(--h-bandeau,56px)}
  .avec-bandeau{padding-top:var(--h-bandeau,56px)}}
.bandeau-etat a{color:var(--terre-vif);text-underline-offset:3px}
.bandeau-etat b{font-weight:600}