/* Members Club — refonte.
   Structure et rythme repris du design "Members Club design refinement".
   Couleurs et polices reprises du site existant, jamais celles du design :
   voir la table de correspondance dans README.md. */

/* ------------------------------------------------------------------ polices */
/* Vina Sans, sous-decoupee par plage Unicode comme sur le site. */
@font-face {
  font-family: 'Vina Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/vina-sans-m8JQjfZKf6-d2273MP7DeJRARGmK3eud.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Vina Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/vina-sans-m8JQjfZKf6-d2273MP7DeZRARGmK3eud.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: 'Vina Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/vina-sans-m8JQjfZKf6-d2273MP7Dd5RARGmK3Q.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;
}
/* Geist et Geist Mono sont des variables. Le site les declare sans plage de
   graisses, ce qui force le navigateur a synthetiser le gras ; la plage est
   declaree ici pour que l'axe wght serve reellement. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/Geist-VariableFont_wght.ttf) format('truetype-variations');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/GeistMono-VariableFont_wght.ttf) format('truetype-variations');
}

/* ------------------------------------------------------------------- tokens */
:root {
  /* Palette du site (variables globales Elementor). Les commentaires donnent la
     couleur du design a laquelle chacune se substitue. */
  --ink: #1E1E19;      /* fond sombre            <- design #15100E */
  --cream: #FAF5EB;    /* texte et fond clair    <- design #F4EEE2 et #F7F2E8 */
  --brown: #503223;    /* brun de marque         <- design #58332A */
  --tan: #BEAFA0;      /* accent et survol       <- design #C89272 et #A08674 */
  --sand: #DCD2C6;     /* bandeau intermediaire  <- design #E7DFD0
                          seule couleur absente du site : melange 50/50 de
                          --tan et --cream, donc derivee de la palette. */
  --olive: #969B64;    /* palette du site, tenue en reserve */

  --ink-rgb: 30 30 25;
  --cream-rgb: 250 245 235;

  --display: 'Vina Sans', Impact, 'Arial Narrow', sans-serif;  /* <- Anton */
  --sans: 'Geist', system-ui, -apple-system, sans-serif;       /* <- Archivo */
  --mono: 'Geist Mono', ui-monospace, monospace;               /* <- Martian Mono */

  /* Facteur d'echelle typographique. `--s` represente un pixel du design :
     il vaut 1px sous 320 px de large et croit ensuite sans plafond utile
     (la borne de 2,4px n'est atteinte qu'a 8273 px). Chaque
     taille s'ecrit `calc(N * var(--s))`, donc le rapport entre les niveaux
     reste celui du design, mais l'ensemble grandit avec l'ecran. Sans cela le
     corps restait a 13,5 px sur un ecran de 1970 px. */
  --s: clamp(1px, 0.0176vw + 0.944px, 2.4px);

  /* Conteneur proportionnel a la fenetre, sans plafond en pixels. Un plafond,
     quel qu'il soit, revide les bords des qu'on dezoome : a 4300 px de
     viewport, une borne a 2400 px laissait 948 px de vide de chaque cote. Les
     longueurs de ligne restent tenues par les maximums en `ch`, qui suivent la
     taille du texte, donc elargir ne les allonge pas. */
  --wrap: 94vw;
  /* Gouttiere fluide. A 32 px fixes, les bords etouffaient sur grand ecran et
     serraient trop sur telephone. */
  --pad: clamp(20px, 3.4vw, calc(84 * var(--s)));
  /* Ecart vertical entre colonnes, resserre avec la largeur. */
  --gap: clamp(32px, 4vw, calc(84 * var(--s)));
}

/* --------------------------------------------------------------------- base */
* { box-sizing: border-box; }

/* `hidden` doit gagner : sans cela un `display` pose plus loin le neutralise,
   et les quatre volets de disciplines s'empilent tous a l'ecran. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--brown); color: var(--cream); }

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

/* Vina Sans porte plus haut qu'Anton : le pas d'interligne du design
   ecraserait les capitales accentuees. Compense par un cran d'interligne
   et un leger resserrement optique. */
.d {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.02;
  margin: 0;
}

.m {
  font-family: var(--mono);
  text-transform: uppercase;
  /* Geist Mono est plus etroit que Martian Mono : interlettrage rendu de
     quelques centiemes pour retrouver la meme largeur de bloc. */
  letter-spacing: .2em;
  font-weight: 400;
}

.wrap { max-width: var(--wrap); margin: 0 auto; }

section { padding-left: var(--pad); padding-right: var(--pad); }

/* --------------------------------------------------------- teintes derivees */
.on-light { background: var(--cream); color: var(--ink); }
.on-sand  { background: var(--sand);  color: var(--ink); }
.on-brown { background: var(--brown); color: var(--cream); }

.dim   { color: rgb(var(--cream-rgb) / .62); }
.dimmer{ color: rgb(var(--cream-rgb) / .45); }
.on-light .dim, .on-sand .dim    { color: rgb(var(--ink-rgb) / .68); }
.on-light .dimmer, .on-sand .dimmer { color: rgb(var(--ink-rgb) / .5); }

.rule { height: 1px; background: rgb(var(--cream-rgb) / .16); border: 0; }
.on-light .rule, .on-sand .rule { background: rgb(var(--ink-rgb) / .18); }

/* ------------------------------------------------------------------- entete */
/* La barre est pleine largeur, mais son contenu partage le conteneur des
   sections. Sans cela, sur un ecran large les liens collent aux bords tandis
   que le titre du heros commence a 480 px de la : deux alignements pour une
   meme page. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px var(--pad);
  border-bottom: 1px solid transparent;
  transition: background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; gap: clamp(12px, 2vw, calc(32 * var(--s)));
}
.nav.stuck {
  background: rgb(var(--ink-rgb) / .82);
  backdrop-filter: blur(14px);
  border-bottom-color: rgb(var(--cream-rgb) / .1);
  padding: 12px var(--pad);
}
.nav ul {
  display: flex; align-items: center;
  gap: clamp(14px, 1.8vw, calc(34 * var(--s)));
  margin: 0; padding: 0; list-style: none;
  font-size: clamp(8.5px, .7vw, calc(13 * var(--s)));
  letter-spacing: clamp(.12em, .9vw, .22em);
}
.nav-r ul { justify-content: flex-end; }
.nav a:hover { color: var(--tan); }
.nav a[aria-current] { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.brand { display: block; text-align: center; line-height: 1; }
.brand img { height: clamp(24px, 2.4vw, calc(45 * var(--s))); width: auto; margin: 0 auto; }

/* ------------------------------------------------------- menu deroulant */
/* Cache au-dessus de 1080 px, ou les deux menus de la barre suffisent. */
.burger {
  display: none; grid-column: 3; justify-self: end;
  width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid rgb(var(--cream-rgb) / .28);
  border-radius: 999px; cursor: pointer;
  align-items: center; justify-content: center; gap: 5px;
  flex-direction: column;
}
.burger span {
  display: block; width: 16px; height: 1px; background: var(--cream);
  transition: transform .3s, opacity .3s;
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.panneau {
  max-width: var(--wrap); margin: 0 auto;
  padding: 26px 0 8px;
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.panneau ul {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 0; list-style: none;
  /* `.nav ul` pose `align-items: center` pour la barre horizontale. En colonne
     cet axe devient l'horizontale, et les libelles se retrouvaient centres
     alors que tout le reste de la page part de la gouttiere gauche. */
  align-items: stretch;
}
.panneau a {
  display: block; padding: 9px 0;
  font-family: var(--mono); font-size: calc(11 * var(--s)); letter-spacing: .18em;
  text-transform: uppercase;
}
.panneau a:hover { color: var(--tan); }
.panneau a[aria-current] { color: var(--tan); }
/* Ouverte, la barre doit etre opaque : le panneau se lit par-dessus la page. */
.nav.ouvert {
  background: var(--ink);
  border-bottom-color: rgb(var(--cream-rgb) / .12);
  max-height: 100vh; overflow-y: auto;
}

/* -------------------------------------------------------------------- liens */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--mono); font-size: calc(10 * var(--s)); letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-solid { background: var(--cream); color: var(--ink); }
.btn-solid:hover { background: var(--tan); color: var(--ink); }
.btn-brown { background: var(--brown); color: var(--cream); }
.btn-brown:hover { background: var(--ink); }
.btn-ghost { border-color: rgb(var(--cream-rgb) / .3); color: var(--cream); }
.btn-ghost:hover { background: rgb(var(--cream-rgb) / .08); border-color: var(--cream); }
.on-light .btn-ghost, .on-sand .btn-ghost { border-color: rgb(var(--ink-rgb) / .3); color: var(--ink); }
.on-light .btn-ghost:hover, .on-sand .btn-ghost:hover { background: var(--ink); color: var(--cream); }

.round {
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgb(var(--cream-rgb) / .25);
  background: transparent; color: var(--cream);
  cursor: pointer; font-size: calc(15 * var(--s)); line-height: 1;
  transition: background .3s;
}
.round:hover { background: rgb(var(--cream-rgb) / .1); }
.on-sand .round { border-color: rgb(var(--ink-rgb) / .25); color: var(--ink); }
.on-sand .round:hover { background: rgb(var(--ink-rgb) / .08); }

/* --------------------------------------------------------------------- hero */
/* La gouttiere vient de `.hero-in`, pas de la regle `section` : sans cette
   remise a zero les deux s'additionnent et le titre part 64 px plus a droite
   que la barre de navigation. */
.hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: 100vh;
  padding-left: 0; padding-right: 0; }
.hero.short { min-height: 82vh; }
/* BANNIERE FLOTTANTE, reprise de la page d'ouverture.
   La photo deborde de son cadre de quelques pour cent : sans ce debord, le
   deplacement au pointeur decouvrirait le fond sur un bord. La transition est
   longue et tres amortie, pour que l'image SUIVE le curseur au lieu de le
   coller : coller donnerait un effet de souris, suivre donne un effet de
   profondeur. Le halo, lui, est la source de lumiere qui se deplace avec le
   regard. */
.hero-bg { position: absolute; inset: -5% -4%; will-change: transform;
  transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-halo { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(420px at 50% 45%, rgb(190 175 160 / .14), transparent 70%);
  animation: heroRespire 8s ease-in-out infinite; }
@keyframes heroRespire {
  0%, 100% { opacity: .3; transform: scale(1); }
  50% { opacity: .65; transform: scale(1.06); }
}
/* Le mouvement est un ornement : qui le refuse garde la banniere entiere. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { inset: 0; transition: none; transform: none !important; }
  .hero-halo { animation: none; }
}
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgb(var(--ink-rgb) / .88) 0%, rgb(var(--ink-rgb) / .3) 36%,
    rgb(var(--ink-rgb) / .5) 62%, rgb(var(--ink-rgb) / .95) 100%);
}
/* Le plafond porte sur la boite de contenu, gouttiere comprise : sinon la
   gouttiere se retranche a l'interieur des 1600 px et le bloc se retrouve
   rentre de 64 px par rapport a l'entete, dont le plafond est pose sur un
   enfant. Ecart mesure a 65 px au-dela de 1680 px. */
.hero-in {
  position: relative; width: 100%; margin: 0 auto;
  max-width: calc(var(--wrap) + 2 * var(--pad));
  padding: clamp(104px, 9vw, calc(172 * var(--s))) var(--pad) clamp(48px, 5vw, calc(103 * var(--s)));
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.8fr);
  gap: var(--gap); align-items: end;
}
.hero h1 { font-size: clamp(44px, 7vw, calc(158 * var(--s))); line-height: .96; }
/* Le contour du design : Vina Sans etant plus fin, le trait est epaissi
   d'un dixieme pour rester lisible a grande taille. */
/* Epaisseur proportionnee : a 1,7 px fixe, le trait bouchait les
   contreformes de Vina Sans sous 500 px de large. */
.outline { color: transparent; -webkit-text-stroke: clamp(1px, .13vw, calc(2 * var(--s))) rgb(var(--cream-rgb) / .5); }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; text-align: right; }
.scroll-cue {
  position: absolute; left: var(--pad); bottom: 26px;
  font-size: calc(8.5 * var(--s)); letter-spacing: .3em;
  color: rgb(var(--cream-rgb) / .4);
  animation: bob 2.8s ease-in-out infinite;
}

/* --------------------------------------------------------------- page-titre */
.page-head { padding: 150px var(--pad) 60px; }
.page-head h1 { font-size: clamp(36px, 5.6vw, calc(127 * var(--s))); line-height: 1; }
.eyebrow { font-size: calc(9.5 * var(--s)); letter-spacing: .26em; margin-bottom: 18px; }

/* ------------------------------------------------------------------ titres */
.h2 { font-size: clamp(30px, 4.6vw, calc(92 * var(--s))); line-height: 1.02; }
.h3 {
  font-family: var(--sans); font-weight: 800; text-transform: uppercase;
  font-size: clamp(17px, 1.5vw, calc(32 * var(--s))); line-height: 1.25; margin: 0 0 18px;
}
.monogram {
  font-family: var(--display); font-size: calc(46 * var(--s)); line-height: .9;
  border-top: 4px solid var(--brown); padding-top: 6px;
  color: var(--brown); flex: 0 0 auto;
}
.monogram.light { border-top-color: var(--cream); color: var(--cream); }

p { margin: 0; }
.lede { font-size: calc(14.5 * var(--s)); line-height: 1.85; max-width: 62ch; }
.body { font-size: calc(13.5 * var(--s)); line-height: 1.85; max-width: 56ch; }
.small { font-size: calc(12.5 * var(--s)); line-height: 1.8; }

/* ---------------------------------------------------------------- bandeaux */
.band { padding: 40px var(--pad); }
.band .wrap { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr) auto; gap: 48px; align-items: center; }
.statement { padding: 34px var(--pad); }
.statement .wrap {
  font-weight: 700; text-transform: uppercase; text-align: center;
  max-width: 74ch; margin-left: auto; margin-right: auto;
  font-size: clamp(13px, 1.35vw, calc(26 * var(--s))); letter-spacing: .01em;
}

/* --------------------------------------------------------------- defilement */
.marquee { overflow: hidden; padding: 12px 0; }
.marquee > div {
  display: flex; width: max-content;
  animation: mq var(--mq, 40s) linear infinite;
  white-space: nowrap;
}
.marquee span { padding-right: 30px; }
.marquee.mono > div { font-family: var(--mono); font-size: calc(10 * var(--s)); letter-spacing: .26em; text-transform: uppercase; }
.marquee.big {
  background: var(--cream); color: var(--ink);
  border-top: 1px solid rgb(var(--cream-rgb) / .12);
  border-bottom: 1px solid rgb(var(--cream-rgb) / .12);
  padding: 16px 0;
}
.marquee.big > div { font-family: var(--display); font-size: calc(30 * var(--s)); letter-spacing: .01em; text-transform: uppercase; }
.marquee.big span { padding-right: 40px; }

/* ------------------------------------------------------------------ grilles */
.pad-lg { padding-top: 96px; padding-bottom: 110px; }
.pad-md { padding-top: 88px; padding-bottom: 96px; }
.pad-sm { padding-top: 76px; padding-bottom: 84px; }

.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.head-row.end { align-items: flex-end; }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: var(--gap); align-items: start; }
.split.even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* IMAGE A LA HAUTEUR DU TEXTE, et voici le defaut que ca repare.
   Le conteneur fait 94vw sans maximum, donc il grandit sans fin avec l'ecran,
   ou quand on dezoome. Une image en ratio fixe voit alors sa HAUTEUR grandir
   dans la meme proportion, alors que le texte d'a cote, lui, se reflue et
   gagne a peine quelques lignes. Mesure sur l'accueil : a 1280 px les deux
   colonnes s'arretaient a 8 px pres, a 3200 px l'image faisait 1660 px de haut
   contre 987 au texte, soit 673 px de vide a droite.
   `stretch` fait suivre l'image, et `object-fit: cover` decide du recadrage.
   Le ratio reste la valeur de depart : il ne s'applique plus que lorsque la
   colonne de texte est plus courte que lui. */
/* UNIQUEMENT QUAND IL Y A DEUX COLONNES.
   Sous 1024 px, `.split` passe sur une seule colonne : il n'y a plus de texte a
   cote dont egaler la hauteur, et le plancher ci-dessous ecrasait l'image a
   300 px de haut au lieu de son format portrait. La regle est donc bornee au
   meme seuil que le passage a une colonne, plus bas dans ce fichier. */
@media (min-width: 1025px) {
.split.egal { align-items: stretch; }
/* L'IMAGE NE DOIT PLUS COMMANDER LA HAUTEUR DE LA RANGEE.
   `stretch` seul ne suffit pas : la hauteur de rangee reste celle du plus haut
   des deux, donc celle de l'image, et le texte se contentait d'etre etire a
   cote du meme vide. En sortant l'image du flux, sa colonne ne pese plus que
   son `min-height` : c'est le TEXTE qui fixe la hauteur, et l'image la remplit. */
.split.egal > .media { position: relative; min-height: clamp(300px, 32vw, 560px); }
/* `aspect-ratio: auto` est indispensable et facile a oublier : sur une boite
   absolue avec `top` et `bottom` a zero mais `height: auto`, un ratio declare
   l'emporte sur les decalages et la boite garde sa hauteur de ratio. Mesure :
   996 px de haut dans un parent de 762. */
.split.egal > .media > .shot { position: absolute; inset: 0; height: auto; aspect-ratio: auto; }
}
.stack { display: flex; flex-direction: column; gap: clamp(28px, 3vw, calc(58 * var(--s))); }
/* Trois colonnes du studio : la premiere sert de legende, plus etroite. */
.split-3 {
  display: grid; grid-template-columns: minmax(0,.5fr) minmax(0,1fr) minmax(0,1fr);
  gap: var(--gap); margin-top: var(--gap); align-items: start;
}

.shot { position: relative; overflow: hidden; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot.p45 { aspect-ratio: 4/5; }
.shot.p34 { aspect-ratio: 3/4; }
.shot.l43 { aspect-ratio: 4/3; }

/* Emplacement photo non pourvu : le miroir ne contient pas de cliche pour ce
   cadre. Le reperage reste visible pour que le manque saute aux yeux plutot
   que de passer pour un choix. */
.slot {
  display: flex; align-items: flex-end; padding: 16px;
  background:
    repeating-linear-gradient(135deg,
      rgb(var(--cream-rgb) / .04) 0 12px, transparent 12px 24px),
    rgb(var(--cream-rgb) / .05);
  border: 1px solid rgb(var(--cream-rgb) / .12);
  min-height: 160px;
}
.slot span {
  font-family: var(--mono); font-size: calc(8.5 * var(--s)); letter-spacing: .18em;
  text-transform: uppercase; color: rgb(var(--cream-rgb) / .5); line-height: 1.7;
}
.on-light .slot, .on-sand .slot {
  background:
    repeating-linear-gradient(135deg,
      rgb(var(--ink-rgb) / .05) 0 12px, transparent 12px 24px),
    rgb(var(--ink-rgb) / .06);
  border-color: rgb(var(--ink-rgb) / .14);
}
.on-light .slot span, .on-sand .slot span { color: rgb(var(--ink-rgb) / .5); }

/* ------------------------------------------------------------- disciplines */
.tabs { display: flex; justify-content: space-between; gap: 24px; margin-top: 44px; flex-wrap: wrap; }
.tab {
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  padding: 0 0 10px; cursor: pointer;
  font-family: var(--mono); font-size: calc(10 * var(--s)); letter-spacing: .22em;
  text-transform: uppercase; color: rgb(var(--cream-rgb) / .4);
  transition: color .3s, border-color .3s;
}
.tab:hover { color: var(--cream); }
.tab[aria-selected="true"] { color: var(--cream); border-bottom-color: var(--cream); }

.disc { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: var(--gap); margin-top: 52px; align-items: stretch; }
.disc-txt { display: flex; flex-direction: column; gap: 28px; min-height: 420px; }
.disc-num { font-family: var(--sans); font-weight: 200; font-size: calc(58 * var(--s)); line-height: .8; color: rgb(var(--cream-rgb) / .32); flex: 0 0 auto; }
.disc-title { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 2.6vw, calc(53 * var(--s))); line-height: 1.05; text-transform: uppercase; margin: 0; }
/* PHOTO DE DISCIPLINE : UN CARRE, ET UN CARRE BORNE.
   Elle etait etiree a la hauteur du texte, donc de plus en plus plate a mesure
   que l'ecran s'elargit : ratio 1,24 a 1280 px, 2,37 a 2818 px, soit une
   bandelette. Le carre garde le meme cadrage a toutes les tailles.
   `align-self: start` est indispensable : sans lui, le `stretch` de la grille
   imposerait sa hauteur et le rapport 1/1 serait ignore.
   La largeur est bornee par trois valeurs, la plus petite gagnant : la colonne,
   72 % de la hauteur de fenetre pour que le carre tienne toujours a l'ecran
   sans defiler, et 720 px pour qu'il ne devienne pas ecrasant sur un tres
   grand ecran. */
.disc-shot { position: relative; overflow: hidden; min-height: 0;
  aspect-ratio: 1 / 1; align-self: start; margin-left: auto;
  width: min(100%, 72vh, 720px); }
.disc-shot img { width: 100%; height: 100%; object-fit: cover; }
.disc-ben { font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .1em; line-height: 2.1; color: rgb(var(--cream-rgb) / .6); max-width: 56ch; }
.disc-ben b { color: var(--cream); font-weight: 400; }

/* ------------------------------------------------------------------ chiffres */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgb(var(--cream-rgb) / .12); }
.stats > div { padding: 46px 24px; border-right: 1px solid rgb(var(--cream-rgb) / .12); }
.stats > div:first-child { padding-left: 0; }
.stats > div:last-child { border-right: 0; padding-right: 0; }
.stats .n { font-family: var(--display); font-size: clamp(34px, 4.2vw, calc(84 * var(--s))); line-height: 1; }
.stats .l { font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .5); margin-top: 12px; }

/* -------------------------------------------------------------------- duo */
.duo { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.duo-shot { position: relative; min-height: 540px; }
.duo-shot img.photo { width: 100%; height: 100%; object-fit: cover; }
/* Le design dessine un pastillon "M" ; le vrai tampon de marque existe dans
   le miroir, il est prefere au caractere typographique. */
.stamp { position: absolute; right: 26px; bottom: 26px; width: 112px; height: 112px; animation: spin 26s linear infinite; }
.duo-txt { padding: clamp(48px, 5vw, calc(106 * var(--s))) clamp(20px, 3.6vw, calc(74 * var(--s))); display: flex; flex-direction: column; gap: 26px; justify-content: center; }

/* -------------------------------------------------------------------- faq */
.faq { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 var(--gap); margin-top: 52px; }
.faq-item { border-top: 1px solid rgb(var(--ink-rgb) / .18); padding: 22px 0; }
.faq-q {
  width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer;
  text-align: left; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  gap: 18px; align-items: start; color: var(--ink);
}
.faq-n { font-family: var(--mono); font-size: calc(11 * var(--s)); letter-spacing: .14em; color: var(--brown); }
.faq-t { font-family: var(--sans); font-weight: 700; font-size: calc(14.5 * var(--s)); line-height: 1.5; text-transform: uppercase; }
.faq-s { font-family: var(--sans); font-weight: 400; font-size: calc(20 * var(--s)); line-height: 1; color: var(--brown); }
.faq-a { overflow: hidden; max-height: 0; opacity: 0; margin-top: 0; transition: max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s, margin-top .4s; }
.faq-item.open .faq-a { max-height: 320px; opacity: 1; margin-top: 14px; }
.faq-a p { padding-left: 44px; font-size: calc(13.5 * var(--s)); line-height: 1.85; color: rgb(var(--ink-rgb) / .7); max-width: 56ch; }

/* ------------------------------------------------------------------- avis */
.reviews { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 36px; }
.review { border: 1px solid rgb(var(--ink-rgb) / .2); padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 16px; }
.review p { max-width: 66ch; }
.review .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.stars { letter-spacing: .2em; font-size: calc(15 * var(--s)); color: var(--brown); }
.review .who { font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--ink-rgb) / .6); }

/* --------------------------------------------------------------- listes */
.rows > div { border-top: 1px solid rgb(var(--cream-rgb) / .16); padding: 22px 0; }
.rows > div:last-of-type { border-bottom: 1px solid rgb(var(--cream-rgb) / .16); }
.rows h3 { margin: 0 0 8px; font-family: var(--sans); font-weight: 700; font-size: calc(14 * var(--s)); letter-spacing: .02em; text-transform: uppercase; }
.rows p { font-size: calc(13.5 * var(--s)); line-height: 1.8; max-width: 56ch; }

.pairs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 var(--gap); }
.pairs > div { border-top: 1px solid rgb(var(--ink-rgb) / .2); padding: 20px 0; }
.pairs > div:nth-last-child(-n+2) { border-bottom: 1px solid rgb(var(--ink-rgb) / .2); }
.pairs h3 { margin: 0 0 6px; font-family: var(--sans); font-weight: 700; font-size: calc(13.5 * var(--s)); text-transform: uppercase; }
.pairs p { font-size: calc(13 * var(--s)); line-height: 1.8; color: rgb(var(--ink-rgb) / .65); max-width: 62ch; }

/* -------------------------------------------------------------- cartes */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px clamp(18px, 2vw, calc(37 * var(--s))); }
.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.6vw, calc(29 * var(--s))); }
.card-t { margin: 16px 0 10px; font-family: var(--sans); font-weight: 700; font-size: calc(13.5 * var(--s)); text-transform: uppercase; }
.card-t em { font-style: normal; font-weight: 400; color: rgb(var(--ink-rgb) / .55); }

.stat-card { border: 1px solid rgb(var(--cream-rgb) / .16); padding: clamp(22px, 2.4vw, calc(42 * var(--s))); }
.stat-card .n { font-family: var(--display); font-size: calc(52 * var(--s)); line-height: 1; }
.stat-card .l { font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .5); margin-top: 12px; }

/* -------------------------------------------------------------- tarifs */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.plan {
  border: 1px solid rgb(var(--cream-rgb) / .16); background: transparent;
  padding: clamp(24px, 2.6vw, calc(45 * var(--s))) clamp(20px, 2.4vw, calc(42 * var(--s))) clamp(26px, 2.8vw, calc(48 * var(--s))); display: flex; flex-direction: column;
  cursor: pointer; text-align: left; color: inherit;
  transition: background .4s, border-color .4s;
}
.plan[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .6); }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.plan-price .n { font-family: var(--display); font-size: clamp(46px, 5vw, calc(108 * var(--s))); line-height: .9; }
.plan-price .u { font-family: var(--mono); font-size: calc(10 * var(--s)); letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .6); }
.plan-feats { display: flex; flex-direction: column; gap: 11px; }
.plan-feats div { font-size: calc(12.5 * var(--s)); line-height: 1.6; color: rgb(var(--cream-rgb) / .78); display: flex; gap: 10px; }
.plan-feats span { color: var(--tan); }

/* ------------------------------------------------------------ planning */
.week { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 1px; background: rgb(var(--cream-rgb) / .12); border-top: 1px solid rgb(var(--cream-rgb) / .16); }
.day { background: var(--ink); padding: 18px 14px; }
.day > .d-l { font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .5); }
.day ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.slotcard { border: 1px solid rgb(var(--cream-rgb) / .2); padding: 11px 12px; }
.slotcard.hi { border-color: var(--brown); background: var(--brown); }
.slotcard .t { font-family: var(--mono); font-size: calc(8.5 * var(--s)); letter-spacing: .16em; color: var(--tan); }
.slotcard.hi .t { color: rgb(var(--cream-rgb) / .8); }
.slotcard .n { font-family: var(--sans); font-weight: 700; font-size: calc(11.5 * var(--s)); text-transform: uppercase; margin-top: 5px; }
.day .free { font-family: var(--mono); font-size: calc(8.5 * var(--s)); letter-spacing: .18em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .35); padding: 10px 2px; }

/* ---------------------------------------------------------- evenements */
.events > div { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(0,1.2fr) auto; gap: 32px; align-items: center; border-top: 1px solid rgb(var(--cream-rgb) / .16); padding: 26px 0; transition: background .3s; }
.events > div:last-child { border-bottom: 1px solid rgb(var(--cream-rgb) / .16); }
.events > div:hover { background: rgb(var(--cream-rgb) / .03); }
.ev-date { font-family: var(--display); font-size: calc(34 * var(--s)); line-height: 1; }
.ev-date span { font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .18em; display: block; color: rgb(var(--cream-rgb) / .5); margin-top: 6px; }
.ev-name { font-family: var(--sans); font-weight: 700; font-size: calc(17 * var(--s)); text-transform: uppercase; max-width: 34ch; }
.events p { max-width: 62ch; }
.ev-cta { font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .22em; text-transform: uppercase; border-bottom: 1px solid currentColor; white-space: nowrap; }

/* ------------------------------------------------------------ formulaire */
.form { border: 1px solid rgb(var(--cream-rgb) / .16); padding: clamp(22px, 2.6vw, calc(53 * var(--s))); display: flex; flex-direction: column; gap: 22px; }
.form.glass { background: rgb(var(--ink-rgb) / .7); backdrop-filter: blur(12px); border-color: rgb(var(--cream-rgb) / .18); padding: 44px; max-width: 460px; width: 100%; justify-self: end; }
.form label { display: block; }
.form .lab { display: block; font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--cream-rgb) / .5); margin-bottom: 9px; }
.form input, .form textarea {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid rgb(var(--cream-rgb) / .25);
  padding: 11px 0; color: var(--cream);
  font-family: var(--sans); font-size: calc(14 * var(--s)); outline: none;
  transition: border-color .3s;
}
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus { border-bottom-color: var(--tan); }
.form input::placeholder, .form textarea::placeholder { color: rgb(var(--cream-rgb) / .3); }

.contact-info { display: flex; flex-direction: column; gap: 22px; font-family: var(--mono); font-size: calc(10 * var(--s)); letter-spacing: .22em; line-height: 2; text-transform: uppercase; }
.contact-info span { color: rgb(var(--cream-rgb) / .45); display: block; margin-bottom: 4px; }

/* --------------------------------------------------------------- pied */
.cta-foot {
  border-top: 1px solid rgb(var(--cream-rgb) / .12);
  padding: 110px var(--pad) 60px;
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: var(--gap); align-items: end; margin: 0 auto;
  max-width: calc(var(--wrap) + 2 * var(--pad));
}
.cta-foot h2 { font-size: clamp(40px, 5.6vw, calc(114 * var(--s))); line-height: .95; letter-spacing: 0; }
.cta-foot .eyebrow { color: var(--tan); letter-spacing: .26em; margin-bottom: 22px; }

.foot { padding: 70px var(--pad) 0; margin: 0 auto;
  max-width: calc(var(--wrap) + 2 * var(--pad)); }
.foot-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr); gap: clamp(32px, 3.4vw, calc(63 * var(--s))); }
.foot-addr { font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .2em; line-height: 2; text-transform: uppercase; color: rgb(var(--cream-rgb) / .6); margin-top: 26px; }
.foot-ig { display: inline-block; margin-top: 34px; font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
.foot-menu { display: flex; flex-direction: column; gap: 14px; font-family: var(--mono); font-size: calc(9.5 * var(--s)); letter-spacing: .2em; text-transform: uppercase; }
.foot-menu .h { color: rgb(var(--cream-rgb) / .4); margin-bottom: 6px; }
.foot-menu a:hover { color: var(--tan); }
.foot-map { position: relative; height: 190px; border-radius: 4px; overflow: hidden; background: var(--cream); }
/* Le design prevoyait une carte large ; le plan du miroir est presque carre.
   Recadre en `cover`, il perdait le bourg et les reperes de distance, donc
   `contain` sur le fond creme, qui montre le plan entier. */
.foot-map img { width: 100%; height: 100%; object-fit: contain; }
.foot-access { text-align: right; font-family: var(--mono); font-size: calc(9 * var(--s)); letter-spacing: .16em; line-height: 2.1; color: rgb(var(--cream-rgb) / .5); margin-top: 22px; }
.foot-note { text-align: right; font-size: calc(12 * var(--s)); line-height: 1.9; color: rgb(var(--cream-rgb) / .45); margin-top: 18px; max-width: 60ch; margin-left: auto; }
.foot-note b { color: var(--cream); font-weight: 600; }

/* Le lettrage geant du design existe en vrai dans le miroir (bas-scaled.png),
   pose sur le meme fond sombre. L'image de marque est preferee au reglage
   typographique, qui ne pourrait que s'en approcher. */
.wordmark { margin-top: 80px; }
.wordmark img { width: 100%; height: auto; }

.foot-legal {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgb(var(--cream-rgb) / .12);
  margin-top: 44px; padding: 20px 0 34px;
  font-family: var(--mono); font-size: calc(8.5 * var(--s)); letter-spacing: .2em;
  text-transform: uppercase; color: rgb(var(--cream-rgb) / .35);
}
.foot-legal a:hover { color: var(--tan); }

/* --------------------------------------------------------------- animation */
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

[data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1); }
[data-rv].in { opacity: 1; transform: none; }
/* Sans script, rien ne doit rester invisible. */
.no-js [data-rv] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee > div, .stamp, .scroll-cue { animation: none; }
  [data-rv] { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------- proportions de colonnes */
/* Ces rapports etaient poses en style en ligne, ce qui primait sur toutes les
   requetes media : la page `experience` restait sur deux colonnes a 375 px et
   son bouton depassait de 12 px. Passes en classes, ils sont ecrases par le
   bloc adaptatif place plus bas. */
.r-hero-a { grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr); }
.r-hero-b { grid-template-columns: minmax(0,1fr) minmax(0,.9fr); }
.r-hero-c { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); }
.r-hero-d { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.r-media  { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }

/* ------------------------------------------------------------- adaptatif */
/* Une echelle par composant plutot qu'un effondrement unique : entre 700 et
   1080 px, beaucoup de grilles tiennent encore en deux colonnes, et les faire
   tomber a une seule gaspille la largeur. */

/* --- 1400 px : le planning a sept colonnes devient illisible avant tout le
   reste, chaque jour tombant sous 150 px. */
@media (max-width: 1400px) {
  .week { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .cta-foot h2 { font-size: clamp(34px, 6vw, calc(87 * var(--s))); }
}

/* --- 1080 px : la barre ne peut plus porter six liens, le menu deroulant
   prend le relais et donne acces aux onze pages. */
@media (max-width: 1080px) {
  .nav-in { grid-template-columns: minmax(0,1fr) auto; }
  .nav-l, .nav-r { display: none; }
  .brand { text-align: left; }
  .brand img { margin: 0; }
  .burger { display: flex; grid-column: 2; }
  .events > div { grid-template-columns: 96px minmax(0,1fr) minmax(0,1.2fr); gap: 20px 28px; }
  .events .ev-cta { grid-column: 2 / -1; justify-self: start; }
}

/* --- 1024 px : les partages a deux colonnes de largeurs inegales se
   superposent, les grilles regulieres passent a deux. */
@media (max-width: 1024px) {
  .hero-in, .split, .split.even, .split-3, .disc, .duo, .band .wrap,
  .cta-foot, .reviews,
  .r-hero-a, .r-hero-b, .r-hero-c, .r-hero-d, .r-media { grid-template-columns: minmax(0,1fr); }
  .hero-side { align-items: flex-start; text-align: left; }
  .duo-shot { order: 2; }
  .form.glass { justify-self: start; max-width: none; }
  .cards3, .cards4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .week { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .disc-shot, .duo-shot { min-height: 340px; }
  .disc-txt { min-height: 0; }
  .plans { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* La troisieme carte occupe alors toute la ligne. */
  .plans > *:last-child { grid-column: 1 / -1; }
}

/* --- 900 px : le pied de page a trois colonnes se plie, la carte gardant
   toute la largeur. */
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid > *:last-child { grid-column: 1 / -1; }
  .foot-access, .foot-note { text-align: left; margin-left: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats > div { border-bottom: 1px solid rgb(var(--cream-rgb) / .12); padding-left: 0; }
  .stats > div:nth-child(2n) { border-right: 0; padding-left: 24px; }
  .marquee.big > div { font-size: clamp(20px, 3.4vw, calc(40 * var(--s))); }
}

/* --- 760 px : les colonnes doubles de texte se lisent mieux empilees. */
@media (max-width: 760px) {
  .faq, .pairs { grid-template-columns: minmax(0,1fr); gap: 0; }
  /* Empilees, seule la derniere carte porte le trait du bas. */
  .pairs > div:nth-last-child(-n+2) { border-bottom: 0; }
  .pairs > div:last-child { border-bottom: 1px solid rgb(var(--ink-rgb) / .2); }
  .plans, .week { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plans > *:last-child { grid-column: 1 / -1; }
  .pad-lg, .pad-md { padding-top: 72px; padding-bottom: 76px; }
  .page-head { padding-top: 124px; }
  .statement .wrap { text-align: left; }
}

/* --- 560 px : tout sur une colonne, et les rangees d'evenements se lisent
   comme des blocs. */
@media (max-width: 560px) {
  .cards3, .cards4, .week, .plans, .stats { grid-template-columns: minmax(0,1fr); }
  .plans > *:last-child { grid-column: auto; }
  .stats > div { border-right: 0; padding: 26px 0; }
  .events > div { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .events .ev-cta { grid-column: auto; }
  .foot-grid { grid-template-columns: minmax(0,1fr); }
  .foot-grid > *:last-child { grid-column: auto; }
  .foot-legal { flex-direction: column; gap: 10px; }
  .btn { padding: 14px 22px; font-size: calc(9.5 * var(--s)); letter-spacing: .16em; }
  .hero { min-height: 88vh; }
  /* Chevauchait le bouton du heros, faute de hauteur. */
  .scroll-cue { display: none; }
  .review { padding: 22px 20px 26px; }
  .head-row, .head-row.end { flex-direction: column; align-items: flex-start; gap: 22px; }
  /* Les fleches restent a droite de leur titre, mais pas le monogramme,
     qui resterait orphelin contre le bord. */
  .head-row > *:last-child:not(:only-child):not(.monogram) { align-self: flex-end; }
}

/* --- 400 px : dernier cran, les mots longs du francais depassent sinon
   (« PLANNING & RESERVATION », « ETABLISSEMENT »). */
@media (max-width: 400px) {
  .d { letter-spacing: 0; }
  .disc-title, .h3 { hyphens: auto; }
  .plan-price .n { font-size: calc(40 * var(--s)); }
  .foot-note, .foot-access { font-size: calc(11 * var(--s)); }
}

/* Les mots trop longs pour la colonne se coupent au lieu de deborder. */
h1, h2, h3, .d, .disc-title, .ev-name, .card-t { overflow-wrap: break-word; }