/* =========================================================================
   Meute Paris — feuille de style principale
   1. Tokens        5. Accueil : suite de la page
   2. Base          6. Services
   3. Composants    7. Qui sommes-nous
   4. Accueil : séquence vidéo       8. Réservation   9. Pied de page
   ========================================================================= */

/* ------------------------------------------------------------ 1. Tokens */

:root {
  --cream: #f6efe1;
  --cream-deep: #ece2cf;
  --paper: #fffdf8;
  --ink: #0c0c0c;
  --ink-soft: #3a3733;
  --ink-mute: #6d6862;
  --blue: #1b33c9;
  --blue-deep: #12228c;
  --orange: #f1461e;
  --line: rgba(12, 12, 12, 0.14);
  --line-soft: rgba(12, 12, 12, 0.08);

  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Archivo Black', 'Archivo', Arial, sans-serif;
  --font-logo: 'Bagel Fat One', 'Archivo Black', sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --wrap: 78rem;
  --radius: 2px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --head-h: 5rem;
}

/* -------------------------------------------------------------- 2. Base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--blue); color: #fff; }

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

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

.skip-link {
  position: fixed;
  top: 0.5rem; left: 0.5rem;
  z-index: 999;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------- Écran de chargement */

/* Sans JavaScript il n'y a personne pour le retirer : il ne doit pas
   apparaître du tout. */
html:not(.js) .loader { display: none; }
html.is-loading, html.is-loading body { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--cream);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
/* Retour sur la page dans la même session : le logo seul, le temps que tout
   soit prêt. Ni compteur ni décompte, mais la page reste couverte. */
.loader.is-quick .loader__tag,
.loader.is-quick .loader__count,
.loader.is-quick .loader__bar { display: none; }

.loader.is-done {
  opacity: 0;
  transform: translateY(-2%);
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  padding: var(--gutter);
  text-align: center;
}

.loader__mark {
  position: relative;
  width: min(16rem, 42vw);
  aspect-ratio: 1;
}

.loader__word {
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 55%);
  width: var(--w, 56%);
  transform: translate(-50%, -50%);
  display: block;
}
.loader__word.is-in { opacity: 1; }
.loader__word .logo-mark--image { display: block; }
.loader__word .logo-mark--image img { width: 100%; height: auto; }
.loader__word .logo-mark--type { font-size: 3.5rem; }

/* Chaque chien se pose à mesure que le chargement avance. */
.loader .logo-ring__part {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.loader .logo-ring__part.is-in { opacity: 1; transform: none; }

.loader__tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.loader__count {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.loader__bar {
  width: min(14rem, 40vw);
  height: 2px;
  background: var(--line-soft);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--orange);
}

/* -------------------------------------------------------- 3. Composants */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--wide { max-width: 96rem; }

.section {
  padding-block: clamp(4.5rem, 11vw, 10rem);
  position: relative;
}

.section--paper { background: var(--paper); }

/* Section qui enchaîne directement sur un bloc pleine largeur : sa marge
   basse ferait autrement un trou entre les deux. */
.section--serree { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink a { color: var(--cream); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.section--ink .eyebrow { color: rgba(246, 239, 225, 0.6); }

.h-xl { font-size: clamp(2.4rem, 6.4vw, 5.4rem); }
.h-lg { font-size: clamp(1.9rem, 4.4vw, 3.6rem); }
.h-md { font-size: clamp(1.4rem, 2.4vw, 2rem); }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}

.muted { color: var(--ink-mute); }

/* Boutons */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.9rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  transition: color 0.4s var(--ease-out);
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
}

/* Sur le bandeau corail, le corail se noierait dans le fond : le bouton s'y
   remplit de bleu. Et l'inverse sur le bandeau bleu. */
.cta-band .btn::after { background: var(--blue); }
.cta-band--bleu .btn::after { background: var(--orange); }
.btn:hover::after, .btn:focus-visible::after { transform: none; }
.btn:hover { color: #fff; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { color: #fff; }

.btn--light { --btn-bg: var(--cream); --btn-fg: var(--ink); }

.btn__arrow {
  transition: transform 0.45s var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Bouton inactif (formulaire incomplet) : estompé, sans effet de survol. */
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn:disabled:hover { color: var(--btn-fg); }
.btn:disabled::after { transform: translateY(101%); transition: none; }
.btn:disabled:hover .btn__arrow { transform: none; }

/* Lien souligné animé */

.link-u {
  position: relative;
  display: inline-block;
  font-weight: 500;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.4s var(--ease-out);
}
.link-u:hover::after { transform-origin: left; transform: scaleX(0); }

/* Logo */

.logo-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  user-select: none;
}

.logo-mark--image img {
  width: auto;
  height: 1em;
  object-fit: contain;
}

.logo-word {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-logo);
  color: var(--blue);
  font-size: 1em;
  letter-spacing: -0.045em;
}

.logo-letter {
  display: inline-block;
  transform: rotate(var(--r)) translateY(var(--y)) scale(var(--s));
  transform-origin: center bottom;
}

.logo-word { line-height: 1; }

.logo-sub {
  font-family: var(--font-display);
  color: var(--orange);
  font-size: 0.185em;
  line-height: 1;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  margin-top: 0.16em;
}

.logo-mark--nav { font-size: 1.9rem; }

/* Un logo en image peut être carré ou rond : on lui laisse la hauteur de la
   barre plutôt que celle d'une ligne de texte, sinon il devient illisible. */
.logo-mark--nav.logo-mark--image img { height: 3.2rem; }

.logo-mark--foot { font-size: clamp(3rem, 9vw, 7rem); }
.logo-mark--foot.logo-mark--image img { height: clamp(5rem, 12vw, 8.5rem); }

/* En-tête */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  transition: background-color 0.45s var(--ease-out), backdrop-filter 0.45s;
}

.site-head__inner {
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-head__brand { margin-right: auto; display: block; }

.site-head.is-stuck {
  background: rgba(246, 239, 225, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.site-head--light .site-nav a,
.site-head--light .burger { color: var(--cream); }
.site-head--light .logo-word { color: #fff; }

/* Sur l'accueil, la barre flotte au-dessus des vidéos : le logo y passe en
   blanc, puis retrouve ses couleurs quand le fond crème arrive. Le filtre
   décolore n'importe quelle image, quels que soient ses aplats. */
.logo-mark--image img { transition: filter 0.45s var(--ease-out); }
.site-head--light .logo-mark--image img { filter: brightness(0) invert(1); }
.site-head--light.is-stuck .logo-mark--image img { filter: none; }
.site-head--light .logo-sub { color: rgba(255, 255, 255, 0.85); }
.site-head--light .site-head__cta { --btn-bg: var(--cream); --btn-fg: var(--ink); }

.site-head--light.is-stuck .site-nav a,
.site-head--light.is-stuck .burger { color: var(--ink); }
.site-head--light.is-stuck .logo-word { color: var(--blue); }
.site-head--light.is-stuck .logo-sub { color: var(--orange); }
.site-head--light.is-stuck .site-head__cta { --btn-bg: var(--ink); --btn-fg: var(--cream); }

.site-nav ul { display: flex; gap: clamp(1rem, 2.2vw, 2.4rem); }

.nav-link {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: block;
  overflow: hidden;
  height: 1.5em;
  line-height: 1.5em;
}

.nav-link__text {
  display: block;
  position: relative;
  transition: transform 0.5s var(--ease-out);
}
.nav-link__text::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 100%;
  line-height: inherit;
}
.nav-link:hover .nav-link__text { transform: translateY(-100%); }
.nav-link.is-current .nav-link__text { text-decoration: underline; text-underline-offset: 0.35em; }

.site-head__cta { padding: 0.75rem 1.4rem; }

.burger {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink);
}
.burger__box { display: block; width: 26px; }
.burger__box i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), opacity 0.3s;
}
.burger__box i + i { margin-top: 6px; }
.burger[aria-expanded='true'] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] i:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Menu ouvert : la croix passe sur le fond noir du menu, elle doit donc
   être claire quel que soit le thème de l'en-tête. */
.site-head .burger[aria-expanded='true'] { color: var(--cream); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  padding: var(--head-h) var(--gutter) 3rem;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: grid; gap: 0.4rem; }
/* État de départ de l'apparition, commun à tous les liens du menu. */
.mobile-menu a {
  display: block;
  opacity: 0;
  transform: translateY(0.4em);
}
.mobile-menu nav a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: 1.1;
}
/* Coordonnées : texte courant, en corail (5,5:1 sur le noir), jamais coupées. */
.mobile-menu__foot {
  display: grid;
  gap: 0.6rem;
}
.mobile-menu__foot a {
  color: var(--orange);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* ------------------------------------------ 4. Accueil : séquence vidéo */

.stage-wrap {
  position: relative;
  height: 100svh;
  background: var(--cream);
}

.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cream);
}

/* Les panneaux sont écrits en CSS à leur place FINALE, pour être mesurés au
   chargement. Sans ce masque, on les verrait déjà empilés le temps que le
   script les renvoie à leur position de départ. « visibility » plutôt que
   « display » : la géométrie reste mesurable. */
.js [data-stage]:not(.is-ready) .stage { visibility: hidden; }

/* Les panneaux sont écrits en CSS à leur position FINALE (mosaïque).
   Le JS anime depuis leur position d'entrée : les mesures faites au
   chargement correspondent donc déjà à l'état d'arrivée. */
.panel {
  position: absolute;
  overflow: hidden;
  background: #111;
  will-change: transform, width, height;
  backface-visibility: hidden;
}

.panel--1 { left: 0;   top: 0;   width: 35%; height: 38%; }
.panel--2 { left: 35%; top: 0;   width: 65%; height: 52%; }
.panel--3 { left: 0;   top: 38%; width: 58%; height: 62%; }
.panel--4 { left: 54%; top: 52%; width: 46%; height: 48%; background: var(--cream); }

.panel__media { position: absolute; inset: 0; }

/* Les deux dernières vidéos sont désaturées : la première garde ses couleurs,
   ce qui creuse la différence entre le plein écran et la mosaïque. */
.panel--2 .panel__media,
.panel--3 .panel__media { filter: grayscale(1); }
.panel__media video,
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0.28) 45%, rgba(10, 10, 10, 0.5));
  pointer-events: none;
}

/* Le signe du bandeau, repris une fois sur chaque vidéo : deux corail, un
   bleu, posés en diagonale pour ne croiser ni le grand mot ni la barre de
   navigation, quel que soit le format de la case. */
.panel__mark {
  position: absolute;
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 2.8vw, 3rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Le bleu va sur la vidéo la plus claire : sur les deux autres, plus sombres,
   il disparaîtrait — alors que le corail y reste lumineux. */
.panel--1 .panel__mark { left: 8%;  bottom: 11%; color: var(--orange); }
.panel--2 .panel__mark { right: 7%; bottom: 13%; color: var(--blue); }
.panel--3 .panel__mark { right: 8%; top: 13%;    color: var(--orange); }

.panel__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
}

.panel__word {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(1.4rem, 4vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

.panel__caption {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 239, 225, 0.78);
  margin-top: 1rem;
  text-shadow: none;
}

/* Tuile logo de la mosaïque */
.panel--4 .panel__label { padding: 8%; }
.logo-slot { display: block; }
.logo-mark--hero { font-size: clamp(3rem, 8vw, 7.5rem); }

/* Sur grand écran la case reste vide : le texte du logo est posé par-dessus,
   déjà à sa place définitive. Sur petit écran, la mise en page finale est
   empilée ailleurs, la case porte donc le logo complet. */
.logo-slot--tile { display: none; }
@media (max-width: 860px) {
  .logo-slot--tile { display: grid; place-items: center; width: 100%; height: 100%; }
}

/* Invite à faire défiler */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
}
.scroll-hint__line {
  width: 1px;
  height: 3rem;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}
.scroll-hint__line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  animation: scrollTrail 2.1s var(--ease-io) infinite;
}
@keyframes scrollTrail {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Panneau final : la phrase + la signature qui récupère le logo */

.stage__statement {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--head-h) + 2rem) var(--gutter) 3rem;
  pointer-events: none;

  /* Point sur lequel le texte du logo est posé, et sur lequel la phrase
     s'aligne. Le texte rejoignant la couronne en se rétrécissant, ce point
     n'est plus retenu par la mosaïque : il est calé pour centrer l'ensemble
     dans la page, sous la barre de navigation. */
  --anchor-x: 78%;
  --anchor-y: 57%;
}

/* La phrase se lit à gauche, le logo se reconstitue à droite. */
.statement-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--anchor-y);
  transform: translateY(-50%);
  padding-inline: var(--gutter);
}

.statement-col { max-width: min(60%, 50rem); }

/* --anchor-x / --anchor-y reprennent le centre de .panel--4 : 58 % + 42 %/2
   et 52 % + 48 %/2, décalé d'un cheveu vers le haut pour laisser respirer la
   couronne. C'est ce point qui garantit que le texte du logo occupe déjà sa
   place définitive pendant la mosaïque, et n'a donc pas à se déplacer.
   --wx / --wy sont la position du texte dans la couronne, en fraction. */
.brand-build {
  --ring: min(30rem, 50vh, 38vw);

  position: absolute;
  z-index: 2;
  width: var(--ring);
  height: var(--ring);
  left: calc(var(--anchor-x) - var(--wx, 0.5) * var(--ring));
  top: calc(var(--anchor-y) - var(--wy, 0.55) * var(--ring));
  container-type: inline-size;
}

/* Les morceaux sont empilés et couvrent chacun toute la couronne : leur
   centre de transformation est donc celui du logo, et un simple changement
   d'échelle les fait converger vers le milieu, chacun depuis sa place. */
.logo-ring {
  position: absolute;
  inset: 0;
  display: block;
}

.logo-ring__part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
}

/* Emplacement réservé au texte, réglable depuis le back-office. */
.brand-slot {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 62%);
  transform: translate(-50%, -50%);
  display: block;
}

.brand-word { display: block; }
[data-logo-word] { opacity: 0; }
body.no-motion [data-logo-word] { opacity: 1; }

.brand-word .logo-mark { font-size: 17cqw; }
.brand-word .logo-mark--image { display: block; }
.brand-word .logo-mark--image img { width: 100%; height: auto; }

.statement-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 3vh, 2.2rem);
}

.statement {
  font-size: clamp(1.7rem, 3.4vw, 3.3rem);
  line-height: 1.04;
}
/* Chaque phrase équilibre ses lignes plutôt que de laisser un mot seul. */
.statement__lead,
.statement__emph { display: block; text-wrap: balance; }
.statement__lead { color: var(--ink); }
.statement__emph { color: var(--blue); }

.statement-sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.signature__word { display: inline-block; opacity: 0; }
/* ------------------------------------------ 5. Accueil : suite de la page */

.intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.stat {
  background: var(--cream);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}
.section--paper .stat { background: var(--paper); }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
  max-width: 22ch;
}

.steps { counter-reset: step; display: grid; gap: 0; margin-top: 3rem; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5rem 1fr 1.2fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.6rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
  content: '0' counter(step);
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--orange);
  letter-spacing: 0.05em;
}
.step h3 { font-size: clamp(1.2rem, 2.2vw, 1.75rem); }
.step p { color: var(--ink-mute); margin: 0; }

.marquee {
  overflow: hidden;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
  background: var(--cream);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 3rem;
  will-change: transform;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 3rem;
  white-space: nowrap;
}
.marquee__item span:last-child { color: var(--orange); font-size: 0.5em; }

.cta-band {
  background: var(--orange);
  color: var(--cream);
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
}
.cta-band h2 { font-size: clamp(2rem, 6vw, 5rem); margin-bottom: 1.2rem; }
/* Sur le corail, le crème garde tout juste le contraste d'un grand titre :
   la ligne de dessous reste donc à pleine opacité, contrairement au gris
   qu'elle avait sur fond noir. */
.cta-band p {
  color: var(--cream);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  margin-bottom: 2.5rem;
}

/* Le second appel, en bas de l'accueil, reprend le bleu de la charte. */
.cta-band--bleu { background: var(--blue); }

/* ---------------------------------------------------------- 6. Services */

.page-head {
  padding-top: calc(var(--head-h) + clamp(3rem, 9vw, 7rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.page-head h1 { font-size: clamp(2.6rem, 8vw, 7rem); margin-bottom: 1.5rem; }

.service-list { display: grid; gap: 0; }

.service {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  align-items: start;
}
.service:last-child { border-bottom: 1px solid var(--line); }

.service__head { display: grid; gap: 0.9rem; }
.service__name { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.service__meta {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.service__price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--blue);
  letter-spacing: -0.02em;
}
.service__body p { color: var(--ink-soft); }
.service__features { display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.service__features li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--ink-mute);
}
.service__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  background: var(--orange);
  border-radius: 50%;
}
.service__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* Même rayon que les cartes « Toujours compris », plus bas sur la page. */
  border-radius: 1.25rem;
  background: var(--cream-deep);
}
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service__media--empty {
  display: grid;
  place-items: center;
  color: rgba(12, 12, 12, 0.18);
  font-family: var(--font-display);
  font-size: 2.5rem;
}

/* Cartes arrondies et détachées. La grille à filets d'un pixel obligeait les
   cases à se toucher : celles qui restaient vides en fin de rangée laissaient
   voir le fond gris, comme un tableau inachevé. */
.included {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.9rem;
  margin-top: 3rem;
}

.included li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.45;
  transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.included li:hover {
  border-color: var(--line);
  transform: translateY(-3px);
}

/* Le signe de la charte, déjà présent sur les vidéos et dans le carrousel. */
.included li::before {
  content: '✻';
  flex: none;
  color: var(--orange);
  font-size: 1.2em;
  line-height: 1.2;
}

/* --------------------------------------------------- 7. Qui sommes-nous */

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--cream-deep);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--empty { display: grid; place-items: center; }
.portrait__caption {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.about-text p {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}

/* Section de contenu posée juste sous un en-tête de page (réservation,
   mentions légales) : un vrai souffle, sans la pleine marge d'une section. */
.section--apres-titre { padding-top: clamp(3rem, 7vw, 6rem); }

/* Mentions légales : colonne de lecture calée à gauche, sur la même verticale
   que le titre de la page — d'où la largeur posée ici et non sur .wrap, qui
   centrerait le bloc. */

.legal { max-width: 52rem; }

.legal__block + .legal__block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.legal__block h2 { margin-bottom: 1rem; }

.legal p {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink-soft);
  margin-bottom: 1.4em;
}
.legal p:last-child { margin-bottom: 0; }
.legal p.muted { color: var(--ink-mute); }

.values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.value { background: var(--cream); padding: clamp(1.6rem, 3vw, 2.4rem); }
.section--paper .value { background: var(--paper); }
.value h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.value p { color: var(--ink-mute); font-size: 0.95rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.gallery figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 1.25rem; background: var(--cream-deep); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.05); }

/* ------------------------------------------------------- 8. Réservation */

.booking-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.form { display: grid; gap: 1.6rem; }

/* Marge remise à zéro : les champs sont des <p>, et la marge basse du premier
   étirait la colonne voisine — libellé et case s'y retrouvaient décalés.
   align-content: start empêche aussi la grille de répartir un reste de hauteur. */
.field { display: grid; gap: 0.5rem; margin: 0; align-content: start; }
/* Le libellé d'un groupe de choix (Son gabarit) n'est pas un <label> :
   il prend la même classe pour avoir la même allure. */
.field > label,
.field__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.field .req,
.consent .req,
.form-note .req { color: var(--orange); }

.field input,
.field select,
.field textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.3s, box-shadow 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 55%, calc(100% - 1.05rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
/* Même hauteur pour tous les champs d'une ligne : le sélecteur de date de
   Chrome dépasse sinon de deux pixels. */
.field input:not([type="radio"]):not([type="checkbox"]),
.field select { height: 3.75rem; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 51, 201, 0.12);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--orange); }

.field__error {
  font-size: 0.8rem;
  color: var(--orange);
  min-height: 1.1em;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.6rem;
}
.form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40rem) {
  .form-row--3 { grid-template-columns: 1fr; }
}

.consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ink-mute);
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.6rem;
}
.choice {
  position: relative;
  display: block;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.choice span {
  display: block;
  padding: 0.8rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.choice input:checked + span {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.form-aside {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: sticky;
  top: calc(var(--head-h) + 1.5rem);
}
.form-aside h2 { font-size: 1.3rem; margin-bottom: 1.4rem; }
.form-aside ol { counter-reset: s; display: grid; gap: 1rem; padding: 0; list-style: none; }
.form-aside li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.form-aside li::before {
  content: counter(s);
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
}
.form-aside__contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.alert {
  padding: 1.2rem 1.4rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}
.alert--ok { background: rgba(27, 51, 201, 0.08); border: 1px solid rgba(27, 51, 201, 0.3); }
.alert--ko { background: rgba(241, 70, 30, 0.08); border: 1px solid rgba(241, 70, 30, 0.35); }

.form-note { font-size: 0.82rem; color: var(--ink-mute); }

.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ 9. Pied de page */

.site-foot {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  overflow: hidden;
}
.site-foot__top {
  max-width: 96rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Les deux blocs se suivent à gauche, centrés l'un sur l'autre : la grille
     poussait les coordonnées contre le bord droit. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}


/* Toutes les coordonnées sur une seule ligne, chacune précédée de son icône. */
.foot-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.92rem;
}
.foot-contact li { margin: 0; }
.foot-contact a,
.foot-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.foot-contact a:hover { color: var(--orange); }

.foot-contact svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Les coordonnées sur une ligne, l'invitation à suivre juste en dessous. */
.foot-joindre {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

.foot-insta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.foot-insta:hover { color: var(--orange); }
.foot-insta svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-foot__bar {
  max-width: 96rem;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 1.5rem var(--gutter) 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-mute);
}
.site-foot__bar p { margin: 0; }

/* ------------------------------------------------------- Révélations JS */

/* Masqué uniquement si JavaScript est disponible pour le révéler.
   On utilise la propriete « translate », et non « transform » : GSAP la remet
   a « none » dans son style en ligne, alors qu un transform ecrit en CSS
   resterait applique en plus du sien — les mots ne redescendraient jamais. */
.js [data-reveal] { opacity: 0; }
.js [data-split] .word-in { translate: 0 145%; }

.line-mask { display: block; overflow: hidden; }

/* La marge negative compense le debord ajoute : le masque laisse passer
   jambages et accents sans decaler la mise en page. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.16em 0.04em 0.3em;
  margin: -0.16em -0.04em -0.3em;
}
.word-in { display: inline-block; will-change: transform; }

/* Repli sans animation — et sans JavaScript du tout : la mosaïque et la
   phrase redeviennent des sections empilées, entièrement lisibles. */
body.no-motion .stage-wrap,
html:not(.js) .stage-wrap { height: auto; }

body.no-motion .stage,
html:not(.js) .stage { position: relative; height: 100svh; }

body.no-motion .stage__statement,
html:not(.js) .stage__statement {
  position: relative;
  inset: auto;
  min-height: 70svh;
  padding-block: clamp(4rem, 10vw, 8rem);
}

html:not(.js) [data-logo-word] { opacity: 1; }

/* Le logo revient dans le flux : sans séquence, l'ancrage sur la mosaïque
   n'a plus de sens. */
body.no-motion .brand-build,
html:not(.js) .brand-build {
  position: relative;
  left: auto;
  top: auto;
  width: min(20rem, 55vw);
  height: min(20rem, 55vw);
}

body.no-motion .statement-inner,
html:not(.js) .statement-inner {
  position: static;
  transform: none;
  padding-inline: 0;
}

body.no-motion .statement-col,
html:not(.js) .statement-col { max-width: none; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
  .intro-grid,
  .about-grid,
  .booking-grid { grid-template-columns: 1fr; }

  .service { grid-template-columns: 1fr 1fr; }
  .service__media { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; }

  .form-aside { position: static; }
}

@media (max-width: 860px) {
  :root { --head-h: 4.25rem; }

  .site-nav,
  .site-head__cta { display: none; }
  .burger { display: block; }

  .stats { grid-template-columns: 1fr; }
  .step { grid-template-columns: 3rem 1fr; }
  .step p { grid-column: 2; }

  .service { grid-template-columns: 1fr; }

  .site-foot__top { flex-direction: column; align-items: start; }

  /* Mosaïque empilée : les positions finales deviennent des bandes */
  .panel--1 { left: 0; top: 0;   width: 100%; height: 26%; }
  .panel--2 { left: 0; top: 26%; width: 100%; height: 26%; }
  .panel--3 { left: 0; top: 52%; width: 100%; height: 26%; }
  .panel--4 { left: 0; top: 78%; width: 100%; height: 22%; }

  .panel__caption { display: none; }
  .logo-mark--hero { font-size: clamp(2.2rem, 12vw, 4rem); }

  /* Trop étroit pour un ancrage : le logo et la phrase reprennent leur place
     dans le flux, l'un au-dessus de l'autre. Le bloc du logo reste
     « relative » : l'emplacement du texte se mesure sur lui, pas sur la
     scène entière. */
  .stage__statement { gap: clamp(1.5rem, 5vh, 2.5rem); }
  .brand-build {
    position: relative;
    left: auto;
    top: auto;
    width: min(12rem, 45vw);
    height: min(12rem, 45vw);
  }
  .statement-inner {
    position: static;
    transform: none;
    padding-inline: 0;
  }
  .statement-col { max-width: none; }
  .statement { max-width: none; font-size: clamp(1.7rem, 8vw, 2.6rem); }
}

@media (max-width: 520px) {
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------- Préférence : moins d'animation */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .stage__statement { opacity: 1; }
}