/* ==========================================================================
   Isoclean — landing devis
   Repères : corps de texte à 18px minimum, cibles tactiles à 56px,
   contrastes AA, une seule action par écran.
   ========================================================================== */

:root {
  --ink:        #12242c;
  --ink-2:      #3c545f;
  --ink-3:      #6b8290;
  --line:       #dbe3e2;
  --bg:         #f4f6f5;
  --white:      #fff;

  --teal:       #0e7c82;
  --teal-dark:  #0a6167;
  --teal-pale:  #e6f2f2;
  --green:      #4f9e2f;
  --green-pale: #edf6e6;
  --amber:      #f0a202;
  --danger:     #b3261e;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --shadow: 0 24px 50px -28px rgba(9, 36, 45, .45);
  --maxw: 1140px;
  --bar: 0px; /* hauteur de la barre mobile, gérée en JS */
}

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

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

body {
  margin: 0;
  padding-bottom: var(--bar);
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }

a { color: var(--teal-dark); }
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

/* Au-delà de 1500px, une largeur figée à 1140px laisse la page flotter au
   milieu de l'écran. Les blocs de texte gardent leur propre largeur de
   lecture, seules les grilles respirent. */
@media (min-width: 1500px) { :root { --maxw: 1260px; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 14px 20px;
}
.skip:focus { left: 0; }

/* --- Variantes A/B ------------------------------------------------------ */
.v { display: none; }
html[data-variant="a"] .v-a,
html[data-variant="b"] .v-b,
html:not([data-variant]) .v-a { display: block; }

/* --- Boutons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; padding: 12px 26px;
  font: inherit; font-weight: 600; font-size: 1.0625rem;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 2px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn--primary { box-shadow: 0 8px 18px -10px rgba(14, 124, 130, .9); }
.btn--primary:hover { --btn-bg: var(--teal-dark); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 62px; font-size: 1.125rem; padding-inline: 34px; }
.btn--sm { min-height: 48px; font-size: 1rem; padding-inline: 20px; }
.btn--grow { flex: 1 1 auto; }
.btn--ghost {
  --btn-bg: #fff; --btn-fg: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink-3); }

.cta-line { margin: 44px 0 0; text-align: center; }
.cta-line--left { text-align: left; margin-top: 28px; }

/* --- Barre fixe haute --------------------------------------------------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(6px);
}
.topbar__in { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.topbar__logo { width: 116px; height: auto; }
.topbar__note { margin: 0; margin-right: auto; font-size: .95rem; color: var(--ink-2); }
@media (max-width: 860px) { .topbar { display: none; } }

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #0d1e26; }
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(8, 26, 33, .94) 0%, rgba(8, 26, 33, .86) 48%, rgba(8, 26, 33, .62) 100%);
}
.hero__in { padding-block: 44px 52px; color: #fff; }
.hero__logo { width: 150px; margin-bottom: 26px; }
.hero__title {
  font-size: clamp(1.5rem, 4.2vw, 2.6rem);
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.hero__title strong { font-weight: 700; }
.mark {
  font-style: italic;
  box-shadow: inset 0 -.12em 0 rgba(79, 158, 47, .85);
}
.hero__lead { font-size: 1.1875rem; color: #e2ecec; max-width: 34em; }
.hero__points { margin: 0 0 22px; display: grid; gap: 10px; }
.hero__points li {
  position: relative; padding-left: 34px;
  font-size: 1.0625rem; color: #dfeaea;
}
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: .28em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.hero__actions { margin: 28px 0 22px; }
.hero__reassure { margin: 12px 0 0; font-size: 1rem; color: #cadada; }
.hero__proof { margin: 0; font-size: 1rem; color: #cfdddd; }
.hero__proof strong { color: #fff; }
.stars { color: var(--amber); letter-spacing: 2px; margin-right: 6px; }
.stars--lg { font-size: 1.4rem; }

.hero__in { display: grid; gap: 26px; }
/* Les zones nommées ne concernent que la variante A. Non limitées à elle,
   grid-area créait une colonne implicite en variante B, dont la grille n'a
   aucune zone nommée : le texte s'en trouvait décalé vers la droite. */
/* Les deux variantes placent le formulaire juste sous le titre sur mobile :
   les arguments passent dessous, le formulaire reste dans le premier écran. */
.hero--a .hero__in,
.hero--b .hero__in { grid-template-areas: "copy" "form" "extra"; }
.hero--a .hero__copy,  .hero--b .hero__copy  { grid-area: copy; }
.hero--a .hero__slot,  .hero--b .hero__slot  { grid-area: form; }
.hero--a .hero__extra, .hero--b .hero__extra { grid-area: extra; }

@media (min-width: 900px) {
  .hero--a .hero__in {
    grid-template-columns: minmax(0, 1fr) 470px;
    grid-template-areas: "copy form" "extra form";
    align-content: center;
    column-gap: 46px; row-gap: 22px;
    padding-block: 54px 62px;
  }
  .hero--b .hero__in {
    grid-template-columns: minmax(0, 1fr) 500px;
    grid-template-areas: "copy form" "extra form";
    align-content: center;
    column-gap: 52px; row-gap: 20px;
    padding-block: 56px 64px;
  }
}
@media (max-width: 899px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(8, 26, 33, .93), rgba(8, 26, 33, .88)); }
  .hero__in { padding-block: 30px 40px; }
  .hero__logo { width: 124px; margin-bottom: 18px; }
  /* En variante A, le titre et le formulaire suffisent : tout ce qui suit
     repousserait le formulaire hors de l'écran. La zone est aussi retirée de
     la grille, sinon elle laisse une ligne vide et un gap sous le formulaire. */
  .hero--a .hero__extra { display: none; }
  .hero--a .hero__in { grid-template-areas: "copy" "form"; }
  /* En B les arguments restent, mais sous le formulaire. */
  .hero--b .hero__extra { margin-top: 4px; }
  .hero--b .hero__lead { font-size: 1.0625rem; }
}

/* --- Accroche au-dessus du formulaire (variante B) ----------------------- */
.formlead {
  margin: 0 0 16px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600; line-height: 1.25; color: #fff;
}

/* La variante B laisse davantage voir la photo et affirme la carte : c'est
   ce contraste, à contenu égal, qui est mis à l'épreuve face à la A. */
.hero--b .hero__scrim {
  background: linear-gradient(100deg, rgba(8, 26, 33, .92) 0%, rgba(8, 26, 33, .78) 42%, rgba(8, 26, 33, .42) 100%);
}
.hero--b .hero__lead { margin-bottom: 20px; }
.hero--b .hero__points { margin-bottom: 18px; }
.hero--b .card {
  border: 0;
  box-shadow: 0 30px 60px -24px rgba(4, 20, 26, .75);
}
.hero--b .quote__head { margin-bottom: 20px; }
.hero--b .btn--primary { --btn-bg: var(--green); box-shadow: 0 10px 22px -10px rgba(79, 158, 47, .95); }
.hero--b .btn--primary:hover { --btn-bg: #3f8425; }
.hero--b .bar > i { background: var(--green); }
.hero--b .steps li.is-on { color: #3f8425; }
.hero--b .choice:hover { border-color: var(--green); background: var(--green-pale); }
.hero--b input:focus, .hero--b textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 4px rgba(79, 158, 47, .18);
}

/* --- Carte formulaire --------------------------------------------------- */
.card {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  scroll-margin-top: 90px;
}
@media (min-width: 560px) { .card { padding: 30px 32px; } }

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 0 0 12px; padding: 0;
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
.steps li.is-on { color: var(--teal-dark); }
.bar { height: 8px; border-radius: 999px; background: #e7ecec; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 33.33%; background: var(--teal); transition: width .35s ease; }
.steps__text { margin: 10px 0 0; font-size: .95rem; color: var(--ink-2); }
.quote__head { margin-bottom: 22px; }

.step__q {
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.choices { display: grid; gap: 12px; }
@media (min-width: 420px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice {
  min-height: 64px; padding: 14px 20px;
  font: inherit; font-size: 1.1875rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: var(--r);
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--teal); background: var(--teal-pale); }

.grid2 { display: grid; gap: 16px; }
@media (min-width: 520px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.grid2 .field { margin: 0; }
label { font-size: 1rem; font-weight: 600; }
.req { color: var(--danger); }
.opt { font-weight: 400; color: var(--ink-3); }

input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; min-height: 56px; padding: 12px 14px;
  font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: #fff; border: 2px solid var(--line); border-radius: var(--r-sm);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #9fb1ba; }
input:hover, textarea:hover { border-color: #c3cfcf; }
input:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(14, 124, 130, .16); }
input[aria-invalid="true"] { border-color: var(--danger); background: #fdf5f4; }

.error { font-size: .9375rem; color: var(--danger); font-weight: 500; line-height: 1.4; }
.error:empty { display: none; }

.actions { display: flex; gap: 12px; margin-top: 22px; }
.quote__note { margin: 14px 0 0; font-size: .9375rem; color: var(--ink-2); text-align: center; }

.alert {
  margin-top: 18px; padding: 16px 18px;
  background: #fdf3f2; border: 1px solid #f0cbc7; border-left: 4px solid var(--danger);
  border-radius: var(--r-sm); color: #7d211b;
}
.alert strong { display: block; margin-bottom: 2px; }

.link-back {
  margin-top: 18px; padding: 8px 0;
  font: inherit; font-size: 1rem; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; text-decoration: underline;
}

.step--done { text-align: center; }
.done__badge {
  width: 58px; height: 58px; margin: 0 auto 16px;
  display: grid; place-items: center;
  font-size: 1.6rem; color: #15803d;
  background: var(--green-pale); border: 2px solid #bfe3ab; border-radius: 50%;
}
.done__text { color: var(--ink-2); }
.recap {
  display: inline-block; text-align: left; margin-bottom: 18px;
  padding: 14px 16px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 1rem;
}

/* --- Bandeau confiance -------------------------------------------------- */
.trust { background: var(--ink); color: #fff; }
.trust__in { padding-block: 34px; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .trust__in { grid-template-columns: auto 1fr auto; gap: 40px; } }
.trust__score { display: flex; align-items: center; gap: 14px; }
.trust__note { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 2.6rem; font-weight: 700; line-height: 1; }
.trust__label { margin: 0; font-size: .95rem; line-height: 1.35; color: #cbd9d9; }
.trust__label span { color: #93a9ac; }
.trust__text { margin: 0; font-size: 1rem; color: #cbd9d9; max-width: 34em; }
.trust__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.trust__logos img {
  height: 48px; width: auto; border-radius: 4px;
  background: #fff; padding: 5px 8px;
}

/* --- Sections ----------------------------------------------------------- */
.section { padding-block: 64px; }
.section--alt { background: var(--bg); }
.h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  margin-bottom: 32px;
}

.advantages { display: grid; gap: 34px; }
@media (min-width: 960px) { .advantages { grid-template-columns: 1.3fr .7fr; align-items: stretch; gap: 30px; } }
.advantages__list { display: grid; gap: 16px; }
@media (min-width: 560px) { .advantages__list { grid-template-columns: 1fr 1fr; gap: 18px; } }
.adv {
  padding: 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.adv__icon {
  display: grid; place-items: center;
  width: 50px; height: 50px; margin-bottom: 14px;
  color: var(--teal); background: #fff;
  border: 1px solid #cfe2e2; border-radius: 12px;
}
.adv__icon svg { width: 27px; height: 27px; }
.adv__t { font-size: 1.125rem; margin-bottom: 6px; }
.adv p { font-size: 1rem; color: var(--ink-2); }
.advantages__photo { margin: 0; height: 100%; }
.advantages__photo img {
  border-radius: var(--r-lg);
  width: 100%; height: 100%;
  object-fit: cover; min-height: 320px;
}

.split { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: .9fr 1.1fr; gap: 54px; } }
.split__media { margin: 0; }
.split__media img { border-radius: var(--r-lg); width: 100%; }
.split__copy p { color: var(--ink-2); }

.zones { display: grid; gap: 14px; }
@media (min-width: 640px) { .zones { grid-template-columns: repeat(4, 1fr); } .zone { font-size: 1rem; } }
@media (min-width: 900px) { .zone { font-size: 1.0625rem; } }
.zone {
  display: flex; align-items: center; gap: 12px;
  padding: 20px; font-size: 1.0625rem; font-weight: 600;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
}
.zone--main { background: var(--teal-pale); border-color: #b5d9da; color: var(--teal-dark); }
.zone__pin { color: var(--teal); flex: none; }
.zone__pin svg { width: 22px; height: 22px; display: block; }

/* --- Avis --------------------------------------------------------------- */
.reviews { columns: 1; column-gap: 20px; }
@media (min-width: 700px)  { .reviews { columns: 2; } }
@media (min-width: 1040px) { .reviews { columns: 3; } }
.review {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
  padding: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
}
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 1.2rem;
  color: #fff; background: #6c93d3;
}
.review__name { font-size: 1.0625rem; }
.review__text { font-size: 1rem; color: var(--ink-2); flex: 1 1 auto; }
.review__src {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .9375rem; font-weight: 600; color: var(--ink-2);
}
.review__src .g { width: 18px; height: 18px; flex: none; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: #b9c8cb; padding-block: 52px 60px; font-size: .9875rem; }
.footer__in { display: grid; gap: 34px; }
@media (min-width: 720px) { .footer__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__in { grid-template-columns: 1.6fr 1fr 1.2fr 1.4fr; gap: 40px; } }
.footer__t {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 700;
  font-size: 1rem; letter-spacing: .06em; color: #fff;
  margin-bottom: 16px;
}
.footer__links li + li { margin-top: 10px; }
.footer__links a { color: #dbe7e8; text-decoration: none; border-bottom: 1px solid rgba(219, 231, 232, .35); }
.footer__links a:hover { color: #fff; border-bottom-color: #fff; }
.footer__item { display: grid; gap: 2px; margin-bottom: 18px; }
.footer__item strong { color: #fff; font-weight: 600; }
.footer__item--icon { position: relative; padding-left: 30px; }
.footer__item--icon svg { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; fill: var(--teal); }

/* --- Barre mobile ------------------------------------------------------- */
.mobilebar {
  position: fixed; inset: auto 0 0 0; z-index: 45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -18px rgba(9, 36, 45, .8);
}
.mobilebar .btn { width: 100%; }
@media (min-width: 861px) { .mobilebar { display: none !important; } }

/* ==========================================================================
   VERSION B
   Même contenu, même wording : une autre page. Plus claire, plus aérée,
   accent vert, preuves remontées tout de suite après le formulaire.
   Tout est piloté par l'attribut posé sur <html> avant le premier rendu.
   ========================================================================== */

html[data-variant="b"] {
  --bg: #f1f6f0;
  --line: #dde7da;
  --r: 18px;
  --r-lg: 26px;
}

/* --- Hero : formulaire à gauche, promesse à droite ----------------------- */
.hero--b .hero__in { grid-template-areas: "copy" "form"; row-gap: 20px; }
@media (min-width: 900px) {
  .hero--b .hero__in {
    grid-template-columns: 500px minmax(0, 1fr);
    grid-template-areas: "form copy";
    align-items: center;
    column-gap: 60px;
    padding-block: 64px 72px;
  }
  /* Sans cela le hero se cale sur la hauteur de la carte et la photo
     n'a plus aucune présence. */
  .hero--b { min-height: 580px; }
  .hero--b .hero__in { min-height: 580px; align-content: center; }
  .hero--b .hero__copy { padding-bottom: 8px; }
}
.hero--b .hero__scrim {
  background: linear-gradient(255deg, rgba(8, 26, 33, .88) 0%, rgba(8, 26, 33, .74) 45%, rgba(8, 26, 33, .5) 100%);
}
.hero--b .hero__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.hero--b .card { border: 0; box-shadow: 0 34px 64px -26px rgba(4, 20, 26, .8); }
.hero--b .btn--primary { --btn-bg: var(--green); box-shadow: 0 10px 22px -10px rgba(79, 158, 47, .95); }
.hero--b .btn--primary:hover { --btn-bg: #3f8425; }
.hero--b .bar > i { background: var(--green); }
.hero--b .steps li.is-on { color: #3f8425; }
.hero--b .choice:hover { border-color: var(--green); background: var(--green-pale); }
.hero--b input:focus, .hero--b textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 4px rgba(79, 158, 47, .18);
}

/* --- Bandeau de réassurance, juste sous le hero -------------------------- */
.strip { background: var(--green-pale); border-bottom: 1px solid #cfe4c2; }
/* Trois colonnes de largeur égale donnaient des écarts inégaux à l'œil :
   les phrases n'ont pas la même longueur, donc le blanc restant tombait au
   mauvais endroit. On laisse chaque phrase prendre sa largeur et on répartit
   le blanc à parts égales entre elles. */
.strip__in { display: flex; flex-direction: column; gap: 14px; padding-block: 22px; }
@media (min-width: 720px) {
  /* Largeur intermédiaire : les trois phrases ne tiennent pas encore sur une
     ligne. On les centre plutôt que de les étirer, sinon la première ligne
     s'écarte d'un côté et la troisième reste seule de l'autre. */
  .strip__in {
    flex-direction: row; flex-wrap: wrap;
    justify-content: center; align-items: center;
    column-gap: 34px; row-gap: 12px;
  }
  .strip__item { flex: 0 1 auto; }
}
@media (min-width: 1160px) {
  /* Assez de place pour une seule ligne : les écarts deviennent égaux. */
  .strip__in { flex-wrap: nowrap; justify-content: space-between; column-gap: 30px; }
}
.strip__item {
  position: relative; margin: 0; padding-left: 34px;
  font-size: 1.0625rem; font-weight: 500; color: #23431a;
}
.strip__item::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* --- Les preuves passent devant ----------------------------------------- */
html[data-variant="b"] .page { display: flex; flex-direction: column; }
html[data-variant="b"] #avis      { order: 1; }
html[data-variant="b"] .trust     { order: 2; }
html[data-variant="b"] #avantages { order: 3; }
html[data-variant="b"] #metier    { order: 4; }
html[data-variant="b"] #zones     { order: 5; }

/* --- Rythme des sections ------------------------------------------------- */
html[data-variant="b"] .section { padding-block: 72px; }
html[data-variant="b"] .section--alt { background: #fff; }
html[data-variant="b"] #avantages { background: var(--bg); }
html[data-variant="b"] #zones { background: var(--bg); }
html[data-variant="b"] .h2 { text-align: center; margin-bottom: 40px; }
html[data-variant="b"] .btn--primary { --btn-bg: var(--green); }
html[data-variant="b"] .btn--primary:hover { --btn-bg: #3f8425; }
html[data-variant="b"] .adv__icon { color: #3f8425; background: var(--green-pale); border-color: #cfe4c2; }
html[data-variant="b"] .zone__pin { color: var(--green); }

/* --- Bandeau de confiance en clair -------------------------------------- */
html[data-variant="b"] .trust { background: #fff; color: var(--ink); border-block: 1px solid var(--line); }
html[data-variant="b"] .trust__label { color: var(--ink-2); }
html[data-variant="b"] .trust__label span { color: var(--ink-3); }
html[data-variant="b"] .trust__text { color: var(--ink-2); }
html[data-variant="b"] .trust__logos img { background: none; padding: 0; height: 52px; }

/* --- Avantages : quatre cartes en ligne, la photo passe en bandeau ------- */
@media (min-width: 960px) {
  html[data-variant="b"] .advantages { display: block; }
  html[data-variant="b"] .advantages__list { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
html[data-variant="b"] .adv {
  background: #fff; border: 0; border-radius: var(--r);
  padding: 26px 24px; box-shadow: 0 16px 34px -26px rgba(9, 36, 45, .55);
}
html[data-variant="b"] .advantages__photo { display: none; }

/* --- N°1 : la photo passe à droite, en grand ---------------------------- */
@media (min-width: 900px) {
  html[data-variant="b"] .split { grid-template-columns: 1.05fr .95fr; }
  html[data-variant="b"] .split__media { order: 2; }
}
html[data-variant="b"] .split__media img { border-radius: var(--r-lg); }
html[data-variant="b"] #metier .h2 { text-align: left; }
html[data-variant="b"] .cta-line--left { text-align: left; }

/* --- Zones : pastilles centrées ----------------------------------------- */
html[data-variant="b"] .zones {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
html[data-variant="b"] .zone {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 14px 24px;
}
html[data-variant="b"] .zone--main { background: var(--green-pale); border-color: #bcdcaa; color: #23431a; }

/* --- Avis : mur de citations -------------------------------------------- */
html[data-variant="b"] .review {
  position: relative; border: 0; border-radius: var(--r);
  padding: 30px 26px 24px;
  box-shadow: 0 18px 38px -28px rgba(9, 36, 45, .6);
}
html[data-variant="b"] .review::before {
  content: "\201C"; position: absolute; top: 4px; right: 20px;
  font-family: "Source Serif 4", Georgia, serif; font-size: 4.5rem; line-height: 1;
  color: var(--green); opacity: .18;
}
html[data-variant="b"] .avatar { background: var(--green); }
html[data-variant="b"] .review__src { border-top-color: var(--line); }

/* --- Consigne du formulaire ---------------------------------------------
   En version A, le titre du hero porte déjà la même phrase : seule la
   version B l'affiche. */
.quote__lead {
  margin: 0 0 18px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem; font-weight: 600; line-height: 1.3;
}
html[data-variant="a"] .quote__lead { display: none; }
.mark--sombre { box-shadow: inset 0 -.1em 0 rgba(79, 158, 47, .55); }

/* --- Label officiel posé sur la photo ------------------------------------ */
.split__media { position: relative; }
/* Sélecteur aussi spécifique que « .split__media img », qui impose sinon
   une largeur de 100% et des angles arrondis à toutes les images. */
.split__media .label-sap {
  position: absolute; top: 16px; left: 16px;
  width: 132px; height: auto;
  border-radius: 0;
  filter: drop-shadow(0 6px 14px rgba(4, 20, 26, .3));
}
@media (max-width: 899px) {
  .split__media .label-sap { width: 112px; top: 12px; left: 12px; }
}

/* --- Quatre régions : toujours deux colonnes, même sur petit écran ------- */
.choices--regions { grid-template-columns: 1fr 1fr; }
.choices--regions .choice { min-height: 58px; padding: 12px 10px; font-size: 1.0625rem; }
@media (min-width: 560px) {
  .choices--regions .choice { min-height: 64px; font-size: 1.125rem; }
}

/* « Autre région » : cinquième choix, sur toute la largeur et plus discret
   que les quatre zones réellement couvertes. */
.choice--autre {
  grid-column: 1 / -1;
  min-height: 52px;
  font-size: 1rem; font-weight: 500; color: var(--ink-2);
  border-style: dashed;
}
.choice--autre:hover { border-style: solid; border-color: var(--ink-3); background: var(--bg); }
html[data-variant="b"] .choice--autre:hover { border-color: var(--ink-3); background: var(--bg); }

/* --- Éligibilité : Oui / Non (pages régionales) --------------------------
   Deux cibles franches et de même taille : à 60 ans comme à 75, on ne doit
   pas avoir à viser. « Oui » est mis en avant parce que c'est la réponse de
   la quasi-totalité des visiteurs — la page a été servie sur leur ville. */
.choices--binaire { grid-template-columns: 1fr 1fr; gap: 14px; }
.choices--binaire .choice {
  min-height: 72px;
  font-size: 1.25rem; font-weight: 700;
}
.choice--oui { border-color: var(--teal); background: var(--teal-pale); color: var(--ink); }
html[data-variant="b"] .choice--oui { border-color: var(--green); background: var(--green-pale); }
.choice--non { color: var(--ink-2); }

/* Un « Non » n'est pas une fin : on rouvre les autres villes couvertes. */
.relance { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.relance__q {
  margin: 0 0 12px;
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
}

/* Ne pas couvrir une région n'est pas une erreur du visiteur : ton neutre,
   pas le rouge réservé aux champs mal remplis. */
.alert--info {
  background: var(--bg);
  border-color: var(--line);
  border-left-color: var(--teal);
  color: var(--ink);
}
.alert--info span { color: var(--ink-2); }
html[data-variant="b"] .alert--info { border-left-color: var(--green); }

/* ==========================================================================
   PAGES RÉGIONALES (Google) — sections propres à la version B
   ========================================================================== */

/* --- Le lieu, annoncé avant même le titre --------------------------------
   Une phrase, pas une pastille : la gélule arrondie au point clignotant est
   un tic de logiciel. Nos lecteurs ont entre 50 et 70 ans et lisent une
   information, ils ne décodent pas un badge de statut. */
.hero__lieu {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 16px;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.45;
  color: #dcecd2;
}
.hero__pin {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
  fill: #7ed957;
}

/* --- Le crédit d'impôt, dès le premier écran -----------------------------
   C'est l'argument qui divise la facture par deux : il ne doit pas attendre
   le milieu de page. Le logo officiel fait le travail de preuve que trois
   lignes de texte ne feraient pas. */
.hero__credit {
  display: flex; align-items: center; gap: 16px;
  margin-top: 22px; padding: 14px 18px 14px 14px;
  background: rgba(8, 28, 35, .62);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
}
/* Le logo officiel est fait pour un fond clair : sur la photo sombre du hero
   il se noyait. On lui rend sa plaque blanche. */
.hero__credit-logo {
  flex: 0 0 auto; width: 104px; height: auto;
  padding: 7px 9px; background: #fff; border-radius: 9px;
  box-shadow: 0 4px 12px rgba(4, 20, 26, .35);
}
.hero__credit-txt {
  margin: 0; font-size: .9375rem; line-height: 1.5; color: #dbe8d5;
}
.hero__credit-txt strong { display: block; font-size: 1.0625rem; color: #fff; }
.hero__credit-plus { display: block; margin-top: 3px; }
/* Sur un téléphone, la version B doit garder son formulaire dans le premier
   écran : on ne garde que l'argument, le détail attend plus bas. */
@media (max-width: 719px) {
  .hero__credit { gap: 13px; margin-top: 18px; padding: 11px 14px; }
  .hero__credit-logo { width: 86px; padding: 6px 8px; }
  .hero__credit-plus { display: none; }
  .hero__credit-txt strong { font-size: 1rem; }
}
.hero--local .hero__bg { object-position: center 40%; }
.hero--local .hero__title { margin-bottom: 16px; }

/* --- Ancrage local : l'adresse et sa carte -------------------------------
   Une adresse qu'on peut vérifier sur un plan vaut mieux qu'une adresse
   écrite en petit dans le pied de page. Le plan est une image fabriquée à
   partir d'OpenStreetMap : rien à charger chez un tiers, rien à attendre. */
.carte {
  margin-top: 40px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--sh-1);
}
.carte__vue { display: block; background: var(--bg); }
/* Pas de recadrage : la mention OpenStreetMap est dans le coin de l'image,
   et une image rognée perdrait son coin. */
.carte__vue img { display: block; width: 100%; height: auto; }
.carte__pied {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  padding: 18px 22px; border-top: 1px solid var(--line);
}
.carte__adresse { margin: 0; font-size: 1.0625rem; color: var(--ink-2); line-height: 1.5; }
.carte__adresse strong { color: var(--ink); }
.carte__lien {
  font-weight: 700; color: #3d7a24;
  text-decoration: underline; text-underline-offset: 3px;
}
/* Les crédits photo vivent en bas de page : discrets, mais la licence
   Creative Commons en fait une obligation, pas une décoration. */
.footer__credits {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 0;
  font-size: .75rem; line-height: 1.6; color: rgba(255, 255, 255, .42);
}
.footer__credits a { color: inherit; text-decoration: underline; }

/* --- Deux vues de la ville ----------------------------------------------
   Le visiteur doit reconnaître chez lui en une seconde : c'est ce qui
   sépare « une pub de plus » d'« une entreprise de ma ville ». */
.ville__intro {
  max-width: 62ch; margin: 0 auto 32px;
  font-size: 1.125rem; color: var(--ink-2); text-align: center;
}
.ville__photos { display: grid; gap: 24px; }
@media (min-width: 760px) { .ville__photos { grid-template-columns: 1fr 1fr; gap: 28px; } }
.ville__photo { margin: 0; }
.ville__photo img {
  display: block; width: 100%; height: 260px; object-fit: cover;
  border-radius: var(--r); box-shadow: var(--sh-1);
}
@media (min-width: 760px) { .ville__photo img { height: 300px; } }
.ville__photo figcaption {
  margin-top: 12px; font-size: 1rem; color: var(--ink-2); line-height: 1.5;
}

/* --- Zones couvertes ----------------------------------------------------- */
.couverture__cols { display: grid; gap: 28px; }
@media (min-width: 720px) { .couverture__cols { grid-template-columns: 1fr 1fr; gap: 40px; } }
.couverture__t {
  font-size: 1.125rem; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--green-pale);
}
.puces { display: grid; gap: 10px; }
@media (min-width: 480px) { .puces { grid-template-columns: 1fr 1fr; } }
.puces li {
  position: relative; padding-left: 26px;
  font-size: 1.0625rem; color: var(--ink-2);
}
.puces li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
}
.couverture__note {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 1rem; color: var(--ink-2);
}

/* --- Preuves ------------------------------------------------------------- */
.preuves__liste { display: grid; gap: 20px; }
@media (min-width: 640px)  { .preuves__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .preuves__liste { grid-template-columns: repeat(3, 1fr); } }
.preuve {
  padding: 26px 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 16px 34px -28px rgba(9, 36, 45, .5);
}
.preuve__chiffre {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 42px; margin-bottom: 14px; padding: 0 12px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1;
  color: #2f6d1a; background: var(--green-pale);
  border-radius: 10px;
}
.preuve__chiffre svg { width: 24px; height: 24px; }
.preuve__t { font-size: 1.0625rem; margin-bottom: 8px; }
.preuve p { font-size: 1rem; color: var(--ink-2); }

/* --- Déroulé ------------------------------------------------------------- */
.etapes { display: grid; gap: 24px; counter-reset: etape; }
@media (min-width: 820px) { .etapes { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.etape { position: relative; padding-top: 4px; }
.etape__n {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 14px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.3rem; font-weight: 700; color: #fff;
  background: var(--green); border-radius: 50%;
}
.etape__t { font-size: 1.125rem; margin-bottom: 8px; }
.etape p { font-size: 1rem; color: var(--ink-2); }

.process__photos { display: grid; gap: 14px; margin: 40px 0 0; }
@media (min-width: 720px) { .process__photos { grid-template-columns: repeat(3, 1fr); } }
.process__photos img {
  width: 100%; height: 100%; min-height: 200px;
  object-fit: cover; border-radius: var(--r);
}

/* Les sections régionales suivent le rythme clair de la version B. */
html[data-variant="b"] .local      { background: #fff; }
html[data-variant="b"] .ville      { background: var(--bg); }
html[data-variant="b"] .couverture { background: #fff; }
html[data-variant="b"] .preuves    { background: var(--bg); }
html[data-variant="b"] .process    { background: #fff; }
html[data-variant="b"] .local .h2,
html[data-variant="b"] .split__copy .h2 { text-align: left; }