/* =====================================================================
BARREL PUB CANNES — v2
« Le chien te fait entrer »
Vanilla CSS. Aucun fond clair. Le site s'assombrit en descendant.
===================================================================== */
:root{
--noir: #0A0B0E;
--noir-2: #121419;
--bleu: #2B5CFF;
--bleu-clair: #00A3FF;
--bleu-lien: #5B82FF; /* AA sur --noir (≥4.5:1) pour liens/texte */
--vert: #1B3A2F;
--or: #C9A24B;
--chene: #8A5A32;
--blanc: #EDE8E0;
--gris: #9AA0AA; /* remonté depuis #7A7F88 pour l'AA sur --noir */
--neon: linear-gradient(120deg, #2B5CFF, #00A3FF);
--ease: cubic-bezier(0.625, 0.05, 0, 1);
--display: "Archivo Black", Impact, sans-serif;
--sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--serif: "Fraunces", Georgia, serif;
--pad: clamp(22px, 6vw, 90px);
}
/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.is-locked, html.is-locked body{overflow:hidden;height:100%;touch-action:none}
body{
background:var(--noir);
color:var(--blanc);
font-family:var(--sans);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--bleu);color:#fff}
/* Lecteurs d'écran uniquement */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Skip link */
.skip{
position:absolute;left:-999px;top:0;z-index:300;
background:var(--bleu);color:#fff;padding:12px 20px;
font-family:var(--mono);font-size:12px;letter-spacing:.1em;
}
.skip:focus{left:12px;top:12px}
/* Focus visible — doré épais (§6.2) */
:focus-visible{outline:2px solid var(--or);outline-offset:3px}
/* text-wrap 2026 (§4) — plus de veuves sur les gros titres */
h1,h2,h3,h4,.wall,.ov-title,.neon,.foot-count,.infos-data .big,
.gal-claim,.faq summary,.rsv-title{text-wrap:balance}
p,li,dd,.lede,.priv-card p,.infos-side p,.faq-a,figcaption{text-wrap:pretty}
/* ---------- BRAND SPRITE ---------- */
/* V3.0 §3 — le logo est en BLANC, plus en or. C'est le seul changement possible
sans le fichier d'origine de la cliente : le symbole #brand reste un tracé
détouré à la main, on ne fait que le décolorer. Le reste de l'or dans le site
(prix de la carte, sous-titres de catégorie, étoiles des avis) ne bouge pas. */
.brand{display:inline-block;color:var(--blanc);transition:color .4s var(--ease)}
.brand svg{width:100%;height:100%;display:block;fill:currentColor}
/* =====================================================================
GRAIN — overlay bruit fixe
===================================================================== */
.grain{
position:fixed;inset:0;z-index:210;pointer-events:none;
mix-blend-mode:overlay;opacity:.045;
background-image:url("../assets/grain.webp");
background-size:128px 128px;background-repeat:repeat;
animation:grainShift .8s steps(8) infinite;
}
@keyframes grainShift{to{background-position:128px 128px}}
/* =====================================================================
CURSEUR CUSTOM
===================================================================== */
/* V2.4 §3 — seul will-change permanent conservé du site, et c'est justifié :
le curseur est transformé à CHAQUE frame tant qu'il est affiché, et il est
déjà display:none sous 1024px et sur pointeur grossier — donc jamais de couche
de composition inutile sur téléphone. Les trois autres (data-skew, .mq-track,
.seuil-shot img) sont passés en .is-anim, posé/retiré par IntersectionObserver. */
.cursor-dot, .cursor-ring{
position:fixed;top:0;left:0;z-index:260;pointer-events:none;
border-radius:50%;transform:translate(-50%,-50%);
will-change:transform;mix-blend-mode:difference;
}
.cursor-dot{width:8px;height:8px;background:var(--blanc)}
.cursor-ring{
width:32px;height:32px;border:1px solid var(--blanc);
transition:width .3s var(--ease), height .3s var(--ease),
border-color .3s var(--ease), background .3s var(--ease);
}
.cursor-ring.is-hover{width:64px;height:64px;border-color:var(--bleu-clair);mix-blend-mode:normal;background:rgba(0,163,255,.06)}
.cursor-ring.is-magnet{width:64px;height:64px;border-color:var(--or);background:rgba(201,162,75,.08);mix-blend-mode:normal}
.cursor-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);white-space:nowrap;opacity:0;transition:opacity .25s var(--ease)}
.cursor-ring.is-magnet .cursor-label{opacity:1}
body.has-cursor{cursor:none}
body.has-cursor a, body.has-cursor button{cursor:none}
@media (max-width:1023px), (pointer:coarse){
.cursor-dot,.cursor-ring{display:none!important}
}
/* =====================================================================
LOADER — vrai pourcentage, le logo se remplit
===================================================================== */
#loader{
position:fixed;inset:0;z-index:250;background:var(--noir);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;
transition:opacity .8s var(--ease);
}
#loader.gone{opacity:0;pointer-events:none}
.loader-mark{position:relative;width:clamp(84px,14vw,132px);height:clamp(84px,14vw,132px)}
/* couche grise = fond ; couche blanche clippée par la hauteur du chargement */
.loader-mark .lm-base{position:absolute;inset:0;color:rgba(237,232,224,.10)}
.loader-mark .lm-fill{position:absolute;inset:0;color:var(--blanc);clip-path:inset(100% 0 0 0);transition:clip-path .3s linear}
.load-bar{width:min(240px,54vw);height:1px;background:rgba(237,232,224,.14);overflow:hidden}
.load-bar i{display:block;height:100%;width:0;background:var(--bleu-clair);box-shadow:0 0 12px var(--bleu-clair)}
.load-pct{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--gris)}
.load-pct b{font-weight:500;color:var(--blanc)}
/* ---------- V2.4 §2 — l'écran d'entrée (habillage du préchargeur) ---------- */
#loader{gap:clamp(22px,3.4vh,34px);padding:var(--pad);text-align:center}
/* §2.1 — le voile se lève en 0,9 s avec l'easing du site */
#loader{transition:opacity .9s var(--ease)}
.entry-copy{display:flex;flex-direction:column;gap:10px;max-width:46ch}
.entry-kicker{
font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--bleu-clair);text-shadow:0 0 12px rgba(0,163,255,.55);
}
.entry-line{
font-family:var(--serif);font-style:italic;
font-size:clamp(19px,2.7vw,30px);line-height:1.35;color:var(--blanc);
}
.entry-line--dim{
font-family:var(--sans);font-style:normal;
font-size:clamp(13px,1.5vw,15px);line-height:1.6;color:var(--gris);
}
.entry-ready{
font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
color:#dfeeff;text-shadow:0 0 10px rgba(0,163,255,.85),0 0 30px rgba(43,92,255,.6);
}
.entry-ready[hidden]{display:none}
/* §2.4 — bouton PASSER : personne n'est prisonnier d'une animation */
.entry-skip{
position:absolute;right:var(--pad);bottom:var(--pad);
font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gris);border:1px solid rgba(237,232,224,.28);
padding:12px 20px;min-height:44px; /* zone tactile 44 px (§4) */
transition:color .3s var(--ease),border-color .3s var(--ease);
}
.entry-skip:hover,.entry-skip:focus-visible{color:var(--blanc);border-color:var(--blanc)}
@media (max-width:560px){
.entry-skip{right:50%;transform:translateX(50%);bottom:24px}
}
/* §2.4 — mouvement réduit : le texte s'affiche, le voile part en 200 ms,
aucune animation de barre ni de remplissage du logo. */
@media (prefers-reduced-motion:reduce){
#loader{transition:opacity .2s linear}
.load-bar{display:none}
.loader-mark .lm-fill{transition:none;clip-path:inset(0 0 0 0)}
}
/* =====================================================================
HEADER
===================================================================== */
.site-head{
position:fixed;top:0;left:0;width:100%;z-index:220;
display:flex;align-items:center;justify-content:space-between;
padding:clamp(16px,2.4vw,26px) var(--pad);
mix-blend-mode:difference;
}
.site-head .brand{width:clamp(38px,4vw,52px);height:clamp(38px,4vw,52px);color:var(--blanc)}
.head-meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--blanc);text-transform:uppercase}
.head-cta{
font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
border:1px solid rgba(237,232,224,.4);padding:9px 18px;transition:background .35s var(--ease),color .35s var(--ease)}
.head-cta:hover{background:var(--blanc);color:var(--noir)}
@media (max-width:640px){.head-meta{display:none}}
/* =====================================================================
SCÈNE 01 — LE HERO (canvas scrubbé)
===================================================================== */
/* V2.4 §3 — #hero reste en 100vh, VOLONTAIREMENT, et c'est le seul endroit du site.
Le §3 demande 100dvh partout, mais dvh est l'unité DYNAMIQUE : elle suit la barre
d'URL qui se rétracte. Sur un élément pinné par ScrollTrigger, cela redimensionne
le pin en plein scroll — soit exactement le saut qu'on cherche à supprimer.
100vh, lui, vaut le grand viewport et ne bouge jamais pendant le scroll.
Les deux autres occurrences (.scene-seuil, .page404) sont bien passées en dvh :
elles ne sont pas pinnées. main.js ajoute ScrollTrigger.config({ignoreMobileResize})
pour couvrir le redimensionnement mobile sans toucher hero.js. */
#hero{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--noir)}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-vignette{
position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(4,5,9,.78) 100%);
}
/* Citations Fraunces + reveal ligne par ligne */
.cue{
position:absolute;left:50%;top:50%;z-index:3;
width:min(1040px,88vw);text-align:center;pointer-events:none;
transform:translate(-50%,-50%);opacity:0;
transition:opacity .6s var(--ease);
}
.cue.on{opacity:1}
/* V2.3 §3 — le hero passe en néon bleu. Modification purement CSS, hero.js intact.
On garde la Fraunces italique : les vrais néons du bar sont en cursive
(neon-tequila, l'enseigne de façade). Une italique qui brille en bleu, c'est
exactement un néon du Barrel.
· text-shadow, JAMAIS filter:drop-shadow() — le hero est pinné et scrubbé sur
un canvas, un filtre forcerait une nouvelle couche de composition par frame.
· aucun scintillement ici : le texte apparaît et disparaît déjà, un second
mouvement serait un de trop. (V3.6 — il n'y a plus de scintillement nulle
part : neonFlicker est sorti du fichier avec les murs de néons.)
· la dernière ombre noire n'est pas décorative : les premières frames sont la
Croisette en plein jour, un bleu clair sans ombre y devient illisible. */
.cue p{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:clamp(30px,5.6vw,82px);line-height:1.12;letter-spacing:-.01em;
color:#dfeeff;
text-shadow:
0 0 10px rgba(0,163,255,.85),
0 0 30px rgba(43,92,255,.65),
0 0 62px rgba(43,92,255,.42),
0 2px 40px rgba(0,0,0,.9);
}
.ov-line{display:block;overflow:hidden}
.ov-line>span{display:block;transform:translateY(112%);transition:transform .7s var(--ease)}
.cue.on .ov-line>span{transform:translateY(0)}
.cue.on .ov-line:nth-child(2)>span{transition-delay:.08s}
.cue.on .ov-line:nth-child(3)>span{transition-delay:.16s}
/* Sous-lignes mono / sub */
.ov-sub{display:block;margin-top:20px;font-family:var(--mono);font-size:clamp(11px,1.4vw,14px);
letter-spacing:.32em;text-transform:uppercase;color:var(--gris);
opacity:0;transition:opacity .6s var(--ease) .2s}
.cue.on .ov-sub{opacity:1}
.ov-sub--serif{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:.01em;
font-size:clamp(16px,2.1vw,24px);color:var(--or)}
.ov-subline{display:block;margin-top:22px;font-family:var(--mono);font-size:clamp(10px,1.2vw,13px);
letter-spacing:.28em;text-transform:uppercase;color:var(--bleu-clair);
text-shadow:0 0 20px rgba(0,163,255,.4);opacity:0;transition:opacity .6s var(--ease) .28s}
.cue.on .ov-subline{opacity:1}
/* Cartes intro / final */
.cue--card .ov-title{
font-family:var(--display);text-transform:uppercase;
font-size:min(13vw,150px);line-height:.85;letter-spacing:-.03em;
color:var(--blanc);text-shadow:0 2px 60px rgba(0,0,0,.7)}
.cue--final .ov-title{background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.ov-cta{
display:inline-block;margin-top:30px;padding:15px 34px;pointer-events:none;
border:1px solid rgba(237,232,224,.4);color:var(--blanc);
font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
opacity:0;transition:opacity .6s var(--ease) .35s,background .35s var(--ease),color .35s var(--ease)}
.cue--final.on{pointer-events:auto}
.cue--final.on .ov-cta{opacity:1;pointer-events:auto}
.ov-cta:hover{background:var(--blanc);color:var(--noir)}
.scene-num{
position:absolute;left:var(--pad);top:calc(clamp(16px,2.4vw,26px) + clamp(52px,6vw,72px));
z-index:3;font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gris);
}
.hero-num{position:absolute;left:var(--pad);top:auto;bottom:34px}
.scroll-cue{
position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:10px;
transition:opacity .5s var(--ease);
}
.scroll-cue.hide{opacity:0}
/* Le hero passe par des frames très claires (la mer en plein jour) : sans ombre
portée l'amorce disparaît sur la moitié de la séquence. Même traitement que
les légendes posées sur photo ailleurs dans le site. */
.scroll-cue span{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--gris);
max-width:min(92vw,420px);text-align:center;line-height:1.9;text-wrap:balance;
text-shadow:0 1px 10px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.6)}
/* V3.1 §5 — respiration lente. 3,6 s, opacité seulement : aucune propriété qui
déclenche une mise en page, et ça reste sous le seuil de ce qui distrait. */
.scroll-cue span{animation:cueBreathe 3.6s var(--ease) infinite}
@keyframes cueBreathe{0%,100%{opacity:.62}50%{opacity:1}}
.scroll-cue .line{width:1px;height:40px;background:linear-gradient(var(--gris),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--bleu-clair);animation:cueDrop 1.8s var(--ease) infinite}
@keyframes cueDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(320%)}}
/* =====================================================================
SECTIONS génériques
===================================================================== */
main{position:relative;z-index:2;background:var(--noir)}
.scene{position:relative;padding:clamp(90px,15vh,190px) var(--pad);overflow:hidden}
/* V2.5 §1 — le bloc content-visibility du lot V2.4 est SUPPRIMÉ.
Il rendait invisibles toutes les images à partir du chapitre carte : un sous-arbre
en content-visibility:auto non rendu ne produit pas de rectangles valides, donc
l'IntersectionObserver des [data-reveal] mesurait faux, se déclenchait au mauvais
moment — et comme il désabonne ses cibles (unobserve) après le premier
déclenchement, les éléments restaient à opacity:0 définitivement.
Ne pas le réintroduire en le limitant à certaines sections, en retirant le
unobserve ou en ajustant contain-intrinsic-size : content-visibility ne se marie
pas avec une révélation au scroll qui désabonne ses cibles. Si le gain est
souhaité un jour, ce sera un lot dédié avec vérification chapitre par chapitre. */
/* ---------- V2.5 §2 — ZONES TACTILES, sans bouger la mise en page ----------
Un pseudo-élément centré déborde de l'élément et capte le toucher : la taille
visible ne change pas, rien ne se décale. Réservé à pointer:coarse pour ne pas
créer de zones fantômes à la souris.
On utilise ::before car ::after est déjà pris par le soulignement animé de .ul.
LES 44 PX NE SONT PAS APPLICABLES PARTOUT — mesuré, pas supposé :
· .foot-links a : 33 px centre à centre. Un carré de 44 px ferait chevaucher
deux liens voisins de 11 px. Plafonné à 32 px.
· .infos-data a : 27 px centre à centre (lignes séparées par ).
Plafonné à 26 px.
Monter ces deux groupes à 44 px imposerait d'écarter les lignes, donc de bouger
la mise en page d'un site validé — ce que ce lot interdit. Le gain reste réel :
19→32 px et 17→26 px, sans aucun chevauchement. */
@media (pointer:coarse){
.skip,.site-head .brand,.head-cta,
.rev-link,.ig-handle,
.foot-links a,.infos-data a,.foot-legal a{position:relative}
.skip::before,.site-head .brand::before,.head-cta::before,
.rev-link::before,.ig-handle::before,
.foot-links a::before,.infos-data a::before,.foot-legal a::before{
content:"";position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);
pointer-events:auto;
}
/* isolés verticalement : 44 px pleins */
.skip::before,.site-head .brand::before,.head-cta::before,
.rev-link::before,.ig-handle::before{
width:max(100%,44px);height:max(100%,44px);
}
/* voisins rapprochés : plafonnés à l'espacement mesuré */
.foot-links a::before{width:max(100%,44px);height:max(100%,32px)}
.infos-data a::before{width:max(100%,44px);height:max(100%,26px)}
.foot-legal a::before{width:max(100%,44px);height:max(100%,30px)}
}
.scene-inner{max-width:1320px;margin:0 auto;position:relative;z-index:2}
.marker{
font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gris);
margin-bottom:clamp(40px,7vh,90px);display:flex;gap:16px;align-items:baseline;
}
.marker .tag{color:var(--bleu-clair)}
.eyebrow{
font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
color:var(--bleu-clair);margin-bottom:22px;display:inline-block;
}
.lede{max-width:56ch;font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:var(--gris)}
.lede strong{color:var(--blanc);font-weight:500}
/* Trait souligné animé (scaleX) */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
background:var(--neon);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.ul:hover::after{transform:scaleX(1)}
/* V3.1 §5 — chiffres à chasse fixe : les prix de la carte s'alignent
verticalement, les compteurs ne tressautent plus d'un chiffre à l'autre.
IBM Plex Mono a déjà des chiffres tabulaires, mais Instrument Sans non — et
c'est elle qui écrit les jours du programme et les libellés des statistiques. */
.menu-item .p,.gal-filter i,.gal-status,.load-pct,.nc-count,
.program .pg-day,.infos-data,.faq-a,.stat span{font-variant-numeric:tabular-nums}
/* CTA */
.btn{
display:inline-flex;align-items:center;gap:14px;margin-top:38px;padding:17px 38px;
border:1px solid var(--bleu);color:var(--blanc);
font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
transition:background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
}
.btn:hover{background:var(--bleu);box-shadow:0 0 44px rgba(43,92,255,.45)}
.btn.ghost{border-color:rgba(237,232,224,.28)}
.btn.ghost:hover{background:var(--blanc);color:var(--noir);box-shadow:none}
/* Léopard — vraie texture du lieu, jamais criard */
.leopard{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%238A5A32' stroke-width='7'%3E%3Cpath d='M52 44c14-6 30 2 30 16 0 10-8 16-18 14M300 60c-16-2-26 10-22 24 3 10 14 12 22 6M150 100c16 0 24 12 18 24-5 10-18 10-24 2M250 150c-14 4-18 18-8 28 8 8 20 4 24-6M60 180c14-2 24 8 20 22-3 12-16 14-24 6M330 210c-10-10-26-6-30 8-3 12 8 22 20 18M120 220c14 4 18 18 8 28-8 8-22 4-24-8M200 250c16-2 26 10 20 24-5 12-20 12-26 0M40 300c12-6 28 0 28 14 0 12-12 18-22 12M280 320c-14-4-18-20-6-28 10-6 22 0 24 10' opacity='.9'/%3E%3C/g%3E%3Cg fill='%230A0B0E'%3E%3Ccircle cx='66' cy='58' r='5'/%3E%3Ccircle cx='285' cy='78' r='5'/%3E%3Ccircle cx='162' cy='118' r='5'/%3E%3Ccircle cx='238' cy='168' r='5'/%3E%3Ccircle cx='74' cy='196' r='5'/%3E%3Ccircle cx='314' cy='226' r='5'/%3E%3Ccircle cx='132' cy='240' r='5'/%3E%3Ccircle cx='210' cy='268' r='5'/%3E%3Ccircle cx='56' cy='314' r='5'/%3E%3Ccircle cx='266' cy='330' r='5'/%3E%3C/g%3E%3C/svg%3E");
background-size:360px 360px;
}
.leopard.strong{opacity:.12}
/* =====================================================================
SCÈNE 02 — LE SEUIL / LE CHIEN
===================================================================== */
.scene-seuil{background:var(--noir);min-height:100dvh;display:flex;align-items:center}
/* V2.4 §4 — trouvé au balayage 320→1920. .scene-seuil est le seul chapitre en
display:flex, donc son .scene-inner est un ÉLÉMENT FLEX : avec min-width:auto il
refuse de descendre sous sa largeur min-content et déborde du padding du parent.
Mesuré à 320 px : inner de 320 px au lieu de 276, soit 22 px de contenu coupés à
droite sur tout le chapitre 02 — masqués par le overflow:hidden de .scene, donc
invisibles à l'audit du scroll horizontal. Les autres chapitres, non flex,
étaient corrects (276 px). */
.scene-seuil>.scene-inner{min-width:0;width:100%}
.seuil-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);align-items:center;width:100%}
@media (min-width:960px){.seuil-grid{grid-template-columns:1.05fr .95fr}}
.wall{font-family:var(--display);text-transform:uppercase;line-height:.85;letter-spacing:-.03em;
font-size:min(15vw,150px);color:var(--blanc)}
.wall .l{display:block;overflow:hidden}
.wall .l span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.wall.is-in .l:nth-child(1) span{transition-delay:0ms}
.wall.is-in .l:nth-child(2) span{transition-delay:80ms}
.wall.is-in .l:nth-child(3) span{transition-delay:160ms}
.wall.is-in .l span{transform:translateY(0)}
.wall em{font-style:normal;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.seuil-copy{margin-top:38px;max-width:44ch}
.seuil-shot{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--noir-2)}
.seuil-shot img{width:100%;height:112%;object-fit:cover;object-position:center 38%}
.seuil-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 55%,rgba(10,11,14,.6))}
.seuil-cap{position:absolute;left:18px;bottom:16px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--blanc);text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.9)}
/* =====================================================================
SCÈNE 03 — LE JEU & LES SOIRÉES
===================================================================== */
.scene-jeu{background:var(--noir)}
.jeu-head{max-width:70ch;margin-bottom:clamp(48px,7vh,90px)}
.jeu-head h2{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:-.02em;
font-size:clamp(40px,8vw,110px);margin:14px 0 24px}
/* Néon signature */
.neon{
font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
font-size:clamp(30px,6vw,86px);color:#dfeeff;
text-shadow:0 0 8px rgba(0,163,255,.9),0 0 26px rgba(43,92,255,.7),0 0 54px rgba(43,92,255,.5);
}
.neon.small{font-size:clamp(20px,3.6vw,44px)}
.neon-block{padding:clamp(50px,9vh,120px) 0;text-align:center}
/* Mosaïque asymétrique */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,20px);grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;background:var(--noir-2);min-height:180px}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover img{transform:scale(1.05)}
.tile figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);text-shadow:0 1px 10px rgba(0,0,0,.9)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 60%,rgba(10,11,14,.55));pointer-events:none}
/* tailles inégales */
.tile.w2{grid-column:span 2}.tile.w3{grid-column:span 3}.tile.w4{grid-column:span 4}
.tile.h2{grid-row:span 2}
.tile{grid-column:span 2}
@media (max-width:860px){
.mosaic{grid-template-columns:repeat(4,1fr)}
.tile,.tile.w2,.tile.w3,.tile.w4{grid-column:span 2}
.tile.h2{grid-row:span 1}
}
@media (max-width:520px){
.mosaic{grid-template-columns:repeat(2,1fr);gap:10px}
}
.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(237,232,224,.09);margin-top:clamp(40px,6vh,80px);border:1px solid rgba(237,232,224,.09)}
.feature-list li{list-style:none;background:var(--noir);padding:30px 26px}
.feature-list b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:8px}
.feature-list span{font-size:14px;color:var(--gris);line-height:1.5}
/* =====================================================================
SCÈNE 04 — LA CARTE
===================================================================== */
.scene-carte{background:var(--noir)}
.menu-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,70px)}
@media (min-width:900px){.menu-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
.menu-cols{columns:1;column-gap:60px}
@media (min-width:600px){.menu-cols{columns:2}}
.menu-cat{break-inside:avoid;margin-bottom:44px}
.menu-cat h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em;color:var(--blanc);margin-bottom:4px}
.menu-cat .sub{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--or);margin-bottom:20px}
.menu-item{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid rgba(237,232,224,.07)}
.menu-item .n{flex:0 1 auto}
.menu-item .dots{flex:1 1 auto;border-bottom:1px dotted rgba(237,232,224,.2);transform:translateY(-4px)}
.menu-item .p{font-family:var(--mono);font-weight:500;color:var(--or);white-space:nowrap}
.menu-item .p .plus{color:var(--gris);font-size:11px}
.menu-media{position:sticky;top:100px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.menu-media .shot{position:relative;overflow:hidden;background:var(--noir-2);aspect-ratio:3/4}
.menu-media .shot.tall{grid-row:span 2;aspect-ratio:auto}
.menu-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.menu-media{position:static}}
/* =====================================================================
SCÈNE 05 — LA TERRASSE & LES INFOS
===================================================================== */
.scene-sortie{background:var(--noir)}
.sortie-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:clamp(50px,8vh,110px)}
.sortie-gallery .shot{position:relative;overflow:hidden;background:var(--noir-2);aspect-ratio:3/4}
.sortie-gallery .shot.wide{grid-column:span 2;aspect-ratio:3/2}
.sortie-gallery img{width:100%;height:100%;object-fit:cover}
.sortie-gallery .shot figcaption{
position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);
text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.sortie-gallery .shot::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,transparent 62%,rgba(10,11,14,.5));
}
@media (max-width:720px){.sortie-gallery{grid-template-columns:repeat(2,1fr)}.sortie-gallery .shot.wide{grid-column:span 2}}
/* ---------- V2.4 §1 — la vidéo du chien, scrubée au scroll ---------- */
.chien-video{position:relative;max-width:520px;margin:clamp(30px,6vh,70px) auto}
.chien-video video,
.chien-video>img{width:100%;height:auto;display:block;background:var(--noir-2)}
/* §1.4 — le plan ne finit pas sur du noir : le voile termine le geste.
Le JS ne met à jour QUE --fade. Aucune autre propriété animée. */
.chien-video::after{
content:"";position:absolute;inset:0;background:var(--noir);
opacity:var(--fade,0);pointer-events:none;
}
.chien-video figcaption{
margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--gris);
}
/* repli photo (reduced-motion, saveData, erreur de chargement) */
.chien-video.is-photo video{display:none}
.chien-video.is-photo::after{display:none}
/* ---------- §3.3 / §3bis.6 — second temps du seuil : le lieu qui attend ---------- */
.seuil-second{
display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,20px);
grid-auto-flow:dense;margin:clamp(40px,6vh,80px) 0 clamp(28px,4vh,52px);
}
.seuil-second .tile{grid-column:span 3;min-height:180px}
.seuil-second .tile.w3{grid-column:span 3}
.seuil-second .tile.h2{grid-row:span 2}
.seuil-second .tile img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
.seuil-second{grid-template-columns:repeat(2,1fr)}
.seuil-second .tile,.seuil-second .tile.w3{grid-column:span 1}
.seuil-second .tile.h2{grid-row:span 1}
}
/* la bâche au logo — le moment où la mascotte devient réelle */
.logo-live{position:relative;display:grid;gap:0;grid-template-columns:1fr;align-items:end;
border:1px solid rgba(237,232,224,.10);background:var(--noir-2);overflow:hidden}
@media (min-width:760px){.logo-live{grid-template-columns:1fr 1fr}}
.ll-shots{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.logo-live img{width:100%;height:100%;max-height:60vh;object-fit:cover;display:block}
.logo-live figcaption{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;gap:12px}
.ll-txt{font-size:clamp(15px,1.8vw,19px);line-height:1.6;color:rgba(237,232,224,.86);max-width:34ch}
.logo-live.is-live{border-color:rgba(201,162,75,.45)}
/* ---------- §2.3 — accroche cuisine, en tête du chapitre carte ---------- */
.carte-lede{
max-width:52ch;margin:0 0 clamp(36px,5vh,56px);
font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);
line-height:1.9;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
}
.carte-lede::before{
content:"";display:inline-block;width:26px;height:1px;vertical-align:middle;
margin-right:14px;background:var(--bleu-clair);box-shadow:0 0 10px rgba(0,163,255,.7);
}
/* ---------- §3.4 — la mosaïque de la carte (20 images, formats mélangés) ---------- */
.carte-mosaic{
display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,20px);
grid-auto-flow:dense;margin:clamp(46px,7vh,90px) 0 clamp(30px,5vh,60px);
}
.carte-mosaic .tile{grid-column:span 2;min-height:180px}
.carte-mosaic .tile.w2{grid-column:span 2}
.carte-mosaic .tile.w3{grid-column:span 3}
.carte-mosaic .tile.h2{grid-row:span 2}
.carte-mosaic .tile img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
.carte-mosaic{grid-template-columns:repeat(4,1fr)}
.carte-mosaic .tile,.carte-mosaic .tile.w2,.carte-mosaic .tile.w3{grid-column:span 2}
.carte-mosaic .tile.h2{grid-row:span 1}
}
@media (max-width:560px){
.carte-mosaic{grid-template-columns:repeat(2,1fr);gap:10px}
.carte-mosaic .tile,.carte-mosaic .tile.w2,.carte-mosaic .tile.w3{grid-column:span 1}
}
/* la paire passion : même verre, deux cadrages — bascule au survol ET au focus */
.swap-pair{
position:relative;max-width:min(100%,520px);aspect-ratio:3/4;overflow:hidden;
background:var(--noir-2);margin:0 0 clamp(46px,7vh,90px);
}
.swap-pair img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.swap-pair .sp-b{opacity:0;transition:opacity .5s var(--ease)}
.swap-pair:hover .sp-b,.swap-pair:focus-visible .sp-b{opacity:1}
.swap-pair figcaption{
position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);
text-shadow:0 1px 10px rgba(0,0,0,.9);
}
/* ---------- §3bis.3 / §3bis.4 — le bloc cocktails (texture chevron) ---------- */
.cocktails{
position:relative;padding:clamp(34px,5vw,64px) clamp(22px,3.5vw,52px);
margin-bottom:clamp(46px,7vh,90px);
border:1px solid rgba(237,232,224,.10);background:var(--noir-2);
}
.ck-title{
font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
font-size:clamp(26px,4vw,52px);line-height:.95;margin:12px 0 clamp(24px,3.5vh,40px);
}
.ck-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);grid-auto-flow:dense}
.ck-grid .tile{grid-column:span 2;min-height:170px}
.ck-grid .tile img{width:100%;height:100%;object-fit:cover}
.ck-grid .ck-lead{grid-column:span 4;grid-row:span 2}
@media (max-width:900px){
.ck-grid{grid-template-columns:repeat(4,1fr)}
.ck-grid .ck-lead{grid-column:span 4;grid-row:span 1}
}
@media (max-width:560px){
.ck-grid{grid-template-columns:repeat(2,1fr)}
.ck-grid .tile,.ck-grid .ck-lead{grid-column:span 2}
}
/* ---------- §3bis.1 — LA BANDE DE PHOTOBOOTH (module signature) ---------- */
.bande-signature{margin:0 0 clamp(46px,7vh,90px)}
.bande-signature>.eyebrow{display:block;margin-bottom:18px}
.bande{
position:relative;max-width:820px;margin:0;overflow:hidden;
background:#000;border:1px solid rgba(237,232,224,.10);
}
.bande img{width:100%;height:auto;display:block}
/* Les volets ne sont posés QUE si le JS peut les retirer (.is-armed).
Sans JS, la bande s'affiche entière — aucun volet, aucun trou. */
.bd-cell{position:absolute;background:var(--noir);opacity:0;pointer-events:none}
.bande.is-armed .bd-cell{opacity:1}
.bande.is-armed .bd-cell.is-open{opacity:0;transition:opacity .32s var(--ease)}
/* les 4 vignettes occupent les 75 % hauts, le bandeau imprimé les 25 % bas */
.bd-cell[data-cell="1"]{left:0; width:25%;top:0;height:75%}
.bd-cell[data-cell="2"]{left:25%; width:25%;top:0;height:75%}
.bd-cell[data-cell="3"]{left:50%; width:25%;top:0;height:75%}
.bd-cell[data-cell="4"]{left:75%; width:25%;top:0;height:75%}
.bd-cell.bd-band{left:0;width:100%;top:75%;height:25%}
/* flash blanc très court, avant chaque case */
.bd-flash{
position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
transition:opacity 90ms linear;
}
.bd-flash.on{opacity:.9}
/* mode réduit : les 4 cases arrivent ensemble, en fondu de 200 ms, SANS flash */
.bande.is-reduced .bd-cell.is-open{transition:opacity .2s linear}
.bande.is-reduced .bd-flash{display:none}
.bande-note{
margin-top:16px;max-width:46ch;font-family:var(--mono);font-size:12px;
line-height:1.9;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);
}
/* ---------- §2.4 — « Un seul endroit, tout dedans » ---------- */
.tout-dedans{
position:relative;padding:clamp(40px,6vw,72px) clamp(26px,4vw,60px);
margin-bottom:clamp(32px,5vh,64px);
border:1px solid rgba(237,232,224,.10);background:var(--noir-2);
}
.tout-dedans::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:linear-gradient(180deg,var(--bleu-clair),var(--bleu));
box-shadow:0 0 14px rgba(0,163,255,.55);
}
.td-wall{
font-family:var(--display);text-transform:uppercase;
font-size:clamp(30px,5.2vw,64px);line-height:.92;letter-spacing:-.02em;
margin:14px 0 clamp(22px,3vh,34px);color:var(--blanc);
}
.td-wall .ov-line{display:block;overflow:hidden}
.td-list{max-width:44ch;font-size:clamp(15px,1.7vw,19px);line-height:1.65;color:rgba(237,232,224,.88)}
.td-prix{
margin-top:18px;font-family:var(--mono);font-size:clamp(12px,1.3vw,14px);
line-height:2;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
}
@media (max-width:560px){.tout-dedans{padding:34px 22px}}
.infos{display:grid;grid-template-columns:1fr;gap:0;background:var(--vert);border:1px solid rgba(237,232,224,.08)}
@media (min-width:860px){.infos{grid-template-columns:1.15fr .85fr}}
.infos-data{padding:clamp(38px,5vw,64px);font-family:var(--mono);font-size:clamp(13px,1.4vw,15px);line-height:2.1;letter-spacing:.04em}
.infos-data .big{font-family:var(--display);font-size:clamp(26px,3.4vw,44px);line-height:1;letter-spacing:-.01em;margin-bottom:26px;color:var(--blanc);text-transform:uppercase}
.infos-data a{color:var(--blanc)}
.infos-data .k{color:rgba(237,232,224,.55)}
.infos-side{padding:clamp(38px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:22px;background:rgba(10,11,14,.28)}
.infos-side h3{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,34px);line-height:1.2}
.infos-side p{color:rgba(237,232,224,.8);font-size:15px;max-width:36ch}
/* ---------- Horloge live (mouvement 3) ---------- */
.clock{
display:inline-flex;align-items:center;gap:14px;margin-top:clamp(46px,7vh,90px);
padding:16px 24px;border:1px solid rgba(237,232,224,.14);background:var(--noir-2);
font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);letter-spacing:.14em;text-transform:uppercase;
}
.clock-dot{width:10px;height:10px;border-radius:50%;background:var(--gris);flex:0 0 auto;transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.clock-dot.on{background:var(--bleu-clair);box-shadow:0 0 0 0 rgba(0,163,255,.6);animation:pulseDot 2s var(--ease) infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(0,163,255,.5)}70%{box-shadow:0 0 0 12px rgba(0,163,255,0)}100%{box-shadow:0 0 0 0 rgba(0,163,255,0)}}
.clock-txt{color:var(--blanc)}
.clock-city{color:var(--gris);letter-spacing:.22em;font-size:.78em;margin-left:6px}
@media (max-width:520px){.clock{flex-wrap:wrap;gap:10px}.clock-city{margin-left:0}}
/* ---------- Le mur des néons — « la nuit » (mouvement 6) ---------- */
.night-head{margin:clamp(40px,6vh,80px) 0 clamp(28px,4vh,50px);display:flex;flex-direction:column;gap:20px}
/* .neon.playlist n'a plus d'override : le néon réel est blanc-bleu froid, pas rose.
Il hérite donc du bleu de .neon (vérifié sur neon-playlist-large.webp). */
/* ---------- Les chiffres — count-up (mouvement 9) ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(237,232,224,.09);border:1px solid rgba(237,232,224,.09);margin-bottom:clamp(50px,8vh,110px)}
@media (min-width:680px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--noir);padding:clamp(28px,4vw,48px) clamp(20px,3vw,34px)}
.stat b{display:block;font-family:var(--display);font-weight:400;line-height:.9;letter-spacing:-.02em;
font-size:clamp(46px,7vw,96px);color:var(--blanc);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
/* ---------- Feed Instagram (mouvement 11) ---------- */
.ig-feed{margin-bottom:clamp(50px,8vh,110px)}
.ig-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.ig-handle{font-family:var(--mono);font-size:clamp(14px,2vw,20px);letter-spacing:.06em;color:var(--blanc)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px)}
@media (min-width:680px){.ig-grid{grid-template-columns:repeat(6,1fr)}}
.ig-cell{position:relative;overflow:hidden;background:var(--noir-2);aspect-ratio:1;display:block}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .4s var(--ease);filter:grayscale(.15)}
.ig-cell:hover img{transform:scale(1.06);filter:grayscale(0)}
.ig-cell::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 60%,rgba(10,11,14,.4));pointer-events:none}
.ig-cta{margin-top:26px}
/* =====================================================================
FOOTER
===================================================================== */
.site-foot{padding:clamp(70px,11vh,140px) var(--pad) 50px;border-top:1px solid rgba(237,232,224,.08);text-align:center;background:var(--noir)}
.foot-brand{width:clamp(90px,16vw,150px);height:clamp(90px,16vw,150px);margin:0 auto 26px;color:var(--blanc);transition:color .5s var(--ease),filter .5s var(--ease)}
.foot-brand:hover{color:var(--blanc);filter:drop-shadow(0 0 26px rgba(43,92,255,.7))}
.foot-count{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,10vw,120px);line-height:.9;letter-spacing:-.02em;
background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:36px}
.foot-links{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--gris);margin-bottom:30px}
.foot-links a:hover{color:var(--blanc)}
.foot-legal{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(154,160,170,.6);text-transform:uppercase}
.foot-legal a{color:var(--or)}
/* =====================================================================
V2.1 — placements photo & nouveaux blocs
===================================================================== */
/* Bande d'établissement (ch.02) */
/* Mur des néons — enseigne réelle SOUS la typo (ch.03) */
.neon-wall{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;min-height:42vh;padding:clamp(56px,11vh,130px) var(--pad);margin:clamp(40px,6vh,80px) 0}
.neon-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22;filter:saturate(1.3);z-index:0}
.neon-wall::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 25%,rgba(10,11,14,.72));z-index:1}
.neon-wall .neon{position:relative;z-index:2}
/* Carrousel de nuit — scroll-snap natif (ch.03) */
.night-carousel{position:relative;margin:clamp(28px,5vh,56px) 0 clamp(46px,7vh,90px)}
.nc-track{list-style:none;display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:none}
.nc-track::-webkit-scrollbar{display:none}
.nc-slide{flex:0 0 auto;width:min(80vw,540px);aspect-ratio:3/4;scroll-snap-align:center;overflow:hidden;background:var(--noir-2);position:relative}
.nc-slide img{width:100%;height:100%;object-fit:cover}
.nc-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 60%,rgba(10,11,14,.5));pointer-events:none}
.nc-count{margin-top:14px;text-align:right;font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--gris)}
.nc-count #ncNow{color:var(--blanc)}
/* La moto — triptyque (ch.03) */
/* §3.2 — la moto : une seule vignette ici (l'autre est moto-frites, chapitre carte).
L'ancienne .moto-grid à trois plans est supprimée : « on n'est pas un shop de moto ». */
/* V2.3 §1 — l'écran noir venait d'ici. L'attribut HTML height="1600" restait
la hauteur utilisée (aspect-ratio est ignoré quand les deux dimensions sont
définies), donc l'image faisait 180 × 1600 : un liseré vertical à gauche et
une figure de 1600 px de haut, soit plus de deux écrans de vide.
height:auto rend la main à aspect-ratio ; la grille deux colonnes disparaît. */
.moto-solo{
margin:clamp(30px,6vh,70px) auto;
display:block;
max-width:380px;
}
.moto-solo img{
width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
object-position:center 30%; /* on cadre le visage, pas le réservoir */
background:var(--noir-2);
}
.moto-solo figcaption{
margin-top:12px;text-align:left;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;
text-transform:uppercase;color:var(--gris);
}
/* §3bis.7 — transition léopard, une seule fois, au basculement vers la nuit */
.wipe-leopard{
position:relative;left:50%;width:100vw;transform:translateX(-50%);
height:clamp(120px,22vh,240px);overflow:hidden;margin:clamp(40px,7vh,90px) 0;
}
.wipe-leopard img{width:100%;height:100%;object-fit:cover;display:block}
.wipe-leopard::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,var(--noir),transparent 18%,transparent 82%,var(--noir)),
linear-gradient(180deg,var(--noir),transparent 30%,transparent 70%,var(--noir));
}
/* §3.5 — l'accroche de la nuit */
.night-claim{
font-family:var(--display);text-transform:uppercase;
font-size:clamp(26px,4.6vw,56px);line-height:.96;letter-spacing:-.02em;color:var(--blanc);
}
/* §3bis.2 — le pas de la séquence, sous chaque phrase.
V3.6 — le conteneur .neon-run a disparu : les trois néons sont autonomes et
répartis dans la page, et .neon-solo (fin de fichier) reprend son débord. */
.neon-step{
position:relative;z-index:2;font-family:var(--mono);font-size:11px;
letter-spacing:.24em;text-transform:uppercase;color:var(--gris);
}
/* §3.5 — la bande de photos de néons qui ferme la séquence */
.neon-strip{
display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.1vw,14px);
padding:0 var(--pad) clamp(30px,5vh,60px);
}
.neon-strip .tile{grid-column:span 1;aspect-ratio:3/4;min-height:0}
.neon-strip .tile img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.neon-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.neon-strip{grid-template-columns:repeat(2,1fr)}}
/* §3bis.5 — les coulisses */
.coulisses{margin-top:clamp(40px,7vh,90px)}
.coulisses>.eyebrow{margin-bottom:20px;display:block}
.coul-grid{
display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.4vw,18px);grid-auto-flow:dense;
}
.coul-grid .tile{grid-column:span 2;min-height:170px}
.coul-grid .tile img{width:100%;height:100%;object-fit:cover}
@media (max-width:720px){
.coul-grid{grid-template-columns:repeat(2,1fr)}
.coul-grid .tile,.coul-grid .tile.w2,.coul-grid .tile.w3{grid-column:span 1}
.coul-grid .tile.h2{grid-row:span 1}
}
/* bandes de photobooth en petit format dans la mosaïque des jeux (format 1280x533) */
.bande-mini img{object-fit:contain;background:#000}
/* Bandeau marquee tapas (ch.04) */
.marquee{position:relative;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;margin-top:clamp(50px,8vh,100px);border-top:1px solid rgba(237,232,224,.09);border-bottom:1px solid rgba(237,232,224,.09);padding:clamp(14px,2vw,24px) 0}
.mq-track{list-style:none;display:flex;gap:clamp(10px,1.4vw,18px);width:max-content}
.mq-item{flex:0 0 auto;width:clamp(140px,15vw,180px);aspect-ratio:1;overflow:hidden;background:var(--noir-2)}
.mq-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1)}
/* Lignes de burger cliquables + vignette hover (ch.04) */
.burger-row{cursor:pointer;transition:padding-left .3s var(--ease),color .3s var(--ease)}
.burger-row:hover,.burger-row:focus-visible{padding-left:14px}
.burger-row:hover .n,.burger-row:focus-visible .n{color:var(--bleu-lien)}
/* :has() — accent au clavier sans JS */
.menu-cat:has(.burger-row:focus-visible) h3{color:var(--bleu-lien)}
/* vignette flottante (desktop) : une seule img réutilisée */
.menu-thumb{position:fixed;top:0;left:0;width:220px;height:220px;z-index:255;pointer-events:none;
overflow:hidden;border:1px solid rgba(237,232,224,.2);background:var(--noir-2);
opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.menu-thumb.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.menu-thumb img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px),(pointer:coarse){.menu-thumb{display:none}}
/* Lieu : chiffres + équipe (ch.05) */
.lieu-row{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.5vw,28px);margin-bottom:clamp(50px,8vh,110px)}
@media (min-width:860px){.lieu-row{grid-template-columns:2.4fr 1fr}}
.lieu-row .stats{margin-bottom:0}
.team-card{position:relative;overflow:hidden;background:var(--noir-2);border:1px solid rgba(237,232,224,.09);min-height:240px;display:flex}
.team-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.team-card figcaption{position:relative;z-index:2;margin-top:auto;width:100%;padding:22px;background:linear-gradient(transparent,rgba(10,11,14,.9))}
.team-card .eyebrow{margin-bottom:6px}
.team-card .tc-txt{display:block;font-family:var(--mono);font-size:12px;color:var(--blanc);letter-spacing:.05em}
/* Fond façade derrière le bloc infos (ch.05) */
.infos{position:relative;overflow:hidden}
.infos-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.15;z-index:0}
.infos-data,.infos-side{position:relative;z-index:1}
/* =====================================================================
§5.1 — CE SOIR (programme)
===================================================================== */
.program-block{margin:clamp(50px,8vh,100px) 0 clamp(20px,4vh,50px)}
.program-block>.eyebrow{margin-bottom:22px}
.program{list-style:none;border-top:1px solid rgba(237,232,224,.09)}
.program li{display:flex;align-items:center;gap:16px;padding:clamp(12px,1.8vh,20px) 0;border-bottom:1px solid rgba(237,232,224,.09);
font-family:var(--mono);font-size:clamp(13px,1.6vw,17px);letter-spacing:.08em;text-transform:uppercase;color:rgba(237,232,224,.35);transition:color .4s var(--ease)}
.program .pg-day{flex:0 0 clamp(90px,12vw,150px)}
.program .pg-dot{width:8px;height:8px;border-radius:50%;background:rgba(237,232,224,.2);flex:0 0 auto}
.program .pg-act{color:inherit}
.program li.today{color:var(--bleu-lien)}
.program li.today .pg-day{color:#fff;font-weight:500}
.program li.today .pg-dot{background:var(--bleu-clair);box-shadow:0 0 0 0 rgba(0,163,255,.6);animation:pulseDot 2s var(--ease) infinite}
/* =====================================================================
§5.2 — ILS Y ÉTAIENT (avis)
===================================================================== */
/* ---------- V3.2 §1 — CE QU'ILS EN DISENT ----------
Bande horizontale à défilement natif : overflow-x + scroll-snap. Le
conteneur .rev-band est focusable et porte role="region", ce qui donne le
défilement aux flèches du clavier sans une ligne de JavaScript. */
.reviews{margin-bottom:clamp(50px,8vh,110px)}
.rev-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:clamp(24px,3.5vh,40px)}
.rev-sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-top:10px}
.rev-link{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--blanc);white-space:nowrap}
.rev-band{
overflow-x:auto;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
padding-bottom:16px;
scrollbar-width:thin;scrollbar-color:rgba(201,162,75,.5) transparent;
}
.rev-band::-webkit-scrollbar{height:3px}
.rev-band::-webkit-scrollbar-track{background:rgba(237,232,224,.07)}
.rev-band::-webkit-scrollbar-thumb{background:rgba(201,162,75,.5)}
.rev-track{list-style:none;display:flex;gap:clamp(14px,2vw,26px);align-items:stretch}
.rev-track>li{flex:0 0 auto;width:min(84vw,360px);scroll-snap-align:start;display:flex}
.rev{
display:flex;flex-direction:column;
border-top:1px solid rgba(201,162,75,.3);padding-top:20px;
}
.rev .stars{display:flex;gap:4px;margin-bottom:16px}
.rev .stars svg{width:15px;height:15px;fill:var(--or);flex:0 0 auto}
.rev p{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.9vw,21px);line-height:1.45;color:var(--blanc);margin-bottom:18px}
.rev footer{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.rev .rev-who{color:var(--blanc)}
.rev .rev-src{color:var(--gris)}
/* ---------- V3.2 §2.1 — les deux boutons ---------- */
.rev-cta{margin-top:clamp(28px,4vh,44px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px)}
.rev-ask{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.rev-btns{display:flex;flex-wrap:wrap;gap:14px}
.rev-btns .btn{margin-top:0}
/* =====================================================================
§5.3 — VENIR
===================================================================== */
.scene-venir{position:relative;overflow:hidden;min-height:80vh;display:flex;align-items:center;padding-block:clamp(90px,16vh,190px)}
.venir-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;z-index:0}
.scene-venir::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,transparent 20%,rgba(10,11,14,.7));z-index:1}
.scene-venir .scene-inner{position:relative;z-index:2}
.venir-gps{font-family:var(--mono);font-size:clamp(15px,2.4vw,28px);letter-spacing:.1em;color:var(--bleu-clair);margin:12px 0 20px;text-shadow:0 0 22px rgba(0,163,255,.35)}
.venir-addr{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,8vw,110px);line-height:.88;letter-spacing:-.03em;color:var(--blanc)}
.venir-addr .venir-city{background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.venir-walk{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,28px);color:var(--or);margin:26px 0 34px}
.venir-cta{display:flex;flex-wrap:wrap;gap:14px}
.venir-cta .btn{margin-top:0}
/* =====================================================================
PAGE CONTACT
===================================================================== */
.subpage{padding-top:clamp(110px,16vh,180px)}
.contact-hero{padding:0 var(--pad) clamp(40px,6vh,70px);max-width:1320px;margin:0 auto}
.contact-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,9vw,120px);line-height:.86;letter-spacing:-.03em;margin:14px 0 20px}
.contact-hero h1 em{font-style:normal;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.contact-grid{max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(90px,12vh,150px);display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,70px)}
@media (min-width:900px){.contact-grid{grid-template-columns:1.1fr .9fr;align-items:start}}
form.barrel-form{display:grid;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.field label .req{color:var(--bleu-clair)}
.field input,.field textarea,.field select{
background:var(--noir-2);border:1px solid rgba(237,232,224,.14);color:var(--blanc);
font-family:var(--sans);font-size:15px;padding:14px 16px;border-radius:2px;
transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(43,92,255,.18)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#ff5a5a}
.field .err{font-family:var(--mono);font-size:11px;color:#ff8080;display:none}
.field input:user-invalid~.err,.field textarea:user-invalid~.err{display:block}
.field-row{display:grid;grid-template-columns:1fr;gap:22px}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.barrel-form button[type=submit]{justify-self:start;margin-top:8px}
.form-note{font-family:var(--mono);font-size:11px;color:var(--gris);letter-spacing:.05em}
.contact-side{display:grid;gap:26px;align-content:start}
.priv-card{background:var(--vert);border:1px solid rgba(237,232,224,.08);padding:clamp(30px,4vw,44px)}
.priv-card h2{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,34px);line-height:1.2;margin-bottom:14px}
.priv-card p{color:rgba(237,232,224,.82);font-size:15px;margin-bottom:8px}
.info-card{border:1px solid rgba(237,232,224,.12);padding:clamp(28px,4vw,40px);font-family:var(--mono);font-size:14px;line-height:2;letter-spacing:.03em}
.info-card a{color:var(--blanc)}
.info-card .k{color:var(--gris)}
/* =====================================================================
404
===================================================================== */
.page404{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--pad);gap:6px}
.page404 .b{width:clamp(80px,14vw,120px);height:clamp(80px,14vw,120px);color:var(--blanc);margin-bottom:26px}
.page404 .code{font-family:var(--display);font-size:clamp(70px,18vw,220px);line-height:.9;letter-spacing:-.03em;background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent}
.page404 p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--blanc);margin:16px 0 30px;max-width:30ch}
/* =====================================================================
REVEAL — IntersectionObserver
===================================================================== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal-stagger].is-in>*{opacity:1;transform:none}
[data-reveal-stagger].is-in>*:nth-child(2){transition-delay:.06s}
[data-reveal-stagger].is-in>*:nth-child(3){transition-delay:.12s}
[data-reveal-stagger].is-in>*:nth-child(4){transition-delay:.18s}
[data-reveal-stagger].is-in>*:nth-child(5){transition-delay:.24s}
[data-reveal-stagger].is-in>*:nth-child(6){transition-delay:.30s}
[data-reveal-stagger].is-in>*:nth-child(7){transition-delay:.36s}
[data-reveal-stagger].is-in>*:nth-child(8){transition-delay:.42s}
/* =====================================================================
V2.1 — effets d'ambiance (flicker, glitch, split, skew)
===================================================================== */
/* Split-text : mêmes .ov-line que le hero, réutilisées au scroll */
[data-split] .ov-line{display:block;overflow:hidden}
[data-split] .ov-line>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)}
[data-split].is-in .ov-line>span{transform:translateY(0)}
[data-split].is-in .ov-line:nth-child(2)>span{transition-delay:.07s}
[data-split].is-in .ov-line:nth-child(3)>span{transition-delay:.14s}
[data-split].is-in .ov-line:nth-child(4)>span{transition-delay:.21s}
[data-split].is-in .ov-line:nth-child(5)>span{transition-delay:.28s}
[data-split].is-in .ov-line:nth-child(6)>span{transition-delay:.35s}
/* Skew de vélocité — l'élément est piloté en JS, on borne juste le rendu */
/* V2.4 §3 — will-change SEULEMENT pendant l'animation.
Il était permanent sur [data-skew] (des dizaines d'éléments), .mq-track et
.seuil-shot img : autant de couches de composition créées en permanence, cause
classique de saccade sur téléphone milieu de gamme. main.js pose maintenant
.is-anim à l'entrée dans le viewport et le retire à la sortie. */
[data-skew].is-anim,
.mq-track.is-anim,
.seuil-shot img.is-anim{will-change:transform}
/* Glitch RGB à l'entrée de section (§3.8) — une seule salve */
@keyframes glitchRGB{
0%{text-shadow:0 0 0 transparent}
20%{text-shadow:-3px 0 var(--bleu),3px 0 var(--or);clip-path:inset(0 0 62% 0)}
40%{text-shadow:3px 0 var(--bleu),-3px 0 var(--or);clip-path:inset(46% 0 0 0)}
60%{text-shadow:-2px 0 var(--bleu-clair),2px 0 var(--or);clip-path:inset(0 0 20% 0)}
80%{text-shadow:2px 0 var(--bleu),-2px 0 var(--or);clip-path:none}
100%{text-shadow:0 0 0 transparent}
}
.glitch-once{animation:glitchRGB .16s steps(2) 1}
/* Container queries légères (§4) — la légende suit la largeur de sa case */
.mosaic{container-type:inline-size}
@container (max-width:240px){.tile figcaption{font-size:9px;letter-spacing:.12em}}
/* =====================================================================
REDUCED MOTION
===================================================================== */
@media (prefers-reduced-motion:reduce){
/* §3bis.1 — NON NÉGOCIABLE : un flash blanc répété est un déclencheur
photosensible. Le flash est coupé ici au niveau CSS, indépendamment du JS,
pour qu'aucune régression de script ne puisse le réactiver. */
.bd-flash{display:none!important;opacity:0!important;animation:none!important}
.bande .bd-cell.is-open{transition:opacity .2s linear!important}
.grain{animation:none}
.cursor-dot,.cursor-ring{display:none!important}
body.has-cursor{cursor:auto}
.scroll-cue .line::after,.scroll-cue span{animation:none;opacity:1}
[data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
.wall .l span{transform:none!important;transition:none!important}
.ov-line>span,[data-split] .ov-line>span{transform:none!important;transition:none!important}
.ov-sub,.ov-subline,.ov-cta{opacity:1!important;transition:none!important}
.cue{transition:opacity .3s linear}
/* §6.2 : on coupe skew, glitch, marquee, thumb flottante */
[data-skew]{transform:none!important;will-change:auto}
.glitch-once{animation:none!important}
.mq-track{transform:none!important}
.menu-thumb{display:none!important}
*{scroll-behavior:auto!important}
}
/* =====================================================================
V3.0 §1 — LA GALERIE, ET LE DÉSENCOMBREMENT DE L'ACCUEIL
Aucune DA nouvelle : mêmes couleurs, mêmes fontes, même curseur.
Ce bloc est volontairement en fin de fichier — il ne réécrit rien,
il ajoute des modules et deux variantes de modules existants.
===================================================================== */
/* ---------- 1.1 — l'onglet GALERIE dans l'en-tête ---------- */
.head-right{display:flex;align-items:center;gap:clamp(12px,1.8vw,22px)}
.head-link{
font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--blanc);padding:9px 0;border-bottom:1px solid transparent;
transition:border-color .35s var(--ease);
}
.head-link:hover{border-color:var(--blanc)}
.head-link[aria-current="page"]{border-color:var(--blanc)}
/* zone tactile 44 px, même mécanique que le §4 de V2.5 */
@media (pointer:coarse){
.head-link{position:relative}
.head-link::before{
content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:max(100%,44px);height:max(100%,44px);pointer-events:auto;
}
}
/* ---------- le renvoi depuis le bas du chapitre 05 ---------- */
.gal-cta{
display:inline-flex;align-items:center;gap:14px;min-height:44px;
font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
color:var(--blanc);border-bottom:1px solid rgba(237,232,224,.35);padding-bottom:10px;
transition:border-color .4s var(--ease),gap .4s var(--ease);
}
.gal-cta:hover{border-color:var(--blanc);gap:22px}
.gal-cta-wrap{margin:clamp(46px,7vh,90px) 0 clamp(50px,8vh,110px)}
/* ---------- 1.2 — la page ---------- */
.gal-page{padding:clamp(118px,17vh,190px) var(--pad) clamp(80px,12vh,140px)}
.gal-head{max-width:70ch;margin-bottom:clamp(34px,5vh,56px)}
.gal-title{
font-family:var(--display);text-transform:uppercase;
font-size:clamp(46px,11vw,140px);line-height:.86;letter-spacing:-.03em;margin:14px 0 20px;
}
.gal-claim{
font-family:var(--serif);font-style:italic;
font-size:clamp(19px,2.6vw,30px);line-height:1.35;color:var(--blanc);margin-bottom:12px;
}
/* ---------- la barre de filtres ---------- */
.gal-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(30px,4.5vh,52px)}
.gal-filter{
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gris);border:1px solid rgba(237,232,224,.2);
padding:12px 16px;min-height:44px;
transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.gal-filter:hover{color:var(--blanc);border-color:rgba(237,232,224,.55)}
.gal-filter[aria-pressed="true"]{color:var(--noir);background:var(--blanc);border-color:var(--blanc)}
.gal-filter i{font-style:normal;font-size:10px;opacity:.55;margin-left:9px}
/* ---------- la grille, hauteurs variables, aucun carrousel ---------- */
.gal-grid{column-count:2;column-gap:clamp(10px,1.4vw,18px)}
@media (min-width:700px){.gal-grid{column-count:3}}
@media (min-width:1160px){.gal-grid{column-count:4}}
.gal-item{break-inside:avoid;margin:0 0 clamp(10px,1.4vw,18px)}
.gal-item[hidden]{display:none}
.gal-open{position:relative;display:block;overflow:hidden;background:var(--noir-2)}
.gal-open img{width:100%;height:auto;transition:transform 1.1s var(--ease)}
.gal-open:hover img{transform:scale(1.05)}
.gal-open::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(200deg,transparent 55%,rgba(10,11,14,.62));
opacity:0;transition:opacity .4s var(--ease);
}
.gal-open:hover::after,.gal-open:focus-visible::after{opacity:1}
.gal-item figcaption{
position:absolute;left:12px;right:12px;bottom:11px;z-index:2;
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--blanc);text-shadow:0 1px 10px rgba(0,0,0,.9);
opacity:0;transform:translateY(6px);
transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.gal-open:hover figcaption,.gal-open:focus-visible figcaption{opacity:1;transform:none}
/* sans survol (tactile), la légende est toujours lisible */
@media (hover:none){
.gal-item figcaption{opacity:1;transform:none}
.gal-open::after{opacity:1}
}
/* ---------- pagination ---------- */
.gal-foot{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(40px,6vh,72px)}
.gal-status{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.gal-more{margin-top:0}
.gal-more[hidden]{display:none}
.gal-empty{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);padding:40px 0}
.gal-empty[hidden]{display:none}
/* ---------- 1.3 — le fondu du filtre ----------
View Transitions same-document quand le navigateur sait faire ;
sinon la classe .is-fading donne le même fondu de 200 ms. */
.gal-grid.is-fading{opacity:0;transition:opacity .2s linear}
@media (prefers-reduced-motion:no-preference){
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}
/* ---------- 1.3 — l'agrandissement (Popover API) ----------
#galLightbox reste [hidden] tant que le JS n'a pas vérifié le support du
popover : sans support, le lien ouvre l'image seule, et la boîte
ne doit jamais s'afficher. Les deux règles display:none sont donc
nécessaires — la seconde est ignorée par les navigateurs sans popover. */
/* La boîte fait la TAILLE DE LA PHOTO, pas celle de l'écran. Un popover qui
couvre tout le viewport n'a plus d'extérieur : le clic hors-cadre tomberait
dessus et la fermeture au clic extérieur ne se déclencherait jamais. */
#galLightbox{
/* inset:0 + margin:auto + fit-content : c'est le centrage que fait déjà le
navigateur pour un popover. Surtout PAS de transform ici — un ancêtre
transformé devient le bloc conteneur des position:fixed descendants, et le
bouton FERMER se retrouverait collé à la photo au lieu du coin de l'écran. */
position:fixed;inset:0;margin:auto;
width:fit-content;height:fit-content;
max-width:min(1180px,92vw);max-height:88dvh;
border:0;padding:0;background:transparent;color:var(--blanc);
display:block;overflow:visible;
}
#galLightbox[hidden]{display:none}
#galLightbox:not(:popover-open){display:none}
#galLightbox::backdrop{background:rgba(6,7,9,.94)}
.glb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.glb-fig img{max-width:100%;max-height:76dvh;width:auto;height:auto;object-fit:contain}
.glb-cap{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);text-align:center}
/* dans la couche supérieure, position:fixed se réfère bien au viewport */
.glb-close{
position:fixed;top:clamp(14px,2.4vw,28px);right:clamp(14px,2.4vw,28px);z-index:1;
font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gris);border:1px solid rgba(237,232,224,.28);padding:12px 18px;min-height:44px;
transition:color .3s var(--ease),border-color .3s var(--ease);
}
.glb-close:hover,.glb-close:focus-visible{color:var(--blanc);border-color:var(--blanc)}
/* =====================================================================
V3.0 §2 — CE QUI RESTE SUR L'ACCUEIL
Un plan principal par chapitre, un bloc secondaire au maximum.
===================================================================== */
/* le plan large pleine largeur : la façade (ch. 02), la salle pleine (ch. 03).
Remplace .estab-band, qui était une bande de 150 à 300 px — trop basse pour
être un plan, trop haute pour être un filet. */
/* Pleine largeur SANS transform, volontairement : le figure porte data-reveal,
et [data-reveal].is-in pose transform:none avec une spécificité (0,2,0) que
.plan-large (0,1,0) ne peut pas battre. Un translateX(-50%) ici serait effacé
à la révélation et le plan partirait d'un demi-écran vers la droite.
margin-inline négatif fait le même travail et laisse transform à l'animation.
(C'est le défaut qu'avait .estab-band, retiré avec ce lot.) */
.plan-large{
position:relative;width:100vw;
margin-inline:calc(50% - 50vw);
margin-block:4px clamp(48px,7vh,90px);
overflow:hidden;
}
.plan-large img{width:100%;height:clamp(340px,66vh,760px);object-fit:cover;object-position:center 42%}
.plan-large::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(transparent 55%,rgba(10,11,14,.78));
}
.plan-large figcaption{
position:absolute;left:var(--pad);right:var(--pad);bottom:18px;z-index:2;
font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--blanc);text-shadow:0 1px 12px rgba(0,0,0,.9);
}
.plan-large--nuit{margin-block:clamp(30px,5vh,60px) clamp(48px,7vh,90px)}
.plan-large--nuit img{object-position:center 38%}
/* ch. 03 — la mosaïque du jeu, réduite à trois tuiles.
Sans variante, trois tuiles simples dans une grille à 6 colonnes tomberaient
sur la hauteur plancher de .tile (180 px) : une frise de vignettes, pas trois
plans. Le ratio fixe leur rend leur format. */
.mosaic.is-trio{grid-template-columns:repeat(3,1fr)}
.mosaic.is-trio .tile,
.mosaic.is-trio .tile.w2{grid-column:span 1;grid-row:span 1;aspect-ratio:3/4;min-height:0}
/* En dessous de 820 px, trois colonnes donneraient trois vignettes de 160 px —
soit exactement le défaut qu'on est en train de corriger. On empile. */
@media (max-width:820px){
.mosaic.is-trio{grid-template-columns:1fr}
.mosaic.is-trio .tile,.mosaic.is-trio .tile.w2{aspect-ratio:4/3}
}
/* ch. 03 — le seul plan de coulisses qui reste */
.coul-solo{position:relative;overflow:hidden;background:var(--noir-2);max-width:min(100%,560px);margin-top:22px}
.coul-solo img{width:100%;height:auto;display:block}
.coul-solo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,transparent 60%,rgba(10,11,14,.55))}
.coul-solo figcaption{
position:absolute;left:14px;bottom:12px;z-index:2;font-family:var(--mono);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);
text-shadow:0 1px 10px rgba(0,0,0,.9);
}
/* ch. 04 — l'ouverture du chapitre carte : un seul plan de bouffe, et le texte
à côté. Le plan reste en portrait : ces photos sont cadrées à la verticale,
les passer en bandeau reviendrait à couper les burgers en deux. */
.carte-open{
display:grid;grid-template-columns:1fr;gap:clamp(24px,3.5vw,48px);
align-items:center;margin:0 0 clamp(46px,7vh,90px);
}
@media (min-width:900px){.carte-open{grid-template-columns:minmax(0,.85fr) 1fr}}
.plat-lead{position:relative;overflow:hidden;background:var(--noir-2);aspect-ratio:3/4}
.plat-lead img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.plat-lead:hover img{transform:scale(1.04)}
.plat-lead::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(200deg,transparent 62%,rgba(10,11,14,.55))}
.plat-lead figcaption{
position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--mono);
font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blanc);
text-shadow:0 1px 10px rgba(0,0,0,.9);
}
.carte-open .carte-lede{margin:0}
/* ch. 04 — deux cocktails, pas six */
.ck-duo{display:grid;grid-template-columns:1fr;gap:clamp(10px,1.4vw,18px)}
@media (min-width:640px){.ck-duo{grid-template-columns:1fr 1fr}}
.ck-duo .tile{min-height:0;aspect-ratio:3/4}
/* ch. 05 — trois terrasses, à égalité : la rue de jour, le crépuscule, l'enseigne */
.sortie-gallery.is-trio{grid-template-columns:repeat(3,1fr)}
.sortie-gallery.is-trio .shot,
.sortie-gallery.is-trio .shot.wide{grid-column:span 1;aspect-ratio:3/4}
@media (max-width:720px){
.sortie-gallery.is-trio{grid-template-columns:1fr}
.sortie-gallery.is-trio .shot,
.sortie-gallery.is-trio .shot.wide{aspect-ratio:4/3}
}
/* ch. 05 — la grille Instagram passe de 6 à 3 vignettes */
.ig-grid.is-trio{grid-template-columns:repeat(3,1fr)}
/* =====================================================================
V3.1 §3 — LA FAQ, EN NATIFS
Aucune ligne de JS. Le clavier, le lecteur d'écran, l'état ouvert/fermé et
l'exclusivité de l'accordéon (name="faq") sont natifs.
===================================================================== */
.faq{margin:clamp(50px,8vh,110px) 0 clamp(46px,7vh,90px)}
.faq-title{
font-family:var(--display);text-transform:uppercase;letter-spacing:-.02em;
font-size:clamp(26px,4vw,52px);line-height:.95;margin:12px 0 clamp(20px,3vh,34px);
}
.faq details{border-top:1px solid rgba(237,232,224,.10)}
.faq details:last-of-type{border-bottom:1px solid rgba(237,232,224,.10)}
.faq summary{
list-style:none;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:clamp(17px,2.4vh,24px) 0;min-height:44px;
font-size:clamp(15px,1.7vw,19px);line-height:1.45;color:var(--blanc);
transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";flex:0 0 auto;width:13px;height:13px;position:relative;
background:
linear-gradient(var(--or),var(--or)) center/13px 1px no-repeat,
linear-gradient(var(--or),var(--or)) center/1px 13px no-repeat;
transition:transform .45s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--bleu-lien)}
.faq details[open] summary{color:var(--blanc)}
.faq-a{padding:0 0 clamp(18px,2.6vh,28px);max-width:64ch;color:var(--gris);line-height:1.8}
.faq-a p{font-size:clamp(14px,1.5vw,17px)}
.faq-a .program{margin-top:18px;border-top:1px solid rgba(237,232,224,.09)}
/* L'animation de hauteur, en CSS pur. ::details-content et interpolate-size
sont récents : hors support, l'accordéon s'ouvre d'un coup — ce qui est le
comportement natif, donc jamais cassé. */
@supports (interpolate-size: allow-keywords){
:root{interpolate-size:allow-keywords}
.faq details::details-content{
block-size:0;overflow:hidden;
transition:block-size .45s var(--ease),content-visibility .45s var(--ease);
transition-behavior:allow-discrete;
}
.faq details[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){
.faq details::details-content{transition:none}
.faq summary::after{transition:none}
}
/* =====================================================================
V3.1 §2 — LA BARRE D'ONGLETS DE LA CARTE
L'onglet actif se souligne en or, et rien d'autre ne change de couleur.
===================================================================== */
.menu-tabs{
display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,34px);
margin:0 0 clamp(28px,4vh,46px);
border-bottom:1px solid rgba(237,232,224,.10);
}
.menu-tab{
position:relative;
font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gris);padding:14px 0;min-height:44px;
transition:color .3s var(--ease);
}
.menu-tab::after{
content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
background:var(--or);transform:scaleX(0);transform-origin:left;
transition:transform .45s var(--ease);
}
.menu-tab:hover{color:var(--blanc)}
.menu-tab[aria-selected="true"]{color:var(--blanc)}
.menu-tab[aria-selected="true"]::after{transform:scaleX(1)}
.menu-cat[hidden]{display:none}
/* repli du fondu quand View Transitions n'est pas disponible */
.menu-cols.is-fading{opacity:0;transition:opacity .2s linear}
@media (prefers-reduced-motion:reduce){
.menu-tab::after{transition:none}
.menu-cols.is-fading{transition:none}
}
/* =====================================================================
V3.1 §4 — LA MODALE DE RÉSERVATION