/* =========================================================
   Le Bistrot des Halles — effets « grands sites » (ajoutés le 2026-10-29)
   Chaque effet a son bloc numéroté, le même numéro que dans js/effets.js.
   Pour retirer un effet : supprimer son bloc ici ET dans js/effets.js.
   Pour tout retirer : enlever css/effets.css et js/effets.js de index.html.
   ========================================================= */

/* Grain de pellicule (image SVG générée, aucun fichier à charger) */
:root{--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}

/* ---------- 1. Accueil : la photo s'ouvre comme un rideau (Emile préfère, 01/11) ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .accueil-photo > img{animation:rideau 1.7s var(--lente) both,eclaircit 2.4s var(--lente) both}
  @keyframes rideau{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
}

/* ---------- 2. Défilement doux : tout est dans js/effets.js ---------- */

/* ---------- 3. La carte façon ardoise, les plats s'écrivent ---------- */
/* 01/11 : l'ardoise prend le vert bouteille de la maison (avant : gris anthracite, hors palette) */
.menu{position:relative;background:var(--vert);color:#ece6d8;border-top-color:var(--laiton);box-shadow:0 30px 70px rgba(10,20,16,.22)}
.menu::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.06),transparent 55%),radial-gradient(ellipse at 88% 92%,rgba(255,255,255,.045),transparent 50%)}
.menu::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain);opacity:.07;mix-blend-mode:screen}
.menu > *{position:relative;z-index:1}
.menu .page-tete h3,.menu .groupe h4{color:#f6f1e6}
.menu .plat p,.menu .cols,.menu .note-carte,.menu .menu-pied,.menu .onglets button{color:#c3cbc4}
.menu .onglets button:hover,.menu .onglets button[aria-selected="true"]{color:#fff}
.menu .onglets,.menu .menu-pied{border-color:rgba(255,255,255,.14)}
.menu .plat{border-bottom-color:rgba(255,255,255,.08)}
.menu .plat i{border-bottom-color:rgba(255,255,255,.24)}
.menu .prix-unique,.menu .plat.special b::after{color:var(--laiton-clair)}
.menu .onglets-curseur,.menu .page-tete::after{background:var(--laiton-clair)}
.menu :focus-visible{outline-color:var(--laiton-clair)}
@media (prefers-reduced-motion:no-preference){
  .js .menu .trait{opacity:0}
  .js .menu.visible .page:not([hidden]) .trait{animation:craie .9s var(--douce) both;animation-delay:calc(var(--i,0) * 60ms + .2s)}
  @keyframes craie{from{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(1.5px)}to{opacity:1;clip-path:inset(0 0 0 0);filter:none}}
}

/* ---------- 4. Vidéo d'ambiance de l'accueil (si videoAccueil est rempli dans donnees.js) ---------- */
.accueil-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s var(--douce)}
.accueil-photo.a-video .accueil-video{opacity:1}

/* ---------- 6. Les détails : le carrousel est dans style.css (01/11, avis d'Adrien) ---------- */

/* ---------- 7. Grain de pellicule, fixe et léger, sur les deux grandes photos pleine page ----------
   (01/11 : plus de grain qui tremble, et plus de grain sur les photos des plats : elles restent nettes) */
.accueil-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grain);opacity:.08;mix-blend-mode:overlay}

/* 7. D'autres assiettes, sur ordinateur : la bande reste collée pendant que la molette fait défiler les photos (js/effets.js, bloc 7) */
.rail-piste.epingle{margin-top:110px}
.rail-piste.epingle .rail-assiettes{position:sticky;top:max(calc(var(--tete) + 24px),calc(50vh - 240px));margin-top:0}
.rail-piste.epingle .rail{overflow-x:hidden;scroll-snap-type:none;scrollbar-width:none}
.rail-piste.epingle .rail::-webkit-scrollbar{display:none}