/* ============================================================
   J.A Immobilier, Jérémy Autié, landing estimation
   Palette et échelle d'espacement reprises de la landing
   « Immobilière du Parc » fournie comme référence.
   Typos Outfit + Plus Jakarta Sans. Conçu par Adomia.
   ============================================================ */

:root {
  /* Charte de J.A Immobilier : or #ba9755 et noir #010000.
     L'or ne porte jamais de texte sur fond clair, son contraste avec le blanc
     n'est que de 2,75:1. Il sert aux aplats, aux icônes et aux fonds sombres.
     --c-primary-dark est le même or assombri à 5:1, pour les liens et les
     mots mis en valeur dans les titres. Le noir porte l'action. */
  --c-primary: #ba9755;
  --c-primary-dark: #8a6a2c;
  --c-primary-soft: #f6efe2;
  --c-primary-glow: rgba(1, 0, 0, 0.4);
  --c-secondary: #010000;
  --c-secondary-soft: #efe9de;
  --c-bg: #faf8f4;
  --c-surface: #ffffff;
  --c-surface-alt: #f3efe8;
  --c-deep: #010000;
  --c-deep-2: #000000;
  --c-text: #141210;
  --c-muted: #6b6459;
  --c-border: rgba(20, 18, 16, 0.09);
  --c-border-strong: rgba(20, 18, 16, 0.18);
  --c-amber: #ba9755;
  --c-error: #c8321f;
  --c-success: #177a45;

  --sh-ambient: 0 1px 1px rgba(0, 0, 0, .02), 0 8px 24px -12px rgba(0, 0, 0, .08), 0 40px 90px -40px rgba(0, 0, 0, .14);
  --sh-float: 0 2px 4px rgba(0, 0, 0, .03), 0 24px 60px -24px rgba(0, 0, 0, .18), 0 80px 160px -60px rgba(0, 0, 0, .22);
  --sh-xs: 0 1px 2px rgba(15, 23, 42, .04);

  --grad-btn: linear-gradient(135deg, #231d17 0%, #010000 100%);
  --grad-deep: linear-gradient(140deg, #141210 0%, #010000 55%, #1c1610 100%);

  --font-title: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  /* Echelle 4/8 px et paliers de rythme vertical (16 / 24 / 32 / 48),
     conformement aux regles spacing-scale et section-spacing-hierarchy. */
  --sp-1: .25rem;   /* 4  */
  --sp-2: .5rem;    /* 8  */
  --sp-3: .75rem;   /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */

  --container: 76rem;
  --r-xs: .55rem;
  --r-sm: .8rem;
  --r-md: 1.1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-2xl: 2.5rem;
  --hdr-h: 4.6rem;

  --out: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--c-primary); color: #fff; }

/* Échelle d'espacement de la référence */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
/* Un seul rythme vertical entre sections, sans exception. */
.section { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
/* Le header est colle en haut : sans cette marge, une ancre cache le titre vise. */
.section[id] { scroll-margin-top: calc(var(--hdr-h) + 1rem); }
/* Le CTA du header ramene au tout debut de la page, header compris. */
#haut { scroll-margin-top: var(--hdr-h); }
/* Sur mobile, 80 px en haut et en bas font 160 px entre deux sections :
   c'est trop sur un petit ecran, on resserre. */
@media (max-width: 48rem) { .section { padding-block: 3.25rem; } }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--c-deep); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 .75rem 0;
}
.skip:focus { left: 0; }

/* ---------- Typographie ---------- */
h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600; line-height: 1.04;
  letter-spacing: -.03em; color: var(--c-text);
  text-wrap: balance;
}
/* Hero en deux colonnes : le titre partage la largeur avec le simulateur, il ne
   peut pas prendre l'echelle d'un hero pleine largeur. Valeurs reprises de la
   page estimation du site Antonas, qui a exactement la meme structure. */
.h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.h2 { font-size: clamp(1.85rem, 3.2vw, 2.6rem); letter-spacing: -.024em; }
.h3 { font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 600; }
.h1 em, .h2 em { font-style: normal; color: var(--c-primary-dark); }
.lead { font-size: 1.05rem; color: var(--c-muted); line-height: 1.55; max-width: 34rem; }

/* align-self et width limitent la pastille a son contenu : dans un parent en
   flex-column, un inline-flex est etire sur toute la largeur par defaut. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  align-self: flex-start; width: fit-content;
  padding: .35rem .8rem; border-radius: 999px;
  font-family: var(--font-title);
  font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-primary-dark); background: var(--c-primary-soft);
}
.eyebrow::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--c-primary); flex: none; }
.on-dark .eyebrow { background: rgba(255, 255, 255, .12); color: #d4b57e; }
.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 1rem; }
h1 + .lead, h2 + .lead, h3 + p { margin-top: .9rem; }
.head-center { text-align: center; max-width: 44rem; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.head-center .lead { margin-inline: auto; font-size: 1.05rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-title); font-weight: 600; font-size: .97rem;
  padding: .9rem 1.5rem; border-radius: 999px; text-decoration: none;
  transition: transform .2s var(--out), box-shadow .2s var(--out), background .2s var(--out), border-color .2s var(--out);
  position: relative;
}
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 18px -8px var(--c-primary-glow); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--c-primary-glow); }
.btn-light { background: #fff; color: var(--c-primary-dark); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--sh-ambient); }
.btn-ghost { box-shadow: 0 0 0 1.5px var(--c-border-strong) inset; color: var(--c-text); background: transparent; }
.btn-ghost:hover { box-shadow: 0 0 0 1.5px var(--c-primary) inset; color: var(--c-primary-dark); }
.on-dark .btn-ghost, .footer-call { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3) inset; color: #fff; }
.on-dark .btn-ghost:hover, .footer-call:hover { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .65) inset; color: #fff; }
.btn-wide { width: 100%; }
.btn-xl { padding: 1.05rem 1.8rem; font-size: 1.02rem; }
.btn-sm { padding: .6rem 1.15rem; font-size: .9rem; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.btn .arrow { transition: transform .2s var(--out); }
.btn:hover .arrow { transform: translateX(3px); }
.spinner {
  display: none; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn-label, .btn.is-loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Hero de la page d'accueil ----------
   Pas de simulateur ici : le visiteur cherchait un agent, pas un calculateur.
   Colonne unique, centree, tout le poids sur la promesse et les deux actions. */
.home-hero {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem);
  background: linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-bg) 62%);
}
.home-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero .h1 { margin-top: var(--sp-4); max-width: 18ch; }
.home-hero .lead { margin-top: var(--sp-4); max-width: 62ch; }
.home-points {
  margin-top: var(--sp-5); display: grid; gap: .7rem;
  text-align: left; max-width: 44ch;
}
.home-actions { margin-top: var(--sp-6); justify-content: center; flex-wrap: wrap; }
.home-reassure { margin-top: var(--sp-5); justify-content: center; }
@media (max-width: 48rem) {
  .home-hero { padding-block: 2.5rem 2.25rem; }
  .home-actions .btn { width: 100%; }
}

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(246, 248, 252, .85); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.header.is-scrolled { border-bottom-color: var(--c-border); box-shadow: 0 4px 20px rgba(15, 23, 42, .04); }
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--hdr-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand img { height: 2.25rem; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand-txt b { font-family: var(--font-title); font-size: 1.02rem; font-weight: 600; color: var(--c-text); letter-spacing: -.02em; }
.brand-txt small { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); }
/* ---------- Navigation ----------
   Liens d'ancre vers les sections de la page. Le trait sous le lien actif est
   pose par le scroll-spy de site.js, qui ajoute aria-current sur la section vue. */
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a {
  text-decoration: none; font-family: var(--font-title); font-size: .93rem; font-weight: 500;
  color: var(--c-muted); padding-block: .4rem; position: relative; transition: color .15s var(--out);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--c-primary-dark); }
.nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2.5px;
  background: var(--c-primary); border-radius: 2px;
}
.header-actions { display: flex; align-items: center; gap: .75rem; }
.header-tel {
  display: inline-flex; align-items: center; gap: .55rem; text-decoration: none;
  font-family: var(--font-title); font-weight: 600; color: var(--c-text);
  padding: .6rem 1.1rem; border-radius: 999px;
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs);
  background: var(--c-surface); transition: box-shadow .2s var(--out);
}
.header-tel:hover { box-shadow: 0 0 0 1.5px var(--c-primary) inset; }
.header-tel svg { width: 1.05rem; height: 1.05rem; color: var(--c-primary); }
/* Le libelle du bouton d'appel ne doit jamais passer a la ligne. */
.header-tel span { white-space: nowrap; }
.brand-txt small { white-space: nowrap; }
/* La nav et le bouton d'estimation sortent des que la barre se serre : la marque
   et le bouton d'appel passent avant. Tout reste atteignable en faisant defiler,
   et la barre d'action mobile prend le relais en bas d'ecran. */
@media (max-width: 68rem) { .nav { display: none; } }
@media (max-width: 52rem) { .header-est { display: none; } }
@media (max-width: 40rem) {
  .header-tel { padding: .55rem .95rem; font-size: .88rem; }
  /* Sur petit ecran, la ville sort du bloc de marque : la place manque. */
  .brand-ville { display: none; }
  .brand img { height: 1.95rem; }
  .brand-txt b { font-size: .94rem; }
}

/* ---------- Badge avis Google ---------- */
.gbadge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--c-surface); border-radius: 999px; padding: .4rem .9rem .4rem .6rem;
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs);
  font-size: .86rem; color: var(--c-muted);
}
.gbadge .g-logo { width: 1.05rem; height: 1.05rem; flex: none; }
.gbadge .stars { color: var(--c-amber); letter-spacing: .06em; font-size: .88rem; }
.gbadge b { color: var(--c-text); }

/* ---------- Hero + simulateur ---------- */
.sim-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem);
  /* Le hero occupe la hauteur de l'ecran, sur ordinateur comme sur mobile. */
  min-height: calc(100vh - var(--hdr-h));
  min-height: calc(100svh - var(--hdr-h));
  display: flex; align-items: center;
}
.sim-hero-in { width: 100%; }
.sim-hero::before {
  content: ""; position: absolute; inset: -35% -10% auto -10%; height: 80%;
  background: radial-gradient(58% 58% at 18% 18%, rgba(186, 151, 85, .18), transparent 70%),
              radial-gradient(46% 46% at 88% 6%, rgba(186, 151, 85, .10), transparent 70%);
  pointer-events: none;
}
.sim-hero-in {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
  grid-template-areas: "copy sim" "lead sim" "points sim";
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 4vw, 4rem); row-gap: 1.25rem;
  align-items: start;
}
.sim-hero-copy {
  grid-area: copy; padding-top: clamp(.25rem, 1.5vw, 1.25rem);
  /* Colonne : la puce des avis et la pastille restent l'une sous l'autre.
     En bloc, deux inline-flex se placeraient cote a cote sur la meme ligne. */
  display: flex; flex-direction: column; align-items: flex-start;
}
.sim-hero-copy .h1 { margin-bottom: 0; }
.hero-gbadge { margin-bottom: var(--sp-4); }
/* Quand la photo est chargee, le pictogramme de repli est masque. */
.hero-aside { grid-area: points; display: grid; gap: var(--sp-4); align-content: start; justify-items: start; }
.hero-lead { grid-area: lead; font-size: 1.15rem; line-height: 1.55; max-width: 32rem; }
.sim-shell { grid-area: sim; position: relative; align-self: center; }
.sim-points { display: grid; gap: .6rem; }
.sim-points li { display: flex; align-items: flex-start; gap: .7rem; color: var(--c-muted); font-size: .95rem; }
.sim-points svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--c-primary); margin-top: .2rem; }

@media (max-width: 64rem) {
  .sim-hero-in {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "sim" "lead" "points";
    grid-template-rows: auto;
    row-gap: 1.4rem;
  }
  .sim-hero-copy { padding-top: 0; }
  /* En colonne unique, le formulaire ne s'étire pas sur toute la largeur. */
  .sim-shell, .hero-lead, .sim-points { max-width: 38rem; }
}

/* Mobile : le hero occupe la hauteur de l'écran, simulateur compris.
   100svh = hauteur visible réelle, barres du navigateur déduites. */
@media (max-width: 56.25rem) {
  .sim-hero {
    min-height: calc(100vh - var(--hdr-h));
    min-height: calc(100svh - var(--hdr-h));
    display: flex; align-items: center;
    padding-block: 1.25rem 2rem;
  }
  .sim-hero-in { width: 100%; row-gap: 1.1rem; }
  .sim-hero-copy .gbadge { margin-bottom: .7rem !important; padding: .3rem .75rem .3rem .5rem; font-size: .78rem; }
  /* Sous le simulateur : ces blocs sortent du premier écran, on les allège. */
  .hero-lead { font-size: .98rem; }
  .sim { padding: var(--sp-5); }
  .sim-title { padding-top: var(--sp-5); }
  .tiles { margin-top: var(--sp-4); }
}

.sim {
  background: var(--c-surface); border-radius: var(--r-xl);
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-float);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  position: relative; width: 100%; display: flex; flex-direction: column;
}
/* min-height, pas height : la carte doit pouvoir être mesurée à sa hauteur
   naturelle. Et pas d'overflow hidden, sinon la liste d'adresses est coupée. */
.js .sim { min-height: var(--sim-h, 29rem); transition: min-height .34s var(--out); }
.sim-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 1.9rem; }
.sim-back {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem;
  color: var(--c-muted); padding: .3rem .6rem .3rem .35rem; border-radius: 999px;
}
.sim-back:hover { color: var(--c-primary-dark); background: var(--c-primary-soft); }
.sim-back svg { width: .95rem; height: .95rem; }
.sim-count { font-family: var(--font-title); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.sim-bar { margin-top: var(--sp-3); height: .25rem; border-radius: 99px; background: var(--c-surface-alt); overflow: hidden; }
.sim-bar i { display: block; height: 100%; border-radius: 99px; background: var(--c-primary); transition: width .4s var(--out); }

/* Un <legend> echappe au padding de son <fieldset> : l'espace doit etre
   porte par le titre lui-meme, sinon il reste colle a la barre de progression. */
.screen { border: 0; display: none; padding-top: 0; }
.screen.result { padding-top: var(--sp-6); }
.screen.is-active { display: block; animation: slideIn .32s var(--out); }
.screen.is-active.is-back { animation-name: slideInBack; }
@keyframes slideIn { from { opacity: 0; transform: translateX(.85rem); } to { opacity: 1; transform: none; } }
@keyframes slideInBack { from { opacity: 0; transform: translateX(-.85rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen.is-active { animation: none; } .js .sim { transition: none; } }
.sim-title { padding-top: var(--sp-6); font-family: var(--font-title); font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 600; color: var(--c-text); letter-spacing: -.025em; line-height: 1.22; display: block; }
.sim-lead { margin-top: var(--sp-2); color: var(--c-muted); font-size: .92rem; }

.tiles { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.tile {
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .85rem 1rem; border-radius: var(--r-md);
  background: var(--c-surface); box-shadow: 0 0 0 1.5px var(--c-border) inset;
  transition: box-shadow .16s var(--out), background .16s var(--out), transform .16s var(--out);
}
.tile:hover { box-shadow: 0 0 0 1.5px var(--c-primary) inset; transform: translateY(-1px); }
.tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--c-primary) inset; background: var(--c-primary-soft); }
.tile-ico { width: 2.6rem; height: 2.6rem; border-radius: .8rem; flex: none; display: grid; place-items: center; background: var(--c-surface-alt); color: var(--c-primary-dark); }
.tile-ico svg { width: 1.3rem; height: 1.3rem; }
.tile-txt { display: flex; flex-direction: column; gap: .05rem; flex: 1; min-width: 0; }
.tile-txt strong { font-family: var(--font-title); font-weight: 600; font-size: 1rem; color: var(--c-text); }
.tile-txt small { font-size: .82rem; color: var(--c-muted); }
.tile-arrow { color: var(--c-muted); flex: none; }
.tile-arrow svg { width: 1.1rem; height: 1.1rem; }
.tile:hover .tile-arrow { color: var(--c-primary); }

.field { margin-top: var(--sp-4); }
.field label { display: block; font-size: .84rem; font-weight: 500; color: var(--c-muted); margin-bottom: var(--sp-2); }
/* Hauteur de champ >= 44 px : regle touch-friendly-input. */
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="number"] {
  width: 100%; padding: .8rem .95rem; min-height: 2.75rem; border-radius: var(--r-sm);
  border: 0; background: var(--c-surface);
  box-shadow: 0 0 0 1.5px var(--c-border-strong) inset;
  transition: box-shadow .16s var(--out);
}
.field input:focus { outline: 0; box-shadow: 0 0 0 2px var(--c-primary) inset, 0 0 0 4px rgba(186, 151, 85, .22); }
.field.has-error input { box-shadow: 0 0 0 1.5px var(--c-error) inset; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 30rem) { .row-2 { grid-template-columns: 1fr; gap: 0; } }
.input-unit { position: relative; }
.input-unit span { position: absolute; right: .95rem; top: 50%; transform: translateY(-50%); color: var(--c-muted); font-size: .9rem; pointer-events: none; }
.input-unit input { padding-right: 2.9rem !important; }
.addr-wrap { position: relative; }
.addr-list {
  position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; right: 0;
  background: var(--c-surface); border-radius: var(--r-sm);
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-ambient);
  max-height: 15rem; overflow-y: auto; padding: .35rem;
}
.addr-list li { padding: .6rem .75rem; border-radius: .55rem; cursor: pointer; display: flex; flex-direction: column; gap: .05rem; }
.addr-list li:hover, .addr-list li.is-focus { background: var(--c-primary-soft); }
.addr-list small { color: var(--c-muted); font-size: .8rem; }
.err { color: var(--c-error); font-size: .84rem; margin-top: .35rem; display: none; }
.err.is-visible { display: block; }
.hp { position: absolute; left: -9999px; }
.sim-actions { margin-top: var(--sp-6); }
.lbl-opt { font-weight: 500; color: var(--c-muted); }
/* Pastilles de délai de l'étape 4, sur le même fond clair que les champs. */
.delai-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.delai-pills .pill {
  font-family: var(--font-title); font-weight: 600; font-size: .85rem; line-height: 1;
  padding: .65rem 1rem; border-radius: 999px;
  background: var(--c-bg); box-shadow: inset 0 0 0 1.5px var(--c-border); color: var(--c-muted);
  transition: box-shadow .15s var(--out), background .15s var(--out), color .15s var(--out);
}
.delai-pills .pill:hover { box-shadow: inset 0 0 0 1.5px var(--c-primary); color: var(--c-primary-dark); }
.delai-pills .pill[aria-pressed="true"] {
  background: var(--c-primary-soft); box-shadow: inset 0 0 0 1.5px var(--c-primary); color: var(--c-primary-dark);
}
.form-consent { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-5); font-size: .84rem; color: var(--c-muted); line-height: 1.5; cursor: pointer; }
.form-consent input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--c-primary); flex: none; }
.form-consent a { color: var(--c-primary-dark); }
.sim-foot { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--c-border); }
.reassure { display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center; font-size: .78rem; color: var(--c-muted); }
.reassure span { display: inline-flex; align-items: center; gap: .35rem; }
.reassure span::before { content: ""; width: .25rem; height: .25rem; border-radius: 50%; background: var(--c-primary); }

/* ---------- Résultat ---------- */
.result { text-align: center; }
.badge-ok {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--c-primary-soft);
  color: var(--c-primary-dark); font-family: var(--font-title); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px;
}
.badge-ok svg { width: .85rem; height: .85rem; }
.result-intro { margin-top: 1rem; color: var(--c-muted); font-size: .95rem; }
.result-intro b { color: var(--c-text); font-weight: 600; }
/* Le resultat est une fourchette : les deux bornes portent la meme taille, et le
   'et' qui les separe reste discret pour ne pas casser la lecture du montant.
   Un cran plus petit que le prix unique d une seule valeur, sinon la ligne casse
   sur les petites largeurs. */
.result-mid {
  font-family: var(--font-title); font-weight: 600; color: var(--c-text);
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.7rem); letter-spacing: -.04em; line-height: 1.1;
  margin-top: .35rem; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0;
}
.result-mid em { font-style: normal; color: var(--c-primary-dark); margin-left: .18rem; }
.result-sep {
  font-style: normal; font-family: var(--font-body); font-weight: 400;
  font-size: .95rem; color: var(--c-muted); margin-inline: .7rem;
}
.result-note { margin-top: .85rem; font-size: .87rem; color: var(--c-muted); max-width: 44ch; margin-inline: auto; }
.result .btn { margin-top: 1.1rem; }
.result-legal { margin-top: .85rem; font-size: .75rem; color: var(--c-muted); line-height: 1.5; opacity: .85; }

/* ---------- Filtres de qualification (24/09/2026) ---------- */
.result-next { margin: 1.1rem auto 1.2rem; max-width: 34rem; font-size: .92rem; color: var(--c-text); line-height: 1.5; }
.result-next b { font-weight: 600; }
.submit-note { margin-top: .75rem; text-align: center; font-size: .8rem; color: var(--c-muted); line-height: 1.45; }
.screen-stop { text-align: center; padding-bottom: var(--sp-2); }
.stop-title { padding-top: var(--sp-4); font-family: var(--font-title); font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 600; color: var(--c-text); letter-spacing: -.02em; line-height: 1.25; }
.stop-title b { color: var(--c-primary-dark); font-weight: 600; }
.stop-text { margin: .8rem auto 1.4rem; max-width: 30rem; font-size: .92rem; color: var(--c-muted); line-height: 1.55; }

/* ---------- Votre interlocuteur (structure du site Antonas) ---------- */
.about-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-in > * { min-width: 0; }
/* Photo cadree sur la hauteur reelle du contenu voisin */
.about-in.is-matched { align-items: stretch; }
.about-in.is-matched .about-media { display: flex; min-width: 0; }
.about-in.is-matched .about-media .frame { aspect-ratio: auto; width: 100%; height: 100%; min-height: 21rem; }
.about-media { position: relative; }
.about-media .frame {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-float);
  aspect-ratio: 4 / 4.4; background: var(--c-surface-alt);
}
.about-media .frame picture, .about-media .frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-media .frame img { object-fit: cover; object-position: center 20%; }
.about-media .frame { position: relative; }
.about-media .ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: var(--sp-2); color: var(--c-muted); font-size: .84rem; text-align: center; padding: var(--sp-5); }
.about-media .ph svg { width: 2.5rem; height: 2.5rem; }
.about-badge {
  position: absolute; right: -1rem; top: 1.5rem; background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-ambient);
  border-radius: var(--r-md); padding: .85rem 1.15rem; text-align: center; z-index: 2;
}
.about-badge b { font-family: var(--font-title); font-weight: 600; font-size: 1.4rem; color: var(--c-primary-dark); display: block; letter-spacing: -.02em; line-height: 1; }
.about-badge span { font-size: .76rem; color: var(--c-muted); }
.about-copy .h2 { margin: 1.1rem 0; }
.about-copy p { color: var(--c-muted); }
.about-copy p + p { margin-top: .85rem; }
.about-list { margin: 1.6rem 0 1.9rem; display: grid; gap: .8rem; }
.about-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: .96rem; }
.about-list svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; color: var(--c-primary); }
.about-list strong { font-weight: 700; }
.zone-box {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border) inset;
  border-radius: var(--r-sm); padding: 1rem 1.25rem; margin: 1.4rem 0 1.6rem;
  display: flex; flex-direction: column; gap: .25rem;
}
.zone-box .zlbl { font-family: var(--font-title); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--c-muted); }
.zone-box .ztxt { font-weight: 600; font-size: .97rem; color: var(--c-text); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
@media (max-width: 56rem) {
  .about-in { grid-template-columns: 1fr; gap: var(--sp-6); }
  .about-in.is-matched { align-items: start; }
  .about-in.is-matched .about-media .frame { min-height: 0; aspect-ratio: 4 / 4.4; }
  .about-media { max-width: 20rem; margin-inline: auto; width: 100%; }
  .about-badge { right: 0; }
}

/* ---------- Chiffres : bento du site Antonas ---------- */
.section-head { max-width: 41rem; margin-bottom: clamp(2.4rem, 5vw, 3.75rem); }
.section-head .h2 { margin: 1.1rem 0 0; }
.bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.bento-card {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs);
  border-radius: var(--r-lg); padding: 1.6rem 1.75rem;
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  position: relative; overflow: hidden;
}
.bento-main {
  grid-row: 1 / 3;
  background: linear-gradient(150deg, var(--c-primary-soft) 0%, var(--c-surface) 70%);
  justify-content: space-between; padding: 1.85rem;
}
.bento-main .chip-line { font-family: var(--font-title); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-primary-dark); display: inline-flex; align-items: center; gap: .5rem; }
.bento-main .chip-line::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-primary); }
.bento-main b { font-family: var(--font-title); font-weight: 600; letter-spacing: -.03em; font-size: clamp(3.4rem, 6vw, 5rem); color: var(--c-primary-dark); line-height: 1; display: block; margin: 1.1rem 0 .25rem; }
.bento-main .bento-lbl { font-family: var(--font-title); font-weight: 600; font-size: 1.06rem; color: var(--c-text); }
.bento-main p { font-size: .88rem; color: var(--c-muted); margin-top: .4rem; max-width: 30ch; }
.bento-main svg.houses { position: absolute; right: 1.1rem; bottom: .9rem; width: 8rem; height: auto; color: var(--c-primary); opacity: .16; }
.bento-card .ico {
  width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: var(--c-primary-soft);
  display: grid; place-items: center; color: var(--c-primary-dark); margin-bottom: .75rem;
}
.bento-card .ico svg { width: 1.25rem; height: 1.25rem; }
.bento-card b { font-family: var(--font-title); font-weight: 600; letter-spacing: -.02em; font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--c-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.bento-card span { font-size: .88rem; color: var(--c-muted); }
.bento-google .g-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.bento-google .g-logo { width: 1.6rem; height: 1.6rem; }
.bento-google .stars { font-size: .9rem; color: var(--c-amber); letter-spacing: .06em; }
@media (max-width: 60rem) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-main { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 34rem) { .bento { grid-template-columns: 1fr; } }

/* ---------- Apres l'estimation (cartes du site Antonas) ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.step-card {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs);
  border-radius: var(--r-lg); padding: 1.9rem 1.75rem;
  display: flex; flex-direction: column; gap: .6rem;
}
.step-card .dot {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--grad-btn); color: #fff;
  font-family: var(--font-title); font-weight: 600; display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px var(--c-primary-glow); margin-bottom: .5rem;
}
.step-card .meta { font-family: var(--font-title); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary-dark); }
.step-card p { font-size: .94rem; color: var(--c-muted); }
.step-card .foot { margin-top: auto; padding-top: .75rem; font-size: .82rem; font-weight: 600; color: var(--c-muted); display: inline-flex; align-items: center; gap: .5rem; }
.step-card .foot i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--c-primary); flex: none; }
@media (max-width: 56rem) { .steps-grid { grid-template-columns: 1fr; } }

/* ---------- Zone couverte (bande sombre du site Antonas) ---------- */
.cta-band-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.75rem; align-items: center; text-align: left; }
.cta-band .h2 { margin: 1rem 0 .9rem; }
.cta-band p { color: rgba(255, 255, 255, .75); max-width: 46ch; }
.cta-steps { display: flex; flex-direction: column; }
.cta-step { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .13); }
.cta-step:last-child { border-bottom: 0; }
.cta-step .n {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 600; font-size: .9rem;
  background: rgba(255, 255, 255, .1); color: #d4b57e;
}
.cta-step strong { display: block; font-family: var(--font-title); font-weight: 600; font-size: .98rem; color: #fff; }
.cta-step small { font-size: .85rem; color: rgba(255, 255, 255, .6); }
.zone-chip { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.zone-chip span {
  font-family: var(--font-title); font-size: .82rem; font-weight: 600;
  background: rgba(255, 255, 255, .12); color: #fff; border-radius: 999px; padding: .45rem .9rem;
}
@media (max-width: 56rem) { .cta-band-in { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Avis ----------
   Ordinateur : grille de quatre avis, deux par deux, sans carrousel.
   Mobile : carrousel a defilement aimante avec tous les avis. */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(2.1rem, 4vw, 3.25rem); }
.reviews-head .h2 { margin-top: 1.1rem; }
.carousel-nav { display: none; }
.carousel-btn {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: none;
  background: var(--c-surface); box-shadow: 0 0 0 1.5px var(--c-border-strong) inset; color: var(--c-text);
  display: grid; place-items: center;
  transition: box-shadow .2s var(--out), transform .2s var(--out), opacity .2s var(--out);
}
.carousel-btn:hover { box-shadow: 0 0 0 1.5px var(--c-primary) inset; color: var(--c-primary-dark); transform: translateY(-2px); }
.carousel-btn[disabled] { opacity: .35; pointer-events: none; }
.carousel-btn svg { width: 1.15rem; height: 1.15rem; }

.reviews-carousel { position: relative; }
.reviews-track { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
/* Au-dela de quatre, les avis ne sont servis qu'au carrousel mobile. */
.reviews-track > .review:nth-child(n+5) { display: none; }

.review {
  background: var(--c-surface); box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs);
  border-radius: var(--r-lg); padding: 1.75rem 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .85rem; position: relative;
}
.review .quote-mark {
  position: absolute; top: 1.1rem; right: 1.4rem;
  font-family: Georgia, serif; font-size: 3.2rem; line-height: 1; color: var(--c-primary-soft);
}
.review .rev-top { display: flex; align-items: center; gap: .55rem; }
.review .g-logo { width: 1.05rem; height: 1.05rem; }
.review .stars { font-size: .82rem; letter-spacing: 2px; color: var(--c-amber); }
.review blockquote { font-size: 1rem; line-height: 1.55; color: var(--c-text); font-weight: 500; }
.review footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.review .avatar {
  width: 2.35rem; height: 2.35rem; border-radius: 50%; flex: none;
  background: var(--c-primary-soft); color: var(--c-primary-dark); display: grid; place-items: center;
  font-family: var(--font-title); font-weight: 600; font-size: .9rem;
}
.review footer b { font-size: .92rem; display: block; font-weight: 700; }
.review footer small { font-size: .78rem; color: var(--c-muted); }

.reviews-dots { display: none; }
@media (max-width: 48rem) {
  .reviews-track {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: .4rem; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews-track::-webkit-scrollbar { display: none; }
  .reviews-track:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; border-radius: var(--r-lg); }
  .reviews-track > .review { flex: 0 0 86%; scroll-snap-align: start; }
  .reviews-track > .review:nth-child(n+5) { display: flex; }
  .reviews-dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
  .reviews-dots button {
    width: .5rem; height: .5rem; border-radius: 50%; padding: 0;
    background: var(--c-border-strong); transition: background .2s var(--out), width .2s var(--out);
  }
  .reviews-dots button.is-active { background: var(--c-primary); width: 1.4rem; border-radius: 999px; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: .7rem; }
.faq details { background: var(--c-surface); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-xs); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 3.2rem 1.1rem 1.35rem; position: relative;
  font-family: var(--font-title); font-weight: 600; font-size: 1rem; color: var(--c-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 50%; width: .55rem; height: .55rem;
  border-right: 2px solid var(--c-primary); border-bottom: 2px solid var(--c-primary);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq .faq-body { padding: 0 1.35rem 1.2rem; color: var(--c-muted); font-size: .93rem; }
.faq .faq-body a { color: var(--c-primary-dark); }

/* ---------- Bande CTA finale ---------- */
.cta-band { background: var(--grad-deep); color: #fff; border-radius: var(--r-2xl); padding: clamp(2.2rem, 4.5vw, 3.8rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; left: 50%; bottom: -10rem; transform: translateX(-50%);
  width: 26rem; height: 20rem; border-radius: 50%;
  background: rgba(186, 151, 85, .38); filter: blur(70px); pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .h2 em { color: #d4b57e; }
.cta-band .lead { color: rgba(255, 255, 255, .78); margin-inline: auto; }
.cta-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---------- Contact : bande sombre + carte formulaire ---------- */
.contact-band { grid-template-columns: .9fr 1.1fr; align-items: center; }
.contact-actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.contact-band-note { font-size: .88rem; color: rgba(255, 255, 255, .65); margin-top: 1.1rem; }
.contact-band-note a { color: #d4b57e; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 56rem) { .contact-band { grid-template-columns: 1fr; } }

.form-card {
  background: var(--c-surface); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: 0 0 0 1px var(--c-border) inset, 0 24px 70px rgba(0, 0, 0, .3);
  color: var(--c-text);
}
/* La carte est blanche mais vit dans la bande sombre : les titres doivent
   reprendre l'encre normale, sinon ils sont blancs sur blanc. */
.form-card h2, .form-card .h3 { color: var(--c-text); margin-bottom: .35rem; }
.form-card > p { font-size: .92rem; color: var(--c-muted); margin-bottom: var(--sp-5); max-width: none; }
.form-card .field { margin-top: 0; margin-bottom: var(--sp-4); }
.form-card .row-2 { gap: var(--sp-3); }
.form-card label { font-family: var(--font-title); font-weight: 600; color: var(--c-text); }
.form-card input[type="text"], .form-card input[type="tel"], .form-card input[type="email"],
.form-card select, .form-card textarea {
  width: 100%; padding: .8rem .95rem; border-radius: var(--r-sm); border: 0;
  background: var(--c-bg); box-shadow: 0 0 0 1.5px var(--c-border) inset;
  transition: box-shadow .16s var(--out), background .16s var(--out); font-family: inherit;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { background: var(--c-surface); }
.form-card textarea { min-height: 6.5rem; resize: vertical; }
.form-card select:focus, .form-card textarea:focus { outline: 0; box-shadow: 0 0 0 2px var(--c-primary) inset, 0 0 0 4px rgba(186, 151, 85, .22); }
.form-card .has-error select, .form-card .has-error textarea { box-shadow: 0 0 0 1.5px var(--c-error) inset; }

.form-card .form-consent { margin: .25rem 0 var(--sp-4); }
.form-done { text-align: center; padding: 2.5rem .75rem; }
.form-done p { color: var(--c-muted); font-size: .95rem; margin-top: var(--sp-4); }

/* ---------- Footer (modèle Antonas) ---------- */
.footer { background: var(--c-deep); color: rgba(255, 255, 255, .72); margin-top: clamp(2rem, 4vw, 3.5rem); }
.footer-in {
  display: grid; grid-template-columns: 1.15fr 1.1fr .85fr; gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.2rem, 6vw, 5rem); align-items: start;
}
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 56rem) {
  /* Mobile : une seule colonne, les liens les uns sous les autres. */
  .footer-in { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-links { grid-template-columns: 1fr; gap: var(--sp-6); }
}
/* Aucune puce : les listes du footer sont des colonnes de liens. */
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.footer li { list-style: none; }
.footer h3 { font-family: var(--font-title); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: 1.1rem; }
.footer a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .93rem; transition: color .15s ease; }
.footer a:hover { color: #fff; }
.footer .brand-txt b { color: #fff; }
.footer .brand-txt small { color: rgba(255, 255, 255, .45); }
.footer-about { font-size: .92rem; margin-top: 1rem; max-width: 34ch; }
.footer-cta {
  background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset;
  border-radius: var(--r-lg); padding: 1.5rem; display: grid; gap: .7rem;
}
.footer-cta p { font-family: var(--font-title); font-weight: 600; font-size: 1.02rem; color: #fff; margin-bottom: .25rem; }
.footer a.btn-light { color: var(--c-primary-dark); font-size: .97rem; }
.footer a.footer-call { color: #fff; font-size: .97rem; }
/* Bas de page : les mentions sont les unes sous les autres. */
/* Bas de page : mention legale a gauche, signature a droite, meme ligne. */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255, 255, 255, .45);
}
.footer-bottom a { font-size: .82rem; color: rgba(255, 255, 255, .58); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Barre mobile ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-border); padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  display: none; gap: .6rem; transform: translateY(110%); transition: transform .3s var(--out);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar .btn { flex: 1; padding: .8rem 1rem; font-size: .93rem; }
@media (max-width: 56rem) { .mobile-bar { display: flex; } body { padding-bottom: 4.4rem; } }

/* ---------- Bannière cookies ---------- */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120;
  background: var(--c-surface); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px var(--c-border) inset, var(--sh-float);
  padding: 1.2rem 1.35rem; max-width: 31rem; display: none;
}
.cookie.is-visible { display: block; animation: cookieIn .32s var(--out); }
@keyframes cookieIn { from { opacity: 0; transform: translateY(.85rem); } to { opacity: 1; transform: none; } }
.cookie h3 { font-size: 1rem; }
.cookie p { margin-top: .45rem; font-size: .86rem; color: var(--c-muted); }
.cookie p a { color: var(--c-primary-dark); }
.cookie-actions { margin-top: .95rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.cookie-actions .btn { flex: 1; min-width: 8rem; padding: .7rem 1.1rem; font-size: .91rem; }
/* Mobile : bandeau compact, sinon il masque les tuiles du simulateur. */
@media (max-width: 56rem) {
  .cookie { padding: .95rem 1.05rem; }
  .cookie-open .mobile-bar { transform: translateY(110%); }
  /* La banniere ne doit jamais recouvrir les deux tuiles de choix du simulateur :
     sur un ecran de 375 px, chaque ligne de trop passe par-dessus. */
  .cookie h3 { font-size: .9rem; }
  .cookie p { margin-top: .3rem; font-size: .78rem; line-height: 1.4; }
  .cookie-actions { margin-top: .65rem; gap: .45rem; }
  .cookie-actions .btn { padding: .58rem .85rem; font-size: .85rem; min-width: 0; }
}

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(1rem); transition: opacity .55s var(--out), transform .55s var(--out); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* ---------- Pages légales ---------- */
.legal { max-width: 48rem; margin-inline: auto; }
.legal h1 { margin-bottom: .6rem; }
.legal h2 { font-size: 1.22rem; margin-top: 2.2rem; }
.legal p, .legal li { color: var(--c-muted); margin-top: .7rem; font-size: .95rem; }
.legal ul { margin-top: .5rem; padding-left: 1.25rem; list-style: disc; }
.legal a { color: var(--c-primary-dark); }
.legal .todo { background: var(--c-primary-soft); border-radius: .4rem; padding: .1rem .5rem; color: var(--c-primary-dark); font-weight: 600; }