/*
 * PYL Modern : couche de design du site, alignée sur PYL_App (fond bleu nuit, cartes translucides,
 * bordures fines, accent par section). Chargée APRÈS les feuilles du thème : supprimer le <link>
 * dans includes/head_shared.html suffit pour revenir à l'ancien rendu.
 * La couleur d'accent vient de --section-rgb, posée selon la section (data-section sur <html>).
 */

/* ---------- Jetons de design ---------- */
:root {
    --section-rgb: 52, 145, 239;
    --pyl-bg: #080808;
    --pyl-surface: rgba(255, 255, 255, 0.035);
    --pyl-surface-2: rgba(255, 255, 255, 0.055);
    --pyl-line: rgba(255, 255, 255, 0.08);
    --pyl-muted: #9ca3af;
    --pyl-text: #e8ecf5;
    --pyl-radius: 20px;
    --pyl-shadow: none;
    --pyl-font-display: 'Montserrat', Inter, system-ui, sans-serif;
}
html[data-section="assistant"] { --section-rgb: 32, 223, 223; }
html[data-section="tcg"] { --section-rgb: 174, 113, 244; }
html[data-section="app"] { --section-rgb: 255, 193, 7; }
html[data-section="admin"] { --section-rgb: 244, 92, 42; }
html[data-section="craft"] { --section-rgb: 93, 223, 73; }
html[data-section="marcio"] { --section-rgb: 0, 91, 255; }

/* ---------- Fond et texte ---------- */
html[data-section] body,
html[data-section] .bg-body,
html[data-section] .main-content {
    background-color: var(--pyl-bg);
}
html[data-section] body { color: var(--pyl-text); }
html[data-section] .text-muted,
html[data-section] .text-body-secondary { color: var(--pyl-muted) !important; }

/* ---------- Cartes ---------- */
html[data-section] .card {
    background: var(--pyl-surface);
    border: 1px solid var(--pyl-line);
    border-radius: var(--pyl-radius);
    box-shadow: var(--pyl-shadow);
}
html[data-section] .card-header {
    background: var(--pyl-surface-2);
    border-bottom: 1px solid var(--pyl-line);
}
html[data-section] .card-footer {
    background: var(--pyl-surface-2);
    border-top: 1px solid var(--pyl-line);
}

/* ---------- Boutons : l'accent de la section remplace le bleu plein ---------- */
html[data-section] .btn {
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
html[data-section] .btn-primary {
    --bs-btn-color: rgb(var(--section-rgb));
    --bs-btn-bg: rgba(var(--section-rgb), 0.16);
    --bs-btn-border-color: rgba(var(--section-rgb), 0.5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--section-rgb), 0.32);
    --bs-btn-hover-border-color: rgb(var(--section-rgb));
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(var(--section-rgb), 0.42);
    --bs-btn-active-border-color: rgb(var(--section-rgb));
    --bs-btn-focus-shadow-rgb: var(--section-rgb);
    --bs-btn-disabled-color: rgb(var(--section-rgb));
    --bs-btn-disabled-bg: rgba(var(--section-rgb), 0.1);
    --bs-btn-disabled-border-color: rgba(var(--section-rgb), 0.25);
}
html[data-section] .btn-outline-primary {
    --bs-btn-color: rgb(var(--section-rgb));
    --bs-btn-border-color: rgba(var(--section-rgb), 0.5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(var(--section-rgb), 0.28);
    --bs-btn-hover-border-color: rgb(var(--section-rgb));
    --bs-btn-active-bg: rgba(var(--section-rgb), 0.4);
    --bs-btn-active-border-color: rgb(var(--section-rgb));
}
/* Le thème impose background-color: var(--bs-primary) directement : on reprend la main avec les variables du bouton */
html[data-section] .btn.btn-primary {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}
html[data-section] .btn.btn-primary:hover,
html[data-section] .btn.btn-primary:focus-visible {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}
html[data-section] .btn.btn-primary:active,
html[data-section] .btn.btn-primary.active {
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    color: var(--bs-btn-active-color);
}
html[data-section] .btn-secondary {
    --bs-btn-color: var(--pyl-text);
    --bs-btn-bg: rgba(255, 255, 255, 0.05);
    --bs-btn-border-color: var(--pyl-line);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.2);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
    --bs-btn-active-border-color: rgba(255, 255, 255, 0.25);
}
html[data-section] .btn.btn-secondary { background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); color: var(--bs-btn-color); }
html[data-section] .btn.btn-secondary:hover { background-color: var(--bs-btn-hover-bg); border-color: var(--bs-btn-hover-border-color); color: var(--bs-btn-hover-color); }

/* Éléments « primaires » : l'accent de la section (liens, cases cochées, barres de progression, etc.) */
html[data-section] {
    --bs-primary: rgb(var(--section-rgb));
    --bs-primary-rgb: var(--section-rgb);
    --bs-link-color: rgb(var(--section-rgb));
    --bs-link-hover-color: #fff;
}
/* Aplats Bootstrap : fond translucide teinté plutôt que couleur pleine */
html[data-section] .text-bg-primary,
html[data-section] .bg-primary {
    background-color: rgba(var(--section-rgb), 0.14) !important;
    color: var(--pyl-text) !important;
    border: 1px solid rgba(var(--section-rgb), 0.3);
}
html[data-section] .text-bg-secondary,
html[data-section] .bg-secondary {
    background-color: var(--pyl-surface-2) !important;
    color: var(--pyl-text) !important;
    border: 1px solid var(--pyl-line);
}

/* Boutons sémantiques : même principe (fond translucide, texte et bordure colorés) */
html[data-section] .btn-success { --bs-btn-color: #1ed760; --bs-btn-bg: rgba(30, 215, 96, 0.14); --bs-btn-border-color: rgba(30, 215, 96, 0.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(30, 215, 96, 0.3); --bs-btn-hover-border-color: #1ed760; --bs-btn-active-bg: rgba(30, 215, 96, 0.4); --bs-btn-active-border-color: #1ed760; }
html[data-section] .btn-danger { --bs-btn-color: #ef4e6e; --bs-btn-bg: rgba(239, 78, 110, 0.14); --bs-btn-border-color: rgba(239, 78, 110, 0.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(239, 78, 110, 0.3); --bs-btn-hover-border-color: #ef4e6e; --bs-btn-active-bg: rgba(239, 78, 110, 0.4); --bs-btn-active-border-color: #ef4e6e; }
html[data-section] .btn-warning { --bs-btn-color: #ffc107; --bs-btn-bg: rgba(255, 193, 7, 0.14); --bs-btn-border-color: rgba(255, 193, 7, 0.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 193, 7, 0.3); --bs-btn-hover-border-color: #ffc107; --bs-btn-active-bg: rgba(255, 193, 7, 0.4); --bs-btn-active-border-color: #ffc107; }
html[data-section] .btn-info { --bs-btn-color: #20dfdf; --bs-btn-bg: rgba(32, 223, 223, 0.14); --bs-btn-border-color: rgba(32, 223, 223, 0.45); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(32, 223, 223, 0.3); --bs-btn-hover-border-color: #20dfdf; --bs-btn-active-bg: rgba(32, 223, 223, 0.4); --bs-btn-active-border-color: #20dfdf; }

/* ---------- Menu latéral ---------- */
html[data-section] .sidebar.sidebar-default {
    background: #0d0d0f;
    border-right: 1px solid var(--pyl-line);
    box-shadow: none;
}
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item) {
    border-radius: 10px;
}
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item).active,
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded="true"] {
    background: rgba(var(--section-rgb), 0.14) !important;
    color: rgb(var(--section-rgb)) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--section-rgb), 0.35);
}
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item):hover:not(.active):not([aria-expanded="true"]) {
    background: var(--pyl-surface-2) !important;
    color: #fff !important;
}

/* ---------- Bandeau de page : dégradé de la section au lieu de l'image bleue ---------- */
html[data-section] .iq-navbar-header {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--section-rgb), 0.28) 0%, rgba(var(--section-rgb), 0) 60%),
        linear-gradient(135deg, #141828 0%, #0b0d14 100%);
    border-bottom: 1px solid rgba(var(--section-rgb), 0.25);
}
html[data-section] .iq-navbar-header .iq-header-img { display: none; }

/* ---------- Formulaires ---------- */
html[data-section] .form-control,
html[data-section] .form-select {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pyl-line);
    border-radius: 10px;
    color: var(--pyl-text);
}
html[data-section] .form-control:focus,
html[data-section] .form-select:focus {
    border-color: rgba(var(--section-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--section-rgb), 0.18);
}

/* ---------- Tableaux ---------- */
html[data-section] .table > :not(caption) > * > * { border-color: var(--pyl-line); }
html[data-section] .table-responsive { border-radius: var(--pyl-radius); }

/* ---------- Fenêtres modales ---------- */
html[data-section] .modal-content {
    background: #141416;
    border: 1px solid var(--pyl-line);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
html[data-section] .modal-header,
html[data-section] .modal-footer { border-color: var(--pyl-line); }

/* ---------- Détails ---------- */
html[data-section] a:focus-visible,
html[data-section] button:focus-visible,
html[data-section] .btn:focus-visible { outline: 2px solid rgb(var(--section-rgb)); outline-offset: 2px; }
html[data-section] * { scrollbar-width: thin; scrollbar-color: rgba(var(--section-rgb), 0.45) transparent; }

/* ---------- Menu : chaque groupe garde sa propre couleur, quelle que soit la page ---------- */
html[data-section] a.nav-link[href="#menuPYLAssistant"], html[data-section] #menuPYLAssistant { --section-rgb: 32, 223, 223; }
html[data-section] a.nav-link[href="#menuPYLTcg"], html[data-section] #menuPYLTcg { --section-rgb: 174, 113, 244; }
html[data-section] a.nav-link[href="#menuPYLApp"], html[data-section] #menuPYLApp { --section-rgb: 255, 193, 7; }
html[data-section] a.nav-link[href="#menuGlobalAdmin"], html[data-section] #menuGlobalAdmin { --section-rgb: 244, 92, 42; }
html[data-section] a.nav-link[href="#menuPYLMarcio"], html[data-section] #menuPYLMarcio { --section-rgb: 0, 91, 255; }
html[data-section] a.nav-link[href="#menuPYLCraft"], html[data-section] #menuPYLCraft { --section-rgb: 93, 223, 73; }

/* ---------- Bannière de cookies ---------- */
html[data-section] #cc-main {
    --cc-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cc-bg: #141416;
    --cc-primary-color: #e8ecf5;
    --cc-secondary-color: #8f9ab5;
    --cc-modal-border-radius: 14px;
    --cc-btn-border-radius: 10px;
    --cc-btn-primary-bg: rgb(var(--section-rgb));
    --cc-btn-primary-color: #0b0d14;
    --cc-btn-primary-border-color: rgb(var(--section-rgb));
    --cc-btn-primary-hover-bg: #fff;
    --cc-btn-primary-hover-color: #0b0d14;
    --cc-btn-primary-hover-border-color: #fff;
    --cc-btn-secondary-bg: rgba(255, 255, 255, 0.06);
    --cc-btn-secondary-color: #e8ecf5;
    --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.12);
    --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.12);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.2);
    --cc-link-color: rgb(var(--section-rgb));
    --cc-separator-border-color: rgba(255, 255, 255, 0.07);
    --cc-footer-bg: rgba(255, 255, 255, 0.03);
    --cc-footer-color: #8f9ab5;
    --cc-footer-border-color: rgba(255, 255, 255, 0.07);
    --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.04);
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.07);
    --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.08);
    --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.12);
    --cc-toggle-on-bg: rgb(var(--section-rgb));
    --cc-toggle-off-bg: #3a4160;
}
html[data-section] #cc-main .cm { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.07); }

/* ---------- Lisibilité : textes d'accent éclaircis (contraste ≥ 4,5:1 sur fond sombre) ---------- */
html[data-section] .btn-primary {
    --bs-btn-color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff);
    --bs-btn-disabled-color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff);
}
html[data-section] .btn.btn-primary { color: var(--bs-btn-color); }
html[data-section] .btn.btn-primary:hover,
html[data-section] .btn.btn-primary:focus-visible,
html[data-section] .btn.btn-primary:active { color: #fff; }
html[data-section] .btn-outline-primary,
html[data-section] .btn.btn-outline-primary {
    --bs-btn-color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff);
    color: var(--bs-btn-color);
    background-color: transparent;
    border-color: rgba(var(--section-rgb), 0.5);
}
html[data-section] .btn.btn-outline-primary:hover,
html[data-section] .btn.btn-outline-primary:focus-visible,
html[data-section] .btn.btn-outline-primary.active {
    background-color: rgba(var(--section-rgb), 0.28);
    border-color: rgb(var(--section-rgb));
    color: #fff;
}
html[data-section] .btn-success { --bs-btn-color: #5ee38e; }
html[data-section] .btn-danger { --bs-btn-color: #ff8aa0; }
html[data-section] .btn-warning { --bs-btn-color: #ffd866; }
html[data-section] .btn-info { --bs-btn-color: #6aeaea; }
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item).active,
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded="true"] {
    color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff) !important;
}
html[data-section] .sidebar .item-name { color: #9aa5c0; }
html[data-section] .sidebar .nav-link.active .item-name,
html[data-section] .sidebar .nav-link[aria-expanded="true"] .item-name { color: inherit; }
html[data-section] .footer .footer-heading { color: #aab8ff !important; }
html[data-section] .pub-banner { background: #c93500 !important; }

/* ---------- Pastilles (badges) : fond translucide et texte coloré, comme les « chips » de PYL_App ---------- */
html[data-section] .badge { border-radius: 999px; font-weight: 700; border: 1px solid transparent; }
html[data-section] .badge.bg-success { background-color: rgba(30, 215, 96, 0.16) !important; color: #5ee38e !important; border-color: rgba(30, 215, 96, 0.4); }
html[data-section] .badge.bg-danger { background-color: rgba(239, 78, 110, 0.16) !important; color: #ff8aa0 !important; border-color: rgba(239, 78, 110, 0.4); }
html[data-section] .badge.bg-warning { background-color: rgba(255, 193, 7, 0.16) !important; color: #ffd866 !important; border-color: rgba(255, 193, 7, 0.4); }
html[data-section] .badge.bg-info { background-color: rgba(32, 223, 223, 0.16) !important; color: #6aeaea !important; border-color: rgba(32, 223, 223, 0.4); }
html[data-section] .badge.bg-primary,
html[data-section] .badge.text-bg-primary { color: color-mix(in srgb, rgb(var(--section-rgb)) 70%, #fff) !important; }

/* Pastilles de compteur posées sur un autre élément : fond plein pour rester lisibles sur n'importe quel bouton */
html[data-section] .badge.position-absolute.bg-danger { background-color: #d9304f !important; color: #fff !important; border-color: transparent; }
html[data-section] .badge.position-absolute.bg-success { background-color: #12803f !important; color: #fff !important; border-color: transparent; }
html[data-section] .badge.position-absolute.bg-warning { background-color: #ffc107 !important; color: #1a1500 !important; border-color: transparent; }
html[data-section] .badge.position-absolute.bg-info { background-color: #20dfdf !important; color: #05191a !important; border-color: transparent; }
html[data-section] .badge.position-absolute.bg-primary { background-color: rgb(var(--section-rgb)) !important; color: #0b0d14 !important; border-color: transparent; }
html[data-section] .btn-info { --bs-btn-hover-color: #fff; }


/* =====================================================================================
 * Direction « néon » (inspirée de StrimUp) : fond presque noir, accent vif unique par section,
 * grandes formes arrondies, boutons pleins en petites majuscules espacées, titres en italique gras.
 * ===================================================================================== */

/* ---------- Typographie ---------- */
html[data-section] .iq-navbar-header h1,
html[data-section] .iq-navbar-header .h1 {
    font-family: var(--pyl-font-display);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    color: #fff;
}
html[data-section] .iq-navbar-header p {
    color: var(--pyl-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
html[data-section] .table thead th {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--pyl-muted);
}

/* ---------- Bandeau de page : grande carte arrondie, halo de la section et grille de points ---------- */
html[data-section] .iq-navbar-header {
    margin: 12px 12px 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(var(--section-rgb), 0.25);
    background:
        radial-gradient(60% 130% at 100% 0%, rgba(var(--section-rgb), 0.32) 0%, rgba(var(--section-rgb), 0) 62%),
        radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.6px) 0 0 / 18px 18px,
        #0e0e10;
    box-shadow: inset 0 0 70px rgba(var(--section-rgb), 0.1);
}

/* ---------- Boutons : pilules, petites majuscules espacées ---------- */
html[data-section] .btn {
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 800;
    font-size: 0.74rem;
}
html[data-section] .btn-sm { font-size: 0.68rem; }
html[data-section] .btn-lg { font-size: 0.86rem; }
/* Bouton principal : accent PLEIN, texte sombre, halo lumineux */
html[data-section] .btn.btn-primary {
    background-color: rgb(var(--section-rgb));
    border-color: rgb(var(--section-rgb));
    color: #0b0b0d !important;
    box-shadow: 0 6px 24px rgba(var(--section-rgb), 0.35);
}
html[data-section] .btn.btn-primary:hover,
html[data-section] .btn.btn-primary:focus-visible {
    background-color: color-mix(in srgb, rgb(var(--section-rgb)) 82%, #fff);
    border-color: color-mix(in srgb, rgb(var(--section-rgb)) 82%, #fff);
    color: #0b0b0d !important;
    box-shadow: 0 8px 30px rgba(var(--section-rgb), 0.5);
    transform: translateY(-1px);
}
html[data-section] .btn.btn-primary:active { transform: none; }
html[data-section] .btn.btn-primary:disabled,
html[data-section] .btn.btn-primary.disabled { box-shadow: none; opacity: 0.45; }
/* Barre du haut : boutons discrets (verre fumé), l'accent reste pour les actions */
html[data-section] .btn.btn-primary.nav-linkProfil {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--pyl-line);
    color: #fff !important;
    box-shadow: none;
    transform: none;
}
html[data-section] .btn.btn-primary.nav-linkProfil:hover {
    background-color: rgba(var(--section-rgb), 0.25);
    border-color: rgba(var(--section-rgb), 0.6);
}
html[data-section] .btn.btn-outline-primary { color: #fff; border-color: rgba(var(--section-rgb), 0.55); }
html[data-section] .btn.btn-outline-primary:hover { background-color: rgb(var(--section-rgb)); border-color: rgb(var(--section-rgb)); color: #0b0b0d; }

/* ---------- Cartes, champs, fenêtres : plus arrondis et plus neutres ---------- */
html[data-section] .card { border-radius: 20px; background: var(--pyl-surface); box-shadow: none; }
html[data-section] .card:hover { border-color: rgba(255, 255, 255, 0.14); }
html[data-section] .form-control, html[data-section] .form-select { border-radius: 14px; background-color: rgba(255, 255, 255, 0.04); }
html[data-section] .modal-content { border-radius: 24px; background: #141416; }
html[data-section] .badge { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.66rem; }

/* ---------- Menu latéral : carte flottante aux grands coins ---------- */
@media (min-width: 1200px) {
    html[data-section] .sidebar.sidebar-default:not(.sidebar-mini) {
        margin: 12px 0 12px 12px;
        width: calc(16.2rem - 24px);
        border-radius: 26px;
        border: 1px solid var(--pyl-line);
    }
}
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item) { border-radius: 14px; }
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item).active,
html[data-section] .sidebar.sidebar-default .nav-link:not(.static-item)[aria-expanded="true"] {
    box-shadow: inset 0 0 0 1px rgba(var(--section-rgb), 0.4), 0 0 22px rgba(var(--section-rgb), 0.12);
}

/* ---------- Fond de page et barre du haut : le thème sombre impose ses propres bleus ---------- */
html[data-section] body,
html[data-section] body.dark,
html[data-section] .dark {
    background-color: var(--pyl-bg) !important;
}
html[data-section] .nav.navbar,
html[data-section] .navbar.nav {
    background-color: rgba(8, 8, 8, 0.82) !important;
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--pyl-line);
    box-shadow: none !important;
}
/* Le bandeau est maintenant une carte arrondie : le contenu ne le chevauche plus */
html[data-section] .content-inner.mt-n5,
html[data-section] .conatiner-fluid.content-inner.mt-n5 {
    margin-top: 1.25rem !important;
}

/* ---------- Boutons sémantiques : le thème impose des fonds pleins, on reprend les variables ---------- */
html[data-section] .btn.btn-success,
html[data-section] .btn.btn-danger,
html[data-section] .btn.btn-warning,
html[data-section] .btn.btn-info {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
}
html[data-section] .btn.btn-success:hover,
html[data-section] .btn.btn-danger:hover,
html[data-section] .btn.btn-warning:hover,
html[data-section] .btn.btn-info:hover {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color);
}

/* ---------- Pied de page : même verre fumé que les cartes (le gabarit impose des styles en ligne) ---------- */
html[data-section] footer.footer {
    background: rgba(255, 255, 255, 0.03) !important;
    border-top: 1px solid var(--pyl-line) !important;
}
html[data-section] footer.footer a:not(.btn) { color: #aab8ff; }
html[data-section] footer.footer a:not(.btn):hover { color: #fff; }

/* ---------- Pastilles « text-bg-* » (utilisées dans la FAQ et les listes), pagination, textes de danger ---------- */
html[data-section] .badge.text-bg-success { background-color: rgba(30, 215, 96, 0.16) !important; color: #5ee38e !important; border-color: rgba(30, 215, 96, 0.4); }
html[data-section] .badge.text-bg-danger { background-color: rgba(239, 78, 110, 0.16) !important; color: #ff8aa0 !important; border-color: rgba(239, 78, 110, 0.4); }
html[data-section] .badge.text-bg-warning { background-color: rgba(255, 193, 7, 0.16) !important; color: #ffd866 !important; border-color: rgba(255, 193, 7, 0.4); }
html[data-section] .badge.text-bg-info { background-color: rgba(32, 223, 223, 0.16) !important; color: #6aeaea !important; border-color: rgba(32, 223, 223, 0.4); }
html[data-section] .text-danger { color: #ff7a8c !important; }
html[data-section] .blockquote-footer { color: var(--pyl-muted); }
html[data-section] .page-link {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--pyl-line);
    color: #e5e7eb;
}
html[data-section] .page-link:hover { background-color: rgba(var(--section-rgb), 0.2); border-color: rgba(var(--section-rgb), 0.5); color: #fff; }
html[data-section] .page-item.active .page-link {
    background-color: rgb(var(--section-rgb));
    border-color: rgb(var(--section-rgb));
    color: #0b0b0d;
    font-weight: 800;
}
html[data-section] .page-item.disabled .page-link { background-color: transparent; color: #6b7280; }

/* =====================================================================================
 * Écran de chargement et barre de progression (balisage et script : includes/header_start.html)
 * ===================================================================================== */
html[data-section] .loader.simple-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080808 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
html[data-section] .loader.simple-loader.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease;
}
html[data-section] .loader.simple-loader .loader-body {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 112px;
    height: 112px;
    max-width: none;
    max-height: none;
    background: url(/src/images/global/128.webp) center / 56px 56px no-repeat !important;
}
html[data-section] .loader.simple-loader .loader-body::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(var(--section-rgb), 0.18);
    border-top-color: rgb(var(--section-rgb));
    box-shadow: 0 0 28px rgba(var(--section-rgb), 0.35);
    animation: pylSpin 0.9s linear infinite;
}
html[data-section] .loader.simple-loader .loader-body::after {
    content: "Chargement";
    position: absolute;
    left: 50%;
    top: calc(100% + 20px);
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pyl-muted);
}
@keyframes pylSpin { to { transform: rotate(360deg); } }

/* Barre de progression pendant un changement de page */
#pylProgress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 0;
    height: 3px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--section-rgb), 0.4), rgb(var(--section-rgb)));
    box-shadow: 0 0 12px rgba(var(--section-rgb), 0.8);
    border-radius: 0 3px 3px 0;
}
#pylProgress.is-running {
    opacity: 1;
    width: 85%;
    transition: width 6s cubic-bezier(0.1, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    html[data-section] .loader.simple-loader .loader-body::before { animation-duration: 3s; }
    #pylProgress.is-running { transition: none; }
}

/* =====================================================================================
 * Encarts d'information (.alert) : fond translucide teinté, titre en pastille posée AU-DESSUS du texte
 * (le thème la plaçait en position absolue, ce qui la faisait chevaucher le texte)
 * ===================================================================================== */
html[data-section] .alert {
    --alert-rgb: var(--section-rgb);
    border-radius: 16px;
    border: 1px solid rgba(var(--alert-rgb), 0.35);
    background: rgba(var(--alert-rgb), 0.1);
    color: #e5e7eb;
}
html[data-section] .alert-success { --alert-rgb: 30, 215, 96; }
html[data-section] .alert-danger { --alert-rgb: 239, 78, 110; }
html[data-section] .alert-warning { --alert-rgb: 255, 193, 7; }
html[data-section] .alert-info { --alert-rgb: 32, 223, 223; }
html[data-section] .alert .alert-link,
html[data-section] .alert a { color: color-mix(in srgb, rgb(var(--alert-rgb)) 65%, #fff); }
html[data-section] .alert > .position-absolute.badge,
html[data-section] .alert > span.position-absolute.badge:first-child {
    position: static !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    margin: 0 0 8px;
    top: auto !important;
    background-color: rgba(var(--alert-rgb), 0.2) !important;
    color: color-mix(in srgb, rgb(var(--alert-rgb)) 60%, #fff) !important;
    border: 1px solid rgba(var(--alert-rgb), 0.45);
}

/* Cartes colorées (.card.bg-success, etc.) : même traitement translucide que les encarts, label de la carte assorti */
html[data-section] .card.bg-success { --tint: 30, 215, 96; }
html[data-section] .card.bg-danger { --tint: 239, 78, 110; }
html[data-section] .card.bg-warning { --tint: 255, 193, 7; }
html[data-section] .card.bg-info { --tint: 32, 223, 223; }
html[data-section] .card.bg-success,
html[data-section] .card.bg-danger,
html[data-section] .card.bg-warning,
html[data-section] .card.bg-info {
    background: rgba(var(--tint), 0.1) !important;
    border: 1px solid rgba(var(--tint), 0.35) !important;
    color: #e5e7eb !important;
    box-shadow: none !important;
}
html[data-section] .card.bg-success .badge.position-absolute,
html[data-section] .card.bg-danger .badge.position-absolute,
html[data-section] .card.bg-warning .badge.position-absolute,
html[data-section] .card.bg-info .badge.position-absolute {
    background-color: rgba(var(--tint), 0.22) !important;
    color: color-mix(in srgb, rgb(var(--tint)) 60%, #fff) !important;
    border: 1px solid rgba(var(--tint), 0.45);
}


/* =====================================================================================================
   Lisibilité sur thème sombre (revue du 2026-10-19) : contours des champs et des boutons d'action ≥ 3:1,
   textes d'action ≥ 4,5:1, états désactivés reconnaissables, listes déroulantes, croix des modales, toasts.
   ===================================================================================================== */

/* Champs : contour visible, texte d'aide lisible, liste déroulante sombre */
html[data-section] .form-control,
html[data-section] .form-select { border-color: rgba(255, 255, 255, 0.32); }
html[data-section] .form-control::placeholder { color: #9aa3b8; opacity: 1; }
html[data-section] .form-control:disabled,
html[data-section] .form-select:disabled { background-color: rgba(255, 255, 255, 0.05); color: #8b94a8; }
html[data-section] .form-select option,
html[data-section] .form-select optgroup { background-color: #14161d; color: #e8ecf5; }
html[data-section] .input-group-text { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.32); color: #d5dbea; }

/* Cases et interrupteurs : état « décoché » visible */
html[data-section] .form-check-input { border-color: rgba(255, 255, 255, 0.55); background-color: rgba(255, 255, 255, 0.08); }
html[data-section] .form-check-input:checked { background-color: rgb(var(--section-rgb)); border-color: rgb(var(--section-rgb)); }
html[data-section] .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--section-rgb), 0.25); border-color: rgb(var(--section-rgb)); }
html[data-section] .form-check-label { color: var(--pyl-text); }

/* Boutons secondaires et « outline » : texte clair, contour visible */
html[data-section] .btn.btn-secondary { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #f1f4fb; }
html[data-section] .btn.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; }
html[data-section] .btn-outline-secondary { color: #d5dbea; border-color: rgba(255, 255, 255, 0.38); background-color: transparent; }
html[data-section] .btn-outline-secondary:hover,
html[data-section] .btn-outline-secondary:focus-visible { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.6); color: #fff; }
html[data-section] .btn-outline-danger { color: #ff9a8f; border-color: rgba(255, 130, 120, 0.6); background-color: transparent; }
html[data-section] .btn-outline-danger:hover { background-color: rgba(239, 68, 68, 0.22); border-color: #ff9a8f; color: #fff; }
html[data-section] .btn-outline-info { color: #6fd8e6; border-color: rgba(111, 216, 230, 0.55); background-color: transparent; }
html[data-section] .btn-outline-info:hover { background-color: rgba(111, 216, 230, 0.18); color: #fff; }
html[data-section] .btn-outline-success { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.55); background-color: transparent; }
html[data-section] .btn-outline-success:hover { background-color: rgba(110, 231, 183, 0.18); color: #fff; }
html[data-section] .btn-outline-warning { color: #fcd34d; border-color: rgba(252, 211, 77, 0.55); background-color: transparent; }
html[data-section] .btn-outline-warning:hover { background-color: rgba(252, 211, 77, 0.18); color: #fff; }

/* Boutons désactivés : franchement grisés (et non un orange délavé au texte sombre) */
html[data-section] .btn:disabled:not(.btn-close),
html[data-section] .btn.disabled:not(.btn-close) {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #8b94a8 !important;
    box-shadow: none !important;
    opacity: 1;
}

/* Croix de fermeture : noire par défaut, invisible sur fond sombre */
html[data-section] .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.85; }
html[data-section] .btn-close:hover { opacity: 1; }

/* Code en ligne (identifiants, codes d'affiliation) */
html[data-section] code { color: #ff9ecb; }

/* Pied de page : textes et liens atténués relevés */
html[data-section] footer.footer,
html[data-section] footer.footer p,
html[data-section] footer.footer .text-muted { color: #b3bbcd !important; }
html[data-section] footer.footer a:not(.btn) { color: #b9c4ff; }

/* Boîtes SweetAlert2 : bouton de confirmation assez contrasté ; toasts sombres à texte blanc */
html[data-section] .swal2-confirm { background-color: #2563eb !important; }
html[data-section] .swal2-cancel { background-color: #b42318 !important; }
html[data-section] .colored-toast { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; }
html[data-section] .colored-toast.swal2-icon-success { background-color: #14532d !important; }
html[data-section] .colored-toast.swal2-icon-error { background-color: #7f1d1d !important; }
html[data-section] .colored-toast.swal2-icon-warning { background-color: #78350f !important; }
html[data-section] .colored-toast.swal2-icon-info { background-color: #0c4a6e !important; }
html[data-section] .colored-toast.swal2-icon-question { background-color: #4c1d95 !important; }
html[data-section] .colored-toast .swal2-title,
html[data-section] .colored-toast .swal2-html-container { color: #fff !important; }

/* Surcharges ciblées : liens du pied de page à style en ligne, bouton info (règle du thème plus spécifique) */
html[data-section] footer.footer a:not(.btn) { color: #b9c4ff !important; }
html[data-section] .btn.btn-outline-info { color: #6fd8e6; border-color: rgba(111, 216, 230, 0.55); }
html[data-section] .btn.btn-outline-info:hover { color: #fff; }


/* =====================================================================================================
   Menu latéral et barre du haut (revue du 2026-10-19) : fond cliquable et verrouillage du défilement sur mobile,
   focus visible, animations réduites à la demande.
   ===================================================================================================== */
.pyl-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 905; /* sous le menu (910), au-dessus de la page */
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
body.pyl-sidebar-open { overflow: hidden; }
/* Sur téléphone le menu occupe toute la largeur : pas de fond à montrer */
@media (max-width: 767.98px) {
    .pyl-sidebar-backdrop { display: none; }
}
html[data-section] .sidebar .nav-link:focus-visible,
html[data-section] .sidebar .btn:focus-visible,
html[data-section] .iq-navbar .btn:focus-visible,
html[data-section] .iq-navbar .dropdown-item:focus-visible {
    outline: 2px solid rgb(var(--section-rgb));
    outline-offset: 2px;
}
html[data-section] .iq-navbar .dropdown-item { color: var(--pyl-text); }
html[data-section] .iq-navbar .dropdown-item:hover,
html[data-section] .iq-navbar .dropdown-item:focus { background: rgba(var(--section-rgb), 0.16); color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar .nav-link, .sidebar .sub-nav { transition: none !important; }
}

/* Libellés du groupe Admin Global : le thème met chaque mot en majuscule (« Vue D'ensemble ») */
html[data-section] #menuGlobalAdmin .item-name { text-transform: none; }

/* Admin Global sur ordinateur : les pages sont des boutons en haut de chaque page de la section, le menu latéral
   n'affiche qu'une entrée (sans sous-liste). Sur mobile, la sous-liste du menu reste la navigation. */
@media (min-width: 1200px) {
    #menuGlobalAdmin, #menuGlobalAdminHome .right-icon { display: none !important; }
}


/* Sélecteur de langue : code de la langue à côté du drapeau, liste sombre avec la langue active marquée */
html[data-section] .pyl-lang-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
html[data-section] .pyl-lang-code { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
html[data-section] .pyl-lang-menu {
    min-width: 11rem;
    padding: 6px;
    background-color: #14161d;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
html[data-section] .pyl-lang-menu .dropdown-item.langSelect {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--pyl-text);
    background: transparent;
}
html[data-section] .pyl-lang-menu .dropdown-item.langSelect:hover,
html[data-section] .pyl-lang-menu .dropdown-item.langSelect:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; }
html[data-section] .pyl-lang-menu .dropdown-item.langSelect.active,
html[data-section] .pyl-lang-menu .dropdown-item.langSelect[aria-current="true"] { background: rgba(var(--section-rgb), 0.2); color: #fff; font-weight: 700; }
html[data-section] .pyl-lang-menu .fi { border-radius: 3px; flex: none; }

/* Pastille de messages non lus (cloche du menu) : l attribut hidden doit gagner sur .badge */
.pyl-msg-badge, .pyl-staff-badge { font-size: 0.65rem; }
.pyl-msg-badge[hidden], .pyl-staff-badge[hidden] { display: none !important; }

/* ---------- Pied de page discret ----------
   La zone principale occupe au moins la hauteur de la fenêtre : le pied de page est repoussé en bas
   quand la page est courte, au lieu de laisser un vide dessous. */
.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.main-content > * { flex-shrink: 0; }
.pyl-footer {
    margin-top: auto;
    padding: 14px 24px;
    border-top: 1px solid var(--pyl-line);
    color: var(--pyl-muted);
    font-size: 0.78rem;
}
.pyl-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
}
.pyl-footer-copy { margin: 0; }
.pyl-footer-copy a { color: inherit; text-decoration: none; }
.pyl-footer-sep { margin: 0 4px; opacity: 0.6; }
.pyl-footer-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; padding: 0; list-style: none; }
.pyl-footer-link {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.pyl-footer-link:hover { color: var(--pyl-text); text-decoration: underline; }
.pyl-footer-link:focus-visible { outline: 2px solid rgb(var(--section-rgb)); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 767.98px) {
    .pyl-footer { padding: 12px 16px; text-align: center; }
    .pyl-footer-inner, .pyl-footer-links { justify-content: center; }
    .pyl-footer-link { min-height: 32px; }
}

/* Alertes SweetAlert2 a fond sombre (#2d2d2d, helpers de SweetAlert2.js) : le theme grisait le titre, peu lisible */
.swal2-popup[style*="45, 45, 45"] .swal2-title { color: #fff !important; }


/* ---------- Fenêtres SweetAlert2 (confirmations, alertes, questions) : thème sombre commun à tout le site ----------
   Même présentation que « Quitter sans enregistrer ? » (pylLeaveSwal.css) : fond sombre, titre à gauche avec filet, boutons à droite.
   Les petites notifications (toasts) ne sont pas touchées ; une couleur de bouton ou de fond donnée par le code de la page reste prioritaire. */
html .swal2-popup:not(.swal2-toast) { width: min(94vw, 560px); padding: 1.4rem 1.5rem 1.2rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; background: #2d2d2d; color: #e8ecf5; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html .swal2-popup:not(.swal2-toast) .swal2-icon { margin: .2rem auto .7rem; transform: scale(.8); transform-origin: center; }
html .swal2-popup:not(.swal2-toast) .swal2-title { justify-content: flex-start; padding: 0 0 .6rem; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 1.3rem; font-weight: 800; text-align: left; color: #fff !important; }
html .swal2-popup:not(.swal2-toast) .swal2-html-container { margin: 1rem 0 0; padding: 0; text-align: left; color: #c9d1e0; font-size: .95rem; line-height: 1.5; }
html .swal2-popup:not(.swal2-toast) .swal2-actions { justify-content: flex-end; gap: 8px; margin: 1.3rem 0 0; width: 100%; }
html .swal2-popup:not(.swal2-toast) .swal2-styled { margin: 0; padding: .55rem 1.2rem; border-radius: 12px; font-weight: 700; box-shadow: none; }
html .swal2-popup:not(.swal2-toast) .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .35) !important; }
html .swal2-popup:not(.swal2-toast) .swal2-input,
html .swal2-popup:not(.swal2-toast) .swal2-textarea,
html .swal2-popup:not(.swal2-toast) .swal2-select { margin: 1rem 0 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; box-shadow: none; }
html .swal2-popup:not(.swal2-toast) .swal2-select option { background: #2d2d2d; color: #fff; }
html .swal2-popup:not(.swal2-toast) .swal2-input::placeholder,
html .swal2-popup:not(.swal2-toast) .swal2-textarea::placeholder { color: rgba(255, 255, 255, .45); }
html .swal2-popup:not(.swal2-toast) .swal2-label,
html .swal2-popup:not(.swal2-toast) .swal2-radio,
html .swal2-popup:not(.swal2-toast) .swal2-checkbox { color: #e8ecf5; }
html .swal2-popup:not(.swal2-toast) .swal2-validation-message { background: rgba(180, 35, 24, .18); color: #fecaca; }
html .swal2-popup:not(.swal2-toast) .swal2-footer { border-top: 1px solid rgba(255, 255, 255, .1); color: #9aa4bd; }
html .swal2-popup:not(.swal2-toast) .swal2-close { color: #9aa4bd; }
html .swal2-popup:not(.swal2-toast) .swal2-close:hover { color: #fff; }
html .swal2-popup:not(.swal2-toast) .swal2-timer-progress-bar { background: rgba(255, 255, 255, .35); }
@media (max-width: 575.98px) {
    html .swal2-popup:not(.swal2-toast) { padding: 1.1rem 1rem 1rem; }
    html .swal2-popup:not(.swal2-toast) .swal2-actions { flex-direction: column-reverse; align-items: stretch; }
    html .swal2-popup:not(.swal2-toast) .swal2-styled { width: 100%; }
}

/* Bouton « retour en haut » centré en bas de l écran : le bouton flottant de confidentialité de Google (bas à droite) ne le recouvre plus. */
#back-to-top .top { right: auto; left: 50%; transform: translateX(-50%); }

/* Blocs de pub : leur contenu (iframe de Google) reste dans son propre empilement (z-index 0, comme le conteneur du pied de page qui est plus bas dans le DOM), donc sous le bouton « retour en haut ». */
.pub-content-inner { position: relative; z-index: 0; isolation: isolate; }