/* =========================================================================
   COOL CONDUITE — V20
   Version épurée : tout ce qui décorait sans informer a été retiré.
   Plus de surlignage de titre, plus de badges « populaire », plus de
   pastilles numérotées colorées, plus de pictogrammes d'ornement, plus
   d'ombres flottantes, plus de plaque posée sur la photo.
   Une seule famille de bleu, du plus sombre au plus clair. La hiérarchie
   repose sur la typographie, les filets et le rythme des sections.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root{
  /* Bleus : une même famille, du plus profond au plus vif.
     Saturation relevée par rapport à la version précédente, qui tirait
     sur le gris. Tous les couples texte/fond passent le seuil AA. */
  --encre:#08193a;        /* bleu nuit : pied de page, section parcours */
  --ardoise:#0f2e63;      /* bleu roi sombre : héros, appels à l'action */
  --ardoise-line:#26497f;
  --azur:#1256cb;         /* bleu vif : boutons, prix, liens */
  --azur-fonce:#0e45a3;

  --paper:#f5f8fd;
  --paper-2:#e8eef8;
  --white:#ffffff;

  --rule:#d4dff0;
  --brume:#e9f0fc;        /* bleu très pâle : en-têtes de carte */

  --ink:#08193a;
  --ink-2:#48587a;
  --ink-3:#5e6d8a;
  --on-dark:#e7eef9;
  --on-dark-2:#a9bbda;

  --display:'Archivo','Public Sans',ui-sans-serif,system-ui,sans-serif;
  --body:'Public Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --container:1220px;
  --gutter:clamp(18px,4vw,48px);
  --radius:14px;          /* cartes */
  --radius-sm:10px;       /* boutons, champs */
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);font-size:17px;line-height:1.62;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;
  letter-spacing:-.03em;line-height:1.06;margin:0;text-wrap:balance;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
s,del{text-decoration-thickness:1px}
table{max-width:100%}
.prix-list,.hero-facts,.infos-horaires,.offer-card .price{font-variant-numeric:tabular-nums}

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;background:var(--azur);color:#fff;
  padding:12px 18px;text-decoration:none;font-weight:600;
}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--azur);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* -------------------------------------------------------------------------
   3. Grille & utilitaires
   ------------------------------------------------------------------------- */
.container{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}
.narrow{width:min(760px,100% - var(--gutter)*2);margin-inline:auto}
.section{padding:clamp(56px,8vw,112px) 0}

/* Libellé de section : texte seul, sans pastille ni filet d'ornement. */
.section-lead{max-width:58ch;margin-bottom:clamp(28px,5vw,54px)}
.section-lead .label,.hero__label,.page-hero .label{
  display:block;font-family:var(--display);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--azur);margin-bottom:18px;
}
.section-lead h2{font-size:clamp(29px,4.6vw,50px)}
.section-lead p{margin-top:18px;color:var(--ink-2);font-size:clamp(16px,1.6vw,19px)}
.section-lead.on-dark h2{color:#fff}
.section-lead.on-dark p{color:var(--on-dark-2)}
.section-lead.on-dark .label{color:var(--on-dark-2)}

/* Boutons : aplat, pas de relief ni de déplacement au survol. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:1.5px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--display);font-weight:700;font-size:15px;
  text-decoration:none;text-align:center;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn.primary{background:var(--azur);color:#fff;border-color:var(--azur)}
.btn.primary:hover{background:var(--encre);border-color:var(--encre)}
.btn.light{background:#fff;color:var(--encre);border-color:#fff}
.btn.light:hover{background:var(--on-dark);border-color:var(--on-dark)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn.ghost:hover{background:#fff;color:var(--encre);border-color:#fff}
.btn.soft{background:transparent;color:var(--azur);border-color:var(--azur)}
.btn.soft:hover{background:var(--azur);color:#fff}

.link-arrow{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--azur);text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:2px;
}
.link-arrow:hover{color:var(--encre)}

/* -------------------------------------------------------------------------
   4. Bandeau d'information + en-tête
   ------------------------------------------------------------------------- */
.topbar{background:var(--encre);color:var(--on-dark);font-size:14.5px}
.topbar__inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0}
.topbar__text{margin:0}
.topbar__text b{color:#fff}
.topbar a{margin-left:auto;color:#fff;font-weight:600;text-underline-offset:4px}

.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1.5px solid var(--ardoise)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px}
.brand{
  display:flex;align-items:baseline;gap:6px;text-decoration:none;
  font-family:var(--display);font-size:clamp(20px,2.4vw,24px);font-weight:700;
  letter-spacing:-.04em;color:var(--encre);white-space:nowrap;
}
.brand span{color:var(--azur)}
.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{text-decoration:none;font-weight:600;font-size:15.5px;color:var(--ink-2);padding:10px 12px;border-radius:var(--radius);white-space:nowrap}
.main-nav a:hover{color:var(--encre);background:var(--paper)}
.main-nav a[aria-current="page"]{color:var(--encre);box-shadow:inset 0 -2.5px 0 var(--azur)}
.nav-cta{background:var(--azur);color:#fff!important;margin-left:8px;font-family:var(--display);font-weight:700}
.nav-cta:hover{background:var(--encre)!important}
.nav-toggle{display:none;border:1.5px solid var(--ardoise);background:transparent;color:var(--encre);border-radius:var(--radius-sm);padding:10px 14px;font-weight:600}

.breadcrumb{background:#fff;border-bottom:1px solid var(--rule)}
.breadcrumb ol{display:flex;gap:10px;padding:13px 0;font-size:14px;color:var(--ink-3);flex-wrap:wrap}
.breadcrumb li:not(:last-child)::after{content:'—';margin-left:10px}
.breadcrumb a{color:var(--azur);text-decoration:none;font-weight:600}

/* -------------------------------------------------------------------------
   5. Héros — typographique, sans visuel
   ------------------------------------------------------------------------- */
.hero{background:var(--encre);color:#fff}
.hero__label{color:var(--on-dark-2)}
.hero__inner{padding:clamp(56px,9vw,120px) 0;max-width:70ch}
.hero h1{font-size:clamp(35px,6vw,78px);color:#fff;max-width:16ch}
.hero__lead{margin-top:26px;max-width:56ch;font-size:clamp(17px,1.8vw,21px);color:rgba(255,255,255,.82)}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

.hero-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:clamp(44px,6vw,64px);border-top:1px solid var(--ardoise-line);
  max-width:none;
}
.hero-facts div{padding:24px 24px 0 0}
.hero-facts div + div{border-left:1px solid var(--ardoise-line);padding-left:24px}
.hero-facts dt{font-size:12.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--on-dark-2);margin-bottom:8px}
.hero-facts dd{margin:0;font-family:var(--display);font-weight:700;font-size:17.5px;color:#fff}

/* -------------------------------------------------------------------------
   6. Tarifs — cartes structurées en trois zones
   ------------------------------------------------------------------------- */
.tarifs{background:var(--paper)}

.famille{margin-top:clamp(40px,5vw,64px)}
.famille:first-of-type{margin-top:0}
.famille__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:22px;border-bottom:2px solid var(--ardoise);
}
.famille__head h3{font-size:clamp(23px,2.8vw,31px);color:var(--encre)}
.famille__head p{max-width:46ch;color:var(--ink-2);font-size:15.5px;margin:0}

.formule-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:stretch}

.formule-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.formule-card:hover{border-color:var(--azur);box-shadow:0 14px 30px -20px rgba(8,25,58,.35)}

/* Filet d'accent en tête de carte : signale la couleur de marque sans
   ajouter d'ornement supplémentaire. */
.formule-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--azur);z-index:2;
}

/* Zone 1 : en-tête teinté, avec le prix d'appel bien lisible. */
.formule-card__head{
  background:var(--brume);border-bottom:1px solid var(--rule);
  padding:calc(clamp(22px,2.6vw,28px) + 4px) clamp(22px,2.6vw,28px) clamp(22px,2.6vw,28px);
}
.formule-card__head h4{font-size:clamp(20px,2.2vw,23px);color:var(--encre)}
.formule-card__desc{margin-top:9px;color:var(--ink-2);font-size:15px}
.formule-card__from{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
}
.from-label{
  width:100%;font-family:var(--display);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);
}
.from-amount{
  font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,42px);
  letter-spacing:-.04em;color:var(--azur);line-height:1;
}
/* Le symbole euro, composé plus petit et plus léger que les chiffres. */
.euro{font-size:.52em;font-weight:600;margin-left:.14em;vertical-align:.14em;opacity:.75}
.prix-list .now .euro{font-size:.6em;margin-left:.12em}
.from-old{font-size:14.5px;color:var(--ink-3)}

/* Zone 2 : détail des durées et prestations. */
.formule-card__body{padding:clamp(20px,2.6vw,26px);flex:1}
.bloc-titre{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin:0 0 12px;
}
.bloc--inclus{margin-top:24px}

.prix-list{border-top:1px solid var(--rule)}
.prix-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 10px 13px 12px;margin-inline:-12px;
  border-bottom:1px solid var(--rule);border-radius:6px;
  transition:background-color .15s ease;
}
/* Survol d'une ligne tarifaire : repère utile quand la carte en aligne trois. */
.prix-list li:hover{background:var(--brume)}
.prix-list .duree{font-family:var(--display);font-weight:700;font-size:17px;color:var(--encre);white-space:nowrap}
.prix-list .montants{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.prix-list .was{color:var(--ink-3);font-size:14.5px}
.prix-list .now{font-family:var(--display);font-weight:700;font-size:20px;color:var(--encre);letter-spacing:-.03em}
.prix-list .save{
  font-family:var(--display);font-size:12.5px;font-weight:700;color:var(--azur);
  background:var(--brume);border-radius:6px;padding:3px 8px;white-space:nowrap;
}

.inclus-list{display:grid;gap:11px;font-size:15px;color:var(--ink-2)}
.inclus-list li{display:flex;align-items:flex-start;gap:11px}
.check-ico{
  width:20px;height:20px;flex:none;margin-top:1px;padding:2px;
  color:var(--azur);background:var(--brume);border-radius:50%;
}

/* Zone 3 : action, en pied de carte, pleine largeur. */
.formule-card__foot{padding:0 clamp(20px,2.6vw,26px) clamp(20px,2.6vw,26px)}
.formule-card__foot .btn{width:100%}

/* Famille ne comptant qu'une formule : la carte occupe toute la largeur. */
.formule-card.is-wide{grid-column:1 / -1}
.formule-card.is-wide .formule-card__body{display:grid;grid-template-columns:1.15fr 1fr;gap:0 clamp(24px,3vw,44px);align-items:start}
.formule-card.is-wide .bloc{min-width:0}
.formule-card.is-wide .bloc--inclus{margin-top:0}
.formule-card.is-wide .formule-card__foot .btn{width:auto;min-width:260px}

/* Encart paiement */
.paiement-band{
  margin-top:clamp(32px,4vw,50px);background:var(--encre);color:var(--on-dark);
  border-radius:var(--radius);padding:clamp(24px,3vw,34px);
}
.paiement-band h3{font-size:19px;color:#fff;margin-bottom:20px}
.paiement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.paiement-grid b{display:block;color:#fff;font-family:var(--display);font-size:16px;margin-bottom:5px}
.paiement-grid p{font-size:14.5px;color:var(--on-dark-2);margin:0}

/* -------------------------------------------------------------------------
   7. Parcours — frise d'étapes reliées
   Les quatre étapes forment une vraie séquence : on les relie par un trait
   continu, avec un repère numéroté par étape. Le trait se redresse à la
   verticale sur mobile, où la frise se lit de haut en bas.
   ------------------------------------------------------------------------- */
.parcours{background:var(--encre);color:var(--on-dark)}

.step-list{
  --marqueur:46px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px);
  margin-top:clamp(8px,2vw,20px);
}
.step-list li{position:relative;min-width:0}

/* Trait de liaison entre deux repères successifs. */
.step-list li:not(:last-child)::before{
  content:'';position:absolute;z-index:0;
  top:calc(var(--marqueur) / 2 - 1px);
  left:calc(var(--marqueur) + 12px);
  right:calc(-1 * clamp(18px, 2.6vw, 32px) - 12px);
  height:2px;background:var(--ardoise-line);
}

.step-list .n{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:var(--marqueur);height:var(--marqueur);border-radius:50%;
  background:var(--azur);color:#fff;
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;
  margin-bottom:22px;
}
.step-list h3{font-size:20px;color:#fff;margin-bottom:10px}
.step-list p{color:var(--on-dark-2);font-size:15.5px}

.parcours__pied{
  margin-top:clamp(32px,4vw,48px);padding-top:26px;
  border-top:1px solid var(--ardoise-line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.parcours__pied p{color:var(--on-dark-2);font-size:15.5px;max-width:52ch;margin:0}

/* -------------------------------------------------------------------------
   8. Infos pratiques — un seul panneau
   Les mentions légales (agrément, SIRET) ne figurent plus ici : elles sont
   déjà dans le pied de page et sur la page mentions légales. Cette section
   ne garde que ce dont on a besoin pour venir : adresse, horaires, contact.
   ------------------------------------------------------------------------- */
.infos{background:var(--paper-2)}

.infos-panneau{
  display:grid;grid-template-columns:1fr 1fr;
  background:#fff;border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;
}
.infos-panneau__col{padding:clamp(24px,3vw,36px)}
.infos-panneau__col + .infos-panneau__col{border-left:1px solid var(--rule)}
.infos-panneau__col h3{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-3);margin-bottom:16px;
}
.infos-adresse{
  font-family:var(--display);font-weight:700;font-size:clamp(19px,2.2vw,23px);
  color:var(--encre);letter-spacing:-.02em;line-height:1.3;margin-bottom:22px;
}
.infos-horaires{display:grid;gap:12px}
.infos-horaires div{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
}
.infos-horaires div:last-child{border-bottom:0;padding-bottom:0}
.infos-horaires dt{color:var(--ink-2);font-size:15.5px}
.infos-horaires dd{
  margin:0;text-align:right;color:var(--encre);
  font-family:var(--display);font-weight:700;font-size:15.5px;
}

.infos-panneau__pied{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(20px,2.4vw,26px) clamp(24px,3vw,36px);
  background:var(--brume);border-top:1px solid var(--rule);
}
.infos-panneau__pied p{margin:0;color:var(--ink-2);font-size:15.5px}
.infos-panneau__actions{display:flex;gap:12px;flex-wrap:wrap}

/* Questions fréquentes : une seule liste encadrée, séparée par des filets
   internes plutôt qu'en cartes flottantes. Accordéon natif, sans JavaScript. */
.faq{background:var(--paper)}
.faq-list{
  max-width:920px;background:#fff;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.faq-item + .faq-item{border-top:1px solid var(--rule)}
.faq-item[open]{background:var(--brume)}

.faq-item summary{
  display:flex;align-items:center;gap:20px;
  padding:22px clamp(20px,2.6vw,30px);cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:clamp(16.5px,1.8vw,19px);
  color:var(--encre);line-height:1.35;
  transition:color .15s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--azur)}

/* Indicateur plus / moins, dessiné en CSS : la barre verticale disparaît
   à l'ouverture, il ne reste que le trait horizontal. */
.faq-item summary::after{
  content:'';flex:none;margin-left:auto;
  width:34px;height:34px;border-radius:50%;
  background-color:var(--brume);
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:center;
  background-size:13px 2px, 2px 13px;
  color:var(--azur);
  transition:background-size .2s ease,background-color .15s ease;
}
.faq-item[open] summary::after{background-size:13px 2px, 2px 2px;background-color:#fff}
.faq-item summary:hover::after{background-color:#fff}

.faq-item__body{
  padding:0 clamp(20px,2.6vw,30px) 24px;
  color:var(--ink-2);font-size:15.5px;max-width:78ch;
}
.faq-item__body p{margin:0}

/* -------------------------------------------------------------------------
   9. Appel à l'action
   ------------------------------------------------------------------------- */
.cta-band{background:var(--encre);color:#fff;padding:clamp(44px,6vw,78px) 0}
.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(26px,3.6vw,42px);color:#fff;max-width:20ch}
.cta-band p{margin-top:14px;color:rgba(255,255,255,.82);max-width:44ch}

/* -------------------------------------------------------------------------
   10. Pages intérieures
   ------------------------------------------------------------------------- */
.page-hero{background:var(--encre);color:#fff;padding:clamp(44px,7vw,86px) 0}
.page-hero .label{color:var(--on-dark-2)}
.page-hero h1{font-size:clamp(30px,5vw,58px);color:#fff;max-width:18ch}
.page-hero p{margin-top:20px;max-width:56ch;color:rgba(255,255,255,.82);font-size:clamp(16px,1.7vw,19px)}

.offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(16px,2.5vw,28px)}
.offer-card{
  background:#fff;border:1.5px solid var(--rule);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;
}
.offer-card h2{font-size:clamp(26px,3vw,35px);color:var(--encre)}
.offer-card .price{margin:20px 0 24px;padding-bottom:24px;border-bottom:1px solid var(--rule)}
.offer-card .price del{display:block;color:var(--ink-3);font-size:16px;margin-bottom:5px}
.offer-card .price strong{font-family:var(--display);font-size:clamp(30px,3.6vw,41px);letter-spacing:-.035em;color:var(--azur)}
.offer-card ul{display:grid;gap:10px;margin-bottom:26px;font-size:15.5px;color:var(--ink-2)}
.offer-card li{position:relative;padding-left:16px}
.offer-card li::before{content:'—';position:absolute;left:0;color:var(--ink-3)}
.offer-card .btn{margin-top:auto;align-self:flex-start}

.option-note{
  margin-top:30px;padding:20px 24px;background:var(--encre);color:var(--on-dark);
  border-radius:var(--radius);font-size:15.5px;
}
.option-note b{color:#fff;font-family:var(--display)}

/* -------------------------------------------------------------------------
   11. Formulaires
   ------------------------------------------------------------------------- */
.form-section{background:var(--paper);padding:clamp(40px,7vw,86px) 0}
.form-shell{background:#fff;border:1.5px solid var(--rule);border-radius:var(--radius);padding:clamp(22px,4vw,48px)}
.hp-field{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.steps{--step-progress:0;position:relative;display:flex;justify-content:space-between;margin-bottom:38px}
.steps::before{content:'';position:absolute;top:18px;left:18px;right:18px;height:2px;background:var(--rule)}
.steps::after{
  content:'';position:absolute;top:18px;left:18px;height:2px;background:var(--azur);
  width:calc((100% - 36px) * var(--step-progress));transition:width .25s ease;
}
.steps li{
  position:relative;z-index:1;width:38px;height:38px;border-radius:50%;
  background:var(--paper);border:2px solid var(--rule);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink-3);
}
.steps li.active,.steps li.done{background:var(--azur);border-color:var(--azur);color:#fff}

.form-step{display:none;border:0;margin:0;padding:0;min-inline-size:0}
.form-step.active{display:block}
.form-step legend{
  font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:700;
  letter-spacing:-.03em;color:var(--encre);margin-bottom:24px;padding:0;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;min-width:0}
.field>span{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.form-grid .field{margin-bottom:0}
input,select,textarea{
  width:100%;max-width:100%;border:1.5px solid var(--rule);background:#fff;border-radius:var(--radius-sm);
  padding:14px 15px;font:inherit;color:var(--ink);outline:0;
}
input:focus,select:focus,textarea:focus{border-color:var(--azur)}
textarea{min-height:150px;resize:vertical}
.check{display:flex;gap:11px;align-items:flex-start;margin:22px 0;font-size:15.5px;color:var(--ink-2)}
.check input{width:auto;margin-top:4px;flex:none}
.form-actions{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap}
.success{border-left:4px solid var(--azur);background:var(--paper-2);padding:16px 20px;margin-bottom:24px;font-weight:600}
.contact-layout{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(18px,3vw,32px);align-items:start}
.contact-hours-card{background:var(--encre);color:var(--on-dark);border-radius:var(--radius);padding:clamp(22px,3vw,32px)}
.contact-hours-card h2{font-size:21px;color:#fff;margin-bottom:18px}
.contact-hours-card p{font-size:15.5px;color:var(--on-dark-2)}
.contact-hours-card strong{color:#fff}

/* Page contact */
.contact-direct{background:#fff;padding:clamp(44px,6vw,72px) 0}
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,24px)}
.contact-card{
  background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;
}
.contact-card h2{font-size:19px;color:var(--encre)}
.contact-card__value{
  margin:12px 0 8px;font-family:var(--display);font-weight:700;
  font-size:clamp(21px,2.4vw,26px);letter-spacing:-.02em;color:var(--azur);
}
.contact-card__value--mail{font-size:clamp(15px,1.6vw,17px);word-break:break-word}
.contact-card p{font-size:15px;color:var(--ink-2)}
.contact-card .btn,.contact-card .btn-wa{margin-top:20px;align-self:flex-start}

.form-title{font-size:clamp(22px,2.6vw,28px);color:var(--encre)}
.form-intro{margin:10px 0 26px;color:var(--ink-2);font-size:15.5px}

.contact-aside{display:grid;gap:18px}
.hours-list{display:grid;gap:12px;font-size:15.5px}
.hours-list div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.hours-list dt{color:var(--on-dark-2)}
.hours-list dd{margin:0;color:#fff;font-weight:600;text-align:right}
.contact-note{
  background:var(--paper);border:1.5px solid var(--rule);border-radius:var(--radius);
  padding:clamp(20px,2.5vw,26px);
}
.contact-note h2{font-size:17px;color:var(--encre);margin-bottom:10px}
.contact-note p{font-size:15px;color:var(--ink-2)}

/* -------------------------------------------------------------------------
   12. Mentions légales
   ------------------------------------------------------------------------- */
.legal-section{background:var(--paper);padding:clamp(40px,7vw,86px) 0}
.legal-card{background:#fff;border:1.5px solid var(--rule);border-radius:var(--radius);padding:clamp(24px,4vw,52px)}
.legal-card h2{font-size:19px;color:var(--encre);margin:34px 0 12px;padding-top:24px;border-top:1px solid var(--rule)}
.legal-card h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-card a{color:var(--azur);font-weight:600;word-break:break-word}

/* -------------------------------------------------------------------------
   13. Pied de page — quatre colonnes structurées
   ------------------------------------------------------------------------- */
.site-footer{
  background:var(--encre);color:var(--on-dark-2);
  border-top:1px solid var(--ardoise-line);
  padding:clamp(48px,6vw,76px) 0 0;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;
  gap:clamp(28px,4vw,52px);
  padding-bottom:clamp(36px,5vw,54px);
}
.footer-brand{
  display:flex;align-items:baseline;gap:6px;font-family:var(--display);
  font-size:23px;font-weight:700;letter-spacing:-.04em;color:#fff;margin-bottom:14px;
}
.footer-brand span{color:#8fb4f0}
.footer-marque p{font-size:15px;max-width:38ch}

.footer-titre{
  font-family:var(--display);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:#fff;
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--ardoise-line);
}
.footer-titre--espace{margin-top:28px}

.footer-liens{display:grid;gap:2px}
.footer-liens a{
  display:block;padding:7px 0;color:var(--on-dark-2);text-decoration:none;font-size:15px;
  transition:color .15s ease;
}
.footer-liens a:hover{color:#fff}

.footer-contact{font-style:normal}
.footer-adresse{
  display:block;color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:16px;line-height:1.45;
  padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--ardoise-line);
}
.footer-adresse:hover{color:#8fb4f0}

.footer-coord,.footer-horaires{display:grid;gap:9px;font-size:14.5px}
.footer-coord div,.footer-horaires div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.footer-coord dt,.footer-horaires dt{color:var(--on-dark-2);flex:none}
.footer-coord dd,.footer-horaires dd{margin:0;text-align:right;color:#fff}
.footer-coord a{color:#fff;text-decoration:none;word-break:break-word}
.footer-coord a:hover{color:#8fb4f0;text-decoration:underline}

.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 0 24px;border-top:1px solid var(--ardoise-line);font-size:13.5px;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0}
.footer-credit{margin:0;letter-spacing:.04em}
.footer-credit a{color:#fff;font-weight:600;text-underline-offset:4px}
.footer-credit a:hover{color:#8fb4f0}

/* Bouton WhatsApp en ligne (page contact) */
.wa-logo{width:21px;height:21px;flex:none;display:block}
.btn-wa{
  display:inline-flex;align-items:center;gap:11px;
  background:#25d366;color:#0a2e17;border:1.5px solid #25d366;border-radius:var(--radius-sm);
  padding:14px 22px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:15px;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-wa:hover{background:#1da851;border-color:#1da851;color:#fff}

/* Pile de boutons flottants */
.float-stack{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.float-ico{width:22px;height:22px;flex:none;display:block}
.float-btn{
  display:inline-flex;align-items:center;gap:11px;
  border:2px solid #fff;border-radius:var(--radius-sm);
  padding:13px 19px;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:15px;
  transition:background-color .15s ease,color .15s ease;
}
.float-btn--map{background:var(--encre);color:#fff}
.float-btn--map:hover{background:var(--azur)}
.float-btn--tel{background:var(--azur);color:#fff}
.float-btn--tel:hover{background:var(--encre)}
.float-btn--wa{background:#25d366;color:#0a2e17}
.float-btn--wa:hover{background:#1da851;color:#fff}

/* -------------------------------------------------------------------------
   14. Adaptatif
   ------------------------------------------------------------------------- */
@media (max-width:1080px){
  .hero-facts{grid-template-columns:repeat(2,1fr)}
  .hero-facts div:nth-child(3){border-left:0;padding-left:0}
  .hero-facts div:nth-child(n+3){margin-top:20px;padding-top:20px;border-top:1px solid var(--ardoise-line)}
  .step-list{grid-template-columns:repeat(2,1fr);row-gap:clamp(28px,4vw,40px)}
  /* Sur deux colonnes, le trait ne relie plus la fin d'une ligne au début
     de la suivante : on le masque en fin de rangée. */
  .step-list li:nth-child(2n)::before{display:none}
  .contact-layout{grid-template-columns:1fr}
  .paiement-grid{grid-template-columns:1fr 1fr}
  .contact-cards{grid-template-columns:1fr 1fr}
}

@media (max-width:1180px){
  .nav-toggle{display:block}
  .main-nav{
    position:absolute;left:var(--gutter);right:var(--gutter);top:74px;background:#fff;
    border:1.5px solid var(--ardoise);border-radius:var(--radius);padding:12px;
    display:none;flex-direction:column;align-items:stretch;
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:14px;text-align:center}
  .nav-cta{margin-left:0;margin-top:6px}
  .formule-grid{grid-template-columns:1fr}
  .formule-card.is-wide .formule-card__body{grid-template-columns:1fr}
  .formule-card.is-wide .bloc--inclus{margin-top:24px}
  .formule-card.is-wide .formule-card__foot .btn{width:100%;min-width:0}
  .contact-cards{grid-template-columns:1fr}
  .paiement-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .infos-panneau{grid-template-columns:1fr}
  .infos-panneau__col + .infos-panneau__col{border-left:0;border-top:1px solid var(--rule)}
  .infos-panneau__pied{flex-direction:column;align-items:flex-start}
  /* Frise verticale : repère à gauche, texte à droite. */
  .step-list{grid-template-columns:1fr;gap:0}
  .step-list li{
    display:grid;grid-template-columns:var(--marqueur) 1fr;
    column-gap:18px;row-gap:6px;padding-bottom:30px;
  }
  .step-list li:last-child{padding-bottom:0}
  .step-list li:not(:last-child)::before{
    display:block;
    top:calc(var(--marqueur) + 10px);left:calc(var(--marqueur) / 2 - 1px);
    right:auto;width:2px;height:calc(100% - var(--marqueur) - 10px);
  }
  .step-list .n{grid-column:1;grid-row:1 / span 2;margin-bottom:0}
  .step-list h3{grid-column:2;grid-row:1;margin-bottom:0;align-self:center}
  .step-list p{grid-column:2;grid-row:2}
  .form-grid{grid-template-columns:1fr}
  .cta-band__inner{flex-direction:column;align-items:flex-start}
  .famille__head{align-items:flex-start;flex-direction:column;gap:12px}
}

@media (max-width:620px){
  .hero-facts{grid-template-columns:1fr}
  .hero-facts div{padding:20px 0 0}
  .hero-facts div + div{border-left:0;padding-left:0;border-top:1px solid var(--ardoise-line)}
  .hero-facts div:nth-child(n+3){margin-top:0;padding-top:20px}

  /* Cibles tactiles d'au moins 44px de haut. */
  .link-arrow{padding-top:11px;padding-bottom:11px}
  .topbar a{padding:10px 0;display:inline-block}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  /* Cibles tactiles du pied de page portées à 44px. */
  .footer-liens a{padding:12px 0}
  .footer-coord a,.footer-credit a{display:inline-block;padding:12px 0}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-coord div,.footer-horaires div{flex-direction:column;gap:2px}
  .footer-coord dd,.footer-horaires dd{text-align:left}
  .infos-panneau__actions{width:100%}
  .infos-panneau__actions .btn,.infos-panneau__actions .btn-wa{width:100%;justify-content:center}
  .breadcrumb a{display:inline-block;padding:8px 0}

  .topbar__inner{gap:8px}
  .topbar a{margin-left:0}
  .infos-horaires div{flex-direction:column;gap:3px;align-items:flex-start}
  .infos-horaires dd{text-align:left}
  .btn{width:100%}
  .hero__actions,.form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%}
  .offer-card .btn{align-self:stretch;width:100%}

  /* Les deux boutons flottants se réduisent à des pastilles empilées. */
  .float-stack{right:14px;bottom:14px;gap:9px}
  .float-btn{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%}
  .float-btn span{display:none}
  .float-ico{width:24px;height:24px}
  .hours-list div{flex-direction:column;gap:2px}
  .hours-list dd{text-align:left}
}