/* Le style « Cinéma », chargé par toutes les pages publiques (pas l'administration) : couleurs, en-tête qui flotte
   sur le haut de page, menu mobile, pied de page, messages, surtitres et boutons.
   polish.css est chargé APRÈS ce fichier : les règles qui doivent l'emporter sur lui sont préfixées par `body`. */
:root {
    --cine-bg: #050608;
    --cine-ink: #f6f1e7;
    --cine-text: #d8d1c3;
    --cine-muted: #b3ac9e;
    --cine-faint: #8d877b;
    --cine-gold: #e8b04b;
    --cine-gold-hover: #f3c46a;
    --cine-line: rgba(241, 236, 226, .1);
    --cine-gutter: clamp(1rem, 4.5vw, 4rem);
}

html body { background: var(--cine-bg) !important; }
body .site-main { background: var(--cine-bg); }

/* ------------------------------------------------------------------ en-tête */

/* Il flotte, transparent, sur le haut de page ; il redevient opaque dès qu'on descend (app.js). */
body .site-header {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
    backdrop-filter: none;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body .site-header.is-scrolled {
    background: rgba(5, 6, 8, .88) !important;
    border-color: var(--cine-line) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .3);
    backdrop-filter: blur(16px);
}

body .site-header img { box-shadow: none; }
body .nav-item { color: var(--cine-text); border-color: transparent; border-radius: 999px; }
body .nav-item:hover { color: var(--cine-ink); background: rgba(241, 236, 226, .07); border-color: transparent; }
body .nav-item.active { color: var(--cine-gold); background: rgba(232, 176, 75, .12); border-color: transparent; }

/* ------------------------------------------------------------------ menu mobile */

body .mobile-drawer aside { background: #0a0b0f !important; border-right: 1px solid var(--cine-line); }
body .mobile-drawer aside a, body .mobile-drawer aside button { min-height: 48px; border-radius: 12px; color: var(--cine-text); }
body .mobile-drawer aside a:hover, body .mobile-drawer aside button:hover { background: rgba(241, 236, 226, .06); color: var(--cine-ink); border-color: transparent; }

/* ------------------------------------------------------------------ messages (succès, erreurs) */

body .flash { border-radius: 16px; border: 1px solid var(--cine-line); background: rgba(10, 11, 15, .95); color: var(--cine-ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
body .flash.success { border-color: rgba(74, 222, 128, .4); background: rgba(10, 11, 15, .95); }
body .flash.success::before { content: "✓ "; color: #86efac; font-weight: 700; }
body .flash.error { border-color: rgba(248, 113, 113, .45); background: rgba(10, 11, 15, .95); }
body .flash.error strong { color: #fca5a5; }

/* ------------------------------------------------------------------ pied de page */

body .site-footer { margin-top: auto; padding: 3rem var(--cine-gutter) 2rem; border-top: 1px solid var(--cine-line) !important; background: var(--cine-bg) !important; color: var(--cine-muted); }
.site-footer-inner { max-width: 1600px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.site-footer-brand img { display: block; width: 72px; height: auto; opacity: .9; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; font-size: .9375rem; }
.site-footer-links a { color: var(--cine-text); }
.site-footer-links a:hover { color: var(--cine-gold); }
.site-footer-help { margin: 0; font-size: .9375rem; }
.site-footer-help a { font-weight: 600; color: var(--cine-gold); }
.site-footer-help a:hover { color: var(--cine-gold-hover); }
.site-footer-copy { max-width: 1600px; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--cine-line); font-size: .8125rem; color: var(--cine-faint); text-align: center; }

@media (max-width: 767px) {
    .site-footer-inner { flex-direction: column; text-align: center; }
    .site-footer-links { justify-content: center; }
}

/* ------------------------------------------------------------------ surtitres et boutons */

.cine-eyebrow {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .4em;
    color: var(--cine-gold);
}

.cine-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 56px;
    padding: 0 2rem;
    border-radius: 999px;
    font-size: 1.0625rem;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.cine-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.cine-btn:hover { transform: translateY(-1px); }

.cine-btn-primary { background: var(--cine-gold); color: #140f05; }
.cine-btn-primary:hover { background: var(--cine-gold-hover); }

.cine-btn-ghost { border: 1px solid rgba(241, 236, 226, .35); color: var(--cine-ink); background: rgba(5, 6, 8, .25); }
.cine-btn-ghost:hover { border-color: rgba(241, 236, 226, .7); }

.cine-btn-large { min-height: 60px; padding: 0 2.5rem; font-size: 1.125rem; }

/* ------------------------------------------------------------------ bouton « Connexion » de l'en-tête */

/* Discret : sombre et translucide avec un filet doré ; il ne s'éclaire qu'au survol. */
.site-login {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 42px;
    padding: 0 1.1rem 0 .95rem;
    border-radius: 999px;
    border: 1px solid rgba(232, 176, 75, .45);
    background: rgba(5, 6, 8, .45);
    color: var(--cine-ink);
    font-size: .9375rem;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.site-login svg { width: 19px; height: 19px; flex: none; fill: var(--cine-gold); transition: fill .2s ease; }
.site-login:hover { border-color: var(--cine-gold); background: rgba(232, 176, 75, .12); color: var(--cine-ink); }
.site-login:focus-visible { outline: 2px solid var(--cine-gold); outline-offset: 3px; }

@media (max-width: 420px) {
    .site-login { min-height: 40px; padding: 0 .85rem 0 .75rem; font-size: .875rem; }
    .site-login svg { width: 17px; height: 17px; }
}