/* ═══════════════════════════════════════════════════════════════════
   SAFWAH VOYAGES : feuille de style (refonte « taste-skill »)

   Lecture du brief : site vitrine mono-page, refonte visuelle complète
   (contenu, ancres, champs du formulaire et liens WhatsApp conservés), pour
   des familles de La Réunion qui comparent des agences sur téléphone. Langage
   calme et précis, porté par la photographie.
   Cadrans : DESIGN_VARIANCE 7 · MOTION_INTENSITY 5 · VISUAL_DENSITY 3.

   Règles tenues ici (détail dans DESIGN.md) :
   · UN seul thème, clair (ivoire), sans bascule ni mode sombre, jamais de
     section inversée.
   · UN accent : l'or du client. Il porte les actions, jamais les fonds.
   · UNE famille typographique sans empattement (Instrument Sans), italique
     de la même famille pour l'emphase.
   · UNE échelle de rayons : pilule pour les contrôles, 24 px pour les
     surfaces, 14 px pour ce qu'elles contiennent.
   · Animation de transform et d'opacité uniquement, aucun écouteur de
     défilement, tout neutralisé sous prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. Polices (auto-hébergées, licence OFL) ─────────────────────── */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Repli métrique : la police système est étirée aux proportions d'Instrument
   Sans pour que le remplacement ne fasse pas sauter la mise en page (CLS). */
@font-face {
  font-family: 'Instrument Sans Fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 93%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ─── 2. Jetons ────────────────────────────────────────────────────────
   Les huit teintes du client sont reprises AU HEX PRÈS (★) ; tout le reste
   en dérive. Les gris sont exactement neutres : l'or porte seul la chaleur.
     ★ Ébène #111111 · #151515     ★ Ivoire #FAF8F4 · #F8F6F2
     ★ Encre #2C2C2C              ★ Texte clair #F8F8F8
     ★ Or #D4AF37                 ★ Or clair #E8C76A
   Toute la feuille ne lit que les noms sémantiques ci-dessous. ───────────────────────────── */
:root {
  /* Un seul thème : le clair, celui du client. `color-scheme: light` empêche aussi le
     navigateur d'assombrir la page de lui-même (mode sombre du système, « force dark »). */
  --bg:        #FAF8F4;               /* ★ ivoire : page */
  --bg-alt:    #F3F0E9;               /* sections alternées */
  --surface:   #FEFDFB;               /* panneau posé sur la page */
  --surface-2: #F8F6F2;               /* ★ ivoire 2 : puits (champs, rails) */
  --ink:       #2C2C2C;               /* ★ encre : 13,2:1 sur ivoire */
  --ink-soft:  #565656;               /* 6,9:1 */
  --ink-mute:  #696969;               /* 5,2:1 */
  --line:      oklch(0.2931 0 90 / 0.12);
  --line-strong: oklch(0.2931 0 90 / 0.28);
  --ctrl:      #8A8A8A;               /* bordure de contrôle, >= 3:1 (WCAG 1.4.11) */

  --gold:      #D4AF37;               /* ★ or : fonds d'action, filets */
  --gold-hi:   #E8C76A;               /* ★ or clair : survol */
  --on-gold:   #111111;               /* 8,98:1 sur l'or */
  --gold-ink:  #7C6620;               /* or de TEXTE sur clair : 4,85:1 mini */
  --gold-line: oklch(0.7665 0.1387 91.1 / 0.55);
  --glow:      oklch(0.7665 0.1387 91.1 / 0.16);

  --btn-ink-bg:   #111111;            /* bouton encre */
  --btn-ink-fg:   #F8F8F8;
  --glass:        oklch(0.9796 0.0057 84.6 / 0.78);
  --glass-line:   oklch(0.2931 0 90 / 0.10);
  --scrim:        oklch(0.1776 0 90);  /* écran sous texte sur photo */
  --shadow-rgb:   0.2 0.01 85;         /* ombres teintées, jamais noir pur */
  --grain:        0.045;
  --danger:       #B3261E;             /* erreur de formulaire : 6,1:1 sur ivoire */

  color-scheme: light;
}
:root {
  /* Typographie */
  --font: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, -apple-system, 'Segoe UI', 'Noto Naskh Arabic', 'Segoe UI Symbol', sans-serif;

  --t-display: clamp(2.7rem, 1.25rem + 5.2vw, 4.75rem);
  --t-h2:      clamp(2.05rem, 1.2rem + 3.1vw, 3.6rem);
  --t-h3:      clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  --t-h4:      clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
  --t-statement: clamp(1.75rem, 1.05rem + 2.8vw, 3.3rem);
  --t-lede:    clamp(1.1rem, 1.02rem + 0.38vw, 1.28rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;

  /* Grille et rythme (VISUAL_DENSITY 3 : sections hautes) */
  --gutter:  clamp(1.25rem, 4.2vw, 3.5rem);
  --shell:   80rem;
  --section: clamp(4.75rem, 10.5vw, 9.5rem);
  --space-head: clamp(2.25rem, 4.5vw, 3.5rem);

  /* Rayons : pilule (contrôles) · 24 px (surfaces) · 14 px (contenu des surfaces) */
  --r-pill: 999px;
  --r-lg:   24px;
  --r-md:   14px;
  --r-sm:   8px;

  /* Mouvement */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);   /* sortie exponentielle : réponses, révélations */
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 800ms;

  /* Ombres teintées (large et faible : de l'air sous l'objet) */
  --sh-sm: 0 1px 2px oklch(var(--shadow-rgb) / 0.06), 0 4px 14px oklch(var(--shadow-rgb) / 0.05);
  --sh-md: 0 2px 6px oklch(var(--shadow-rgb) / 0.05), 0 18px 44px oklch(var(--shadow-rgb) / 0.09);
  --sh-lg: 0 4px 10px oklch(var(--shadow-rgb) / 0.05), 0 32px 80px oklch(var(--shadow-rgb) / 0.14);

  /* Échelle de z-index : couches systémiques seulement */
  --z-nav: 40; --z-fab: 50; --z-menu: 45; --z-grain: 60; --z-skip: 100;

  /* Arche (mihrab) : silhouette de l'affiche du client */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 V55 C0 30 20 12 50 0 C80 12 100 30 100 55 V140 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ─── 3. Réinitialisation ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 { font-weight: 620; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
em { font-style: italic; font-weight: 400; letter-spacing: -0.025em; }

:where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
::selection { background: var(--gold); color: var(--on-gold); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sentinel { position: absolute; inset: 0 0 auto; height: 1px; pointer-events: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Lien d'évitement : volontairement sans transition (action au clavier). */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-skip);
  padding: 0.75rem 1.25rem; font-weight: 600;
  background: var(--btn-ink-bg); color: var(--btn-ink-fg); border-radius: var(--r-pill);
}
.skip-link:focus { top: 1rem; }

/* Grain : un seul calque fixe, non interactif, jamais sur un conteneur qui défile. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── 4. Primitives ────────────────────────────────────────────────── */
.container { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: currentColor; }

.section { padding-block: var(--section); position: relative; }
.section--alt { background: var(--bg-alt); }

.section-head { max-width: 46rem; margin-bottom: var(--space-head); }
.section-head > * + * { margin-top: 1.25rem; }

.display { font-size: var(--t-display); font-weight: 650; line-height: 1.0; letter-spacing: -0.045em; }
.display__line { display: block; }
.display em { font-weight: 330; letter-spacing: -0.04em; padding-bottom: 0.08em; }
.h2 { font-size: var(--t-h2); font-weight: 640; line-height: 1.04; letter-spacing: -0.038em; }
.h2 em, .statement em { font-weight: 340; padding-bottom: 0.06em; }
.h3 { font-size: var(--t-h3); font-weight: 620; letter-spacing: -0.035em; }
.h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.statement { font-size: var(--t-statement); font-weight: 620; line-height: 1.1; letter-spacing: -0.038em; max-width: 24ch; }

.lede { max-width: 58ch; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-soft); }
.eyebrow { font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.005em; color: var(--ink-soft); }

/* ─── 5. Boutons ───────────────────────────────────────────────────────
   Pilules. L'action principale est or, avec son icône dans une île circulaire
   (« bouton dans le bouton »). Un seul libellé par intention sur la page :
   « Devis gratuit » partout où l'on demande un devis. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 52px; padding: 0.5rem 0.55rem 0.5rem 1.5rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-pill);
  transition: transform var(--d-fast) var(--ease), background-color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease), color var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.btn:active { transform: scale(0.97); transition-duration: 90ms; }
.btn--lg { min-height: 60px; padding-inline-start: 1.9rem; font-size: 1rem; }
.btn--sm { min-height: 44px; padding: 0.3rem 0.35rem 0.3rem 1.15rem; font-size: var(--t-xs); gap: 0.55rem; }
.btn--block { width: 100%; }

.btn__icon {
  display: grid; place-items: center; flex: none;
  inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  background: oklch(0.1776 0 90 / 0.12);
  transition: transform var(--d-base) var(--ease-soft), background-color var(--d-base) var(--ease);
}
.btn--lg .btn__icon { inline-size: 2.9rem; block-size: 2.9rem; }
.btn--sm .btn__icon { inline-size: 2rem; block-size: 2rem; }
.btn__icon .icon { inline-size: 1.15rem; block-size: 1.15rem; }

.btn--gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 1px 0 oklch(1 0 0 / 0.35) inset, var(--sh-sm); }
.btn--ink  { background: var(--btn-ink-bg); color: var(--btn-ink-fg); box-shadow: var(--sh-sm); }
.btn--ink .btn__icon { background: color-mix(in srgb, var(--btn-ink-fg) 18%, transparent); }
.btn--outline { border-color: var(--line-strong); color: var(--ink); padding-inline-end: 1.6rem; }

/* Lien à flèche : l'action tertiaire (évite la paire « plein + fantôme » partout). */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  font-weight: 600; font-size: var(--t-sm); color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-block-end: 0.15rem;
  transition: background-size var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.link-arrow .icon { inline-size: 1.05rem; block-size: 1.05rem; transition: transform var(--d-base) var(--ease-soft); }

.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--d-base) var(--ease), transform var(--d-fast) var(--ease), border-color var(--d-base) var(--ease);
}
.icon-btn .icon { inline-size: 1.3rem; block-size: 1.3rem; }
.icon-btn--ring { border: 1px solid var(--line-strong); }
.icon-btn:active { transform: scale(0.94); transition-duration: 90ms; }
.icon-btn[disabled] { opacity: 0.35; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { background: var(--gold-hi); box-shadow: 0 1px 0 oklch(1 0 0 / 0.4) inset, var(--sh-md); }
  .btn--ink:hover  { transform: translateY(-1px); box-shadow: var(--sh-md); }
  .btn--outline:hover { border-color: var(--ink); }
  .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.05); }
  .link-arrow:hover { color: var(--gold-ink); }
  .link-arrow:hover .icon { transform: translate(2px, -2px); }
  .icon-btn:hover:not([disabled]) { background: oklch(0.5 0 0 / 0.1); }
  .icon-btn--ring:hover:not([disabled]) { border-color: var(--ink); }
}

/* ─── 6. En-tête : îlot de verre flottant ──────────────────────────────
   Une pilule détachée du bord, jamais une barre collée en haut. Le flou
   est porté par un pseudo-élément : un `backdrop-filter` sur le conteneur
   lui-même ferait de lui le repère des éléments `fixed` qu'il contient (le
   menu mobile) et casserait leur position. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-nav);
  padding: max(0.75rem, env(safe-area-inset-top)) var(--gutter) 0;
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto;
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 1rem;
  width: min(100%, var(--shell)); margin-inline: auto;
  min-height: 4rem; padding: 0.45rem 0.5rem 0.45rem 1.15rem;
  border-radius: var(--r-pill);
}
.site-header__bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
          backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16), 0 6px 24px oklch(var(--shadow-rgb) / 0.06);
  transition: box-shadow var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.site-header.is-stuck .site-header__bar::before {
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16), 0 14px 40px oklch(var(--shadow-rgb) / 0.14);
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; flex: none; }
.brand__mark { block-size: 2.15rem; inline-size: auto; object-fit: contain; transition: transform var(--d-base) var(--ease-soft); }
.brand__name { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.brand__name span { font-weight: 400; color: var(--ink-soft); }

.site-nav { margin-inline: auto; }
.site-nav__list { display: flex; gap: 0.15rem; }
.site-nav__list a:not(.btn) {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.95rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); border-radius: var(--r-pill);
  transition: color var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.site-nav__list a:not(.btn)[aria-current='true'] { color: var(--ink); background: oklch(0.5 0 0 / 0.1); }
.site-nav__cta { display: none; }

.site-header__tools { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; }
.site-nav + .site-header__tools { margin-inline-start: 0; }

.nav-toggle { display: none; place-content: center; gap: 6px; }
.nav-toggle__bar {
  display: block; inline-size: 20px; block-size: 1.5px; background: currentColor;
  transition: transform var(--d-base) var(--ease-soft);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (hover: hover) and (pointer: fine) {
  .site-nav__list a:not(.btn):hover { color: var(--ink); background: oklch(0.5 0 0 / 0.08); }
  .brand:hover .brand__mark { transform: scale(1.06) rotate(-3deg); }
}

/* Menu mobile : feuille plein écran. Sans JS il n'existe pas (le pied de page
   porte la navigation), avec JS il s'ouvre depuis le bouton. */
@media (max-width: 61.99rem) {
  .site-header__cta { display: none; }
  .js .nav-toggle { display: grid; }
  .site-nav { margin: 0; }
  .site-nav { display: none; }
  .js .site-nav {
    display: block;
    position: fixed; inset: 0; z-index: -1;
    padding: calc(5.5rem + env(safe-area-inset-top)) var(--gutter) 2rem;
    background: color-mix(in oklab, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(26px);
            backdrop-filter: blur(26px);
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity var(--d-base) var(--ease), visibility 0s linear var(--d-base);
  }
  .js .site-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-nav__list { flex-direction: column; gap: 0; }
  .site-nav__list > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px);
    transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); }
  .site-nav__list a:not(.btn), .site-nav__list a:not(.btn)[aria-current='true'], .site-nav__list a:not(.btn):hover {
    min-height: 68px; width: 100%; padding: 0; border-radius: 0; background: none; color: var(--ink);
    font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 620; letter-spacing: -0.035em;
  }
  .site-nav.is-open .site-nav__list > li { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 55ms); }
  .site-nav__list > li.site-nav__cta { display: block; border-bottom: 0; padding-top: 1.75rem; }
}

/* Sans transparence (réglage système) : le verre devient un aplat. */
@media (prefers-reduced-transparency: reduce) {
  .site-header__bar::before { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .js .site-nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hv-carte .leaflet-control-zoom a, .hv-carte .leaflet-control-attribution { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ─── 7. Hero ──────────────────────────────────────────────────────────
   Asymétrique : le texte à gauche, l'arche de l'affiche à droite. Quatre
   éléments de texte au plus (sur-titre, titre, chapô, actions). */
.hero {
  position: relative; isolation: isolate; overflow-x: clip;
  min-height: min(100dvh, 62rem);
  display: grid; align-items: center;
  padding-block: 6rem 3.5rem;
}
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__copy { display: grid; justify-items: start; container-type: inline-size; }
/* Le titre est dimensionné sur la largeur de SA colonne (et non du viewport) : la
   première ligne « L'Oumra à la carte, » mesure ~7,8 em, donc 12,4 cqw la fait tenir
   tout juste, à toute largeur. Deux lignes au bureau, jamais quatre. */
.hero__copy .display { font-size: clamp(2.35rem, 12.4cqw, 4.75rem); }
.hero__copy .eyebrow { margin-bottom: clamp(1rem, 2.2vw, 1.5rem); }
.hero__copy .display { max-width: 12.5em; }
.hero__lede { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }

.hero__media { position: relative; justify-self: center; width: min(100%, 27rem); }
.hero__media::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -22% -42%;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .hero__media { justify-self: end; width: min(100%, 29rem); }
}
@media (max-width: 59.99rem) {
  .hero { padding-block: 6.25rem 3rem; min-height: 0; }
  .hero__media { width: min(100%, 22rem); }
}

/* ── L'arche : silhouette de mihrab de l'affiche, filet d'or décalé ──
   La base est fondue par un masque composé (silhouette ∩ dégradé vertical) :
   la photo devient réellement transparente et se dissout dans le fond exact,
   ivoire. Aucun `drop-shadow` : il flouterait le masque. */
.arch { position: relative; aspect-ratio: 5 / 7; }
.arch--sm { aspect-ratio: 3 / 4; }
.arch__photo {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: var(--arch), linear-gradient(180deg, #000 78%, transparent 99%);
          mask-image: var(--arch), linear-gradient(180deg, #000 78%, transparent 99%);
  -webkit-mask-size: 100% 100%, 100% 100%;
          mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.arch__photo img { width: 100%; height: calc(100% + 56px); max-width: none; margin-top: -28px; object-fit: cover; }
.arch__line {
  position: absolute; inset: -14px -14px 0; inline-size: calc(100% + 28px); block-size: calc(100% + 14px);
  color: var(--gold-line); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
          mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}

/* ─── 8. Sur mesure ────────────────────────────────────────────────── */
.surmesure__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }
.surmesure__grid > *, .services__grid > *, .equipe__grid > *, .hero__grid > * { min-inline-size: 0; }
@media (min-width: 60rem) {
  .surmesure__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .surmesure__intro { position: sticky; top: 7.5rem; }
}
.surmesure__intro .lede { margin-top: 1.5rem; max-width: 40ch; }
.ticks { display: grid; gap: 0.35rem; margin-top: 2rem; }
.ticks li { display: flex; align-items: center; gap: 0.8rem; min-height: 36px; font-weight: 500; }
.ticks .icon { color: var(--gold-ink); inline-size: 1.35rem; block-size: 1.35rem; }

/* Double enveloppe : un plateau, et le noyau posé dedans. Les deux rayons sont
   concentriques (rayon intérieur = rayon extérieur - épaisseur du plateau). */
.bezel {
  padding: 0.5rem; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--sh-md);
}
.devis {
  display: grid; gap: 1.4rem;
  padding: clamp(1.4rem, 3.4vw, 2.4rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: calc(var(--r-lg) - 0.5rem);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5);
}

.field { display: grid; gap: 0.5rem; min-inline-size: 0; }
.field-row { display: grid; gap: 1.4rem; }
@media (min-width: 28rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field legend { padding: 0; }
.field label, .field legend { font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); letter-spacing: 0.01em; }
.field__hint { font-weight: 400; color: var(--ink-mute); }

.field select, .field input[type='number'] {
  inline-size: 100%; min-height: 52px; padding: 0 1rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--ctrl); border-radius: var(--r-md);
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.8rem; cursor: pointer; }
.select .icon { position: absolute; inset-inline-end: 1rem; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--ink-soft); inline-size: 1.1rem; block-size: 1.1rem; }
.field select:hover, .field input[type='number']:hover { border-color: var(--ink-soft); }
.field select:focus-visible, .field input[type='number']:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 2px; border-color: var(--gold-ink);
}
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field__error { font-size: var(--t-xs); font-weight: 500; color: var(--danger); }
.field__error[hidden] { display: none; }

.field--group { border: 0; padding: 0; margin: 0; gap: 0.75rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 1.15rem;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--ctrl); border-radius: var(--r-pill);
  transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease), gap var(--d-base) var(--ease-soft);
}
.chip .icon { inline-size: 0; block-size: 1.1rem; opacity: 0; transition: inline-size var(--d-base) var(--ease-soft), opacity var(--d-base) var(--ease); }
.chip input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--on-gold); gap: 0.45rem; }
.chip input:checked + span .icon { inline-size: 1.1rem; opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:hover > span { border-color: var(--ink-soft); } .chip input:checked:hover + span { border-color: var(--gold); } }

.devis .btn { margin-top: 0.35rem; }
.devis__foot { font-size: var(--t-xs); color: var(--ink-mute); text-align: center; }

/* ─── 9. Nos groupes : rail qui déborde à droite ───────────────────────
   Neuf départs : c'est « beaucoup » ; un rail à défilement magnétique les
   fait voir un à un sans une page de neuf blocs identiques. Les cartes n'ont
   pas de boîte : la photo, puis le texte posé sur la page. */
.groupes { overflow-x: clip; }
.groupes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: var(--space-head); }
.groupes__head .h2 { max-width: 17em; }
.rail-controls { display: none; gap: 0.6rem; flex: none; }
.js .rail-controls { display: flex; }

.rail {
  --rail-pad: max(var(--gutter), calc((100% - var(--shell)) / 2));
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--rail-pad); scroll-padding-inline: var(--rail-pad);
  padding-block-end: 0.5rem;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.groupes__rail > * { flex: 0 0 clamp(16.5rem, 26.5vw, 22.5rem); }

.groupe { display: flex; flex-direction: column; min-inline-size: 0; }
.groupe__media { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); }
.groupe__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: transform 1100ms var(--ease); }

.groupe__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; font-size: var(--t-sm); }
.groupe__num { font-weight: 600; margin: 0; }
.groupe__duree { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-mute); }
.groupe__duree .icon { inline-size: 1.05rem; block-size: 1.05rem; }
.groupe__dates {
  margin-top: 0.3rem; font-size: clamp(1.65rem, 1.2rem + 1.2vw, 2.05rem); font-weight: 640;
  letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums;
}
.fleche { padding-inline: 0.3em; font-weight: 400; color: var(--ink-mute); }

.groupe__etapes { display: grid; gap: 0.9rem; margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.etape { position: relative; display: flex; align-items: center; gap: 0.85rem; }
.etape__vignette { position: relative; flex: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-strong); }
.etape:not(:last-child)::before {
  content: ''; position: absolute; inset-inline-start: calc(1.3rem - 0.5px); top: 2.6rem; bottom: -0.9rem; width: 1px; background: var(--line-strong);
}
.etape__ville { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; }
.etape__quand { display: block; margin-top: 0.1rem; font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.groupe__cta { align-self: flex-start; margin-top: 1.15rem; }

.groupes__close { display: grid; gap: 1.25rem; padding-top: clamp(4rem, 8vw, 7rem); }
.groupes__close .statement { max-width: 22ch; }

@media (hover: hover) and (pointer: fine) {
  .groupe:hover .groupe__media img { transform: scale(1.045); }
}
@media (max-width: 40rem) {
  .groupes__head { align-items: flex-end; }
  .rail-controls { display: none !important; }
  .groupes__rail > * { flex-basis: 82%; }
}

/* ─── 10. Nos hôtels : explorateur ─────────────────────────────────────
   Liste d'hôtels à gauche, galerie et situation à droite. Sans JS, les fiches
   restent empilées, chacune avec ses photos : le contenu ne dépend pas du
   script, seul le confort de navigation en dépend. */
.hotels .section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.ville + .ville { margin-top: clamp(4.5rem, 9vw, 7.5rem); }
.ville__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.25rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ville__note { font-size: var(--t-sm); color: var(--ink-mute); }

.hotel-vitrine { display: grid; gap: 1.5rem 3.5rem; }
@media (min-width: 62rem) { .hotel-vitrine { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; } }

/* ── Sélecteur ── */
.hv-onglets { display: none; }
.js .hv-onglets { display: flex; flex-direction: column; gap: 0.15rem; }
@media (min-width: 62rem) { .js .hv-onglets { position: sticky; top: 7.5rem; } }
.hv-onglet {
  position: relative; display: grid; gap: 0.2rem; min-height: 52px;
  padding: 0.8rem 0 0.8rem 1.15rem; text-align: start; color: var(--ink-mute);
  transition: color var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.hv-onglet::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block: 0.7rem; width: 2px; border-radius: 2px;
  background: var(--gold); transform: scaleY(0); transition: transform var(--d-base) var(--ease-soft);
}
.hv-onglet__nom { font-size: clamp(1.4rem, 1.05rem + 0.8vw, 1.8rem); font-weight: 620; letter-spacing: -0.035em; line-height: 1.1; }
.hv-onglet__lieu { font-size: var(--t-xs); line-height: 1.35; }
.hv-onglet.is-active { color: var(--ink); }
.hv-onglet.is-active::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .hv-onglet:hover { color: var(--ink); transform: translateX(3px); } }

/* ── Scène : un seul panneau visible à la fois (avec JS) ── */
.hv-scene { position: relative; min-inline-size: 0; }
.hv-panneau + .hv-panneau { margin-top: 3rem; }
.js .hv-panneau { display: none; }
.js .hv-panneau.is-active { display: block; animation: hv-entree 520ms var(--ease) both; }
@keyframes hv-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── Le cadre prend la proportion de SA photo ──
   Les photos fournies vont du portrait 2/3 au paysage 16/9. En « cover » on
   amputerait les portraits, en « contain » on laisserait des bandes. Le cadre
   adopte donc le ratio exact de l'image : rien à recadrer, rien à combler. La
   HAUTEUR est constante, la LARGEUR respire (comme un accrochage de mur). */
.hv-panneau { --h-max: 33rem; }
.hv-fig { margin: 0; }
.hv-cadre {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: var(--ratio, 1.5);
  inline-size: min(100%, calc(var(--h-max) * var(--ratio, 1.5)));
  border-radius: var(--r-lg); background: var(--surface-2);
  box-shadow: var(--sh-md), 0 0 0 1px var(--line);
  transition: aspect-ratio var(--d-base) var(--ease), inline-size var(--d-base) var(--ease);
}
.hv-photo { inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity 220ms var(--ease); }
.hv-photo.is-swapping { opacity: 0; }
/* Légende sous la photo (jamais en surimpression). Sur grand écran le sélecteur
   porte déjà le nom : elle ne sert qu'au téléphone, où les pastilles le cachent. */
.hv-legende { display: grid; gap: 0.1rem; margin-top: 0.85rem; }
.hv-legende__nom { font-weight: 620; letter-spacing: -0.02em; }
.hv-legende__lieu { font-size: var(--t-sm); color: var(--ink-mute); }
@media (min-width: 62rem) { .js .hv-legende { display: none; } }

.hv-vues {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
  inline-size: min(100%, calc(var(--h-max) * var(--ratio, 1.5)));
  margin-top: 0.75rem; transition: inline-size var(--d-base) var(--ease);
}
.hv-vue {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-md);
  background: var(--surface-2); opacity: 0.62;
  transition: opacity var(--d-base) var(--ease), transform var(--d-fast) var(--ease);
}
.hv-vue img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hv-vue::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow var(--d-base) var(--ease);
}
.hv-vue.is-active { opacity: 1; }
.hv-vue.is-active::after { box-shadow: inset 0 0 0 2px var(--gold); }
.hv-vue:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hv-vue:hover { opacity: 1; } }

/* ── Situation : carte + distance ── */
.hv-situation {
  display: grid; gap: 0.5rem; margin-top: 1.5rem; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
}
@media (min-width: 46rem) { .hv-situation { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 45.99rem) { .hv-carte { aspect-ratio: 4 / 3; } }
.hv-carte {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; min-inline-size: 0;
  border-radius: calc(var(--r-lg) - 0.5rem); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Chargement : un fond qui respire jusqu'à ce que les tuiles arrivent. */
.hv-carte:not(.is-ready)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, oklch(0.5 0 0 / 0.1) 50%, transparent 70%) 0 0 / 220% 100%;
  animation: carte-attente 1.6s linear infinite;
}
@keyframes carte-attente { to { background-position: -220% 0; } }

.hv-situation__infos { display: grid; align-content: center; gap: 0.5rem; padding: 1.1rem 1.15rem 1.25rem; }
.hv-situation__label { font-size: var(--t-sm); color: var(--ink-soft); }
.hv-situation__val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; }
.hv-situation__dist {
  font-size: clamp(2.3rem, 1.6rem + 2.2vw, 3.3rem); font-weight: 640; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.hv-situation__temps { font-size: var(--t-body); color: var(--ink-soft); }
.hv-situation__note { margin-top: 0.4rem; font-size: var(--t-xs); line-height: 1.5; color: var(--ink-mute); max-width: 34ch; }

/* ── Marqueurs et habillage Leaflet ── */
.hv-pin { position: relative; }
.hv-pin__point { position: absolute; left: -7px; top: -7px; inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 2px 8px oklch(0 0 0 / 0.5); }
.hv-pin__nom {
  position: absolute; bottom: 12px; left: 50%; translate: -50% 0;
  padding: 0.2rem 0.6rem; font-family: var(--font); font-size: 0.72rem; font-weight: 650; white-space: nowrap;
  border-radius: var(--r-pill); box-shadow: 0 2px 8px oklch(0 0 0 / 0.4);
}
.hv-pin--hotel .hv-pin__point { background: var(--gold); }
.hv-pin--hotel .hv-pin__nom { background: var(--gold); color: var(--on-gold); }
.hv-pin--sanctuaire .hv-pin__point { background: var(--btn-ink-bg); }
.hv-pin--sanctuaire .hv-pin__nom { background: var(--btn-ink-bg); color: var(--btn-ink-fg); }

.hv-carte .leaflet-container { inline-size: 100%; block-size: 100%; background: var(--surface); font-family: var(--font); border-radius: inherit; }
.hv-carte .leaflet-tile-pane { filter: saturate(0.8) contrast(1.02); }
.hv-carte .leaflet-control-attribution { font-size: 0.62rem; color: var(--ink-mute); background: var(--glass); }
.hv-carte .leaflet-control-attribution a { color: var(--ink-soft); text-decoration: underline; }
.hv-carte .leaflet-bar { border: 0; box-shadow: var(--sh-sm); }
.hv-carte .leaflet-control-zoom a {
  inline-size: 44px; block-size: 44px; line-height: 44px; font-size: 1.15rem;
  color: var(--ink); background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hv-carte .leaflet-control-zoom a:hover { color: var(--ink); background: var(--surface); }
.hv-carte__repli { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Téléphone et tablette : le sélecteur devient un rail de pastilles ── */
@media (max-width: 61.99rem) {
  .js .hv-onglets {
    flex-direction: row; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity;
    margin-inline: calc(var(--gutter) * -1); padding: 0.1rem var(--gutter) 0.35rem; scrollbar-width: none;
  }
  .js .hv-onglets::-webkit-scrollbar { display: none; }
  .hv-onglet {
    flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0.55rem 1.1rem;
    border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--ink);
  }
  .hv-onglet::before { display: none; }
  .hv-onglet__nom { font-size: 1rem; font-weight: 560; letter-spacing: -0.01em; }
  .hv-onglet__lieu { display: none; }
  .hv-onglet.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
}
@media (max-width: 40rem) {
  .hv-panneau { --h-max: 26rem; }
  .hv-vues { gap: 0.4rem; }
}

.open-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  margin-top: clamp(4.5rem, 9vw, 7.5rem); padding: clamp(1.6rem, 4vw, 3rem);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.open-note__text { flex: 1 1 24rem; }
.open-note p { margin-top: 0.85rem; max-width: 58ch; color: var(--ink-soft); }
.open-note .btn { flex: none; }
@media (max-width: 30rem) { .open-note .btn { inline-size: 100%; } }

/* ─── 11. Ambiance : la photo se dissout dans la page ──────────────────
   Pas de voile noir : la photo fond vers la couleur du thème, et la phrase
   se pose dans l'encre du thème. Elle sert dans les deux modes. */
.ambiance { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(27rem, 62vw, 46rem); overflow: clip; }
.ambiance__media { position: absolute; inset: 0; z-index: -2; }
.ambiance__media img { inline-size: 100%; block-size: 112%; max-width: none; object-fit: cover; object-position: 50% 42%; }
.ambiance::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--bg) 0%, color-mix(in oklab, var(--bg) 88%, transparent) 24%, color-mix(in oklab, var(--bg) 0%, transparent) 64%);
}
.ambiance__body { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); }
.ambiance__line { max-width: 20ch; }

/* ─── 12. Ziyārāt : trio décalé ────────────────────────────────────────
   Trois photos de formats et de hauteurs différents, décalées : jamais trois
   cartes identiques côte à côte. Légende sous la photo. */
.ziyaras { display: grid; grid-template-columns: 1fr 1.18fr 0.92fr; gap: clamp(1.25rem, 3.2vw, 3.25rem); align-items: start; }
.ziyara { min-inline-size: 0; }
.ziyara__media { overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); }
.ziyara__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1100ms var(--ease); }
.ziyara--a .ziyara__media { aspect-ratio: 1 / 1; }
.ziyara--b .ziyara__media { aspect-ratio: 4 / 5; }
.ziyara--b .ziyara__media img { object-position: 24% 50%; }
.ziyara--c .ziyara__media { aspect-ratio: 3 / 4; }
.ziyara--b { margin-top: clamp(3rem, 7vw, 6.5rem); }
.ziyara--c { margin-top: clamp(1.5rem, 3.4vw, 3.25rem); }
.ziyara__name { margin-top: 1.1rem; }
.ziyara__desc { margin-top: 0.45rem; max-width: 34ch; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .ziyara:hover .ziyara__media img { transform: scale(1.045); } }

@media (max-width: 48rem) {
  .ziyaras {
    display: flex; gap: 0.85rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-block-end: 0.4rem; scrollbar-width: none;
  }
  .ziyaras::-webkit-scrollbar { display: none; }
  .ziyara { flex: 0 0 74%; scroll-snap-align: start; margin-top: 0 !important; }
  .ziyara .ziyara__media { aspect-ratio: 4 / 5 !important; }
}

/* ─── 13. Transport : la liste, et la photo du véhicule choisi ─────────
   L'information utile est la capacité : elle se lit en grand, ligne à ligne.
   Sur grand écran (avec JS) la photo suit la ligne survolée ou au focus ; sinon
   chaque véhicule a sa propre vignette en rail. */
.fleet__stage { display: none; }
.fleet__list {
  display: flex; gap: 0.85rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 0.4rem; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.fleet__list::-webkit-scrollbar { display: none; }
/* Chaque photo garde SA proportion : hauteur commune, largeur selon le format, comme un
   accrochage de mur (même principe que la galerie des hôtels). Rien n'est rogné. */
.vrow { --rail-h: 14rem; flex: 0 0 auto; inline-size: calc(var(--rail-h) * var(--ratio, 1.33)); max-inline-size: 84%; scroll-snap-align: start; display: grid; gap: 0.2rem; align-content: start; }
.vrow__img { aspect-ratio: var(--ratio, 1.33); inline-size: 100%; block-size: auto; object-fit: cover; border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: 0.8rem; }
.vrow__name { font-size: var(--t-h4); }
.vrow__type { font-size: var(--t-sm); color: var(--ink-mute); }
.vrow__seats { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: lining-nums; }

@media (min-width: 62rem) {
  .js .fleet { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .js .fleet__list { display: block; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; }
  .js .vrow {
    inline-size: auto; max-inline-size: none;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 1.5rem;
    padding: clamp(1.1rem, 2vw, 1.6rem) 0; cursor: default; outline-offset: -2px;
  }
  .js .vrow + .vrow { border-top: 1px solid var(--line); }
  .js .vrow__img { display: none; }
  .js .vrow__txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 1rem; }
  .js .vrow__name { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.6rem); font-weight: 620; letter-spacing: -0.045em; color: var(--ink-mute); transition: color var(--d-base) var(--ease), transform var(--d-base) var(--ease); }
  .js .vrow__type { font-size: var(--t-body); }
  .js .vrow__seats { font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.3rem); color: var(--ink-mute); transition: color var(--d-base) var(--ease); }
  .js .vrow.is-active .vrow__name, .js .vrow.is-active .vrow__seats { color: var(--ink); }
  .js .vrow.is-active .vrow__name { transform: translateX(0.35rem); }

  /* La scène adopte la proportion EXACTE de la photo affichée : rien à rogner, rien à
     combler. Même règle que le cadre des hôtels : la hauteur est plafonnée, la largeur
     suit le format, et le passage d'un format à l'autre est animé. */
  .js .fleet__stage {
    --h-max: 32rem;
    display: block; position: sticky; top: 7.5rem; justify-self: end;
    aspect-ratio: var(--ratio, 1); inline-size: min(100%, calc(var(--h-max) * var(--ratio, 1)));
    overflow: hidden; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--sh-md), 0 0 0 1px var(--line);
    transition: aspect-ratio var(--d-base) var(--ease), inline-size var(--d-base) var(--ease);
  }
  .stage__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; object-position: var(--pos, 50% 50%); opacity: 0; transform: scale(1.04); transition: opacity 650ms var(--ease), transform 1100ms var(--ease); }
  .stage__img.is-active { opacity: 1; transform: none; }
}

/* ─── 14. Accompagnement ───────────────────────────────────────────────
   Le titre reste en place pendant que les quatre prestations défilent,
   légèrement décalées. Pas de cartes : de l'espace, une icône, une phrase. */
.services__grid { display: grid; gap: 3rem 6rem; }
@media (min-width: 60rem) {
  .services__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
  .services__intro { position: sticky; top: 7.5rem; }
}
.services__intro .lede { margin-top: 1.5rem; max-width: 40ch; }
.services__list { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.service { display: grid; grid-template-columns: auto 1fr; gap: 1.35rem; align-items: start; max-width: 34rem; }
@media (min-width: 60rem) { .service:nth-child(even) { margin-inline-start: clamp(1.5rem, 4.5vw, 4rem); } }
.service__icon { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border: 1px solid var(--line-strong); border-radius: 50%; }
.service__icon .icon { inline-size: 1.55rem; block-size: 1.55rem; }
.service p { margin-top: 0.4rem; color: var(--ink-soft); }

/* ─── 15. Équipe / contact ─────────────────────────────────────────── */
.equipe__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 56rem) { .equipe__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }
.equipe__media { justify-self: center; inline-size: min(100%, 26rem); }
.equipe__text .lede { margin-top: 1.5rem; }
.equipe__text > p:not(.lede) { margin-top: 1.1rem; max-width: 56ch; color: var(--ink-soft); font-size: var(--t-body); }
.equipe__contact { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* ─── 16. Appel final : carte photo ────────────────────────────────── */
.cta__card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: clamp(26rem, 46vw, 35rem); border-radius: var(--r-lg); color: #F8F8F8;
  box-shadow: var(--sh-lg), 0 0 0 1px var(--line);
}
.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { inline-size: 100%; block-size: 112%; max-width: none; object-fit: cover; object-position: 50% 42%; }
.cta__card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, oklch(0.1776 0 90 / 0.9) 0%, oklch(0.1776 0 90 / 0.7) 46%, oklch(0.1776 0 90 / 0.4) 100%);
}
.cta__body { display: grid; justify-items: start; gap: 1.25rem; max-width: 40rem; padding: clamp(1.75rem, 5vw, 4rem); }
.cta__body .h2 { color: #F8F8F8; }
.cta__body .lede { color: #E6E6E6; max-width: 40ch; }
.cta__body .btn { margin-top: 0.5rem; }

/* ─── 17. Pied de page ─────────────────────────────────────────────── */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 7vw, 6rem) calc(2rem + env(safe-area-inset-bottom)); }
.site-footer__grid { display: grid; gap: 3rem; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: 1.5fr 1fr 1.1fr; } }
.footer-logo { display: inline-block; }
.footer-logo img { block-size: clamp(6.5rem, 15vw, 8.5rem); inline-size: auto; object-fit: contain; }
.site-footer__tag { margin-top: 1.1rem; max-width: 38ch; font-size: var(--t-sm); color: var(--ink-soft); }
.site-footer h2 { margin-bottom: 0.6rem; font-size: var(--t-sm); font-weight: 650; letter-spacing: -0.01em; }
.site-footer__nav a, .site-footer__contact a, .site-footer__place { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; font-size: var(--t-sm); color: var(--ink-soft); transition: color var(--d-base) var(--ease); }
.site-footer__contact .icon { color: var(--ink); }
.site-footer .site-footer__wa { display: inline-grid; place-items: center; padding: 0; gap: 0; }
.site-footer__write { margin-top: 1.5rem; margin-bottom: 0.6rem; font-size: var(--t-sm); font-weight: 650; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-mute); }
.site-footer__legal { align-items: center; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .site-footer__links a:hover { color: var(--ink); text-decoration-color: currentColor; } }

/* ─── 17 bis. Page « Mentions légales et confidentialité » ─────────────
   Une colonne de lecture (65 caractères), un sommaire collant à gauche sur
   grand écran. Les sections se séparent par un seul filet, au-dessus. */
.legal { padding-block: clamp(7.5rem, 12vw, 9.5rem) var(--section); }
.legal__grid { display: grid; gap: 2.5rem 5rem; }
@media (min-width: 62rem) {
  .legal__grid { grid-template-columns: 14rem minmax(0, 46rem); }
  .legal__head { grid-column: 1 / -1; }
  .legal__toc { position: sticky; top: 7.5rem; align-self: start; }
}
.legal__head .lede { margin-top: 1rem; }
.legal__maj { margin-top: 0.75rem; font-size: var(--t-sm); color: var(--ink-mute); }
.legal__toc ol { display: grid; }
.legal__toc a { display: flex; align-items: center; min-height: 40px; font-size: var(--t-sm); color: var(--ink-soft); transition: color var(--d-base) var(--ease); }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--ink); } }
@media (max-width: 61.99rem) {
  .legal__toc ol { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
}
.legal__body section + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.legal__body .h3 { margin-bottom: 1.1rem; }
.legal__body .h4 { margin: 1.75rem 0 0.5rem; }
.legal__body p, .legal__body li { max-width: 65ch; color: var(--ink-soft); }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul { margin-top: 0.8rem; }
.legal__body ul { display: grid; gap: 0.4rem; padding-inline-start: 1.15rem; list-style: disc; }
.legal__body li::marker { color: var(--ink-mute); }
.legal__body strong { color: var(--ink); font-weight: 600; }
.legal__body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .legal__body a:hover { text-decoration-color: currentColor; } }
.legal__dl { display: grid; gap: 0.35rem 2rem; }
.legal__dl dt { font-weight: 600; color: var(--ink); }
.legal__dl dd { margin: 0 0 0.7rem; color: var(--ink-soft); }
@media (min-width: 40rem) {
  .legal__dl { grid-template-columns: 13rem minmax(0, 1fr); row-gap: 0.9rem; }
  .legal__dl dd { margin: 0; }
}
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--ink); } }

/* ─── 18. Bouton flottant ──────────────────────────────────────────── */
.fab {
  position: fixed; z-index: var(--z-fab);
  right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 54px; padding: 0.5rem 1.4rem 0.5rem 1.2rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--on-gold); background: var(--gold); border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.94);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease-soft), visibility 0s linear var(--d-base), background-color var(--d-base) var(--ease);
}
.fab .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.fab.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fab:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .fab:hover { background: var(--gold-hi); } }
@media (max-width: 30rem) {
  /* Le libellé reste dans l'arbre d'accessibilité : il est masqué, pas supprimé. */
  .fab__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fab { padding: 0; inline-size: 56px; block-size: 56px; justify-content: center; }
}

/* ─── 19. Mouvement ────────────────────────────────────────────────────
   Chaque mouvement répond à une question : « qu'est-ce que ça dit ? »
   · apparition progressive : la page se lit de haut en bas, un bloc après l'autre ;
   · photo qui se pose (échelle) : la photo est le sujet, elle arrive en dernier ;
   · parallaxe liée au défilement (CSS pur, jamais sur du texte) : profondeur ;
   · survol et appui : le contrôle répond au geste.
   Rien ne boucle, rien n'attire l'œil sans cause. */
.js [data-reveal]:not([data-reveal='image']):not([data-reveal='hero']) {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in:not([data-reveal='image']):not([data-reveal='hero']) { opacity: 1; transform: none; }

.js [data-reveal='image'] img {
  opacity: 0; transform: scale(1.07);
  transition: opacity 900ms var(--ease), transform 1500ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal='image'].is-in img { opacity: 1; transform: none; }
/* Le hero ne passe jamais par une opacité nulle : l'image reste candidate au LCP. */
.js [data-reveal='hero'] img { transform: scale(1.06); transition: transform 1600ms var(--ease); }
.js [data-reveal='hero'].is-in img { transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-parallax] img { animation: derive linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes derive { from { translate: 0 -4%; } to { translate: 0 4%; } }
    .arch__photo[data-parallax] img { animation-name: derive-arche; }
    @keyframes derive-arche { from { translate: 0 -2.4%; } to { translate: 0 2.4%; } }
    .ambiance__media[data-parallax] img, .cta__media[data-parallax] img { animation-name: derive-fond; }
    @keyframes derive-fond { from { translate: 0 -5%; } to { translate: 0 0; } }
  }
}

/* ─── 20. Mouvement réduit ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 120ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .js [data-reveal] { transform: none !important; }
  .js [data-reveal='image'] img, .js [data-reveal='hero'] img { transform: none !important; }
  [data-parallax] img { translate: none !important; animation: none !important; }
  .hv-carte:not(.is-ready)::before { animation: none; }
  .btn:hover .btn__icon, .link-arrow:hover .icon, .hv-onglet:hover, .vrow.is-active .vrow__name,
  .groupe:hover .groupe__media img, .ziyara:hover .ziyara__media img { transform: none !important; }
}

/* ─── 20 bis. Très petits écrans ───────────────────────────────────────
   Au-delà du minimum tactile, un libellé de bouton peut passer à la ligne
   plutôt que de pousser la colonne (le plateau du formulaire débordait de 16 px
   à 390 px). L'interdiction de passer à la ligne vaut pour le bureau. */
@media (max-width: 24rem) {
  .site-header__bar { gap: 0.4rem; padding-inline-start: 0.9rem; }
  .brand { gap: 0.5rem; }
  .brand__mark { block-size: 1.9rem; }
  .brand__name { font-size: 1rem; }
}
@media (max-width: 26rem) {
  .btn { white-space: normal; text-align: start; line-height: 1.25; }
  .btn--lg { padding-inline-start: 1.35rem; gap: 0.6rem; }
  .devis { padding: 1.15rem; gap: 1.2rem; }
  .arch__line { inset: -8px -8px 0; inline-size: calc(100% + 16px); block-size: calc(100% + 8px); }
}

/* ─── 21. Impression ───────────────────────────────────────────────── */
@media print {
  .site-header, .fab, body::after, .rail-controls { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-reveal], .js [data-reveal] img { opacity: 1 !important; transform: none !important; }
}

/* Défilement verrouillé tant que le menu mobile est ouvert. */
html.menu-open { overflow: hidden; }