/* ==========================================================================
   LUCIOLE SERVICES — feuille de style
   1 Polices · 2 Tokens · 3 Base · 4 Animations · 5 En-tête · 6 Boutons
   7 Sections · 8 Hero · 9 Cartes · 10 Blocs · 11 Formulaires
   12 Pied de page · 13 Barre mobile · 14 Accessibilité
   ========================================================================== */

/* 1. POLICES ------------------------------------------------------------- */
@font-face{font-family:'Lora';src:url('../fonts/lora-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/sourcesans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* 2. TOKENS -------------------------------------------------------------- */
:root{
  /* Verts du logo, étendus vers le sombre pour gagner du contraste */
  --vert-nuit:#22302A;
  --vert-profond:#34473C;
  --vert:#4A5D52;
  --sauge:#7C8A82;
  --vert-pale:#DDE4E0;

  /* Chaleur : beige et doré du logo */
  --dore:#B5915C;          /* ornements : filets, icônes, bouton or */
  --dore-fonce:#785929;    /* doré assombri pour le texte : 5,8:1 sur le crème */
  --dore-clair:#D2B489;
  --sable:#EADDC6;
  --creme:#F7F3EC;
  --blanc:#FFFFFF;

  --encre:#1F2B25;
  --encre-douce:#4E5C54;
  --bord-champ:#6E7D75;
  --focus:#8A6A34;

  --serif:'Lora',Georgia,serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Relief : trois niveaux, du posé au flottant */
  --relief-1:0 1px 2px rgba(34,48,42,.05), 0 4px 14px rgba(34,48,42,.06);
  --relief-2:0 2px 4px rgba(34,48,42,.07), 0 14px 30px rgba(34,48,42,.10);
  --relief-3:0 6px 12px rgba(34,48,42,.09), 0 28px 56px rgba(34,48,42,.16);
  --liseré:inset 0 1px 0 rgba(255,255,255,.95);

  --section-y:clamp(4rem,8vw,7.5rem);
  --largeur:1200px;
  --gouttiere:clamp(1.25rem,5vw,3rem);
  --rayon:14px;
  --rayon-s:8px;
  --souple:cubic-bezier(.22,.68,.28,1);

  /* Échelle des plans, pour éviter les valeurs arbitraires */
  --plan-barre:90;
  --plan-entete:100;
  --plan-fil:150;
  --plan-modale:200;
  --plan-ouverture:300;
  --plan-saut:400;
}

/* 3. BASE ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* L'en-tête est collant : on réserve sa hauteur pour les ancres et le focus */
  scroll-padding-top:100px}
body{
  margin:0;background:var(--creme);color:var(--encre);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media(min-width:48rem){body{font-size:1.125rem}}

h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--vert-nuit);line-height:1.16;margin:0 0 .55em;letter-spacing:-.015em}
h1{font-size:clamp(2.25rem,6vw,3.75rem);line-height:1.08}
h2{font-size:clamp(1.75rem,3.8vw,2.6rem)}
h3{font-size:clamp(1.2rem,2vw,1.4rem);line-height:1.3}
h4{font-family:var(--sans);font-size:1.0625rem;font-weight:600;color:var(--vert-nuit);margin:0 0 .4em}

p{margin:0 0 1.15em;max-width:66ch;overflow-wrap:anywhere}
a,li{overflow-wrap:anywhere}
p:last-child{margin-bottom:0}
a{color:var(--vert-profond);text-underline-offset:3px}
a:hover{color:var(--dore)}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.2em;max-width:66ch}
li{margin-bottom:.45em}
strong{font-weight:600;color:var(--vert-nuit)}
hr{border:0;border-top:1px solid var(--vert-pale);margin:2.5rem 0}

.conteneur{width:100%;max-width:var(--largeur);margin-inline:auto;padding-inline:var(--gouttiere)}
.mesure{max-width:66ch}
.centre{text-align:center;margin-inline:auto}
.centre p{margin-inline:auto}
.visuellement-cache{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:0;z-index:var(--plan-saut);background:var(--vert-nuit);color:#fff;padding:.8rem 1.2rem}
.saut:focus{left:0}

/* Surtitre : petite capitale dorée au-dessus des H2 */
.surtitre{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 .9rem;
  font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dore-fonce);
}
.surtitre::before{content:"";width:26px;height:2px;background:var(--dore);border-radius:2px}
.section--sombre .surtitre{color:var(--dore-clair)}

/* 4. ANIMATIONS ---------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--souple),transform .75s var(--souple);transition-delay:var(--delai,0ms)}
.reveal.est-visible{opacity:1;transform:none}

@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes lueur{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* 5. EN-TÊTE ------------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:var(--plan-entete);background:rgba(247,243,236,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:box-shadow .3s var(--souple),border-color .3s var(--souple),background .3s var(--souple);
}
.entete.est-defile{box-shadow:var(--relief-1);border-bottom-color:rgba(124,138,130,.22);background:rgba(247,243,236,.94)}
.entete__interieur{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:82px}
.logo{display:inline-flex;align-items:center;padding:.5rem 0;transition:transform .3s var(--souple)}
.logo:hover{transform:scale(1.03)}
.logo img{height:56px;width:auto;transition:height .3s var(--souple)}
@media(min-width:62rem){.logo img{height:70px}.entete.est-defile .logo img{height:58px}}

.nav-principale ul{list-style:none;display:flex;gap:clamp(.9rem,2vw,1.9rem);margin:0;padding:0;align-items:center}
.nav-principale a{
  position:relative;text-decoration:none;color:var(--encre);font-size:1rem;font-weight:600;
  padding:.5rem 0;display:inline-block;
}
.nav-principale a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.15rem;height:2px;border-radius:2px;
  background:var(--dore);transition:right .35s var(--souple);
}
.nav-principale a:hover{color:var(--vert-nuit)}
.nav-principale a:hover::after,.nav-principale a[aria-current="page"]::after{right:0}

.entete__actions{display:none;align-items:center;gap:1rem}
@media(min-width:62rem){.entete__actions{display:flex}}
.tel-entete{font-weight:600;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.45rem}
.tel-entete svg{color:var(--dore);transition:transform .35s var(--souple)}
.tel-entete:hover svg{transform:rotate(-14deg) scale(1.12)}

.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:48px;height:48px;padding:11px;
  border:1px solid rgba(124,138,130,.4);border-radius:var(--rayon-s);background:var(--blanc);
  box-shadow:var(--relief-1);cursor:pointer;transition:box-shadow .25s var(--souple),transform .25s var(--souple);
}
.burger:hover{box-shadow:var(--relief-2);transform:translateY(-1px)}
.burger span{display:block;height:2px;border-radius:2px;background:var(--vert-nuit);transition:transform .3s var(--souple),opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:62rem){.burger{display:none}.nav-tel-mobile{display:none}}

@media(max-width:61.99rem){
  .nav-principale{
    display:none;position:absolute;left:0;right:0;top:100%;background:var(--creme);
    box-shadow:var(--relief-2);padding:.5rem var(--gouttiere) 1.5rem;
  }
  .nav-principale.est-ouvert{display:block;animation:deroule .3s var(--souple)}
  @keyframes deroule{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav-principale ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-principale li{border-bottom:1px solid var(--vert-pale);margin:0}
  .nav-principale a{padding:1rem 0;font-size:1.0625rem}
  .nav-principale a::after{display:none}
  .nav-tel{color:var(--vert-profond)}
}

/* 6. BOUTONS ------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:54px;padding:.85rem 1.7rem;font-family:var(--sans);font-size:1.0625rem;font-weight:600;line-height:1.2;
  border-radius:999px;border:1px solid transparent;text-decoration:none;cursor:pointer;overflow:hidden;
  transition:transform .25s var(--souple),box-shadow .25s var(--souple),background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn--principal{background:var(--vert-nuit);color:#fff;box-shadow:var(--relief-2)}
.btn--principal:hover{background:var(--vert-profond);color:#fff;box-shadow:var(--relief-3)}
/* reflet qui traverse le bouton au survol */
.btn--principal::before{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
}
.btn--principal:hover::before{transition:transform .7s var(--souple);transform:translateX(120%)}
.btn--secondaire{background:var(--blanc);color:var(--vert-nuit);border-color:rgba(124,138,130,.45);box-shadow:var(--relief-1)}
.btn--secondaire:hover{border-color:var(--dore);color:var(--vert-nuit);box-shadow:var(--relief-2)}
.btn--or{background:var(--dore);color:#22302A;box-shadow:var(--relief-2)}
.btn--or:hover{background:var(--dore-clair);color:#22302A;box-shadow:var(--relief-3)}
.btn--clair{background:#fff;color:var(--vert-nuit);box-shadow:var(--relief-2)}
.btn--clair:hover{background:var(--sable);color:var(--vert-nuit);box-shadow:var(--relief-3)}
.btn--contour-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--contour-clair:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.8)}
.btn svg{flex:none;position:relative}
.groupe-btn{display:flex;flex-wrap:wrap;gap:.85rem}

.lien-souligne{position:relative;font-weight:600;text-decoration:none;display:inline-block;padding-bottom:3px}
.lien-souligne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--dore);transform:scaleX(.32);transform-origin:left;transition:transform .4s var(--souple)}
.lien-souligne:hover::after{transform:scaleX(1)}

/* 7. SECTIONS ------------------------------------------------------------ */
.section{padding-block:var(--section-y);position:relative}
.section--blanche{background:var(--blanc)}
.section--sable{background:linear-gradient(180deg,var(--creme) 0%,var(--sable) 100%)}
.section--sombre{background:var(--vert-nuit);color:#EAF0EC}
.section--sombre h2,.section--sombre h3{color:#fff}
.section--sombre p{color:#C6D2CB}
.section--serree{padding-block:clamp(2.5rem,5vw,4rem)}
.section__intro{max-width:60ch;color:var(--encre-douce);font-size:1.0625rem}
.section--sombre .section__intro{color:#C6D2CB}
@media(min-width:48rem){.section__intro{font-size:1.15rem}}

.grille{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
.grille--2{grid-template-columns:1fr}
.grille--3{grid-template-columns:1fr}
@media(min-width:44rem){.grille--2{grid-template-columns:1fr 1fr}.grille--3{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.grille--3{grid-template-columns:repeat(3,1fr)}}

/* 8. HERO ---------------------------------------------------------------- */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5.5rem);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-28%;right:-14%;width:58vw;height:58vw;max-width:720px;max-height:720px;
  background:radial-gradient(circle,rgba(210,180,137,.34) 0%,rgba(210,180,137,0) 66%);pointer-events:none;
}
.hero__interieur{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center;position:relative}
@media(min-width:62rem){.hero__interieur{grid-template-columns:1.02fr .98fr}}
.hero h1{margin-bottom:.45em}
.hero h1 em{font-style:normal;color:var(--vert);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.3em;background:var(--sable);border-radius:4px;z-index:-1}
.hero__accroche{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--encre-douce);max-width:44ch}
.hero__actions{margin-top:2.2rem}
.hero__mention{margin-top:1.6rem;font-size:.98rem;color:var(--encre-douce);display:flex;align-items:center;gap:.5rem}
.hero__mention svg{color:var(--dore);flex:none}

.hero__visuel{position:relative}
.hero__cadre{
  border-radius:220px 220px var(--rayon) var(--rayon);overflow:hidden;
  box-shadow:var(--relief-3);background:var(--vert-pale);
}
.hero__cadre img{width:100%;aspect-ratio:8/9;object-fit:cover}
/* pastille flottante posée sur le visuel */
.pastille{
  position:absolute;left:-4%;bottom:8%;display:flex;align-items:center;gap:.8rem;
  background:var(--blanc);border-radius:999px;padding:.85rem 1.4rem .85rem .9rem;
  box-shadow:var(--relief-3),var(--liseré);animation:flotte 6s ease-in-out infinite;
  font-weight:600;font-size:1rem;color:var(--vert-nuit);
}
.pastille span.rond{
  width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--dore-clair),var(--dore));color:#fff;
}
@media(max-width:61.99rem){.pastille{left:auto;right:5%;bottom:-1.6rem;font-size:.95rem}}

/* 9. CARTES EN RELIEF ---------------------------------------------------- */
.carte{
  position:relative;background:var(--blanc);border-radius:var(--rayon);padding:clamp(1.5rem,3vw,2rem);
  box-shadow:var(--relief-1),var(--liseré);border:1px solid rgba(124,138,130,.16);
  transition:transform .35s var(--souple),box-shadow .35s var(--souple),border-color .35s var(--souple);
}
.carte::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--rayon) var(--rayon) 0 0;
  background:linear-gradient(90deg,var(--dore),var(--dore-clair));transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--souple);
}
a.carte{text-decoration:none;color:inherit;display:block}
.carte:hover,a.carte:hover{transform:translateY(-7px);box-shadow:var(--relief-3),var(--liseré);border-color:rgba(181,145,92,.4)}
.carte:hover::after,a.carte:hover::after{transform:scaleX(1)}
.carte h3{margin-bottom:.4em}
.carte p{color:var(--encre-douce);font-size:1rem;margin:0}
.carte__icone{
  width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.2rem;
  background:linear-gradient(145deg,var(--creme),var(--vert-pale));color:var(--vert-profond);
  box-shadow:var(--relief-1),inset 0 1px 0 #fff;
  transition:transform .4s var(--souple),background .4s ease,color .4s ease;
}
a.carte:hover .carte__icone,.carte:hover .carte__icone{transform:translateY(-3px) rotate(-5deg);background:linear-gradient(145deg,var(--dore-clair),var(--dore));color:#fff}
.carte__plus{display:inline-block;margin-top:1rem;font-weight:600;font-size:.98rem;color:var(--vert-profond)}
a.carte:hover .carte__plus{color:var(--dore)}

/* Étapes numérotées */
.etapes{list-style:none;padding:0;margin:0;counter-reset:etape;max-width:none;display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
@media(min-width:48rem){.etapes{grid-template-columns:repeat(3,1fr)}}
.etapes li{counter-increment:etape;margin:0}
.etapes .carte{padding-top:2.6rem}
.etapes .carte::before{
  content:counter(etape);position:absolute;top:-22px;left:clamp(1.5rem,3vw,2rem);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--vert-nuit);color:#fff;font-family:var(--serif);font-size:1.25rem;
  box-shadow:var(--relief-2);transition:background .35s ease,transform .35s var(--souple);
}
.etapes .carte:hover::before{background:var(--dore);transform:scale(1.08)}

/* 10. BLOCS -------------------------------------------------------------- */
/* Bandeau de confiance */
.confiance{background:var(--vert-nuit);position:relative;overflow:hidden}
.confiance::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(100deg,transparent 35%,rgba(210,180,137,.16) 50%,transparent 65%);
  background-size:200% 100%;animation:lueur 9s linear infinite;
}
.confiance ul{list-style:none;margin:0;padding:1.5rem 0;max-width:none;display:grid;gap:1rem 2rem;grid-template-columns:1fr;position:relative}
@media(min-width:40rem){.confiance ul{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.confiance ul{grid-template-columns:repeat(4,auto);justify-content:space-between}}
.confiance li{display:flex;align-items:center;gap:.7rem;margin:0;font-weight:600;color:#fff;font-size:1rem}
.confiance svg{color:var(--dore-clair);flex:none}

/* Communes */
.communes{list-style:none;padding:0;margin:1.75rem 0 0;max-width:none;display:flex;flex-wrap:wrap;gap:.65rem}
.communes li{margin:0}
.communes span{
  display:inline-block;padding:.55rem 1.15rem;border-radius:999px;background:var(--blanc);
  border:1px solid rgba(124,138,130,.2);box-shadow:var(--relief-1),var(--liseré);
  font-size:1rem;font-weight:600;color:var(--vert-nuit);
  transition:transform .3s var(--souple),box-shadow .3s var(--souple),border-color .3s ease;
}
.communes span:hover{transform:translateY(-3px);box-shadow:var(--relief-2);border-color:var(--dore)}
.section--sombre .communes span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
.section--sombre .communes span:hover{background:rgba(255,255,255,.14);border-color:var(--dore-clair)}

/* Duo texte + visuel */
.duo{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(min-width:62rem){.duo{grid-template-columns:1fr 1fr}.duo--inverse .duo__texte{order:2}}
.duo__visuel img{width:100%;border-radius:var(--rayon);box-shadow:var(--relief-2)}

/* FAQ */
.faq{max-width:52rem}
.faq details{
  background:var(--blanc);border-radius:var(--rayon);margin-bottom:.85rem;
  box-shadow:var(--relief-1),var(--liseré);border:1px solid rgba(124,138,130,.16);
  transition:box-shadow .3s var(--souple),border-color .3s ease;
}
.faq details[open],.faq details:hover{box-shadow:var(--relief-2);border-color:rgba(181,145,92,.35)}
.faq summary{
  cursor:pointer;padding:1.25rem 3.2rem 1.25rem 1.4rem;position:relative;list-style:none;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--vert-nuit);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:1.4rem;top:1.5rem;width:11px;height:11px;
  border-right:2px solid var(--dore);border-bottom:2px solid var(--dore);
  transform:rotate(45deg);transition:transform .3s var(--souple);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq__reponse{padding:0 1.4rem 1.35rem;color:var(--encre-douce)}
.faq details[open] .faq__reponse{animation:deplie .35s var(--souple)}
@keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Encadré */
.encadre{
  background:var(--blanc);border-radius:var(--rayon);padding:clamp(1.4rem,3vw,2rem);
  box-shadow:var(--relief-2),var(--liseré);border-left:4px solid var(--dore);
}
.encadre p{max-width:none}
.section--sombre .encadre{background:rgba(255,255,255,.06);box-shadow:none;border-left-color:var(--dore-clair)}

/* Appel final */
.appel{position:relative;overflow:hidden}
.appel::before{
  content:"";position:absolute;bottom:-40%;left:-10%;width:52vw;height:52vw;max-width:620px;max-height:620px;
  background:radial-gradient(circle,rgba(181,145,92,.22) 0%,rgba(181,145,92,0) 68%);pointer-events:none;
}
.appel__tel{
  font-family:var(--serif);font-size:clamp(2.1rem,6vw,3.2rem);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:.8rem;margin:.4rem 0 1.8rem;
  transition:color .3s ease,transform .3s var(--souple);
}
.appel__tel:hover{color:var(--dore-clair);transform:translateY(-2px)}
.appel__tel svg{color:var(--dore-clair);flex:none}

/* Articles */
.articles{list-style:none;padding:0;margin:0;max-width:none;display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
@media(min-width:44rem){.articles{grid-template-columns:1fr 1fr}}
.article-carte{padding:0;overflow:hidden}
.article-carte img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .6s var(--souple)}
.article-carte:hover img{transform:scale(1.04)}
.article-carte__texte{padding:clamp(1.3rem,3vw,1.8rem)}
.meta{font-size:.93rem;color:var(--encre-douce);margin-bottom:.5em;letter-spacing:.02em}
.article-corps h2{margin-top:2em}
.article-corps h3{margin-top:1.7em}

/* Fil d'Ariane */
.fil{font-size:.95rem;color:var(--encre-douce);padding-block:1rem}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;max-width:none}
.fil li{margin:0}
.fil li+li::before{content:"›";margin-right:.5rem;color:var(--sauge)}
.fil a{color:var(--encre-douce)}

/* 11. FORMULAIRES -------------------------------------------------------- */
.formulaire{max-width:40rem}
.champ{margin-bottom:1.4rem}
.champ label,.groupe>legend{display:block;font-weight:600;color:var(--vert-nuit);margin-bottom:.4rem;font-size:1rem}
.champ .aide{display:block;font-weight:400;color:var(--encre-douce);font-size:.95rem;margin-bottom:.5rem}
input[type="text"],input[type="tel"],input[type="email"],select,textarea{
  width:100%;min-height:54px;padding:.8rem 1rem;font-family:var(--sans);font-size:1.0625rem;color:var(--encre);
  background:var(--blanc);border:1px solid var(--bord-champ);border-radius:var(--rayon-s);
  transition:border-color .25s ease,box-shadow .25s var(--souple);
}
input:hover,select:hover,textarea:hover{border-color:var(--vert)}
input:focus,select:focus,textarea:focus{border-color:var(--vert-nuit);box-shadow:0 0 0 4px rgba(181,145,92,.18)}
textarea{min-height:130px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%237C8A82' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.75rem}
.groupe{border:0;padding:0;margin:0 0 1.4rem}
.options{display:grid;gap:.6rem}
@media(min-width:34rem){.options--2{grid-template-columns:1fr 1fr}}
.option{
  display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border:1px solid var(--bord-champ);
  border-radius:var(--rayon-s);background:var(--blanc);cursor:pointer;font-size:1rem;min-height:54px;
  transition:border-color .25s ease,background .25s ease,transform .25s var(--souple),box-shadow .25s var(--souple);
}
.option:hover{border-color:var(--vert);transform:translateY(-2px);box-shadow:var(--relief-1)}
.option input{margin:.25rem 0 0;width:20px;height:20px;accent-color:var(--vert-nuit);flex:none}
.option:has(input:checked){border-color:var(--vert-nuit);background:var(--vert-pale);box-shadow:var(--relief-1)}
.consentement{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem;color:var(--encre-douce);font-weight:400}
.consentement input{width:20px;height:20px;margin-top:.3rem;accent-color:var(--vert-nuit);flex:none}
.erreur-champ{display:block;color:#8A2E2E;font-size:.95rem;margin-top:.35rem;font-weight:600}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#8A2E2E;border-width:2px}
.message-formulaire{padding:1rem 1.1rem;border-radius:var(--rayon-s);margin-bottom:1.5rem;font-weight:600}
.message-formulaire--erreur{background:#F6E9E7;color:#7A2A2A;border:1px solid #D8B4B0}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Modale */
.modale{border:0;padding:0;max-width:34rem;width:calc(100% - 2rem);border-radius:var(--rayon);background:var(--creme);color:var(--encre);box-shadow:var(--relief-3)}
.modale::backdrop{background:rgba(31,43,37,.6);backdrop-filter:blur(3px)}
.modale[open]{animation:apparait .35s var(--souple)}
@keyframes apparait{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.modale__interieur{padding:clamp(1.5rem,4vw,2.25rem);position:relative}
.modale h2{font-size:1.6rem}
.modale__fermer{
  position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;color:var(--vert-nuit);font-size:1.7rem;line-height:1;border-radius:50%;
  transition:background .25s ease,transform .25s var(--souple);
}
.modale__fermer:hover{background:var(--vert-pale);transform:rotate(90deg)}

/* 12. PIED DE PAGE ------------------------------------------------------- */
.pied{background:var(--vert-nuit);color:#DCE5DF;padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.pied a{color:#DCE5DF;text-decoration:none}
.pied a:hover{color:var(--dore-clair)}
.pied__grille{display:grid;gap:2.5rem}
@media(min-width:48rem){.pied__grille{grid-template-columns:1.2fr 1fr 1fr}}
@media(min-width:64rem){.pied__grille{grid-template-columns:1.3fr 1fr 1.1fr 1fr}}
.pied img{height:88px;width:auto}
.pied h2{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dore-clair);margin-bottom:1rem}
.pied ul{list-style:none;padding:0;margin:0;max-width:none}
.pied li{margin-bottom:.55em}
.pied p{color:#AFBDB4;font-size:1rem}
.pied__bas{margin-top:3rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;font-size:.93rem;color:#AFBDB4}
.pied__bas p{color:inherit;font-size:inherit}

/* 13. BARRE MOBILE ------------------------------------------------------- */
.barre-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--plan-barre);display:grid;grid-template-columns:1fr 1fr;
  background:var(--vert-nuit);box-shadow:0 -6px 24px rgba(31,43,37,.24);padding-bottom:env(safe-area-inset-bottom);
}
.barre-mobile a,.barre-mobile button{
  display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:58px;color:#fff;
  background:transparent;border:0;font-family:var(--sans);font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background .25s ease;
}
.barre-mobile a:active,.barre-mobile button:active{background:rgba(255,255,255,.12)}
.barre-mobile button{border-left:1px solid rgba(255,255,255,.16)}
.barre-mobile svg{color:var(--dore-clair)}
@media(min-width:62rem){.barre-mobile{display:none}}
@media(max-width:61.99rem){body{padding-bottom:58px}}

/* 14. ACCESSIBILITÉ ------------------------------------------------------ */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.section--sombre :focus-visible,.pied :focus-visible,.barre-mobile :focus-visible,.confiance :focus-visible{outline-color:var(--dore-clair)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}
@media print{.entete,.barre-mobile,.pied,.hero__visuel{display:none}body{background:#fff;font-size:11pt}}

/* 15. CADRES PHOTOGRAPHIQUES --------------------------------------------- */
/* Deux équerres décalées, reprises du toit du logo, encadrent chaque photo. */
.cadre{position:relative;display:block}
.cadre .media{display:block;position:relative;z-index:1;overflow:hidden;border-radius:var(--rayon);box-shadow:var(--relief-2)}
.cadre .media img{display:block;width:100%;transition:transform .9s var(--souple)}
.cadre:hover .media img{transform:scale(1.035)}
.cadre::before,.cadre::after{content:"";position:absolute;width:38%;height:38%;z-index:0;pointer-events:none}
.cadre::before{left:-16px;top:-16px;border-top:2px solid var(--dore);border-left:2px solid var(--dore);border-radius:var(--rayon) 0 0 0}
.cadre::after{right:-16px;bottom:-16px;border-bottom:2px solid var(--sauge);border-right:2px solid var(--sauge);border-radius:0 0 var(--rayon) 0}
@media(max-width:34rem){.cadre::before{left:-8px;top:-8px}.cadre::after{right:-8px;bottom:-8px}}

/* Diptyque : une photo principale, une seconde posée en débord */
.diptyque{position:relative;padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.diptyque .media{display:block;overflow:hidden;border-radius:var(--rayon);box-shadow:var(--relief-2)}
.diptyque .media img{display:block;width:100%;transition:transform .9s var(--souple)}
.diptyque:hover .media img{transform:scale(1.03)}
.diptyque__second{
  display:block;position:absolute;right:-4%;bottom:0;width:56%;z-index:2;
  border:9px solid var(--creme);border-radius:calc(var(--rayon) + 4px);
  box-shadow:var(--relief-3);overflow:hidden;
}
.section--blanche .diptyque__second{border-color:var(--blanc)}
.diptyque__second img{display:block;width:100%}
@media(max-width:44rem){
  .diptyque{padding-bottom:0}
  .diptyque__second{position:static;width:100%;margin-top:1rem;border-width:0;box-shadow:var(--relief-2)}
}

/* Hero : arche dédoublée, décalée en beige derrière la photo */
.hero__visuel::before{
  content:"";position:absolute;left:20px;top:20px;right:-20px;bottom:-20px;z-index:0;
  background:linear-gradient(155deg,var(--sable),rgba(181,145,92,.38));
  clip-path:polygon(50% 0%,100% 16%,100% 100%,0% 100%,0% 16%);
}
.hero__cadre{position:relative;z-index:1}
@media(max-width:61.99rem){.hero__visuel::before{left:12px;top:12px;right:-12px;bottom:-12px}}

/* Panneau : remplace une image quand la photographie n'apporterait rien */
.panneau{
  position:relative;border-radius:var(--rayon);padding:clamp(1.6rem,3.5vw,2.4rem);
  background:linear-gradient(155deg,var(--blanc),var(--vert-pale));
  box-shadow:var(--relief-2),var(--liseré);border:1px solid rgba(124,138,130,.18);
}
.panneau::after{
  content:"";position:absolute;right:-14px;bottom:-14px;width:40%;height:40%;
  border-bottom:2px solid var(--dore);border-right:2px solid var(--dore);
  border-radius:0 0 var(--rayon) 0;
}
.panneau__icone{
  width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin-bottom:1.3rem;
  background:linear-gradient(145deg,var(--dore-clair),var(--dore));color:#fff;box-shadow:var(--relief-1);
}
.panneau ul{list-style:none;padding:0;margin:0;max-width:none}
.panneau li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.75rem;font-weight:600;color:var(--vert-nuit)}
.panneau li:last-child{margin-bottom:0}
.panneau li svg{color:var(--dore);flex:none;margin-top:.15rem}

/* Légende discrète sous une photo */
.legende{margin-top:.9rem;font-size:.93rem;color:var(--encre-douce);font-style:italic}

/* 16. CINÉMATIQUES ------------------------------------------------------- */

/* Titre principal : les mots se posent les uns après les autres */
.mot{display:inline-block;opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--souple),transform .8s var(--souple);
  transition-delay:calc(var(--i,0) * 65ms)}
.reveal.est-visible .mot{opacity:1;transform:none}

/* Photographies : révélation par balayage, plutôt qu'un simple fondu */
.reveal-image .media,.reveal-image .diptyque__second{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--souple);
  transition-delay:var(--delai,0ms)}
.reveal-image.est-visible .media{clip-path:inset(0 0 0 0)}
.reveal-image.est-visible .diptyque__second{clip-path:inset(0 0 0 0);transition-delay:calc(var(--delai,0ms) + 260ms)}

/* Hero : très lent mouvement d'approche sur l'image */
.kenburns img{animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}

/* Bande pleine largeur, image en fond et parallaxe douce */
.bande{position:relative;overflow:hidden;display:grid;place-items:center;text-align:center;
  min-height:clamp(300px,38vw,460px)}
.bande__fond{position:absolute;left:0;right:0;top:-14%;bottom:-14%;z-index:0}
.bande__fond img{width:100%;height:100%;object-fit:cover;will-change:transform}
.bande::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(34,48,42,.58) 0%,rgba(34,48,42,.74) 100%)}
.bande__contenu{position:relative;z-index:2;color:#fff;padding:clamp(2.5rem,6vw,4rem) var(--gouttiere);max-width:46rem}
.bande__contenu h2{color:#fff;margin-bottom:.5em}
.bande__contenu p{color:#DCE5DF;margin-inline:auto}
.bande__contenu .surtitre{color:var(--dore-clair);justify-content:center}
.bande__contenu .groupe-btn{justify-content:center;margin-top:1.8rem}

/* Séparateur : une matière, pas une image. Respiration entre deux sections. */
.separateur{position:relative;overflow:hidden;height:clamp(100px,13vw,170px)}
.separateur img{width:100%;height:100%;object-fit:cover;will-change:transform}

@media(prefers-reduced-motion:reduce){
  .mot{opacity:1;transform:none}
  .reveal-image .media,.reveal-image .diptyque__second{clip-path:none}
  .kenburns img{animation:none}
}

/* 17. BANDE PAYSAGE ET PASTILLES CLAIRES --------------------------------- */
.bande--haute{min-height:clamp(420px,50vw,600px)}
.bande__contenu .communes{justify-content:center;margin-bottom:1.9rem}
.communes--claires span{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.communes--claires span:hover{background:rgba(255,255,255,.24);border-color:var(--dore-clair)}

/* 18. PARCOURS EN QUATRE ÉTAPES ------------------------------------------ */
.parcours{max-width:52rem}

/* Fil de progression */
.parcours__progression{
  list-style:none;padding:0;margin:0 0 2.5rem;max-width:none;
  display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:52rem){.parcours__progression{grid-template-columns:repeat(4,1fr);gap:1rem}}
.parcours__progression li{
  margin:0;padding-top:.85rem;border-top:2px solid var(--vert-pale);
  font-size:.95rem;font-weight:600;color:var(--sauge);
  transition:color .4s ease,border-color .5s var(--souple)}
.parcours__progression li span{display:block;font-family:var(--serif);font-size:1.05rem;margin-bottom:.1rem}
.parcours__progression li.est-faite{color:var(--vert);border-top-color:var(--sauge)}
.parcours__progression li.est-active{color:var(--vert-nuit);border-top-color:var(--dore)}

/* Étapes */
.parcours__etape{border:0;padding:0;margin:0}
.parcours__etape legend{
  font-family:var(--serif);font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600;
  color:var(--vert-nuit);margin-bottom:.5rem;padding:0;line-height:1.2}
.parcours__etape .aide{display:block;color:var(--encre-douce);margin-bottom:1.4rem;font-size:1rem}
.parcours.est-interactif .parcours__etape{display:none}
.parcours.est-interactif .parcours__etape.est-active{display:block;animation:entreEtape .5s var(--souple)}
@keyframes entreEtape{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.parcours.est-interactif .parcours__etape.est-active.vers-arriere{animation-name:entreEtapeArriere}
@keyframes entreEtapeArriere{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* Cartes de choix */
.choix{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:34rem){.choix{grid-template-columns:1fr 1fr}}
@media(min-width:52rem){.choix--3{grid-template-columns:repeat(3,1fr)}}
.choix__carte{
  position:relative;display:flex;align-items:center;gap:.9rem;cursor:pointer;
  padding:1rem 1.1rem;min-height:66px;border-radius:var(--rayon);background:var(--blanc);
  border:1px solid rgba(124,138,130,.28);box-shadow:var(--relief-1),var(--liseré);
  font-weight:600;color:var(--vert-nuit);font-size:1.0625rem;
  transition:transform .3s var(--souple),box-shadow .3s var(--souple),border-color .3s ease,background .3s ease}
.choix__carte:hover{transform:translateY(-3px);box-shadow:var(--relief-2),var(--liseré);border-color:var(--sauge)}
.choix__carte input{position:absolute;opacity:0;width:1px;height:1px}
.choix__icone{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--creme),var(--vert-pale));color:var(--vert-profond);
  transition:background .35s ease,color .35s ease,transform .35s var(--souple)}
.choix__carte:hover .choix__icone{transform:rotate(-6deg)}
.choix__carte:has(input:checked){
  border-color:var(--vert-nuit);background:var(--vert-pale);box-shadow:var(--relief-2)}
.choix__carte:has(input:checked) .choix__icone{
  background:linear-gradient(145deg,var(--dore-clair),var(--dore));color:#fff}
.choix__carte input:focus-visible+.choix__icone{outline:3px solid var(--focus);outline-offset:3px}
/* Coche discrète sur la carte retenue */
.choix__carte::after{
  content:"";position:absolute;top:.7rem;right:.8rem;width:9px;height:15px;
  border-right:2.5px solid var(--dore);border-bottom:2.5px solid var(--dore);
  transform:rotate(45deg) scale(0);transition:transform .3s var(--souple)}
.choix__carte:has(input:checked)::after{transform:rotate(45deg) scale(1)}

/* Pied du parcours */
.parcours__pied{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:2.2rem;
  padding-top:1.6rem;border-top:1px solid var(--vert-pale)}
.parcours__pied .btn{flex:0 0 auto}
.parcours.est-interactif [data-precedent],.parcours.est-interactif [data-envoyer]{display:none}
.parcours.est-interactif.est-avancee [data-precedent]{display:inline-flex}
.parcours.est-interactif.est-derniere [data-suivant]{display:none}
.parcours.est-interactif.est-derniere [data-envoyer]{display:inline-flex}
.parcours__compte{margin-left:auto;font-size:.95rem;color:var(--encre-douce)}

/* 19. AVIS CLIENTS -------------------------------------------------------- */
.avis{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem);grid-template-columns:1fr}
@media(min-width:44rem){.avis{grid-template-columns:1fr 1fr}}
@media(min-width:62rem){.avis{grid-template-columns:repeat(3,1fr)}}
.avis__carte{position:relative;padding-top:2.6rem}
.avis__carte::before{
  content:"“";position:absolute;top:.4rem;left:clamp(1.5rem,3vw,2rem);
  font-family:var(--serif);font-size:4.2rem;line-height:1;color:var(--sable)}
.avis__texte{font-size:1.0625rem;color:var(--encre);margin-bottom:1.2rem}
.avis__auteur{font-weight:600;color:var(--vert-nuit);font-size:1rem}
.avis__source{color:var(--encre-douce);font-size:.93rem}

/* 20. SÉQUENCE D'OUVERTURE ----------------------------------------------- */
/* Voile crème, le logo se pose, un trait doré se trace, le voile se retire.
   Entièrement en CSS : sans JavaScript, il disparaît quand même. */
.ouverture{
  position:fixed;inset:0;z-index:var(--plan-ouverture);background:var(--creme);
  display:grid;place-items:center;gap:1.4rem;align-content:center;
  animation:voileSort .95s var(--souple) 1.25s forwards}
.ouverture__logo{
  width:min(250px,48vw);height:auto;opacity:0;
  transform:translateY(16px) scale(.96);
  animation:logoEntre 1s var(--souple) .12s forwards}
.ouverture__trait{
  width:0;height:2px;border-radius:2px;background:var(--dore);
  animation:traitSeTrace .8s var(--souple) .55s forwards}
@keyframes logoEntre{to{opacity:1;transform:none}}
@keyframes traitSeTrace{to{width:clamp(90px,18vw,150px)}}
@keyframes voileSort{to{opacity:0;visibility:hidden;pointer-events:none}}
/* Déjà vue dans cette visite, ou animations réduites : on la saute */
html.sans-ouverture .ouverture{display:none}
@media(prefers-reduced-motion:reduce){.ouverture{display:none}}

/* Arrivée du contenu, une fois le voile parti */
main{animation:entreePage .7s var(--souple) both}
@keyframes entreePage{from{opacity:0}to{opacity:1}}
html.sans-ouverture main{animation-duration:.35s}
@media(prefers-reduced-motion:reduce){main{animation:none}}

/* 21. LUEUR QUI SUIT LE CURSEUR ------------------------------------------ */
/* Uniquement sur le hero, uniquement à la souris. Discret, jamais gadget. */
.hero__lueur{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .7s ease;
  background:radial-gradient(260px circle at var(--x,50%) var(--y,40%),
             rgba(181,145,92,.22), rgba(181,145,92,0) 70%)}
@media(hover:hover) and (pointer:fine){.hero:hover .hero__lueur{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero__lueur{display:none}}

/* 22. PROGRESSION DE LECTURE --------------------------------------------- */
/* Sur les articles seulement : un fil doré indique où l'on en est. */
.progression-lecture{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:var(--plan-fil);transform:scaleX(0);
  transform-origin:left;background:linear-gradient(90deg,var(--dore),var(--dore-clair))}
@media(prefers-reduced-motion:reduce){.progression-lecture{display:none}}

/* ==========================================================================
   23. PALETTE ÉTENDUE
   Le vert du logo reste la base. Trois accents viennent rompre la monotonie :
   une terre cuite qui reprend les toits provençaux, un olive et un bleu
   profond. Tous vérifiés en contraste, texte blanc dessus comme texte sur
   fond crème.
   ========================================================================== */
:root{
  --brique:#A63E28;      /* 6,3:1 avec du blanc — utilisable en fond de bouton */
  --brique-vif:#C0522F;
  --olive:#5F7A33;
  --olive-vif:#6E8B3D;
  --azur:#2F5D62;        /* 7,3:1 avec du blanc */
  --azur-vif:#35696F;
}

/* --- Cartes : chaque carte reçoit son propre accent -------------------- */
.carte{--accent:var(--dore);--accent-vif:var(--dore-clair)}
.grille>.carte:nth-child(6n+1),.articles>li:nth-child(6n+1) .carte{--accent:var(--brique);--accent-vif:var(--brique-vif)}
.grille>.carte:nth-child(6n+2){--accent:var(--olive);--accent-vif:var(--olive-vif)}
.grille>.carte:nth-child(6n+3){--accent:var(--azur);--accent-vif:var(--azur-vif)}
.grille>.carte:nth-child(6n+4){--accent:var(--dore-fonce);--accent-vif:var(--dore)}
.grille>.carte:nth-child(6n+5){--accent:var(--vert-profond);--accent-vif:var(--vert)}
.grille>.carte:nth-child(6n+6){--accent:var(--brique);--accent-vif:var(--dore)}

.carte::after{background:linear-gradient(90deg,var(--accent),var(--accent-vif))}
.carte__icone{
  background:linear-gradient(145deg,var(--creme),var(--vert-pale));
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--accent) 8%,var(--blanc)),
    color-mix(in srgb,var(--accent) 22%,var(--blanc)));
  color:var(--accent)}
a.carte:hover .carte__icone,.carte:hover .carte__icone{
  background:linear-gradient(145deg,var(--accent-vif),var(--accent));color:#fff}
.carte:hover,a.carte:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
a.carte:hover h3{color:var(--accent)}
a.carte:hover .carte__plus{color:var(--accent)}
.carte__plus::after{content:" →";font-weight:400}

/* --- Étapes : la pastille numérotée prend l'accent de sa carte --------- */
.etapes li:nth-child(1) .carte{--accent:var(--brique);--accent-vif:var(--brique-vif)}
.etapes li:nth-child(2) .carte{--accent:var(--olive);--accent-vif:var(--olive-vif)}
.etapes li:nth-child(3) .carte{--accent:var(--azur);--accent-vif:var(--azur-vif)}
.etapes .carte::before{background:var(--accent)}
.etapes .carte:hover::before{background:var(--accent-vif)}

/* --- Bandeau de confiance : quatre icônes, quatre couleurs ------------- */
.confiance li:nth-child(1) svg{color:#E9A05C}
.confiance li:nth-child(2) svg{color:#9CC06A}
.confiance li:nth-child(3) svg{color:#7FC0C7}
.confiance li:nth-child(4) svg{color:var(--dore-clair)}

/* --- Bouton principal de conversion : terre cuite ---------------------- */
/* Un bouton d'action qui tranche avec le fond convertit mieux qu'un bouton
   de la même famille chromatique que tout le reste. */
.btn--or{background:var(--brique);color:#fff;box-shadow:var(--relief-2)}
.btn--or:hover{background:var(--brique-vif);color:#fff;box-shadow:var(--relief-3)}
.btn--or::before{
  content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%)}
.btn--or:hover::before{transition:transform .7s var(--souple);transform:translateX(120%)}

/* --- Sections : deux fonds colorés de plus ----------------------------- */
.section--sable{
  background:linear-gradient(165deg,var(--creme) 0%,#F3E4D4 55%,var(--sable) 100%)}
.section--blanche{
  background:
    radial-gradient(60rem 30rem at 85% -10%,rgba(166,62,40,.05),transparent 60%),
    radial-gradient(50rem 26rem at 0% 110%,rgba(95,122,51,.06),transparent 60%),
    var(--blanc)}

/* --- Hero : trois masses de lumière au lieu d'une ---------------------- */
.hero::before{
  background:
    radial-gradient(38rem 32rem at 78% 8%,rgba(210,180,137,.42),transparent 62%),
    radial-gradient(30rem 26rem at 96% 58%,rgba(166,62,40,.16),transparent 64%),
    radial-gradient(34rem 28rem at 58% 84%,rgba(95,122,51,.16),transparent 66%)}

/* --- Pastilles de communes : rotation de couleurs au survol ------------ */
.communes li:nth-child(4n+1) span:hover{border-color:var(--brique)}
.communes li:nth-child(4n+2) span:hover{border-color:var(--olive)}
.communes li:nth-child(4n+3) span:hover{border-color:var(--azur)}
.communes li:nth-child(4n+4) span:hover{border-color:var(--dore)}

/* --- FAQ : chevrons colorés -------------------------------------------- */
.faq details:nth-child(3n+1) summary::after{border-color:var(--brique)}
.faq details:nth-child(3n+2) summary::after{border-color:var(--olive)}
.faq details:nth-child(3n+3) summary::after{border-color:var(--azur)}
.faq details:nth-child(3n+1)[open],.faq details:nth-child(3n+1):hover{border-color:color-mix(in srgb,var(--brique) 40%,transparent)}
.faq details:nth-child(3n+2)[open],.faq details:nth-child(3n+2):hover{border-color:color-mix(in srgb,var(--olive) 40%,transparent)}
.faq details:nth-child(3n+3)[open],.faq details:nth-child(3n+3):hover{border-color:color-mix(in srgb,var(--azur) 40%,transparent)}

/* --- Cartes de choix du parcours : accents tournants ------------------- */
.choix__carte:nth-child(3n+1){--accent:var(--brique)}
.choix__carte:nth-child(3n+2){--accent:var(--olive)}
.choix__carte:nth-child(3n+3){--accent:var(--azur)}
.choix__carte{--accent:var(--dore)}
.choix__icone{
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--accent) 8%,var(--blanc)),
    color-mix(in srgb,var(--accent) 20%,var(--blanc)));
  color:var(--accent)}
.choix__carte:has(input:checked){
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,var(--blanc))}
.choix__carte:has(input:checked) .choix__icone{
  background:linear-gradient(145deg,var(--accent),var(--accent));color:#fff}
.choix__carte::after{border-color:var(--accent)}

/* --- Jalons du parcours ------------------------------------------------ */
.parcours__progression li.est-active{border-top-color:var(--brique)}
.parcours__progression li.est-faite{border-top-color:var(--olive)}

/* --- Filet doré des surtitres : couleur selon la section --------------- */
.section--sable .surtitre::before{background:var(--brique)}
.section--blanche .surtitre::before{background:var(--olive)}

/* --- Flux lumineux animé du hero (canvas injecté par le script) -------- */
.hero__flux{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
.hero__flux.est-visible{opacity:1}

/* --- Sections sombres : un dégradé plutôt qu'un aplat ------------------ */
.section--sombre{
  background:
    radial-gradient(45rem 30rem at 12% 0%,rgba(47,93,98,.55),transparent 60%),
    radial-gradient(40rem 28rem at 88% 100%,rgba(166,62,40,.34),transparent 62%),
    var(--vert-nuit)}

/* --- Bandeau de confiance : du vert nuit vers le bleu profond ---------- */
.confiance{background:linear-gradient(105deg,var(--vert-nuit) 0%,#264A50 55%,var(--vert-nuit) 100%)}

/* --- Pied de page : filet des quatre accents, signature discrète ------- */
.pied{position:relative}
.pied::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--brique) 0%,var(--dore) 33%,var(--olive) 66%,var(--azur) 100%)}

/* --- Séparateur coloré entre deux sections claires -------------------- */
.section--sable+.section--blanche,.section--blanche+.section--sable{
  border-top:1px solid color-mix(in srgb,var(--dore) 30%,transparent)}

/* ==========================================================================
   24. SÉLECTEUR DE BESOIN DANS LE HERO
   Le parcours de contact commence ici, plutôt que derrière un bouton.
   Un clic ouvre /contact/ avec le besoin déjà coché et le parcours à l'étape 2.
   ========================================================================== */
.besoins{margin-top:clamp(1.8rem,3.5vw,2.4rem)}
.besoins__intitule{
  display:block;font-size:.95rem;font-weight:600;color:var(--encre-douce);
  margin-bottom:.9rem}
.besoins__liste{
  list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
@media(min-width:34rem){.besoins__liste{grid-template-columns:repeat(3,1fr)}}
@media(min-width:62rem){.besoins__liste{gap:.65rem}}
.besoins__liste li{margin:0}

.besoin{
  --accent:var(--dore);
  display:flex;align-items:center;gap:.6rem;height:100%;
  padding:.8rem .85rem;border-radius:var(--rayon-s);text-decoration:none;
  background:var(--blanc);border:1px solid rgba(124,138,130,.26);
  box-shadow:var(--relief-1),var(--liseré);
  font-size:.95rem;font-weight:600;line-height:1.25;color:var(--vert-nuit);
  transition:transform .28s var(--souple),box-shadow .28s var(--souple),
             border-color .28s ease,background .28s ease}
.besoin:hover{
  transform:translateY(-3px);box-shadow:var(--relief-2),var(--liseré);
  border-color:var(--accent);color:var(--vert-nuit);
  background:color-mix(in srgb,var(--accent) 5%,var(--blanc))}
.besoin__ico{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--blanc));
  transition:background .3s ease,color .3s ease,transform .3s var(--souple)}
.besoin:hover .besoin__ico{background:var(--accent);color:#fff;transform:rotate(-6deg)}
.besoins__liste li:nth-child(6n+1) .besoin{--accent:var(--brique)}
.besoins__liste li:nth-child(6n+2) .besoin{--accent:var(--olive)}
.besoins__liste li:nth-child(6n+3) .besoin{--accent:var(--azur)}
.besoins__liste li:nth-child(6n+4) .besoin{--accent:var(--dore-fonce)}
.besoins__liste li:nth-child(6n+5) .besoin{--accent:var(--vert)}
.besoins__liste li:nth-child(6n+6) .besoin{--accent:var(--brique)}
.besoins__autre{
  display:inline-block;margin-top:.9rem;font-size:.95rem;font-weight:600;
  color:var(--vert-profond)}

/* Le hero reçoit plus d'éléments : on resserre les proportions */
@media(min-width:62rem){.hero__interieur{grid-template-columns:1.14fr .86fr}}

/* ==========================================================================
   25. ENGAGEMENTS — trois promesses nommées, composition asymétrique
   ========================================================================== */
.engagements{
  display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:1fr;
  counter-reset:eng}
@media(min-width:48rem){.engagements{grid-template-columns:repeat(3,1fr)}}

.engagement{
  --accent:var(--dore);
  counter-increment:eng;position:relative;
  padding:clamp(1.5rem,3vw,2rem);border-radius:var(--rayon);
  background:var(--blanc);border:1px solid rgba(124,138,130,.16);
  box-shadow:var(--relief-1),var(--liseré);
  transition:transform .35s var(--souple),box-shadow .35s var(--souple)}
.engagement:hover{transform:translateY(-6px);box-shadow:var(--relief-3),var(--liseré)}
/* Décalage vertical : les trois cartes ne sont pas alignées */
@media(min-width:48rem){
  .engagement:nth-child(2){transform:translateY(22px)}
  .engagement:nth-child(2):hover{transform:translateY(16px)}
  .engagement:nth-child(3){transform:translateY(44px)}
  .engagement:nth-child(3):hover{transform:translateY(38px)}
  .engagements{margin-bottom:44px}
}
.engagement::before{
  content:counter(eng,decimal-leading-zero);
  position:absolute;top:clamp(1.5rem,3vw,2rem);right:clamp(1.3rem,2.5vw,1.8rem);
  font-family:var(--serif);font-size:2.2rem;line-height:1;
  color:color-mix(in srgb,var(--accent) 26%,transparent)}
.engagement__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  margin-bottom:1.1rem;color:#fff;
  background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#000));
  box-shadow:var(--relief-1)}
.engagement h3{margin-bottom:.45em;padding-right:2.4rem}
.engagement p{color:var(--encre-douce);font-size:1rem;margin:0}
.engagements>:nth-child(1){--accent:var(--brique)}
.engagements>:nth-child(2){--accent:var(--olive)}
.engagements>:nth-child(3){--accent:var(--azur)}

/* ==========================================================================
   26. SERVICES — un service mis en avant, les autres en grille
   ========================================================================== */
.services-duo{display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:1fr}
@media(min-width:62rem){.services-duo{grid-template-columns:1.06fr 1fr;align-items:stretch}}

.service-phare{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,42vw,440px);border-radius:var(--rayon);overflow:hidden;
  text-decoration:none;color:#fff;box-shadow:var(--relief-2)}
.service-phare img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--souple)}
.service-phare:hover img{transform:scale(1.05)}
.service-phare::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(170deg,rgba(34,48,42,.18) 0%,rgba(34,48,42,.52) 52%,rgba(34,48,42,.88) 100%)}
.service-phare__texte{position:relative;z-index:1;padding:clamp(1.5rem,3vw,2.2rem)}
.service-phare h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.65rem);margin-bottom:.4em}
.service-phare p{color:#DCE5DF;font-size:1rem;margin:0;max-width:34ch}
.service-phare .carte__plus{color:var(--dore-clair);margin-top:.9rem}
.service-phare:hover .carte__plus{color:#fff}

.services-grille{display:grid;gap:clamp(1rem,2vw,1.4rem);grid-template-columns:1fr 1fr}
@media(max-width:30rem){.services-grille{grid-template-columns:1fr}}
.services-grille .carte{padding:clamp(1.15rem,2.4vw,1.5rem)}
.services-grille .carte__icone{width:46px;height:46px;border-radius:13px;margin-bottom:.9rem}
.services-grille .carte h3{font-size:1.08rem}
.services-grille .carte p{font-size:.95rem}

/* ==========================================================================
   27. FINANCEMENT — explication du mécanisme, avec exemple chiffré
   ========================================================================== */
.financement{display:grid;gap:clamp(2rem,4vw,3.2rem);align-items:center}
@media(min-width:62rem){.financement{grid-template-columns:1fr .82fr}}

.calcul{
  background:var(--blanc);border-radius:var(--rayon);overflow:hidden;
  box-shadow:var(--relief-3),var(--liseré);border:1px solid rgba(124,138,130,.16)}
.calcul__entete{
  padding:1rem 1.4rem;background:var(--vert-nuit);color:#fff;
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.calcul__corps{padding:clamp(1.3rem,3vw,1.8rem)}
.calcul__ligne{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--vert-pale)}
.calcul__ligne:last-of-type{border-bottom:0}
.calcul__libelle{font-size:1rem;color:var(--encre-douce)}
.calcul__valeur{font-family:var(--serif);font-size:1.3rem;color:var(--vert-nuit);white-space:nowrap}
.calcul__ligne--total{
  margin-top:.6rem;padding:1.1rem 1.2rem;border-radius:var(--rayon-s);border-bottom:0;
  background:color-mix(in srgb,var(--olive) 10%,var(--blanc))}
.calcul__ligne--total .calcul__libelle{font-weight:600;color:var(--vert-nuit)}
.calcul__ligne--total .calcul__valeur{font-size:1.9rem;color:var(--olive)}
.calcul__note{
  padding:0 clamp(1.3rem,3vw,1.8rem) clamp(1.3rem,3vw,1.8rem);
  font-size:.88rem;color:var(--encre-douce);line-height:1.5}

/* ==========================================================================
   28. AMÉLIORATIONS MOBILE
   ========================================================================== */
@media(max-width:47.99rem){
  /* Grilles de trois en deux colonnes plutôt qu'en pile interminable */
  .grille--3{grid-template-columns:1fr 1fr;gap:.85rem}
  .grille--3>.carte{padding:1.15rem}
  .grille--3 .carte__icone{width:44px;height:44px;border-radius:12px;margin-bottom:.8rem}
  .grille--3 .carte h3{font-size:1.02rem}
  .grille--3 .carte p{font-size:.92rem}
  /* Les cartes à texte long restent sur une colonne */
  .grille--3.grille--large{grid-template-columns:1fr}
  .grille--3.grille--large>.carte{padding:1.5rem}

  /* Décalages désactivés : ils mangent de la hauteur sans rien apporter */
  .engagement:nth-child(2),.engagement:nth-child(3){transform:none}
  .engagements{margin-bottom:0}

  /* Respiration resserrée */
  :root{--section-y:clamp(3rem,9vw,4.2rem)}
  .section--serree{padding-block:clamp(2rem,6vw,2.8rem)}
}

/* Très petits écrans : 320 px doit rester confortable */
@media(max-width:22.5rem){
  :root{--gouttiere:1rem}
  .besoins__liste{grid-template-columns:1fr}
  .grille--3{grid-template-columns:1fr}
  .btn{padding:.8rem 1.1rem;font-size:1rem}
  .groupe-btn{gap:.6rem}
  .groupe-btn .btn{width:100%}
}

/* Aucun débordement horizontal, quelle que soit la largeur */
html,body{max-width:100%}
.bande__fond img,.separateur img{max-width:none}

/* Libellés du sélecteur : césure propre plutôt que coupure brutale */
.besoin span:last-child{hyphens:auto;-webkit-hyphens:auto}

/* Mobile : la pastille du hero passe sous l'image plutôt que de la chevaucher */
@media(max-width:61.99rem){
  .hero__visuel{padding-bottom:0}
  .pastille{
    position:static;margin:1.1rem auto 0;width:fit-content;max-width:100%;
    animation:none;box-shadow:var(--relief-2),var(--liseré)}
}
/* La barre d'action fixe ne doit jamais masquer la fin d'une section */
@media(max-width:61.99rem){
  .section--sombre.appel{padding-bottom:calc(var(--section-y) + 58px)}
}

/* --- Corrections de recette ------------------------------------------- */
/* Le montant du total était à 4,45:1 sur son fond teinté : on assombrit. */
:root{--olive-fonce:#4E6629}   /* 5,9:1 sur le fond du total */
.calcul__ligne--total .calcul__valeur{color:var(--olive-fonce)}

/* Liens du pied de page : zone tactile confortable sur mobile */
@media(max-width:47.99rem){
  .pied li{margin-bottom:.2em}
  .pied li a{display:inline-block;padding-block:.55rem;min-height:44px;
             display:flex;align-items:center}
  .pied__grille{gap:2rem}
}
/* Liens soulignés hors paragraphe : hauteur de touche suffisante */
.lien-souligne{min-height:44px;display:inline-flex;align-items:center}
.besoins__autre{min-height:44px;display:inline-flex;align-items:center}

/* ==========================================================================
   29. BANNIÈRE DE CONSENTEMENT
   Sobre, non bloquante, deux boutons de poids égal comme l'exige la CNIL :
   refuser doit être aussi simple qu'accepter.
   ========================================================================== */
.cookies{
  position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:clamp(.75rem,2vw,1.25rem);z-index:var(--plan-modale);
  width:min(30rem,calc(100% - 1.5rem));
  background:var(--blanc);border-radius:var(--rayon);
  border:1px solid rgba(124,138,130,.2);
  box-shadow:var(--relief-3),var(--liseré);
  padding:clamp(1.1rem,2.6vw,1.5rem);
  transition:transform .5s var(--souple);
  display:grid;gap:1rem}
.cookies.est-visible{transform:translateX(-50%) translateY(0)}
/* Sur grand écran la bannière se range à droite : elle ne masque plus le
   sélecteur de besoin, qui est l'élément de conversion principal. */
@media(min-width:62rem){
  .cookies{left:auto;right:clamp(1rem,2.5vw,2rem);transform:translateY(140%);
           width:min(27rem,38vw)}
  .cookies.est-visible{transform:translateY(0)}
}
.cookies__texte{font-size:.95rem;line-height:1.5;color:var(--encre);margin:0;max-width:52ch}
.cookies__texte a{font-weight:600}
.cookies__actions{display:flex;gap:.65rem;flex-wrap:wrap}
.cookies__actions .btn{min-height:48px;padding:.7rem 1.3rem;font-size:1rem;flex:1 1 auto}
@media(min-width:48rem){.cookies__actions .btn{flex:0 0 auto}}
/* La barre d'action mobile ne doit pas passer devant la bannière */
@media(max-width:61.99rem){.cookies{bottom:calc(58px + .75rem)}}
@media(prefers-reduced-motion:reduce){.cookies{transition:none}}

/* ===================================================================== 30
   AJUSTEMENTS TACTILES — relevés au contrôle mobile (320 → 600 px)
   ===================================================================== */
@media(max-width:37.5rem){
  /* Fil d'Ariane : les liens faisaient 22 px de haut, la moitié de ce qu'un
     pouce vise sans effort. On agrandit la zone de touche sans rien changer
     à l'aspect : le texte reste à sa place, c'est la zone qui grandit. */
  .fil{padding-block:.35rem}
  .fil ol{align-items:center;gap:.25rem}
  .fil a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
  .fil li[aria-current],.fil li:last-child{display:inline-flex;align-items:center;min-height:44px}

  /* Surtitres : 13 px sur un site lu par des personnes âgées, c'est trop peu. */
  .surtitre{font-size:.9rem;letter-spacing:.11em}

  /* Le lien de la bannière cookies est le seul lien en phrase qu'on ne peut
     pas se permettre de rater : on lui donne de la hauteur sans décaler la
     ligne, en aérant l'interligne du paragraphe qui le contient. */
  .cookies__texte{line-height:1.75}
  .cookies__texte a{display:inline-block;padding-block:.55rem}

  /* Toute case ou bouton radio reste confortable à viser, étiquette comprise. */
  .option{min-height:44px}
}

/* ===================================================================== 31
   « À LIRE AUSSI » — renvois contextuels en fin de page
   ===================================================================== */
.lire-aussi{
  margin-top:2.5rem;padding:1.4rem 1.6rem;border-radius:var(--rayon);
  background:var(--creme);border:1px solid var(--sable);
  border-left:3px solid var(--dore);
}
.lire-aussi__titre{
  margin:0 0 .8rem;font-family:var(--sans);font-size:.82rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dore-fonce);
}
.lire-aussi ul{list-style:none;margin:0;padding:0;max-width:none;display:grid;gap:.55rem}
.lire-aussi li{margin:0}
.lire-aussi a{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  color:var(--vert-nuit);font-weight:500;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s var(--souple),color .25s var(--souple);
}
.lire-aussi a::before{content:"›";color:var(--dore);font-size:1.15em;line-height:1}
.lire-aussi a:hover{color:var(--brique);border-bottom-color:currentColor}

/* Le bloc « À lire aussi » est déclaré après les ajustements mobiles :
   sa taille de titre doit donc être reprise ici pour que la règle s'applique. */
@media(max-width:37.5rem){
  .lire-aussi__titre{font-size:.9rem;letter-spacing:.11em}
  .lire-aussi{padding:1.2rem 1.1rem}
}

/* Téléphone et courriel : sur la page Contact et au pied de page, ce sont les
   deux liens qu'on vient chercher. Ils doivent se viser du pouce. */
@media(max-width:37.5rem){
  a[href^="tel:"],a[href^="mailto:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .pied li a{min-height:44px}
}

/* ===================================================================== 32
   DÉCOR DU HERO — masses de lumière sans bord franc
   -------------------------------------------------------------------
   Les trois dégradés étaient dimensionnés en rem — 608 px de large pour le
   premier — à l'intérieur d'une boîte de 58vw. Sur un téléphone cette boîte
   ne fait que 226 px : « overflow:hidden » tranchait le dégradé avant qu'il
   ne soit transparent, d'où l'aplat sable à bords francs en haut à droite.
   Le même défaut existait sur grand écran, plus discret.

   La boîte couvre désormais tout le hero et les dégradés sont exprimés en
   pourcentages, avec des centres placés de façon que la couleur s'éteigne
   avant d'atteindre un bord — sauf à droite, où le bord est celui de la
   page et ne se voit donc pas.
   ===================================================================== */
.hero::before{
  inset:0;width:auto;height:auto;max-width:none;max-height:none;
  background:
    radial-gradient(56% 44% at 86% 38%, rgba(210,180,137,.40), transparent 72%),
    radial-gradient(48% 38% at 14% 86%, rgba(95,122,51,.13),  transparent 70%),
    radial-gradient(44% 34% at 94% 84%, rgba(166,62,40,.11),  transparent 70%);
}

/* ===================================================================== 33
   LE PARCOURS D'ÉVALUATION SUR L'ACCUEIL
   -------------------------------------------------------------------
   Même parcours que la page Contact, dans la colonne du hero : plus
   étroite, donc deux colonnes de choix, des titres plus courts et des
   cartes plus compactes. Rien n'est réécrit, seules les tailles changent.
   ===================================================================== */
.choix--2{grid-template-columns:1fr}
@media(min-width:30rem){.choix--2{grid-template-columns:repeat(2,1fr)}}

.parcours--accueil{max-width:none;margin-top:clamp(1.8rem,3.5vw,2.4rem)}
.parcours--accueil .parcours__progression{
  margin-bottom:1.6rem;gap:.5rem;grid-template-columns:repeat(4,1fr);
}
.parcours--accueil .parcours__progression li{
  padding-top:.6rem;font-size:.78rem;line-height:1.25;
}
.parcours--accueil .parcours__progression li span{font-size:.92rem;margin-bottom:.05em}
.parcours--accueil .parcours__etape legend{font-size:clamp(1.25rem,2.6vw,1.6rem);margin-bottom:.35rem}
.parcours--accueil .parcours__etape .aide{margin-bottom:1rem;font-size:.95rem}
.parcours--accueil .choix{gap:.6rem}
.parcours--accueil .choix__carte{min-height:58px;padding:.75rem .85rem;gap:.7rem}
.parcours--accueil .choix__icone{width:34px;height:34px;border-radius:10px}
.parcours--accueil .choix__icone svg{width:18px;height:18px}
.parcours--accueil .parcours__pied{margin-top:1.6rem;padding-top:1.2rem}
.parcours--accueil .champ{margin-bottom:.9rem}
.parcours__secours{margin:1rem 0 0;font-size:.95rem;color:var(--encre-douce)}
.parcours__secours a{color:var(--vert-profond);font-weight:600}

/* Sur un écran étroit, les quatre jalons tiennent en deux lignes de deux. */
@media(max-width:30rem){
  .parcours--accueil .parcours__progression{grid-template-columns:repeat(2,1fr);gap:.6rem}
  .parcours--accueil .parcours__progression li{font-size:.82rem}
  .parcours--accueil .parcours__pied .btn{flex:1 1 100%;justify-content:center}
}

/* « :has() » est récent : on double l'état coché par une classe posée en
   JavaScript, pour les navigateurs anciens de nos visiteurs. */
.choix__carte.est-cochee{border-color:var(--vert-nuit);background:var(--vert-pale);box-shadow:var(--relief-2)}
.choix__carte.est-cochee .choix__icone{background:linear-gradient(145deg,var(--dore-clair),var(--dore));color:#fff}
.choix__carte.est-cochee::after{transform:rotate(45deg) scale(1)}

/* ===================================================================== 34
   CONFIRMATION APRÈS ENVOI, SANS QUITTER LA PAGE
   ===================================================================== */
/* L'attribut « hidden » doit l'emporter : plusieurs de nos classes posent un
   display (grid, inline-flex) qui le neutralisait silencieusement. */
[hidden]{display:none!important}

.confirmation{
  background:var(--blanc);border:1px solid var(--sable);border-radius:var(--rayon);
  padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--relief-2),var(--liseré);
  animation:entreEtape .5s var(--souple);
}
.confirmation:focus{outline:none}
.confirmation:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.confirmation__sceau{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--olive-fonce);color:#fff;margin-bottom:1rem;
}
.confirmation h2{font-size:clamp(1.35rem,3vw,1.7rem);margin:0 0 .6rem;color:var(--vert-nuit)}
.confirmation p{margin:0 0 .8rem;color:var(--encre-douce)}
.confirmation__appel{color:var(--encre)}
.confirmation .btn{margin-top:.4rem}
@media(max-width:30rem){.confirmation .btn{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.confirmation{animation:none}}

/* Message d'aide neutre, dans la zone qui sert d'ordinaire aux erreurs. */
.erreur-champ--neutre{color:var(--encre-douce)}