/* ═══════════════════════════════════════════════════════════
   MAISON ARACIL — feuille de style
   Style : bicolore franc (noir / jaune pastel) + sable du logo
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Jaune pastel relevé sur les affiches de la maison */
  --jaune:        #FCF07A;
  --jaune-fonce:  #E4CF4E;
  --jaune-pale:   #FDF7C2;

  /* Noir doux — jamais #000 */
  --noir:         #121110;
  --noir-2:       #1E1C17;
  --noir-3:       #2B2822;

  /* Sable du logo */
  --sable:        #CBBC9F;
  --sable-clair:  #E3D8C0;
  --creme:        #F7F2E6;

  /* Truffe : l'accent chaud et sombre */
  --truffe:       #4A3B2A;

  --texte:        #1A1815;
  --texte-doux:   #5E574A;
  --texte-clair:  #F3EEDF;
  --texte-clair-2:#B9B09A;

  --ombre-dure:   6px 6px 0 var(--noir);
  --ombre-douce:  0 18px 44px -20px rgba(18,17,16,.45);

  --ease-smooth:  cubic-bezier(.25,.46,.45,.94);
  --ease-elastic: cubic-bezier(.68,-.55,.265,1.55);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);

  --display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --corps:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 4px;
  --nav-h: 72px;
  --wrap: 1180px;
  --pad: clamp(18px, 5vw, 44px);
  --sec-y: clamp(68px, 10vw, 128px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--corps);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  line-height:1.65;
  color:var(--texte);
  background:var(--noir);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ─── Grain cinéma ─── */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px; opacity:.035;
}

/* ─── Utilitaires ─── */
.container{ width:min(100%,var(--wrap)); margin-inline:auto; padding-inline:var(--pad); }
.container--etroit{ width:min(100%,820px); }
.centre{ text-align:center; }
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:12px; top:-70px; z-index:1200;
  background:var(--jaune); color:var(--noir); padding:.7rem 1.1rem;
  font-weight:700; border-radius:var(--radius); transition:top .2s;
}
.skip-link:focus{ top:12px; }
::selection{ background:var(--jaune); color:var(--noir); }
:focus-visible{ outline:3px solid var(--jaune); outline-offset:3px; }
.section--creme :focus-visible,.section--sable :focus-visible{ outline-color:var(--noir); }
html{ scrollbar-color:var(--jaune) var(--noir); }
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--noir); }
::-webkit-scrollbar-thumb{ background:var(--jaune-fonce); border-radius:99px; }

/* ─── Typographie ─── */
.titre-xl{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.5rem,1.4rem + 5.2vw,5.4rem);
  line-height:.94; letter-spacing:-.01em; text-transform:uppercase;
  margin:.15em 0 .5em; color:var(--noir);
}
.titre-xl--clair{ color:var(--texte-clair); }
.jaune{ color:var(--jaune-fonce); }
.titre-xl--clair .jaune{ color:var(--jaune); }
.label{
  font-size:.74rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:700; color:var(--truffe); margin:0;
}
.label--clair{ color:var(--jaune); }
.chapo{ font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.5; font-weight:500; color:var(--texte); }
.chapo--clair{ color:var(--texte-clair); }
.intro{ max-width:62ch; color:var(--texte-doux); }
h3{ font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(1.15rem,1.05rem + .4vw,1.5rem); line-height:1.1; margin:0 0 .5rem; }

/* ─── Boutons ─── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--corps); font-weight:700; font-size:.92rem; letter-spacing:.02em;
  padding:.78rem 1.4rem; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; overflow:hidden; text-decoration:none;
  transition:transform .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo), background .25s, color .25s;
}
.btn::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(120px circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.45), transparent 70%);
  transition:opacity .3s;
}
.btn:hover::before,.btn:focus-visible::before{ opacity:1; }
.btn--primary{ background:var(--jaune); color:var(--noir); border-color:var(--jaune); }
.btn--primary:hover,.btn--primary:focus-visible{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--noir); }
.btn--noir{ background:var(--noir); color:var(--jaune); border-color:var(--noir); }
.btn--noir:hover,.btn--noir:focus-visible{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--jaune-fonce); }
.btn--outline{ background:transparent; color:var(--texte-clair); border-color:rgba(252,240,122,.55); }
.btn--outline:hover,.btn--outline:focus-visible{ border-color:var(--jaune); color:var(--jaune); transform:translateY(-2px); }
.btn--grand{ padding:1rem 1.9rem; font-size:1rem; }
.btn--bloc{ width:100%; margin-top:1rem; }
.btn:active{ transform:scale(.96); transition-timing-function:var(--ease-elastic); }
.btn__ico{ width:18px; height:18px; }

/* ═══════════ NAVIGATION ═══════════ */
.nav{
  position:fixed; inset:0 0 auto; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .35s var(--ease-smooth), box-shadow .35s;
}
.nav--scrolled{
  background:rgba(18,17,16,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(252,240,122,.18), 0 10px 30px -18px rgba(0,0,0,.9);
}
.nav__inner{
  width:min(100%,1320px); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.2rem;
}
.nav__logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--jaune); margin-right:auto; }
.nav__mark{ width:20px; height:32px; flex:0 0 auto; }
.nav__nom{
  font-family:var(--display); font-size:1.12rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--texte-clair); white-space:nowrap;
}
.nav__links{ display:flex; gap:1.5rem; }
.nav__links a{
  position:relative; text-decoration:none; color:var(--texte-clair-2);
  font-size:.86rem; font-weight:500; letter-spacing:.02em; padding:.3rem 0;
  transition:color .25s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--jaune);
  transition:width .3s var(--ease-out-expo);
}
.nav__links a:hover,.nav__links a:focus-visible{ color:var(--jaune); }
.nav__links a:hover::after,.nav__links a:focus-visible::after{ width:100%; }
.nav__actions{ display:flex; align-items:center; gap:.85rem; }
.nav__social{ display:grid; place-items:center; width:38px; height:38px; color:var(--texte-clair-2); transition:color .25s, transform .25s; }
.nav__social svg{ width:20px; height:20px; }
.nav__social:hover,.nav__social:focus-visible{ color:var(--jaune); transform:translateY(-2px); }

.nav__burger{
  display:none; width:44px; height:38px; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; padding:0;
}
.nav__burger span{ display:block; height:2px; width:26px; background:var(--texte-clair); transition:transform .35s var(--ease-out-expo), opacity .2s; }
.nav__burger.ouvert span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.nav__burger.ouvert span:nth-child(2){ opacity:0; }
.nav__burger.ouvert span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.nav__menu-mobile{ display:none; }

/* ═══════════ HERO — rideau ═══════════ */
.hero{
  position:sticky; top:0; z-index:0;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center; overflow:hidden;
  background:var(--noir);
}
.hero__halos{ position:absolute; inset:0; pointer-events:none; }
.halo{
  position:absolute; width:62vmin; height:62vmin; border-radius:50%;
  background:radial-gradient(circle, var(--jaune) 0%, transparent 70%);
  opacity:.14; filter:blur(4px);
}
.halo--1{ top:8%; left:50%; transform:translateX(-50%); animation:halo-drift 26s var(--ease-smooth) infinite alternate; }
.halo--2{ bottom:2%; right:6%; width:44vmin; height:44vmin; opacity:.09;
  background:radial-gradient(circle, var(--sable) 0%, transparent 70%);
  animation:halo-drift 32s var(--ease-smooth) 2s infinite alternate-reverse; }
@keyframes halo-drift{
  from{ transform:translate(-52%,-3%) scale(1); }
  to{ transform:translate(-46%,5%) scale(1.16); }
}
.halo--2{ animation-name:halo-drift-2; }
@keyframes halo-drift-2{
  from{ transform:translate(4%,2%) scale(1); }
  to{ transform:translate(-6%,-6%) scale(1.2); }
}
.hero__inner{ position:relative; z-index:2; text-align:center; padding:var(--nav-h) var(--pad) 4vh; will-change:transform,opacity; }
.hero__visual{ display:flex; justify-content:center; }
.hero__svg{ width:clamp(190px,30vw,340px); height:auto; }
.hero__svg path{ fill:none; stroke:var(--creme); stroke-width:11; stroke-linecap:round; stroke-linejoin:round; }
.hero__svg .owl-lune path{ stroke:var(--jaune); stroke-width:10; }
.hero__svg .oeil{ fill:var(--jaune); }
.hero__nom{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(2.2rem,1rem + 6vw,5rem); line-height:1;
  letter-spacing:.03em; color:var(--creme); margin:clamp(1.2rem,3vw,2.4rem) 0 0;
}

/* animation d'entrée du hero */
.js .hero__svg path{ stroke-dasharray:1; stroke-dashoffset:1; animation:tracer 1.5s var(--ease-out-expo) .25s forwards; }
.js .hero__svg .owl-lune path:nth-child(2){ animation-delay:1.2s; }
.js .hero__svg .owl-yeux{ opacity:0; animation:apparait .6s ease 1.5s forwards; }
.js .hero__nom{ opacity:0; transform:translateY(46px); animation:monte 1.1s var(--ease-out-expo) 1.55s forwards; }
@keyframes tracer{ to{ stroke-dashoffset:0; } }
@keyframes apparait{ to{ opacity:1; } }
@keyframes monte{ to{ opacity:1; transform:none; } }

/* clignement du hibou — ciblé sur les yeux seulement */
.owl-yeux{ transform-box:fill-box; transform-origin:50% 50%; }
.js .owl-yeux .oeil{ animation:cligne 6.5s ease-in-out 3.2s infinite; transform-box:fill-box; transform-origin:50% 50%; }
@keyframes cligne{ 0%,92%,100%{ transform:scaleY(1);} 95%{ transform:scaleY(.08);} }

/* ═══════════ SECTIONS ═══════════ */
main{
  position:relative; z-index:1;
  background:var(--creme);
  border-radius:28px 28px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.45);
}
.section{ position:relative; padding-block:var(--sec-y); overflow:hidden; }
.section--creme{ background:var(--creme); }
.section--sable{
  background:var(--sable-clair);
  background-image:repeating-linear-gradient(135deg, rgba(74,59,42,.045) 0 2px, transparent 2px 11px);
}
.section--noir{ background:var(--noir); color:var(--texte-clair); }
.section--noir p{ color:var(--texte-clair-2); }
.section--noir .intro{ color:var(--texte-clair-2); }
.show__halftone{
  position:absolute; inset:0; pointer-events:none; opacity:.16;
  background-image:radial-gradient(var(--jaune) 1.4px, transparent 1.5px);
  background-size:12px 12px;
  -webkit-mask-image:radial-gradient(ellipse at 80% 0%, #000 0%, transparent 62%);
  mask-image:radial-gradient(ellipse at 80% 0%, #000 0%, transparent 62%);
}

/* Reveals */
.js .reveal,.js .reveal-left,.js .reveal-right{ opacity:0; transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo); }
.js .reveal{ transform:translateY(34px); }
.js .reveal-left{ transform:translateX(-38px); }
.js .reveal-right{ transform:translateX(38px); }
.js .reveal.visible,.js .reveal-left.visible,.js .reveal-right.visible{ opacity:1; transform:none; }
.js .reveal-mask img{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s var(--ease-out-expo); }
.js .reveal-mask.visible img{ clip-path:inset(0); }

/* ═══════════ MANIFESTE ═══════════ */
.manifeste__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); grid-template-columns:1.05fr .95fr; align-items:center; }
.manifeste__texte p{ max-width:56ch; }
.signatures{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2rem; }
.signature{ border-left:3px solid var(--jaune-fonce); padding-left:.9rem; }
.signature__nom{ display:block; font-family:var(--display); text-transform:uppercase; font-size:1.4rem; line-height:1; }
.signature__role{ display:block; font-size:.82rem; color:var(--texte-doux); letter-spacing:.03em; }
.manifeste__media{ position:relative; }
.cadre{ margin:0; overflow:hidden; border-radius:var(--radius); box-shadow:var(--ombre-douce); background:var(--sable); }
.cadre--parallax img{ width:100%; will-change:transform; }
.cadre--petit{
  position:absolute; right:-7%; bottom:5%; width:46%;
  border:6px solid var(--creme); box-shadow:var(--ombre-dure);
}
.photo-duotone img{ filter:grayscale(1) contrast(1.08); transition:filter .5s var(--ease-smooth); }
.photo-duotone:hover img,.photo-duotone:focus-within img{ filter:none; }

/* ═══════════ SCROLLYTELLING ═══════════ */
.pin{ height:280vh; background:var(--noir); position:relative; }
.pin__stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:grid; align-items:center;
  background:var(--noir);
  background-image:radial-gradient(ellipse at 15% 20%, rgba(252,240,122,.10), transparent 55%);
}
.pin__grille{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.pin__col--svg{ display:grid; place-items:center; }
.pin__svg{ width:min(100%,380px); height:auto; color:var(--jaune); }
.pin__g{ opacity:0; transition:opacity .45s ease; }
.pin__g.actif{ opacity:1; }
.js .pin__g path{ stroke-dasharray:1; stroke-dashoffset:1; }
.pin__etapes{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:1.15rem; }
.pin__etapes li{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; opacity:.34; transition:opacity .45s ease, transform .45s var(--ease-out-expo); }
.pin__etapes li.actif{ opacity:1; transform:translateX(6px); }
.pin__num{ font-family:var(--display); font-size:1.25rem; color:var(--jaune); line-height:1.2; }
.pin__txt{ color:var(--texte-clair-2); font-size:.98rem; line-height:1.55; }
.pin__txt strong{ color:var(--texte-clair); }

/* ═══════════ CARTES / PRESTATIONS ═══════════ */
.cartes{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,1.6rem); margin-top:2.5rem; }
.cartes > *{ grid-column:span 4; }
.cartes--3 > *{ grid-column:span 4; }
.carte{
  position:relative; background:var(--creme); border:2px solid var(--noir);
  border-radius:var(--radius); padding:1.6rem 1.5rem 1.7rem;
  transition:transform .3s var(--ease-smooth), box-shadow .3s var(--ease-smooth);
}
.carte::before{
  content:''; position:absolute; left:-2px; right:-2px; top:-2px; height:5px;
  background:var(--jaune); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out-expo);
}
.carte:hover,.carte:focus-within{ box-shadow:var(--ombre-dure); transform:translate(-4px,-4px); }
.carte:hover::before,.carte:focus-within::before{ transform:scaleX(1); }
.carte p{ margin:0; color:var(--texte-doux); font-size:.96rem; }
.carte__icone{ display:grid; place-items:center; width:52px; height:52px; margin-bottom:1rem;
  border:2px solid var(--noir); border-radius:50%; background:var(--jaune); color:var(--noir); }
.carte__icone svg{ width:26px; height:26px; }
.carte--boutique{ background:var(--creme); }
.carte--boutique .carte__adresse{ color:var(--texte); font-weight:500; margin-bottom:.7rem; }
.carte__note{ margin-top:.9rem!important; font-size:.88rem; font-style:italic; }
.btn--carte-cta{ display:flex; width:100%; margin-top:.4rem; }
.lien-tel{
  display:inline-block; font-family:var(--display); font-size:1.3rem; letter-spacing:.04em;
  text-decoration:none; color:var(--noir); border-bottom:3px solid var(--jaune); transition:color .2s, border-color .2s;
}
.lien-tel:hover,.lien-tel:focus-visible{ color:var(--truffe); border-color:var(--truffe); }
.lien-tel--gros{ font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem); }
.horaires-todo{ margin-top:1.8rem; font-size:.92rem; color:var(--texte-doux); }

.rappel{ margin-top:clamp(2.5rem,5vw,4rem); text-align:center; }
.rappel__accroche{ font-family:var(--display); text-transform:uppercase; font-size:clamp(1.2rem,1rem + 1.2vw,1.9rem);
  line-height:1.15; margin:0 auto 1.3rem; max-width:22ch; }

/* ═══════════ SHOW COOKING ═══════════ */
.show__grid{ position:relative; z-index:2; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.show__media{ margin:0; overflow:hidden; border-radius:var(--radius); border:3px solid var(--jaune); }
.puces{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.7rem; }
.puces li{ position:relative; padding-left:1.7rem; color:var(--texte-clair-2); }
.puces li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%;
  background:var(--jaune);
}
.puces--sombre li{ color:var(--texte-doux); }
.puces--sombre li::before{ background:var(--truffe); }

/* ═══════════ LA CARTE ═══════════ */
.onglets{ margin-top:2.5rem; }
.onglets__barre{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:-2px; position:relative; z-index:2; }
.onglet{
  flex:1 1 auto; min-width:0; text-align:center;
  font-family:var(--corps); font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.7rem .9rem; border:2px solid var(--noir); border-bottom-color:transparent;
  background:var(--sable-clair); color:var(--noir); cursor:pointer;
  border-radius:var(--radius) var(--radius) 0 0; transition:background .25s, color .25s, transform .2s;
}
.onglet:hover{ background:var(--jaune-pale); }
.onglet[aria-selected="true"]{ background:var(--noir); color:var(--jaune); }
.menu-papier{
  position:relative; border:2px solid var(--noir); background:var(--creme);
  padding:clamp(1.6rem,4vw,3rem);
  box-shadow:10px 10px 0 var(--sable);
}
.menu-papier__ornement{
  position:absolute; inset:11px; border:1px solid rgba(74,59,42,.35); pointer-events:none;
}
.menu-papier__ornement::before,.menu-papier__ornement::after{
  content:''; position:absolute; width:16px; height:16px; border:2px solid var(--jaune-fonce);
}
.menu-papier__ornement::before{ top:-5px; left:-5px; border-right:0; border-bottom:0; }
.menu-papier__ornement::after{ bottom:-5px; right:-5px; border-left:0; border-top:0; }
.panneau{ position:relative; }
.panneau__note{ margin:0 0 1.4rem; font-style:italic; color:var(--texte-doux); max-width:60ch; }
.plats{ list-style:none; margin:0; padding:0; display:grid; gap:.2rem; }
.plats li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .8rem;
  padding:.72rem 0; border-bottom:1px dotted rgba(74,59,42,.35);
}
.plats li:last-child{ border-bottom:0; }
.plat__nom{ font-family:var(--display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.02em; }
.plat__desc{ color:var(--texte-doux); font-size:.92rem; }

/* ═══════════ TARIFS ═══════════ */
.tarifs{ margin-top:clamp(3rem,6vw,5rem); }
.tarifs__bloc{
  background:var(--jaune); border:2px solid var(--noir); box-shadow:var(--ombre-dure);
  padding:clamp(1.8rem,4vw,3rem); border-radius:var(--radius); text-align:center;
}
.tarifs__chiffre{
  font-family:var(--display); line-height:1; margin:.4rem 0 .8rem;
  font-size:clamp(3rem,1.5rem + 7vw,6rem); display:flex; flex-wrap:wrap; justify-content:center;
  align-items:baseline; gap:.2em; color:var(--noir);
}
.tarifs__sep{ font-size:.5em; }
.tarifs__unite{ font-family:var(--corps); font-weight:700; font-size:.18em; letter-spacing:.12em; text-transform:uppercase; }
.tarifs__txt{ max-width:56ch; margin:0 auto 1.6rem; color:var(--truffe); }

/* ═══════════ BANDE PHOTOS ═══════════ */
.bande{ background:var(--noir); padding-block:clamp(2.2rem,5vw,3.6rem); overflow:hidden; }
.bande__track{ display:flex; width:max-content; animation:marquee 58s linear infinite; }
.bande__jeu{ display:contents; }
.bande__item{
  margin:0 14px 0 0; width:clamp(200px,24vw,290px); flex:0 0 auto; cursor:pointer;
  border:2px solid transparent; border-radius:var(--radius); overflow:hidden; background:var(--noir-2);
  transition:border-color .3s, transform .3s var(--ease-smooth);
}
.bande__item img{ max-width:none; width:100%; aspect-ratio:1/1; object-fit:cover;
  filter:grayscale(.35) contrast(1.03); transition:filter .45s var(--ease-smooth), transform .6s var(--ease-smooth); }
.bande__item:hover,.bande__item:focus-visible{ border-color:var(--jaune); transform:translateY(-5px); }
.bande__item:hover img,.bande__item:focus-visible img{ filter:none; transform:scale(1.05); }
.bande:hover .bande__track,.bande:focus-within .bande__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ═══════════ AVIS ═══════════ */
.avis__entete{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-end; justify-content:space-between; }
.note{ text-align:right; }
.note__chiffre{ font-family:var(--display); font-size:clamp(2.4rem,2rem + 2vw,3.4rem); line-height:1; display:block; }
.note__etoiles svg{ width:126px; height:25px; }
.note__source{ display:block; font-size:.8rem; color:var(--texte-doux); max-width:26ch; margin-left:auto; }
.carousel{ margin-top:2.6rem; overflow:hidden; touch-action:pan-y; cursor:grab; }
.carousel:active{ cursor:grabbing; }
.carousel__track{ display:flex; transition:transform .6s var(--ease-out-expo); }
.carousel__slide{ flex:0 0 100%; padding-inline:.6rem; box-sizing:border-box; display:flex; }
.avis-carte{
  margin:0; background:var(--creme); border:2px solid var(--noir); border-radius:var(--radius);
  padding:1.7rem 1.6rem; display:flex; flex-direction:column; width:100%;
}
.avis-carte blockquote{ margin:0; font-size:1.02rem; line-height:1.6; }
.avis-carte figcaption{
  position:static; background:none; padding:0; margin-top:auto; padding-top:1.2rem;
  font-weight:700; font-size:.9rem; color:var(--texte);
}
.avis-carte figcaption span{ font-weight:400; color:var(--texte-doux); }
.carousel__dots{ display:flex; justify-content:center; gap:.55rem; margin-top:1.6rem; }
.carousel__dots button{
  width:11px; height:11px; padding:0; border-radius:50%; border:2px solid var(--noir);
  background:transparent; cursor:pointer; transition:background .25s, transform .25s;
}
.carousel__dots button[aria-current="true"]{ background:var(--noir); transform:scale(1.25); }
.avis__lien{ margin-top:1.6rem; font-size:.9rem; }
.avis__lien a{ color:var(--truffe); }

/* ═══════════ FAQ ═══════════ */
.faq__liste{ margin-top:2rem; border-top:2px solid var(--noir); }
.faq__item{ border-bottom:2px solid var(--noir); }
.faq__item summary{
  list-style:none; cursor:pointer; padding:1.1rem 2.4rem 1.1rem 0; position:relative;
  font-family:var(--display); text-transform:uppercase; font-size:clamp(1rem,.95rem + .35vw,1.22rem);
  letter-spacing:.01em;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:12px; height:12px;
  border-right:2px solid var(--truffe); border-bottom:2px solid var(--truffe);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease-out-expo);
}
.faq__item[open] summary::after{ transform:translateY(-20%) rotate(-135deg); }
.faq__item p{ margin:0 0 1.2rem; color:var(--texte-doux); max-width:66ch; }

/* ═══════════ FORMULAIRE ═══════════ */
.formulaire{ margin-top:2.4rem; }
.champs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.champ{ display:flex; flex-direction:column; gap:.4rem; }
.champ--large{ margin-top:1.1rem; }
.champ label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color:var(--jaune); }
.champ input,.champ select,.champ textarea{
  font-family:var(--corps); font-size:1rem; color:var(--texte-clair);
  background:var(--noir-2); border:2px solid var(--noir-3); border-radius:var(--radius);
  padding:.75rem .85rem; transition:border-color .25s, background .25s;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{ border-color:var(--jaune); outline:none; background:var(--noir-3); }
.champ textarea{ resize:vertical; }
.cache{ position:absolute; left:-9999px; }
.rgpd{ font-size:.8rem; color:var(--texte-clair-2); margin-top:1rem; max-width:52ch; }
.formulaire .btn{ margin-top:1.4rem; }

/* ═══════════ CONTACT ═══════════ */
.contact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,2.6rem); margin-top:2.4rem; }
.contact__bloc p{ color:var(--texte-doux); font-size:.96rem; }
.contact__adresse{ color:var(--texte)!important; font-weight:500; }
.contact__bloc .btn{ margin-top:1rem; }
.carte-maps{
  margin:clamp(2.4rem,5vw,4rem) auto 0; max-width:820px; aspect-ratio:21/9; max-height:380px;
  border:2px solid var(--noir); border-radius:var(--radius); overflow:hidden; box-shadow:var(--ombre-dure);
}
.carte-maps iframe{
  width:100%; height:100%; border:0; display:block;
  filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease-smooth);
}
.carte-maps:hover iframe,.carte-maps:focus-within iframe{ filter:none; }

/* ═══════════ FOOTER ═══════════ */
.pied{ position:relative; z-index:1; background:var(--noir); color:var(--texte-clair-2); padding-block:1.6rem; font-size:.82rem; }
.pied__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.4rem; justify-content:center; }
.pied nav{ display:flex; gap:1.2rem; }
.pied a{ color:var(--texte-clair-2); text-decoration:none; transition:color .25s; }
.pied a:hover,.pied a:focus-visible{ color:var(--jaune); }
.pied p{ margin:0; }
.pied__hibou{ background:none; border:0; padding:0; cursor:pointer; color:var(--noir-3); width:16px; height:26px; transition:color .3s, transform .3s var(--ease-elastic); }
.pied__hibou svg{ width:100%; height:100%; }
.pied__hibou:hover{ color:var(--jaune); transform:rotate(-8deg) scale(1.15); }

/* ═══════════ OVERLAY TÉLÉPHONE ═══════════ */
.phone-overlay{
  position:fixed; inset:0; z-index:1500; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease-smooth), visibility 0s linear .45s;
}
.phone-overlay.ouvert{ opacity:1; visibility:visible; transition:opacity .45s var(--ease-smooth); }
.phone-overlay__scene{ position:absolute; inset:0; }
.scene-svg{ width:100%; height:100%; display:block; }
.phone-overlay__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(12,11,10,.92) 0%, rgba(12,11,10,.72) 55%, rgba(12,11,10,.9) 100%);
}
.phone-overlay__close{
  position:absolute; top:18px; right:20px; z-index:3; width:48px; height:48px;
  background:none; border:2px solid rgba(252,240,122,.5); border-radius:50%;
  color:var(--jaune); font-size:1.7rem; line-height:1; cursor:pointer; transition:transform .3s, border-color .3s;
}
.phone-overlay__close:hover{ transform:rotate(90deg); border-color:var(--jaune); }
.phone-overlay__content{
  position:relative; z-index:2; text-align:center; padding:calc(var(--nav-h) + 1rem) var(--pad) 2rem;
  width:min(100%,980px); max-height:100svh; overflow-y:auto;
}
.phone-overlay__kicker{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.22em; color:var(--jaune); margin:0 0 1.6rem; font-weight:700;
}
.phone-overlay__lieux{ display:grid; gap:clamp(1.4rem,3vw,2.4rem); }
.lieu__nom{ font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--texte-clair-2); margin:0 0 .3rem; font-weight:700; }
.phone-overlay__number{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.32em; margin:0 0 .9rem;
  font-family:var(--display); line-height:1;
  font-size:clamp(1.5rem,.9rem + 3.6vw,2.6rem);
}
/* l'établissement appelé passe en tête et affiche son numéro en très grand */
.lieu--cible{ order:-1; }
/* appel depuis une boutique précise : son numéro seul à l'écran */
.phone-overlay--solo .lieu:not(.lieu--cible){ display:none; }
.lieu--cible .phone-overlay__number{ font-size:clamp(2.2rem,1rem + 6.5vw,4.6rem); }
.lieu--cible .lien-appel{
  background:var(--jaune); color:var(--noir); border-color:var(--jaune);
}
.lieu--cible .lien-appel:hover,.lieu--cible .lien-appel:focus-visible{
  transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--noir-2); color:var(--noir);
}
.phone-overlay__digit{
  background:linear-gradient(160deg, var(--jaune) 0%, var(--jaune-fonce) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.js .phone-overlay.ouvert .phone-overlay__digit{ animation:digit-in .6s var(--ease-elastic) backwards; animation-delay:calc(var(--i) * .06s + .15s); }
@keyframes digit-in{ from{ opacity:0; transform:translateY(28px) scale(.8); } to{ opacity:1; transform:none; } }
.phone-overlay__actions{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; }
.phone-overlay__toast{
  margin-top:1.6rem; display:inline-block; padding:.5rem 1rem; border-radius:99px;
  background:var(--jaune); color:var(--noir); font-weight:700; font-size:.85rem;
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s;
}
.phone-overlay__toast.visible{ opacity:1; transform:none; }
.scene-farine circle{ opacity:.5; }

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox{
  position:fixed; inset:0; z-index:1600; display:grid; place-items:center; padding:var(--pad);
  background:rgba(12,11,10,.95);
  opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s linear .4s;
}
.lightbox.ouvert{ opacity:1; visibility:visible; transition:opacity .4s; }
.lightbox__fig{ margin:0; max-width:min(92vw,760px); }
.lightbox__img{ width:100%; max-height:76svh; object-fit:contain; border:3px solid var(--jaune); border-radius:var(--radius); }
.lightbox__legende{ color:var(--texte-clair); text-align:center; margin-top:.9rem; font-size:.9rem; }
.lightbox__close{
  position:absolute; top:18px; right:20px; width:48px; height:48px;
  background:none; border:2px solid rgba(252,240,122,.5); border-radius:50%;
  color:var(--jaune); font-size:1.7rem; line-height:1; cursor:pointer; transition:transform .3s;
}
.lightbox__close:hover{ transform:rotate(90deg); }

/* ═══════════ EASTER EGG ═══════════ */
.chouette{
  position:fixed; right:22px; bottom:-260px; z-index:1400; width:150px; text-align:center;
  color:var(--jaune); pointer-events:none; transition:bottom 1s var(--ease-out-expo);
}
.chouette.visible{ bottom:22px; }
.chouette svg{ width:52px; height:88px; margin-inline:auto; display:block; }
.chouette p{ font-size:.76rem; line-height:1.4; color:var(--jaune); background:rgba(18,17,16,.92);
  padding:.5rem .6rem; border:1px solid var(--jaune); border-radius:var(--radius); margin:.4rem 0 0; }
.chouette.visible .chouette__oeil{ animation:cligne 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:50% 50%; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media (min-width:720px){
  .carousel__slide{ flex:0 0 50%; }
}
@media (min-width:1080px){
  .carousel__slide{ flex:0 0 33.3333%; }
}

@media (max-width:980px){
  .manifeste__grid,.show__grid,.pin__grille{ grid-template-columns:1fr; }
  .show__media{ order:2; }
  .cartes > *{ grid-column:span 6; }
  .cartes--3 > *{ grid-column:span 6; }
  .contact__grid{ grid-template-columns:1fr 1fr; }
  .cadre--petit{ position:static; width:60%; margin-top:1rem; right:auto; bottom:auto; }
  .pin{ height:auto; }
  .pin__stage{ position:static; height:auto; padding-block:var(--sec-y); }
  .pin__col--svg{ margin-top:2rem; }
  .pin__g{ opacity:1; }
  .pin__etapes li{ opacity:1; }
  .js .pin__g path{ stroke-dashoffset:0; }
  /* repli statique : les 4 motifs se rangent en grille 2x2 au lieu de se superposer */
  .pin__g{ transform-box:view-box; transform-origin:0 0; }
  .pin__g[data-g="0"]{ transform:translate(4px,4px) scale(.47); }
  .pin__g[data-g="1"]{ transform:translate(164px,4px) scale(.47); }
  .pin__g[data-g="2"]{ transform:translate(4px,164px) scale(.47); }
  .pin__g[data-g="3"]{ transform:translate(164px,164px) scale(.47); }
  .pin__svg{ width:min(100%,320px); }
}

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__actions .btn{ display:none; }
  .nav__burger{ display:flex; }
  .nav__menu-mobile{
    position:fixed; inset:0 0 0 auto; width:min(82%,340px); z-index:999;
    display:flex; flex-direction:column; gap:.4rem;
    padding:calc(var(--nav-h) + 1.4rem) 1.6rem 2rem;
    background:rgba(18,17,16,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-left:2px solid var(--jaune);
    transform:translateX(100%); visibility:hidden;
    transition:transform .5s var(--ease-out-expo), visibility 0s linear .5s;
  }
  .nav__menu-mobile.ouvert{ transform:translateX(0); visibility:visible; transition:transform .5s var(--ease-out-expo); }
  .nav__menu-mobile a{
    color:var(--texte-clair); text-decoration:none; font-family:var(--display);
    text-transform:uppercase; font-size:1.35rem; letter-spacing:.02em; padding:.5rem 0;
    border-bottom:1px solid rgba(252,240,122,.16);
  }
  .nav__menu-mobile a:hover,.nav__menu-mobile a:focus-visible{ color:var(--jaune); }
  main{ border-radius:20px 20px 0 0; }
}

@media (max-width:720px){
  .cartes > *,.cartes--3 > *{ grid-column:span 12; }
  .contact__grid{ grid-template-columns:1fr; }
  .champs{ grid-template-columns:1fr; }
  .avis__entete{ flex-direction:column; align-items:flex-start; }
  .note{ text-align:left; }
  .note__source{ margin-left:0; }
  .onglet{ flex:1 1 auto; font-size:.76rem; padding:.6rem .7rem; }
  .carte-maps{ aspect-ratio:4/3; max-height:320px; }
  .chouette{ width:120px; right:14px; }
}

@media (max-width:600px){
  .nav__nom{ font-size:.98rem; letter-spacing:.03em; }
  .plats li{ flex-direction:column; gap:.1rem; }
}

/* ═══════════ MOUVEMENT RÉDUIT ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
  .js .hero__svg path{ stroke-dashoffset:0; animation:none; }
  .js .hero__svg .owl-yeux{ opacity:1; animation:none; }
  .js .hero__nom{ opacity:1; transform:none; animation:none; }
  .js .reveal,.js .reveal-left,.js .reveal-right{ opacity:1; transform:none; }
  .js .reveal-mask img{ clip-path:none; }
  .bande__track{ animation:none; }
  .halo{ animation:none; }
  .hero{ position:relative; }
  .pin{ height:auto; }
  .pin__stage{ position:static; height:auto; padding-block:var(--sec-y); }
  .pin__g,.pin__etapes li{ opacity:1; }
  .js .pin__g path{ stroke-dashoffset:0; }
  .pin__grille{ grid-template-columns:1fr; }
  .pin__g{ transform-box:view-box; transform-origin:0 0; }
  .pin__g[data-g="0"]{ transform:translate(4px,4px) scale(.47); }
  .pin__g[data-g="1"]{ transform:translate(164px,4px) scale(.47); }
  .pin__g[data-g="2"]{ transform:translate(4px,164px) scale(.47); }
  .pin__g[data-g="3"]{ transform:translate(164px,164px) scale(.47); }
  .chouette{ transition:none; }
}

/* ═══════════ PAGES LEGALES ═══════════ */
.page-legale{
  background:var(--creme); border-radius:0; box-shadow:none;
  padding-block:calc(var(--nav-h) + clamp(2.5rem,6vw,5rem)) var(--sec-y);
}
.page-legale h2{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.1rem,1rem + .5vw,1.5rem); letter-spacing:.01em;
  margin:2.4rem 0 .6rem; padding-top:1.4rem; border-top:2px solid var(--noir);
}
.page-legale p,.page-legale li{ color:var(--texte-doux); max-width:70ch; }
.page-legale strong{ color:var(--texte); }
.page-legale a{ color:var(--truffe); }
.page-legale ul{ padding-left:1.2rem; }
.page-legale ul li{ margin-bottom:.5rem; }
.page-legale .maj{ margin-top:2.5rem; font-size:.84rem; font-style:italic; }
.page-merci .chapo{ margin-inline:auto; max-width:52ch; }
.page-merci p{ margin-inline:auto; }
.page-merci .retour{ margin-top:2.5rem; }
.nav--solide{ background:rgba(18,17,16,.97); }

@media (max-width:860px){
  .nav--solide .nav__links{ display:flex; gap:1rem; }
  .nav--solide .nav__nom{ display:none; }
}