/* =========================================================
   ACCUEIL IMMERSIF — styles repris du skill « Site Immersif »
   ---------------------------------------------------------
   Même mise en scène que le modèle, mais avec la charte
   Rive Seize : fond beige, encre noire, EB Garamond, aucun
   ovale dessiné. Les couleurs viennent de style.css.
   ========================================================= */

.accueil {
  /* correspondance entre les noms du modèle et notre charte */
  --ink-rgb: 22, 21, 20;
  --bone: var(--beige);          /* toile de fond */
  --ink: var(--encre);           /* texte principal */
  --ash: var(--texte);           /* texte secondaire */
  --white: var(--fond);          /* panneau des biens */
  --lime: var(--encre);          /* bande de la devise : noire… */
  --lime-ink: var(--beige);      /* …avec les lettres en beige */
  --ink-faint: rgba(var(--ink-rgb), 0.16);
  --t-heading: clamp(36px, 5vw, 66px);
  --gutter: clamp(20px, 4vw, 64px);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  background: var(--bone);
  overflow-x: hidden;
}
:where(.accueil .smooth) p,
:where(.accueil .smooth) h1,
:where(.accueil .smooth) h2,
:where(.accueil .smooth) h3 { margin: 0; }

/* petites capitales espacées (remplace la police « machine à écrire » du modèle) */
.mono {
  font-size: 12.5px;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}
.ash { color: var(--ash); }

/* ═══════════ DÉFILEMENT DOUX ═══════════ */
body.is-smooth .smooth {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  will-change: transform;
}

/* ═══════════ ÉCRAN DE CHARGEMENT — FIGÉ (validé, ne plus modifier) ═══════════
   le nom + un trait qui se remplit, puis le nom rejoint sa place dans l'en-tête */
.loader {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.loader::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bone);
  transition: opacity .75s var(--ease-inout);
}
.loader.done { pointer-events: none; }
.loader.done::before { opacity: 0; }
.loader-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.loader-wordmark {
  font-size: 26px; letter-spacing: 0.01em; color: var(--ink);
  transform-origin: center center;
  transition: transform .9s var(--ease-inout);
  will-change: transform;
}
.loader-wordmark.landed { opacity: 0; transition: opacity .32s var(--ease-out); }
.loader-rule {
  display: block; width: 128px; height: 1px;
  background: var(--ink-faint); overflow: hidden;
  transition: opacity .3s var(--ease-out), transform .5s var(--ease-inout);
}
.loader.done .loader-rule { opacity: 0; transform: scaleX(0.4); }
.loader-rule i { display: block; width: 100%; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* l'en-tête entre en glissant après le chargement */
body.accueil .entete { transform: translate(-50%, -180%); }
body.accueil.is-ready .entete { transform: translate(-50%, 0); }
body.accueil.is-ready .entete.cache { transform: translate(-50%, calc(-100% - 44px)); }
/* pendant le vol du nom, la barre est à sa place mais invisible (le nom vise sa position) */
body.accueil.handoff .entete, body.accueil.handoff .entete.cache { transform: translate(-50%, 0); opacity: 0; transition: none; }

/* ═══════════ SCÈNES ÉPINGLÉES ═══════════ */
.scene { position: relative; }
.scene .pin { height: 100vh; position: relative; overflow: hidden; will-change: transform; }
/* téléphone et tablette : défilement natif, la scène reste épinglée par le navigateur (01/10/2026) */
body.natif .scene .pin { position: sticky; top: 0; }
/* la page ne défile que de haut en bas : ce qui dépasse sur les côtés (photos des biens
   qui arrivent de biais, photos flottantes…) est coupé au bord de l'écran (01/10/2026) */
.smooth { overflow-x: clip; }

/* ═══════════ 1 · ACCROCHE : nuage de photos → zoom ═══════════ */
.s-hero .pin { background: var(--bone); }
.floaters { position: absolute; inset: 0; z-index: 1; }
.fl {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  margin: 0;
  overflow: hidden;
  will-change: transform;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-inout);
  transition-delay: calc(var(--fi, 0) * 90ms + .15s);
}
.fl img { width: 100%; height: auto; transform: scale(1.3); transition: transform 1.7s var(--ease-out); transition-delay: calc(var(--fi, 0) * 90ms + .15s); }
body.is-ready .fl { clip-path: inset(0 0 0 0); }
body.is-ready .fl img { transform: scale(1); }

.hero-copy {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 2; text-align: center; pointer-events: none;
}
.hero-kicker { margin-bottom: 28px; color: var(--cuivre); will-change: opacity; }
.hero-title { font-size: var(--t-heading); letter-spacing: -0.015em; line-height: 1.12; }
.hero-line1 { display: block; will-change: opacity; }
.hero-line2 { display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.hero-line2 .hl { flex: 0 0 auto; }

/* image qui naît entre deux mots puis remplit l'écran */
.grow { display: block; flex: 0 0 auto; overflow: hidden; width: 0; height: 0; will-change: width, height; position: relative; }
.grow img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw; height: 100vh;
  object-fit: cover; max-width: none;
}
/* voile noir qui assombrit un peu la photo plein écran (opacité réglée par immersif.js) */
.grow .voile { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }

/* sur la photo plein écran : 3 boutons fins et translucides, au centre, espacés régulièrement */
.spot { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
/* le bloc (nom + boutons) : le bas des boutons est posé un chouia sous le centre,
   sans descendre jusqu'au champagne sur la table */
.spot-intro {
  position: absolute; left: 0; right: 0;
  bottom: calc(50% - 3.5vh - 32px);
  display: flex; flex-direction: column; align-items: center;
}
.spot-choix { display: flex; gap: clamp(16px, 2.2vw, 32px); }   /* même espace entre chaque bouton */

/* « RIVE SEIZE » façon logo, en noir */
.spot-marque {
  display: flex; flex-direction: column; align-items: center;
  margin: 0 0 30px !important;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
  text-shadow: 0 0 28px rgba(241, 238, 230, 0.55);   /* halo discret pour rester lisible sur la photo */
}
.marque-nom {
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marque-sous {
  margin-top: 10px;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.choix {
  min-width: 5.6em;                                  /* les 3 boutons ont la même largeur */
  padding: 13px 20px 14px;
  text-align: center;
  background: rgba(241, 238, 230, 0.8);              /* beige presque opaque (téléphone, tablette) */
  /* 01/10 : plus de flou derrière sur écran tactile (trop lourd pour le téléphone) ;
     l'ordinateur garde son effet verre dépoli, voir tout en bas */
  border: 1px solid rgba(255, 255, 255, 0.45);       /* liseré très fin */
  color: var(--ink);
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  transition: background .45s var(--ease-out);
}
.choix:hover { background: rgba(241, 238, 230, 0.92); }

/* ═══════════ 2 · NOS BIENS : panneau clair, colonnes en parallaxe ═══════════ */
.collection {
  position: relative;
  background: var(--white);
  padding: 14vh var(--gutter) 16vh;
  z-index: 2;
}
.coll-head { text-align: center; margin-bottom: 10vh; position: relative; z-index: 1; }
.coll-head .mono:first-child { color: var(--cuivre); }
.coll-title { font-size: var(--t-heading); letter-spacing: -0.015em; margin: 16px 0 12px !important; }
.coll-sub { color: var(--ash); margin-bottom: 18px !important; font-size: 20px; }
.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.6vw, 44px);
  align-items: start;
  position: relative; z-index: 2;
}
.col { display: grid; gap: clamp(44px, 5vw, 84px); will-change: transform; }
.col:nth-child(2) { margin-top: 14vh; }
.col:nth-child(3) { margin-top: 4vh; }
.card { position: relative; display: block; text-decoration: none; color: var(--ink); }
.card-img { position: relative; overflow: hidden; }
.card-img img { width: 100%; transition: transform 1.2s var(--ease-out); }
.card:hover .card-img img { transform: scale(1.045); }
.card figcaption, .card .legende-carte { display: block; margin-top: 12px; font-size: 20px; }
.card .mono { display: block; color: var(--ash); margin-top: 3px; }
/* petit tiret entre le quartier et la configuration */
.card .tiret { display: inline-block; width: 9px; height: 1px; margin: 0 0.75em; background: currentColor; vertical-align: 0.3em; opacity: .75; }
.card .insecable { white-space: nowrap; }
.coll-plus { text-align: center; margin-top: 14vh; position: relative; z-index: 2; }

/* ═══════════ 3 · NOS MÉTIERS : blocs dépliants ═══════════ */
.metiers-accueil { position: relative; z-index: 2; background: var(--bone); padding: 16vh 0 10vh; }
.accordeon { border-bottom: 1px solid var(--sable); }
.pli { border-top: 1px solid var(--sable); transition: background .6s var(--ease-out); }
.pli-titre { margin: 0; }
.pli-bouton {
  display: grid;
  grid-template-columns: 1fr 1fr 44px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 44px 0;
  background: none; border: 0;
  font: inherit; color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.pli-nom {
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.05;
  transition: transform .8s var(--ease-out);
}
.pli-bouton:hover .pli-nom, .pli.ouvert .pli-nom { transform: translateX(14px); }
.pli-phrase { font-size: 20px; color: var(--ash); }

/* le signe + qui devient × en tournant */
.pli-icone { position: relative; width: 26px; height: 26px; justify-self: end; transition: transform .6s var(--ease-out); }
.pli-icone::before, .pli-icone::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--ink);
}
.pli-icone::after { transform: rotate(90deg); }
.pli.ouvert .pli-icone { transform: rotate(135deg); }

/* le contenu se déplie en douceur (hauteur animée), le texte monte en fondu */
.pli-contenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease-inout); }
.pli.ouvert .pli-contenu { grid-template-rows: 1fr; }
.pli-interieur { overflow: hidden; min-height: 0; }
.pli-corps {
  margin-left: calc(50% + 12px);       /* aligné sous la petite phrase */
  max-width: 600px;
  padding: 0 0 52px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.pli.ouvert .pli-corps { opacity: 1; transform: none; transition-delay: .25s; }
.pli-corps p { font-size: 18.5px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.pli-note {
  font-size: 12.5px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cuivre) !important;
  margin-top: 24px !important;
}
/* lien vers la page complète, en bas de chaque bloc */
.pli-lien {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 18px;
  font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: 6px;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat;
}
.pli-lien span { font-size: 18px; letter-spacing: 0; transition: transform .5s var(--ease-out); }
.pli-lien:hover span { transform: translateX(6px); }

/* ═══════════ 4 · POUR CONCLURE : trois portes d'entrée ═══════════ */
.portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 12vh; }
.porte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 190px;
  padding: 34px 30px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background .5s var(--ease-out), color .5s var(--ease-out);
}
.porte-phrase { font-size: 28px; line-height: 1.2; }
.porte-action { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; }
.porte-action span { display: inline-block; letter-spacing: 0; transition: transform .5s var(--ease-out); }
.porte:hover { background: var(--ink); color: var(--bone); }
.porte:hover .porte-action span { transform: translateX(6px); }

/* le pied de page commun se pose au-dessus des scènes */
.accueil .pied { position: relative; z-index: 2; }

/* ═══════════ MODE CALME (« moins d'animations » demandé par le visiteur) ═══════════ */
body.static .scene { height: auto !important; }
body.static .scene .pin { height: auto; overflow: visible; }
body.static .s-hero .pin { min-height: 92vh; padding: 16vh 0 8vh; }
body.static .fl, body.static .fl img { clip-path: none; transform: none; transition: none; }
body.static .floaters { z-index: 0; }
body.static .hero-copy { position: relative; inset: auto; min-height: 56vh; z-index: 5; padding: 0 var(--gutter); }
body.static .grow { width: 1.6em; height: 1em; margin: 0 0.18em; }
body.static .grow img { width: 100%; height: 100%; position: static; transform: none; object-fit: cover; }
body.static .spot { position: relative; inset: auto; height: 92vh; overflow: hidden; }
body.static .spot::before { content: ''; position: absolute; inset: 0; background: url('images/paris15-balcon.jpg') center/cover; }
body.static .choix, body.static .spot-marque { opacity: 1; transform: none; pointer-events: auto; }
body.static .collection { padding-bottom: 26vh; margin-top: 0; }
body.static .coll-grid { grid-template-columns: repeat(3, 1fr); }
body.static .col { margin-top: 0 !important; }

/* ═══════════ TÉLÉPHONE ET TABLETTE ═══════════ */
@media (max-width: 1100px) {
  body.accueil .entete { transform: translateY(calc(-100% - 36px)); }
  body.accueil.is-ready .entete { transform: none; }
  body.accueil.is-ready .entete.cache { transform: translateY(calc(-100% - 36px)); }
  body.accueil.handoff .entete, body.accueil.handoff .entete.cache { transform: none; opacity: 0; }
}

@media (max-width: 900px) {
  .accueil { --gutter: 20px; --t-heading: clamp(28px, 7vw, 42px); }
  .loader-rule { width: 96px; }
  .hero-title { font-size: clamp(27px, 7.2vw, 42px); }
  .hero-kicker { font-size: 10.5px; line-height: 1.5; margin-bottom: 18px; white-space: normal; padding: 0 var(--gutter); }
  .fl { width: calc(var(--w) * 0.52); }
  .floaters { overflow: hidden; }
  .floaters .fl:nth-child(3) { top:  2%; }
  .floaters .fl:nth-child(5) { top:  5%; }
  .floaters .fl:nth-child(2) { top: 11%; }
  .floaters .fl:nth-child(4) { top: 17%; }
  .floaters .fl:nth-child(1) { top: 23%; }
  .floaters .fl:nth-child(7)  { top: 59%; }
  .floaters .fl:nth-child(10) { top: 63%; }
  .floaters .fl:nth-child(6)  { top: 68%; }
  .floaters .fl:nth-child(8)  { top: 73%; }
  .floaters .fl:nth-child(9)  { top: 79%; }
  .spot-intro { bottom: calc(50% - 3vh - 26px); }
  .spot-choix { gap: 10px; }
  .spot-marque { margin-bottom: 22px !important; }
  .choix { padding: 11px 10px 12px; font-size: 17px; }
  .coll-title { font-size: clamp(29px, 7.4vw, 40px); }
  .coll-sub { font-size: 17px; }
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .card figcaption, .card .legende-carte { font-size: 16px; }
  .pli-bouton { grid-template-columns: 1fr 30px; gap: 6px 16px; padding: 30px 0; }
  .pli-phrase { grid-column: 1; grid-row: 2; font-size: 17px; }
  .pli-icone { grid-column: 2; grid-row: 1; }
  .pli-corps { margin-left: 0; }
  .portes { grid-template-columns: 1fr; gap: 12px; margin-top: 64px; }
  .porte { min-height: 0; gap: 22px; padding: 26px 22px; }
  .porte-phrase { font-size: 24px; }
  .pli-bouton:hover .pli-nom, .pli.ouvert .pli-nom { transform: none; }
  body.static .s-hero .pin { min-height: 88vh; padding: 10vh 0 6vh; }
  body.static .hero-copy { min-height: 64vh; }
  body.static .spot { height: 74vh; }
}

@media (max-width: 380px) {
  .spot-choix { gap: 8px; }
  .choix { font-size: 16px; min-width: 5.2em; }
}

@media (max-width: 480px) {
  .accueil { --gutter: 18px; }
  .coll-grid { grid-template-columns: 1fr 1fr !important; }
  .card figcaption, .card .legende-carte { font-size: 14px; }
  .card .mono { font-size: 11px; letter-spacing: 0.08em; }
  .card .tiret { width: 7px; margin: 0 0.5em; }
  .floaters .fl:nth-child(1) { top: 12%; }
  .floaters .fl:nth-child(7) { top: 66%; }
}

/* ═══════════ ORDINATEUR (souris), quelle que soit la taille de la fenêtre ═══════════
   Les 3 boutons de la photo : plus transparents et un peu plus espacés.
   Téléphone et tablette (écran tactile) : inchangés. */
@media (hover: hover) and (pointer: fine) {
  .choix {
    background: rgba(241, 238, 230, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .spot-choix { gap: clamp(20px, 2.8vw, 40px); }
}
@media (hover: hover) and (pointer: fine) and (max-width: 900px) {
  .spot-choix { gap: 16px; }   /* fenêtre étroite */
}