/* O'Vestiaire — base, typographie, utilitaires, composants partagés */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--alv-bg);
  color: var(--alv-ink);
  font: 400 var(--alv-fs-body)/1.6 var(--alv-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--alv-gold-solid); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--alv-red); color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mise en page ---------- */
.wrap { width: 100%; max-width: calc(var(--alv-max) + 2 * var(--alv-gutter)); margin-inline: auto; padding-inline: var(--alv-gutter); }
.section { position: relative; padding-block: var(--alv-section-y); }
.section--raised { background: var(--alv-bg-raised); }
.hairline { height: 1px; background: var(--alv-hair); border: 0; margin: 0; }

/* ---------- Typographie ---------- */
.display, h1, h2, h3 {
  font-family: var(--alv-font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--alv-track-display);
  margin: 0;
  color: var(--alv-cream);
}
.h-hero { font-size: var(--alv-fs-hero); line-height: .91; }
.h-section { font-size: var(--alv-fs-h2); line-height: .85; }
.h-section--sm { font-size: var(--alv-fs-h2-sm); line-height: .9; }
.h-card { font-size: var(--alv-fs-h3); line-height: .85; letter-spacing: -.05em; }
.h-small { font-size: var(--alv-fs-h4); line-height: 1.12; letter-spacing: -.01em; } /* capitales accentuées Bevan sur 2 lignes */
.gold {
  background: var(--alv-gold);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 100% 100%;
}
.gold.is-sheen, .sheen-play .gold {
  background-image: var(--alv-gold-sheen);
  background-size: 260% 100%;
  animation: alv-sheen 2.4s var(--alv-ease-in-out) .2s 1 both;
}
@keyframes alv-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.red { color: var(--alv-red); }
.yellow { color: var(--alv-yellow); }
.cream { color: var(--alv-cream); }
.lead { font-size: var(--alv-fs-body); line-height: 1.6; color: var(--alv-ink); max-width: 34ch; margin: 0; }
p { margin: 0 0 1em; }

/* Étiquette de section : capitales condensées sur le bandeau doré peint au pinceau (code de la carte) */
.kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font: 700 var(--alv-fs-label)/1 var(--alv-font-label);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--alv-ink);
  margin: 0 0 22px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .8; }
.kicker--red { color: #EFE4CC; }
.kicker--red::before { background: var(--alv-red); opacity: 1; }
.kicker--gold::before { background: var(--alv-gold-solid); }
.kicker--brush {
  position: relative; padding: 10px 36px 9px 26px; color: #2A0D08; gap: 0; /* le texte s’arrête avant la queue du pinceau */
}
.kicker--brush::before {
  content: ""; position: absolute; inset: -4px -14px; width: auto; height: auto; opacity: 1;
  background: url("../img/marque/pinceau-or-1.png") center / 100% 100% no-repeat;
  z-index: -1;
}
.kicker--brush.v2::before { background-image: url("../img/marque/pinceau-or-2.png"); }
.kicker--brush.v3::before { background-image: url("../img/marque/pinceau-or-3.png"); }
.kicker--brush.v4::before { background-image: url("../img/marque/pinceau-or-4.png"); }
.kicker--brush { isolation: isolate; }

.label {
  font: 700 var(--alv-fs-label)/1.3 var(--alv-font-label);
  letter-spacing: var(--alv-track-label); text-transform: uppercase;
}

/* ---------- Boutons et liens ---------- */
.btn {
  --h: 50px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 22px; border-radius: 12px; overflow: hidden; isolation: isolate;
  font: 700 13px/1 var(--alv-font-label); letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--alv-dur-xs) var(--alv-ease-out), background-color var(--alv-dur-s), box-shadow var(--alv-dur-s) var(--alv-ease-out), border-color var(--alv-dur-s);
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform var(--alv-dur-s) var(--alv-ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.975); }
.btn::after { /* reflet qui balaie le bouton au survol */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 220, .28) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .8s var(--alv-ease-out);
}
.btn:hover::after { transform: translateX(120%); }
.btn--red { background: var(--alv-red); color: #fff; box-shadow: var(--alv-shadow-red); }
.btn--red:hover { background: var(--alv-red-hover); }
.btn--red .accent { color: var(--alv-yellow); }
.btn--ghost { border-color: var(--alv-line); color: var(--alv-ink); background: rgba(10, 9, 4, .35); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--alv-gold-solid); box-shadow: var(--alv-glow-gold); }
.btn--gold { background: var(--alv-gold-fill); color: #1A1206; box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .75); }
.btn--dark { background: var(--alv-bg); color: var(--alv-ink); }
.btn--noir-or { background: #0A0904; color: var(--alv-gold-solid); border-color: var(--alv-gold-solid); box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .75); } /* noir et or (retour de Françoise, 06/10) */
.btn--sm { --h: 44px; padding: 0 16px; font-size: 12px; }

.link {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 8px;
  font: 700 13px/1 var(--alv-font-label); letter-spacing: .13em; text-transform: uppercase;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--alv-red);
  transform-origin: right; transition: transform .5s var(--alv-ease-out);
}
.link:hover::after { transform: scaleX(0); transform-origin: right; animation: alv-underline .6s var(--alv-ease-out) .15s forwards; }
@keyframes alv-underline { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.link svg { width: 14px; height: 14px; transition: transform var(--alv-dur-s) var(--alv-ease-out); }
.link:hover svg { transform: translateX(4px); }

/* ---------- Cartes ---------- */
.card {
  position: relative; background: var(--alv-surface); border: 1px solid var(--alv-line);
  border-radius: 16px; box-shadow: var(--alv-shadow-1);
  transition: transform var(--alv-dur-hover) var(--alv-ease-out), box-shadow var(--alv-dur-hover) var(--alv-ease-out), border-color .4s;
}
/* survol réel + focus clavier d'un lien contenu : même état */
@media (hover: hover) { .card:hover { transform: translateY(-6px); box-shadow: var(--alv-shadow-2), var(--alv-glow-gold); border-color: rgba(247, 219, 142, .8); } }
.card:has(:focus-visible) { transform: translateY(-6px); box-shadow: var(--alv-shadow-2), var(--alv-glow-gold); border-color: rgba(247, 219, 142, .8); }
.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--alv-ease-out); }
.card:hover .media img, .media:hover img { transform: scale(1.05); }
/* Photos posées (plats, clients) : bords arrondis, voile à l'apparition (data-clip), léger envol + zoom au survol.
   Remplacent les polaroïds, retirés à la demande d'Aurélien (06/10). */
.shot, .pg-shot, .tartare-shot, .guest, .matchs__guest { margin: 0; border-radius: var(--alv-radius); border: 1px solid var(--alv-line); box-shadow: var(--alv-shadow-2); transition: transform .6s var(--alv-ease-out), box-shadow .6s var(--alv-ease-out); }
.shot img, .pg-shot img, .tartare-shot img, .guest img, .matchs__guest img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (hover: hover) {
  .shot:hover, .pg-shot:hover, .tartare-shot:hover, .guest:hover, .matchs__guest:hover { transform: translateY(-6px); box-shadow: var(--alv-shadow-2), var(--alv-glow-gold); }
}
@media (prefers-reduced-motion: reduce) { .shot, .pg-shot, .tartare-shot, .guest, .matchs__guest { transition: none; } }

/* ---------- Trame de courbes dorées (fond de la carte imprimée) ---------- */
.trame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: url("../img/marque/trame-courbes.jpg") right center / cover no-repeat;
  mix-blend-mode: screen; opacity: .55;
}
.trame > * { position: relative; z-index: 1; }

/* ---------- Logo (JPG à fond noir : fondu dans le noir par mélange) ---------- */
.logo img { width: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }

/* ---------- Étoiles ---------- */
.stars { display: inline-flex; gap: 4px; color: var(--alv-red); }
.stars svg { width: 18px; height: 18px; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Lignes masquées des titres animés : marge haute pour ne pas rogner les accents (É, À) */
[data-split] > div { padding-top: .5em; margin-top: -.5em; padding-bottom: .02em; } /* masque des lignes : assez haut pour les capitales accentuées de Bevan */
.h-card { padding-top: .26em; margin-top: -.14em; } /* le dégradé couvre l'accent (É) sans bouger le titre */

/* Avant le chargement de GSAP : le héros reste masqué (pas de clignotement). Filet de sécurité : visible après 3 s même sans JS. */
html.js:not(.is-ready) [data-hero], html.js:not(.is-ready) [data-page-title] { opacity: 0; animation: alv-show .01s linear 3s forwards; }
@keyframes alv-show { to { opacity: 1; } }

/* ---------- Peaufinage 05/10 ---------- */
.nowrap { white-space: nowrap; }
h1, h2, h3, .h-section, .h-card { text-wrap: balance; }
p { text-wrap: pretty; }
/* anneau de focus lisible sur les fonds or et jaune */
.special--gold :focus-visible, .special--yellow :focus-visible { outline-color: #0A0904; }
@media (max-width: 900px) {
  .link { min-height: 44px; padding-top: 14px; padding-bottom: 14px; }
  .link::after { bottom: 8px; }
}
@media (max-width: 640px) {
  /* sur téléphone les titres passent sur 3-4 lignes : un peu d'air pour les capitales accentuées */
  .h-section { font-size: 44px; line-height: .94; }
  .h-section--sm { line-height: 1.07; }
}
@media (max-width: 389px) {
  /* 360 px : « O’Vestiaire. » (7,63 em) dépassait les 309 px utiles et décalait la page d'1 px. Le corps suit la largeur
     sous 390 px ; à 390 px et au-delà, rien ne change (44 px). */
  .h-section { font-size: min(44px, 10.9vw); }
}

/* Titres dorés posés en bloc : le dégradé découpé au texte doit couvrir les accents (AIMÉ, THAÏ, OCÉANIQUE, ENTRECÔTES) */
h3.gold:not(.h-card), h4.gold, .h-small.gold { padding-top: .18em; margin-top: -.18em; }
/* « Continent européen » : l'accent heurtait la ligne du dessus */
.worlds .h-section--sm { line-height: 1.12; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }