/* ==========================================================================
   Alive — blocs de page
   ========================================================================== */

/* ---------- Défilement ----------
   Les étapes des scènes sont gérées par assets/js/scenes.js (un geste = une
   étape) : pas d'aimantation CSS, qui ramènerait la page au dernier cran. */
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
/* Aimantation légère : si l'on s'arrête près d'une section plein écran,
   la page se cale dessus. Proximité seulement, jamais de blocage. */
.hero, .scene { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Barre de progression ---------- */
.progression {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--degrade);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 95;
  pointer-events: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__scene { position: absolute; inset: 0; z-index: -2; }
/* La vidéo de la salle. Avant qu'elle n'arrive, sa première image est déjà là. */
.hero__scene { background: #030304 url('../video/hero-paysage.jpg') center / cover no-repeat; }
@media (orientation: portrait) { .hero__scene { background-image: url('../video/hero-portrait.jpg'); } }
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero__video.visible { opacity: 1; }

.hero__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--noir) 4%, rgba(6,6,8,.82) 26%, rgba(6,6,8,.15) 62%, transparent 88%),
    linear-gradient(to right, rgba(6,6,8,.5), transparent 52%);
}

.hero__int {
  position: relative;
  width: 100%;
  padding-bottom: clamp(44px, 8vh, 96px);
}

/* Le titre entre en scène, mais seulement quand la visite est finie */
.hero__texte { max-width: 860px; }
.hero h1 { margin-bottom: 22px; }
.hero__ligne { max-width: 480px; font-size: clamp(1.02rem, 1.5vw, 1.24rem); color: var(--gris); }

.hero__actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* Sur ordinateur, la salle se montre d'un clic n'importe où dans le haut de
   page : une étiquette « Voir le plan 3D » suit la souris, et le bouton s'efface.
   Sur écran tactile, pas de souris : le bouton reste. */
.curseur-3d { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero__demo { display: none; }
  .hero.vise { cursor: none; }
  .hero.vise :is(a, button) { cursor: pointer; }
  .curseur-3d {
    display: block;
    position: absolute; left: 0; top: 0; z-index: 5;
    pointer-events: none;
    transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0);
  }
  .curseur-3d span {
    display: block;
    translate: -50% -50%;
    padding: 12px 18px;
    border-radius: 99px;
    background: var(--blanc); color: var(--noir);
    font-size: .88rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
    opacity: 0; scale: .6;
    transition: opacity .25s var(--doux), scale .35s var(--sortie);
  }
  .hero.vise .curseur-3d span { opacity: 1; scale: 1; }
}

.hero__bas {
  position: absolute;
  left: var(--gouttiere);
  right: var(--gouttiere);
  bottom: clamp(16px, 3vh, 26px);
  max-width: var(--page);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  pointer-events: none;
}
.hero__bas > * { pointer-events: auto; }

/* ==========================================================================
   MUR DE LIEUX
   ========================================================================== */
.bandeau {
  border-block: 1px solid var(--trait);
  padding-block: 26px;
  overflow: hidden;
  position: relative;
}
.bandeau__lieux {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

/* Les logos des lieux, en blanc atténué. Au survol, celui sous la souris
   grossit et s'allume, les autres s'effacent un peu. */
.lieu {
  display: block; width: auto; flex: none; max-width: 28vw; object-fit: contain;
  opacity: .62;
  transition: opacity .45s var(--doux), transform .55s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .bandeau__lieux:hover .lieu { opacity: .35; }
  .bandeau__lieux .lieu:hover { opacity: 1; transform: scale(1.3); }
}
@media (max-width: 640px) {
  .bandeau { padding-block: 22px; }
  .bandeau__lieux { gap: 32px; }
  .lieu { height: auto !important; max-height: 30px; }
  .lieu { opacity: .75; }
}
                border: 1.5px solid currentColor; padding: 5px 10px; }

/* ==========================================================================
   MESURE — la preuve, en une phrase puis des nombres
   ========================================================================== */
.mesure__phrase { max-width: 860px; }

.mesure__liste {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 76px);
  margin-top: clamp(44px, 5vw, 70px);
  padding-top: 34px;
  border-top: 1px solid var(--trait);
}
.mesure__item b {
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.mesure__item span { display: block; margin-top: 8px; font-size: .9rem; color: var(--gris-bas); }

/* ==========================================================================
   PLAN INTERACTIF
   ========================================================================== */
.plan-bloc {
  border: 1px solid var(--trait);
  overflow: hidden;
  background: var(--noir-2);
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: min(680px, 74svh);
}

.plan-scene { position: relative; background: var(--noir); min-height: 420px; }
.plan-scene canvas { width: 100% !important; height: 100% !important; }

.plan-barre {
  position: absolute;
  top: 14px; left: 14px;
  display: flex;
  background: rgba(8, 8, 11, .94);
  border: 1px solid var(--trait);
  z-index: 3;
}
.plan-barre button {
  padding: 9px 15px;
  border: 0;
  background: none;
  font-size: .84rem;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  transition: background .3s var(--doux), color .3s;
}
.plan-barre button + button { border-left: 1px solid var(--trait); }
.plan-barre button[aria-selected='true'] { background: var(--blanc); color: #08080b; }
.plan-barre button:hover:not([aria-selected='true']) { color: var(--blanc); }
.plan-barre button:disabled { opacity: .35; cursor: default; }

.plan-legende {
  position: absolute;
  bottom: 14px; left: 14px;
  display: flex;
  gap: 16px;
  font-size: .78rem;
  color: var(--gris-bas);
  z-index: 3;
  flex-wrap: wrap;
}
.plan-legende i {
  width: 7px; height: 7px;
  display: inline-block;
  margin-right: 7px;
  vertical-align: 1px;
}

.plan-voile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6, 6, 8, .5);
  z-index: 4;
  font-size: .9rem;
  color: var(--blanc);
  cursor: pointer;
}
.plan-voile[hidden] { display: none; }

.plan-panneau {
  border-left: 1px solid var(--trait);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--noir-2);
}
.plan-fiche h4 { font-size: 1.3rem; letter-spacing: -.035em; margin-bottom: 4px; }
.plan-fiche .zone { color: var(--gris-bas); font-size: .86rem; }

.plan-lignes { display: grid; margin-top: 16px; border-top: 1px solid var(--trait); }
.plan-ligne {
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
}
.plan-ligne span { color: var(--gris-bas); }
.plan-ligne b { font-weight: 700; font-variant-numeric: tabular-nums; }

.plan-choix { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--trait); }
.plan-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.plan-total b { font-size: 1.6rem; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.plan-choix .btn { width: 100%; justify-content: center; }
.plan-choix .btn:disabled { opacity: .35; cursor: default; }

.plan-vide { color: var(--gris-bas); font-size: .92rem; line-height: 1.5; }

.plan-jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-jeton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--trait-fort);
  font-size: .78rem;
  font-weight: 700;
  animation: jeton .4s var(--sortie);
}
@keyframes jeton { from { opacity: 0; transform: translateY(4px); } }
.plan-jeton button { border: 0; background: none; padding: 0; color: var(--gris-bas); cursor: pointer; line-height: 1; }
.plan-jeton button:hover { color: var(--blanc); }

/* ==========================================================================
   ALTERNANCE ÉDITORIALE — texte à gauche, démonstration à droite, et l'inverse
   ========================================================================== */
.duo {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 6vw, 92px);
  align-items: center;
}
.duo--inverse { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.duo--inverse .duo__texte { order: 2; }

.duo__texte h2 { margin-bottom: 20px; }
.duo__texte .p-large { max-width: 460px; }

.puces { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.puces li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 13px;
  color: var(--gris);
  line-height: 1.45;
  font-size: .97rem;
}
.puces svg { width: 16px; height: 16px; margin-top: 4px; color: var(--gris-bas); }

/* ==========================================================================
   MAQUETTES D'INTERFACE
   ========================================================================== */
.maquette {
  border: 1px solid var(--trait);
  background: var(--noir-2);
  overflow: hidden;
}
.maquette__barre {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--trait);
}
.maquette__barre i {
  width: 7px; height: 7px;
  background: rgba(255, 255, 255, .14);
  display: block;
}
.maquette__url {
  margin-left: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .68rem;
  color: var(--gris-bas);
}
.maquette__corps { padding: 14px; display: grid; gap: 8px; }

.ligne-demande {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 13px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--trait);
  background: var(--noir);
  transition: border-color .4s var(--doux), background .4s;
}
.ligne-demande:hover { border-color: var(--trait-fort); background: var(--noir-3); }
.ligne-demande__init {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 700;
  background: var(--noir-4);
  color: var(--gris);
}
.ligne-demande__nom { font-size: .9rem; font-weight: 700; letter-spacing: -.015em; display: block; }
.ligne-demande__det { font-size: .76rem; color: var(--gris-bas); display: block; }
.ligne-demande__prix { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.etat { font-size: .69rem; font-weight: 700; padding: 4px 8px; white-space: nowrap; }
.etat--attente  { background: color-mix(in srgb, var(--g3) 16%, transparent); color: color-mix(in srgb, var(--g3) 70%, white); }
.etat--confirme { background: color-mix(in srgb, var(--g1) 16%, transparent); color: color-mix(in srgb, var(--g1) 70%, white); }
.etat--paye     { background: rgba(255, 255, 255, .07); color: var(--gris); }

/* ==========================================================================
   ÉTAPES
   ========================================================================== */
.etapes { display: grid; }
.etape {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: clamp(14px, 3vw, 40px);
  padding-block: clamp(24px, 3.2vw, 38px);
  border-top: 1px solid var(--trait);
  align-items: start;
  transition: background .5s var(--doux);
}
.etape:last-child { border-bottom: 1px solid var(--trait); }
.etape:hover { background: rgba(255, 255, 255, .014); }
.etape__num {
  font-size: .78rem;
  color: var(--gris-bas);
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.etape__corps { display: grid; gap: 9px; max-width: 620px; }
.etape h3 { font-size: clamp(1.2rem, 2vw, 1.62rem); letter-spacing: -.035em; }

/* ==========================================================================
   TARIFS — un tableau, pas trois cartes
   ========================================================================== */
.offres { border-top: 1px solid var(--trait); }
.offre {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) auto;
  gap: clamp(20px, 4vw, 60px);
  align-items: start;
  padding-block: clamp(28px, 3.4vw, 42px);
  border-bottom: 1px solid var(--trait);
  position: relative;
  transition: background .5s var(--doux);
}
.offre:hover { background: rgba(255, 255, 255, .014); }
.offre--phare::before {
  content: '';
  position: absolute;
  left: 0; top: -1px; bottom: -1px;
  width: 2px;
  background: var(--degrade);
}
.offre--phare { padding-left: clamp(16px, 2vw, 26px); }

.offre__nom h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.04em; }
.offre__nom p { color: var(--gris-bas); font-size: .9rem; margin-top: 7px; }
.offre__prix { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.offre__prix b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.offre__prix span { color: var(--gris-bas); font-size: .85rem; }

.offre__contenu { color: var(--gris); font-size: .97rem; line-height: 1.5; }
.offre__contenu strong { color: var(--blanc); font-weight: 700; }
.offre .btn { align-self: center; }

/* ==========================================================================
   DÉCLARATION
   ========================================================================== */
.declaration { max-width: 900px; }
.declaration blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  text-wrap: balance;
}
.declaration figcaption {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--gris-bas);
  font-size: .9rem;
}
.declaration figcaption i { width: 24px; height: 1px; background: var(--degrade); display: block; }

/* ==========================================================================
   APPEL FINAL
   ========================================================================== */
.final {
  position: relative;
  border: 1px solid var(--trait);
  padding: clamp(44px, 7vw, 100px) clamp(24px, 5vw, 70px);
  overflow: hidden;
  background: var(--noir-2);
}
.final__int { position: relative; z-index: 1; max-width: 720px; }
.final .p-large { margin-top: 22px; max-width: 520px; }
.final__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* ==========================================================================
   ACCORDÉON
   ========================================================================== */
.accordeon { border-top: 1px solid var(--trait); }
.accordeon details { border-bottom: 1px solid var(--trait); }
.accordeon summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -.025em;
  transition: color .3s;
}
.accordeon summary::-webkit-details-marker { display: none; }
.accordeon summary:hover { color: #fff; }
.accordeon .signe { width: 16px; height: 16px; position: relative; flex-shrink: 0; }
.accordeon .signe::before, .accordeon .signe::after {
  content: '';
  position: absolute;
  background: var(--gris);
  transition: transform .4s var(--sortie), opacity .3s;
}
.accordeon .signe::before { inset: 7.5px 0 auto 0; height: 1.5px; }
.accordeon .signe::after  { inset: 0 7.5px auto; width: 1.5px; height: 16px; }
.accordeon details[open] .signe::after { transform: scaleY(0); opacity: 0; }
.accordeon__reponse { padding-bottom: 24px; max-width: 680px; }

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.champ { display: grid; gap: 7px; }
.champ label { font-size: .84rem; color: var(--gris); font-weight: 600; }
.champ input, .champ textarea, .champ select {
  font: inherit;
  font-size: .97rem;
  padding: 13px 14px;
  border: 1px solid var(--trait);
  background: var(--noir-2);
  color: var(--blanc);
  border-radius: var(--r);
  transition: border-color .3s, background .3s;
  width: 100%;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--trait-fort);
  background: var(--noir-3);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-bas); }
.champ textarea { resize: vertical; min-height: 110px; }

/* ==========================================================================
   RUPTURES
   ========================================================================== */
@media (max-width: 1100px) {
  .plan-bloc { grid-template-columns: 1fr; }
  .plan-panneau { border-left: 0; border-top: 1px solid var(--trait); }
  .plan-scene { min-height: 46svh; }
  .offre { grid-template-columns: 1fr 1fr; }
  .offre .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 900px) {
  .duo, .duo--inverse { grid-template-columns: 1fr; }
  .duo--inverse .duo__texte { order: 0; }
  .hero { min-height: 92svh; }
}

@media (max-width: 640px) {
  .etape { grid-template-columns: 1fr; gap: 10px; }
  .etape__num { padding-top: 0; }
  .offre { grid-template-columns: 1fr; }
  .mesure__liste { gap: 26px 38px; }
  .hero__bas { position: static; margin-top: 30px; flex-direction: column; align-items: flex-start; }
}

/* ---------- Questions : deux colonnes, une seule sur téléphone ---------- */
.questions__grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); }
@media (max-width: 760px) { .questions__grille { grid-template-columns: minmax(0, 1fr); } }