@charset "utf-8";

/* ============================================================
   Noon Club — couche « identité »
   Chargée après style.css. Regroupe la signature de marque
   (monogramme, filets, arches, icônes), les composants
   éditoriaux et les animations.
   ============================================================ */

:root {
  --ico: 1.15rem;
  --duree: .7s;
  --courbe: cubic-bezier(.22, .8, .24, 1);
}

/* ==========================================================  icônes  === */

.ico {
  width: var(--ico); height: var(--ico);
  flex: none;
  display: block;
  overflow: visible;
}

/* ====================================================  monogramme  ===== */

/* Les deux « o » du logo, réduits à un signe. Sert de puce, de séparateur
   et de filigrane : c'est la marque répétée à petite dose partout. */
.mono {
  display: inline-flex; align-items: center;
  --m: .62rem;
}
.mono i {
  width: var(--m); height: var(--m);
  border: 1.4px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: none;
}
.mono i + i { margin-left: calc(var(--m) * -.16); margin-top: calc(var(--m) * .3); }
.mono i::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 1.7px; height: 1.7px; border-radius: 50%;
  background: currentColor;
}

/* ======================================================  filets  ======= */

/* Le séparateur du site est une arche couchée : deux quarts de cercle qui
   montent vers le monogramme, au lieu du trait droit habituel. Il se dessine
   de l'extérieur vers le centre quand il entre dans le champ — un trait
   qu'on tire à la main, pas un élément qui apparaît. */
.sep {
  display: flex; align-items: flex-start; justify-content: center;
  color: var(--sand-m);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
.sep::before, .sep::after {
  content: '';
  flex: 0 1 clamp(3.5rem, 20vw, 13rem);
  height: clamp(1.1rem, 2.4vw, 1.9rem);
  border-top: 1px solid currentColor;
  opacity: .5;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.2s var(--courbe);
}
/* Les deux quarts de cercle montent vers le centre : le filet culmine sous
   le monogramme, comme un cintre. Arrondir le coin extérieur donnerait la
   courbe inverse — une guirlande qui descend, jolie mais étrangère au
   vocabulaire du lieu. */
.sep::before { border-radius: 100% 0 0 0 / 100% 0 0 0; }
.sep::after {
  border-radius: 0 100% 0 0 / 0 100% 0 0;
  clip-path: inset(0 100% 0 0);
  transition-delay: .08s;
}
.sep.is-in::before, .sep.is-in::after { clip-path: inset(0 0 0 0); }
.sep .mono { opacity: 0; margin-inline: .75rem; margin-top: -.55rem; transition: opacity .6s .45s ease; }
.sep.is-in .mono { opacity: 1; }

/* ====================================  carte tarif mise en avant  ====== */

/* La carte « phare » s'inverse en ink pour ressortir sur fond clair. Posée
   sur une section sombre, cette inversion la fait disparaître : mesuré sur
   le rendu, son fond ET celui de la section valaient tous deux #17140f, la
   carte la plus importante de la grille n'avait donc plus de contour. Sur
   fond sombre elle prend le sable de la marque et redéfinit ses jetons —
   comme toute surface qui change de contexte de couleur. */
.bg-ink .tcard.is-phare {
  background: var(--sand); border-color: var(--sand);
  --txt: #17140f;   /* 8,7:1 sur le sable */
  --txt-2: #3a3128; /* 5,3:1 */
  --txt-3: #40382e; /* 4,8:1 — #4a4036 tombait à 4,2:1, sous le seuil AA */
  --line: rgb(23 20 15 / .22);
  color: var(--txt);
}
.bg-ink .tcard.is-phare h3 { color: var(--txt); }
.bg-ink .tcard.is-phare .tcard-badge { background: var(--ink); color: var(--sand-l); }

/* ================================================  sous-titre  ========= */

/* Étiquette de groupe à l'intérieur d'une section : elle sépare « Pour
   essayer », « Les carnets » et « Les abonnements » dans la grille de tarifs.
   Sans règle, ces trois lignes tombaient en texte courant au milieu des
   cartes — le défaut ne se voit que sur le rendu, jamais au build. */
.soutitre {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--sand-d);
  margin: 0 0 1.4rem;
  display: flex; align-items: center; gap: .6rem;
}
.soutitre::before {
  content: ''; width: 1.6rem; height: 1px; background: currentColor; flex: none;
}
.bg-ink .soutitre { color: var(--sand); }

/* ==========================================  cartes de contact  ======== */

/* Les blocs adresse / téléphone / réservation prennent la même icône au
   trait que le reste du site : elle hérite de `currentColor`, donc elle
   suit les jetons du contexte sans réglage. */
.coord > .ico { --ico: 1.2rem; color: var(--sand-d); margin-bottom: .85rem; }

/* Même geste dans le bandeau de garanties de l'accueil, sur fond sombre :
   la couleur vient du jeton `--sand`, pas d'une valeur codée en dur. */
.rass .ico { --ico: 1.2rem; color: var(--sand); margin-bottom: .8rem; }

/* ===============================================  barre haute  ========= */

.topbar {
  background: var(--ink);
  color: #a99e8e;
  font-size: .76rem;
  border-bottom: 1px solid rgb(246 241 234 / .08);
}
.topbar-in {
  width: min(100% - 2 * var(--pad), 1240px);
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 2.6rem;
}
.topbar-lieu {
  margin: 0; display: flex; align-items: center; gap: .5rem;
  letter-spacing: .04em;
}
.topbar-lieu svg { width: .95rem; height: .95rem; flex: none; color: var(--sand); }
.topbar-lieu b { color: var(--sand-l); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; }
.topbar-sep { font-style: normal; opacity: .4; }
.topbar-h { white-space: nowrap; }

.socios { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.socios a {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .55rem; border-radius: 999px;
  text-decoration: none; color: inherit;
  transition: color .3s var(--courbe), background .3s var(--courbe), transform .3s var(--courbe);
}
.socios svg { width: 1.02rem; height: 1.02rem; }
.socios-txt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.socios a:hover { color: var(--cream); background: rgb(246 241 234 / .1); transform: translateY(-1px); }

@media (max-width: 720px) {
  .topbar-h, .topbar-sep { display: none; }
  .topbar-lieu { font-size: .7rem; }
  .topbar-in { min-height: 2.3rem; }
}
@media (max-width: 420px) {
  .topbar-lieu span:not(.topbar-h) { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ===================================================  menu  ============ */

.menu-kicker {
  font-size: .68rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 clamp(1.4rem, 4vh, 2.4rem);
  opacity: 0; transform: translateY(10px);
  animation: menuEntree .6s var(--courbe) .05s forwards;
}
.menu-list { width: 100%; }
.menu-list li {
  opacity: 0; transform: translateY(14px);
  animation: menuEntree .55s var(--courbe) forwards;
  animation-delay: calc(.08s + var(--i) * .055s);
}
.menu-list a {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  column-gap: .2rem;
  padding: .5em 0 .55em;
  font-size: clamp(1.7rem, 6.4vw, 2.5rem);
}
.menu-n {
  font-family: var(--sans); font-size: .34em; font-weight: 500;
  letter-spacing: .1em; color: var(--sand);
  transition: color .3s var(--courbe);
}
.menu-l { display: block; }
.menu-note {
  grid-column: 2; font-family: var(--sans); font-size: .3em;
  letter-spacing: .06em; color: #8d8375; margin-top: .35em;
  transition: color .3s var(--courbe);
}
.menu-list a:hover { padding-left: .22em; }
.menu-list a:hover .menu-n { color: var(--cream); }
.menu-list a:hover .menu-note { color: var(--sand-l); }

.menu-cta {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  padding: .9rem 1.6rem; border-radius: 999px;
  background: var(--cream); color: var(--ink);
  text-decoration: none; font-size: .92rem; font-weight: 500;
  opacity: 0; transform: translateY(14px);
  animation: menuEntree .55s var(--courbe) forwards;
  animation-delay: calc(.08s + var(--i) * .055s);
  transition: background .3s var(--courbe);
}
.menu-cta svg { width: 1.05rem; height: 1.05rem; transition: transform .35s var(--courbe); }
.menu-cta:hover { background: var(--sand-l); }
.menu-cta:hover svg { transform: translateX(4px); }

.menu-foot {
  margin-top: clamp(2rem, 6vh, 3.2rem);
  opacity: 0; transform: translateY(14px);
  animation: menuEntree .55s var(--courbe) forwards;
  animation-delay: calc(.08s + var(--i) * .055s);
}
.menu-tel { font-size: 1.5rem; }
.menu-foot .socios { margin-top: 1.1rem; margin-left: -.55rem; }
.menu-foot .socios a { color: #8d8375; }
.menu-foot .socios a:hover { color: var(--cream); }

@keyframes menuEntree { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-kicker, .menu-list li, .menu-cta, .menu-foot { animation: none; opacity: 1; transform: none; }
}

/* ============================================  bandeau de faits  ======= */

.faits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden;
}
.faits li {
  background: var(--paper);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  display: grid; gap: .1rem;
  transition: background .4s var(--courbe);
}
.faits li:hover { background: var(--cream); }
.faits .ico { --ico: 1.35rem; color: var(--sand-d); margin-bottom: .8rem; }
.faits b {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.1; letter-spacing: -.02em;
}
.faits span { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); margin-top: .35rem; }

.bg-ink .faits { background: rgb(246 241 234 / .16); border-color: rgb(246 241 234 / .16); }
.bg-ink .faits li { background: var(--ink); }
.bg-ink .faits li:hover { background: var(--ink-2); }

/* ============================================  grille d'icônes  ======== */

.gicos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.gico { display: grid; gap: .1rem; }
.gico-ico {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--sand-d); margin-bottom: 1.1rem;
  transition: background .45s var(--courbe), color .45s var(--courbe), border-color .45s var(--courbe), transform .45s var(--courbe);
}
.gico-ico .ico { --ico: 1.3rem; }
.gico:hover .gico-ico { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-3px) rotate(-4deg); }
.gico h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.gico p { font-size: .94em; color: var(--txt-2); margin: 0; }

.bg-ink .gico-ico { border-color: rgb(246 241 234 / .24); color: var(--sand); }
.bg-ink .gico:hover .gico-ico { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* ==============================================  comparatif  =========== */

.compa { border-top: 2px solid var(--ink); }
.compa-tete, .compa-ligne {
  display: grid; grid-template-columns: minmax(7rem, 1.1fr) 1fr 1fr;
  gap: clamp(.8rem, 2.5vw, 2rem);
  align-items: baseline;
  padding-block: 1.05rem;
}
.compa-ligne { border-top: 1px solid var(--line-2); }
.compa-tete { padding-block: 1rem; }
.compa-col {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 600; color: var(--txt-3); margin: 0;
}
.compa-col-b { color: var(--sand-d); }
.compa-crit {
  font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--txt-3); margin: 0;
}
.compa-ligne p { font-size: .95em; color: var(--txt-2); margin: 0; }
.compa-ligne .compa-b { color: var(--txt); font-weight: 500; }
.compa-note { margin: 1.4rem 0 0; font-size: .85rem; color: var(--txt-3); }
@media (max-width: 680px) {
  .compa-tete { display: none; }
  .compa-ligne { grid-template-columns: 1fr; gap: .3rem; padding-block: 1.2rem; }
  .compa-ligne p::before { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); display: block; margin-bottom: .15rem; }
  .compa-ligne p:nth-child(2)::before { content: attr(data-col); }
  .compa-ligne .compa-b::before { content: attr(data-col); }
}

/* =================================================  frise  ============= */

.frise {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.frise-i { position: relative; padding-top: 2rem; }
.frise-i::before {
  content: ''; position: absolute; top: .42rem; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.frise-i:last-child::before { background: linear-gradient(to right, var(--line) 40%, transparent); }
.frise-pt {
  position: absolute; top: 0; left: 0;
  width: .85rem; height: .85rem; border-radius: 50%;
  border: 1.4px solid var(--sand-d); background: var(--cream);
  transition: background .4s var(--courbe), transform .4s var(--courbe);
}
.frise-i:hover .frise-pt { background: var(--ink); border-color: var(--ink); transform: scale(1.18); }
.frise-quand {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand-d); margin: 0 0 .5rem;
}
.frise-i h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.frise-txt { font-size: .93em; color: var(--txt-2); margin: 0; }
.bg-ink .frise-pt { background: var(--ink); }

/* ================================================  repères  ============ */

.reperes { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.reperes li {
  display: grid; grid-template-columns: 2.8rem 1fr; gap: 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-2);
  align-items: start;
}
.reperes li:first-child { border-top: 0; padding-top: 0; }
.reperes-n {
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  border: 1px solid var(--sand-m); color: var(--sand-d);
  display: grid; place-items: center;
  transition: background .4s var(--courbe), color .4s var(--courbe), border-color .4s var(--courbe);
}
.reperes li:hover .reperes-n { background: var(--sand); color: var(--ink); border-color: var(--sand); }
.reperes h3 { font-size: 1.14rem; margin-bottom: .3rem; }
.reperes p { font-size: .93em; color: var(--txt-2); margin: 0; }
.bg-ink .reperes-n { border-color: rgb(246 241 234 / .3); color: var(--sand); }

/* ===============================================  pastilles  =========== */

.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pastilles li {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .58rem 1.05rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: .86rem; color: var(--txt-2);
  transition: border-color .35s var(--courbe), transform .35s var(--courbe), background .35s var(--courbe);
}
.pastilles li:hover { border-color: var(--sand-m); transform: translateY(-2px); background: var(--cream); }
.pastilles .ico { --ico: 1.05rem; color: var(--sand-d); }
.bg-ink .pastilles li { background: transparent; }

/* ==========================================  bloc de citation  ========= */

.citbloc {
  position: relative; isolation: isolate; margin: 0;
  padding: clamp(2rem, 5vw, 3.4rem);
  border: 1px solid var(--line); border-radius: var(--r-l);
  background: var(--cream-2);
  overflow: hidden;
}
.mono-filigrane {
  position: absolute; right: -1.5rem; top: -1.5rem; z-index: -1;
  --m: 9rem; color: var(--sand); opacity: .18;
}
.mono-filigrane i { border-width: 5px; }
.mono-filigrane i::after { width: 12px; height: 12px; }
.citbloc blockquote {
  margin: 0 0 1.2rem; font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.32; letter-spacing: -.015em;
  max-width: 30ch;
}
.citbloc figcaption { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--txt-3); }

/* ==============================  arche décorative de section  ========== */

/* Rappel des miroirs en arche du studio : une arche pleine, très discrète,
   posée derrière le contenu d'une section. */
.arche-deco { position: relative; isolation: isolate; overflow: hidden; }
.arche-deco::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: -6%; translate: -50% 0;
  width: min(52vw, 640px); aspect-ratio: 3/4;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  border: 1px solid var(--line);
  opacity: .8;
}
.bg-ink .arche-deco::before { border-color: rgb(246 241 234 / .12); }

/* ======================================  encart « le geste »  ========== */

.geste {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.8rem);
  align-items: start;
  padding: clamp(1.3rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 2.1rem);
  border-left: 3px solid var(--sand);
  background: var(--cream-2);
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.geste .ico { --ico: 1.5rem; color: var(--sand-d); margin-top: .18rem; }
.geste h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.geste p { font-size: .94em; color: var(--txt-2); margin: 0; }
.bg-ink .geste { background: rgb(246 241 234 / .05); border-left-color: var(--sand); }

/* ============================================  animations  ============= */

/* Révélation : plus lente et plus douce que le réglage d'origine, avec un
   très léger flou qui se dissipe — l'effet « respiration » demandé. */
.rev {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 1s var(--courbe),
    transform 1s var(--courbe),
    filter 1s var(--courbe);
}
.rev.is-in { opacity: 1; transform: none; filter: none; }

/* Décalage en cascade des enfants directs d'un bloc révélé. */
.rev-cascade > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s var(--courbe), transform .85s var(--courbe);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.rev-cascade.is-in > * { opacity: 1; transform: none; }

/* Parallaxe très légère sur les visuels de section (piloté en JS). */
.para { will-change: transform; }

/* Le monogramme du logo cligne des yeux, doucement, de temps en temps. */
@keyframes clin {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.12); }
}
.brand:hover .wm-eye::after,
.brand:focus-visible .wm-eye::after { animation: clin 2.6s var(--courbe) infinite; }
.brand:hover .wm-eye2::after { animation-delay: .12s; }

/* Les boutons prennent une ombre chaude au survol plutôt qu'un simple saut. */
.btn { position: relative; }
.btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 10px 26px -12px rgb(23 20 15 / .45);
  opacity: 0; transition: opacity .35s var(--courbe);
  pointer-events: none;
}
.btn:hover::after { opacity: 1; }

/* Les liens de navigation glissent au lieu de clignoter. */
.nav a span { display: inline-block; transition: transform .35s var(--courbe); }
.nav a:hover span { transform: translateY(-1px); }

/* Les images de section respirent légèrement au survol de leur bloc. */
.ph img { transition: transform 1.4s var(--courbe), filter 1.4s var(--courbe); }
.split:hover .ph img, .ph:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .rev, .rev-cascade > * { opacity: 1; transform: none; filter: none; transition: none; }
  .para { transform: none !important; }
  .brand:hover .wm-eye::after { animation: none; }
  .ph img { transition: none; }
  .split:hover .ph img, .ph:hover img { transform: none; }
}

/* =======================================================================
   EMPREINTE — la matière du lieu
   =======================================================================

   Tout ce qui suit vient de deux observations du studio, et de rien d'autre :

   1. LES MIROIRS EN ARCHE. La forme se répète à toutes les échelles — la
      niche d'une icône, l'ouverture d'une section, le cadre d'une photo.
      C'est le signe qui rend le site reconnaissable sans logo.
   2. LA VITRINE SUR RUE. Une lumière rasante entre par la gauche et se perd
      vers la droite. Les fonds cessent d'être des aplats : ils ont une
      source. Rien n'est centré ni symétrique, parce que la lumière ne l'est
      pas.

   Le troisième principe est une soustraction : aucun élément ne « saute »
   au survol. Dans un lieu qui vend le calme, une carte qui bondit de quatre
   pixels avec une ombre portée est un contresens. Les choses se réchauffent,
   s'éclairent, se posent — elles ne sursautent pas.
   ======================================================================= */

:root {
  /* L'arche, déclinée en trois tailles. Le rapport hauteur/largeur du
     cintre est constant : c'est ce qui fait qu'on la reconnaît partout. */
  --arche-s: 50% 50% 18% 18% / 44% 44% 12% 12%;
  --arche-m: 50% 50% 10% 10% / 32% 32% 5% 5%;
  --lumiere: rgb(255 253 250 / .85);

  /* Hauteur de l'en-tête collant (barre haute + bandeau de marque), mesurée
     au rendu : 121 px à partir de 880 px de large, où elle ne bouge plus.
     Sert à décaler tout ce qui doit s'arrêter sous l'en-tête. */
  --hdr-h: 7.6rem;
}

/* ---------------------------------------------------  le grain  -------- */

/* Un bruit fin, fixe, sur toute la page. C'est ce qui sépare une surface
   imprimée d'un aplat d'écran : à 4 % il ne se voit pas, il se sent. Fixe et
   non solidaire du scroll : le grain appartient à l'écran, comme le grain
   d'un papier appartient à la feuille, pas à ce qui est écrit dessus.

   La tuile est une image raster (`build-assets.py`), surtout pas un filtre
   SVG `feTurbulence` : mesuré, le filtre fait recalculer le bruit à chaque
   repeint et fige le rendu au défilement. Une image, le compositeur la pose
   sans rien calculer. */
/* Au-dessus de l'en-tête (100) et du menu (95), sous le lien d'évitement
   (200) : sinon la barre de navigation serait le seul élément de la page
   sans grain, et ça se verrait. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 150;
  pointer-events: none;
  opacity: .25;
  background-image: url('../img/grain.png');
  background-repeat: repeat;
  background-size: 128px 128px;
}

/* ------------------------------------------------  la lumière  --------- */

/* La vitrine est à gauche. La clarté part de là, en biais, et s'éteint bien
   avant le bord droit — d'où le centre à 14 % et l'arrêt à 58 %.

   Volontairement PAS en `background-attachment: fixed` : sur un dégradé
   pleine page, cette propriété force un repeint complet à chaque frame de
   défilement. La lumière reste donc solidaire du haut du document, ce qui
   est de toute façon plus juste — le jour entre par la devanture, à
   l'entrée, pas au milieu de la page. */
body {
  background-image:
    radial-gradient(128% 78% at 14% -12%, var(--lumiere), transparent 58%);
  background-repeat: no-repeat;
  background-size: 100% 130vh;
}

/* Sur fond sombre, la même lumière devient un halo sable : le noir du
   plafond du studio n'est jamais un noir mort, il reçoit la lampe. */
.bg-ink, .ftr, .cta-final { position: relative; isolation: isolate; }
/* Densités plafonnées à 9 % et 6 %, pas plus. Un halo est un fond, donc il
   entre dans le calcul de contraste — et le jeton `--txt-3` sur fond sombre
   tombait à 4,4:1 (sous AA) là où les deux halos et le grain se cumulent.
   À ces valeurs il tient à 4,9:1 dans ce cas, qui ne peut de toute façon
   pas se produire : les deux sources sont à des coins opposés. */
.bg-ink::after, .ftr::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(96% 62% at 12% -8%, rgb(186 164 143 / .09), transparent 60%),
    radial-gradient(60% 46% at 88% 108%, rgb(124 135 104 / .06), transparent 62%);
}

/* -----------------------------------------------  les onglets  -------- */

/* Les filtres cessent d'être des pilules noires : ils deviennent une rangée
   de petites arches posées sur une cimaise — les miroirs du studio alignés
   le long d'un mur. L'onglet actif n'est plus « rempli en noir » ; il
   s'éclaire et mange le filet, comme un onglet de classeur qui passe devant.
   Le geste est le même que partout ailleurs : on éclaire, on ne remplit pas. */
.chips.is-onglets {
  gap: .2rem;
  border-bottom: 1px solid var(--line);
  align-items: flex-end;
}
.is-onglets .chip {
  position: relative;
  border-radius: var(--arche-s);
  border-bottom: 0;
  margin-bottom: -1px;
  padding: .72rem 1.2rem .62rem;
  background: transparent;
  transition:
    background-color .4s var(--courbe),
    color .4s var(--courbe),
    border-color .4s var(--courbe);
}
/* Le segment de cimaise que l'onglet recouvre : transparent au repos, il
   prend la couleur de l'onglet actif pour l'ouvrir sur le contenu. */
.is-onglets .chip::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
  transition: background-color .4s var(--courbe);
}
.is-onglets .chip:hover { color: var(--ink); border-color: var(--sand-m); }
.is-onglets .chip[aria-pressed='true'] {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}
.is-onglets .chip[aria-pressed='true']::after { background: var(--paper); }

/* --------------------------------------------  colonne collante  ------ */

/* Le bloc d'introduction reste en place pendant que la colonne d'avis
   défile à côté : on lit la note globale en même temps que les avis qui la
   justifient, au lieu de la perdre au premier écran.

   Ne s'applique qu'à partir de deux colonnes. En dessous, les deux blocs
   sont empilés : rien ne défilerait « à côté », et un bloc collant ne ferait
   que manger la hauteur d'écran. */
@media (min-width: 881px) {
  .split-body.is-collant {
    position: sticky;
    top: calc(var(--hdr-h) + 1.6rem);
    align-self: start;
  }
}

/* ------------------------------------------  marque de l'éditeur  ------ */

/* Le logotype de Planity est posé à la hauteur d'x du texte qui l'annonce,
   jamais plus gros : c'est une mention de provenance, pas un partenariat
   mis en avant. Il hérite de `currentColor`, donc il prend le gris du texte
   courant et ne vient pas crier dans la page. */
.logo-planity { height: .85em; width: auto; display: inline-block; vertical-align: -.06em; }

.planity-par,
.note-source {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; font-size: .8rem; color: var(--txt-3);
}
.note-source { margin-top: .7rem; }
.planity-par .logo-planity,
.note-source .logo-planity { color: var(--txt-2); }

/* -----------------------------------------------  le menu  ------------ */

/* Le menu plein écran était la seule grande surface sombre du site à n'avoir
   ni lumière ni arche : un aplat noir avec une liste dessus. Il reçoit donc
   le même traitement que les sections sombres — la lampe dans l'angle — plus
   une arche en grand, très pâle, qui cadre la liste. Le studio, en somme,
   vu de l'intérieur. */
/* Surtout PAS de `position: relative` ici : `.menu` est déjà en `fixed` dans
   `style.css`, et cette feuille étant chargée après, elle l'écraserait — le
   calque plein écran redeviendrait un bloc dans le flux. Un élément
   positionné sert déjà de référence à ses enfants absolus ; seul
   l'`isolation` est nécessaire, pour que les z-index négatifs des halos
   restent enfermés dans le menu. */
.menu { isolation: isolate; }

/* L'apparition : le calque descend, son bord d'attaque courbé — une arche
   qui s'ouvre vers le bas plutôt qu'un fondu. Le mouvement est lent (0,62 s)
   et décéléré : dans un lieu qui vend le calme, un menu ne claque pas.
   `clip-path` sur une ellipse dont on fait croître le rayon vertical : une
   seule propriété, animée par le compositeur. */
@keyframes menuOuvre {
  from { clip-path: ellipse(150% 0% at 50% 0%); }
  to   { clip-path: ellipse(150% 100% at 50% 0%); }
}
.menu { animation: menuOuvre .62s var(--courbe); }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: fade .2s ease; }
}

.menu::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(88% 56% at 14% -6%, rgb(186 164 143 / .09), transparent 60%),
    radial-gradient(62% 44% at 86% 106%, rgb(124 135 104 / .06), transparent 62%);
}
/* L'arche n'a ni fond de caisse ni pied : refermée en bas, elle lisait comme
   un rectangle posé en travers de la liste. Ouverte, elle redevient une
   voûte — et ses montants s'effacent en descendant. */
.menu::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 46%; translate: -50% -50%;
  width: min(80vw, 460px); aspect-ratio: 3 / 4;
  border: 1px solid rgb(246 241 234 / .08);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 40%, transparent 92%);
}

/* Les filets de la liste passent du blanc pur au sable : le menu appartient
   à la même palette que le reste, il n'est pas un écran à part. */
.menu-list a { border-bottom: 1px solid rgb(186 164 143 / .16); }

/* Au survol, une petite arche vient se poser à gauche du numéro — le même
   signe que la niche des icônes, à l'échelle d'une puce. L'entrée ne se
   décale plus par un `padding` sec : elle respire. */
.menu-list a { position: relative; transition: padding-left .45s var(--courbe); }
.menu-list a::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: .85rem; height: .5rem; translate: -1.5rem -50%;
  border: 1px solid var(--sand); border-bottom: 0;
  border-radius: var(--arche-m);
  opacity: 0;
  transition: opacity .45s var(--courbe), translate .45s var(--courbe);
}
.menu-list a:hover, .menu-list a:focus-visible { padding-left: 1.5rem; }
.menu-list a:hover::before, .menu-list a:focus-visible::before {
  opacity: 1; translate: 0 -50%;
}
.menu-list a[aria-current] .menu-n { color: var(--cream); }

/* Le pied du menu : le téléphone est l'action de repli, il doit se lire
   comme telle — pas comme une ligne de texte parmi d'autres. */
.menu-foot { display: grid; gap: .55rem; padding-top: clamp(1.2rem, 3vh, 1.8rem); border-top: 1px solid rgb(186 164 143 / .16); }
.menu-tel { display: inline-flex; align-items: center; gap: .6rem; width: fit-content; transition: color .3s var(--courbe); }
.menu-tel .ico { --ico: .85em; color: var(--sand); }
.menu-tel:hover { color: var(--sand-l); }
.menu-foot p { margin: 0; line-height: 1.75; }

/* -------------------------------------------  la niche d'icône  -------- */

/* Le cercle parfait devient une arche : chaque icône est posée dans une
   petite niche, comme les miroirs cintrés de la salle. */
.gico-ico {
  border-radius: var(--arche-s);
  background: linear-gradient(178deg, rgb(255 253 250 / .9), transparent 78%);
}
.gico:hover .gico-ico {
  transform: none;
  background: var(--sand);
  color: var(--ink);
  border-color: var(--sand);
}
.bg-ink .gico-ico { background: linear-gradient(178deg, rgb(246 241 234 / .06), transparent 76%); }
.bg-ink .gico:hover .gico-ico { background: var(--sand); color: var(--ink); border-color: var(--sand); }

/* La même niche, en petit, sur les pastilles et le bandeau de faits. */
.faits li { position: relative; }
.faits li::before {
  content: ''; position: absolute; left: clamp(1.2rem, 2.6vw, 1.8rem); top: 0;
  width: 2.1rem; height: .5rem;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--arche-m);
  opacity: 0; transition: opacity .5s var(--courbe);
}
.faits li:hover::before { opacity: 1; }

/* -----------------------------------------------  les liserés  --------- */

/* Un filet d'ouverture de chapitre : le trait fin de la reliure, amorcé par
   un segment de sable. Il ne sert que là où deux sections de même fond se
   suivent — sans lui, rien ne dit au lecteur qu'un sujet se ferme et qu'un
   autre s'ouvre. Ailleurs, le changement de fond fait le travail et le
   filet ne serait que de la décoration.

   Volontairement SANS arche : essayée, elle lit comme une salissure à cette
   taille, et elle redouble à la fois le tiret du kicker juste en dessous et
   l'arche du séparateur. L'arche est le signe des moments forts ; ici on
   veut le plus discret des marqueurs. */
.liseret {
  position: relative;
  height: 1px;
  background: var(--line);
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.liseret::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 4.2rem; height: 1px; background: var(--sand-m);
}
.liseret.is-center::before { left: 50%; translate: -50% 0; }

/* ------------------------------------  le repos des composants  -------- */

/* Plus de saut au survol nulle part. Une carte se réchauffe : son filet
   prend le sable, son fond gagne un souffle de lumière. C'est la seule
   règle de survol du site, déclinée. */
.tcard, .avis {
  transition:
    border-color .55s var(--courbe),
    background-color .55s var(--courbe),
    box-shadow .55s var(--courbe);
}
.tcard:hover, .avis:hover {
  transform: none;
  border-color: var(--sand-m);
  box-shadow: 0 18px 44px -34px rgb(23 20 15 / .5);
}
.tcard:hover { background-color: var(--cream); }
.bg-ink .tcard:not(.is-phare):hover { background-color: var(--paper); }
.tcard.is-phare:hover { border-color: var(--sand-l); background-color: var(--ink-2); }
.bg-ink .tcard.is-phare:hover { background-color: var(--sand-l); border-color: var(--sand-l); }

/* Le bouton ne se soulève plus : il s'enfonce très légèrement, comme un
   galet qu'on presse. */
.btn:hover { transform: none; }
.btn:active { transform: translateY(1px); }

/* Les photos en arche gagnent un très fin liseré intérieur, comme le
   chambranle d'un miroir. */
.ph.arch { position: relative; }
.ph.arch::after {
  content: ''; position: absolute; inset: .5rem;
  border: 1px solid rgb(246 241 234 / .22);
  border-radius: var(--arch);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .faits li::before { transition: none; }
}