/* ===== Styles de la section RESTO (rapatriée sur l'accueil) — hero food, avant/après, packs, FAQ.
   body / .chrome-text / .material-symbols exclus (déjà définis globalement sur index). ===== */
.reveal-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-on-scroll.active {
            opacity: 1;
            transform: translateY(0);
        }
        /* ---- Accents chrome (mêmes tokens que kards) ---- */
        .chrome-badge {
            background: linear-gradient(160deg,#fdfdfe,#c8ccd2 50%,#9a9ea6);
            color: #2b2d32;
            box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.4);
        }
        /* ---- FAQ accordéon (sans JS) ---- */
        details.faq { background: #111111; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; transition: border-color .3s; }
        details.faq[open] { border-color: rgba(255,255,255,.25); }
        details.faq summary { cursor: pointer; list-style: none; }
        details.faq summary::-webkit-details-marker { display: none; }
        details.faq .faq-plus { transition: transform .3s; }
        details.faq[open] .faq-plus { transform: rotate(45deg); }
        /* ---- Grain ciné + grille (même famille que le hero kards) ---- */
        .cine-grain {
            position: absolute; inset: 0; pointer-events: none; z-index: 40; opacity: .05; mix-blend-mode: overlay;
            background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
        }
        .cine-grid {
            background-size: 60px 60px;
            background-image:
                linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
            -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
        }
        @media (max-width: 799px) {
          #cine-hero .cine-grid, #cine-hero .cine-grain { display: none; }
        }
        /* Image food du hero : posée sur le champ d'étoiles, fondue au noir (slot — David fournira le visuel) */
        .resto-hero__img {
            position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
            mix-blend-mode: screen; opacity: .5; will-change: transform;
            animation: resto-bg-breathe 20s ease-in-out infinite alternate;
        }
        @keyframes resto-bg-breathe { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-2%); } }
        @media (prefers-reduced-motion: reduce) { .resto-hero__img { animation: none; } }

        /* ================= AVANT / APRÈS (slider comparatif — le moment fort) ================= */
        .ba { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
              border: 1px solid rgba(255,255,255,.15); background: #0a0a0b; user-select: none; -webkit-user-select: none; }
        @media (min-width: 768px) { .ba { aspect-ratio: 16/10; } }
        .ba-layer { position: absolute; inset: 0; }
        .ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); z-index: 2; }
        .ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; z-index: 4;
                   background: linear-gradient(180deg, #ffffff, #9aa0ab); box-shadow: 0 0 18px rgba(255,255,255,.45); }
        .ba-handle { position: absolute; top: 50%; left: var(--pos, 50%); transform: translate(-50%,-50%); z-index: 5;
                     width: 46px; height: 46px; border-radius: 50%; border: none; cursor: ew-resize; touch-action: none;
                     background: linear-gradient(160deg,#fdfdfe,#c8ccd2 50%,#9a9ea6); color: #2b2d32;
                     display: flex; align-items: center; justify-content: center;
                     box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 10px 24px rgba(0,0,0,.55); }
        .ba-tag { position: absolute; top: 12px; z-index: 3; padding: 4px 11px; border-radius: 999px;
                  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
        .ba-tag--before { left: 12px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); }
        .ba-tag--after  { right: 12px; }
        /* — maquettes de vitrine (placeholders stylés en attendant les vrais visuels) — */
        .ba-mock { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 4.5% 5%; gap: 4%; }
        .ba-mock-head { display: flex; align-items: center; gap: 10px; }
        .ba-mock-ava { width: 34px; height: 34px; border-radius: 10px; flex: none; }
        .ba-mock-lines { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
        .ba-mock-l1 { height: 9px; width: 42%; border-radius: 4px; }
        .ba-mock-l2 { height: 6px; width: 26%; border-radius: 3px; }
        .ba-mock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3.2%; flex: 1; min-height: 0; }
        .ba-dish { border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
        .ba-dish-ph { flex: 1; min-height: 0; }
        .ba-dish-tx { padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
        .ba-dish-t1 { height: 6px; width: 80%; border-radius: 3px; }
        .ba-dish-t2 { height: 5px; width: 45%; border-radius: 3px; }
        /* AVANT : terne, plat, fade */
        .ba-mock--before { background: #171717; filter: saturate(.25) contrast(.92); }
        .ba-mock--before .ba-mock-ava { background: #3a3a3a; }
        .ba-mock--before .ba-mock-l1, .ba-mock--before .ba-mock-l2 { background: #3f3f3f; }
        .ba-mock--before .ba-dish { background: #202020; border: 1px solid #2c2c2c; }
        .ba-mock--before .ba-dish-ph { background: radial-gradient(60% 55% at 50% 45%, #6e5f4e 0%, #47413a 55%, #2a2a28 100%); }
        .ba-mock--before .ba-dish-t1, .ba-mock--before .ba-dish-t2 { background: #383838; }
        /* APRÈS : premium, contrasté, appétissant */
        .ba-mock--after { background: linear-gradient(180deg, #101012, #060607); }
        .ba-mock--after .ba-mock-ava { background: linear-gradient(160deg,#fdfdfe,#9a9ea6); box-shadow: 0 4px 14px rgba(255,255,255,.18); }
        .ba-mock--after .ba-mock-l1 { background: linear-gradient(90deg,#f4f5f8,#b9bdc6); }
        .ba-mock--after .ba-mock-l2 { background: #4d4f56; }
        .ba-mock--after .ba-dish { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9); }
        .ba-mock--after .ba-dish-ph { background:
            radial-gradient(58% 52% at 50% 44%, #ffb35c 0%, #d96a35 40%, #6b2f1a 72%, #17100c 100%); box-shadow: inset 0 0 24px rgba(255,166,77,.25); }
        .ba-mock--after .ba-dish:nth-child(2) .ba-dish-ph { background: radial-gradient(58% 52% at 50% 44%, #ff8f6b 0%, #c2452e 45%, #571f14 75%, #150d0b 100%); }
        .ba-mock--after .ba-dish:nth-child(3) .ba-dish-ph { background: radial-gradient(58% 52% at 50% 44%, #ffd98a 0%, #d99b3f 45%, #5c3d16 75%, #14100a 100%); }
        .ba-mock--after .ba-dish:nth-child(4) .ba-dish-ph { background: radial-gradient(58% 52% at 50% 44%, #b9e08a 0%, #5f8f3f 48%, #23350f 78%, #0d1207 100%); }
        .ba-mock--after .ba-dish-t1 { background: linear-gradient(90deg,#eceef2,#a9adb6); }
        .ba-mock--after .ba-dish-t2 { background: #3f4147; }
        /* vraies images (quand David les fournit) : elles couvrent la maquette */
        .ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

        /* ================= Vignettes "7 types de logo" (façon Tekyo) ================= */
        .lt { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; aspect-ratio: 1;
              background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
              display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 10px;
              transition: border-color .3s, transform .3s; }
        .lt:hover { border-color: rgba(255,255,255,.3); transform: translateY(-3px); }
        .lt-mark { height: 42px; display: flex; align-items: center; justify-content: center; gap: 5px; }
        .lt-name { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #A1A1A1; text-align: center; }

        /* Carte pack : liseré chrome subtil */
        .pack-card { position: relative; }
        .pack-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
            background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(255,255,255,.08) 40%, rgba(255,255,255,.25));
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }