/* ==========================================================================
   mavaleur.fr — page d'accueil
   Complète styles.css (tokens, logo, badges, comps, gauge sont partagés).
   ========================================================================== */

html { scroll-behavior: smooth; }
.landing { overflow-x: hidden; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

.band { padding-top: 88px; }
.band--narrow { max-width: 820px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; color: #fff; }

/* Révélation au défilement ------------------------------------------------ */

.rv { opacity: 1; transform: none; }

/* La navigation principale vit désormais dans styles.css : elle est partagée
   avec les pages communales, qui ne chargent pas cette feuille. */

/* ----------------------------------------------------------------- Héros */

.hero {
  position: relative;
  background: linear-gradient(180deg, #F2F0E9 0%, #F6F4EE 42%, var(--bg) 100%);
}
.hero__inner {
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 72px var(--page-gutter) 0;
  text-align: center;
}
.editorial-asset figcaption {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 70px);
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.hero__title em { font-style: normal; color: var(--accent); }

.hero__lede {
  margin: 26px auto 0;
  max-width: 680px;
  font-size: 19px;
  line-height: 1.62;
  color: var(--muted);
}

.hero__form {
  margin-top: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  /* `animation-fill-mode: both` laisse une animation de `transform` s'appliquer
     indéfiniment, ce qui crée un contexte d'empilement permanent. La liste de
     suggestions y restait enfermée, et passait sous le texte qui suit le champ,
     quel que soit son z-index. On remonte donc le contexte entier. */
  position: relative;
  z-index: 20;
}

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 20, 16, .04), 0 12px 28px rgba(20, 20, 16, .06);
  height: 62px;
  padding: 0 20px;
  flex: 1 1 360px;
  max-width: 520px;
  transition: border-color .18s, box-shadow .18s;
}
.field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(46, 94, 82, .12), 0 12px 28px rgba(20, 20, 16, .06);
}
.field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16.5px;
  font-weight: 450;
  color: var(--ink);
  min-width: 0;
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

.cta-glow {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  padding: 3px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--accent-hover);
  box-shadow: 0 10px 26px rgba(46, 94, 82, .3);
}
.cta-glow__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0) 0deg, rgba(255,255,255,0) 130deg,
    rgba(230,240,232,.8) 168deg, #fff 180deg, rgba(230,240,232,.8) 192deg,
    rgba(255,255,255,0) 232deg, rgba(255,255,255,0) 310deg,
    rgba(205,225,210,.55) 348deg, rgba(255,255,255,.9) 360deg);
  animation: spin 2.6s linear infinite;
  pointer-events: none;
}

.btn-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  height: 59px;
  padding: 0 28px;
  border-radius: 12.5px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background .18s;
}
.btn-hero:hover { background: var(--accent-hover); }
.btn-hero:active { background: var(--accent-deep); }

/* « Gratuitement » dans le chapô plutôt qu'en note sous le bouton : l'argument
   est lu au moment où l'on décide, pas après. Gras et vert accent, comme la
   note qu'il remplace. */
.gratuit { font-weight: 700; color: var(--accent); }

.avatars { display: flex; }
.avatars .avatar + .avatar { margin-left: -13px; }

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar--1 { background: linear-gradient(150deg, #DCD8CC, #BDB9AB); color: #4A4941; }
.avatar--2 { background: linear-gradient(150deg, #3B6157, #22403A); color: #EDF2EF; }
.avatar--3 { background: linear-gradient(150deg, #CFCABB, #A9A496); color: #3F3E37; }
.avatar--4 { background: linear-gradient(150deg, #8C8778, #5F5B50); color: #fff; }

/* Sources ---------------------------------------------------------------- */

.sources { margin-top: 80px; padding-bottom: 6px; }
.sources__label { margin: 0; font-size: 15.5px; color: var(--muted-2); }

.marquee {
  margin-top: 22px;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  gap: 30px;
  animation: sources-scroll 32s linear infinite;
  will-change: transform;
}
.marquee__track span {
  display: flex;
  align-items: center;
  padding: 0;
  font-size: 19px;
  font-weight: 500;
  color: #4A4941;
  opacity: .72;
  white-space: nowrap;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes sources-scroll {
  to { transform: translateX(calc(-50% - 15px)); }
}

/* ------------------------------------------------------ Aperçu du rapport */

.demo {
  padding: 64px 0 80px;
  background: linear-gradient(180deg, var(--bg), var(--surface-hover));
}

.section-head { text-align: center; max-width: 680px; margin: 0 auto 34px; }

.section-title {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.section-title--sm { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; }
.section-title--center { text-align: center; }

.section-copy {
  max-width: 650px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.section-copy--left { margin-left: 0; }
.section-action { margin: 30px 0 0; text-align: center; }
.text-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--accent);
  font-weight: 650;
}
.text-cta:hover { color: var(--accent-hover); }

.landing .eyebrow {
  letter-spacing: .045em;
}

.eyebrow--warn { color: var(--warn); }

.demo__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(20, 20, 16, .09);
  overflow: hidden;
}

.demo__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line-3);
}
.demo__tab {
  padding: 20px 12px;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  text-align: center;
  color: #6B6A64;
  font-weight: 450;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .16s ease, background .16s ease;
}
.demo__tab:hover { color: var(--ink); }
.demo__tab.is-on {
  color: var(--ink);
  font-weight: 600;
  background: var(--surface);
  border-bottom-color: var(--accent);
}


/* Sur mobile, `auto-fit minmax(150px)` ne laissait tenir que deux colonnes :
   le troisième onglet passait à la ligne, sous les deux autres, avec le trait
   actif resté en haut. Une barre d'onglets qui se casse en deux lignes ne se
   lit plus comme une barre d'onglets.

   En dessous de 560 px, la grille devient une bande sur une seule ligne, qui
   défile horizontalement si l'écran est vraiment étroit. Le libellé le plus
   long perd son complément, qui n'apporte rien une fois le panneau ouvert. */
@media (max-width: 560px) {
  .demo__tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .demo__tabs::-webkit-scrollbar { display: none; }

  /* Les trois onglets se partagent la ligne à parts égales. Les libellés
     perdent leur complément — « Fourchette de prix » devient « Fourchette » —
     parce que le panneau ouvert dit déjà de quoi il parle. Le défilement reste
     en secours pour les écrans les plus étroits. */
  .demo__tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 8px;
    font-size: 13.5px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .demo__tab-suite { display: none; }
}

.demo__body { padding: 26px; background: var(--surface); min-height: 520px; }
.demo__panel { animation: fade .3s both; }

.demo__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.demo__sub  { display: block; font-size: 13px; color: var(--muted-2); }
.demo__addr { display: block; font-size: 17px; font-weight: 600; margin-top: 3px; }
.demo__panel-head .demo__addr + .demo__sub { margin-top: 3px; }

.tagline {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-step);
  padding: 9px 13px;
  border-radius: 8px;
}

.seg {
  display: flex;
  gap: 4px;
  background: var(--surface-step);
  padding: 4px;
  border-radius: 10px;
}
.seg__btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 7px;
  color: var(--muted-2);
  background: transparent;
  transition: background .16s ease, color .16s ease;
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(20, 20, 16, .14);
}

.demo__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

.pane {
  border: 1px solid var(--line-3);
  border-radius: 18px;
  padding: 24px;
}
.pane--price {
  padding: 28px;
  background: linear-gradient(180deg, var(--surface-sunk), var(--surface-warm));
}
.pane-stack { display: flex; flex-direction: column; gap: 16px; }

.pane__label { font-size: 13px; color: var(--muted-2); }

.pane__range {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pane__range span { white-space: nowrap; }

.pane__meta { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.pane__meta strong { font-weight: 600; color: var(--ink); }

.pane__text { margin: 22px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

.pane__serif { margin-top: 10px; font-family: var(--display); font-size: 40px; line-height: 1.1; }

.pane__big {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.pane__big small { font-size: 13px; font-weight: 400; color: var(--muted-2); letter-spacing: 0; }

.chip-up {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0;
}

.pane__rows {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13.5px;
  color: var(--muted);
}
.pane__rows > span { display: flex; justify-content: space-between; gap: 12px; }
.pane__rows--arrows { gap: 11px; font-size: 14px; color: var(--ink-2); }
.pane__rows--arrows > span { justify-content: flex-start; gap: 10px; }
.pane__rows i { font-style: normal; font-weight: 600; }
.pane__rows i.up { color: var(--accent); }
.pane__rows i.down { color: var(--warn); }

.mono { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.mono--accent { color: var(--accent); }

.demo__foot,
.demo__aside { margin: 16px 0 0; font-size: 13.5px; color: var(--muted-2); line-height: 1.6; }

.comps--flat { margin: 0; border-radius: 18px; }
.comps--flat .comps__row { padding-left: 20px; padding-right: 20px; }
.comps--flat .comps__row:last-child { border-bottom: none; }

.badge--warn { color: var(--warn); background: #F6EEE4; }
.badge--warn .badge__dot { background: var(--warn); }

/* Aperçu lisible du rapport ---------------------------------------------- */

.report-contents {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(40px, 8vw, 100px);
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}
.report-contents ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.report-contents li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.report-contents strong { font-size: 16px; }
.report-contents p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.report-note { padding: 24px 0; border-block: 2px solid var(--accent); }
.report-note > strong { font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.2; }
.report-note .btn { margin-top: 22px; }
.report-side { display: grid; gap: 26px; }
.editorial-asset { margin: 0; }
.editorial-asset img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .report-contents { grid-template-columns: 1fr; }
}

.report-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
.report-sheet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(26px, 4vw, 46px);
  box-shadow: 0 22px 55px rgba(20, 20, 16, .08);
}
.report-sheet__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.report-sheet__head small { color: var(--muted-2); font-weight: 450; letter-spacing: 0; }
.report-sheet__address { margin: 25px 0 0; font-size: 17px; font-weight: 650; }
.report-sheet__label { margin: 34px 0 0; color: var(--muted); font-size: 14px; }
.report-sheet__price {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}
.report-sheet__range { margin: 14px 0 0; color: var(--muted); }
.report-sheet__rule { height: 5px; margin-top: 28px; border-radius: 99px; background: #DFE7E2; }
.report-sheet__facts { margin: 28px 0 0; }
.report-sheet__facts div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.report-sheet__facts dt { color: var(--muted); }
.report-sheet__facts dd { margin: 0; font-weight: 650; text-align: right; }
.report-sheet__note { margin: 22px 0 0; color: var(--muted-2); font-size: 13.5px; line-height: 1.6; }
.report-list h3 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.report-list ul { margin: 25px 0 24px; padding: 0; list-style: none; }
.report-list li { padding: 18px 0; border-top: 1px solid var(--line); }
.report-list li:last-child { border-bottom: 1px solid var(--line); }
.report-list strong { display: block; font-size: 16px; }
.report-list span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.report-list .text-cta span { display: inline; margin: 0; color: inherit; }

@media (max-width: 820px) {
  .report-preview { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- Preuves courtes */

.evidence-strip {
  margin-top: 80px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.evidence-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.evidence-strip p {
  margin: 0;
  padding: 0 30px;
  border-left: 1px solid var(--line);
}
.asset-icon,
.step__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--accent);
}
.evidence-strip .asset-icon { display: block; margin-bottom: 10px; }
.evidence-strip p:first-child { padding-left: 0; border-left: 0; }
.evidence-strip p:last-child { padding-right: 0; }
.evidence-strip strong { display: block; font-size: 15px; font-weight: 650; color: var(--ink); }
.evidence-strip span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

@media (max-width: 720px) {
  .evidence-strip { margin-top: 56px; padding: 12px 0; }
  .evidence-strip__grid { grid-template-columns: 1fr; }
  .evidence-strip p,
  .evidence-strip p:first-child,
  .evidence-strip p:last-child {
    padding: 16px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .evidence-strip p:first-child { border-top: 0; }
}

/* -------------------------------------------------- Comment ça marche */

.steps {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.step {
  border-top: 2px solid var(--accent);
  padding: 26px 10px 0 0;
}
.step__icon { display: inline-block; margin-right: 10px; vertical-align: middle; }
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  vertical-align: middle;
}
.step h3 { margin: 18px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.step p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.66; color: var(--muted); }

/* Données et limites ------------------------------------------------------ */

.data-band {
  margin-top: 88px;
  padding: 82px 0;
  background: #F0EFEA;
  border-block: 1px solid var(--line);
}
.data-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 1.2fr);
  gap: clamp(42px, 8vw, 100px);
  align-items: start;
}
.data-list { margin: 0; }
.data-list div {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  padding: 0 0 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid #D9D6CD;
}
.data-list div:last-child { margin: 0; padding: 0; border: 0; }
.data-list .asset-icon { grid-row: 1 / 3; margin-top: 1px; }
.data-list dt { grid-column: 2; font-size: 17px; font-weight: 650; color: var(--ink); }
.data-list dd { grid-column: 2; margin: 7px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
.limits__list {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.limits__list li {
  position: relative;
  padding: 20px 18px 20px 34px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.55;
}
.limits__list li::before { content: ""; position: absolute; left: 6px; top: 29px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.limits__list strong { display: block; font-size: 16px; font-weight: 650; }
.limits__list span { display: block; margin-top: 5px; color: var(--muted); font-size: 14.5px; }
.limits__action { max-width: 820px; margin: 26px auto 0; text-align: center; }
.limits__action .text-cta span { display: inline; margin: 0; color: inherit; }

@media (max-width: 760px) {
  .data-layout { grid-template-columns: 1fr; }
  .data-band { padding: 64px 0; }
}

/* ------------------------------------------------------------ Honnêteté */

.honesty {
  background: var(--surface-step);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: center;
}
.honesty__text { margin: 16px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); }

.honesty__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}
.honesty__range {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
}
.honesty__range span { white-space: nowrap; }
.honesty__margin { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.honesty__fine { margin: 18px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted-2); }

/* ---------------------------------------------------------- Témoignages */

.quotes {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
}
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.quote figcaption { margin-top: 20px; display: flex; align-items: center; gap: 11px; }
.quote figcaption .avatar { width: 38px; height: 38px; border: none; }
.quote figcaption strong { display: block; font-size: 14px; font-weight: 600; }
.quote figcaption small { display: block; font-size: 13px; color: var(--muted-2); }

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

.faq { margin-top: 36px; display: flex; flex-direction: column; gap: 10px; }

.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .16s ease;
}
.faq details:hover { border-color: #D6D2C6; }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--surface-step);
  color: var(--accent);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }

.faq details p {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--muted);
}

/* --------------------------------------------------- Appel à l'action */

.final {
  position: relative;
  padding: clamp(38px, 5vw, 58px) 0;
  border-block: 1px solid var(--line);
  color: var(--ink);
}
.final__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr);
  gap: clamp(38px, 7vw, 84px);
  align-items: center;
}
.final__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.final__text { margin: 16px 0 0; font-size: 16.5px; color: var(--muted); line-height: 1.65; }

.final__box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.final__field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  min-height: 62px;
  padding: 0 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 16, .04), 0 12px 28px rgba(20, 20, 16, .06);
  transition: border-color .18s, box-shadow .18s;
}
.final__field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(46, 94, 82, .12), 0 12px 28px rgba(20, 20, 16, .06);
}
.final__field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16.5px;
  color: var(--ink);
  min-width: 0;
}
.final__field input::placeholder { color: var(--muted-2); }

.final__box .consent { margin-top: 16px; text-align: left; }

.final__cta {
  min-height: 62px;
  padding: 0 26px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: background .18s;
}
.final__cta:hover { background: var(--accent-hover); }

@media (max-width: 760px) {
  .final { padding-block: 34px; }
  .final__grid { grid-template-columns: 1fr; gap: 24px; }
  .final__box { grid-template-columns: 1fr; }
  .final__cta { width: 100%; }
}

/* ------------------------------------------------------------ Pied de page */

.site-footer { padding: 72px 0 40px; }
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}
.site-footer__pitch {
  margin: 14px 0 0;
  max-width: 260px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted-2);
}
.site-footer nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.site-footer__head { font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.site-footer nav a { color: var(--muted); }
.site-footer nav a:hover { color: var(--accent); }

.site-footer__bar {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--muted-2);
}

/* ---------------------------------------------------------- Cibles au doigt

   Même correction que dans styles.css : les liens du pied de page faisaient
   dix-huit pixels de haut, empilés à dix pixels d'écart. Au doigt, on visait
   « Mentions légales » et on ouvrait « Confidentialité ». On agrandit la zone
   sans déplacer le texte — la marge négative reprend le remplissage — et
   seulement quand le pointeur est grossier.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
  .nav__cta { min-height: 44px; }

  .site-footer nav { gap: 0; }
  .site-footer nav a,
  .site-footer__bar a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .site-footer__bar a { margin-block: -13px; }

  /* Le lien vers le dépôt, seul dans sa légende : c'est une cible, pas un
     mot au fil d'une phrase. */
  figcaption small a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -13px;
  }
}

/* ------------------------------------------------------- Mouvement réduit */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta-glow__ring { animation: none; opacity: .35; }
  .marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 30px;
    animation: none;
    transform: none;
  }
  .marquee__track span[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   Recherche d'adresse (autocomplete.js)

   Le héros et le bloc final partagent désormais le même composant clair.
   -------------------------------------------------------------------------- */

.ac { position: relative; }

.ac__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 70;
  max-height: min(340px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(20, 20, 16, .16);
  padding: 6px;
  text-align: left;
  animation: fade .12s both;
}

.ac__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--ink);
  /* Cible tactile confortable : sous 44 px, on tape à côté sur mobile. */
  min-height: 44px;
}
.ac__item.is-actif { background: var(--surface-hover); }
.ac__item--geo { color: var(--accent); font-weight: 500; }

.ac__icone { flex: 0 0 auto; margin-top: 2px; color: var(--muted-3); }
.ac__item--geo .ac__icone { color: var(--accent); }

.ac__texte { min-width: 0; }
.ac__principal {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La portion tapée est mise en évidence, pas la suggestion entière. */
.ac__principal b { font-weight: 700; color: var(--accent); }

.ac__secondaire {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--muted-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac__secondaire b { font-weight: 600; color: var(--muted); }

.ac__vide {
  margin: 0;
  padding: 14px 12px;
  font-size: 14px;
  color: var(--muted-2);
}
.ac__vide--erreur { color: var(--warn); }

/* Sur mobile, la liste ne doit pas être recouverte par le clavier virtuel :
   on la limite à une hauteur qui laisse voir le champ. */
@media (max-width: 560px) {
  .ac__pop { max-height: min(280px, 44vh); }
  .ac__principal { font-size: 15.5px; }
}

/* Ouverture vers le haut : posée par autocomplete.js quand la place manque. */
.ac__pop--haut {
  top: auto;
  bottom: calc(100% + 8px);
}