/* AboBack — feuille de style unique */

:root{
  --encre:#0D1B2A;
  --accent:#0A7D73;
  --accent-sombre:#08554E;
  --accent-clair:#6FD8CC;
  --menthe:#EAF5F3;
  --fond:#F7F8F7;
  --bord:#E3E7E6;
  --texte:#12222B;
  --texte-2:#43565E;
  --texte-3:#5A6B73;
  --rayon:14px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--texte);
  background:var(--fond);
}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.55rem,3.4vw,2.6rem);letter-spacing:-0.025em}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-0.01em;font-family:inherit}
p{margin:0}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-sombre)}

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

/* ---------- structure ---------- */

.zone{width:100%;max-width:1200px;margin:0 auto;padding:0 22px}
@media (min-width:600px){.zone{padding:0 32px}}
.section{padding:72px 0}
.section--blanc{background:#fff}
.section--encre{background:var(--encre);color:#fff}

/* ---------- en-tête ---------- */

.entete{background:#fff;border-bottom:1px solid var(--bord)}
/* min-height et non height : avec une hauteur figée, un bouton qui passe
   sur deux lignes déborde du bandeau au lieu de l'agrandir. */
.entete__interieur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding-top:14px;padding-bottom:14px}
/* Sous 620px le bouton du bandeau double celui du hero, juste en dessous :
   on le retire plutôt que de le laisser se casser en deux lignes. */
@media (max-width:620px){.entete .bouton{display:none}}

.logo{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.logo__mot{font-family:"Bricolage Grotesque",sans-serif;font-size:1.4rem;font-weight:800;letter-spacing:-0.03em;color:var(--encre)}
.logo__signature{font-size:.78rem;font-weight:500;color:var(--texte-3)}
.logo--clair .logo__mot{color:#fff}
.logo--clair .logo__signature{color:#8FA2AA}

/* ---------- boutons ---------- */

.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 28px;
  font:inherit;font-size:1.02rem;font-weight:600;
  color:#fff;background:var(--accent);
  border:none;border-radius:11px;cursor:pointer;
  text-decoration:none;
}
.bouton:hover{background:var(--accent-sombre);color:#fff}
.bouton--large{width:100%}
.bouton--compact{min-height:44px;padding:11px 20px;font-size:.95rem}

/* ---------- hero ---------- */

.hero{display:grid;gap:48px;align-items:center}
@media (min-width:920px){.hero{grid-template-columns:1.35fr 1fr;gap:64px}}

.hero__accroche{font-size:1.2rem;color:var(--texte-2);margin-top:20px;max-width:34em}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
.hero__mention{font-size:.95rem;color:var(--texte-3)}

.etiquette{
  display:inline-block;background:var(--menthe);color:var(--accent-sombre);
  font-size:.83rem;font-weight:600;padding:8px 14px;border-radius:999px;margin-bottom:22px;
}

/* ---------- carte exemple ---------- */

.carte-exemple{background:var(--encre);border-radius:20px;padding:30px 28px;color:#fff}
.carte-exemple__tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.carte-exemple__titre{font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-clair)}
.carte-exemple__marque{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9FB0B8;border:1px solid #33434F;border-radius:999px;padding:4px 10px}
.ligne-exemple{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #22323F}
.ligne-exemple:last-of-type{border:0;padding:0;margin:0}
.ligne-exemple__cle{display:block;font-size:.82rem;color:#7E9099;margin-bottom:3px}
.ligne-exemple__valeur{font-size:1.1rem;font-weight:600}
.ligne-exemple__montant{font-family:"Bricolage Grotesque",sans-serif;font-size:2.05rem;font-weight:700;letter-spacing:-0.03em;color:var(--accent-clair)}
.carte-exemple__note{font-size:.82rem;line-height:1.5;color:#7E9099;border-top:1px solid #22323F;margin-top:20px;padding-top:16px}

/* ---------- bandeau chiffres ---------- */

.chiffres{display:grid;gap:32px;padding:44px 0 0}
@media (min-width:760px){.chiffres{grid-template-columns:repeat(3,1fr)}}
.chiffre__valeur{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:2.1rem;font-weight:700;letter-spacing:-0.03em}
.chiffre__libelle{font-size:.97rem;color:#9FB0B8}
.nuance{font-size:.9rem;line-height:1.6;color:#7E9099;max-width:62em;padding:30px 0 44px}

/* ---------- grilles ---------- */

.grille{display:grid;gap:20px}
@media (min-width:820px){.grille--3{grid-template-columns:repeat(3,1fr)}}

.carte{background:#fff;border:1px solid var(--bord);border-radius:16px;padding:28px}
.section--blanc .carte{background:var(--fond);border-color:transparent}
.carte h3{margin:14px 0 10px}
.carte p{font-size:1rem;color:var(--texte-2)}

.pastille-num{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  background:var(--menthe);color:var(--accent-sombre);
  font-weight:700;font-size:1rem;
}

.intro{font-size:1.1rem;color:var(--texte-2);margin-top:14px;max-width:44em}

/* ---------- encart accompagnement ---------- */

.encart{background:#fff;border:1px solid var(--bord);border-radius:20px;padding:36px;display:grid;gap:36px}
@media (min-width:980px){.encart{grid-template-columns:.9fr 1.1fr;align-items:center;padding:44px}}
.atouts{display:grid;gap:26px}
@media (min-width:640px){.atouts{grid-template-columns:repeat(3,1fr)}}
.atout h3{font-size:1rem;margin:10px 0 6px}
.atout p{font-size:.95rem;color:var(--texte-2)}

/* ---------- pastilles ---------- */

.pastilles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.pastille{background:var(--fond);border:1px solid var(--bord);border-radius:999px;padding:12px 22px;font-weight:600}
.centre{text-align:center;display:flex;flex-direction:column;align-items:center}

/* ---------- FAQ ---------- */

.faq{display:grid;gap:48px}
@media (min-width:980px){.faq{grid-template-columns:.8fr 1.2fr}}
.faq__liste{display:grid;gap:8px}
.faq__item{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:24px 28px}
.faq__item h3{margin-bottom:8px}
.faq__item p{font-size:1rem;color:var(--texte-2)}

/* ---------- appel final ---------- */

.final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.final p{color:#9FB0B8;max-width:36em}
.final small{color:#7E9099}

/* ---------- confiance ---------- */

.confiance{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.confiance img{width:124px;height:124px;border-radius:999px;object-fit:cover;flex-shrink:0}
.confiance__texte{flex:1 1 320px;display:flex;flex-direction:column;gap:12px}
.confiance p{color:var(--texte-2)}
.mention-legale{font-size:.9rem;color:var(--texte-3)}

/* ---------- pied ---------- */

.pied{background:var(--fond);border-top:1px solid var(--bord);padding:32px 0}
.pied__interieur{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.pied__liens{display:flex;flex-wrap:wrap;gap:24px;font-size:.92rem}

/* ---------- tunnel ---------- */

.tunnel{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.tunnel__tete{border-bottom:1px solid var(--bord)}
.tunnel__barre{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px}
.tunnel__retour{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:-10px;color:var(--texte-2)}
.tunnel__etape{font-size:.85rem;font-weight:600;color:var(--texte-3)}
.jauge{height:4px;background:#EEF1F0}
.jauge span{display:block;height:4px;background:var(--accent)}
/* Le raccourci padding:36px 0 annulait les 24px lateraux herites de .zone,
   d'ou le formulaire colle aux bords. On ne touche qu'a l'axe vertical. */
.tunnel__corps{flex:1;padding-top:36px;padding-bottom:44px;width:100%;max-width:620px;margin:0 auto}
.tunnel__pied{border-top:1px solid var(--bord);padding-top:18px;padding-bottom:28px;background:#fff}

.choix{display:grid;gap:12px;margin-top:28px}
.choix__option{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fff;border:1.5px solid #D8DEDD;border-radius:var(--rayon);
  padding:20px;color:var(--texte);text-decoration:none;
}
.choix__option:hover{border-color:var(--accent);color:var(--texte)}
.choix__option strong{display:block;font-size:1.05rem}
.choix__option span{font-size:.92rem;color:var(--texte-3)}
.choix__option--plein{background:var(--encre);border-color:var(--encre);color:#fff}
.choix__option--plein:hover{background:#15283A;color:#fff}
.choix__option--plein span{color:#9FB0B8}

.champ{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.champ label{font-size:.88rem;font-weight:600}
.champ input,.champ select{
  width:100%;min-height:54px;padding:0 15px;
  font:inherit;font-size:1rem;color:var(--texte);
  background:var(--fond);border:1px solid #D8DEDD;border-radius:11px;
}
.champ input:focus,.champ select:focus{border-color:var(--accent);background:#fff}

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

.consentement{display:flex;gap:12px;align-items:flex-start;margin:6px 0 4px}
.consentement input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent);flex-shrink:0}
.consentement label{font-size:.88rem;line-height:1.5;color:var(--texte-2)}

.info{display:flex;gap:12px;align-items:flex-start;background:var(--fond);border-radius:12px;padding:16px;margin-top:8px}
.info p{font-size:.92rem;color:var(--texte-2)}

.erreur{background:#FDECEC;border:1px solid #F0C2C2;border-radius:11px;padding:14px 16px;margin-bottom:20px;font-size:.95rem;color:#8A2020}

.sous-bouton{display:block;text-align:center;font-size:.85rem;color:var(--texte-3);margin-top:10px}

.pot-de-miel{position:absolute;left:-9999px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}