/* ==========================================================================
   THE BUILDING - lounge bar, Charleroi
   Palette verrouillee : noir et blanc uniquement. Aucun angle arrondi.
   ========================================================================== */

:root{
  --ink:      #0A0A0A;
  --ink-2:    #101010;
  --ink-3:    #171717;
  --paper:    #F4F4F2;
  --dim:      #A0A09D;
  --dim-2:    #6E6E6B;
  --line:     rgba(244,244,242,.14);
  --line-2:   rgba(244,244,242,.28);

  --shell:    clamp(20px, 5vw, 88px);
  --maxw:     1400px;

  --ease:     cubic-bezier(.16,1,.3,1);
  --dur:      .55s;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  font-variation-settings:'wdth' 100;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

/* Indispensable : plusieurs blocs de cette feuille posent un `display`
   (grid, flex) qui l'emporte sur le `display:none` que le navigateur
   applique a [hidden]. Sans cette regle, masquer le formulaire de
   reservation en JS ne le masque pas. */
[hidden]{ display:none !important; }

/* ---------- Typographie d'affichage ---------- */
h1,h2,h3{
  margin:0;
  font-weight:800;
  font-variation-settings:'wdth' 112;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.92;
}
h1{ font-size:clamp(1.85rem,6vw,5.2rem); }
h2{ font-size:clamp(1.9rem,4vw,3.6rem); }
h3{ font-size:clamp(1.05rem,1.5vw,1.4rem); letter-spacing:-.01em; }

p{ margin:0; }

.eyebrow{
  font-size:.68rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.24em;
  color:var(--dim);
  font-variation-settings:'wdth' 92;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--ink); padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
}

/* ---------- Boutons ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1.05em 1.9em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--line-2);
  border-radius:0;
  font-size:.78rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; white-space:nowrap;
  text-decoration:none; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .12s var(--ease);
}
.btn--solid{ --btn-bg:var(--paper); --btn-fg:var(--ink); border-color:var(--paper); }
.btn--solid:hover{ --btn-bg:transparent; --btn-fg:var(--paper); }
.btn--ghost:hover{ --btn-bg:var(--paper); --btn-fg:var(--ink); border-color:var(--paper); }
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:.8em 1.4em; font-size:.7rem; }
.btn--full{ width:100%; padding:1.2em 1.9em; }
.btn[disabled]{ opacity:.55; cursor:progress; }

.btn__spin{
  width:14px; height:14px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Logo ----------
   Deux montages du meme logo client :
   - .brand        lockup horizontal (chevron + mot) pour la barre de nav.
                   Le chevron est vectorise (SVG) : a 26 px de haut, le PNG
                   d'origine perdrait ses traits fins.
   - .brand--stack lockup vertical d'origine, en PNG, pour le pied de page
                   ou la finesse et le degrade argent se voient vraiment.
   Le mot vient toujours du fichier client (logo-word.png), force en blanc
   pur par filtre pour tenir la palette noir et blanc.                     */
.brand{
  display:inline-flex; align-items:center; gap:.62rem;
  text-decoration:none; line-height:1;
}
.brand__mark{
  width:auto; height:26px; flex:none;
  fill:none; stroke:currentColor; stroke-width:6;
  stroke-linejoin:miter; stroke-miterlimit:6;
  overflow:visible;
}
.brand__word{
  height:auto; width:128px; flex:none;
  filter:brightness(0) invert(1);
  opacity:.92;
  transition:opacity .3s var(--ease);
}
.brand:hover .brand__word{ opacity:1; }

/* Pied de page : le lockup complet, en grand. */
.brand--stack{ display:inline-block; }
.brand--stack img{
  width:clamp(190px,26vw,300px); height:auto;
  filter:brightness(0) invert(1);
  opacity:.94;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:520px){
  .brand__mark{ height:22px; }
  .brand__word{ width:104px; }
}

/* ---------- Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:40;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease),
             backdrop-filter .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  height:72px; padding-inline:var(--shell);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__links{ display:flex; gap:clamp(16px,2.4vw,38px); }
.nav__links a{
  font-size:.72rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; text-decoration:none; color:var(--dim);
  padding-block:6px; position:relative;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--paper); transition:width .4s var(--ease);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:40px; height:40px; padding:0;
  background:none; border:1px solid var(--line-2); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:16px; height:1.5px; background:var(--paper); transition:transform .35s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

/* ---------- Drawer mobile ---------- */
.drawer[hidden]{ display:none; }
.drawer{
  position:fixed; inset:0; z-index:39;
  background:var(--ink);
  padding:120px var(--shell) 48px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity .35s var(--ease);
}
.drawer.is-open{ opacity:1; }
.drawer__nav{ display:flex; flex-direction:column; gap:4px; }
.drawer__nav a{
  font-size:clamp(2rem,10vw,3.2rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; font-variation-settings:'wdth' 112;
  text-decoration:none; padding-block:10px;
  border-bottom:1px solid var(--line);
}
.drawer__foot{
  display:flex; flex-direction:column; gap:6px;
  font-size:.8rem; color:var(--dim);
}
.drawer__foot a{ text-decoration:none; color:var(--paper); }

/* ---------- Traitement photo noir et blanc ---------- */
/* Photos EN COULEUR. L'interface reste strictement noir et blanc : ce sont
   donc les photos qui portent toute la couleur de la page, et elles
   ressortent d'autant plus. Le leger assombrissement garde le texte lisible
   par-dessus les visuels et evite qu'une photo au flash ne creve l'ecran
   dans une page aussi sombre. */
.lieu__media img,
.cell img,
.row__inline,
.carte__media img,
.shot img,
.priv__bg img{
  filter:saturate(1.04) contrast(1.05) brightness(.92);
}

/* Le hero est deja fortement voile par son degrade : l'assombrir en plus
   noierait la photo. On sature seulement. */
.hero__media img{ filter:saturate(1.08) contrast(1.04); }

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:96px var(--shell) clamp(32px,6vh,64px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 62%; }
/* Voile allege depuis le passage des photos en couleur : le reglage
   d'origine avait ete cale sur des images en niveaux de gris, ou noyer
   l'image ne coutait rien. Il reste fort sous le titre (bas de l'image),
   ou le texte blanc doit tenir, et s'ouvre au milieu pour laisser voir
   la photo. */
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.6) 42%, rgba(10,10,10,.24) 72%, rgba(10,10,10,.5) 100%),
    linear-gradient(to right, rgba(10,10,10,.72) 0%, rgba(10,10,10,0) 66%);
}
.hero__inner{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin-inline:auto;
}
.hero h1{ margin:18px 0 22px; }
.hero__sub{
  max-width:44ch; color:var(--dim);
  font-size:clamp(.95rem,1.1vw,1.1rem);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__hours{
  position:relative; z-index:1;
  width:100%; max-width:var(--maxw); margin:clamp(36px,7vh,72px) auto 0;
  display:flex; flex-wrap:wrap; gap:0 48px;
  padding-top:18px; border-top:1px solid var(--line);
}
.hero__hours span{
  display:flex; gap:12px; align-items:baseline;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim-2);
}
.hero__hours b{ color:var(--paper); letter-spacing:.1em; font-weight:700; }

/* ---------- LE LIEU (split asymetrique) ---------- */
.lieu{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(88px,14vh,180px) var(--shell);
  display:grid; grid-template-columns:1fr; gap:clamp(40px,6vw,80px);
}
.lieu__text h2{ margin-bottom:28px; }
.lieu__text p{ max-width:52ch; color:var(--dim); }
.lieu__text p + p{ margin-top:20px; }
.lieu__note{
  padding-top:20px; border-top:1px solid var(--line);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--dim-2);
}
.lieu__media{ margin:0; }
.lieu__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; }

/* ---------- EXPERIENCE (bento 4 cellules) ---------- */
.exp{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--shell) clamp(88px,14vh,180px);
}
.exp__title{ margin-bottom:clamp(32px,5vw,56px); }

.bento{ display:grid; grid-template-columns:1fr; gap:12px; }

.cell{ position:relative; display:flex; flex-direction:column; }
.cell__img{ overflow:hidden; flex:1 1 auto; aspect-ratio:4/3; }
.cell__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.cell:hover .cell__img img{ transform:scale(1.045); }

.cell__cap{ padding:20px 0 0; }
.cell__cap h3{ margin-bottom:8px; }
.cell__cap p{ color:var(--dim); font-size:.92rem; max-width:38ch; }

.cell--b{ background:var(--ink-3); border:1px solid var(--line); }
.cell__body{ padding:clamp(28px,3.4vw,44px); display:flex; flex-direction:column; height:100%; }
.cell__body h3{ margin-bottom:14px; }
.cell__body p{ color:var(--dim); max-width:34ch; }
.cell__rule{ display:block; height:1px; background:var(--line); margin:auto 0 20px; }
.cell__small{ font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--dim-2); }

.cell--d{ position:relative; min-height:300px; }
.cell__img--full{ position:absolute; inset:0; aspect-ratio:auto; }
.cell__img--full::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.96) 0%, rgba(10,10,10,.72) 38%, rgba(10,10,10,.22) 100%);
}
.cell__over{
  position:relative; z-index:1; margin-top:auto;
  padding:clamp(24px,3vw,40px);
}
.cell__over h3{ margin-bottom:8px; }
.cell__over p{ color:var(--dim); font-size:.92rem; }

/* ---------- LA CARTE ---------- */
.carte{
  border-top:1px solid var(--line);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(88px,14vh,170px) var(--shell);
}
.carte__head{ margin-bottom:clamp(40px,6vw,72px); }
.carte__head h2{ margin-top:16px; }

.carte__grid{ display:grid; grid-template-columns:1fr; gap:clamp(32px,5vw,72px); }

.carte__list{ list-style:none; margin:0; padding:0; }
.row{ position:relative; }
.row + .row{ border-top:1px solid var(--line); }
.row__head{
  padding:clamp(22px,2.6vw,34px) 0;
  transition:opacity .35s var(--ease), padding-left .45s var(--ease);
}
.row__head p{ margin-top:10px; color:var(--dim); font-size:.9rem; max-width:40ch; }

.row__inline{ display:none; width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:clamp(22px,2.6vw,34px); }

.carte__media{ display:none; position:sticky; top:110px; overflow:hidden; }
.carte__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 62%; }
.carte__media img.is-swapping{ opacity:0; }
.carte__media img{ transition:opacity .32s var(--ease); }

.carte__foot{
  margin-top:clamp(32px,4vw,52px); padding-top:20px; border-top:1px solid var(--line);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.16em; color:var(--dim-2);
}

/* ---------- BANDEAU DEFILANT ---------- */
.band{
  border-block:1px solid var(--line);
  padding:clamp(16px,2vw,24px) 0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.band__track{
  display:flex; align-items:center; gap:clamp(24px,4vw,56px);
  width:max-content;
  animation:slide 34s linear infinite;
}
.band__track span{
  font-size:clamp(1.1rem,2.6vw,2.1rem); font-weight:800; text-transform:uppercase;
  letter-spacing:-.01em; font-variation-settings:'wdth' 108;
  white-space:nowrap; color:var(--dim-2);
}
.band__track i{ width:7px; height:7px; background:var(--paper); flex:0 0 auto; }
@keyframes slide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ---------- AMBIANCE (defilement horizontal) ---------- */
.gal{ padding:clamp(88px,14vh,170px) 0; }
.gal__head{
  max-width:var(--maxw); margin:0 auto clamp(32px,4vw,56px);
  padding-inline:var(--shell);
}
.gal__head p{ margin-top:16px; color:var(--dim); max-width:44ch; }

.gal__scroller{
  display:flex; gap:12px;
  padding-inline:var(--shell);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* sans cela, l'accroche du premier element mange le retrait de gauche */
  scroll-padding-inline:var(--shell);
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  cursor:grab;
}
.gal__scroller.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.gal__scroller.is-dragging img{ pointer-events:none; }
.gal__scroller::-webkit-scrollbar{ height:2px; }
.gal__scroller::-webkit-scrollbar-thumb{ background:var(--line-2); }
.shot{ margin:0; flex:0 0 auto; scroll-snap-align:start; overflow:hidden; }
.shot img{
  width:clamp(220px,30vw,360px); height:clamp(300px,38vw,460px); object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.shot--tall img{ height:clamp(360px,46vw,560px); }
.shot--wide img{ width:clamp(300px,44vw,560px); }
.shot:hover img{ transform:scale(1.04); }

/* ---------- PRIVATISATION ---------- */
.priv{ position:relative; overflow:hidden; }
.priv__bg{ position:absolute; inset:0; }
.priv__bg img{ width:100%; height:100%; object-fit:cover; }
.priv__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to right, rgba(10,10,10,.94) 0%, rgba(10,10,10,.78) 55%, rgba(10,10,10,.62) 100%);
}
.priv__inner{
  position:relative; z-index:1;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(88px,16vh,190px) var(--shell);
}
.priv__inner p{ margin:26px 0 34px; color:var(--dim); max-width:46ch; }

/* ---------- INFOS ---------- */
.infos{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(88px,14vh,170px) var(--shell);
  display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,72px);
  align-items:start;
}
.infos h2{ margin:16px 0 clamp(32px,4vw,48px); }
.facts{ margin:0; display:grid; gap:0; }
.fact{ padding:22px 0; border-top:1px solid var(--line); }
.fact:last-child{ border-bottom:1px solid var(--line); }
.fact dt{
  display:flex; align-items:center; gap:10px;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--dim-2); margin-bottom:10px;
}
.fact dt svg{ width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.fact dd{ margin:0; font-size:1rem; }
.fact dd a{ text-decoration:none; border-bottom:1px solid var(--line-2); transition:border-color .3s var(--ease); }
.fact dd a:hover{ border-bottom-color:var(--paper); }

.infos__map{ border:1px solid var(--line); }
.infos__map iframe{
  display:block; width:100%; height:clamp(300px,46vw,520px); border:0;
  filter:grayscale(1) invert(.92) contrast(.88);
}

/* ---------- RESERVATION ---------- */
.resa{
  border-top:1px solid var(--line);
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(88px,14vh,170px) var(--shell);
  display:grid; grid-template-columns:1fr; gap:clamp(44px,5vw,80px);
  align-items:start;
}
.resa__intro p{ margin:26px 0 30px; color:var(--dim); max-width:42ch; }
.link-call{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  text-decoration:none; padding-bottom:8px; border-bottom:1px solid var(--line-2);
  transition:border-color .3s var(--ease);
}
.link-call:hover{ border-bottom-color:var(--paper); }
.link-call svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

.resa__form{ display:grid; grid-template-columns:1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.2em; color:var(--dim);
  font-weight:600;
}
.field input,
.field textarea{
  width:100%; padding:14px 16px;
  background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line-2); border-radius:0;
  font:inherit; font-size:.95rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,
.field textarea::placeholder{ color:#8A8A87; }
.field input:hover,
.field textarea:hover{ border-color:var(--paper); }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--paper); background:var(--ink-3); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--paper); background:rgba(244,244,242,.07); }
.field input[type="date"],
.field input[type="time"]{ color-scheme:dark; }

.err{
  font-size:.76rem; color:var(--paper);
  padding-left:12px; border-left:2px solid var(--paper);
}
.hint{ font-size:.74rem; color:var(--dim-2); }

.resa__status{ font-size:.82rem; color:var(--dim); min-height:1.2em; }
.resa__status a{ color:var(--paper); }
.resa__status.is-error{ color:var(--paper); }

/* Ticket affiche a la place du formulaire une fois la demande transmise.
   La reference est enorme a dessein : c'est ce que le visiteur photographie
   ou dicte au telephone. */
.resa__done{
  border:1px solid var(--line-2); background:var(--ink-2);
  padding:clamp(24px,4vw,40px);
  display:flex; flex-direction:column; gap:14px;
}
.resa__done:focus{ outline:none; }
.resa__ref{
  font-size:clamp(2.6rem,9vw,4.2rem);
  font-weight:900; font-variation-settings:'wdth' 120;
  letter-spacing:.06em; line-height:1;
  font-feature-settings:"tnum" 1;
}
.resa__lead{ font-size:1.02rem; font-weight:600; }
.resa__hint{ font-size:.88rem; color:var(--dim); max-width:40ch; }
.resa__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }

/* ---------- FOOTER ---------- */
.foot{
  border-top:1px solid var(--line);
  padding:clamp(56px,8vh,96px) var(--shell) 40px;
  max-width:var(--maxw); margin-inline:auto;
}
.foot__top{
  display:flex; flex-wrap:wrap; gap:28px;
  align-items:flex-end; justify-content:space-between;
  padding-bottom:clamp(40px,6vw,72px);
}
.foot__social{ display:flex; gap:26px; }
.foot__social a{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--dim); transition:color .3s var(--ease);
}
.foot__social a:hover{ color:var(--paper); }
.foot__social svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.foot__grid{
  display:grid; grid-template-columns:1fr; gap:32px;
  padding:clamp(32px,4vw,48px) 0;
  border-top:1px solid var(--line);
}
.foot__grid h3{
  font-size:.66rem; letter-spacing:.2em; color:var(--dim-2);
  font-weight:600; font-variation-settings:'wdth' 92; margin-bottom:12px;
}
.foot__grid p{ font-size:.92rem; color:var(--paper); }
.foot__grid a{ text-decoration:none; border-bottom:1px solid var(--line-2); }

.foot__legal{
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  padding-top:28px; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--dim-2);
}

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (max-width:767px){
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .nav__actions .btn--sm{ display:none; }
  .band__track{ animation-duration:26s; }
  /* les retours a la ligne composes pour le grand format creent des orphelins ici */
  .br-lg{ display:none; }
}

@media (max-width:479px){
  /* Les libelles de CTA restent sur une ligne : on empile plutot que de rogner. */
  .hero__cta{ display:grid; grid-template-columns:1fr; }
  .hero__hours{ flex-direction:column; gap:10px; }
  .foot__legal{ flex-direction:column; gap:10px; }
}

@media (min-width:768px){
  .drawer{ display:none !important; }

  .bento{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:auto;
  }
  .cell--a{ grid-column:span 7; }
  .cell--b{ grid-column:span 5; }
  .cell--c{ grid-column:span 5; }
  .cell--d{ grid-column:span 7; }
  .cell--a .cell__img{ aspect-ratio:16/11; }
  .cell--c .cell__img{ aspect-ratio:4/3; }
  .cell--d{ min-height:360px; }

  .foot__grid{ grid-template-columns:repeat(3,1fr); }

  .resa__form{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .resa__form > .field,
  .resa__form > .btn,
  .resa__status{ grid-column:span 2; }
  .resa__form > .field--half{ grid-column:span 1; }
}

@media (min-width:1024px){
  .lieu{ grid-template-columns:1.05fr .95fr; align-items:start; }
  .lieu__text{ padding-top:clamp(24px,4vw,72px); }
  .lieu__media img{ aspect-ratio:3/4; }

  .carte__grid{ grid-template-columns:1.25fr .75fr; }
  .carte__media{ display:block; }
  .row__inline{ display:none !important; }

  /* Le survol d'une ligne pilote le visuel du panneau de droite. */
  .row{ cursor:pointer; }
  /* .8 minimum : en dessous, le texte secondaire passe sous le seuil AA. */
  .row:not(.is-active) .row__head{ opacity:.8; }
  .row.is-active .row__head{ opacity:1; padding-left:18px; }
  .row.is-active::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:6px; height:6px; background:var(--paper);
  }

  .infos{ grid-template-columns:.9fr 1.1fr; }
  .resa{ grid-template-columns:.85fr 1.15fr; }
}

@media (max-width:1023px){
  .row__inline{ display:block; }
}

/* ---------- Preferences utilisateur ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .band__track{ animation:none; transform:none; }
}

@media (prefers-reduced-transparency:reduce){
  .nav.is-stuck{ background:var(--ink); backdrop-filter:none; }
}

@media print{
  .nav,.drawer,.grain,.band,.gal__scroller{ display:none; }
  body{ background:#fff; color:#000; }
}