/*
  Les Jardins d'Arel : feuille de style v4, épurée et minimale.
  Fond clair, typographie sobre, quasi aucun ornement. Le vert profond
  reste sur le hero (vidéo) et le pied de page, l'ocre en petites touches
  (CTA, étape active, mot clé). Mobile first.

  Contrastes (4,5:1 minimum, CLAUDE.md) :
  - boutons ocre : texte anthracite (4,8:1) ; survol vert profond + clair.
  - ocre sur fond clair : jamais en texte courant (3,2:1), réservé aux
    grandes tailles et aux aplats.
*/

:root {
  --fond: #FBF9F4;
  --sable: #EFE8DA;
  --sable-fonce: #E0D6C2;
  --vert-profond: #1E3A2F;
  --vert-nuit: #142720;
  --vert-sauge: #7C9A86;
  --bleu-source: #2F6F8F;
  --ocre: #C97B2B;
  --ocre-sombre: #A9661F;
  --texte: #1F2422;
  --texte-doux: #4A524C;
  --clair-doux: #E5E9E2;
  --clair-sourd: #A9B5A8;
  --gris-vendu: #B8B8B8;
  --filet: rgba(30, 58, 47, 0.14);
  --filet-appuye: rgba(30, 58, 47, 0.3);
  --filet-clair: rgba(251, 249, 244, 0.2);

  --police-titres: "Fraunces", Georgia, "Times New Roman", serif;
  --police-texte: "Inter", system-ui, "Segoe UI", Arial, sans-serif;

  --rayon: 10px;
  --rayon-bouton: 8px;
}

/* Polices auto-hébergées, licences OFL dans /assets/fonts/. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-600italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.65;
}

/* En-tête fixe : les pages sans hero réservent sa hauteur */
body:not(.page-accueil) {
  padding-top: 5.4rem;
}

h1,
h2,
h3 {
  font-family: var(--police-titres);
  font-weight: 600;
  color: var(--vert-profond);
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
}

h2 {
  font-size: clamp(1.85rem, 1.5rem + 1.8vw, 2.8rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.25rem;
}

/* Équilibre des lignes : pas de mot orphelin */
h1,
h2,
h3,
legend {
  text-wrap: balance;
}

p,
li,
figcaption {
  text-wrap: pretty;
}

p {
  margin: 0 0 1em;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--bleu-source);
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--bleu-source);
  outline-offset: 2px;
}

.acces-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vert-profond);
  color: #fff;
  padding: 0.6em 1em;
  z-index: 100;
}

.acces-contenu:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.conteneur {
  max-width: 66rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: 4.5rem;
}

/* Alternance des fonds : rythme au défilement */
.section-sable {
  background: var(--sable);
}

.section-baijot {
  background: var(--vert-profond);
  color: var(--fond);
}

.section-baijot h2 {
  color: var(--fond);
}

.section-baijot p {
  color: var(--clair-doux);
  max-width: 46em;
}

.section-baijot .phrase-fixe {
  color: var(--fond);
}

.section-baijot .bouton-secondaire {
  color: var(--fond);
  border-color: rgba(251, 249, 244, 0.55);
}

.section-baijot .bouton-secondaire:hover,
.section-baijot .bouton-secondaire:focus-visible {
  background: var(--fond);
  border-color: var(--fond);
  color: var(--vert-profond);
}

section[id] {
  scroll-margin-top: 5.5rem;
}

.entete-section {
  margin-bottom: 2.2rem;
}

.entete-section h2 {
  max-width: 18em;
  margin-bottom: 0;
}

.entete-section .phrase-fixe {
  margin-top: 1.1rem;
}

.entete-section + p {
  font-size: 1.12em;
  line-height: 1.6;
  max-width: 36em;
}

/* Chiffres tabulaires : les compteurs ne tressautent pas */
.hero-chiffres strong,
.etapes-jalons li span {
  font-variant-numeric: tabular-nums;
}

.micro-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin: 0 0 1rem;
}

/* ---------- Boutons ---------- */

/* Ocre + texte anthracite (4,8:1), survol vert profond + texte clair. */
.bouton,
.bouton-secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--police-texte);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 0.9em 1.6em;
  border-radius: var(--rayon-bouton);
  cursor: pointer;
  min-height: 3rem;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.bouton {
  background: var(--ocre);
  color: var(--texte);
  border: 1px solid var(--ocre);
}

.bouton:hover,
.bouton:focus-visible {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--fond);
}

.bouton-secondaire {
  background: transparent;
  color: var(--texte);
  border: 1px solid var(--filet-appuye);
}

.bouton-secondaire:hover,
.bouton-secondaire:focus-visible {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--fond);
}

.bouton-lien {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-weight: 600;
  color: var(--texte);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ocre);
  text-underline-offset: 5px;
}

.lien-retour {
  background: none;
  border: 0;
  padding: 0.6em 0;
  font: inherit;
  font-weight: 600;
  color: var(--bleu-source);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------- En-tête ---------- */

/* Barre flottante : pilule détachée du bord, verre translucide */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.75rem 0.75rem 0;
}

.entete-int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
  padding: 0.5rem 0.6rem 0.5rem 1.1rem;
  background: rgba(251, 249, 244, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--filet);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(20, 39, 32, 0.08);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.marque {
  text-decoration: none;
  line-height: 1.1;
}

.marque-logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.marque-logo-clair {
  display: none;
}

.entete.claire .marque-logo-couleur {
  display: none;
}

.entete.claire .marque-logo-clair {
  display: block;
}

.marque-par {
  display: block;
  font-size: 0.7rem;
  color: var(--texte-doux);
  margin-top: 0.25rem;
  transition: color 0.2s;
}

.entete-outils {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* CTA de la barre : vert profond, le contraste le plus fort de la palette */
.entete-cta {
  display: none;
  padding: 0.65em 1.3em;
  min-height: 2.6rem;
  font-size: 0.92rem;
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: #fff;
}

.entete-cta:hover,
.entete-cta:focus-visible {
  background: var(--vert-nuit);
  border-color: var(--vert-nuit);
  color: #fff;
}

.entete.claire .entete-cta {
  background: var(--fond);
  border-color: var(--fond);
  color: var(--vert-profond);
}

.entete.claire .entete-cta:hover,
.entete.claire .entete-cta:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--vert-profond);
}

@media (min-width: 48rem) {
  .entete-cta {
    display: inline-flex;
  }
}

/* Navigation : liens visibles sur grand écran */
.nav {
  display: none;
}

@media (min-width: 64rem) {
  .nav {
    display: block;
  }

  .nav ul {
    list-style: none;
    display: flex;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
  }

  /* Liens en pastilles, avec état actif suivant le défilement */
  .nav a {
    display: inline-block;
    padding: 0.5em 0.95em;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--texte);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }

  .nav a:hover,
  .nav a:focus-visible,
  .nav a.actif {
    background: var(--sable);
    color: var(--vert-profond);
  }

  .entete.claire .nav a:hover,
  .entete.claire .nav a:focus-visible,
  .entete.claire .nav a.actif {
    background: rgba(251, 249, 244, 0.16);
    color: #fff;
  }

  /* Sur grand écran, les liens remplacent le bouton Sommaire */
  .menu-bouton {
    display: none;
  }
}

/* Bouton Sommaire (mobile) */
.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  background: none;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-bouton);
  padding: 0.65em 1.05em;
  min-height: 2.6rem;
  font-family: var(--police-texte);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

@media (min-width: 64rem) {
  .menu-bouton {
    display: none;
  }
}

.menu-bouton:hover,
.menu-bouton:focus-visible {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--fond);
}

.menu-croix {
  width: 0.75em;
  height: 0.75em;
  background:
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
  transition: transform 0.2s;
}

/* Variante posée sur le hero sombre : pilule en verre sombre */
.entete.claire .entete-int {
  background: rgba(20, 39, 32, 0.55);
  border-color: rgba(251, 249, 244, 0.18);
  box-shadow: none;
}

.entete.claire .marque-par {
  color: var(--clair-sourd);
}

.entete.claire .nav a {
  color: var(--clair-doux);
}

.entete.claire .nav a:hover,
.entete.claire .nav a:focus-visible {
  color: #fff;
}

.entete.claire .menu-bouton {
  color: var(--fond);
  border-color: rgba(251, 249, 244, 0.55);
}

html:not(.js) .menu-bouton,
html:not(.js) .sommaire {
  display: none !important;
}

html:not(.js) .nav {
  display: block;
}

/* ---------- Sommaire plein écran (mobile) ---------- */

.sommaire {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--vert-profond);
  overflow: auto;
  padding: 5.5rem 1.4rem 3rem;
}

.sommaire[hidden] {
  display: none;
}

.sommaire-fermer {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  z-index: 2;
  background: none;
  border: 1px solid rgba(251, 249, 244, 0.5);
  border-radius: var(--rayon-bouton);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--fond);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.sommaire-fermer:hover,
.sommaire-fermer:focus-visible {
  background: var(--fond);
  color: var(--vert-profond);
}

.sommaire-liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 56rem;
}

.sommaire-liste li {
  border-top: 1px solid var(--filet-clair);
}

.sommaire-liste li:last-child {
  border-bottom: 1px solid var(--filet-clair);
}

.sommaire-liste a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0.2rem;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.15;
  color: var(--fond);
  text-decoration: none;
}

.sommaire-liste a span[aria-hidden] {
  font-size: 0.5em;
  color: var(--clair-sourd);
  min-width: 2em;
}

.sommaire-liste a[aria-current="true"] span[aria-hidden] {
  color: var(--ocre);
}

html.js .sommaire-liste li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.sommaire.ouvert .sommaire-liste li {
  opacity: 1;
  transform: none;
}

.sommaire.ouvert .sommaire-liste li:nth-child(2) { transition-delay: 0.04s; }
.sommaire.ouvert .sommaire-liste li:nth-child(3) { transition-delay: 0.08s; }
.sommaire.ouvert .sommaire-liste li:nth-child(4) { transition-delay: 0.12s; }
.sommaire.ouvert .sommaire-liste li:nth-child(5) { transition-delay: 0.16s; }
.sommaire.ouvert .sommaire-liste li:nth-child(6) { transition-delay: 0.2s; }
.sommaire.ouvert .sommaire-liste li:nth-child(7) { transition-delay: 0.24s; }
.sommaire.ouvert .sommaire-liste li:nth-child(8) { transition-delay: 0.28s; }

body.sommaire-ouvert {
  overflow: hidden;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--vert-nuit);
  color: var(--fond);
}

/* Sur mobile, pas de vidéo (brief 7.3) : photo réelle du terrain en fond */
@media (max-width: 47.98rem) {
  .hero {
    background: url("/assets/img/hero-mobile.webp") center / cover no-repeat var(--vert-nuit);
  }

  /* La photo est réelle : la mention non contractuelle ne concerne que la vidéo */
  .hero-mention {
    display: none;
  }
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

@media (min-width: 48rem) {
  .hero-video {
    display: block;
  }
}

/* Voile sobre : lisibilité garantie sur la vidéo */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(20, 39, 32, 0.52) 0%, rgba(20, 39, 32, 0.68) 100%);
}

.hero-int {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92svh;
  padding-top: 6.5rem;
  padding-bottom: 4rem;
}

.hero-lieu {
  color: var(--clair-sourd);
}

.hero h1 {
  color: var(--fond);
  font-size: clamp(2.4rem, 1.6rem + 4.4vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  max-width: 14em;
  margin-bottom: 0.5em;
}

.hero h1 em {
  font-style: normal;
  color: var(--ocre);
}

.hero-sous-titre {
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  line-height: 1.65;
  color: var(--clair-doux);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  margin-block: 1.8rem 2.6rem;
}

@media (min-width: 48rem) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
  }
}

.hero .bouton {
  font-size: 1.05rem;
  padding: 1em 2em;
}

.hero .bouton-lien {
  color: var(--fond);
  justify-content: center;
}

.hero-chiffres {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.4rem;
  margin: 0;
  padding: 0;
}

.hero-chiffres li {
  font-size: 0.88rem;
  color: var(--clair-sourd);
}

.hero-chiffres strong {
  display: block;
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.4rem);
  line-height: 1.1;
  color: var(--fond);
}

.hero-mention {
  font-size: 0.72rem;
  color: var(--clair-sourd);
  margin: 1.8rem 0 0;
}

/* Apparition douce au chargement */
.hero-lieu,
.hero h1,
.hero-sous-titre,
.hero-actions,
.hero-chiffres {
  animation: lever 0.7s ease-out both;
}

.hero h1 { animation-delay: 0.08s; }
.hero-sous-titre { animation-delay: 0.16s; }
.hero-actions { animation-delay: 0.24s; }
.hero-chiffres { animation-delay: 0.32s; }

@keyframes lever {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Fiches et visuels ---------- */

.fiche {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.fiche-plan {
  margin-block: 2rem 2.4rem;
  padding: 0.6rem;
}

/* Accent éditorial sur la seconde phrase d'un titre */
.h2-accent {
  font-style: italic;
  color: var(--ocre-sombre);
}

/* Plan de masse : large dans la page, plein écran au clic */
.fiche-plan-masse {
  max-width: 62rem;
}

.plan-lien {
  display: block;
  cursor: zoom-in;
}

.plan-lien img {
  transition: transform 0.25s ease-out;
}

.plan-lien:hover img {
  transform: scale(1.01);
}

/* ---------- Visionneuse plein écran ---------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 39, 32, 0.94);
}

.visionneuse[hidden] {
  display: none;
}

.visionneuse-zone {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 3.5rem 0.5rem 1rem;
}

.visionneuse-zone img {
  max-width: none;
  width: 1900px;
}

.visionneuse-fermer {
  position: fixed;
  top: 0.9rem;
  right: 1rem;
  z-index: 2;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(251, 249, 244, 0.5);
  background: rgba(20, 39, 32, 0.7);
  color: var(--fond);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.visionneuse-fermer:hover,
.visionneuse-fermer:focus-visible {
  background: var(--fond);
  color: var(--vert-profond);
}

body.visionneuse-ouverte {
  overflow: hidden;
}

.fiche-plan img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--rayon) - 4px);
}

/* Carrousel du quartier : vidéo, vue 3D et photo, dans la largeur du contenu */
.carrousel {
  margin: 2rem 0 1.6rem;
}

.carrousel-piste {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--rayon);
}

.carrousel-piste::-webkit-scrollbar {
  display: none;
}

.carrousel-vue {
  position: relative;
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

.carrousel-vue img,
.carrousel-vue video {
  display: block;
  width: 100%;
  height: min(56vh, 30rem);
  object-fit: cover;
}

.carrousel-legende {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(251, 249, 244, 0.92);
  border-radius: 6px;
  padding: 0.35em 0.85em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texte-doux);
}

.carrousel-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0.9rem 0 0;
}

.carrousel-position {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
  margin-right: 0.3rem;
}

.carrousel-bouton {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--filet-appuye);
  background: #fff;
  color: var(--texte);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.carrousel-bouton:hover,
.carrousel-bouton:focus-visible {
  background: var(--vert-profond);
  border-color: var(--vert-profond);
  color: var(--fond);
}

.fiche-plan figcaption {
  padding: 0.55rem 0.3rem 0.1rem;
  font-size: 0.78rem;
  color: var(--texte-doux);
}

.visuel-attente {
  display: grid;
  place-items: center;
  min-height: 10rem;
  aspect-ratio: 16 / 8;
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}

.section .visuel-attente {
  margin-block: 2rem 2.4rem;
}

.visuel-attente span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
}

/* ---------- Section terrains ---------- */

.phrase-fixe {
  font-weight: 600;
  color: var(--vert-profond);
  max-width: 40em;
  padding-left: 1rem;
  border-left: 2px solid var(--ocre);
  margin-block: 0 1.4em;
}

.note-plan {
  font-size: 0.85em;
  color: var(--texte-doux);
  margin-top: 0.9em;
}

/* ---------- Formulaires ---------- */

.formulaire {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.6rem 1.3rem;
  margin-top: 2.4rem;
}

@media (min-width: 48rem) {
  .formulaire {
    padding: 2.5rem;
  }
}

.formulaire h3 {
  font-size: 1.4rem;
}

/* Bandeau de tête du formulaire : vert profond, titre blanc, progression */
/* En-tête du formulaire : une ligne discrète, la question reste la vedette */
.formulaire-entete {
  margin: 0 0 2rem;
}

.formulaire-entete h3 {
  font-family: var(--police-texte);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 0.85rem;
}

.formulaire-entete .progression {
  margin: 0;
}

.etapes-progression {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
  margin: -0.2rem 0 1.4rem;
}

.formulaire fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 2rem;
}

.formulaire .etape {
  margin-bottom: 0;
}

/* ---------- Jauge de budget ---------- */

.jauge {
  margin: 0.4rem 0 1.2rem;
  transition: opacity 0.18s;
}

.jauge-estompee {
  opacity: 0.4;
}

.jauge-valeur {
  display: block;
  font-family: var(--police-titres);
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.3rem);
  font-weight: 600;
  color: var(--vert-profond);
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.1rem;
}

.jauge input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 99px;
  background: var(--sable-fonce);
  cursor: pointer;
}

.jauge input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ocre);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(20, 39, 32, 0.35);
  cursor: grab;
}

.jauge input[type="range"]::-moz-range-thumb {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--ocre);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(20, 39, 32, 0.35);
  cursor: grab;
}

.jauge input[type="range"]::-moz-range-progress {
  background: var(--ocre);
  height: 6px;
  border-radius: 99px;
}

.jauge input[type="range"]:disabled {
  cursor: default;
}

.jauge-bornes {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--texte-doux);
  margin-top: 0.55rem;
}

.jauge-inconnu {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
}

.jauge-inconnu input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--ocre);
}

.etape-note {
  font-size: 0.92rem;
  color: var(--texte-doux);
  margin: -1rem 0 1.4rem;
}

.formulaire legend {
  font-family: var(--police-titres);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--vert-profond);
  padding: 0;
  margin-bottom: 1.5rem;
}

.formulaire.etapes-actives .etape {
  display: none;
}

.formulaire.etapes-actives .etape.etape-active {
  display: block;
  animation: lever 0.3s ease-out both;
}

/* Barre de progression du parcours */
.progression {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: -0.2rem 0 1.9rem;
}

.progression-texte {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ocre-sombre);
  font-variant-numeric: tabular-nums;
}

.progression-barre {
  flex: 1;
  height: 3px;
  background: var(--filet);
  border-radius: 99px;
  overflow: hidden;
}

.progression-barre span {
  display: block;
  height: 100%;
  background: var(--ocre);
  border-radius: 99px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out;
}

/* Réponses en grandes cartes cliquables */
.choix-groupe {
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 34rem) {
  .choix-groupe {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.8rem;
  }

  /* Grandes cartes cliquables : icône au-dessus, la réponse EST le bouton */
  .choix > span {
    flex-direction: column;
    gap: 0.6em;
    min-height: 6.6rem;
    padding: 1.15em 0.9em;
  }

  .choix-icone {
    width: 1.7em;
    height: 1.7em;
  }
}

.choix {
  position: relative;
  display: flex;
}

.choix > span {
  flex: 1;
}

.choix input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choix > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-align: center;
  min-height: 3.6rem;
  padding: 0.9em 1.1em;
  background: #fff;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-bouton);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.choix span:hover {
  border-color: var(--vert-profond);
  background: var(--fond);
}

.choix input:checked + span {
  background: var(--ocre);
  border-color: var(--ocre);
  color: var(--texte);
}

.choix input:focus-visible + span {
  outline: 3px solid var(--bleu-source);
  outline-offset: 2px;
}

.choix-icone {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choix-inactif span {
  opacity: 0.45;
  cursor: default;
}

.choix-inactif span:hover {
  border-color: var(--filet-appuye);
}

.grille-champs {
  display: grid;
  gap: 1.1rem 1.5rem;
}

@media (min-width: 48rem) {
  .grille-champs {
    grid-template-columns: repeat(2, 1fr);
  }

  .champ-large {
    grid-column: 1 / -1;
  }
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
}

.champ label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texte);
}

.champ .aide {
  font-size: 0.82em;
  color: var(--texte-doux);
  margin: 0;
}

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--filet-appuye);
  border-radius: var(--rayon-bouton);
  padding: 0.7em 0.85em;
  min-height: 3rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
  border-color: var(--vert-profond);
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--vert-profond);
  box-shadow: 0 0 0 3px rgba(30, 58, 47, 0.15);
}

.champ select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F2422' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.7em;
}

.champ select:required:invalid {
  color: var(--texte-doux);
}

.champ option {
  color: var(--texte);
}

.champ textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.etape-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
}

/* Étapes à avancée automatique : choisir une réponse fait avancer.
   Le bouton Continuer disparaît (Entrée au clavier avance toujours),
   et la barre de navigation perd son filet pour ne plus créer de vide. */
.etape[data-avance-auto] [data-suivant] {
  display: none;
}

.etape[data-avance-auto] .etape-nav {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.9rem;
  justify-content: flex-start;
}

.etape-nav .lien-retour {
  margin-right: auto;
}

.consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  margin-block: 1.5rem 0;
}

.consentement input {
  margin-top: 0.3em;
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--vert-profond);
}

.consentement label {
  font-size: 0.88em;
  color: var(--texte-doux);
}

.champ-leurre {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pourquoi ici : une journée vécue ici ---------- */

.journee {
  list-style: none;
  margin: 0;
  padding: 0;
}

.journee li {
  position: relative;
  padding: 1.5rem 0 1.5rem 2.3rem;
}

/* Fil vertical ponctué d'ocre, comme des heures qui passent */
.journee li::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--filet);
}

.journee li:first-child::before {
  top: 2.2rem;
}

.journee li:last-child::before {
  bottom: auto;
  height: 2.2rem;
}

.journee li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.95rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--ocre);
  border: 2px solid var(--fond);
}

.journee-moment {
  font-family: var(--police-titres);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
  color: var(--vert-profond);
  margin: 0 0 0.25em;
}

.journee p {
  margin: 0;
  color: var(--texte-doux);
  max-width: 34em;
  font-size: 1.04em;
}

@media (min-width: 48rem) {
  .journee li {
    display: grid;
    grid-template-columns: minmax(13rem, 17rem) 1fr;
    gap: 0.3rem 2.2rem;
    align-items: baseline;
    padding-block: 1.7rem;
  }

  .journee-moment {
    margin: 0;
  }
}

/* ---------- Quartier ---------- */

.encadre-arel {
  border-left: 2px solid var(--filet-appuye);
  padding: 0.3rem 0 0.3rem 1.4rem;
  max-width: 36rem;
  margin-top: 2.2rem;
}

.encadre-arel h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35em;
}

.encadre-arel p {
  margin: 0;
  font-size: 0.95em;
  color: var(--texte-doux);
}

/* ---------- Votre maison ---------- */

.phrase-prix {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
  line-height: 1.25;
  color: var(--vert-profond);
  max-width: 22em;
  margin-top: 1.3em;
}

/* ---------- Calendrier ---------- */

.frise {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.frise li {
  position: relative;
  padding: 0 0 1.7rem 2.1rem;
}

.frise li::before {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.6rem;
  bottom: -0.35rem;
  width: 1px;
  background: var(--filet);
}

.frise li:last-child::before {
  display: none;
}

.frise li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--fond);
  border: 2px solid var(--vert-sauge);
}

.frise li:first-child::after {
  background: var(--ocre);
  border-color: var(--ocre);
}

.frise strong {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.25em;
  color: var(--vert-profond);
}

.frise span {
  font-size: 0.9em;
  color: var(--texte-doux);
}

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

.faq details {
  border-top: 1px solid var(--filet);
}

.faq details:last-child {
  border-bottom: 1px solid var(--filet);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02em;
  padding: 1.15rem 2.4rem 1.15rem 0;
  list-style: none;
  position: relative;
  min-height: 2.75rem;
  transition: color 0.15s;
}

.faq summary:hover {
  color: var(--ocre-sombre);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  translate: 0 -50%;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ocre);
  transition: rotate 0.2s;
}

.faq details[open] summary::after {
  rotate: 45deg;
}

.faq details p {
  padding-bottom: 1.2rem;
  margin: 0;
  max-width: 46em;
  color: var(--texte-doux);
}

/* ---------- Bandeau de consentement ---------- */

.bandeau-consentement {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: #fff;
  border-top: 1px solid var(--filet-appuye);
  padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(20, 39, 32, 0.12);
}

.bandeau-consentement p {
  max-width: 66rem;
  margin-inline: auto;
  font-size: 0.9em;
}

.bandeau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0;
}

.bandeau-actions .bouton-secondaire {
  font-size: 0.92rem;
  padding: 0.65em 1.3em;
  min-height: 2.75rem;
}

/* ---------- CTA mobile collant ---------- */

.cta-mobile {
  display: none;
}

html.js body.cta-visible .cta-mobile {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: rgba(251, 249, 244, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--filet);
  padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom));
  animation: lever 0.3s ease-out both;
}

html.js body.cta-visible.panneau-ouvert .cta-mobile,
html.js body.cta-visible.bandeau-visible .cta-mobile {
  display: none;
}

.cta-mobile .bouton {
  width: 100%;
}

@media (min-width: 48rem) {
  html.js body.cta-visible .cta-mobile {
    display: none;
  }
}

/* ---------- Pages simples (merci, légal) ---------- */

.page-simple {
  padding-block: 2.5rem 4.5rem;
  max-width: 46rem;
}

.page-simple h1 {
  font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem);
}

.page-simple h2 {
  font-size: 1.25rem;
  margin-top: 1.6em;
}

.carte-merci {
  background: #fff;
  border: 1px solid var(--filet);
  border-left: 3px solid var(--ocre);
  border-radius: var(--rayon);
  padding: 1.8rem 1.7rem;
  margin-block: 1.75rem;
}

.carte-merci p:last-child {
  margin-bottom: 0;
}

/* Pages secondaires : pied de page collé en bas, pilule d'en-tête compacte */
body.page-secondaire {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.page-secondaire main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}

body.page-secondaire .pied {
  margin-top: auto;
}

.entete-compacte .entete-int {
  max-width: max-content;
  padding-right: 1.4rem;
}

/* Page merci : contenu centré autour de la carte */
.page-merci {
  text-align: center;
  padding-top: 3.25rem;
}

.page-merci h1 {
  margin-bottom: 0.35em;
}

.page-merci .carte-merci {
  text-align: left;
  padding: 1.9rem 2rem;
  margin-block: 2rem 1.6rem;
}

.page-merci .merci-note {
  color: var(--texte-doux);
  font-size: 0.92rem;
}

/* ---------- Atouts Maisons Baijot (section maison) ---------- */

.atouts {
  display: grid;
  gap: 1rem;
  margin-block: 1.9rem 2.1rem;
}

@media (min-width: 48rem) {
  .atouts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
}

.atout {
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 1.5rem 1.4rem 1.4rem;
}

.atout-icone {
  width: 2.1rem;
  height: 2.1rem;
  color: var(--ocre-sombre);
  margin-bottom: 0.7rem;
}

.atout h3 {
  font-size: 1.14rem;
  margin-bottom: 0.4em;
}

.atout p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

.fiche-photo {
  padding: 0;
  overflow: hidden;
  margin: 0 0 1.4rem;
}

.fiche-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.fiche-photo figcaption {
  padding: 0.75rem 1.2rem;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

/* ---------- Confirmation dans le formulaire (envoi JavaScript) ---------- */

.confirmation {
  outline: none;
  text-align: center;
  padding: 0.8rem 0.2rem 0.4rem;
}

.confirmation-icone {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--vert-profond);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 0.55rem;
}

.confirmation h4 {
  font-size: 1.4rem;
  margin-bottom: 0.85rem;
}

.confirmation p {
  margin: 0.45em auto;
  max-width: 34rem;
}

.confirmation-note {
  color: var(--texte-doux);
  font-size: 0.9rem;
  margin-top: 1.15rem;
}

.formulaire-erreurs {
  background: #fdf1f0;
  border: 1px solid rgba(150, 40, 35, 0.35);
  border-radius: var(--rayon);
  color: #8a2320;
  padding: 0.85rem 1.05rem;
  margin: 0 0 1.15rem;
}

.formulaire-erreurs p {
  margin: 0.15em 0;
  font-size: 0.95rem;
}

.bouton-attente {
  opacity: 0.65;
  pointer-events: none;
}

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

.pied {
  background: var(--vert-profond);
  color: var(--fond);
  padding-block: 3rem 2.5rem;
  margin-top: 4rem;
}

.pied a {
  color: #fff;
}

.pied-int {
  display: grid;
  gap: 1.8rem;
}

@media (min-width: 48rem) {
  .pied-int {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem;
  }
}

.pied h2 {
  color: var(--fond);
  font-size: 1.15rem;
  margin-bottom: 0.4em;
}

.pied-logo {
  display: block;
  height: 3.4rem;
  width: auto;
}

.pied-int > div:first-child h2 {
  margin-bottom: 0.5em;
}

.pied p,
.pied li {
  font-size: 0.9em;
  color: var(--clair-doux);
}

.pied ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied li {
  margin-bottom: 0.45em;
}

.pied-mentions {
  border-top: 1px solid var(--filet-clair);
  margin-top: 2.2rem;
  padding-top: 1.3rem;
  font-size: 0.8em;
}

.pied-mentions p {
  margin: 0 0 0.4em;
  color: var(--clair-sourd);
}

/* ---------- Révélations au défilement (interface.js) ---------- */

html.js .reveler {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

html.js .reveler.revele {
  opacity: 1;
  transform: none;
}

/* ---------- Écrans moyens et larges ---------- */

@media (min-width: 48rem) {
  body {
    font-size: 1.125rem;
  }

  .section {
    padding-block: 6rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-lieu,
  .hero h1,
  .hero-sous-titre,
  .hero-actions,
  .hero-chiffres,
  .cta-mobile,
  .formulaire.etapes-actives .etape-active {
    animation: none;
  }

  .hero-video {
    display: none !important;
  }

  html.js .reveler {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .carrousel-piste {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01s !important;
  }
}