/* ============================================================
   Pronostics WBC — Thème global
   Les couleurs sont injectées via CSS variables (customizer)
   ============================================================ */

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.prono-app {
    background-color: var(--prono-bg);
    color: var(--prono-text);
    font-family: var(--prono-font, 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
}

/* ---- Header ---- */
.prono-header {
    background: color-mix(in srgb, var(--prono-card) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--prono-border);
    box-shadow: 0 6px 24px -20px rgba(16,24,40,.5);
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
}

.prono-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo / wordmark */
/* .prono-logo img {
    height: 34px !important;
    width: auto !important;
    border-radius: 8px;
} */

.prono-site-title a,
.wp-block-site-title.prono-site-title a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: var(--prono-font-head, 'Archivo', 'Montserrat', system-ui, 'Segoe UI', sans-serif);
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    text-decoration: none !important;
    color: var(--prono-accent) !important;
    background: var(--prono-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.prono-site-title a::before {
    content: "⚽";
    -webkit-text-fill-color: initial;
    font-size: 20px;
    line-height: 1;
}

/* Navigation — liens épurés directement sur la barre (pas de pavé) */
.wp-block-navigation.prono-nav,
.prono-nav .wp-block-navigation__container {
    background: transparent !important;
    align-items: center;
    gap: 4px !important;
}
.prono-nav { padding: 0 !important; }

.prono-nav .wp-block-navigation-item__content {
    color: var(--prono-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    transition: background .15s, color .15s !important;
    text-decoration: none !important;
}
/* Tous les onglets non-actifs : fond neutre au survol/focus, jamais vert */
.prono-nav .wp-block-navigation-item:not(.current-menu-item):not(.prono-nav-auth) .wp-block-navigation-item__content:hover,
.prono-nav .wp-block-navigation-item:not(.current-menu-item):not(.prono-nav-auth) .wp-block-navigation-item__content:focus,
.prono-nav .wp-block-navigation-item:not(.current-menu-item):not(.prono-nav-auth) .wp-block-navigation-item__content:focus-visible {
    color: var(--prono-text) !important;
    background: var(--prono-track, rgba(15,23,42,.06)) !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Vert réservé EXCLUSIVEMENT à la page active (current-menu-item / aria-current) */
.prono-nav .current-menu-item .wp-block-navigation-item__content,
.prono-nav .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--prono-accent) !important;
    background: color-mix(in srgb, var(--prono-accent) 12%, transparent) !important;
}

/* ---- Menu mobile (hamburger + overlay) ---- */
/* Bouton hamburger : pastille ronde élégante. */
.prono-nav .wp-block-navigation__responsive-container-open {
    color: var(--prono-text) !important;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--prono-border);
    background: var(--prono-card);
    box-shadow: var(--prono-shadow-sm, 0 2px 8px rgba(16,24,40,.08));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease, transform .12s ease;
}
.prono-nav .wp-block-navigation__responsive-container-open:hover {
    border-color: var(--prono-accent);
    transform: translateY(-1px);
}

/* Transition d'ouverture / fermeture du panneau. */
.prono-nav .wp-block-navigation__responsive-container {
    transition: opacity .45s ease, visibility .45s ease;
}
/* Panneau ouvert : overlay plein écran « premium » (fond nuit + halo accent). */
.wp-block-navigation__responsive-container.is-menu-open {
    background: radial-gradient(125% 125% at 100% 0%, #16223c 0%, #0a1120 58%) !important;
    color: #fff !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    height: 100dvh;
}
.wp-block-navigation__responsive-container.is-menu-open::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(55% 40% at 88% 6%, color-mix(in srgb, var(--prono-accent) 30%, transparent), transparent 70%);
    pointer-events: none;
}
/* Zone de contenu : centrée verticalement, défilable si besoin. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 100px 28px calc(32px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
    content: 'MENU';
    position: absolute;
    top: 44px;
    left: 28px;
    font: 700 12px/1 var(--prono-font, sans-serif);
    letter-spacing: .35em;
    color: color-mix(in srgb, #fff 55%, transparent);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    counter-reset: prononav;
    gap: 2px !important;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap !important;
}
/* Items : grands, numérotés, alignés à gauche. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    counter-increment: prononav;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: flex;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 18px 6px !important;
    font-family: var(--prono-font-head, sans-serif) !important;
    font-size: clamp(28px, 8.5vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -.01em;
    color: #fff !important;
    text-align: left;
    border-radius: 0 !important;
    transition: color .25s ease, padding-left .35s cubic-bezier(.16, 1, .3, 1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
    content: counter(prononav, decimal-leading-zero);
    font-family: var(--prono-font, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--prono-accent);
    transform: translateY(-3px);
    min-width: 26px;
}
@media (hover: hover) {
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.prono-nav-auth) .wp-block-navigation-item__content:hover {
        color: var(--prono-accent2, var(--prono-accent)) !important;
        padding-left: 16px !important;
    }
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--prono-accent2, var(--prono-accent)) !important;
}
/* Connexion / Déconnexion : pilule pleine en bas, sans numéro. */
.wp-block-navigation__responsive-container.is-menu-open .prono-nav-auth {
    counter-increment: none;
    border-bottom: none;
    margin-top: 28px;
}
.wp-block-navigation__responsive-container.is-menu-open .prono-nav-auth .wp-block-navigation-item__content {
    justify-content: center;
    font-family: var(--prono-font, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 22px !important;
    border-radius: 14px !important;
    background: var(--prono-accent) !important;
    color: #fff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .prono-nav-auth .wp-block-navigation-item__content::before {
    content: none;
}
/* Croix de fermeture : ronde, contrastée, rotation au survol. */
.prono-nav .wp-block-navigation__responsive-container-close {
    color: #fff !important;
    top: 26px !important;
    right: 22px !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .25s ease;
}
.prono-nav .wp-block-navigation__responsive-container-close:hover {
    background: rgba(255, 255, 255, .14);
    transform: rotate(90deg);
}

/* ---- Bascule burger / menu complet au point de rupture 768px ---- */
/* Bureau (≥ 768px) : menu horizontal complet, AUCUN burger. */
@media (min-width: 768px) {
    .prono-nav .wp-block-navigation__responsive-container-open,
    .prono-nav .wp-block-navigation__responsive-container-close {
        display: none !important;
    }
}
/* Tablette & mobile (≤ 767px) : burger seul, liste inline masquée hors overlay. */
@media (max-width: 767px) {
    .prono-nav .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    /* Panneau fermé : présent mais invisible (transition d'ouverture / fermeture fluide). */
    .prono-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: flex !important;
        position: fixed;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* ---- Main content ---- */
.prono-main {
    min-height: calc(100vh - 64px - 80px);
}

.prono-main--full {
    padding: 32px 24px 48px;
    max-width: 1280px;
    margin: 0 auto;
}

.prono-main--dashboard {
    padding: 0;
}

/* ---- Page hero ---- */
.prono-page-hero {
    background: linear-gradient(180deg, var(--prono-card2) 0%, transparent 100%);
    border-bottom: 1px solid var(--prono-border);
    padding: 36px 24px 28px;
    margin-bottom: 32px;
}

.prono-page-title {
    font-size: clamp(24px, 4vw, 36px) !important;
    font-weight: 800 !important;
    color: var(--prono-text) !important;
    margin: 0 0 8px !important;
    letter-spacing: -0.02em;
}

.prono-page-hero .prono-page-title {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.prono-page-desc {
    color: var(--prono-muted) !important;
    font-size: 15px !important;
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---- Archive pronostics ---- */
.prono-archive-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 48px;
}

.prono-archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--prono-border);
}

.prono-archive-header h1 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: var(--prono-text);
    margin: 0;
    letter-spacing: -0.02em;
}

.prono-archive-kpis {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 600;
}

.prono-archive-kpis span {
    background: var(--prono-card);
    border: 1px solid var(--prono-border);
    border-radius: 8px;
    padding: 5px 12px;
    color: var(--prono-muted);
}

/* ---- Footer ---- */
.prono-footer {
    background: var(--prono-card2);
    border-top: 1px solid var(--prono-border);
    margin-top: auto;
}

.prono-footer__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 24px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--prono-bg); }
::-webkit-scrollbar-thumb { background: var(--prono-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--prono-accent); }

/* ---- Sélection texte ---- */
::selection {
    background: color-mix(in srgb, var(--prono-accent) 25%, transparent);
    color: var(--prono-text);
}

/* ---- Boutons WordPress globaux ---- */
.wp-block-button__link,
.button, .btn {
    background: var(--prono-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: opacity .15s, transform .1s !important;
}
.wp-block-button__link:hover,
.button:hover, .btn:hover {
    opacity: .88 !important;
    transform: translateY(-1px) !important;
}

/* ---- Inputs globaux ---- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
select {
    background: var(--prono-card) !important;
    border: 1px solid var(--prono-border) !important;
    color: var(--prono-text) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    transition: border-color .15s !important;
    outline: none !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--prono-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--prono-accent) 16%, transparent) !important;
}

/* ---- Barre de progression / loading ---- */
.prono-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--prono-gradient);
    z-index: 9999;
    transition: width .3s ease;
    border-radius: 0 2px 2px 0;
}

/* ---- Page transitions ---- */
.prono-app .prono-main {
    animation: prono-fadein .3s ease;
}

@keyframes prono-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Sidebar layout (si activée) ---- */
.prono-layout--sidebar-right .prono-archive-main,
.prono-layout--sidebar-left .prono-archive-main {
    display: grid;
    gap: 28px;
}

.prono-layout--sidebar-right .prono-archive-main { grid-template-columns: 1fr 300px; }
.prono-layout--sidebar-left  .prono-archive-main { grid-template-columns: 300px 1fr; }

.prono-sidebar {
    position: sticky;
    top: 80px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .prono-layout--sidebar-right .prono-archive-main,
    .prono-layout--sidebar-left  .prono-archive-main {
        grid-template-columns: 1fr;
    }
    .prono-sidebar { position: static; }
}

/* Tablette : nav compacte pour éviter l'écrasement. */
@media (max-width: 768px) {
    .prono-header__inner { gap: 12px; }
    .prono-nav .wp-block-navigation-item__content { font-size: 13px !important; padding: 7px 11px !important; }
    .prono-nav-auth { margin-left: 4px; padding-left: 8px; }
    .prono-nav-auth .wp-block-navigation-item__content { padding: 7px 13px !important; }
}

@media (max-width: 768px) {
    .prono-header__inner { padding: 0 16px; height: 58px; }
    .prono-site-title a,
    .wp-block-site-title.prono-site-title a { font-size: 17px !important; }
    .prono-main--full    { padding: 20px 16px 36px; }
    .prono-archive-main  { padding: 20px 16px 36px; }
    .prono-archive-header { flex-direction: column; align-items: flex-start; }
    /* Le bouton flottant de thème ne doit pas masquer le contenu. */
    .prono-theme-toggle { width: 44px; height: 44px; font-size: 19px; right: 14px; bottom: 14px; }
}

@media (max-width: 480px) {
    .prono-archive-kpis { gap: 8px; }
    .prono-archive-kpis span { font-size: 12px; padding: 4px 9px; }
}

/* ---- Utilitaires ---- */
.prono-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.prono-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--prono-text);
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.prono-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--prono-border);
}

/* ---- Skeleton loader ---- */
.prono-skeleton {
    background: linear-gradient(90deg, var(--prono-card) 25%, var(--prono-card2) 50%, var(--prono-card) 75%);
    background-size: 200% 100%;
    animation: prono-skeleton 1.4s infinite;
    border-radius: 8px;
}
@keyframes prono-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Admin bar compensation ---- */
.admin-bar .prono-header {
    top: 32px;
}
@media (max-width: 782px) {
    .admin-bar .prono-header { top: 46px; }
}

/* ---- Lien Connexion / Déconnexion dans la nav ---- */
.prono-nav-auth {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--prono-border);
}
.prono-nav-auth .wp-block-navigation-item__content,
.prono-nav .prono-nav-auth .wp-block-navigation-item__content {
    background: var(--prono-gradient) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--prono-accent) 70%, transparent);
    transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease !important;
}
.prono-nav-auth .wp-block-navigation-item__content:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--prono-accent) 75%, transparent);
}

/* =====================================================================
   Nouvelle navigation : wp_nav_menu() + 2 emplacements (connecté/non).
   Markup : <nav class="prono-nav"><button.burger><ul.prono-nav__list>
              <li.menu-item><a>…</a></li></ul></nav>
   ===================================================================== */
.prono-nav { display: flex; align-items: center; }
.prono-nav__list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.prono-nav__list .menu-item { margin: 0; }
.prono-nav__list .menu-item > a {
    display: inline-block;
    padding: 8px 14px;
    font-family: var(--prono-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--prono-muted);
    text-decoration: none;
    border-radius: 10px;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}
/* Hover/focus sur un onglet non-actif : fond neutre (track), texte sombre — pas de vert. */
.prono-nav__list .menu-item:not(.current-menu-item):not(.menu-item--auth) > a:hover,
.prono-nav__list .menu-item:not(.current-menu-item):not(.menu-item--auth) > a:focus-visible {
    background: var(--prono-track, rgba(15,23,42,.06));
    color: var(--prono-text);
    outline: none;
}
/* Vert réservé à la page courante uniquement. */
.prono-nav__list .current-menu-item > a,
.prono-nav__list .current_page_item > a,
.prono-nav__list .menu-item > a[aria-current="page"] {
    background: color-mix(in srgb, var(--prono-accent) 12%, transparent);
    color: var(--prono-accent);
}
/* Pastille Connexion / Déconnexion (auto-détectée sur les URLs de login/logout). */
.prono-nav__list .menu-item--auth > a {
    background: linear-gradient(135deg, var(--prono-accent), var(--prono-accent2));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--prono-accent) 70%, transparent);
    margin-left: 6px;
}
.prono-nav__list .menu-item--auth > a:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--prono-accent) 75%, transparent);
}

/* Logo custom (shortcode [prono_logo]) — image si configurée, sinon titre texte. */
.prono-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--prono-text);
    font-family: var(--prono-font-head, var(--prono-font));
    font-stretch: 125%;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
}
.prono-logo--img img {
	display: block;
    max-height: 58px;
    width: 60px;
    object-fit: contain;
    transition: filter .25s ease;
}

/* Logo en dark mode : invert + brightness(0) pour transformer un logo
   monochrome sombre en blanc pur. Le `brightness(0)` ramène tout à du
   noir uniforme (gomme les variations de gris/couleur), puis `invert(1)`
   passe en blanc pur. Marche pour les logos mono-couleur foncés. Si plus
   tard tu veux un logo dédié dark mode, remplace par background-image
   conditionnelle (cf. commentaire en bas). */
[data-prono-theme="dark"] .prono-logo--img img {
    filter: brightness(0) invert(1);
}
/* Variante alternative (à activer si le logo est polychrome) :
   [data-prono-theme="dark"] .prono-logo--img img { filter: invert(1) hue-rotate(180deg); }
   → préserve les teintes en inversant juste la luminosité. */

/* Burger — caché sur desktop, visible sur ≤900px (tablette + mobile).
   Icône = 2 SVG inline (☰ / ✕) avec stroke="currentColor" héritée du
   bouton : aucune dépendance aux fonts système ni aux variables CSS. */
.prono-nav__burger {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    position: relative;
    z-index: 10001;
    flex: 0 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
    transition: background-color .15s ease;
}
.prono-nav__burger:hover,
.prono-nav__burger:focus-visible {
    background-color: rgba(15, 23, 42, .08);
    outline: none;
}
.prono-nav__burger-icon { display: block; }
.prono-nav__burger-icon--close { display: none; }
.prono-nav.is-menu-open .prono-nav__burger-icon--open  { display: none; }
.prono-nav.is-menu-open .prono-nav__burger-icon--close { display: block; }

/* Brand (logo) + filigrane drapeau + carte utilisateur : injectés dans la
   nav mais visibles uniquement quand l'overlay mobile est ouvert. */
.prono-nav__brand,
.prono-nav__flag-bg,
.prono-nav__user-card { display: none; }

/* ---- Tablette + mobile : burger + overlay full-screen ---- */
@media (max-width: 768px) {
    .prono-nav { position: static; }

    /* Le header est sticky et doit passer au-dessus de l'overlay (z:10000)
       pour que le logo + bouton burger restent visibles/cliquables. */
    .prono-header { position: sticky; top: 0; z-index: 10002; }

    .prono-nav__burger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Overlay plein écran : position+dimensions+fond explicites en valeurs
       littérales pour qu'aucune règle CSS ne puisse l'annuler. */
    .prono-nav__list {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: #ffffff !important;
        z-index: 10000 !important;
        padding: 80px 24px 40px !important;
        margin: 0 !important;
        list-style: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .25s ease, visibility 0s linear .25s !important;
    }
    .prono-nav.is-menu-open .prono-nav__list {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: opacity .25s ease !important;
    }
    .prono-nav__list .menu-item > a {
        font-size: 22px !important;
        padding: 12px 22px !important;
        position: relative;
        z-index: 2;
    }
    .prono-nav__list .menu-item--auth > a {
        font-size: 18px !important;
        padding: 12px 28px !important;
    }
    body.prono-menu-open { overflow: hidden !important; }

    /* ---- Brand (logo) en haut de l'overlay ---- */
    .prono-nav.is-menu-open .prono-nav__brand {
        display: flex;
        position: fixed;
        top: 18px;
        left: 24px;
        z-index: 10001;
        align-items: center;
        pointer-events: auto;
    }
    .prono-nav.is-menu-open .prono-nav__brand .prono-logo { color: #0f172a; }

    /* ---- Filigrane drapeau (overlay tinté aux couleurs du pays) ----
       Reprend le pattern de la bannière profil : grand emoji tourné,
       opacité ~0.18 sur un voile coloré aux couleurs de l'équipe.
       Le <li> est injecté comme premier enfant du <ul>, donc partage son
       stacking context : on peut le mettre en arrière-plan via z-index. */
    .prono-nav.is-team-themed.is-menu-open .prono-nav__list {
        background:
            linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.85) 100%),
            linear-gradient(135deg, var(--team-c1, #fff), var(--team-c2, #fff)) !important;
    }
    .prono-nav.is-menu-open .prono-nav__flag-bg {
        display: block;
        position: absolute;
        right: -40px;
        top: 50%;
        transform: translateY(-50%) rotate(-10deg);
        font-size: clamp(260px, 80vw, 420px);
        line-height: 1;
        opacity: .22;
        pointer-events: none;
        user-select: none;
        filter: saturate(1.15);
        z-index: 1;
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: 'Twemoji Country Flags', 'Montserrat', system-ui, sans-serif;
    }
    /* Items au-dessus du drapeau dans la pile interne du <ul>. */
    .prono-nav.is-menu-open .prono-nav__list .menu-item {
        position: relative;
        z-index: 2;
    }

    /* ---- Carte utilisateur (avatar + nom + devise) en tête d'overlay ----
       Injectée comme <li> sans .menu-item : ne reçoit pas le style des items
       de menu (font-size, padding, etc.). */
    .prono-nav.is-menu-open .prono-nav__user-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin: 0 0 10px;
        padding: 0;
        list-style: none;
        position: relative;
        z-index: 2;
    }
    .prono-nav__avatar {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(255, 255, 255, .85);
        box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .45);
        background: #f1f4f9;
    }
    .prono-nav__user-name {
        font-family: var(--prono-font-head, var(--prono-font));
        font-weight: 700;
        font-size: 22px;
        color: #0f172a;
        line-height: 1.1;
        text-align: center;
    }
    .prono-nav__user-motto {
        font-style: italic;
        font-size: 13px;
        color: #475569;
        opacity: .9;
        max-width: 280px;
        text-align: center;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Sécurité : ne pas afficher la user-card hors overlay ouvert. */
    .prono-nav:not(.is-menu-open) .prono-nav__user-card { display: none; }

    /* ---- Dark mode : remplace le voile blanc par un voile sombre,
       les textes restent lisibles, le burger reste contrasté. */
    [data-prono-theme="dark"] .prono-nav.is-menu-open .prono-nav__list {
        background-color: #0b1220 !important;
    }
    [data-prono-theme="dark"] .prono-nav.is-team-themed.is-menu-open .prono-nav__list {
        background:
            linear-gradient(180deg, rgba(11, 18, 32, .72) 0%, rgba(11, 18, 32, .9) 100%),
            linear-gradient(135deg, var(--team-c1, #0b1220), var(--team-c2, #0b1220)) !important;
    }
    [data-prono-theme="dark"] .prono-nav__burger { color: #e2e8f0; }
    [data-prono-theme="dark"] .prono-nav__burger:hover,
    [data-prono-theme="dark"] .prono-nav__burger:focus-visible {
        background-color: rgba(255, 255, 255, .1);
    }
    [data-prono-theme="dark"] .prono-nav.is-menu-open .prono-nav__brand .prono-logo { color: #f1f5f9; }
    [data-prono-theme="dark"] .prono-nav__user-name  { color: #f8fafc; }
    [data-prono-theme="dark"] .prono-nav__user-motto { color: rgba(241, 245, 249, .75); }
    [data-prono-theme="dark"] .prono-nav__avatar    { border-color: rgba(255, 255, 255, .25); }
}