/* Matrice Bar à bières — feuille de style unique (jetons, menu, haut de page, sections). */

:root{
  --nuit:      #0A0706;
  --nuit-2:    #140D09;
  --nuit-3:    #1D130D;
  --ambre:     #E8A33D;
  --or:        #F7D08A;
  --mousse:    #F6E9CE;
  --prune:     #5A1E3C;
  --feu:       #C8381F;
  --txt:       #EFE7DB;
  --txt-doux:  rgba(239,231,219,.80);
  --txt-faible:rgba(239,231,219,.62);
  --bord:      rgba(247,208,138,.14);

  --display: 'Anton', 'Arial Narrow', sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --sans:    'Inter Tight', system-ui, sans-serif;

  --gut: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--nuit); color:var(--txt);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }

/* lecture d'écran seulement */
.vh{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typographie commune ---------- */
.eyebrow{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ambre); font-weight:500; margin-bottom:26px;
}
.h-giant{
  font-family:var(--display); font-weight:400;
  font-size:clamp(38px, 6.6vw, 98px); line-height:1.03;
  letter-spacing:-.015em; text-transform:uppercase;
}
.h-giant em{
  font-family:var(--serif); font-style:italic; text-transform:none;
  font-weight:400; letter-spacing:-.01em; color:var(--or);
  display:block; font-size:.9em; line-height:1.08; margin-top:.08em;
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; cursor:pointer; border:0;
  padding:14px 28px; border-radius:100px; font-size:15px; font-weight:500;
  letter-spacing:.01em; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  will-change:transform;
}
.btn--amber{
  background:linear-gradient(170deg,var(--or),var(--ambre));
  color:#2A1602; box-shadow:0 10px 40px -12px rgba(232,163,61,.75);
}
.btn--amber:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 18px 56px -14px rgba(232,163,61,.95) }
.btn--ghost{ border:1px solid rgba(247,208,138,.3); color:var(--txt); background:rgba(10,7,6,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.btn--ghost:hover{ border-color:var(--or); transform:translateY(-3px) }

a:focus-visible, button:focus-visible{ outline:2px solid var(--or); outline-offset:3px }

/* ═══════════════════ NAV ═══════════════════ */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:900; width:min(1240px, calc(100vw - 24px));
  display:flex; align-items:center; gap:28px;
  padding:9px 10px 9px 18px; border-radius:100px;
  background:rgba(14,9,6,.46); border:1px solid var(--bord);
  backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
  transition:background .4s;
}
.nav.is-dense{ background:rgba(10,7,6,.88) }
.nav__mark{ display:flex; align-items:center; gap:11px; font-size:14px; font-weight:500; white-space:nowrap }
.nav__mark i{ font-family:var(--serif); font-style:italic; color:var(--or) }
.nav__logo{ width:40px; height:40px; flex:none; object-fit:cover; clip-path:circle(47%) }
.nav__links{ display:flex; gap:clamp(14px,2vw,26px); margin-left:auto; font-size:14px; color:var(--txt-doux); white-space:nowrap }
.nav__links a{ position:relative; padding:4px 0; transition:color .3s }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--or); transition:width .35s var(--ease) }
.nav__links a:hover{ color:var(--txt) } .nav__links a:hover::after{ width:100% }
.nav__tel{
  display:inline-flex; align-items:center; min-height:44px; padding:0 20px; margin-left:auto;
  border-radius:100px; font-size:14px; font-weight:500; background:var(--or); color:#2A1602;
  transition:transform .3s var(--ease); white-space:nowrap;
}
.nav__links ~ .nav__tel{ margin-left:0 }
.nav__tel:hover{ transform:scale(1.04) }

/* ═══════════════════ HAUT DE PAGE — vraie vidéo, mise en scène en 3D ═══════════════════ */
.hero{
  --mx:0; --my:0; --p:0;                       /* souris (-1..1) et défilement (0..1), écrits par app.js */
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  background:var(--nuit);
  display:flex; align-items:center;
  padding:clamp(112px,15vh,150px) var(--gut) clamp(76px,10vh,110px);
}

/* plan arrière : la même scène, très floue et sombre — elle donne la profondeur derrière le film net */
.hero__plan{
  position:absolute; inset:-8%; z-index:0;
  background:url("../img/poster-doree.jpg") 50% 42% / cover no-repeat;
  filter:blur(30px) brightness(.78) saturate(1.3);
  transform:translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px + var(--p) * 40px), 0) scale(1.15);
  will-change:transform;
}
.hero__plan::after{ content:''; position:absolute; inset:0; background:radial-gradient(60% 70% at 24% 46%, rgba(90,30,60,.40), transparent 70%) }

/* lueurs de bar hors champ, à des profondeurs différentes */
.hero__lueurs{ position:absolute; inset:0; z-index:1; pointer-events:none }
.hero__lueurs i{
  position:absolute; width:var(--s); height:var(--s); border-radius:50%; margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  background:radial-gradient(circle at 40% 36%, rgba(255,214,140,.6), rgba(232,150,50,.26) 44%, transparent 70%);
  opacity:.6; transform:translate3d(calc(var(--mx) * var(--d) * 1.8px), calc(var(--my) * var(--d) * .6px - var(--p) * var(--d) * 4px), 0);
}

/* la scène filmée : inclinée par la souris, poussée par le défilement */
.hero__scene{
  position:absolute; z-index:2; top:0; bottom:0; left:30%; right:-4%;
}
.js .hero__scene{
  opacity:0; transform:translate3d(7%,0,0) scale(1.12);
  transition:opacity 1.8s ease .15s, transform 3.4s cubic-bezier(.16,.8,.24,1) .1s;
}
.js .hero.is-lance .hero__scene{ opacity:1; transform:none }
.hero__film{
  position:absolute; top:4%; height:min(104%, 80vw); right:22%; aspect-ratio:9/16; transform-origin:50% 56%; clip-path:inset(0 3px);
  transform:perspective(1500px)
            rotateY(calc(var(--mx) * -12deg)) rotateX(calc(var(--my) * 8deg))
            translate3d(calc(var(--mx) * -54px), calc(var(--my) * -34px + var(--p) * 36svh), 0)
            scale(calc(1.02 + var(--p) * .24));
  /* bords fondus : le cadre vertical ne doit jamais se deviner (lampe coupée à droite, tuyau à gauche, comptoir en bas) */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24%, #000 68%, transparent 93%), linear-gradient(180deg, transparent 0, #000 10%, #000 68%, transparent 95%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24%, #000 68%, transparent 93%), linear-gradient(180deg, transparent 0, #000 10%, #000 68%, transparent 95%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  will-change:transform;
}
.film{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  opacity:0; z-index:1; transition:opacity .01s linear .9s;          /* le sortant reste opaque pendant que l'entrant monte : pas de creux de lumière */
}
.film.is-on{ opacity:1; z-index:2; transition:opacity .8s linear }
/* reflet qui suit le curseur : la lumière glisse sur le verre */
.hero__glint{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at calc(56% + var(--mx) * 24%) calc(48% + var(--my) * 20%), rgba(255,214,150,.30), rgba(255,170,80,.08) 28%, transparent 46%);
}

.hero__bulles{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none }

/* voile : lisibilité du texte à gauche, vignette autour du film */
.hero__voile{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,7,6,.94) 0%, rgba(10,7,6,.80) 28%, rgba(10,7,6,.22) 50%, rgba(10,7,6,0) 64%),
    linear-gradient(180deg, rgba(10,7,6,.85) 0%, rgba(10,7,6,0) 22%),
    linear-gradient(0deg,  rgba(10,7,6,.96) 0%, rgba(10,7,6,0) 28%),
    radial-gradient(120% 90% at 64% 48%, transparent 44%, rgba(10,7,6,.55) 100%);
}

.hero__ui{ position:relative; z-index:5; width:min(100%, 660px) }
.hero__eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(12px,2.2vh,24px);
  font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--or); font-weight:500;
}
.hero__eyebrow::before{ content:''; width:38px; height:1px; background:linear-gradient(90deg, transparent, var(--or)) }

/* ——— le titre : du vrai texte, net à toutes les tailles ——— */
.titre{ display:block; font-weight:400; line-height:1 }
.titre__k{
  display:block; font-family:var(--serif); font-style:italic; color:var(--or);
  font-size:clamp(28px, 3.5vw, 56px); line-height:1; letter-spacing:.005em;
  margin:0 0 .1em .04em; position:relative; z-index:1;
}
.titre__g{
  display:block; white-space:nowrap;
  font-family:var(--display); text-transform:uppercase; line-height:.95; letter-spacing:.004em;
  font-size:clamp(3.1rem, 10vw, 9.4rem);
  filter:drop-shadow(0 .1em .26em rgba(0,0,0,.5));
}
/* le dégradé est porté par CHAQUE lettre : background-clip:text ne peint rien sur un parent dont le texte est dans des <span> */
.titre__g .l{
  display:inline-block;
  background:linear-gradient(180deg, #FFF6E0 0%, #F6DCA2 55%, #E2B260 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.js .titre__g .l{ opacity:0; transform:translateY(.32em) scale(.96); filter:blur(8px) }
.js .hero.is-lance .titre__g .l{
  opacity:1; transform:none; filter:none;
  transition:opacity .9s var(--ease) calc(var(--i) * 55ms + .25s), transform 1.1s var(--ease) calc(var(--i) * 55ms + .25s), filter .9s var(--ease) calc(var(--i) * 55ms + .25s);
}
.titre__s{
  display:block; font-family:var(--serif); font-style:italic; color:var(--mousse);
  font-size:clamp(30px, 4.4vw, 70px); line-height:1.05; margin:.1em 0 0 .04em;
}
.js .titre__k, .js .titre__s, .js .hero__eyebrow, .js .hero__lede, .js .hero__cta, .js .hero__meta{ opacity:0; transform:translateY(16px) }
.js .hero.is-lance .titre__k, .js .hero.is-lance .titre__s, .js .hero.is-lance .hero__eyebrow,
.js .hero.is-lance .hero__lede, .js .hero.is-lance .hero__cta, .js .hero.is-lance .hero__meta{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease) }
.hero.is-lance .hero__eyebrow{ transition-delay:.1s }
.hero.is-lance .titre__k{ transition-delay:.2s }
.hero.is-lance .titre__s{ transition-delay:.95s }
.hero.is-lance .hero__lede{ transition-delay:1.15s }
.hero.is-lance .hero__cta{ transition-delay:1.3s }
.hero.is-lance .hero__meta{ transition-delay:1.45s }

.hero__ui{ translate:0 calc(var(--p) * -70px) }                       /* au défilement : le bloc de texte monte d'un seul tenant */
.hero .titre__k{ translate:max(calc(var(--mx) * 16px), calc(var(--gut) * -.7)) calc(var(--my) * 9px) }      /* à la souris : chaque ligne glisse à sa propre profondeur */
.hero .titre__g{ translate:max(calc(var(--mx) * 30px), calc(var(--gut) * -.7)) calc(var(--my) * 16px) }
.hero .titre__s{ translate:max(calc(var(--mx) * 48px), calc(var(--gut) * -.7)) calc(var(--my) * 24px) }
.hero .hero__eyebrow{ translate:max(calc(var(--mx) * 8px), calc(var(--gut) * -.7)) 0; text-shadow:0 1px 12px rgba(10,7,6,.9) }
.hero .titre__k, .hero .titre__g, .hero .titre__s{ will-change:translate }

.hero__lede{ max-width:44ch; margin:clamp(18px,3vh,30px) 0 clamp(22px,3.4vh,34px); color:var(--txt-doux); font-size:clamp(15.5px,1.35vw,19px); line-height:1.6 }
.hero__lede b{ color:var(--or); font-weight:500 }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px }
.hero__meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:14px clamp(22px,3vw,44px);
  margin-top:clamp(26px,4.6vh,48px); padding-top:20px; border-top:1px solid var(--bord);
}
.hero__meta li{ display:flex; flex-direction:column; gap:2px }
.hero__meta strong{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(17px,1.7vw,24px); color:var(--or); letter-spacing:.01em }
.hero__meta span{ font-size:13.5px; color:var(--txt-doux); letter-spacing:.02em }

.hero__scroll{
  position:absolute; left:var(--gut); bottom:26px; z-index:5;
  display:flex; align-items:center; gap:12px; opacity:max(0, calc(1 - var(--p) * 5));
  font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-faible);
}
@media (max-height: 820px){ .hero__scroll{ display:none } }
.hero__scroll i{ display:block; width:38px; height:1px; background:linear-gradient(90deg, var(--or), transparent); animation:glisse 2.4s infinite }
@keyframes glisse{ 0%{ transform:scaleX(0); transform-origin:left } 55%{ transform:scaleX(1); transform-origin:left } 56%{ transform-origin:right } 100%{ transform:scaleX(0); transform-origin:right } }

/* tablette et téléphone : la scène passe au-dessus, le texte dessous */
@media (max-width: 960px){
  .hero{ align-items:flex-end; padding-top:0 }
  .hero__scene{ left:-8%; right:-8%; top:0; bottom:auto; height:max(46svh, 330px) }
  .hero__film{ left:50%; right:auto; top:44px; height:112%; translate:-50% 0 }
  .hero__glint{ -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 45%); mask-image:linear-gradient(0deg, transparent 0, #000 45%) }
  .hero__voile{ background:
      linear-gradient(0deg, rgba(10,7,6,.96) 0%, rgba(10,7,6,.7) 40%, rgba(10,7,6,0) 62%),
      linear-gradient(180deg, rgba(10,7,6,.85) 0%, rgba(10,7,6,0) 20%); }
  .hero__ui{ padding-top:calc(max(36svh, 270px) + 24px) }
  .hero__scroll{ display:none }
  .titre__g{ font-size:clamp(3.1rem, 19vw, 8rem) }
}

/* ═══════════════════ SECTIONS DE DÉMONSTRATION ═══════════════════ */
.sec{ padding:clamp(80px,13vh,160px) var(--gut); position:relative; z-index:1 }
.sec__in{ max-width:1240px; margin:0 auto }

.lieu{ background:transparent; overflow-x:clip }
.lieu__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center; margin-top:62px }
.lieu p{ color:var(--txt-doux); margin-bottom:18px }
.lieu .big{ font-size:clamp(18px,1.9vw,24px); line-height:1.5; color:var(--mousse); margin-bottom:22px }
.lieu .note{ font-family:var(--serif); font-style:italic; color:var(--or); font-size:19px }
.cadre{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--bord);
  box-shadow:0 50px 100px -40px #000; aspect-ratio:4/3.2; background:var(--nuit-3);
}
.cadre img{ width:100%; height:100%; object-fit:cover; opacity:.92; transition:transform 1.2s var(--ease) }
.cadre:hover img{ transform:scale(1.04) }
.cadre figcaption, .bande figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:50px 24px 18px;
  background:linear-gradient(transparent, rgba(10,7,6,.92));
  font-size:13px; letter-spacing:.03em; color:var(--txt-doux);
}
.cadre--lances{ aspect-ratio:9/16; width:min(100%, 400px); justify-self:center }
.cadre--large{ aspect-ratio:5/3 }
.bande{
  position:relative; margin-top:clamp(44px,6vw,80px); border-radius:14px; overflow:hidden; border:1px solid var(--bord);
  box-shadow:0 50px 100px -40px #000; aspect-ratio:16/9; max-width:1080px; margin-inline:auto; background:var(--nuit-3);
}
.bande img{ width:100%; height:100%; object-fit:cover; opacity:.92 }


/* ═══════════════════ 02 — LA COULÉE : vraie vidéo d'une chope qu'on remplit ═══════════════════ */
.coulee{  overflow-x:clip }
.coulee__grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(24px,4vw,70px); align-items:center }
.coulee__txt{ min-width:0 }
.coulee__txt .h-giant{ font-size:clamp(38px, 4.9vw, 78px); text-wrap:balance }
.coulee__txt p:not(.eyebrow){ color:var(--txt-doux); margin-top:22px; max-width:36ch }
.coulee__scene{
  --tx:0; --ty:0; --sp:.5;                      /* souris et défilement, écrits par app.js */
  position:relative; aspect-ratio:16/10; min-width:0;
}
.coulee__scene .film{
  object-position:50% 50%;
  transform:perspective(1300px) rotateY(calc(var(--tx) * -6deg)) rotateX(calc(var(--ty) * 4deg))
            translate3d(0, calc((.5 - var(--sp)) * 60px), 0) scale(calc(1.02 + (1 - var(--sp)) * .06));
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

.cave{ background:transparent; text-align:center }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:62px }
.card{ padding:32px 28px 36px; border-radius:20px; text-align:left;
  background:linear-gradient(165deg, rgba(247,208,138,.085), rgba(247,208,138,.018));
  border:1px solid var(--bord); transition:transform .45s var(--ease), border-color .4s, box-shadow .4s }
.card:hover{ transform:translateY(-6px); border-color:rgba(247,208,138,.4); box-shadow:0 40px 80px -40px rgba(232,163,61,.5) }
.card__num{ font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--txt-faible) }
.card h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(20px,2.2vw,28px); margin:12px 0 10px }
.card p{ color:var(--txt-doux); font-size:15.5px }

/* ═══════════════════ 04 — AVIS GOOGLE (alimentés par api/avis.php) ═══════════════════ */
.avis{ background:transparent; text-align:center }
.avis__tete{ margin-top:46px }
.avis__tete[hidden]{ display:none }
.avis__note{ display:flex; align-items:center; justify-content:center; gap:6px 20px; flex-wrap:wrap; color:var(--txt-doux) }
.avis__note strong{ font-family:var(--display); font-weight:400; font-size:clamp(56px,7.4vw,96px); line-height:1; color:var(--or) }
.etoiles{ color:var(--ambre); letter-spacing:.12em; font-size:clamp(20px,2.3vw,28px) }
.etoiles .vide{ color:rgba(247,208,138,.24) }
.avis__total{ font-size:15px }
.avis__liste{ list-style:none; padding:0; margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:18px; text-align:left }
.avis__carte{
  display:flex; flex-direction:column; gap:14px; padding:26px 24px 22px; border-radius:20px;
  background:linear-gradient(165deg, rgba(247,208,138,.085), rgba(247,208,138,.018)); border:1px solid var(--bord);
  animation:monte .8s var(--ease) both; animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes monte{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
.avis__carte blockquote{ margin:0; font-size:15.5px; line-height:1.6; color:var(--txt); display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden }
.avis__auteur{ margin-top:auto; padding-top:14px; border-top:1px solid var(--bord); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--txt-faible) }
.avis__auteur a, .avis__auteur b{ color:var(--or); font-weight:500 }
.avis__pied{ margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px }
.avis__etat{ font-size:12.5px; color:var(--txt-faible); max-width:62ch }
.avis__etat.is-apercu{ color:#F08A72 }

.venir{ background:transparent }
.venir__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,80px); align-items:start; margin-top:56px }
.tel-big{ display:inline-block; margin-top:22px; font-family:var(--display); font-size:clamp(28px,4vw,54px); color:var(--or); transition:opacity .3s }
.tel-big:hover{ opacity:.75 }
.venir p{ color:var(--txt-doux) }
.venir__note{ margin-top:22px; font-size:13px; color:#F08A72; border-left:2px solid var(--feu); padding-left:14px }

.foot{
  padding:30px var(--gut); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border-top:1px solid var(--bord); font-size:13px; color:var(--txt-faible); background:rgba(10,7,6,.78); position:relative; z-index:1;
}
.foot a{ color:var(--or) }
.foot__marque{ display:inline-flex; align-items:center; gap:12px }
.foot__marque img{ width:36px; height:36px; clip-path:circle(47%); object-fit:cover }

@media (max-width: 900px){
  .lieu__grid, .venir__grid{ grid-template-columns:1fr }
  .cards{ grid-template-columns:1fr }
  .foot{ justify-content:center; text-align:center }
}

/* ═══════════════════ RÉVÉLATIONS ═══════════════════ */
.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.js [data-reveal].is-in{ opacity:1; transform:none }

/* ═══════════════════ MOUVEMENT RÉDUIT ═══════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-reveal]{ opacity:1!important; transform:none!important }
}

@media (max-width: 960px){
  .coulee__grid{ grid-template-columns:1fr }
  .coulee__scene{ aspect-ratio:16/12; margin:0 }
  .coulee__scene .film{ object-position:56% 50% }
}
/* un titre ne doit jamais passer sous le menu quand on arrive par une ancre */
section[id]{ scroll-margin-top:84px }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap }

/* mode de capture (?gel) : aucune transition, états fixes */
.is-gel .hero, .is-gel .hero *, .is-gel .coulee, .is-gel .coulee *{ transition:none!important; animation:none!important }

/* menu : sur tablette et téléphone, un bouton ouvre un panneau avec les liens */
.nav__burger{ display:none; width:44px; height:44px; border:0; border-radius:50%; background:rgba(247,208,138,.1); cursor:pointer; position:relative; flex:none }
.nav__burger span{ position:absolute; left:13px; right:13px; height:1.5px; background:var(--txt); border-radius:2px; transition:transform .3s var(--ease), opacity .2s }
.nav__burger span:nth-child(1){ top:17px } .nav__burger span:nth-child(2){ top:25px }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg) }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg) }
@media (max-width: 860px){
  .nav{ gap:10px; padding:9px 9px 9px 16px }
  .nav__mark span{ font-size:13px }
  .nav__tel{ padding:0 15px; font-size:13.5px; margin-left:auto }
  .nav__burger{ display:block }
  .nav__links{
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; margin:0;
    flex-direction:column; gap:0; padding:8px; border-radius:22px;
    background:rgba(10,7,6,.97); border:1px solid var(--bord);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  }
  .nav.is-open .nav__links{ display:flex }
  .nav__links a{ padding:0 16px; min-height:48px; display:flex; align-items:center; font-size:16px; color:var(--txt); border-radius:14px }
  .nav__links a:active, .nav__links a:hover{ background:rgba(247,208,138,.1) }
  .nav__links a::after{ display:none }
}
@media (max-width: 420px){
  .hero__eyebrow{ letter-spacing:.2em; font-size:11px; gap:10px }
  .hero__eyebrow::before{ width:22px }
}

.saut{ position:absolute; left:12px; top:-60px; z-index:1000; padding:12px 18px; border-radius:100px; background:var(--or); color:#2A1602; font-weight:500 }
.saut:focus{ top:12px }

/* bandeau : dit ce que c'est (maquette de prospection) ; en bas pour ne pas recouvrir le menu, s'efface quand on descend */
.bandeau{
  position:fixed; left:0; right:0; bottom:0; z-index:1000; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:4px 14px;
  padding:9px 16px; background:var(--ambre); color:#0A0706; font-size:13px; font-weight:600; text-align:center;
  transition:transform .4s var(--ease);
}
.bandeau.cachee{ transform:translateY(100%) }
.bandeau a{ text-decoration:underline }

/* ═══════════════════ FOND COMMUN : mêmes lueurs et mêmes bulles de haut en bas de la page ═══════════════════ */
.fond{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -8%, #1d1109 0%, var(--nuit) 62%);
}
.fond__lueur{ position:absolute; border-radius:50%; will-change:transform }
.fond__lueur:nth-child(1){ width:70vw; height:70vw; left:-24vw; top:4vh;
  background:radial-gradient(closest-side, rgba(232,163,61,.34), rgba(232,150,50,.12) 55%, transparent);
  transform:translate3d(calc(var(--sy,0) * 10vw), calc(var(--sy,0) * -46vh), 0) }
.fond__lueur:nth-child(2){ width:62vw; height:62vw; right:-22vw; top:34vh;
  background:radial-gradient(closest-side, rgba(150,52,86,.30), rgba(90,30,60,.12) 55%, transparent);
  transform:translate3d(calc(var(--sy,0) * -12vw), calc(var(--sy,0) * -62vh), 0) }
.fond__lueur:nth-child(3){ width:80vw; height:80vw; left:14vw; bottom:-46vh;
  background:radial-gradient(closest-side, rgba(247,208,138,.26), rgba(232,163,61,.10) 52%, transparent);
  transform:translate3d(calc(var(--sy,0) * -8vw), calc(var(--sy,0) * 30vh), 0) }
.fond__bulles{ position:absolute; inset:0; width:100%; height:100%; opacity:.75 }
.fond::after{ content:''; position:absolute; inset:0; background:radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(10,7,6,.5) 100%) }
/* fondu entre le haut de page (opaque) et le fond commun */
.lieu::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:200px; background:linear-gradient(var(--nuit), transparent); pointer-events:none }

/* ═══════════════════ CANETTE : roule le long du bord droit, derrière le contenu (rendu 3D, 120 images : 3° par image) ═══════════════════ */
.canette{
  position:fixed; left:0; top:0; z-index:0; width:var(--cw, 100px); height:calc(var(--cw, 100px) * 1.6);
  pointer-events:none; opacity:0; will-change:transform; contain:layout paint size;        /* z-index 0 : sous les sections (z-index 1), elle ne masque jamais un texte */
}
.canette__img{ position:absolute; inset:0; image-rendering:auto; background:url("../img/canette-120.webp") 0 0 / 1200% 1000% no-repeat }
@media (max-width: 700px){ .canette{ --cw:50px } }          /* tailles entières : 2 pixels de planche = 1 pixel d'écran (ou exactement 4 en écran Retina), aucun bavage entre images */
@media (prefers-reduced-motion: reduce){ .canette{ display:none } }

/* ═══════════════════ 01 — LE LIEU : composition autour de la photo ═══════════════════ */
.compo{ position:relative; width:min(100%, 470px); justify-self:center; padding:0 22px 28px 0 }
.compo__inner{ position:relative; transform-style:preserve-3d; transform:perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .45s var(--ease) }
.compo::before{ content:''; position:absolute; inset:-8% -14% -4%; z-index:-1; background:radial-gradient(closest-side, rgba(232,163,61,.30), transparent 72%) }
.compo__arche{ position:relative; width:72%; margin-left:auto; aspect-ratio:9/16; transform:translateZ(0) }
.compo__arche::before{                                   /* filet or décalé : donne du relief à la photo */
  content:''; position:absolute; inset:0; transform:translate(20px, 20px); border:1px solid rgba(232,163,61,.6);
  border-radius:50% 50% 18px 18px / 28% 28% 18px 18px; z-index:-1;
}
.compo__arche figure{
  position:absolute; inset:0; margin:0; overflow:hidden; background:var(--nuit-3);
  border-radius:50% 50% 18px 18px / 28% 28% 18px 18px; border:1px solid rgba(247,208,138,.4);
  box-shadow:0 60px 110px -40px rgba(0,0,0,.9), 0 0 90px -20px rgba(232,163,61,.35);
}
.compo__arche img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02) }
.compo__arche figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:70px 18px 18px 40%; text-align:right;
  background:linear-gradient(transparent, rgba(10,7,6,.88)); font-size:12.5px; letter-spacing:.04em; color:var(--txt-doux);
}
.compo__nuit{
  position:absolute; left:0; bottom:9%; width:54%; margin:0; aspect-ratio:4/3; border-radius:16px; overflow:hidden; transform:translateZ(60px);
  border:1px solid rgba(247,208,138,.55); box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 6px rgba(10,7,6,.75);
}
.compo__nuit img{ width:100%; height:100%; object-fit:cover }
.compo__sceau{
  position:absolute; left:2%; top:6%; width:118px; height:118px; border-radius:50%; transform:translateZ(90px);
  background:rgba(10,7,6,.86); border:1px solid rgba(247,208,138,.5); box-shadow:0 20px 40px -14px #000;
}
.compo__sceau svg{ position:absolute; inset:0; width:100%; height:100%; animation:tourne 26s linear infinite }
.compo__sceau text{ font-family:var(--display); font-size:9.2px; letter-spacing:.06em; fill:var(--or) }
.compo__sceau img{ position:absolute; left:50%; top:50%; width:46%; height:46%; margin:-23% 0 0 -23%; border-radius:50%; object-fit:cover }
@keyframes tourne{ to{ transform:rotate(360deg) } }
.bande{ box-shadow:0 50px 100px -40px #000, 0 0 0 1px rgba(247,208,138,.22), 0 0 80px -30px rgba(232,163,61,.35) }
@media (max-width: 900px){
  .compo{ width:min(100%, 400px); margin-top:18px }
  .compo__sceau{ width:96px; height:96px }
}

/* ═══════════════════ 04 — ÉVÉNEMENTS ═══════════════════ */
.evt{ text-align:center }
.evt__intro{ max-width:60ch; margin:24px auto 0; color:var(--txt-doux); font-size:clamp(16px, 1.4vw, 19px); line-height:1.65 }
.evt__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:56px; text-align:left }
.evt__carte{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:38px 34px 34px; border-radius:24px; overflow:hidden;
  background:linear-gradient(165deg, rgba(247,208,138,.10), rgba(247,208,138,.02)); border:1px solid var(--bord);
  transition:transform .45s var(--ease), border-color .4s, box-shadow .4s;
}
.evt__carte::after{ content:''; position:absolute; right:-80px; top:-80px; width:240px; height:240px; border-radius:50%; background:radial-gradient(closest-side, rgba(232,163,61,.22), transparent); pointer-events:none }
.evt__carte:hover{ transform:translateY(-6px); border-color:rgba(247,208,138,.4); box-shadow:0 40px 80px -40px rgba(232,163,61,.5) }
.evt__icone{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:var(--or); background:rgba(232,163,61,.12); border:1px solid rgba(247,208,138,.3) }
.evt__icone svg{ width:28px; height:28px }
.evt__tag{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ambre) }
.evt__carte h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(26px, 3vw, 40px); line-height:1.05; margin:0 }
.evt__carte p{ color:var(--txt-doux); margin:0 }
.evt__carte ul{ list-style:none; padding:0; margin:6px 0 8px; display:grid; gap:11px }
.evt__carte li{ position:relative; padding-left:24px; color:var(--txt-doux); font-size:15.5px; line-height:1.5 }
.evt__carte li::before{ content:''; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--ambre); box-shadow:0 0 12px rgba(232,163,61,.8) }
.evt__carte li b{ color:var(--mousse); font-weight:500 }
.evt__cta{ margin-top:auto; padding-top:12px; display:flex; flex-wrap:wrap; gap:12px }
.evt__note{ margin-top:28px; font-size:13px; color:var(--txt-faible) }
@media (max-width: 900px){ .evt__grid{ grid-template-columns:1fr } .evt__carte{ padding:30px 24px 28px } }

/* ═══════════════════ 06 — PLAN GOOGLE MAPS (chargé au clic) ═══════════════════ */
.carte{ position:relative; aspect-ratio:4/3.3; border-radius:20px; overflow:hidden; border:1px solid var(--bord); box-shadow:0 50px 100px -40px #000, 0 0 80px -30px rgba(232,163,61,.3); background:#120c08 }
.carte__voile{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center;
  background:radial-gradient(70% 60% at 50% 44%, rgba(232,163,61,.24), transparent 70%),
             repeating-linear-gradient(0deg, rgba(247,208,138,.07) 0 1px, transparent 1px 40px),
             repeating-linear-gradient(90deg, rgba(247,208,138,.07) 0 1px, transparent 1px 40px), #120c08;
}
.carte__voile[hidden]{ display:none }
.carte__pin{ width:46px; height:46px; color:var(--ambre); filter:drop-shadow(0 0 18px rgba(232,163,61,.7)) }
.carte__voile p{ margin:0; color:var(--mousse); line-height:1.5 }
.carte small{ font-size:12px; color:var(--txt-faible); max-width:36ch; line-height:1.5 }
.carte iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:invert(.9) hue-rotate(180deg) saturate(.6) sepia(.3) brightness(.95) contrast(1.05) }
.venir__liens{ display:flex; flex-wrap:wrap; gap:12px; margin-top:16px }
@media (max-width: 900px){ .venir__grid{ grid-template-columns:1fr } }