/*
 * oserezvous.com — Refonte mobile "Casino Vegas neon"
 *
 * Paradigme UNIQUE à ce site (anti-fingerprint cross-domain).
 * Préfixe `osv-csn-` exclusif. Palette néon violet + rose + noir profond.
 *
 * Inspiration : enseigne néon Las Vegas, tubes lumineux courbés. Mobile-first
 * overlay qui neutralise les anti-patterns BS3 (.navbar-toggle, .btn-default,
 * collapse menu cassé sur small screen) tout en préservant le rendu desktop.
 *
 * Refonte 2026-05-02 — pas de mutualisation _common/.
 */

:root {
    --osv-csn-night:    #0d0a18;
    --osv-csn-night-2:  #1a142e;
    --osv-csn-neon-v:   #b347ff;
    --osv-csn-neon-p:   #ff2a8a;
    --osv-csn-neon-c:   #00e5ff;
    --osv-csn-felt:     #014e2c;
    --osv-csn-gold:     #f0c24a;
    --osv-csn-cream:    #fdf6e3;
}

/* ============================================================
   MOBILE OVERLAY — neutralise les anti-patterns BS3 sur small
   ============================================================ */
@media (max-width: 767.98px) {
    body[data-site="oserezvous"] {
        font-size: clamp(15px, 4vw, 17px);
        background: var(--osv-csn-night);
        color: var(--osv-csn-cream);
    }
    body[data-site="oserezvous"] * { box-sizing: border-box; }

    /* Hide the BS3 collapse navbar on mobile — replaced by bottom-nav */
    body[data-site="oserezvous"] .navbar-collapse,
    body[data-site="oserezvous"] .navbar-toggle,
    body[data-site="oserezvous"] .navbar-header > .navbar-brand + button { display: none !important; }

    /* Tighten the navbar header */
    body[data-site="oserezvous"] .navbar,
    body[data-site="oserezvous"] .navbar-default {
        background: linear-gradient(180deg, var(--osv-csn-night-2) 0%, var(--osv-csn-night) 100%) !important;
        border-bottom: 1.5px solid var(--osv-csn-neon-v);
        box-shadow: 0 2px 14px rgba(179, 71, 255, .25);
        min-height: 56px;
        padding: 6px 14px;
    }
    body[data-site="oserezvous"] .navbar-brand {
        color: var(--osv-csn-neon-p) !important;
        text-shadow: 0 0 8px var(--osv-csn-neon-p), 0 0 14px var(--osv-csn-neon-p);
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: 12px 0;
    }

    /* Touch targets ≥ 44px */
    body[data-site="oserezvous"] a,
    body[data-site="oserezvous"] .btn,
    body[data-site="oserezvous"] button {
        min-height: 44px;
    }
    body[data-site="oserezvous"] .btn-default,
    body[data-site="oserezvous"] .btn-primary {
        background: var(--osv-csn-night-2);
        border: 1.5px solid var(--osv-csn-neon-c);
        color: var(--osv-csn-cream);
        text-shadow: 0 0 4px var(--osv-csn-neon-c);
        border-radius: 4px;
        padding: 10px 16px;
    }
    body[data-site="oserezvous"] .btn-default:active,
    body[data-site="oserezvous"] .btn-primary:active {
        box-shadow: inset 0 0 10px var(--osv-csn-neon-c), 0 0 12px var(--osv-csn-neon-c);
    }

    /* Cards / blocs */
    body[data-site="oserezvous"] .panel,
    body[data-site="oserezvous"] .well,
    body[data-site="oserezvous"] .thumbnail {
        background: var(--osv-csn-night-2);
        border: 1px solid rgba(179, 71, 255, .35);
        border-radius: 6px;
        color: var(--osv-csn-cream);
        margin-bottom: 14px;
    }
    body[data-site="oserezvous"] img { max-width: 100%; height: auto; }
    body[data-site="oserezvous"] table { display: block; overflow-x: auto; }
}

/* ============================================================
   BOTTOM-NAV "Casino Vegas neon" — fixed bottom on mobile
   ============================================================ */
.osv-csn-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    height: calc(74px + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(180deg, var(--osv-csn-night-2) 0%, var(--osv-csn-night) 100%);
    border-top: 2px solid var(--osv-csn-neon-v);
    box-shadow: 0 -6px 22px rgba(179, 71, 255, .35);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 4px 4px 6px;
    gap: 4px;
}

/* Top neon tube line */
.osv-csn-bar::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    height: 1.5px;
    background: linear-gradient(to right,
        var(--osv-csn-neon-v) 0%,
        var(--osv-csn-neon-p) 50%,
        var(--osv-csn-neon-c) 100%);
    filter: drop-shadow(0 0 4px var(--osv-csn-neon-v))
            drop-shadow(0 0 4px var(--osv-csn-neon-p));
    pointer-events: none;
}

.osv-csn-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 2px 4px;
    color: var(--osv-csn-cream);
    text-decoration: none;
    font-family: "Bebas Neue", "Arial Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease;
}

.osv-csn-cell svg {
    width: 24px;
    height: 24px;
    stroke: var(--osv-csn-cream);
    fill: none;
    stroke-width: 1.4;
    transition: stroke .2s ease, filter .2s ease;
}

.osv-csn-cell:active svg,
.osv-csn-cell[aria-current="page"] svg {
    stroke: var(--osv-csn-neon-p);
    filter: drop-shadow(0 0 5px var(--osv-csn-neon-p))
            drop-shadow(0 0 8px var(--osv-csn-neon-p));
}
.osv-csn-cell[aria-current="page"] {
    color: var(--osv-csn-neon-p);
    text-shadow: 0 0 4px var(--osv-csn-neon-p);
}

body.osv-csn-padded { padding-bottom: 96px; }

@media (min-width: 768px) {
    .osv-csn-bar { display: none; }
    body.osv-csn-padded { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .osv-csn-bar::before { filter: none; }
    .osv-csn-cell svg { transition: none; }
}