/* ═══════════════════════════════════════════════════════════════════
   PÔLE IMAGE, le strict complément

   Version précédente : 560 lignes qui réinventaient une direction
   artistique complète, sombre et bleue, à côté de celle du site. C'était
   l'erreur. Le site a déjà une identité aboutie (serif italique dans
   les titres, soulignement manuscrit, sceau de prix, cartes numérotées,
   accent soleil), et les pages image doivent la parler, pas en inventer
   une seconde.

   Ce qui distingue le pôle, ce sont ses images et son propos, pas une
   palette à part. Cette feuille ne contient donc plus que les quelques
   composants qui n'existent nulle part ailleurs : un hero posé sur
   photo, une mosaïque, une carte vidéo, une bande pleine largeur.
   Tout le reste vient de styles.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════ HERO SUR PHOTO ══════════
   Le seul bloc du pôle qui a besoin de texte clair : il est posé sur
   une photo, donc il porte son propre voile et ses propres couleurs. */
.hero-photo {
  position: relative;
  min-height: min(82vh, 40rem);
  display: grid; align-items: end;
  overflow: clip;
  color: var(--creme);
}
.hero-photo__fond { position: absolute; inset: 0; z-index: 0; }
.hero-photo__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #17130ED9 0%, #17130E80 36%, #17130EF2 100%);
}
.hero-photo__texte { position: relative; z-index: 1; padding-block: var(--sp-9) var(--sp-8); }
.hero-photo h1 { font-size: var(--fs-titre-hero); line-height: .98; letter-spacing: -.03em; margin-bottom: var(--sp-4); }
.hero-photo h1 em { color: var(--soleil); }
.hero-photo .surtitre { color: #FFB596; }
.hero-offre {
  display: inline-block;
  margin: var(--sp-3) 0 var(--sp-4);
  padding: .55rem .9rem;
  border-left: 3px solid var(--soleil);
  background: #17130EB8;
  color: var(--creme);
  font-size: var(--fs-s);
  line-height: 1.35;
}
.hero-offre strong { color: #FFB596; font-size: var(--fs-m); }
.hero-offre span { color: #D8CFC3; }
.hero-photo__chapeau {
  font-size: var(--fs-m); color: #E4DCD1;
  max-width: 46ch; margin-bottom: var(--sp-6);
}
.hero-photo__points {
  display: flex; flex-wrap: wrap; gap: .45rem .9rem;
  max-width: 52rem; margin: calc(var(--sp-4) * -1) 0 var(--sp-6);
  padding: 0; list-style: none; color: #F4EDE4;
  font-size: var(--fs-xs);
}
.hero-photo__points li {
  display: inline-flex; align-items: center; gap: .4rem;
}
.hero-photo__points li::before {
  content: "✓"; color: #FFB596; font-weight: 700;
}
.hero-photo .btn--fantome { color: var(--creme); border-color: #FAF5EC5C; }
.hero-photo .btn--fantome:hover { border-color: var(--creme); background: #FAF5EC1A; }

/* ══════════ MOSAÏQUE D'IMAGES ══════════ */
.galerie { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.galerie__vue { margin: 0; grid-column: span 2; }
.galerie__vue--large { grid-column: span 3; }
.galerie__vue img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--trait);
}
.galerie__vue--large img { aspect-ratio: 16 / 9; }
.galerie__vue figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--txt-3); }

/* ══════════ CARTE VIDÉO ══════════
   La vidéo ne se charge qu'au clic : l'affiche fait tout le travail
   d'accroche, la carte lui donne le même cadre qu'une réalisation. */
.video-carte {
  border: 1px solid var(--trait-fort);
  border-radius: var(--r); overflow: clip;
  background: var(--creme-creuse);
}
.video-carte video { display: block; width: 100%; height: auto; }
.video-carte__pied {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-s); color: var(--txt-2);
}
.video-carte__pied strong { color: var(--txt); }

/* ══════════ BANDE PHOTO PLEINE LARGEUR ══════════ */
.bande-photo {
  position: relative; overflow: clip;
  min-height: clamp(13rem, 26vw, 20rem);
  display: grid; align-items: center;
  color: var(--creme);
}
.bande-photo img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.bande-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #17130EF0 0%, #17130EB8 46%, #17130E40 100%);
}
.bande-photo__texte { position: relative; z-index: 2; max-width: 36rem; }
.bande-photo p { font-size: var(--fs-l); line-height: 1.35; }
.bande-photo p em { color: var(--soleil); }

@media (max-width: 940px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie__vue, .galerie__vue--large { grid-column: span 1; }
  .galerie__vue--large img { aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  /* On garde deux colonnes : en une seule, les cinq vues empilées
     faisaient 2 100 px de haut pour vingt mots de légende. */
  .galerie { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
  .galerie__vue figcaption { font-size: 12px; }
  .hero-photo { min-height: 74vh; }
  .hero-offre { margin-top: var(--sp-2); }
  .hero-photo__points { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* ══════════ ÉTAPES SUR FOND ENCRE ══════════
   Combinaison neuve : le composant .etape n'avait jamais servi sur fond
   sombre, ses couleurs sont calées pour le crème. Mesuré à 2,2:1 avant
   correction. La grille passe aussi en auto-fit : .etapes est câblé sur
   cinq colonnes, et ce bloc n'en compte que trois. */
.section--encre .etapes { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.section--encre .etape h3 { color: var(--txt-inv); }
.section--encre .etape p  { color: var(--txt-inv-2); }
.section--encre .etape::before { background: var(--trait-inv); }
.section--encre .etape::after {
  background: var(--creme); color: var(--encre);
  border-color: var(--trait-inv);
}

/* ══════════ LECTEUR 360 ══════════
   Rien ne se charge avant le clic : ni la vidéo, ni le contexte WebGL.
   L'affiche tient la place, et le ratio est réservé pour qu'aucun
   décalage n'ait lieu au démarrage. */
.video360 {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  overflow: clip;
  background: var(--encre);
  cursor: grab;
  touch-action: none;
}
.video360[data-tire] { cursor: grabbing; }
.video360 canvas { display: block; width: 100%; height: 100%; }
.video360__affiche {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.video360__voile {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; gap: var(--sp-4);
  background: #17130E5C;
  transition: opacity var(--t) var(--ease);
}
.video360[data-lance] .video360__affiche,
.video360[data-lance] .video360__voile { opacity: 0; pointer-events: none; }
.video360__aide {
  position: absolute; z-index: 3; left: var(--sp-4); bottom: var(--sp-4);
  background: #17130EC7; color: var(--creme);
  border-radius: var(--r-pilule); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  opacity: 0; transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.video360[data-pret] .video360__aide { opacity: 1; }
.video360:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }

/* Barre de commandes. Posee en JS, donc absente tant que la video
   n'est pas lancee : rien a masquer sur l'affiche. */
.video360__barre {
  position: absolute; z-index: 3; right: var(--sp-4); bottom: var(--sp-4);
  display: flex; gap: var(--sp-2);
}
.video360__cmd {
  background: #17130EC7; color: var(--creme);
  border: 1px solid #FFFFFF3D; border-radius: var(--r-pilule);
  padding: var(--sp-2) var(--sp-4);
  font: inherit; font-size: var(--fs-xs); line-height: 1;
  cursor: pointer;
  transition: background var(--t-vif) var(--ease);
}
.video360__cmd:hover { background: var(--encre); }
.video360__cmd:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
/* La pause est la commande principale : elle porte le contraste. */
.video360__lecture { min-width: 5.5em; }

/* Mention du sujet, posee sur l'image comme un cartel. Elle apparait
   avec la video : sur l'affiche seule elle ferait doublon avec le
   titre de section. */
.video360__cliche {
  position: absolute; z-index: 3; left: var(--sp-4); top: var(--sp-4);
  background: #17130EC7; color: var(--creme);
  border-radius: var(--r-pilule); padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs); letter-spacing: .04em;
  opacity: 0; transition: opacity var(--t) var(--ease);
  pointer-events: none;
}
.video360[data-pret] .video360__cliche { opacity: 1; }
/* Sur mobile, un 16/9 ne laisse que 210 px de haut : trop peu pour une
   vue immersive, et les trois pastilles s'y entassent. On donne de la
   hauteur au bloc, et l'aide remonte au-dessus du bouton de son. */
@media (max-width: 34rem) {
  .video360 { aspect-ratio: 4 / 5; }
  .video360__aide { bottom: calc(var(--sp-4) * 2 + 2.4em); }
}
/* Repli : sans WebGL on montre l'affiche et on le dit. */
.video360[data-echec] .video360__voile { background: #17130E8F; }
.video360[data-echec] .video360__voile [data-lire] { display: none; }
.video360__repli { display: none; color: var(--creme); font-size: var(--fs-s); max-width: 26ch; text-align: center; }
.video360[data-echec] .video360__repli { display: block; }

/* ══════════════════════════════════════════════════════════════════
   VISITE INTEGREE
   Meme facade que la video 360 : une affiche, un bouton, et rien qui
   se charge avant le clic. Le cadre remplace l'affiche a l'ouverture.
   ══════════════════════════════════════════════════════════════════ */
.visite-integree {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r);
  overflow: clip;
  background: var(--encre);
}
.visite-integree__affiche {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.visite-integree__voile {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: var(--sp-4);
  background: #17130E5C;
  padding: var(--sp-5);
  text-align: center;
  transition: opacity var(--t) var(--ease);
}
.visite-integree__voile p { color: var(--creme); font-size: var(--fs-s); max-width: 40ch; }
/* Cartel : ce qu'on regarde et ce qu'il contient, avant même d'ouvrir. Il dit
   aussi que c'est une démonstration : la visite n'est le bien de personne. */
.visite-integree__cartel {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.45em 0.95em; border-radius: 999px;
  border: 1px solid #FAF5EC59; background: #17130E4D;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--creme); font-size: var(--fs-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.visite-integree__cartel::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--soleil); flex: none;
}
.visite-integree[data-ouverte] .visite-integree__affiche,
.visite-integree[data-ouverte] .visite-integree__voile { opacity: 0; pointer-events: none; }
.visite-integree__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-s); color: var(--txt-3);
}
.visite-integree iframe {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; border: 0;
}
/* Sur téléphone, le précédent ratio vertical 4/5 occupait presque tout
   l'écran et donnait l'impression que la démo grossissait pendant le scroll.
   Le lecteur tactile s'ouvre désormais en plein écran : l'affiche intégrée
   reste donc volontairement compacte dans la page. */
@media (max-width: 34rem) {
  .visite-integree {
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: min(64svh, 24rem);
  }
}

/* ══════════════════════════════════════════════════════════════════
   CHOIX DU LIEU

   Six démonstrations, une par type de lieu. Les onglets sont posés
   sous la carte plutôt que dessus : au-dessus, ils auraient mangé
   l'image, qui est le seul argument de vente de la section.
   ══════════════════════════════════════════════════════════════════ */
.visite-choix {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.visite-choix__btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  min-height: 44px; padding: 0.5em 1em;
  border: 1px solid var(--trait-fort); border-radius: 999px;
  background: transparent; color: var(--txt-2);
  font: inherit; font-size: var(--fs-s); cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.visite-choix__btn:hover { border-color: var(--encre); color: var(--encre); }
.visite-choix__btn[aria-selected="true"] {
  background: var(--encre); border-color: var(--encre); color: var(--creme);
}
/* Le nombre de positions décide de ce qu'on promet : « 4 positions »
   annonce un parcours, « 1 vue » annonce une vue. Jamais l'inverse. */
.visite-choix__nb {
  font-size: var(--fs-xs); opacity: 0.7; font-variant-numeric: tabular-nums;
}
.visite-choix__btn[aria-selected="true"] .visite-choix__nb { opacity: 0.75; }
@media (max-width: 34rem) {
  .visite-choix { gap: 6px; }
  .visite-choix__btn { padding: 0.45em 0.8em; font-size: var(--fs-xs); }
  /* Six onglets avec leur compte tenaient sur quatre lignes, soit près de
     200 px avant même de voir l'image. Le compte reste lisible : il est
     répété sur le cartel de l'affiche et dans la légende, pour le lieu
     effectivement choisi. */
  .visite-choix__nb { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SECTION LEVÉE

   La visite de démonstration remonte sur le bas du hero. C'est le seul
   moyen de la faire voir sans défiler : sur une page qui vend une
   visite virtuelle, la voir compte plus que la lire. Le hero perd donc
   la hauteur qu'elle lui prend, pour que le total ne bouge pas.
   ══════════════════════════════════════════════════════════════════ */
/* Quand une carte se lève sur lui, le hero se resserre : il doit
   laisser voir le haut de la carte sans qu'on ait à défiler, sinon
   la lever ne sert à rien. */
.hero-photo:has(+ .section--levee) {
  min-height: 0;
  padding-bottom: var(--sp-9);
}
.hero-photo:has(+ .section--levee) .hero-photo__texte {
  padding-block: var(--sp-6) var(--sp-5);
}
.hero-photo:has(+ .section--levee) .hero-photo__chapeau {
  margin-bottom: var(--sp-3);
  max-width: 44ch;
}
.hero-photo:has(+ .section--levee) .hero-photo__points { margin-bottom: var(--sp-4); }
/* Le titre de la carte levée est un vrai h2 (la section doit garder sa place
   dans le plan de la page) mais il tient le rôle d'un cartel : on lui donne
   la taille d'un titre de carte, pas celle d'un titre de section. */
.video-carte__titre {
  font-size: var(--fs-m); font-weight: 500; line-height: 1.25;
  margin-bottom: var(--sp-1);
}

/* La carte montre le panorama, pas sa marge : on la met à fleur en haut. */
.section--levee .video-carte { padding-top: 0; }
.section--levee {
  position: relative;
  margin-top: calc(var(--sp-9) * -1);
  padding-top: 0;
}
.section--levee .video-carte {
  background: var(--surface);
  border-radius: var(--r-l);
  padding: var(--sp-3);
  box-shadow: 0 24px 60px -28px #17130E59;
}
@media (max-width: 560px) {
  .hero-photo:has(+ .section--levee) { padding-bottom: var(--sp-7); }
  .section--levee { margin-top: calc(var(--sp-7) * -1); }
  .section--levee .video-carte { padding: var(--sp-2); }
}
/* Repli : sans :has, la carte reste simplement en dessous du hero. */
@supports not (selector(:has(*))) {
  .section--levee { margin-top: 0; padding-top: var(--sp-6); }
}

/* ══════════════════════════════════════════════════════════════════
   PANORAMA DU HERO
   La toile se pose au-dessus de la photo, jamais à sa place : si le
   script ne tourne pas, on ne voit simplement pas la différence.
   ══════════════════════════════════════════════════════════════════ */
.hero-photo__pano {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero-photo__fond[data-pano-pret] .hero-photo__pano { opacity: 1; }
/* Le voile du hero doit rester au-dessus de la toile. */
.hero-photo__fond::after { z-index: 2; }

/* Page d’arrivée Ads : prix et périmètre avant la démonstration.
   Styles isolés pour préserver les autres pages et le lecteur mobile. */
.arrivee { padding-block: clamp(2rem, 5vw, 5rem); border-bottom: 1px solid var(--trait); }
.arrivee__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.arrivee h1 { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 1.04; letter-spacing: -.035em; margin-block: 1rem 1.25rem; }
.arrivee h1 em { color: var(--accent-txt); }
.arrivee__intro { max-width: 53ch; font-size: 1.0625rem; color: var(--txt-2); }
.arrivee__prix { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-block: 1.5rem; }
.arrivee__prix > strong { font-size: clamp(3.5rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -.06em; }
.arrivee__prix > strong span { font-size: .6em; color: var(--accent-txt); }
.arrivee__prix p { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.arrivee__prix p span { font-size: .875rem; color: var(--txt-2); }
.arrivee__inclus { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.arrivee__inclus li { position: relative; padding-left: 1.5rem; }
.arrivee__inclus li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-txt); }
.arrivee__conditions { max-width: 60ch; font-size: .875rem; line-height: 1.55; color: var(--txt-2); margin-bottom: 1.5rem; }
.arrivee .hero__actions { flex-direction: column; align-items: flex-start; gap: .75rem; }
.arrivee__appel { padding-block: .5rem; font-size: .9375rem; text-decoration: underline; text-underline-offset: .25em; }
.arrivee__rassurance { margin-top: .75rem; color: var(--txt-3); font-size: .875rem; }
.arrivee__apercu { position: relative; display: block; min-width: 0; height: clamp(22rem, 38vw, 34rem); border-radius: var(--r-l); overflow: hidden; background: var(--encre); color: var(--creme); }
.arrivee__apercu img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arrivee__apercu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, #17130EEB); pointer-events: none; }
.arrivee__badge { position: absolute; top: 1.25rem; left: 1.25rem; padding: .5rem .85rem; border-radius: 2rem; background: var(--creme); color: var(--encre); font-size: .875rem; }
.arrivee__legende { position: absolute; z-index: 1; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; display: grid; gap: .75rem; }
.arrivee__legende strong { font-size: 1.5rem; line-height: 1.2; max-width: 18ch; }
.arrivee__legende > span { font-size: .9375rem; text-decoration: underline; text-underline-offset: .3em; }
.demo-arrivee { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.demo-arrivee__entete { display: flex; align-items: end; gap: 2rem; justify-content: space-between; margin-bottom: 1.5rem; }
.demo-arrivee__entete h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.15; margin-top: .75rem; }
.demo-arrivee__entete > p { max-width: 36ch; font-size: .9375rem; color: var(--txt-2); }
.page-visite #contact { scroll-margin-top: 6rem; }
.page-visite #demo-visite { scroll-margin-top: 6rem; }
.page-visite #contact .titre-section { font-size: clamp(2rem, 4vw, 3.5rem); }
.page-visite #contact .formulaire { padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-l); }
.page-visite #contact .contact__rdv { margin-top: 1.5rem; }
@media (max-width: 800px) {
  .arrivee__grille { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .arrivee__apercu { height: 17rem; }
  .demo-arrivee__entete { display: block; }
  .demo-arrivee__entete > p { max-width: 55ch; margin-top: 1rem; }
  .page-visite #contact .formulaire { order: -1; }
}
@media (max-width: 480px) {
  .arrivee .btn--grand { width: 100%; white-space: normal; text-align: center; padding-inline: 1rem; }
  .arrivee__prix { gap: 1rem; }
  .arrivee__apercu { height: 14rem; }
  .arrivee .surtitre { font-size: .875rem; }
}