/* ============================================================
   Assu Santéo — feuille de style unique
   Mobile-first, sans framework, aucune dépendance externe.
   ============================================================ */

:root{
  --foret:#12453A;
  --nuit:#0E2E27;
  --vert:#1B6A55;
  --vert-pale:#E7F1ED;
  --terracotta:#C9552F;
  --terracotta-clair:#E0714A;
  --terracotta-fonce:#A8441F;
  --encre:#16302A;
  --encre-2:#4A5C55;
  --erreur:#A3231A;
  --bordure:#D7E3DE;
  --fond:#F4F8F6;
  --blanc:#FFFFFF;

  --police:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --largeur:1180px;
  --marge:20px;
  --colonne-form:540px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--police);font-size:18px;line-height:1.65;
  color:var(--encre);background:var(--blanc);border-top:4px solid var(--terracotta);
}
img{max-width:100%;display:block}
a{color:var(--vert)}
h1,h2,h3{margin:0 0 .5em;line-height:1.18;letter-spacing:-.022em;font-weight:700}
h1{font-size:1.625rem}
h2{font-size:1.4375rem}
h3{font-size:1.125rem;letter-spacing:-.01em}
p{margin:0 0 1em}
.contenu{max-width:var(--largeur);margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
:focus-visible{outline:3px solid var(--terracotta);outline-offset:2px;border-radius:4px}

/* ---------- Entête ---------- */
.entete{background:var(--blanc);border-bottom:1px solid var(--bordure)}
.entete .contenu{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:12px;padding-bottom:12px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--encre)}
.marque svg{flex:none}
.marque-nom{font-size:1.375rem;font-weight:700;letter-spacing:-.03em;line-height:1.05;
  display:block;color:var(--foret)}
.marque-nom .prefixe{color:var(--vert);font-weight:400}
.marque-sous{font-size:.6875rem;letter-spacing:.02em;color:var(--vert);line-height:1.2;display:block}
.entete-note{font-size:.875rem;color:var(--encre-2);text-align:right;display:none;margin:0}

/* ---------- Hero ---------- */
.hero{background:var(--foret);color:var(--blanc);padding:20px 0 28px}
.hero h1{font-size:1.625rem;margin-bottom:10px;color:var(--blanc)}
.hero-sous{font-size:1rem;color:#CFE4DB;margin-bottom:14px}
.atouts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px}
.atouts li{display:flex;align-items:flex-start;gap:9px;font-size:.9375rem;font-weight:600;color:#EAF4F0}
.atouts svg{flex:none;margin-top:2px}
.photo-hero{display:none}
.hero-partenaires{display:none}

/* ---------- Ancrage tarifaire ---------- */
.ancrage{display:inline-flex;align-self:flex-start;align-items:baseline;gap:6px;background:var(--terracotta);
  color:var(--blanc);border-radius:999px;padding:7px 18px;margin:0 0 10px;
  font-size:1.25rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ancrage .unite{font-size:.9375rem;font-weight:600}
.ancrage sup{font-size:.75em;line-height:0;top:-.4em;position:relative}
/* Mention associée à l'ancrage tarifaire — rendue dans le pied de page.
   Volontairement plus lisible que le bloc éditeur qui la suit. */
.pied .mention-etoile{font-size:.875rem;line-height:1.55;color:#C4DBD2;margin:0 0 14px;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12);max-width:78ch}

/* ---------- Bandeau « Ce qui se passe ensuite » ---------- */
.hero .suite{display:none}
.suite{margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.suite-titre{font-size:.8125rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#9CC4B5;margin:0 0 10px}
.suite-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.suite-liste li{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:start}
.suite-liste .num{width:26px;height:26px;border-radius:50%;background:var(--terracotta-clair);
  color:var(--foret);font-size:.9375rem;font-weight:700;display:flex;align-items:center;
  justify-content:center}
.suite-liste b{display:block;font-size:.9375rem;color:#FFFFFF;line-height:1.3}
.suite-liste em{display:block;font-style:normal;font-size:.8125rem;color:#9CC4B5;line-height:1.4;
  margin-top:2px}
.suite-liste .picto{display:none}

/* variante sur fond clair, pour la section mobile */
.section-suite .suite{margin:0;padding:0;border:0}
.section-suite .suite-titre{display:none}
.section-suite .suite-liste .num{background:var(--vert);color:var(--blanc)}
.section-suite .suite-liste b{color:var(--encre)}
.section-suite .suite-liste em{color:var(--encre-2)}
.section-suite .suite-liste{gap:16px}

/* ---------- Carte formulaire ---------- */
.carte{background:var(--blanc);border-radius:16px;box-shadow:0 12px 34px rgba(6,36,29,.3);
  overflow:hidden;color:var(--encre)}
.carte-tete{padding:16px 20px 13px;border-bottom:1px solid var(--bordure)}
.carte-tete h2{font-size:1.1875rem;margin:0 0 2px;color:var(--foret)}
.carte-tete p{margin:0;font-size:.9375rem;color:var(--encre-2)}
.carte-corps{padding:18px 20px 20px}

fieldset{border:0;padding:0;margin:0 0 18px}
fieldset:last-of-type{margin-bottom:14px}
legend{padding:0;font-size:.8125rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--vert);margin-bottom:10px}
.champ{margin-bottom:14px}
.champ label{display:block;font-size:1rem;font-weight:600;margin-bottom:5px;color:var(--encre)}
.champ input,.champ select{
  width:100%;min-height:52px;padding:10px 12px;font-family:inherit;font-size:1.0625rem;
  color:var(--encre);background:var(--blanc);border:1.5px solid var(--bordure);border-radius:8px}
.champ select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231B6A55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px}
.champ input:focus,.champ select:focus{border-color:var(--vert);outline:none;
  box-shadow:0 0 0 3px rgba(27,106,85,.18)}
.champ input::placeholder{color:#8C9C96}
[data-swz-error]{margin:5px 0 0;font-size:.875rem;line-height:1.4;color:var(--erreur);font-weight:600}
[data-swz-error]:empty{display:none}
.duo{display:grid;grid-template-columns:1fr;gap:0}

.bouton{display:inline-flex;align-items:center;justify-content:center;background:var(--terracotta);
  color:var(--blanc);font-family:inherit;font-size:1.0625rem;font-weight:700;text-decoration:none;
  padding:0 26px;min-height:58px;border-radius:8px;border:0;cursor:pointer;width:100%;
  transition:background .15s}
.bouton:hover,.bouton:focus{background:var(--terracotta-fonce);color:var(--blanc)}

.mention-form{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;
  font-size:.875rem;line-height:1.5;color:var(--encre-2)}
.mention-form svg{flex:none;margin-top:2px}

/* ---------- Sections ---------- */
section{padding:40px 0}
.section-claire{background:var(--fond)}
.titre-section{font-size:1.4375rem;margin-bottom:6px;color:var(--foret)}
.intro-section{color:var(--encre-2);margin-bottom:24px;max-width:36em}

.etapes{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:etape}
.etapes li{counter-increment:etape;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.etapes li::before{content:counter(etape);grid-row:span 2;width:44px;height:44px;border-radius:50%;
  background:var(--vert);color:var(--blanc);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1.125rem}
.etapes h3{margin:6px 0 4px}
.etapes p{margin:0;color:var(--encre-2);font-size:1rem}

.raisons{display:grid;gap:20px}
.raison{border-left:3px solid var(--terracotta);padding-left:16px}
.raison h3{margin-bottom:4px}
.raison p{margin:0;color:var(--encre-2);font-size:1rem}
.photo-section{display:block;width:100%;height:auto;margin:28px auto 0;border-radius:12px}

.garanties{display:grid;gap:14px;margin-bottom:18px}
.tuile{background:var(--blanc);border:1px solid var(--bordure);border-top:3px solid var(--vert);
  border-radius:0 0 8px 8px;padding:18px}
.tuile svg{margin-bottom:8px}
.tuile h3{margin-bottom:4px}
.tuile p{margin:0;font-size:.9375rem;color:var(--encre-2)}
.note{font-size:.9375rem;color:var(--encre-2);margin:0}

.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.pastille{background:var(--blanc);border-radius:8px;height:56px;display:flex;
  align-items:center;justify-content:center;padding:6px 8px}
.section-partenaires .pastille{border:1px solid var(--bordure)}
.pastille img{max-width:100%;width:auto;height:auto;object-fit:contain}
.l-allianz{max-height:26px}
.l-axa{max-height:38px}
.l-swiss{max-height:38px}
.l-santiane{max-height:22px}

.faq details{border-bottom:1px solid var(--bordure);padding:4px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.0625rem;padding:14px 34px 14px 0;
  position:relative;list-style:none;color:var(--foret)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:22px;width:11px;height:11px;
  border-right:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq .reponse{padding:0 0 16px;color:var(--encre-2);font-size:1rem}
.faq .reponse p:last-child{margin-bottom:0}

.rappel{background:var(--foret);color:var(--blanc);text-align:center}
.rappel h2{color:var(--blanc);font-size:1.4375rem}
.rappel p{color:#CFE4DB;max-width:32em;margin:0 auto 22px}
.rappel .bouton{width:auto;padding:0 34px}

.barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--blanc);
  border-top:1px solid var(--bordure);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(6,36,29,.16);transform:translateY(110%);transition:transform .25s ease}
.barre-mobile.visible{transform:translateY(0)}
.barre-mobile .bouton{min-height:54px}

/* ---------- Pied de page ---------- */
.pied{background:var(--nuit);color:#9DC0B4;font-size:.9375rem;padding:32px 0 40px}
.pied .marque-nom{color:var(--blanc)}
.pied .marque-nom .prefixe{color:#8FB8A9}
.pied .marque-sous{color:#7EA79A}
.pied nav{margin:20px 0 18px;display:grid;gap:11px}
.pied nav a{color:#DCEAE5;text-decoration:underline;text-underline-offset:3px}
.pied .mentions{font-size:.8125rem;line-height:1.6;color:#8FB8A9;margin:0 0 10px}
.pied .mentions a{color:#DCEAE5}

/* ---------- Pages secondaires ---------- */
.page-simple{max-width:760px;margin:0 auto;padding:44px var(--marge) 56px}
.page-simple h1{font-size:1.75rem;color:var(--foret)}
.page-simple h2{font-size:1.25rem;color:var(--foret);margin-top:1.6em}
.page-simple li{margin-bottom:.4em}
.merci{text-align:center;max-width:640px;margin:0 auto;padding:64px var(--marge) 72px}
.merci .rond{width:76px;height:76px;border-radius:50%;background:var(--vert-pale);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.merci h1{font-size:1.75rem;color:var(--foret)}
.merci p{color:var(--encre-2)}
.merci .bouton{width:auto;padding:0 30px;margin-top:12px}

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

/* ============================================================
   Desktop
   ============================================================ */
@media (min-width:900px){
  :root{--marge:32px}
  h1{font-size:2.625rem}
  .entete-note{display:block}
  .entete .contenu{padding-top:16px;padding-bottom:16px}

  .hero{padding:48px 0 56px}
  .hero .contenu{display:grid;grid-template-columns:minmax(0,1fr) var(--colonne-form);
    gap:48px;align-items:stretch}
  /* L'espace libre de la colonne gauche est réparti entre les blocs :
     ils se recalent seuls si la hauteur du formulaire change. */
  .colonne-hero{display:flex;flex-direction:column;justify-content:flex-start;gap:26px}
  .colonne-hero > *{margin-bottom:0}
  .colonne-hero .atouts{margin-bottom:0}
  .hero h1{font-size:2.5rem;margin-bottom:0}
  .hero-sous{font-size:1.0625rem;margin-bottom:0}
  .atouts{gap:10px;margin-bottom:18px}
  .atouts li{font-size:1.0625rem}

  .ancrage{font-size:1.5rem;padding:8px 22px;margin-bottom:0}
  .ancrage .unite{font-size:1.0625rem}
  .photo-hero{display:flex;justify-content:center;margin-bottom:0}
  .photo-hero img{width:500px;height:350px;object-fit:cover;border-radius:12px}

  .hero-partenaires{display:block;margin-top:6px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.18)}
  .hero-partenaires p{font-size:.9375rem;color:#9CC4B5;margin:0 0 12px}
  .hero-partenaires .logos{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:0}
  .hero-partenaires .l-allianz{max-height:24px}
  .hero-partenaires .l-axa{max-height:34px}
  .hero-partenaires .l-swiss{max-height:38px}
  .hero-partenaires .l-santiane{max-height:19px}

  .hero .suite{display:block;margin-top:0}
  .hero .suite-liste em{display:none}
  .hero .suite-liste{counter-reset:etape-hero}
  .hero .suite-liste li{display:block;text-align:center;counter-increment:etape-hero}
  .hero .suite-liste b::before{content:counter(etape-hero) ". ";color:var(--terracotta-clair)}
  .hero .suite-liste .num{display:none}
  .hero .suite-liste .picto{display:block;margin:0 auto 8px}
  .hero .suite-liste b{font-size:.875rem}
  .section-suite{display:none}
  .suite-liste{grid-template-columns:repeat(3,1fr);gap:16px}
  .suite-liste li{grid-template-columns:30px 1fr}
  .duo{grid-template-columns:1fr 1fr;gap:0 14px}

  section{padding:64px 0}
  .titre-section{font-size:1.875rem}
  .etapes{grid-template-columns:repeat(3,1fr);gap:32px}
  .etapes li{display:block}
  .etapes li::before{margin-bottom:12px}
  .etapes h3{margin-top:0}
  .raisons{grid-template-columns:repeat(2,1fr);gap:28px 36px}
  .photo-section{margin-top:34px}
  .garanties{grid-template-columns:repeat(4,1fr)}
  .faq{max-width:820px}
  .pied nav{grid-auto-flow:column;justify-content:start;gap:26px}
  .pied .mentions{max-width:78ch}
  .barre-mobile{display:none}
}