/* =========================================================
   Cabinet Gabriel — tunnel de demande complémentaire santé
   Maquette ORBISEO. Conception « lisibilité 60+ » :
   corps 19px minimum, cibles tactiles 60px, contraste AAA
   sur le texte courant, aucune information portée par la
   couleur seule.
   ========================================================= */

:root{
  --encre:      #10263D;
  --encre-doux: #40566B;
  --bleu:       #14507E;
  --bleu-fonce: #0E3A5C;
  --bleu-pale:  #E8F0F7;
  --fond:       #F5F2EC;
  --carte:      #FFFFFF;
  --bord:       #CFC8BB;
  --bord-fort:  #A79E8E;
  --succes:     #1B6647;
  --alerte:     #A3341F;

  --r:      14px;
  --ombre:  0 1px 2px rgba(16,38,61,.06), 0 8px 24px rgba(16,38,61,.07);
  --ombre-f:0 2px 4px rgba(16,38,61,.08), 0 14px 34px rgba(16,38,61,.12);

  /* Superfamille Source : la serif et la sans ont été dessinées ensemble,
     le couple est cohérent par construction. */
  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

/* l'attribut hidden doit l'emporter sur les display: des composants */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.conteneur{ width:100%; max-width:760px; margin-inline:auto; padding-inline:20px; }

a{ color:var(--bleu); text-underline-offset:3px; }
a:hover{ color:var(--bleu-fonce); }

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

/* ---------- bandeau de démonstration ---------- */
.demo-note{
  background:#2A2723; color:#F2EDE4;
  font-size:14px; line-height:1.45; text-align:center;
  padding:9px 20px; letter-spacing:.01em;
}

/* ---------- lien d'évitement ---------- */
.evitement{
  position:absolute; left:-9999px;
  background:var(--bleu); color:#fff;
  padding:14px 22px; border-radius:0 0 var(--r) 0;
  font-weight:600; text-decoration:none; z-index:50;
}
.evitement:focus{ left:0; top:0; }

/* ---------- en-tête ---------- */
.entete{ background:var(--carte); border-bottom:1px solid var(--bord); }
.entete__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-block:14px;
}
.marque{ display:flex; align-items:center; gap:12px; }
.marque__sigle{ color:var(--bleu); display:flex; }
.marque__txt{ display:flex; flex-direction:column; line-height:1.2; }
.marque__txt strong{ font-family:var(--serif); font-size:21px; letter-spacing:.01em; }
.marque__txt small{ font-size:13.5px; color:var(--encre-doux); }
.entete__tel{
  font-weight:600; font-size:18px; text-decoration:none;
  white-space:nowrap; padding:10px 4px;
}

/* ---------- accroche ---------- */
.hero{ background:var(--carte); padding-block:52px 44px; }
.hero__in{ text-align:center; }
.hero__sur{
  margin:0 0 14px; font-size:14.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--bleu);
}
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px, 4.9vw, 42px); line-height:1.24;
  margin:0 0 20px; letter-spacing:-.01em;
  text-wrap:balance;
}
.souligne{
  background-image:linear-gradient(transparent 62%, #FBD9A8 62%);
  background-repeat:no-repeat;
}
.hero__chapo{
  margin:0 auto 30px; max-width:56ch;
  font-size:20px; color:var(--encre-doux);
}
.hero__mini{ margin:18px 0 0; font-size:16px; color:var(--encre-doux); }

/* ---------- réassurance ---------- */
.reassurance{
  list-style:none; margin:0; padding:18px 20px;
  background:var(--bleu-pale); border-block:1px solid #C9DBEA;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 34px; font-size:16.5px; font-weight:500;
}
.reassurance li{ display:flex; align-items:center; gap:9px; }
.reassurance span{ font-size:18px; }

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:inherit; font-size:19px; font-weight:600;
  border-radius:10px; border:2px solid transparent;
  cursor:pointer; text-decoration:none;
  padding:17px 30px; min-height:62px;
  transition:background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn--xl{ font-size:20px; padding:19px 38px; min-height:66px; }
.btn--primaire{
  background:var(--bleu); color:#fff; border-color:var(--bleu);
  box-shadow:var(--ombre);
}
.btn--primaire:hover{ background:var(--bleu-fonce); border-color:var(--bleu-fonce); color:#fff; }
.btn--primaire:active{ transform:translateY(1px); }
.btn--fantome{
  background:transparent; color:var(--bleu);
  border-color:var(--bord-fort); font-weight:500;
}
.btn--fantome:hover{ background:#EDE8DE; border-color:var(--encre-doux); }

/* ---------- questionnaire ---------- */
.questionnaire{ padding-block:44px 56px; }

.progression{ margin-bottom:30px; }
.progression__txt{
  margin:0 0 10px; font-size:16.5px; font-weight:500; color:var(--encre-doux);
}
.progression__txt strong{ color:var(--encre); }
#etape-nom{ color:var(--bleu); font-weight:600; }
.progression__piste{
  height:12px; background:#E2DCD0; border-radius:99px; overflow:hidden;
}
/* La barre occupe toute la largeur et se réduit par transform : pas de
   recalcul de mise en page à chaque étape. La piste arrondit les bords. */
.progression__barre{
  height:100%; width:100%; background:var(--bleu);
  transform-origin:left center;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}

form{ margin:0; }

.etape{ border:0; margin:0; padding:0; min-width:0; }
.etape[hidden]{ display:none; }

/* Cibles de focus programmatique : elles ne sont pas actionnables,
   le cadre bleu du clavier n'a donc pas lieu d'être. */
legend:focus, legend:focus-visible,
.merci h2:focus, .merci h2:focus-visible{ outline:none; }

legend{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(25px, 4vw, 33px); line-height:1.28;
  padding:0; margin:0 0 8px; color:var(--encre);
}
.legend-aide, .rappel-doux{
  margin:0 0 24px; font-size:17px; color:var(--encre-doux);
}
legend + .choix, legend + .champ, legend + .sous-question{ margin-top:24px; }

.sous-question{
  font-weight:600; font-size:20px; margin:34px 0 14px;
}
.sous-question:first-of-type{ margin-top:26px; }

/* ---------- cartes de choix ---------- */
.choix{ display:grid; gap:14px; margin-bottom:8px; }
.choix--1{ grid-template-columns:1fr; }
.choix--2{ grid-template-columns:repeat(2, 1fr); }
.choix--3{ grid-template-columns:repeat(3, 1fr); }

.carte{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  text-align:center;
  background:var(--carte); border:2px solid var(--bord);
  border-radius:var(--r); padding:26px 18px; min-height:150px;
  cursor:pointer; font-weight:600; font-size:19px;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.carte:hover{ border-color:var(--bleu); box-shadow:var(--ombre); }

.carte input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0;
}
.carte:has(input:focus-visible){
  outline:3px solid var(--bleu); outline-offset:3px;
}
.carte:has(input:checked){
  border-color:var(--bleu); background:var(--bleu-pale);
  box-shadow:var(--ombre-f);
}
/* pastille de validation, l'état ne repose pas que sur la couleur */
.carte:has(input:checked)::after{
  content:"✓"; position:absolute; top:10px; right:12px;
  width:30px; height:30px; border-radius:50%;
  background:var(--bleu); color:#fff;
  font-size:17px; line-height:30px; text-align:center;
}

.carte__ico{ color:var(--bleu); }
.carte__ico svg{
  width:46px; height:46px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.carte__lib{ display:block; }
.carte__lib small{
  display:block; margin-top:5px;
  font-size:15.5px; font-weight:400; color:var(--encre-doux); line-height:1.45;
}

/* variantes */
.carte--ligne{
  flex-direction:row; align-items:center; justify-content:flex-start;
  text-align:left; min-height:78px; padding:18px 58px 18px 22px;
}
.carte--ligne::before{
  content:""; flex:0 0 auto;
  width:26px; height:26px; border-radius:50%;
  border:2px solid var(--bord-fort); background:#fff; margin-right:16px;
}
.carte--ligne:has(input:checked)::before{
  border-color:var(--bleu); border-width:8px;
}
.carte--ligne:has(input:checked)::after{ top:50%; transform:translateY(-50%); }

.carte--compacte{ min-height:82px; padding:20px 16px; }
.carte--compacte:has(input:checked)::after{ top:8px; right:8px; width:26px; height:26px; line-height:26px; font-size:15px; }

.carte--case{
  flex-direction:row; align-items:center; justify-content:flex-start;
  text-align:left; min-height:104px; padding:20px 20px 20px 62px;
}
.carte--case::before{
  content:""; position:absolute; top:50%; left:20px; margin-top:-13px;
  width:26px; height:26px; border-radius:7px;
  border:2px solid var(--bord-fort); background:#fff;
}
.carte--case:has(input:checked)::before{ background:var(--bleu); border-color:var(--bleu); }
.carte--case:has(input:checked)::after{
  content:"✓"; top:50%; left:20px; right:auto; margin-top:-13px;
  width:26px; height:26px; line-height:26px; font-size:16px; background:transparent;
}

.rappel-doux{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:22px; padding:0; font-size:16.5px;
  color:var(--encre-doux);
}
.rappel-doux::before{
  content:"i"; flex:0 0 auto;
  width:24px; height:24px; margin-top:2px; border-radius:50%;
  border:1.5px solid var(--bord-fort); color:var(--bord-fort);
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:15px; line-height:21px; text-align:center;
}

/* ---------- champs ---------- */
.champ{ margin-top:26px; }
.champ label{ display:block; font-weight:600; font-size:19px; margin-bottom:6px; }
.option{ font-weight:400; color:var(--encre-doux); }
.aide{ margin:0 0 10px; font-size:16px; color:var(--encre-doux); }

input[type=text], input[type=tel], input[type=email]{
  width:100%; font-family:inherit; font-size:20px;
  padding:16px 18px; min-height:64px;
  background:var(--carte); color:var(--encre);
  border:2px solid var(--bord-fort); border-radius:10px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
input::placeholder{ color:#7A7364; }
input:hover{ border-color:var(--encre-doux); }
input:focus{ border-color:var(--bleu); box-shadow:0 0 0 4px rgba(20,80,126,.16); outline:none; }
input[aria-invalid="true"]{ border-color:var(--alerte); background:#FDF6F4; }

.erreur-champ{
  display:flex; align-items:flex-start; gap:8px;
  margin:9px 0 0; font-size:16.5px; font-weight:500; color:var(--alerte);
}
.erreur-champ::before{ content:"⚠"; flex:0 0 auto; }

.grille-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grille-2 .champ{ margin-top:26px; }

/* ---------- consentement ---------- */
.consentement{
  margin-top:34px; padding:24px;
  background:var(--carte); border:2px solid var(--bord);
  border-radius:var(--r);
}
.case-consent{ display:flex; gap:16px; align-items:flex-start; cursor:pointer; }
.case-consent input{
  flex:0 0 auto; appearance:none; -webkit-appearance:none;
  width:30px; height:30px; margin:2px 0 0;
  border:2px solid var(--bord-fort); border-radius:7px;
  background:#fff; cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease;
}
.case-consent input:checked{
  background:var(--bleu); border-color:var(--bleu);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
  background-size:20px; background-position:center; background-repeat:no-repeat;
}
.case-consent input[aria-invalid="true"]{ border-color:var(--alerte); }
.case-consent__txt{ font-size:18px; line-height:1.55; }
.consentement__detail{
  margin:16px 0 0; padding-top:16px; border-top:1px solid var(--bord);
  font-size:16px; color:var(--encre-doux); line-height:1.6;
}
.mentions-form{ margin:18px 0 0; font-size:16px; color:var(--encre-doux); }

/* ---------- navigation ---------- */
.nav{
  display:flex; gap:14px; align-items:center;
  margin-top:34px; flex-wrap:wrap;
}
.nav #suivant{ flex:1 1 auto; }
.nav__aide{ margin:14px 0 0; font-size:16px; color:var(--encre-doux); }

.erreur-globale{
  margin:18px 0 0; padding:15px 18px;
  background:#FBEDE9; border:2px solid var(--alerte); border-radius:10px;
  color:#7E2716; font-weight:500; font-size:17px;
}

/* ---------- confirmation ---------- */
.merci{ text-align:center; padding-block:16px; }
.merci__ico{ color:var(--succes); display:flex; justify-content:center; margin-bottom:20px; }
.merci__ico svg{
  width:78px; height:78px; fill:none; stroke:currentColor;
  stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
}
.merci h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 4.2vw, 34px); line-height:1.28; margin:0 0 14px;
}
.merci h2:focus-visible{ outline:3px solid var(--bleu); outline-offset:6px; }
.merci__txt{ margin:0 auto 30px; max-width:52ch; font-size:19.5px; color:var(--encre-doux); }
.merci__txt strong{ color:var(--encre); }

.preuve{
  text-align:left; background:var(--carte);
  border:2px solid var(--bord); border-radius:var(--r);
  padding:24px; max-width:600px; margin-inline:auto;
}
.preuve__titre{ margin:0 0 14px; font-weight:600; font-size:18px; }
.preuve ul{ margin:0; padding-left:22px; font-size:16.5px; color:var(--encre-doux); line-height:1.75; }
.preuve ul span{ color:var(--encre); font-weight:500; }
.preuve__pied{
  margin:16px 0 0; padding-top:16px; border-top:1px solid var(--bord); font-size:16.5px;
}

/* ---------- cabinet ---------- */
.cabinet{ background:var(--carte); border-top:1px solid var(--bord); padding-block:52px; }
.cabinet h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(25px, 4vw, 32px); margin:0 0 16px;
}
.cabinet p{ margin:0 0 24px; font-size:18.5px; color:var(--encre-doux); max-width:62ch; }
.cabinet__pts{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.cabinet__pts li{
  padding-left:34px; position:relative; font-size:17.5px; color:var(--encre-doux);
}
.cabinet__pts li::before{
  content:"✓"; position:absolute; left:0; top:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--bleu-pale); color:var(--bleu);
  font-size:14px; line-height:24px; text-align:center; font-weight:700;
}
.cabinet__pts strong{ color:var(--encre); }

/* ---------- pied ---------- */
.pied{ background:#101F2E; color:#C6D2DD; padding-block:40px; font-size:15.5px; }
.pied a{ color:#A9C8E4; }
.pied a:hover{ color:#fff; }
.pied__legal{ margin:0 0 20px; line-height:1.75; }
.pied__legal strong{ color:#fff; }
.pied__liens{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  padding-block:20px; border-block:1px solid #24384A; margin-bottom:20px;
}
.pied__liens a{ padding-block:11px; }   /* cible tactile ≥ 44 px */
.pied__mini{ margin:0; color:#8FA3B5; line-height:1.7; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:760px){
  .grille-2{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:620px){
  body{ font-size:18px; }
  .conteneur{ padding-inline:16px; }

  .entete__in{ padding-block:12px; }
  .marque__txt strong{ font-size:19px; }
  .marque__txt small{ font-size:12.5px; }
  .entete__tel{ font-size:0; padding:12px; }        /* le libellé cède, l'icône reste */
  .entete__tel span{ font-size:24px; }

  .hero{ padding-block:38px 34px; }
  .hero__chapo{ font-size:18px; }
  .hero .btn{ width:100%; }

  .reassurance{ flex-direction:column; align-items:flex-start; gap:11px; font-size:16px; }

  .questionnaire{ padding-block:34px 40px; }

  .choix--2, .choix--3{ grid-template-columns:1fr; }
  .carte{ min-height:0; padding:20px 18px; }
  .carte:not(.carte--ligne):not(.carte--case){
    flex-direction:row; text-align:left; justify-content:flex-start; gap:16px;
  }
  .carte__ico svg{ width:38px; height:38px; }
  .carte--case{ min-height:0; padding:18px 18px 18px 56px; }
  .carte--case::before, .carte--case:has(input:checked)::after{ left:16px; }
  .carte--ligne{ padding:16px 52px 16px 18px; }
  .carte--compacte{ min-height:0; }

  .consentement{ padding:20px 18px; }

  /* barre d'action fixée en bas : le bouton reste sous le pouce */
  .nav{
    position:sticky; bottom:0; z-index:20;
    margin-inline:-16px; margin-top:28px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:rgba(245,242,236,.97);
    backdrop-filter:blur(8px);
    border-top:1px solid var(--bord);
    gap:10px;
  }
  .nav #retour{ flex:0 0 auto; padding-inline:18px; }
  .btn, .btn--xl{ font-size:18px; padding-inline:20px; min-height:60px; }

  .preuve{ padding:20px 18px; }
  .pied__liens{ gap:4px 20px; }
}

@media (max-width:380px){
  .carte__lib small{ font-size:14.5px; }
  .btn, .btn--xl{ font-size:17px; }
}