@charset "utf-8";

/* ============================================================
   Noon Club — feuille de style
   Palette tirée du logo (sable, encre, crème) et du studio
   (bois clair, coussins sauge, plafond noir, miroirs en arche).
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-latin.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------- jetons */

:root {
  --ink: #17140f;
  --ink-2: #241f19;
  --ink-3: #3a332a;
  --sand: #baa48f;
  /* Usages texte. Calibré à 5,1:1 sur `--cream-2`, pas à 4,5 : le grain de
     papier posé sur toute la page est un voile d'encre à 4,5 % dans ses
     points les plus denses, et un jeton réglé pile sur le seuil AA passait
     dessous. Une couleur de texte se calibre avec une marge, jamais au
     ras du seuil. */
  --sand-d: #715a42;
  --sand-m: #9c8570;   /* usages decoratifs : etoiles, puces, spinner */
  --sand-l: #d8c9b8;
  --cream: #f6f1ea;
  --cream-2: #ede4d8;
  --paper: #fffdfa;
  --sage: #7c8768;
  --wood: #c69a6b;

  --txt: #1c1813;
  --txt-2: #564e43;
  --txt-3: #6b6255;
  --line: #ddd2c4;
  --line-2: #e8dfd3;

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --r-s: 6px;
  --r-m: 14px;
  --r-l: 26px;
  --arch: 50% 50% var(--r-m) var(--r-m) / 30% 30% 3% 3%;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --gap: clamp(1.5rem, 3.4vw, 3rem);
  --sec: clamp(4.5rem, 10vw, 9rem);

  --shadow: 0 1px 2px rgb(23 20 15 / .05), 0 12px 34px -18px rgb(23 20 15 / .28);
  --shadow-l: 0 2px 6px rgb(23 20 15 / .06), 0 40px 80px -40px rgb(23 20 15 / .40);
}

/* ------------------------------------------------------------- socle */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--txt);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'SOFT' 20, 'WONK' 0;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

em { font-style: italic; font-variation-settings: 'SOFT' 40, 'WONK' 1; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .8rem 1.2rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.wrap { width: min(100% - 2 * var(--pad), 1240px); margin-inline: auto; }
.wrap-n { width: min(100% - 2 * var(--pad), 860px); margin-inline: auto; }

section { position: relative; }

/* ------------------------------------------------------- bandeau démo */

.demo-note {
  background: var(--ink);
  color: #b7ac9c;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  padding: .55rem 1rem;
  line-height: 1.4;
}
.demo-note b { color: var(--sand-l); font-weight: 600; }

/* ------------------------------------------------------------ wordmark */

.wm {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--wm-size, 1.9rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--ink);
  position: relative;
  padding-right: .92em;
}
.wm-l { display: block; }
.wm-l2 { margin-left: -.02em; }
.wm-eye {
  width: .58em; height: .58em;
  border: .085em solid currentColor;
  border-radius: 50%;
  background: var(--cream);
  position: relative;
  flex: none;
}
.wm-eye::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: .13em; height: .13em; border-radius: 50%;
  background: currentColor;
}
.wm-eye2 { margin-left: -.10em; margin-top: .17em; }
.wm-club {
  position: absolute;
  right: -.02em; top: -.10em;
  font-size: .32em;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(-7deg);
  color: var(--sand-d);
  white-space: nowrap;
}
.wm-cream { color: var(--cream); }
.wm-cream .wm-eye { background: var(--ink); }
.wm-cream .wm-club { color: var(--sand); }

/* -------------------------------------------------------------- header */

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.hdr.is-stuck { border-bottom-color: var(--line-2); box-shadow: 0 10px 30px -26px rgb(23 20 15 / .5); }

.hdr-in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  width: min(100% - 2 * var(--pad), 1240px);
  margin-inline: auto;
  padding-block: .85rem;
}

.brand { text-decoration: none; display: grid; gap: .18rem; flex: none; --wm-size: 1.65rem; }
.brand-sub {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 500;
}

.nav { margin-left: auto; }
.nav ul { display: flex; gap: clamp(.75rem, 2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.nav a {
  text-decoration: none; font-size: .875rem; font-weight: 500;
  letter-spacing: .01em; padding: .4rem 0; display: block; position: relative;
  color: var(--txt-2);
  transition: color .2s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .05rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ink); }

.hdr-cta { display: flex; align-items: center; gap: .9rem; }
.tel {
  display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font-size: .875rem; font-weight: 500; color: var(--txt-2);
  white-space: nowrap;
}
/* L'icône vient de la bibliothèque : elle est au trait, jamais pleine —
   `fill: currentColor` la transformerait en pâté. */
.tel .ico { width: 1.05em; height: 1.05em; }
.tel:hover { color: var(--ink); }

.burger {
  display: none; width: 44px; height: 40px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  margin-left: auto;
}
.burger span { display: block; width: 17px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .2s; }
.burger[aria-expanded='true'] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded='true'] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav, .hdr-cta { display: none; }
  .burger { display: flex; }
}

/* en-tête pendant que le menu plein écran est ouvert : il doit rester
   au-dessus de l'overlay, sinon le bouton de fermeture n'est plus cliquable */
.menu-ouvert .hdr {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
.menu-ouvert .brand,
.menu-ouvert .burger span { color: var(--cream); }
.menu-ouvert .wm { color: var(--cream); }
.menu-ouvert .wm .wm-eye { background: var(--ink); }
.menu-ouvert .wm-club { color: var(--sand); }
.menu-ouvert .brand-sub { color: var(--txt-3); }
.menu-ouvert .burger { border-color: rgb(246 241 234 / .35); }
.menu-ouvert .burger span { background: var(--cream); }

/* menu plein écran */
/* Centrage SÛR. `align-content: center` sur un conteneur qui déborde rend le
   haut du contenu inatteignable : le débordement part des deux côtés et
   `scrollTop` ne peut pas devenir négatif. Mesuré avant correction, sur un
   écran de 674 px : le kicker à -133 px et la première entrée « Accueil » à
   -89 px, impossibles à atteindre.

   La colonne flex avec `margin-block: auto` sur l'enfant règle les deux cas
   d'un coup : les marges automatiques centrent quand il y a de la place, et
   se résolvent à zéro quand le contenu déborde — le haut redevient le haut. */
.menu {
  position: fixed; inset: 0; z-index: 95;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(6.5rem, 15vh, 9rem) 0 clamp(2rem, 6vh, 3.5rem);
  overflow-y: auto;
  animation: fade .3s ease;
}
.menu[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.menu-in { width: min(100% - 3rem, 480px); margin-block: auto; }
.menu-list { list-style: none; margin: 0 0 clamp(1.8rem, 5vh, 3rem); padding: 0; display: grid; gap: .3rem; }
.menu-list a {
  font-family: var(--serif); font-size: clamp(2rem, 8vw, 2.9rem);
  text-decoration: none; display: block; padding: .18em 0;
  border-bottom: 1px solid rgb(255 255 255 / .10);
  transition: padding-left .3s, color .3s;
}
.menu-list a:hover { padding-left: .3em; color: var(--sand-l); }
.menu-foot { color: var(--txt-3); font-size: .9rem; }
.menu-foot a { font-size: 1.4rem; font-family: var(--serif); text-decoration: none; color: var(--cream); }

/* ------------------------------------------------------------- boutons */

.btn {
  --bg: var(--ink); --fg: var(--cream); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  padding: .78rem 1.5rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid:hover { --bg: var(--ink-3); --bd: var(--ink-3); }
.btn-ghost { --bg: transparent; --fg: var(--ink); --bd: var(--line); }
.btn-ghost:hover { --bd: var(--ink); }
.btn-cream { --bg: var(--cream); --fg: var(--ink); --bd: var(--cream); }
.btn-cream:hover { --bg: var(--sand-l); --bd: var(--sand-l); }
.btn-ghost-cream { --bg: transparent; --fg: var(--cream); --bd: rgb(246 241 234 / .35); }
.btn-ghost-cream:hover { --bd: var(--cream); }
.btn-sand { --bg: var(--sand); --fg: var(--ink); --bd: var(--sand); }
.btn-sand:hover { --bg: var(--sand-d); --bd: var(--sand-d); }
.btn-lg { padding: 1.02rem 2rem; font-size: .95rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ------------------------------------------------------ titres de section */

.kicker {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; color: var(--sand-d); margin: 0 0 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.kicker::before {
  content: ''; width: 1.6rem; height: 1px; background: currentColor; flex: none;
}
.kicker.is-center { justify-content: center; }
.bg-ink .kicker, .cta-final .kicker, .hero .kicker, .hero-2 .kicker { color: var(--sand); }
.kicker.is-center::before { display: none; }

.sec-head { max-width: 46ch; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.sec-head.is-center { margin-inline: auto; text-align: center; }
.sec-t { font-size: clamp(2.1rem, 5.4vw, 3.9rem); }
.sec-p { margin-top: 1.3rem; color: var(--txt-2); font-size: 1.05em; }

.sec { padding-block: var(--sec); }
.sec-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.bg-cream2 { background: var(--cream-2); }
.bg-paper { background: var(--paper); }
.bg-sand { background: var(--sand); }
.bg-ink { background: var(--ink); }

/* ------------------------------------------------- contextes de couleur

   Une surface sombre redéfinit les JETONS de texte, elle ne repeint pas
   chaque élément. Sans cela, une règle de composant écrite plus bas dans la
   feuille (`.rass p { color: var(--txt-2) }`, même spécificité que
   `.bg-ink p`) l'emporterait par ordre d'écriture et rendrait le texte
   presque illisible sur fond noir. Avec des jetons, la cascade suit
   l'imbrication et non l'ordre du fichier.
*/
.bg-ink, .cta-final, .ftr, .menu,
.hero, .hero-2, .univ,
.tcard.is-phare, .avis.is-mise {
  --txt: var(--cream);
  --txt-2: #b6ab9c;
  --txt-3: #a2988a;
  --line: rgb(246 241 234 / .18);
  --line-2: rgb(246 241 234 / .11);
  --sand-d: var(--sand);
  color: var(--txt);
}

/* Réciproquement : une carte claire posée dans une section sombre remet la
   palette claire, sinon son titre passerait en crème sur fond crème. */
.bg-ink .tcard:not(.is-phare),
.bg-ink .avis:not(.is-mise),
.bg-ink .encadre:not(.is-sand),
.bg-ink .planity {
  --txt: #1c1813;
  --txt-2: #564e43;
  --txt-3: #6b6255;
  --line: #ddd2c4;
  --line-2: #e8dfd3;
  --sand-d: #7a6249;
  color: var(--txt);
}
/* #4a4036 ne fait que 4,2:1 sur le sable : sous le seuil AA. */
.encadre.is-sand { --txt: #17140f; --txt-2: #3a3128; --txt-3: #40382e; color: var(--txt); }

/* --------------------------------------------------------------- ruban */

.ruban {
  overflow: hidden; background: var(--sand); color: var(--ink);
  padding-block: .9rem; border-block: 1px solid rgb(23 20 15 / .12);
}
.ruban-piste {
  display: flex; gap: 1.6rem; align-items: center; width: max-content;
  animation: defile 46s linear infinite;
}
.ruban-piste span {
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.ruban-piste i { opacity: .5; font-style: normal; }
@keyframes defile { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ruban-piste { animation: none; } }

/* ---------------------------------------------------------------- héros */

.hero { position: relative; isolation: isolate; color: var(--cream); background: var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgb(23 20 15 / .70) 0%, rgb(23 20 15 / .30) 38%, rgb(23 20 15 / .82) 100%),
    radial-gradient(120% 80% at 20% 100%, rgb(23 20 15 / .45), transparent 60%);
}
.hero-in {
  width: min(100% - 2 * var(--pad), 1240px); margin-inline: auto;
  padding-block: clamp(6rem, 16vh, 10rem) clamp(2.5rem, 6vh, 4rem);
  min-height: clamp(560px, 88svh, 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero .kicker { color: var(--sand-l); }
.hero-t {
  font-size: clamp(2.7rem, 8.2vw, 6.4rem);
  max-width: 15ch;
  color: var(--cream);
}
.hero-t em { color: var(--sand-l); }
.hero-p {
  max-width: 46ch; margin-top: 1.6rem; color: #ded5c8; font-size: 1.06em; /* héros : texte plus clair que --txt-2 pour tenir sur photo */
}
.hero .cta-row { margin-top: 2.2rem; }

.hero-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: clamp(2.5rem, 6vh, 4.5rem);
  border-top: 1px solid rgb(246 241 234 / .22);
  padding-top: 1.5rem;
}
.hero-facts div { padding-right: 1rem; }
.hero-facts b {
  display: block; font-family: var(--serif); font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 400; color: var(--cream); line-height: 1.1;
}
.hero-facts span {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #a99e8e;
}
@media (max-width: 720px) {
  .hero-facts { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
}

/* héros secondaire (pages intérieures) */
.hero-2 { position: relative; isolation: isolate; color: var(--cream); background: var(--ink); }
.hero-2 .hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-2 .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-2::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgb(23 20 15 / .72), rgb(23 20 15 / .55) 55%, rgb(23 20 15 / .88));
}
.hero-2-in {
  width: min(100% - 2 * var(--pad), 1240px); margin-inline: auto;
  padding-block: clamp(4.5rem, 13vh, 8rem) clamp(3rem, 8vh, 5.5rem);
  min-height: clamp(400px, 62svh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-2 .kicker { color: var(--sand-l); }
.hero-2-t { font-size: clamp(2.4rem, 6.6vw, 4.8rem); max-width: 17ch; color: var(--cream); }
.hero-2-t em { color: var(--sand-l); }
.hero-2-p { max-width: 52ch; margin-top: 1.4rem; color: #dbd2c5; }

.fil { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.6rem; padding: 0; font-size: .78rem; color: #a99e8e; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--cream); }

/* --------------------------------------------------------------- images */

.arch { border-radius: var(--arch); overflow: hidden; }
.rounded { border-radius: var(--r-l); overflow: hidden; }
.ph { position: relative; overflow: hidden; background: var(--cream-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }

.legende {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-3); margin-top: .9rem;
}

/* ---------------------------------------------------------------- split */

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.split.is-rev .split-media { order: 2; }
.split-body { max-width: 52ch; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.is-rev .split-media { order: 0; }
}

/* --------------------------------------------------------------- piliers */

.piliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; align-items: start; }
.pilier {
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 2.2vw, 2rem);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  transition: background .35s;
}
.pilier:last-child { border-right: 0; }
.pilier:hover { background: var(--paper); }
.pilier-n {
  font-family: var(--serif); font-size: .95rem; color: var(--sand-d);
  display: block; margin-bottom: 1.6rem; letter-spacing: .06em;
}
.pilier h3 { font-size: 1.6rem; margin-bottom: .8rem; }
.pilier p { color: var(--txt-2); font-size: .95em; margin: 0; }
@media (max-width: 700px) { .pilier { border-right: 0; } }


/* grandes cartes « univers » */
.univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }
.univ {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-l); min-height: clamp(400px, 52vw, 560px);
  background: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.6rem, 3vw, 2.6rem); color: var(--cream); text-decoration: none;
}
.univ img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.univ::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(23 20 15 / .90) 5%, rgb(23 20 15 / .42) 48%, rgb(23 20 15 / .22));
  transition: background .4s;
}
.univ:hover img { transform: scale(1.05); }
.univ:hover::after { background: linear-gradient(to top, rgb(23 20 15 / .93) 5%, rgb(23 20 15 / .52) 55%, rgb(23 20 15 / .3)); }
.univ-k { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-l); margin-bottom: .9rem; }
.univ h3 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--cream); margin-bottom: .7rem; }
.univ p { color: #d3c9bb; font-size: .95em; max-width: 40ch; }
.univ-go {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; letter-spacing: .06em;
}
.univ-go i { font-style: normal; transition: transform .3s; }
.univ:hover .univ-go i { transform: translateX(5px); }


/* ------------------------------------------------------------ statistiques */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.stat { background: var(--cream); padding: clamp(1.4rem, 3vw, 2.2rem); }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 400; line-height: 1; }
.stat span { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); display: block; margin-top: .7rem; }
.bg-ink .stats { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .14); }
.bg-ink .stat { background: var(--ink); }

/* -------------------------------------------------------------- rassurance */

.rass { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.rass > div { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.rass h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em; margin-bottom: .5rem; }
.rass p { font-size: .9em; color: var(--txt-2); margin: 0; }
.bg-ink .rass > div { border-top-color: var(--sand); }

/* ---------------------------------------------------------------- tarifs */

.tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); align-items: stretch; }
.tcard {
  position: relative; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-m); padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: .35rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tcard.is-phare { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tcard.is-phare .tcard-sub, .tcard.is-phare .tcard-unit { color: var(--txt-3); }
.tcard.is-phare h3 { color: var(--cream); }
.tcard-badge {
  position: absolute; top: -.72rem; left: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--sand); color: var(--ink); font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; padding: .32rem .8rem; border-radius: 999px;
}
.tcard h3 { font-size: 1.5rem; }
.tcard-sub { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); margin: 0; }
.tcard-prix { font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 3.1rem); line-height: 1; margin: .9rem 0 .2rem; }
.tcard-prix small { font-family: var(--sans); font-size: .9rem; opacity: .6; letter-spacing: 0; }
.tcard-unit { font-size: .85rem; color: var(--txt-2); margin: 0; }
.tcard-detail { font-size: .92em; color: var(--txt-2); margin: .8rem 0 0; }
.tcard-link {
  margin-top: auto; padding-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .85rem; text-decoration: none; letter-spacing: .04em;
}
.tcard-link i { font-style: normal; transition: transform .3s; }
.tcard-link:hover i { transform: translateX(5px); }

.tnote { font-size: .85rem; color: var(--txt-3); margin-top: 1.8rem; }

/* table de tarifs */
.ttable { width: 100%; border-collapse: collapse; font-size: .95rem; }
.ttable th, .ttable td { text-align: left; padding: 1rem .8rem; border-bottom: 1px solid var(--line-2); }
.ttable th { font-weight: 600; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); }
.ttable td:last-child, .ttable th:last-child { text-align: right; }
.ttable .p { font-family: var(--serif); font-size: 1.3rem; }
.ttable tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- avis */

.avis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); align-items: stretch; }
.avis {
  margin: 0; background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-m); padding: clamp(1.4rem, 2.6vw, 2rem);
  display: flex; flex-direction: column;
  transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.avis:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.avis.is-mise { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.avis.is-hidden { display: none; }
.avis blockquote {
  margin: 1rem 0 1.2rem; font-family: var(--serif); font-size: 1.16rem; line-height: 1.42;
  letter-spacing: -.01em;
}
.avis figcaption { margin-top: auto; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.avis figcaption span { opacity: .5; margin-inline: .25rem; }

.stars { display: flex; gap: .18rem; }
.stars span {
  width: .82rem; height: .82rem; background: var(--sand-m);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.is-mise .stars span { background: var(--sand); }

.note-bloc {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap;
}
.note-chiffre { font-family: var(--serif); font-size: clamp(3.6rem, 9vw, 5.6rem); line-height: .9; }
.note-chiffre sup { font-size: .32em; font-family: var(--sans); color: var(--txt-3); top: -1.4em; }
.note-meta { font-size: .9rem; color: var(--txt-2); }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.chip {
  border: 1px solid var(--line); background: transparent; border-radius: 999px;
  padding: .5rem 1.05rem; font-family: inherit; font-size: .82rem; cursor: pointer;
  color: var(--txt-2); transition: background .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Les mots qui reviennent ne sont pas des commandes : ce sont des chiffres.
   Ils perdent donc le contour, qui promettait un bouton cliquable. */
.mots { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mot {
  background: var(--cream-2); border-radius: 999px;
  padding: .46rem 1rem; font-size: .82rem; color: var(--txt-2);
}
.mot b { color: var(--sand-d); font-weight: 600; margin-left: .15em; }
.mot b::before { content: '· '; color: var(--txt-3); font-weight: 400; }

/* --------------------------------------------------------------- citation */

.quote-big {
  font-family: var(--serif); font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.18;
  letter-spacing: -.02em; margin: 0; max-width: 22ch;
}
.quote-big em { color: var(--sand-d); }

/* ------------------------------------------------------------------ FAQ */

.faq { border-top: 1px solid var(--line); }
.faq-i { border-bottom: 1px solid var(--line); }
.faq-i summary {
  list-style: none; cursor: pointer; padding: 1.35rem 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-family: var(--serif); font-size: clamp(1.12rem, 2.2vw, 1.4rem); line-height: 1.3;
  transition: color .25s;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary:hover { color: var(--sand-d); }
.faq-i summary i {
  flex: none; width: 1rem; height: 1rem; position: relative; align-self: center;
}
.faq-i summary i::before, .faq-i summary i::after {
  content: ''; position: absolute; inset: 0; margin: auto; background: currentColor;
}
.faq-i summary i::before { width: 100%; height: 1.5px; }
.faq-i summary i::after { width: 1.5px; height: 100%; transition: transform .3s; }
.faq-i[open] summary i::after { transform: scaleY(0); }
.faq-a { padding-bottom: 1.5rem; max-width: 68ch; }
.faq-a p { color: var(--txt-2); margin: 0; font-size: .97em; }

/* --------------------------------------------------------------- listes */

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.liste li { padding-left: 1.9rem; position: relative; color: var(--txt-2); font-size: .97em; }
.liste li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: .62rem; height: .62rem; border-radius: 50%;
  border: 1.5px solid var(--sand-m);
}

.defs { margin: 0; display: grid; gap: 0; }
.defs > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding-block: 1.05rem; border-bottom: 1px solid var(--line-2); }
.defs dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); padding-top: .2rem; }
.defs dd { margin: 0; color: var(--txt-2); font-size: .97em; }
@media (max-width: 560px) { .defs > div { grid-template-columns: 1fr; gap: .3rem; } }

/* --------------------------------------------------------------- galerie */

.galerie { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 1.4vw, 1.1rem); }
.galerie > * { border-radius: var(--r-m); overflow: hidden; }
.g-a { grid-column: span 5; aspect-ratio: 3/4; }
.g-b { grid-column: span 7; aspect-ratio: 4/3; }
.g-c { grid-column: span 4; aspect-ratio: 1; }
.g-d { grid-column: span 4; aspect-ratio: 1; }
.g-e { grid-column: span 4; aspect-ratio: 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.galerie > *:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .g-a, .g-b { grid-column: span 12; }
  .g-c, .g-d, .g-e { grid-column: span 6; }
  .g-e { grid-column: span 12; aspect-ratio: 16/10; }
}

/* --------------------------------------------------------------- vidéo */

/* Les deux vidéos du studio sont tournées au format vertical 9:16 :
   on les présente comme des reels, jamais étirées sur toute la largeur. */
.reel {
  position: relative; width: min(100%, 360px); margin-inline: auto;
  border-radius: var(--r-l); overflow: hidden; background: var(--ink);
  box-shadow: var(--shadow-l);
}
.reel video { width: 100%; aspect-ratio: 9 / 16; height: auto; display: block; object-fit: cover; }

.video-bloc { position: relative; border-radius: var(--r-l); overflow: hidden; background: var(--ink); }
.video-bloc video { width: 100%; display: block; }
.video-legende {
  position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  color: var(--cream); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  background: rgb(23 20 15 / .55); backdrop-filter: blur(6px);
  padding: .5rem .95rem; border-radius: 999px;
}

/* -------------------------------------------------------------- planity */

.planity {
  border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden;
  background: var(--paper); box-shadow: var(--shadow);
}
.planity-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--line-2); background: var(--cream);
}
.planity-bar p { margin: 0; font-size: .8rem; color: var(--txt-3); display: flex; align-items: center; gap: .5rem; }
.planity-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--sage); flex: none; }
.planity-frame { position: relative; background: var(--paper); min-height: 620px; }
/* Le module de l'éditeur s'injecte ici et impose sa propre hauteur : on ne
   lui fixe qu'un plancher, le temps que le voile de chargement se retire. */
.planity-frame #planity { padding: clamp(.4rem, 1.6vw, 1.2rem); }
.planity-secours {
  position: absolute; inset: 0; margin: 0; padding: 2rem;
  display: grid; place-content: center; align-content: center;
  text-align: center; font-size: .95rem; line-height: 1.7; color: var(--txt-2);
  max-width: 46ch; margin-inline: auto;
}
/* Le sélecteur de classe l'emporterait sur la règle `[hidden]` du navigateur :
   on rétablit explicitement le repli. */
.planity-secours[hidden] { display: none; }
.planity-secours a { color: var(--txt); }
.planity-load {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 1rem;
  background: var(--paper); color: var(--txt-3); font-size: .85rem; text-align: center;
  transition: opacity .5s, visibility .5s;
}
.planity-load.is-gone { opacity: 0; visibility: hidden; }
.spin {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--sand-m);
  animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- carte */

.map { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line); background: var(--cream-2); }
.map iframe { width: 100%; aspect-ratio: 12 / 5; min-height: 280px; border: 0; display: block; filter: saturate(.72) contrast(1.02); }

/* ------------------------------------------------------------ formulaire */

.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form-row { grid-template-columns: 1fr; } }
.champ { display: grid; gap: .45rem; }
.champ label { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: .95rem; color: var(--txt);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: .8rem .95rem; width: 100%;
  transition: border-color .25s, box-shadow .25s;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(186 164 143 / .3);
}
.form-note { font-size: .8rem; color: var(--txt-3); }
.form-ok {
  display: none; background: var(--sage); color: #fff; padding: 1rem 1.2rem;
  border-radius: var(--r-s); font-size: .92rem;
}
.form-ok.is-on { display: block; }

/* -------------------------------------------------------------- encadré */

.encadre {
  border: 1px solid var(--line); border-radius: var(--r-m);
  padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--cream-2);
}
.encadre h3 { font-size: 1.35rem; margin-bottom: .8rem; }
.encadre p { color: var(--txt-2); font-size: .95em; }
.encadre.is-sand { background: var(--sand); border-color: var(--sand-m); }
.encadre.is-sand p { color: var(--txt-2); }

/* ------------------------------------------------------------ contact bloc */

.coords { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.coord h3 { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); font-weight: 600; margin-bottom: .7rem; }
.coord p, .coord address { font-style: normal; margin: 0; font-size: 1.05rem; line-height: 1.55; }
.coord a { text-decoration: none; border-bottom: 1px solid var(--line); }
.coord a:hover { border-bottom-color: var(--ink); }

.horaires { width: 100%; border-collapse: collapse; font-size: .95rem; }
.horaires td { padding: .62rem 0; border-bottom: 1px solid var(--line-2); }
.horaires td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.horaires tr:last-child td { border-bottom: 0; }
.horaires .est-auj td { font-weight: 600; }
.horaires .est-auj td:first-child::after { content: ' · aujourd’hui'; color: var(--sage); font-weight: 400; font-size: .8em; }

/* --------------------------------------------------------------- CTA final */

.cta-final { background: var(--ink); color: var(--cream); padding-block: clamp(4.5rem, 10vw, 8rem); position: relative; overflow: hidden; }
.cta-final::before {
  content: ''; position: absolute; right: -12%; top: -30%;
  width: 60vw; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgb(186 164 143 / .16), transparent 62%);
}
.cta-final-in { position: relative; text-align: center; max-width: 44ch; }
.cta-final .kicker { justify-content: center; color: var(--sand); }
.cta-final .kicker::before { display: none; }
.cta-final-t { font-size: clamp(2.4rem, 6.6vw, 4.4rem); color: var(--cream); }
.cta-final-t em { color: var(--sand-l); }
.cta-final-p { margin: 1.5rem 0 2.2rem; color: var(--txt-2); }
.cta-final .cta-row { justify-content: center; }

/* --------------------------------------------------------------- footer */

.ftr { background: var(--ink-2); color: var(--txt-2); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem; font-size: .92rem; }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 900px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-top { grid-template-columns: 1fr; } }
.ftr-brand { --wm-size: 2rem; }
.ftr-brand p { margin-top: 1.4rem; max-width: 36ch; font-size: .92rem; }
.ftr-note { color: var(--sand-l); }
.ftr-note b { color: var(--cream); }
.ftr h3 { font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); font-weight: 600; margin-bottom: 1.1rem; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--cream); }
.ftr address { font-style: normal; line-height: 1.7; }
.ftr-hours { margin-top: 1.1rem; }
.ftr-hours b { color: var(--cream); }
.ftr-bot {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgb(255 255 255 / .09);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--txt-3);
}
.ftr-bot p { margin: 0; }

/* ------------------------------------------------------------ apparitions */

.rev { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.rev.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rev { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------- utilitaires */

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3.2rem); }
.mt-4 { margin-top: clamp(3rem, 6vw, 4.5rem); }
.center { text-align: center; }
.lead { font-size: 1.18em; line-height: 1.55; color: var(--txt-2); }
.lead-serif { font-family: var(--serif); font-size: clamp(1.3rem, 2.8vw, 1.85rem); line-height: 1.35; letter-spacing: -.015em; color: var(--txt); }
.small { font-size: .85rem; color: var(--txt-3); }