/* ==========================================================================
   Résidences Les Dophins
   Lane : affiche d'office du tourisme, Maroc, années 70.
   Couleur : bleu marine profond (mosaïque du bassin) + ocre (parement pierre).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
/* Palette de départ, reprise telle quelle : #218DAE #2BBBD7 #FCE59A #FFD758.
   Quatre couleurs ne suffisent pas à faire une interface : aucune n'est assez
   sombre pour porter du texte clair, aucune assez claire pour porter du texte
   sombre. On garde donc les quatre exactes comme langage de surface, et on
   dérive autour d'elles les fonds et les encres, sur la teinte du bleu.      */
:root {
  /* Les quatre couleurs de la palette, à la valeur près */
  --teal:       #218DAE;
  --cyan:       #2BBBD7;
  --sand:       #FCE59A;
  --sun:        #FFD758;

  /* Bleus dérivés : la mer, du bord au large */
  --ground:     oklch(0.255 0.044 228);
  --deeper:     oklch(0.190 0.034 230);
  --surface:    oklch(0.330 0.056 227);
  --surface-2:  oklch(0.395 0.066 226);

  /* Écume : blancs très légèrement bleutés */
  --plaster:    oklch(0.975 0.008 215);
  --plaster-2:  oklch(0.940 0.012 215);

  /* Encres */
  --foam:       oklch(0.975 0.012 220);
  --foam-mut:   oklch(0.800 0.030 222);
  --foam-dim:   oklch(0.680 0.035 222);
  --ink:        oklch(0.265 0.048 228);
  --ink-mut:    oklch(0.460 0.045 228);

  /* Le teal de la palette est trop clair pour du petit texte sur fond clair :
     cette version foncée sert aux étiquettes et aux liens des bandes claires. */
  --teal-deep:  oklch(0.440 0.082 227);

  --hairline-d: color-mix(in oklab, var(--foam) 18%, transparent);
  --hairline-l: color-mix(in oklab, var(--ink) 15%, transparent);

  /* Rythme */
  --gut:  clamp(1.25rem, 4vw, 2.5rem);
  --shell: 78rem;
  --band: clamp(4.5rem, 11vw, 9.5rem);

  /* Profondeur */
  --z-base: 0;
  --z-rise: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-modal: 400;

  /* Courbes */
  --out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --head-h: 4.5rem;

  color-scheme: dark;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  background: var(--ground);
  color: var(--foam);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 100;
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:where(h1, h2, h3, h4) { line-height: 1.02; font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--sun); color: var(--deeper); }

/* --- Échelle typographique (ratio ~1.33) -------------------------------- */
.t-mega {
  font-size: clamp(2.4rem, 1rem + 4.9vw, 4.85rem);
  font-variation-settings: "wdth" 118, "wght" 800;
  letter-spacing: -0.032em;
  line-height: 0.94;
}
.t-h2 {
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.9rem);
  font-variation-settings: "wdth" 114, "wght" 800;
  letter-spacing: -0.028em;
  line-height: 0.98;
}
.t-h3 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  font-variation-settings: "wdth" 106, "wght" 700;
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.t-lead {
  font-size: clamp(1.1rem, 1rem + 0.62vw, 1.4rem);
  line-height: 1.55;
  font-variation-settings: "wdth" 100, "wght" 400;
}
.t-label {
  font-size: 0.75rem;
  font-variation-settings: "wdth" 100, "wght" 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.t-num {
  font-variation-settings: "wdth" 112, "wght" 750;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Chaque ligne de titre vit dans son propre masque : si elle se coupe en deux,
   le rythme de l'affiche se casse. La taille se règle donc sur la largeur de
   la colonne du titre, et non sur celle de la fenêtre : selon la langue et le
   point de rupture, ce n'est pas du tout le même rapport. */
h1.t-mega, .sec-head h2.t-h2 { container-type: inline-size; }
h1.t-mega .ln > i { font-size: clamp(2.2rem, 10.4cqi, 4.85rem); }
.sec-head h2.t-h2 .ln > i { font-size: clamp(1.7rem, 4.7cqi, 3.6rem); }

/* Sur fond sombre le texte clair a besoin d'air, mais pas le chapô. */
.on-dark p, .on-dark li { line-height: 1.7; }
/* Sur fond clair, l'encre sombre n'a pas besoin du même air. */
.on-light p, .on-light li { line-height: 1.62; }
.on-dark .t-lead, .on-light .t-lead { line-height: 1.5; }

/* --- Primitives --------------------------------------------------------- */
.shell {
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}
.band { padding-block: var(--band); }
.measure { max-width: 34em; }
.measure-tight { max-width: 27em; }

/* Masquage par rognage et non par décalage : un `left: -9999px` fabrique
   9999px de défilement horizontal dès que la page passe en RTL.          */
.skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: var(--z-modal);
  background: var(--sun);
  color: var(--deeper);
  font-variation-settings: "wght" 700;
}
.skip:focus {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip-path: none;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}

/* Le filet ocre : séparateur de l'affiche, utilisé avec parcimonie */
.rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sun);
}
.rule::before,
.rule::after {
  content: "";
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  flex: 1;
}
.rule .lozenge { flex: none; }
.lozenge {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  rotate: 45deg;
  flex: none;
}

/* --- Boutons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--sun);
  --btn-fg: var(--deeper);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.35s var(--out-quart), color 0.35s var(--out-quart),
              border-color 0.35s var(--out-quart), translate 0.35s var(--out-quint);
}
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; }
.btn svg { flex: none; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--foam);
  border-color: var(--hairline-d);
}
.btn-ghost:hover {
  --btn-bg: color-mix(in oklab, var(--foam) 10%, transparent);
  border-color: color-mix(in oklab, var(--foam) 40%, transparent);
}
.on-light .btn-ghost { --btn-fg: var(--ink); border-color: var(--hairline-l); }
.on-light .btn-ghost:hover {
  --btn-bg: color-mix(in oklab, var(--ink) 7%, transparent);
  border-color: color-mix(in oklab, var(--ink) 40%, transparent);
}
.btn-solid:hover {
  --btn-bg: color-mix(in oklab, var(--sun) 82%, white);
}

/* --- En-tête ------------------------------------------------------------ */
.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--head-h);
  display: flex;
  align-items: center;
  transition: background 0.5s var(--out-quart), border-color 0.5s var(--out-quart),
              backdrop-filter 0.5s var(--out-quart);
  border-bottom: 1px solid transparent;
}
.head[data-stuck="true"] {
  background: color-mix(in oklab, var(--deeper) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--hairline-d);
}
.head__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}

.mark {
  display: grid;
  gap: 0.14rem;
  padding-block: 0.5rem;
  text-decoration: none;
  flex: none;
  line-height: 1;
}
.mark__sup {
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  font-variation-settings: "wght" 600;
  color: var(--sun);
  text-transform: uppercase;
}
.mark__name {
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem);
  font-variation-settings: "wdth" 122, "wght" 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  padding: 0;
}
.nav__list a {
  text-decoration: none;
  font-size: 0.9rem;
  font-variation-settings: "wght" 500;
  color: var(--foam-mut);
  /* La barre de navigation apparaît dès 62rem : une tablette en paysage
     l'atteint au doigt, la cible doit donc rester à 44px. */
  padding-block: 0.9rem;
  position: relative;
  transition: color 0.3s var(--out-quart);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--sun);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.4s var(--out-quint);
}
.nav__list a:hover { color: var(--foam); }
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { scale: 1 1; }
.nav__list a[aria-current="true"] { color: var(--foam); }

.head .btn { padding: 0.62rem 1.1rem; font-size: 0.85rem; }

.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--hairline-d);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-variation-settings: "wght" 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.burger__bars { display: grid; gap: 3px; }
.burger__bars i { display: block; width: 16px; height: 1.5px; background: currentColor; }

@media (max-width: 62rem) {
  .nav, .head__cta { display: none; }
  .burger { display: inline-flex; }
}

/* Menu mobile : <dialog> pour échapper à tout contexte d'empilement */
.menu {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--deeper);
  color: var(--foam);
}
.menu::backdrop { background: color-mix(in oklab, var(--deeper) 70%, transparent); }

/* Le menu doit pouvoir défiler : sur un téléphone en paysage, six entrées
   plus le bouton d'appel dépassent largement les 390px de hauteur. */
.menu { overflow-y: auto; overscroll-behavior: contain; }
.menu__in {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  width: min(100% - var(--gut) * 2, var(--shell));
  margin-inline: auto;
}
.menu__top { display: flex; align-items: center; flex: none; height: var(--head-h); }
.menu__close {
  margin-left: auto;
  background: none;
  border: 1px solid var(--hairline-d);
  border-radius: 2px;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "wght" 600;
}
.menu__list {
  list-style: none;
  padding: 1rem 0;
  margin: 0;
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  gap: 0.15rem;
}
.menu__list a {
  display: block;
  text-decoration: none;
  padding-block: 0.38rem;
  font-size: clamp(1.6rem, 1rem + 3.4vw, 2.6rem);
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -0.03em;
  border-bottom: 1px solid var(--hairline-d);
}
.menu__foot { padding-block: 1.25rem; display: grid; gap: 0.75rem; flex: none; }

/* Écran court : on resserre pour que tout tienne sans défilement. */
@media (max-height: 34rem) {
  .menu__list { padding-block: 0.5rem; }
  .menu__list a {
    font-size: clamp(1.25rem, 5.5vh, 1.75rem);
    padding-block: 0.45rem;
  }
  .menu__foot { padding-block: 1rem; }
}

/* --- Héros -------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--head-h) + clamp(2.25rem, 7vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  overflow: clip;
  isolation: isolate;
}

.hero__place {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--sun);
  margin-bottom: clamp(1.1rem, 3vw, 1.8rem);
}

.hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .hero__aside { padding-bottom: 0.6rem; }
}
.hero h1 { margin: 0; }
.hero h1 .soft {
  font-variation-settings: "wdth" 92, "wght" 300;
  letter-spacing: -0.01em;
}
.hero__aside .t-lead { color: var(--foam-mut); max-width: 40ch; }
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.4rem, 3vw, 2rem);
}
@media (max-width: 30rem) {
  .hero__acts .btn { flex: 1 1 100%; justify-content: center; padding-block: 1rem; }
  .contact__acts .btn { flex: 1 1 100%; justify-content: center; padding-block: 1rem; }
}

/* La photo traverse toute la largeur : c'est le geste de l'affiche. */
.hero__shot {
  position: relative;
  margin-top: clamp(2.25rem, 6vw, 4rem);
}
.hero__shot .frame { aspect-ratio: 4 / 3; }
@media (min-width: 46rem) { .hero__shot .frame { aspect-ratio: 2 / 1; } }
@media (min-width: 78rem) { .hero__shot .frame { aspect-ratio: 2.45 / 1; } }
.hero__shot .frame { border-radius: 0; }

.hero__stamp {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: clamp(1rem, 4vw, 2.25rem);
  background: var(--sun);
  color: var(--deeper);
  padding: 0.75rem 1.05rem 0.8rem;
  display: grid;
  gap: 0.1rem;
  text-align: right;
  border-radius: 2px;
  max-width: 13rem;
}
.hero__stamp b {
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.hero__stamp span { font-size: 0.75rem; line-height: 1.3; font-variation-settings: "wght" 550; }

/* Téléphone en paysage : l'écran ne fait que ~390px de haut. On resserre
   le héros pour que le titre et la photo tiennent dans le premier écran. */
@media (orientation: landscape) and (max-height: 34rem) {
  .hero {
    padding-top: calc(var(--head-h) + 1.25rem);
    padding-bottom: 1.5rem;
  }
  .hero .t-mega { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
  .hero__place { margin-bottom: 0.75rem; }
  .hero__grid { gap: 1.25rem; }
  .hero__acts { margin-top: 1rem; }
  .hero__shot { margin-top: 1.5rem; }
  .hero__shot .frame { aspect-ratio: 2.6 / 1; }
  .rail { margin-top: 1.75rem; }
  .band { padding-block: clamp(2.75rem, 9vh, 4.5rem); }
}

/* La palette, posée à plat sous la photo : quatre aplats, aucun dégradé. */
.stripe {
  display: flex;
  height: clamp(5px, 0.9vw, 8px);
  margin-top: 0;
}
.stripe i { flex: 1; }
.stripe i:nth-child(1) { background: var(--teal); }
.stripe i:nth-child(2) { background: var(--cyan); }
.stripe i:nth-child(3) { background: var(--sand); }
.stripe i:nth-child(4) { background: var(--sun); }

/* Rail de repères */
.rail {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--hairline-d);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.rail__item {
  padding: clamp(1.2rem, 3vw, 1.8rem) 1.5rem 0;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  border-right: 1px solid var(--hairline-d);
}
.rail__item:first-child { padding-left: 0; }
.rail__item:last-child { border-right: 0; }
@media (max-width: 52rem) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .rail__item { border-right: 0; padding-left: 0; padding-right: 1rem; }
  .rail__item:nth-child(n + 3) { border-top: 1px solid var(--hairline-d); margin-top: 1.2rem; }
}
.rail__k { color: var(--sun); }
.rail__v { color: var(--foam-mut); font-size: 0.95rem; line-height: 1.4; }

/* --- Cadres photo ------------------------------------------------------- */
.frame {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--surface);
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
/* <picture> est un bloc à hauteur automatique : sans ces deux lignes,
   le height:100% de l'image se résout en auto et le cadre laisse voir
   son fond dès que le ratio de l'image diffère de celui du cadre.      */
.frame > picture {
  display: block;
  width: 100%;
  height: 100%;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
  opacity: 0;
  transition: opacity 0.7s var(--out-quart);
}
.frame img.is-loaded, .no-js .frame img { opacity: 1; }
/* Léger voile bleu : accorde les photos à la palette sans les délaver */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--ground) 12%, transparent);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.on-light .frame { background-color: var(--plaster-2); }
.on-light .frame::after { background: color-mix(in oklab, var(--ground) 6%, transparent); }

figure { margin: 0; }
figcaption {
  margin-top: 0.9rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--foam-dim);
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}
.on-light figcaption { color: var(--ink-mut); }
figcaption .lozenge {
  width: 0.35rem; height: 0.35rem;
  color: var(--sun);
  translate: 0 -0.15rem;
}

/* --- Bandes ------------------------------------------------------------- */
.on-light {
  background: var(--plaster);
  color: var(--ink);
}
.on-light .t-label { color: var(--teal-deep); }
.on-light .rule { color: var(--teal-deep); }
.on-light .muted { color: var(--ink-mut); }
.muted { color: var(--foam-mut); }

.deep { background: var(--deeper); }

.sec-head {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.sec-head__top {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.sec-head__top .line {
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  color: var(--sun);
}
.on-light .sec-head__top .line { color: var(--teal-deep); }

/* --- Le lieu ------------------------------------------------------------ */
.lieu {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
@media (min-width: 62rem) {
  .lieu { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.lieu__text > * + * { margin-top: 1.15rem; }

.map {
  position: relative;
  border: 1px solid var(--hairline-d);
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface);
}
.map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  filter: saturate(0.9);
}
@media (min-width: 62rem) { .map iframe { aspect-ratio: 16 / 12; } }
.map__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--hairline-d);
  font-size: 0.85rem;
  color: var(--foam-mut);
}
.map__bar a {
  color: var(--sun);
  text-decoration: none;
  font-variation-settings: "wght" 600;
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  box-shadow: inset 0 -1px 0 currentColor;
}
.map__bar a:hover { color: var(--foam); }

/* Repères : liste réglée, pas de grille de cartes */
.reperes {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  border-top: 1px solid var(--hairline-d);
}
.reperes li {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding-block: clamp(1rem, 2.5vw, 1.35rem);
  border-bottom: 1px solid var(--hairline-d);
  align-items: baseline;
}
@media (min-width: 46rem) {
  .reperes li { grid-template-columns: 9rem minmax(0, 1fr) auto; }
}
.reperes .k {
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: 0.95rem;
}
.reperes .v { color: var(--foam-mut); font-size: 0.95rem; }
.on-light .reperes { border-color: var(--hairline-l); }
.on-light .reperes li { border-color: var(--hairline-l); }
.on-light .reperes .v { color: var(--ink-mut); }
.reperes .tag {
  color: var(--sun);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: "wght" 650;
}
.on-light .reperes .tag { color: var(--teal-deep); }

/* --- Piscine ------------------------------------------------------------ */
.pool {
  display: grid;
  gap: clamp(2rem, 5vw, 3.25rem);
}
@media (min-width: 58rem) {
  .pool {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .pool__wide, .pool__strip { grid-column: 1 / -1; }
}
.pool__a .frame { aspect-ratio: 3 / 4; }
@media (min-width: 58rem) { .pool__a .frame { aspect-ratio: 4 / 5; } }
.pool__b > * + * { margin-top: 1.15rem; }
.pool__note {
  margin-top: clamp(2rem, 4vw, 2.75rem) !important;
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hairline-l);
}
.pool__note h3 { margin-bottom: 0.7rem; }
.pool__wide .frame { aspect-ratio: 4 / 3; }
@media (min-width: 46rem) { .pool__wide .frame { aspect-ratio: 16 / 9; } }
.pool__strip .frame { aspect-ratio: 21 / 9; }

/* --- Les logements ------------------------------------------------------ */
.type {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 8vw, 5.5rem);
}
@media (min-width: 58rem) {
  .type { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  /* Le second type inverse la composition : la page ne se répète pas. */
  .type--alt .type__shots { order: 2; }
  .type--alt .type__text { order: 1; }
}

.type__shots {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
}
.type__big { grid-column: 1 / span 10; grid-row: 1; }
.type__small { grid-column: 8 / span 5; grid-row: 1; z-index: var(--z-rise); }
.type--alt .type__big { grid-column: 3 / span 10; }
.type--alt .type__small { grid-column: 1 / span 5; }
.type__big .frame { aspect-ratio: 4 / 3; }
.type__small .frame { aspect-ratio: 1 / 1; }
.type__small {
  /* Décalage vers le bas en `top` et non en `translate` : les animations
     d'entrée pilotent `translate` et écraseraient ce calage. */
  position: relative;
  top: clamp(1.25rem, 4vw, 2.75rem);
  outline: clamp(4px, 1vw, 10px) solid var(--ground);
  outline-offset: -1px;
  border-radius: 2px;
}
.on-light .type__small { outline-color: var(--plaster); }

.type__text > * + * { margin-top: 1.1rem; }
.type__tag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--sun);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wght" 650;
}
.type__name {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  font-variation-settings: "wdth" 112, "wght" 800;
  letter-spacing: -0.028em;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em;
}
.type__name span {
  font-size: 0.46em;
  font-variation-settings: "wdth" 100, "wght" 500;
  letter-spacing: 0;
  color: var(--sun);
  border: 1px solid color-mix(in oklab, var(--sun) 55%, transparent);
  border-radius: 2px;
  padding: 0.25em 0.6em 0.3em;
  white-space: nowrap;
}

.mini {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.mini li {
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--hairline-d);
  border-radius: 999px;
  color: var(--foam-mut);
}
.on-light .mini li { border-color: var(--hairline-l); color: var(--ink-mut); }

.kit-wrap {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hairline-d);
}
.on-light .kit-wrap { border-color: var(--hairline-l); }
.kit-wrap h3 { margin-bottom: clamp(1.25rem, 3vw, 1.75rem); }
.kit {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 2rem;
}
.kit li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.3rem;
  border-bottom: 1px solid var(--hairline-d);
  font-size: 0.98rem;
  line-height: 1.4;
}
.kit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.32rem;
  height: 0.32rem;
  rotate: 45deg;
  background: var(--sun);
}
.on-light .kit li { border-color: var(--hairline-l); }
.on-light .kit li::before { background: var(--teal-deep); }
.note-inline { margin-top: 1.5rem; font-size: 0.9rem; max-width: 62ch; }

/* --- Location : courte et longue durée ---------------------------------- */
.durees {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 62rem) {
  .durees { grid-template-columns: repeat(3, 1fr); }
  /* Un filet entre les deux, pas deux cartes posées côte à côte. */
  .durees .duree + .duree {
    padding-left: clamp(2rem, 5vw, 3.5rem);
    border-left: 1px solid var(--hairline-l);
  }
}
/* Empilés, le même filet passe au-dessus : sinon les formules
   se lisent comme un seul bloc de texte. */
@media (max-width: 61.99rem) {
  .durees .duree + .duree {
    padding-top: clamp(1.5rem, 5vw, 2.25rem);
    border-top: 1px solid var(--hairline-l);
  }
}
.duree > * + * { margin-top: 0.9rem; }
.duree__k { color: var(--sun); }
.on-light .duree__k { color: var(--teal-deep); }
.duree__lead {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  font-variation-settings: "wdth" 100, "wght" 600;
}
.duree__note {
  font-size: 0.9rem;
  color: var(--foam-dim);
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-d);
}
.on-light .duree__note { color: var(--ink-mut); border-color: var(--hairline-l); }
.durees__foot {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline-l);
  max-width: 68ch;
}
.ln-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  margin-left: 0.35rem;
  color: var(--teal-deep);
  text-decoration: none;
  font-variation-settings: "wght" 650;
  box-shadow: inset 0 -1px 0 currentColor;
}
.ln-arrow svg { transition: translate 0.4s var(--out-quint); }
.ln-arrow:hover svg { translate: 3px 0; }

/* --- Ambiance / son ----------------------------------------------------- */
.amb { position: relative; overflow: clip; }
.amb__in {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .amb__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}
.amb__text > * + * { margin-top: 1.2rem; }

.sounds {
  list-style: none;
  padding: 0;
  margin-top: clamp(1.75rem, 4vw, 2.5rem) !important;
  display: grid;
  gap: 1.2rem;
}
.sounds li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.25rem 1rem; }
.sounds .n {
  grid-row: span 2;
  color: var(--sun);
  font-variation-settings: "wdth" 112, "wght" 750;
  font-size: 1.05rem;
  padding-top: 0.15rem;
  font-variant-numeric: tabular-nums;
}
.sounds b { font-variation-settings: "wdth" 102, "wght" 700; font-size: 1rem; }
.sounds span { color: var(--foam-mut); font-size: 0.92rem; line-height: 1.55; }

.player {
  border: 1px solid var(--hairline-d);
  border-radius: 2px;
  background: color-mix(in oklab, var(--surface) 55%, transparent);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  display: grid;
  gap: 1.25rem;
}
.player__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.player__state { font-size: 0.78rem; color: var(--foam-dim); letter-spacing: 0.06em; }
.wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: clamp(4.5rem, 14vw, 7rem);
}
.wave i {
  flex: 1;
  min-width: 2px;
  background: color-mix(in oklab, var(--cyan) 70%, var(--foam));
  opacity: 0.32;
  border-radius: 1px;
  height: 22%;
  transform-origin: bottom;
  transition: height 0.42s var(--out-quart), opacity 0.42s var(--out-quart);
}
.player[data-playing="true"] .wave i { opacity: 0.85; }
.player__row { display: flex; flex-wrap: wrap; gap: 0.9rem 1rem; align-items: center; }
.player__note { font-size: 0.8rem; color: var(--foam-dim); line-height: 1.5; }
.vol { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--foam-dim); }
/* La piste reste fine, mais la zone tactile fait 44px : c'est le champ
   lui-même qui est haut, la piste est dessinée par les pseudo-éléments. */
.vol input {
  -webkit-appearance: none; appearance: none;
  width: 7rem;
  /* 46 et non 44 : certains moteurs rabotent deux pixels sur un input range,
     et la cible tactile doit rester au-dessus de 44px partout. */
  height: 46px;
  min-height: 46px;
  flex: none;
  background: transparent;
  cursor: pointer;
}
.vol input::-webkit-slider-runnable-track {
  height: 2px; background: var(--hairline-d); border-radius: 2px;
}
.vol input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--sun); border: 0; cursor: pointer;
  margin-top: -0.4375rem;            /* centre le curseur sur la piste de 2px */
}
.vol input::-moz-range-track {
  height: 2px; background: var(--hairline-d); border-radius: 2px;
}
.vol input::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--sun); border: 0; cursor: pointer;
}

/* --- Galerie ------------------------------------------------------------ */
/* Colonnes CSS : le navigateur équilibre les hauteurs, donc aucun trou.     */
/* Vraies colonnes équilibrées : le script range chaque photo dans la colonne
   la plus courte, donc aucune ne se retrouve avec un trou au milieu.        */
.gal {
  --gal-gap: clamp(0.7rem, 1.6vw, 1.1rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gal-gap);
  align-items: start;
}
@media (min-width: 36rem) { .gal { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .gal { grid-template-columns: repeat(3, 1fr); } }
.gal__col { display: grid; gap: var(--gal-gap); align-content: start; }

.gal__i {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
}

.gal__i img { transition: opacity 0.7s var(--out-quart), scale 0.9s var(--out-quint); }
.gal__i:hover img, .gal__i:focus-visible img { scale: 1.045; }
.gal__i .cap {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-rise);
  padding: 0.7rem 0.95rem 0.8rem;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
  color: var(--foam);
  background: color-mix(in oklab, var(--deeper) 88%, transparent);
  opacity: 0;
  translate: 0 6px;
  transition: opacity 0.4s var(--out-quart), translate 0.5s var(--out-quint);
}
.gal__i:hover .cap, .gal__i:focus-visible .cap { opacity: 1; translate: 0 0; }

/* Visionneuse */
.lb {
  border: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: color-mix(in oklab, var(--deeper) 96%, transparent);
  color: var(--foam);
}
.lb::backdrop { background: color-mix(in oklab, var(--deeper) 88%, transparent); }
.lb__in {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: clamp(0.75rem, 2vw, 1.25rem);
}
.lb__top { display: flex; align-items: center; gap: 1rem; }
.lb__count { font-size: 0.8rem; color: var(--foam-dim); font-variant-numeric: tabular-nums; }
.lb__stage { display: grid; place-items: center; min-height: 0; }
.lb__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 2px;
  opacity: 0;
  scale: 0.985;
  transition: opacity 0.35s var(--out-quart), scale 0.5s var(--out-quint);
}
.lb__stage img.is-ready { opacity: 1; scale: 1; }
.no-js .lb__stage img { opacity: 1; scale: 1; }
.lb__bot { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.lb__cap { font-size: 0.88rem; color: var(--foam-mut); max-width: 46ch; }
.lb__nav { display: flex; gap: 0.5rem; flex: none; }
.icon-btn {
  background: none;
  border: 1px solid var(--hairline-d);
  border-radius: 2px;
  color: var(--foam);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.3s var(--out-quart), border-color 0.3s var(--out-quart);
}
.icon-btn:hover {
  background: color-mix(in oklab, var(--foam) 12%, transparent);
  border-color: color-mix(in oklab, var(--foam) 40%, transparent);
}
.lb__close { margin-left: auto; }

/* --- Infos pratiques ---------------------------------------------------- */
.infos {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 58rem) { .infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.infos h3 { margin-bottom: 1.1rem; }
.infos p + p { margin-top: 1rem; }
.note {
  border-top: 1px solid var(--hairline-l);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.35rem;
}
.note p {
  font-size: 0.9rem;
  color: var(--ink-mut);
  max-width: 62ch;
}

/* --- Contact ------------------------------------------------------------ */
.contact { position: relative; overflow: clip; }
.contact .shell { position: relative; z-index: 1; }
.contact__in {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 58rem) { .contact__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.contact__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.tel-big {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem);
  font-variation-settings: "wdth" 110, "wght" 750;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--foam);
  border-bottom: 2px solid var(--sun);
  padding-bottom: 0.15rem;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s var(--out-quart);
}
.tel-big:hover { color: var(--sun); }
.addr {
  font-style: normal;
  display: grid;
  gap: 1.1rem;
}
.addr .row { display: grid; gap: 0.25rem; }
.addr .row .k { color: var(--sun); }
.addr .row .v { color: var(--foam-mut); font-size: 0.95rem; line-height: 1.5; }
.addr .row .v a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* --- Sélecteur de langue ------------------------------------------------ */
.lang-slot { margin-left: auto; }
.lang { display: flex; gap: 1px; }
.lang--short { border: 1px solid var(--hairline-d); border-radius: 2px; overflow: hidden; }
.lang__b {
  background: none;
  border: 0;
  color: var(--foam-mut);
  font: inherit;
  font-size: 0.72rem;
  font-variation-settings: "wght" 650;
  letter-spacing: 0.06em;
  padding: 0.5rem 0.5rem;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.3s var(--out-quart), color 0.3s var(--out-quart);
}
.lang--short .lang__b { min-width: 2.4rem; }
.lang__b:hover { color: var(--foam); background: color-mix(in oklab, var(--foam) 8%, transparent); }
.lang__b[aria-pressed="true"] { background: var(--sun); color: var(--deeper); }

/* Dans le menu plein écran, les langues s'écrivent en toutes lettres. */
.lang--full { flex-wrap: wrap; gap: 0.35rem; }
.lang--full .lang__b {
  border: 1px solid var(--hairline-d);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  min-height: 44px;
  font-size: 0.82rem;
}

@media (max-width: 61.99rem) { .lang--short { display: none; } }
@media (min-width: 62rem)    { .lang--full  { display: none; } }

/* --- Sens de lecture arabe ---------------------------------------------- */
/* Archivo n'a pas de glyphes arabes : sans cette famille, le texte tomberait
   sur une police système différente d'un appareil à l'autre. Noto Sans Arabic
   couvre 100 à 900, donc la hiérarchie se joue au poids comme en latin.     */
[lang="ar"] {
  --ar-face: "Noto Sans Arabic", Archivo, sans-serif;
}
[lang="ar"] body { font-family: var(--ar-face); }

/* Le nom de la résidence reste en latin, donc en Archivo. */
[lang="ar"] .mark__name,
[lang="ar"] .mark__sup { font-family: Archivo, sans-serif; }

/* L'arabe ne se chasse pas : jamais de letter-spacing, et plus d'interligne
   que le latin, dont les titres descendent jusqu'à 0.94.                    */
[lang="ar"] .t-mega,
[lang="ar"] .t-h2,
[lang="ar"] .t-h3,
[lang="ar"] .t-num,
[lang="ar"] .type__name,
[lang="ar"] .duree__k,
[lang="ar"] .rail__k { letter-spacing: 0; font-variation-settings: normal; }
[lang="ar"] .t-mega { font-weight: 800; line-height: 1.3; }
[lang="ar"] .t-h2   { font-weight: 800; line-height: 1.32; }
[lang="ar"] .t-h3   { font-weight: 700; line-height: 1.4; }
[lang="ar"] .t-num,
[lang="ar"] .type__name { font-weight: 700; }
[lang="ar"] .t-lead { line-height: 1.75; }
[lang="ar"] p,
[lang="ar"] li { line-height: 1.9; }

/* Les capitales et l'interlettrage n'existent pas en arabe : on neutralise. */
[lang="ar"] .t-label,
[lang="ar"] .tag,
[lang="ar"] .type__tag,
[lang="ar"] .burger,
[lang="ar"] .menu__close,
[lang="ar"] .up,
[lang="ar"] .lang__b {
  letter-spacing: 0;
  text-transform: none;
}
[lang="ar"] .t-label { font-size: 0.85rem; font-weight: 700; }
[lang="ar"] .ln { padding-bottom: 0.22em; }

[dir="rtl"] .hero__stamp { text-align: left; right: auto; left: clamp(1rem, 4vw, 3rem); }
[dir="rtl"] .rail__item { border-right: 0; border-left: 1px solid var(--hairline-d); }
[dir="rtl"] .rail__item:first-child { padding-left: 1.5rem; padding-right: 0; }
[dir="rtl"] .rail__item:last-child { border-left: 0; }
[dir="rtl"] .nav__list a::after { transform-origin: right; }
[dir="rtl"] .lang-slot { margin-left: 0; margin-right: auto; }
[dir="rtl"] .ln-arrow svg,
[dir="rtl"] .durees__foot svg { scale: -1 1; }
[dir="rtl"] .ln-arrow:hover svg { translate: -3px 0; }
[dir="rtl"] .up svg { rotate: 0deg; }
[dir="rtl"] .type__small { outline-offset: -1px; }
@media (min-width: 62rem) {
  [dir="rtl"] .durees .duree + .duree {
    padding-left: 0; border-left: 0;
    padding-right: clamp(2rem, 5vw, 3.5rem);
    border-right: 1px solid var(--hairline-l);
  }
}
[dir="rtl"] .sounds li { grid-template-columns: 2.25rem 1fr; }
[dir="rtl"] .gal__i .cap { text-align: right; }
[dir="rtl"] .addr .row .v,
[dir="rtl"] .foot__meta { text-align: right; }

/* --- Barre de contact mobile -------------------------------------------- */
/* Le public décide sur téléphone, le soir, et conclut par un appel ou un
   message. Cette barre garde les deux à portée de pouce sans occuper la page
   sur grand écran, où l'en-tête tient déjà ce rôle.                         */
.callbar {
  position: fixed;
  z-index: var(--z-sticky);
  inset: auto 0 0 0;
  display: none;
  gap: 0.6rem;
  padding: 0.6rem var(--gut);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--deeper) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--hairline-d);
  translate: 0 130%;
  transition: translate 0.55s var(--out-quint);
}
@media (max-width: 61.99rem) { .callbar { display: flex; } }
.callbar[data-shown="true"] { translate: 0 0; }

.callbar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding-inline: 0.75rem;
  border-radius: 2px;
  text-decoration: none;
  font-size: 0.95rem;
  font-variation-settings: "wdth" 104, "wght" 700;
  border: 1px solid transparent;
}
.callbar__btn--call { background: var(--sun); color: var(--deeper); }
.callbar__btn--wa {
  color: var(--foam);
  border-color: color-mix(in oklab, var(--foam) 32%, transparent);
  background: color-mix(in oklab, var(--foam) 8%, transparent);
}
.callbar__btn:active { translate: 0 1px; }

@media print { .callbar { display: none !important; } }

/* --- Pied --------------------------------------------------------------- */
.foot {
  background: var(--deeper);
  border-top: 1px solid var(--hairline-d);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.foot__meta { font-size: 0.82rem; color: var(--foam-dim); line-height: 1.7; }
.foot__meta a {
  color: var(--foam-mut);
  text-decoration-color: var(--hairline-d);
  display: inline-block;
  padding-block: 0.35rem;
  text-underline-offset: 3px;
}
.foot__meta a:hover { color: var(--foam); }
.up {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-variation-settings: "wght" 650;
  color: var(--foam-mut); text-decoration: none;
}
.up:hover { color: var(--sun); }

/* --- Système de mouvement ----------------------------------------------- */
/* Règle de base : tout est visible. L'état d'entrée n'existe que sous .motion, */
/* classe posée par le script d'en-tête et retirée si l'utilisateur a demandé   */
/* moins d'animations. Sans JS, sans .motion : la page est simplement là.       */

[data-anim] { --d: 0ms; }

.motion [data-anim] {
  transition-delay: var(--d);
  transition-timing-function: var(--out-quint);
  will-change: opacity, transform;
}

/* Fondu + montée : le mouvement par défaut, pour le texte. */
.motion [data-anim="rise"] {
  opacity: 0;
  translate: 0 clamp(16px, 2.4vw, 30px);
  transition-property: opacity, translate;
  transition-duration: 0.8s, 1s;
}

/* Glissé latéral : pour les listes réglées, qui se lisent de gauche à droite. */
.motion [data-anim="slide-l"] {
  opacity: 0;
  translate: clamp(-34px, -4vw, -18px) 0;
  transition-property: opacity, translate;
  transition-duration: 0.7s, 0.9s;
}
.motion [data-anim="slide-r"] {
  opacity: 0;
  translate: clamp(18px, 4vw, 34px) 0;
  transition-property: opacity, translate;
  transition-duration: 0.7s, 0.9s;
}

/* Volet : pour les photos. L'image se découvre par le bas, sans fondu. */
.motion [data-anim="clip"] {
  clip-path: inset(0 0 100% 0);
  transition-property: clip-path;
  transition-duration: 1.15s;
}
.motion [data-anim="clip"] .frame img { scale: 1.08; transition: scale 1.6s var(--out-quint) var(--d); }

/* Éclosion : pour les blocs autonomes (carte, lecteur, cartouche). */
.motion [data-anim="pop"] {
  opacity: 0;
  scale: 0.965;
  translate: 0 12px;
  transition-property: opacity, scale, translate;
  transition-duration: 0.7s, 0.9s, 0.9s;
}

/* Titres : chaque ligne remonte derrière son propre masque. */
.ln { display: block; overflow: hidden; padding-bottom: 0.06em; }
.ln > i { display: block; font-style: inherit; }
.motion [data-anim="lines"] .ln > i {
  translate: 0 105%;
  transition: translate 1.05s var(--out-quint) calc(var(--d) + var(--i, 0) * 90ms);
  will-change: transform;
}

/* État révélé */
.motion [data-anim].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0 0 0 0);
}
.motion [data-anim="clip"].is-in .frame img { scale: 1; }
.motion [data-anim="lines"].is-in .ln > i { translate: 0 0; }

/* Une fois l'entrée jouée, on rend la main au compositeur. */
.motion [data-anim].is-done { will-change: auto; }

/* Parallaxe : l'image déborde du cadre, le script la fait glisser dedans.
   La marge (--px-room) doit rester >= au coefficient de parallaxe le plus
   élevé, sinon le bord de l'image rentre dans le cadre et laisse un vide.  */
.motion .frame[data-parallax] {
  --px-room: 10%;
}
.motion .frame[data-parallax] > picture {
  position: absolute;
  inset: calc(-1 * var(--px-room)) 0;
  height: calc(100% + 2 * var(--px-room));
}
.motion .frame[data-parallax] img { height: 100%; will-change: transform; }

/* Dérive lente sur la bande d'eau : la surface ne tient jamais en place. */
@keyframes drift {
  from { scale: 1.02; translate: -0.6% 0; }
  to   { scale: 1.07; translate: 0.6% 0; }
}
.motion .frame--drift img { animation: drift 26s var(--d) infinite alternate ease-in-out; }

/* Jauge de progression, posée sous l'en-tête. */
.head__progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.4s var(--out-quart);
}
.head[data-stuck="true"] .head__progress { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover { translate: none; }
  .gal__i:hover img { scale: 1; }
  .head__progress { display: none; }
}

@media print {
  .head, .burger, .player, .lb, .menu, .hero::before, .contact::before { display: none !important; }
  body { background: #fff; color: #000; }
}