/* ════════════════════════════════════════════
   ONE-PAGE — grain · progress · marquee · foliotage
   · floats · responsive
   ════════════════════════════════════════════ */

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

/* ─── Barre de progression ─── */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 250;
    pointer-events: none;
}
.scroll-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--terra);
    transform-origin: left;
    transition: width 80ms linear;
}

/* ─── Repères éditoriaux fixes ─── */
.editorial-fixed-bl, .editorial-fixed-tr {
    position: fixed;
    z-index: 180;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    pointer-events: none;
    mix-blend-mode: difference;
    opacity: 0.55;
    writing-mode: vertical-rl;
}
.editorial-fixed-bl { left: 14px; bottom: 18px; }
.editorial-fixed-tr { right: 14px; top: 90px; }
.editorial-fixed-tr span { color: inherit; }

@media (max-width: 1100px) {
    .editorial-fixed-bl, .editorial-fixed-tr { display: none; }
}

/* ─── Marquee hero ─── */
.hero__marquee {
    grid-column: 1 / -1;
    grid-row: 4;
    margin: clamp(20px, 3vh, 36px) calc(-1 * var(--gutter)) calc(-48px - var(--s-5));
    padding: 14px 0;
    border-top: 1px solid var(--rule-cream);
    overflow: hidden;
    white-space: nowrap;
}
.hero__marquee-track {
    display: inline-flex;
    animation: marqueeSlide 34s linear infinite;
}
.hero__marquee-track span {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cream) 42%, transparent);
}

/* ─── Foliotage (pied de chapitre) ─── */
.foliotage {
    max-width: var(--max-w);
    margin: var(--s-8) auto 0;
    display: flex;
    align-items: center;
    gap: var(--s-4);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.foliotage em { font-family: var(--font-display); font-size: 1.4em; letter-spacing: 0; text-transform: none; color: var(--terra); }
.foliotage__rule { flex: 1; height: 1px; background: var(--rule); }

/* ─── Actions flottantes ─── */
.float-actions {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    z-index: 190;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.float-actions.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.float-top {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper-3);
    border: 1px solid var(--rule);
    color: var(--ink);
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.4);
    transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.float-top svg { width: 20px; height: 20px; }
.float-top:hover { background: var(--paper); transform: translateY(-2px); }
.float-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background: var(--terra);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 30px -12px rgba(126,36,26,0.7);
    transition: background var(--dur-fast) ease, gap var(--dur) var(--ease-out);
}
.float-cta:hover { background: var(--terra-glow); gap: 1em; }
.float-cta__arrow { transition: transform var(--dur) var(--ease-out); }
.float-cta:hover .float-cta__arrow { transform: translateX(3px); }

@media (max-width: 620px) {
    .float-cta span { display: none; }
    .float-cta { padding: 14px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1080px) {
    .nav__links { display: none; }
    .nav__menu-toggle { display: block; }

    .section-hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }
    .hero__left  { grid-column: 1; grid-row: 2; }
    .hero__right { grid-column: 1; grid-row: 3; justify-self: stretch; max-width: 520px; margin-top: var(--s-6); }
    .hero__footer { grid-row: 4; }
    .hero__marquee { grid-row: 5; }

    .storia__body { grid-template-columns: 1fr; gap: var(--s-7); }
    .storia__margin { max-width: 520px; }
    .section--specialita { grid-template-columns: 1fr; }
    .section--specialita .specialita__image-wrap { max-width: 520px; }
    .section--contatti { grid-template-columns: 1fr; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    :root { --s-9: 80px; --s-8: 60px; }
    .timeline { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
    .timeline__spine { display: none; }
    .menu__cat--5, .menu__cat--7, .menu__cat--12 { grid-column: span 12; }
    .menu__list--cols2 { grid-template-columns: 1fr; }
    .menu__list--cols3 { grid-template-columns: 1fr; }
    .menu__list--cols2.menu__list--drinks { columns: 1; }
    .menu__list--cols3.menu__list--drinks { columns: 2; }
    .galleria__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
    .gallery-item--1, .gallery-item--2, .gallery-item--3,
    .gallery-item--4, .gallery-item--5 { grid-column: span 2; grid-row: span 1; }
    .gallery-item--1 { grid-row: span 2; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
    .hero__title { font-size: clamp(56px, 18vw, 96px); }
}

@media (max-width: 480px) {
    .menu__list--cols3.menu__list--drinks { columns: 1; }
    .footer__inner { grid-template-columns: 1fr; }
    .hero__deck { font-size: 11px; }
    .preno__sentence { line-height: 2; }
}