/* ==================================================================
   PERENNA — système visuel
   Esthétique du souvenir : couleurs sobres et claires, lavis pastel.
   Conception à partir du mobile. Accessibilité comme contrainte de départ.
   ================================================================== */

:root{
  /* fonds et surfaces */
  --fond:#FCFAF6;
  --carte:#FFFFFF;
  --carte-2:#F6F2EA;

  /* encres — jamais de noir */
  --encre:#3D473D;
  --encre-douce:#6E756B;
  --trait:#E7E1D6;

  /* action */
  --accent:#7E8E6F;
  --accent-fonce:#68775A;
  --accent-profond:#55634A;
  --accent-clair:#D8E3CE;

  /* lavis pastel */
  --rose:#EFD6D3;
  --ciel:#D3E0EA;
  --amande:#D8E3CE;
  --paille:#F0E5C8;
  --lilas:#DED4E8;

  --alerte:#B07D63;

  --rayon:16px;
  --ombre:0 1px 2px rgba(61,71,61,.04), 0 10px 30px rgba(61,71,61,.05);
  --mesure:64ch;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fond:#1C1F1B;
    --carte:#242822;
    --carte-2:#2B302A;
    --encre:#EDE8DE;
    --encre-douce:#AEB4A9;
    --trait:#363B34;
    --accent:#A3B394;
    --accent-fonce:#BACBAB;
    --accent-profond:#D3E0C4;
    --accent-clair:#39422F;
    --rose:#4A3A38;
    --ciel:#33414A;
    --amande:#38452F;
    --paille:#4A4430;
    --lilas:#403848;
    --alerte:#D19C80;
    --ombre:0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --fond:#1C1F1B; --carte:#242822; --carte-2:#2B302A;
  --encre:#EDE8DE; --encre-douce:#AEB4A9; --trait:#363B34;
  --accent:#A3B394; --accent-fonce:#BACBAB; --accent-profond:#D3E0C4; --accent-clair:#39422F;
  --rose:#4A3A38; --ciel:#33414A; --amande:#38452F; --paille:#4A4430; --lilas:#403848;
  --alerte:#D19C80;
}

/* ------------------------------------------------------------------
   Base
   ------------------------------------------------------------------ */
*{box-sizing:border-box}
/* La racine est portée à 18 px : toute l'échelle « rem » du site
   s'ancre ainsi sur le plancher de lisibilité, et plus sur les
   16 px par défaut du navigateur. */
html{font-size:112.5%; -webkit-text-size-adjust:100%; scroll-behavior:smooth}
[id]{scroll-margin-top:20px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{transition:none!important; animation:none!important}}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:1rem;              /* 18 px, plancher d'accessibilité */
  line-height:1.65;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0 0 .5em;
  text-transform:none;
}
h1{font-size:clamp(2rem,6.2vw,3.2rem)}
h2{font-size:clamp(1.55rem,4.2vw,2.3rem);margin-bottom:.55em}
h3{font-size:clamp(1.12rem,2.6vw,1.3rem);font-weight:500}

p{margin:0 0 1.1em;max-width:var(--mesure)}
strong{font-weight:600}

a{color:var(--accent-fonce);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

img{max-width:100%;height:auto;display:block}

.enveloppe{max-width:1080px;margin:0 auto;padding:0 20px}
@media (min-width:700px){.enveloppe{padding:0 32px}}

.section{padding:56px 0;border-top:1px solid var(--trait)}
@media (min-width:700px){.section{padding:88px 0}}
.section:first-of-type{border-top:0}

.chapeau{
  font-size:1rem;letter-spacing:.1em;color:var(--encre-douce);
  margin:0 0 1.1em;font-weight:500;
}
.discret{color:var(--encre-douce);font-size:1rem}
.intro{font-size:1.14rem;max-width:48ch}
.prix-appel{
  font-family:"Newsreader",Georgia,serif;font-size:2.1rem;line-height:1.1;
  margin:0 0 .5em;color:var(--encre);
}
.prix-appel .unite{font-size:1.05rem;font-family:"Inter",sans-serif;color:var(--encre-douce)}
.centre{text-align:center}
.centre p{margin-left:auto;margin-right:auto}

/* ------------------------------------------------------------------
   Lavis pastel — l'identité visuelle
   ------------------------------------------------------------------ */
.lavis{
  position:relative;
  background:
    radial-gradient(62% 54% at 12% 18%, var(--rose), transparent 68%),
    radial-gradient(54% 48% at 88% 12%, var(--ciel), transparent 70%),
    radial-gradient(58% 52% at 72% 88%, var(--amande), transparent 70%),
    radial-gradient(46% 42% at 32% 92%, var(--paille), transparent 72%),
    var(--fond);
  isolation:isolate;
}
.lavis::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
:root[data-theme="dark"] .lavis::after,
:root:not([data-theme="light"]) .lavis::after{mix-blend-mode:screen;opacity:.5}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .lavis::after{mix-blend-mode:multiply;opacity:1}
}

.lavis-doux{
  background:
    radial-gradient(70% 60% at 85% 10%, var(--amande), transparent 72%),
    radial-gradient(55% 50% at 10% 90%, var(--rose), transparent 74%),
    var(--fond);
}

/* ------------------------------------------------------------------
   Bandeau Toussaint
   ------------------------------------------------------------------ */
.bandeau{
  display:none;
  background:var(--paille);
  color:#5C5334;
  padding:14px 20px;
  font-size:1rem;
  line-height:1.5;
  text-align:center;
  border-bottom:1px solid rgba(92,83,52,.16);
}
.bandeau.visible{display:block}
.bandeau strong{font-weight:600}
:root[data-theme="dark"] .bandeau,
:root:not([data-theme="light"]) .bandeau{background:var(--paille);color:#F0E5C8}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .bandeau{background:#F0E5C8;color:#5C5334}
}

/* ------------------------------------------------------------------
   En-tête
   ------------------------------------------------------------------ */
.tete{padding:22px 0 0}
.tete > .enveloppe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.marque{
  display:inline-flex;align-items:center;gap:11px;
  font-family:"Newsreader",Georgia,serif;font-size:1.4rem;
  color:var(--encre);text-decoration:none;
}
.marque svg{width:34px;height:34px;flex:0 0 34px}

/* ------------------------------------------------------------------
   Actions
   ------------------------------------------------------------------ */
.action{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:56px;                      /* zone tactile confortable */
  padding:16px 34px;
  background:var(--accent-fonce);color:#fff;
  border:0;border-radius:999px;
  font-family:inherit;font-size:1.06rem;font-weight:500;line-height:1.2;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--ombre);
  transition:background .15s ease, transform .15s ease;
}
.action:hover{background:var(--accent-profond);transform:translateY(-1px);text-decoration:none}
.action:active{transform:translateY(0)}
.action.pleine{width:100%}
.action.creux{background:transparent;color:var(--accent-fonce);border:1.5px solid var(--accent);box-shadow:none}
.action.creux:hover{background:var(--accent-clair)}
:root[data-theme="dark"] .action,
:root:not([data-theme="light"]) .action{color:#1C1F1B}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .action{color:#fff}
}
.action.creux{color:var(--accent-fonce)}

.retour{
  display:inline-flex;align-items:center;gap:.5em;min-height:48px;
  background:none;border:0;padding:12px 0;
  color:var(--encre-douce);font-family:inherit;font-size:1rem;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}

/* ------------------------------------------------------------------
   Emplacements photo — à remplacer par vos images
   ------------------------------------------------------------------ */
.photo{
  border-radius:var(--rayon);
  overflow:hidden;
  border:1.5px dashed var(--accent);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:28px 22px;
  color:var(--encre-douce);
  background:
    radial-gradient(60% 55% at 25% 25%, var(--rose), transparent 70%),
    radial-gradient(55% 50% at 80% 75%, var(--amande), transparent 72%),
    var(--carte-2);
}
.photo[data-format="paysage"]{aspect-ratio:3/2}
.photo[data-format="carre"]{aspect-ratio:1/1}
.photo .indic{max-width:34ch;font-size:1rem;line-height:1.5}
.photo .indic b{display:block;font-weight:600;color:var(--encre);margin-bottom:6px;font-size:1rem}
.photo .indic code{
  display:inline-block;margin-top:8px;padding:2px 8px;border-radius:6px;
  background:var(--carte);font-size:.84rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ------------------------------------------------------------------
   Cartes et grilles
   ------------------------------------------------------------------ */
.carte{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);
  padding:26px;box-shadow:var(--ombre);
}
@media (min-width:700px){.carte{padding:34px}}

.duo{display:grid;grid-template-columns:1fr;gap:28px}
@media (min-width:820px){.duo{grid-template-columns:1fr 1fr;gap:34px}}

.quatre{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:600px){.quatre{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.quatre{grid-template-columns:repeat(4,1fr)}}

/* ------------------------------------------------------------------
   Sélecteur de rythme
   Le nombre de passages par an est l'information principale : il est
   écrit en grand, et les cinq rythmes sont visibles d'un seul coup
   d'œil. Aucun prix n'y figure : la comparaison de coût par passage
   n'est jamais induite, et une seule formule est détaillée à la fois.
   ------------------------------------------------------------------ */
.rythmes{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin:0 0 28px;padding:0;list-style:none;
}
.rythmes > button{
  min-height:104px;padding:16px 10px 18px;
  background:var(--carte);border:1.5px solid var(--trait);border-radius:var(--rayon);
  font-family:inherit;color:var(--encre-douce);cursor:pointer;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  transition:border-color .15s ease, background .15s ease;
}
.rythmes > button:last-child{grid-column:1 / -1}
.rythmes .nb{
  font-family:"Newsreader",Georgia,serif;font-size:2.6rem;line-height:1;
  color:var(--encre);font-weight:400;
}
.rythmes .unite{font-size:1rem;line-height:1.25}
.rythmes > button:hover{border-color:var(--accent)}
.rythmes > button[aria-checked="true"]{
  background:var(--accent-clair);border-color:var(--accent);border-width:2px;color:var(--encre);
}
.rythmes > button[aria-checked="true"] .nb{color:var(--accent-profond)}
@media (min-width:680px){
  .rythmes{grid-template-columns:repeat(5,1fr)}
  .rythmes > button:last-child{grid-column:auto}
}

.formule-detail{
  background:var(--carte);border:1.5px solid var(--accent);border-radius:var(--rayon);
  padding:30px;box-shadow:var(--ombre);max-width:560px;
}
.avantage{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--paille);color:#5C5334;
  border-bottom:1px solid rgba(92,83,52,.22);
  border-radius:14px 14px 0 0;
  padding:16px 22px;font-size:1rem;line-height:1.5;max-width:none;
}
.avantage svg{display:block;margin-top:1px}
.avantage strong{font-weight:600}
.formule-detail > .avantage{margin:-30px -30px 24px;padding:16px 26px}
.carte > .avantage{margin:-26px -26px 22px}
@media (min-width:700px){.carte > .avantage{margin:-34px -34px 26px;padding:16px 30px}}
:root[data-theme="dark"] .avantage,
:root:not([data-theme="light"]) .avantage{
  background:var(--paille);color:#F3EAD0;border-bottom-color:rgba(243,234,208,.2);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .avantage{background:#F0E5C8;color:#5C5334}
}

.formule-detail .nom{font-size:1rem;letter-spacing:.1em;color:var(--encre-douce);display:block;margin-bottom:10px}
.formule-detail .prix{font-family:"Newsreader",serif;font-size:3rem;line-height:1;margin:0}
.formule-detail .prix span{font-size:1.05rem;font-family:"Inter",sans-serif;color:var(--encre-douce)}
.formule-detail .facturation{color:var(--encre-douce);font-size:1rem;margin:10px 0 22px}
.formule-detail ul{list-style:none;padding:0;margin:0 0 26px}
.formule-detail li{position:relative;padding-left:26px;margin-bottom:.6em;color:var(--encre-douce);font-size:1rem}
.formule-detail li::before{
  content:"";position:absolute;left:0;top:.58em;width:9px;height:9px;border-radius:50%;
  background:var(--accent);
}

/* ------------------------------------------------------------------
   Étapes
   ------------------------------------------------------------------ */
.etape{padding-top:20px;border-top:2px solid var(--trait)}
.etape .num{font-family:"Newsreader",serif;font-size:1.7rem;color:var(--accent-fonce);line-height:1}
.etape h3{margin:.3em 0 .25em}
.etape p{font-size:1rem;color:var(--encre-douce);margin:0}

/* ------------------------------------------------------------------
   Garanties
   ------------------------------------------------------------------ */
.garantie{display:flex;gap:16px;align-items:flex-start}
.garantie .pastille{
  flex:0 0 44px;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.garantie h3{margin:0 0 .3em;font-size:1.06rem}
.garantie p{font-size:1rem;color:var(--encre-douce);margin:0}

/* ------------------------------------------------------------------
   Questions
   ------------------------------------------------------------------ */
.question{border-bottom:1px solid var(--trait)}
.question summary{
  cursor:pointer;padding:22px 0;min-height:56px;
  font-family:"Newsreader",Georgia,serif;font-size:1.2rem;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.question summary::-webkit-details-marker{display:none}
.question summary::after{content:"+";color:var(--accent-fonce);font-size:1.5rem;line-height:1;flex:0 0 auto}
.question[open] summary::after{content:"\2013"}
.question .reponse{padding:0 0 24px;color:var(--encre-douce)}
.question .reponse p{margin-bottom:.8em}
.question .reponse p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------
   Formulaire
   ------------------------------------------------------------------ */
.champ{display:block;margin-bottom:24px;max-width:520px}
.champ > span{display:block;font-size:1rem;margin-bottom:8px;font-weight:500}
.champ .aide{display:block;font-size:1rem;color:var(--encre-douce);font-weight:400;margin-top:2px}
input[type=text],input[type=email],input[type=tel]{
  width:100%;min-height:56px;padding:15px 16px;
  border:1.5px solid var(--trait);border-radius:10px;
  font-family:inherit;font-size:1.05rem;
  background:var(--carte);color:var(--encre);
}
input::placeholder{color:var(--encre-douce);opacity:.75}
input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

.mandat{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--carte-2);border-radius:12px;padding:18px 20px;
  margin:6px 0 26px;max-width:520px;
}
.mandat input[type=checkbox]{
  /* Case redessinée : la zone tactile fait 48 px, la case en fait 26.
     Les marges négatives évitent que l'encadré n'enfle d'autant. */
  appearance:none;-webkit-appearance:none;
  flex:0 0 48px;width:48px;height:48px;margin:-11px -11px -11px -12px;
  background:none;border:0;padding:0;cursor:pointer;
  display:grid;place-content:center;
}
.mandat input[type=checkbox]::before{
  content:"";width:26px;height:26px;border-radius:7px;
  border:1.5px solid var(--accent);background:var(--carte);
}
.mandat input[type=checkbox]:checked::before{
  border-color:var(--accent-fonce);
  background:var(--accent-fonce) center/17px 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .mandat input[type=checkbox]:checked::before,
:root:not([data-theme="light"]) .mandat input[type=checkbox]:checked::before{
  background:var(--accent-fonce) center/17px 17px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F1B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .mandat input[type=checkbox]:checked::before{
    background:var(--accent-fonce) center/17px 17px no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E");
  }
}
.mandat label{font-size:1rem;line-height:1.5}

.erreur{
  display:none;max-width:520px;margin:0 0 20px;padding:14px 16px;
  border-left:3px solid var(--alerte);background:var(--carte-2);
  color:var(--encre);font-size:1rem;border-radius:0 8px 8px 0;
}
.erreur.visible{display:block}

/* ------------------------------------------------------------------
   Récapitulatif
   ------------------------------------------------------------------ */
.recap{
  background:var(--carte);border:1.5px solid var(--accent);border-radius:var(--rayon);
  padding:24px;margin-bottom:26px;max-width:560px;box-shadow:var(--ombre);
}
@media (min-width:700px){.recap{padding:30px}}
.recap-nom{
  display:block;font-size:1rem;letter-spacing:.1em;
  color:var(--encre-douce);margin-bottom:8px;
}
.recap h2{font-size:1.4rem;margin:0 0 .2em}
.recap-rythme{color:var(--encre-douce);font-size:1rem;margin:0 0 20px}
.recap-inclus{list-style:none;padding:0;margin:0 0 22px}
.recap-inclus li{
  position:relative;padding-left:28px;margin-bottom:.55em;
  font-size:1rem;line-height:1.5;color:var(--encre);
}
.recap-inclus li:last-child{margin-bottom:0}
.recap-inclus li::before{
  content:"";position:absolute;left:2px;top:.52em;width:10px;height:10px;
  border-radius:50%;background:var(--accent);
}
.recap-montant{border-top:1px solid var(--trait);padding-top:16px}
.recap-montant div{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;
  padding:5px 0;font-size:1rem;
}
.recap-montant div span:first-child{color:var(--encre-douce)}
.recap-montant .principal{font-size:1.1rem}
.recap-montant .principal strong{font-weight:600;white-space:nowrap}
@media (max-width:400px){
  .recap-montant div{flex-direction:column;gap:0}
}

/* ------------------------------------------------------------------
   Écriteau pédagogique sur le montant, à l'étape 3
   ------------------------------------------------------------------ */
.pedago{
  background:var(--carte-2);border-left:3px solid var(--accent);
  border-radius:0 var(--rayon) var(--rayon) 0;
  padding:22px 24px;margin:0 0 30px;max-width:560px;
}
.pedago h2{font-size:1.2rem;margin:0 0 .45em}
.pedago p{margin:0 0 .7em;font-size:1rem;color:var(--encre-douce);max-width:none}
.pedago p:last-child{margin-bottom:0}
.pedago strong{color:var(--encre);font-weight:600}

/* ------------------------------------------------------------------
   Réassurance au contact du bouton de paiement
   ------------------------------------------------------------------ */
.avant-bouton{
  background:var(--carte-2);border-radius:var(--rayon);
  padding:20px 22px;margin:0 0 18px;max-width:520px;
}
.avant-bouton ul{list-style:none;padding:0;margin:0}
.avant-bouton li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:1rem;line-height:1.5;margin-bottom:.7em;
}
.avant-bouton li:last-child{margin-bottom:0}
.avant-bouton .coche{
  flex:0 0 22px;width:22px;height:22px;margin-top:2px;
  border-radius:50%;background:var(--accent-clair);
  display:flex;align-items:center;justify-content:center;
}
.avant-bouton strong{font-weight:600}
.sous-bouton{
  max-width:520px;margin:14px 0 0;font-size:1rem;color:var(--encre-douce);
}

/* ------------------------------------------------------------------
   Accès rapide dans l'en-tête
   ------------------------------------------------------------------ */
.nav-tete{display:flex;gap:18px;align-items:center}
.nav-tete a{
  min-height:48px;display:inline-flex;align-items:center;
  font-size:1rem;color:var(--encre-douce);
  text-decoration:underline;text-underline-offset:3px;
}
.nav-tete a:hover{color:var(--accent-fonce)}

/* ------------------------------------------------------------------
   Bandeau de consentement à la mesure
   N'apparaît que si une balise est configurée dans CONFIG.
   ------------------------------------------------------------------ */
.consentement{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--carte);border-top:1px solid var(--trait);
  box-shadow:0 -8px 30px rgba(61,71,61,.10);
  padding:18px 20px;
}
.consentement-corps{
  max-width:1080px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
}
.consentement p{margin:0;font-size:1rem;color:var(--encre-douce);max-width:62ch}
.consentement-actions{display:flex;flex-wrap:wrap;gap:12px}
.consentement-actions .action{padding:14px 26px;font-size:1rem}
@media (max-width:620px){
  .consentement-actions{width:100%}
  .consentement-actions .action{flex:1 1 140px}
}

/* ------------------------------------------------------------------
   Fil d'étapes du tunnel
   Les étapes franchies sont cliquables pour revenir en arrière.
   ------------------------------------------------------------------ */
.etapes{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 34px;padding:0;list-style:none;
}
.etapes li{display:flex;align-items:center}
.etapes li + li::before{
  content:"";width:18px;height:1.5px;background:var(--trait);margin:0 4px;flex:0 0 18px;
}
.etapes a, .etapes > li > span{
  display:inline-flex;align-items:center;gap:9px;
  min-height:48px;padding:8px 16px 8px 9px;border-radius:999px;
  text-decoration:none;color:var(--encre-douce);font-size:1rem;
  border:1.5px solid transparent;
}
.etapes .pas{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--carte-2);color:var(--encre-douce);
  font-size:1rem;font-weight:600;line-height:1;
}
.etapes .faite a{color:var(--accent-fonce);border-color:var(--trait);background:var(--carte)}
.etapes .faite a:hover{border-color:var(--accent);text-decoration:none}
.etapes .faite .pas{background:var(--accent-clair);color:var(--accent-fonce)}
.etapes .ici > span{
  background:var(--accent-clair);border-color:var(--accent);color:var(--encre);font-weight:500;
}
.etapes .ici .pas{background:var(--accent);color:var(--carte)}
@media (max-width:560px){
  /* Sur téléphone, seule l'étape en cours est nommée : le fil tient
     sur une ligne au lieu de se replier. */
  .etapes li:not(.ici) .nom{display:none}
  .etapes li:not(.ici) > span,
  .etapes li:not(.ici) > a{padding:8px 9px}
}

/* ------------------------------------------------------------------
   Les galeries : deux zones distinctes, chacune défilante
   ------------------------------------------------------------------ */
.vignette-image{
  width:100%;border-radius:var(--rayon);border:1px solid var(--trait);
  object-fit:cover;
}
.vignette-image[data-format="carre"]{aspect-ratio:1/1}
.vignette-image[data-format="paysage"]{aspect-ratio:3/2}

.galerie + .galerie{margin-top:40px}
.galerie-titre{font-size:1.2rem;margin:0 0 .3em}
.galerie-intro{margin:0 0 20px;color:var(--encre-douce);max-width:56ch}
.galerie-liste{list-style:none;padding:0;margin:0;max-width:var(--mesure)}
.galerie-liste li{
  position:relative;padding:0 0 0 26px;margin-bottom:.7em;
  color:var(--encre-douce);font-size:1rem;line-height:1.55;
}
.galerie-liste li:last-child{margin-bottom:0}
.galerie-liste li::before{
  content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
  border-radius:50%;background:var(--accent);
}
.galerie-liste strong{color:var(--encre);font-weight:600}

.piste{
  display:flex;gap:18px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;margin:0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.piste::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.piste{scroll-behavior:auto}}

.carte-produit{flex:0 0 80%;scroll-snap-align:start;margin:0;min-width:0}
@media (min-width:620px){.carte-produit{flex-basis:46%}}
@media (min-width:980px){
  .piste{overflow:visible}
  .carte-produit{flex:1 1 0}
}
.carte-produit h4{
  font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:1.1rem;
  margin:14px 0 .2em;color:var(--encre);
}
.carte-produit p{margin:0;font-size:1rem;color:var(--encre-douce);max-width:none}

.commande{display:flex;align-items:center;gap:10px;margin-top:18px}
/* Au delà de 980 px la piste ne défile plus : la barre disparaît en
   feuille de style, et non par un calcul fait après coup qui
   modifiait la hauteur de la page en cours de défilement. */
@media (min-width:980px){.commande{display:none}}
.fleche{
  flex:0 0 48px;width:48px;height:48px;border-radius:50%;
  background:var(--carte);border:1.5px solid var(--trait);color:var(--accent-fonce);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .15s ease, opacity .15s ease;
}
.fleche:hover:not([disabled]){border-color:var(--accent)}
.fleche[disabled]{opacity:.3;cursor:default}
.pastilles{display:flex;flex:1;justify-content:center;gap:2px}
.pastilles button{
  width:44px;height:48px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.pastilles button::before{
  content:"";width:9px;height:9px;border-radius:999px;background:var(--trait);
  transition:width .2s ease, background .2s ease;
}
.pastilles button[aria-current="true"]::before{width:26px;background:var(--accent)}

/* ------------------------------------------------------------------
   Repli : le détail à la demande, pour alléger la page
   ------------------------------------------------------------------ */
.plus{margin:18px 0 0;max-width:var(--mesure)}
.plus > summary{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;
  list-style:none;cursor:pointer;
  color:var(--accent-fonce);font-size:1rem;
  text-decoration:underline;text-underline-offset:3px;
}
.plus > summary::-webkit-details-marker{display:none}
.plus > summary::after{
  content:"";width:9px;height:9px;flex:0 0 9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.plus[open] > summary::after{transform:translateY(2px) rotate(225deg)}
.plus > summary:hover{text-decoration-thickness:2px}
.plus .corps{padding:6px 0 4px;color:var(--encre-douce)}
.plus .corps > :last-child{margin-bottom:0}
.plus .corps ul{padding-left:1.2em;margin:0 0 1em}
.plus .corps li{margin-bottom:.4em}

/* ------------------------------------------------------------------
   Demande de rappel
   ------------------------------------------------------------------ */
.conseiller{
  border-top:1px solid var(--trait);
  background:
    radial-gradient(60% 70% at 88% 20%, var(--ciel), transparent 72%),
    radial-gradient(50% 60% at 8% 85%, var(--amande), transparent 74%),
    var(--fond);
  padding:52px 0;
}
.conseiller-corps{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media (min-width:880px){.conseiller-corps{grid-template-columns:1.1fr 1fr;gap:48px}}
.conseiller h2{font-size:clamp(1.35rem,3vw,1.75rem);margin-bottom:.35em}
.conseiller p{margin:0;color:var(--encre-douce);font-size:1rem}
.conseiller-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.conseiller-form input{flex:1 1 220px;min-width:0;background:var(--carte)}
.conseiller-form .action{flex:0 0 auto;white-space:nowrap}
.conseiller-form .etat{flex:1 1 100%;font-size:1rem;margin:0}
.conseiller-form .etat.alerte{color:var(--alerte)}
.conseiller-form .etat.confirme{color:var(--accent-fonce);font-size:1.05rem}
.conseiller-form .mention{flex:1 1 100%;margin:0;font-size:1rem;color:var(--encre-douce)}

/* ------------------------------------------------------------------
   Pied de page
   ------------------------------------------------------------------ */
footer{border-top:1px solid var(--trait);padding:40px 0 64px;font-size:1rem;color:var(--encre-douce)}
footer nav{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px}
footer nav a{min-height:48px;display:inline-flex;align-items:center}

/* ------------------------------------------------------------------
   Page de contenu (légales, aide)
   ------------------------------------------------------------------ */
.contenu{max-width:70ch}
.contenu h2{margin-top:1.8em}
.contenu h3{margin-top:1.5em}
.contenu ul{padding-left:1.3em}
.contenu li{margin-bottom:.5em;color:var(--encre-douce)}
.aremplir{
  background:var(--carte-2);border-left:3px solid var(--alerte);
  padding:4px 10px;border-radius:0 6px 6px 0;color:var(--encre);
}

/* ------------------------------------------------------------------
   Fil vertical
   Même contenu qu'une rangée d'étapes, mais une autre mise en page :
   le visiteur ne croit pas revenir sur un bloc déjà vu.
   ------------------------------------------------------------------ */
.fil{list-style:none;margin:0;padding:0;max-width:var(--mesure)}
.fil li{position:relative;padding:0 0 26px 46px}
.fil li:last-child{padding-bottom:0}
.fil li::before{
  content:"";position:absolute;left:14px;top:30px;bottom:2px;width:2px;background:var(--trait);
}
.fil li:last-child::before{display:none}
.fil .jalon{
  position:absolute;left:0;top:2px;width:30px;height:30px;border-radius:50%;
  background:var(--accent-clair);color:var(--accent-profond);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:600;line-height:1;
}
.fil h3{margin:0 0 .2em;font-size:1.12rem}
.fil p{margin:0;font-size:1rem;color:var(--encre-douce)}

/* ------------------------------------------------------------------
   Les deux natures de fleurissement
   Ce qui reste et ce qui s'ajoute sont deux zones, pas deux onglets.
   La première est encadrée comme un acquis, la seconde reste ouverte
   comme un choix renouvelé. Un liseré commun rappelle qu'elles
   relèvent du même abonnement.
   ------------------------------------------------------------------ */
.zone{border-left:3px solid var(--accent);padding-left:22px}
@media (min-width:700px){.zone{padding-left:28px}}
.zone-acquis{
  background:var(--carte);border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:0 var(--rayon) var(--rayon) 0;
  padding:26px 24px;box-shadow:var(--ombre);
}
@media (min-width:700px){.zone-acquis{padding:32px 34px}}
.zone-marque{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-clair);color:var(--accent-profond);
  border-radius:999px;padding:6px 14px;font-size:1rem;font-weight:500;
  margin:0 0 14px;
}
.lien-zones{
  margin:26px 0 0;padding-left:22px;border-left:3px solid var(--trait);
  color:var(--encre-douce);font-size:1rem;max-width:var(--mesure);
}

/* ------------------------------------------------------------------
   Utilitaires
   ------------------------------------------------------------------ */
.pile-24 > * + *{margin-top:24px}
.pile-16 > * + *{margin-top:16px}
.mt-32{margin-top:32px}
.mb-0{margin-bottom:0}
.nowrap{white-space:nowrap}
.invisible{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Mention « Illustration » sous les photographies d'ambiance */
.cadre-illustration{position:relative;display:block}
.cadre-illustration small{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,.88);
  color:var(--encre-douce);padding:2px 10px;border-radius:999px;font-size:.78rem;line-height:1.5}
.champ select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--trait,#cfcac0);
  border-radius:8px;background:#fff;color:inherit}

/* Formulaire de demande de rappel : une seule colonne, bouton centré dessous */
#formulaire{max-width:520px}
#formulaire .action.pleine{display:block;margin-inline:auto}
#formulaire > p{text-align:center}

/* Bouton d'envoi : centré sous le formulaire, plus étroit que les champs */
#formulaire .action.pleine{width:auto;min-width:280px;max-width:100%;padding-inline:40px}


/* Bandeau de consentement : « Refuser » en texte souligné avec croix, en haut à droite */
.consentement{padding-top:40px}
.consentement-refus{
  position:absolute;top:10px;right:16px;
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:6px 4px;cursor:pointer;
  font:inherit;font-size:1rem;color:var(--encre);
  text-decoration:underline;text-underline-offset:3px;
}
.consentement-refus:hover{color:var(--accent-profond)}
.consentement-refus svg{flex:0 0 auto}
.info-rappel{margin:0 0 20px;font-size:1rem;color:var(--encre-douce);line-height:1.5}