/* Orchestra Maestro — CSS accessible WCAG AAA */
/* Contrastes 7:1 minimum, cibles 44px, focus visible, mobile first */

/* --- OpenDyslexic (auto-heberge, lazy-load natif) --- */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('../fonts/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
html[data-font="dyslexia"] { font-family: 'OpenDyslexic', sans-serif !important; }
html[data-font="dyslexia"] body,
html[data-font="dyslexia"] input,
html[data-font="dyslexia"] select,
html[data-font="dyslexia"] textarea,
html[data-font="dyslexia"] button { font-family: inherit !important; }

:root {
    /* Espace membre dérivé des tokens de marque (tokens.css). Ces variables
       sont théme-conscientes : --encre, --accent-deep… s'adaptent au mode sombre. */
    --couleur-primaire: var(--encre);          /* topbar, titres */
    --couleur-secondaire: var(--accent-deep);  /* liens, accents (saisonnier, AAA) */
    --couleur-accent: var(--accent-deep);
    --couleur-texte: var(--encre);
    --couleur-texte-clair: var(--encre-douce);
    --couleur-fond: var(--creme);
    --couleur-carte: var(--papier);
    --couleur-bordure: var(--ligne);
    --couleur-succes: var(--succes);
    --couleur-erreur: var(--erreur);
    --couleur-focus: var(--focus);
    --rayon: var(--rayon-sm);
    --ombre: var(--ombre-sm);
}

/* Mode sombre — activé par [data-theme="dark"] (script de thème : choix mémorisé
   ou préférence système). Les couleurs membre dérivent déjà des tokens
   théme-conscients ; on surcharge le vert/rouge sémantique + quelques composants. */
:root[data-theme="dark"] {
    --couleur-succes: #6ee7b7;       /* ratio 10.1:1 — AAA */
    --couleur-erreur: #fcbcbc;       /* ratio 8.4:1 sur carte — AAA */
}
/* Badges dark mode — fond sombre + texte clair, memes couleurs semantiques */
[data-theme="dark"] .badge-repetition { background: #0c4a6e; color: #bae6fd; }
[data-theme="dark"] .badge-repetition_partielle { background: #1e3a8a; color: #dbeafe; }
[data-theme="dark"] .badge-tutti { background: #4c1d95; color: #ede9fe; }
[data-theme="dark"] .badge-concert { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .badge-assemblee_generale { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .badge-present { background: #065f46; color: #d1fae5; }
[data-theme="dark"] .badge-absent { background: #7f1d1d; color: #fee2e2; }
[data-theme="dark"] .badge-excuse { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .badge-en_attente { background: #374151; color: #e5e7eb; }
[data-theme="dark"] .badge-success { background: #065f46; color: #d1fae5; }
[data-theme="dark"] .badge-warning { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .badge-orchestre { background: #0c4a6e; color: #bae6fd; }
[data-theme="dark"] .badge-bureau { background: #4c1d95; color: #ede9fe; }
[data-theme="dark"] .badge-technique { background: #78350f; color: #fef3c7; }
[data-theme="dark"] .badge-pmr { background: #0c4a6e; color: #bae6fd; }
[data-theme="dark"] .badge-capacite { background: #374151; color: #e5e7eb; }
/* Alertes dark mode */
[data-theme="dark"] .alert-success { background: #064e3b; border-color: #6ee7b7; color: #6ee7b7; }
[data-theme="dark"] .alert-error { background: #450a0a; border-color: #fcbcbc; color: #fcbcbc; }
/* Footer admin dark */
[data-theme="dark"] .footer-main { background: var(--couleur-carte); border-color: var(--couleur-bordure); }
[data-theme="dark"] .footer-main a { color: var(--couleur-secondaire); }
/* Bouton primary : accent-profond est stable (sombre) → blanc lisible. */
[data-theme="dark"] .btn-primary { background: var(--accent-profond); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #000; color: #fff; }

/* Animations reduites */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Contraste accru (utilisateurs avec trouble de la vision) */
@media (prefers-contrast: more) {
    :root {
        --couleur-primaire: #000;
        --couleur-secondaire: #000;
        --couleur-texte: #000;
        --couleur-texte-clair: #000;
        --couleur-bordure: #000;
        --couleur-focus: #000;
    }
    :root[data-theme="dark"] {
        --couleur-primaire: #fff;
        --couleur-secondaire: #fff;
        --couleur-texte: #fff;
        --couleur-texte-clair: #fff;
        --couleur-bordure: #fff;
        --couleur-focus: #fff;
    }
    *:focus-visible {
        outline-width: 4px !important;
    }
    .badge, .btn, input, select, textarea, fieldset, .card {
        border-width: 2px !important;
    }
}

/* Reset minimal */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-family: var(--font-corps, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--couleur-texte);
    background: var(--couleur-fond);
    line-height: 1.6;
    font-size: 1rem;
}

/* Titres en Fraunces (charte Erato) — l'override dyslexie reste prioritaire */
h1, h2, h3, .admin-brand, .pub-section-label {
    font-family: var(--font-titre, Georgia, serif);
}

/* Couleur de lien par défaut = accent saisonnier (AAA). Les composants qui
   fixent leur propre couleur (nav, boutons) ne sont pas affectés. */
a { color: var(--couleur-secondaire); }

/* Bouton bascule de thème */
[data-theme-toggle] .theme-toggle-icon { margin-inline-end: 0.35rem; }
/* En topbar membre : icône seule (libellé en sr-only) → pas de marge */
.admin-topbar-btn[data-theme-toggle] .theme-toggle-icon { margin-inline-end: 0; font-size: 1.1rem; }

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    /* --couleur-primaire derive de --encre, qui s'inverse avec le theme :
       associe a un #fff fixe, le lien devenait blanc sur clair (1,17:1) en
       mode sombre. Les tokens panneau, eux, ne s'inversent pas. */
    background: var(--panneau);
    color: var(--panneau-texte);
    padding: 0.75rem 1.5rem;
    z-index: 1000;
    border-radius: 0 0 var(--rayon) var(--rayon);
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* Focus visible — AAA exige un indicateur visible fort */
*:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 3px;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* Navigation */
.nav-main {
    background: var(--couleur-primaire);
    color: #fff;
    padding: 0 1rem;
}
.nav-inner {
    max-width: 75rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.5rem;
    flex-wrap: wrap;
}
.nav-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
}
.nav-links {
    display: flex;
    gap: 0.25rem;
}
.nav-links a {
    color: #fff;
    text-decoration: none;
    padding: 0.75rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--rayon);
}
.nav-links a:hover {
    background: rgba(255, 255, 255, 0.15);
}
.nav-user {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-username {
    font-size: 0.875rem;
    opacity: 0.85;
}
.nav-logout button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    min-width: 44px;
}
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
}

/* Container */
.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Alertes */
.alert {
    padding: 1rem;
    border-radius: var(--rayon);
    margin-bottom: 1.5rem;
    border-left: 4px solid;
}
.alert-success {
    background: #ecfdf5;
    border-color: var(--couleur-succes);
    color: var(--couleur-succes);
}
.alert-error {
    background: #fef2f2;
    border-color: var(--couleur-erreur);
    color: var(--couleur-erreur);
}

/* Titres */
h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--couleur-primaire);
}
h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
}

/* Formulaires */
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--couleur-texte);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-size: 1rem;
    min-height: 44px;
    background: var(--couleur-carte);
    color: var(--couleur-texte);
}
/* Cette regle (specificite 0-2-1) l'emportait sur le *:focus-visible global
   (0-1-0) et son `outline: none` supprimait l'anneau sur TOUS les champs du
   produit. Le halo bleu en dur etait un vestige de la palette d'avant les
   tokens, quasi invisible sur creme. L'anneau vient desormais en renfort de
   la bordure au lieu de s'y substituer. */
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    border-color: var(--couleur-focus);
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}

/* Boutons — cible minimum 44px */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--rayon);
    cursor: pointer;
    text-decoration: none;
}
.btn-primary {
    background: var(--accent-profond);
    color: #fff;
}
.btn-primary:hover {
    background: var(--panneau);
    color: #fff;
}

/* Auth form */
.auth-form {
    max-width: 28rem;
    margin: 2rem auto;
    background: var(--couleur-carte);
    padding: 2rem;
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* Footer */
.footer-main {
    background: var(--couleur-carte);
    border-top: 1px solid var(--couleur-bordure);
    padding: 1.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--couleur-texte-clair);
    margin-top: auto;
}
.footer-main a {
    color: var(--couleur-secondaire);
    text-decoration: underline;
}
.app-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================================================
   ADMIN LAYOUT — Sidebar + Topbar
   ========================================================================== */

.admin-layout { min-height: 100vh; display: flex; flex-direction: column; }

/* Topbar */
.admin-topbar {
    /* Surface porteuse de texte : --accent-profond reste sombre dans les
       deux modes (contrairement à --encre qui s'inverse en sombre et
       rendait le bandeau crème avec texte blanc — inaccessible). Suit la
       charte de l'ensemble via [data-theme-ensemble] (bronze pour Kopar). */
    background: var(--accent-profond);
    color: var(--sur-accent-profond);
    height: 3.25rem;
    position: sticky;
    top: 0;
    z-index: 100;
}
.admin-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 1rem;
}
.admin-topbar-left { display: flex; align-items: center; gap: 0.75rem; }
.admin-topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.admin-brand {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}
.admin-orchestre {
    font-size: 0.8rem;
    /* AAA sur --accent-profond (pas d'opacité : elle diluait le contraste) */
    color: #F1ECE2;
    display: none;
}
@media (min-width: 768px) {
    .admin-orchestre { display: inline; }
}
.admin-topbar-btn {
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.85rem;
    border-radius: var(--rayon);
}
.admin-topbar-btn:hover { background: rgba(255, 255, 255, 0.15); }

/* La barre du haut est peinte en --accent-profond et l'anneau de focus en
   --accent-deep, or les deux tokens portent la MEME valeur dans chaque theme :
   l'anneau etait invisible (1,00:1) sur les 13 themes en mode clair. Le blanc
   contraste de 8,48:1 a 12,63:1 sur ces memes fonds. */
.admin-topbar :focus-visible {
    outline: 3px solid var(--sur-accent-profond);
    outline-offset: 2px;
}
@media (prefers-contrast: more) {
    .admin-topbar :focus-visible { outline-width: 4px; }
}
.admin-sidebar-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Body = sidebar + main */
.admin-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Sidebar */
.admin-sidebar {
    width: 15rem;
    background: var(--couleur-carte);
    border-right: 1px solid var(--couleur-bordure);
    overflow-y: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    position: sticky;
    top: 3.25rem;
    height: calc(100vh - 3.25rem);
    transition: width 0.2s, padding 0.2s;
}
.sidebar-collapsed .admin-sidebar {
    width: 0;
    padding: 0;
    overflow: hidden;
    /* Sans ceci, les 15 a 25 liens replies restent tabulables. */
    visibility: hidden;
    border-right: none;
}

/* Sections sidebar */
.sidebar-section {
    padding: 0.5rem 0;
}
.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--couleur-bordure);
}
.sidebar-heading {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--couleur-texte-clair);
    padding: 0.5rem 1.25rem 0.25rem;
    margin: 0;
    font-weight: 700;
}

/* Liens sidebar */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1.25rem;
    color: var(--couleur-texte);
    text-decoration: none;
    font-size: 0.875rem;
    min-height: 44px;
    transition: background 0.15s, color 0.15s;
}
.sidebar-link:hover {
    background: var(--couleur-fond);
    color: var(--couleur-primaire);
}
.sidebar-link.active {
    background: var(--couleur-fond);
    color: var(--couleur-primaire);
    font-weight: 600;
    border-right: 3px solid var(--couleur-primaire);
}
.sidebar-icon {
    width: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sidebar-link-small {
    font-size: 0.8rem;
    color: var(--couleur-texte-clair);
    min-height: 44px;
}
.sidebar-section-bottom {
    margin-top: auto;
    border-top: 1px solid var(--couleur-bordure);
    padding-top: 0.75rem;
}

/* Main content */
.admin-main {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}
.admin-content {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Mobile : sidebar overlay */
@media (max-width: 768px) {
    .admin-sidebar {
        position: fixed;
        top: 3.25rem;
        left: 0;
        z-index: 90;
        height: calc(100vh - 3.25rem);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        width: 16rem;
    }
    /* Sur mobile l'etat est porte par .sidebar-ouverte (ferme par defaut).
       Auparavant les deux etats donnaient width:0 : le bouton du menu ne
       produisait aucun effet et toute l'administration etait hors d'atteinte
       sur telephone. */
    body:not(.sidebar-ouverte) .admin-sidebar {
        width: 0;
        padding: 0;
        overflow: hidden;
        visibility: hidden;
    }
}

/* Ancien nav-main cache dans le layout admin */
.admin-layout .nav-main { display: none; }
.nav-profile-link {
    color: #fff;
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.5rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.nav-profile-link:hover { text-decoration: underline; }

/* Nav wrap pour beaucoup de liens */
.nav-links { flex-wrap: wrap; }

/* Responsive */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
    }
    .nav-links.nav-open {
        display: flex;
    }
    .nav-separator { display: none; }
    .nav-separator-mobile { display: block; height: 1px; width: 100%; background: rgba(255, 255, 255, 0.15); margin: 0.5rem 0; }
    .nav-mobile-only { display: flex !important; }
    .nav-user {
        order: -1;
        width: 100%;
        padding: 0.5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        margin-bottom: 0.5rem;
    }
}

/* Page header (titre + bouton) */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header h1 { margin-bottom: 0; }

/* Cartes grille */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}
.card {
    background: var(--couleur-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1.25rem;
    box-shadow: var(--ombre);
}
.card h2, .card h3 { margin-top: 0; }
.card a { color: var(--couleur-secondaire); text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* Evenements liste */
.events-list { display: flex; flex-direction: column; gap: 0.75rem; }
.event-card {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--couleur-fond);
    padding: 0.5rem 0.75rem;
    border-radius: var(--rayon);
    min-width: 3.5rem;
}
.event-day { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.event-month { font-size: 0.75rem; text-transform: uppercase; color: var(--couleur-texte-clair); }
.event-info { flex: 1; }
.event-info h2 { font-size: 1.1rem; margin: 0 0 0.25rem; }

/* Badges */
.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}
.badge-repetition { background: #e0f2fe; color: #0c4a6e; }
.badge-repetition_partielle { background: #dbeafe; color: #1e3a8a; }
.badge-tutti { background: #ede9fe; color: #4c1d95; }
.badge-concert { background: #fef3c7; color: #78350f; }
.badge-assemblee_generale { background: #e5e7eb; color: #1f2937; }
.badge-present { background: #d1fae5; color: #065f46; }
.badge-absent { background: #fee2e2; color: #991b1b; }
.badge-excuse { background: #fef3c7; color: #78350f; }
.badge-en_attente { background: #e5e7eb; color: #374151; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #78350f; }
.badge-orchestre { background: #e0f2fe; color: #0c4a6e; }
.badge-bureau { background: #ede9fe; color: #4c1d95; }

/* Liens externes partitions */
.lien-externe-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.lien-externe-row select,
.lien-externe-row input[type="url"],
.lien-externe-row input[type="text"] {
    flex: 1 1 10rem;
    min-width: 0;
}
.btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.9rem;
    min-height: 44px;
}
.liens-externes-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.liens-externes-list li {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.4rem 0;
}
.badge-plateforme {
    min-width: 6rem;
    text-align: center;
}
.badge-plateforme-imslp { background: #fee2e2; color: #7f1d1d; }
.badge-plateforme-musescore { background: #d1fae5; color: #065f46; }
.badge-plateforme-free_scores { background: #dbeafe; color: #1e3a8a; }
.badge-plateforme-openscore { background: #ede9fe; color: #4c1d95; }
.badge-plateforme-youtube { background: #fee2e2; color: #991b1b; }
.badge-plateforme-spotify { background: #d1fae5; color: #065f46; }
.badge-plateforme-autre { background: #e5e7eb; color: #1f2937; }

/* Trombinoscope */
.trombinoscope-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
}
.trombinoscope-card {
    padding: 1rem;
    text-align: center;
}
.trombinoscope-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    min-height: 11rem;
}
.trombinoscope-link:hover,
.trombinoscope-link:focus-visible {
    text-decoration: none;
}
.trombinoscope-photo {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    object-fit: cover;
    background: #e5e7eb;
}
.trombinoscope-initiales {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: #0c4a6e;
    color: #e0f2fe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.trombinoscope-nom {
    font-size: 1rem;
    line-height: 1.2;
}
.trombinoscope-pupitre {
    font-size: 0.85rem;
    /* --couleur-texte-secondaire n'est declaree nulle part : le repli gris
       s'appliquait toujours (3,49:1 sur carte sombre). --couleur-texte-clair
       existe et donne 9,76:1 en clair, 9,31:1 en sombre. */
    color: var(--couleur-texte-clair);
}
[data-theme="dark"] .trombinoscope-initiales { background: #0c4a6e; color: #bae6fd; }
[data-theme="dark"] .trombinoscope-photo { background: #374151; }

/* CMS hybride : bannieres admin + rendu contenu */
.cms-banniere-apercu,
.cms-banniere-override {
    padding: 0.75rem 1.25rem;
    border-radius: 4px;
    margin: 1rem auto;
    max-width: 72rem;
    font-size: 0.95rem;
}
.cms-banniere-apercu {
    background: #fef3c7;
    color: #78350f;
    border-left: 4px solid #d97706;
}
.cms-banniere-override {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #059669;
}
.cms-banniere-apercu a,
.cms-banniere-override a {
    margin-left: 0.5rem;
    font-weight: 600;
}
.pub-contenu-cms {
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.7;
}
.pub-contenu-cms h2,
.pub-contenu-cms h3 {
    margin-top: 2rem;
}
.pub-contenu-cms p { margin: 1rem 0; }
.pub-contenu-cms ul,
.pub-contenu-cms ol { margin: 1rem 0; padding-left: 1.5rem; }
.pub-contenu-cms blockquote {
    border-left: 4px solid #9ca3af;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
}
.pub-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

/* Lieux habituels (creneau recurrent) */
.card-habituel,
.card-habituel-inline {
    border-left: 4px solid #7c3aed;
}
.badge-habituel {
    background: #ede9fe;
    color: #4c1d95;
    font-weight: 600;
}
[data-theme="dark"] .badge-habituel { background: #4c1d95; color: #ede9fe; }
[data-theme="dark"] .card-habituel,
[data-theme="dark"] .card-habituel-inline { border-left-color: #a78bfa; }
.lieu-creneau {
    margin: 0.5rem 0;
}

/* Carte OpenStreetMap (click-to-load) */
.carte-osm {
    margin-top: 1.25rem;
}
.carte-osm-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.carte-osm-toggle {
    align-self: flex-start;
}
.carte-osm-aide {
    font-size: 0.85rem;
    margin: 0;
}
.carte-osm-conteneur {
    width: 100%;
    height: var(--carte-hauteur, 20rem);
    min-height: 15rem;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--couleur-bordure, #e5e7eb);
}
.carte-osm-conteneur:focus-visible {
    outline: 3px solid var(--couleur-focus, #2563eb);
    outline-offset: 2px;
}
.carte-osm-lien {
    margin-top: 0.5rem;
}
@media (prefers-reduced-motion: reduce) {
    .carte-osm-conteneur .leaflet-tile,
    .carte-osm-conteneur .leaflet-marker-icon,
    .carte-osm-conteneur .leaflet-zoom-animated {
        animation: none !important;
        transition: none !important;
    }
}
.badge-technique { background: #fef3c7; color: #78350f; }
.badge-pmr { background: #e0f2fe; color: #0c4a6e; display: inline-flex; align-items: center; gap: 0.35rem; }
.badge-capacite { background: #f3f4f6; color: #1f2937; display: inline-flex; align-items: center; gap: 0.35rem; }

/* Liste meta sur une carte (horizontale, sans puces) */
.lieu-meta {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Label + checkbox cliquable (AAA target 44px) */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    cursor: pointer;
}

/* Modale "S'abonner au calendrier" */
dialog.ical-modal {
    width: min(560px, 94vw);
    max-height: 90vh;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 0;
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
dialog.ical-modal::backdrop { background: rgba(0, 0, 0, 0.6); }
.ical-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--couleur-bordure);
    margin: 0;
}
.ical-modal__header h2 { margin: 0; font-size: 1.25rem; }
.ical-modal__close {
    background: none;
    border: 2px solid transparent;
    color: var(--couleur-texte);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--rayon);
}
.ical-modal__close:hover,
.ical-modal__close:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}
.ical-modal__body {
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 4.5rem);
}
.ical-modal__body section { margin-top: 1.25rem; }
.ical-modal__body section:first-of-type { margin-top: 1rem; }
.ical-modal__body h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.ical-modal__copy-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: stretch;
}
.ical-modal__copy-row input {
    flex: 1;
    min-width: 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}
.ical-modal__feedback {
    min-height: 1.25rem;
    color: var(--couleur-succes);
    font-weight: 600;
    margin-top: 0.5rem;
}
.ical-modal__warning {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background: #fef3c7;
    color: #78350f;
    border-left: 4px solid #8f4107;
    padding: 0.75rem 1rem;
    border-radius: var(--rayon);
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
}
.ical-modal__warning strong { color: inherit; }
.ical-modal__warning > span[aria-hidden] { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
[data-theme="dark"] .ical-modal__warning {
    background: #78350f;
    color: #fef3c7;
    border-left-color: #fbbf24;
}
.ical-modal__alternatives { margin-top: 1.5rem; }
.ical-modal__alternatives > summary {
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.ical-modal__alternatives > summary:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
    border-radius: var(--rayon);
}
.badge-recommended {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: var(--couleur-succes);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 0.25rem;
}
[data-theme="dark"] .badge-recommended { background: #065f46; color: #d1fae5; }

/* Barre d'outils d'editeur (bouton inserer media, etc.) */
.editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Selecteur de media (modale <dialog>) */
dialog.media-picker {
    width: min(1000px, 96vw);
    max-height: 90vh;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 0;
    background: var(--couleur-carte);
    color: var(--couleur-texte);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
dialog.media-picker::backdrop { background: rgba(0, 0, 0, 0.6); }
.media-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--couleur-bordure);
    margin: 0;
}
.media-picker__header h2 { margin: 0; font-size: 1.25rem; }
.media-picker__close {
    background: none;
    border: 2px solid transparent;
    color: var(--couleur-texte);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    border-radius: var(--rayon);
}
.media-picker__close:hover,
.media-picker__close:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}
.media-picker__body {
    padding: 1rem 1.25rem 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 4.5rem);
}
.media-picker__controls {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.media-picker__search {
    flex: 1;
    min-width: 200px;
}
.media-picker__status {
    padding: 0.5rem 0;
    color: var(--couleur-texte-clair);
    font-size: 0.9rem;
    min-height: 1.5rem;
}
.media-picker__grid {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.media-picker__item-btn {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    background: var(--couleur-fond);
    border: 2px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    cursor: pointer;
    overflow: hidden;
    min-height: 44px;
    color: var(--couleur-texte);
    font: inherit;
}
.media-picker__item-btn:hover,
.media-picker__item-btn:focus-visible {
    border-color: var(--couleur-primaire);
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}
.media-picker__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--couleur-bordure);
}
.media-picker__name {
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    word-break: break-word;
    text-align: left;
}
.media-picker__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.media-picker__page-info { color: var(--couleur-texte-clair); font-size: 0.9rem; }
.media-picker__sep { margin: 1.5rem 0 0.5rem; border: 0; border-top: 1px solid var(--couleur-bordure); }
.media-picker__upload { margin-top: 0.5rem; }
.media-picker__upload summary {
    cursor: pointer;
    padding: 0.5rem 0;
    font-weight: 600;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.media-picker__upload-form { margin-top: 0.75rem; }

/* Grille de cases a cocher (instruments secondaires, filtres) */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.checkbox-grid .checkbox-label {
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--couleur-carte);
}
.checkbox-grid .checkbox-label:has(input:checked) {
    border-color: var(--couleur-primaire);
    background: var(--couleur-fond);
}

/* Fieldset imbrique */
fieldset.nested-fieldset {
    margin-top: 1rem;
    background: var(--couleur-fond);
}

/* Fieldset */
fieldset {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.25rem;
    background: var(--couleur-carte);
}
fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--couleur-texte);
}

/* Filtres */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-tag {
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    text-decoration: none;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    border: 2px solid var(--couleur-bordure);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
/* --accent-profond reste sombre dans les deux themes : le blanc y tient de
   8,48:1 a 12,63:1. L'etat actif garde le fond profond, le survol prend une
   teinte douce pour rester distinguable de l'actif. */
.filter-tag.active { background: var(--accent-profond); color: #fff; border-color: var(--accent-profond); }
.filter-tag:hover { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-deep); }
.filter-tag.active:hover { background: var(--accent-profond); color: #fff; }

/* Tableaux */
table { width: 100%; border-collapse: collapse; background: var(--couleur-carte); }
table th, table td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--couleur-bordure); }
table th { background: var(--couleur-fond); font-weight: 600; font-size: 0.875rem; color: var(--couleur-texte-clair); }
.table-responsive { overflow-x: auto; border-radius: var(--rayon); border: 1px solid var(--couleur-bordure); }

/* Fil d'Ariane (breadcrumb) */
.breadcrumb {
    padding: 0.75rem 0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.breadcrumb__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    margin: 0;
}
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
}
.breadcrumb__item a {
    color: var(--couleur-secondaire);
    text-decoration: underline;
    padding: 0.25rem 0;
}
.breadcrumb__item a:hover { color: var(--couleur-primaire); }
.breadcrumb__item a:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
    border-radius: 2px;
}
.breadcrumb__item [aria-current="page"] {
    font-weight: 600;
    color: var(--couleur-texte);
}
.breadcrumb__separator {
    margin: 0 0.5rem;
    color: var(--couleur-texte-clair);
}

/* Details (dl/dt/dd) */
.details-list { margin: 1rem 0; }
.details-list > div { display: flex; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.details-list dt { font-weight: 600; color: var(--couleur-texte-clair); min-width: 7rem; }

/* Formulaires supplementaires */
.form-card { max-width: 40rem; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 10rem; }
.form-actions { display: flex; gap: 1rem; justify-content: flex-end; margin-top: 1.5rem; }
.form-error { color: var(--couleur-erreur); font-size: 0.875rem; margin-top: 0.25rem; }

/* ---- Champ mot de passe : bouton afficher/masquer + regles en direct ---- */
.mdp-champ { position: relative; }
.mdp-champ input { padding-right: 3.25rem; }
.mdp-toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    width: 2.75rem;   /* cible tactile 44px */
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--rayon);
    color: var(--couleur-texte-clair);
    cursor: pointer;
}
.mdp-toggle:hover { color: var(--couleur-texte); }
.mdp-toggle:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
    color: var(--couleur-texte);
}
.mdp-toggle .mdp-ico-cacher { display: none; }
.mdp-toggle.est-visible .mdp-ico-voir { display: none; }
.mdp-toggle.est-visible .mdp-ico-cacher { display: block; }
.mdp-regles {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--couleur-texte-clair);
}
.mdp-regles li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.125rem 0; }
.mdp-regles li.est-ok { color: var(--couleur-succes); }
.mdp-regle-etat { display: inline-block; min-width: 1rem; text-align: center; font-weight: 700; }
.btn-secondary { background: var(--couleur-fond); color: var(--couleur-texte); border: 2px solid var(--couleur-bordure); }
.btn-secondary:hover { background: var(--couleur-bordure); }
.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.875rem; min-height: 44px; }
.btn-danger { background: #fee2e2; color: #991b1b; }
.btn-danger:hover { background: #fecaca; }
[data-theme="dark"] .btn-danger { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .btn-danger:hover { background: #7f1d1d; }

/* Presences */
.presence-choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.presence-option { cursor: pointer; }
.presence-label {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    font-weight: 600;
    min-height: 44px;
    min-width: 44px;
}
input:checked + .presence-present { background: #d1fae5; border-color: #065f46; color: #065f46; }
input:checked + .presence-absent { background: #fee2e2; border-color: #991b1b; color: #991b1b; }
input:checked + .presence-excuse { background: #fef3c7; border-color: #78350f; color: #78350f; }
input:focus-visible + .presence-label { outline: 3px solid var(--couleur-focus); outline-offset: 2px; }

/* Breadcrumb */
.breadcrumb { font-size: 0.875rem; color: var(--couleur-texte-clair); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--couleur-secondaire); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Recherche */
.search-bar { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.search-bar input { flex: 1; }

/* Liste simple */
.list-simple { list-style: none; padding: 0; }
.list-simple li { padding: 0.5rem 0; border-bottom: 1px solid var(--couleur-bordure); }
.list-simple a { color: var(--couleur-secondaire); text-decoration: none; }
.list-simple a:hover { text-decoration: underline; }

/* Texte utilitaire */
.text-light { color: var(--couleur-texte-clair); font-size: 0.875rem; }
.text-center { text-align: center; }

/* Pagination */
.pagination-wrapper { margin: 2rem 0; text-align: center; }
.pagination-wrapper nav a, .pagination-wrapper nav span {
    display: inline-block;
    padding: 0.5rem 1rem;
    margin: 0 0.125rem;
    border-radius: 4px;
    text-decoration: none;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Map (legacy — remplace par lien OSM) */
.map-container { height: 300px; width: 100%; border-radius: var(--rayon); border: 1px solid var(--couleur-bordure); margin-top: 1rem; }

/* ==========================================================================
   SITE PUBLIC — CONCERT HALL EDITORIAL
   Esthetique : elegance de salle de concert, tons profonds, accents dores.
   Contrastes AAA 7:1 maintenus sur tous les textes.
   ========================================================================== */

/* --- Palette publique --- */
.public-site {
    --pub-noir: #0c0e14;
    --pub-nuit: #141824;
    --pub-ardoise: #1e2433;
    --pub-or: #d4a64a;          /* or chaud — ratio 7.3:1 sur noir, 6.7:1 sur nuit */
    --pub-or-clair: #e2c172;    /* or clair — ratio 10.2:1 sur noir */
    --pub-or-sombre: #8b6914;   /* or fonce — ratio 7.5:1 sur creme */
    --pub-creme: #f5f0e8;       /* ratio 15.7:1 sur noir */
    --pub-blanc: #faf8f4;
    --pub-texte: #1a1a1a;       /* ratio 17.1:1 sur blanc */
    --pub-texte-doux: #3d3838;  /* ratio 9.8:1 sur blanc — AAA */
    --pub-texte-clair-sur-sombre: #d0cbc3; /* ratio 10.5:1 sur noir — remplace les rgba */
    --pub-gris: #555050;        /* ratio 7.1:1 sur blanc — AAA */
}

/* --- Navigation publique --- */
.public-site .nav-main {
    background: var(--pub-noir);
    border-bottom: 1px solid rgba(201, 149, 60, 0.2);
    padding: 0 1.5rem;
}
.public-site .nav-inner {
    min-height: 4.5rem;
    padding: 0.5rem 0;
}
.public-site .nav-brand {
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
}
.public-site .nav-links {
    align-items: center;
}
.public-site .nav-links a {
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0.75rem 0.875rem;
    transition: color 0.2s;
    white-space: nowrap;
}
.public-site .nav-links a:hover,
.public-site .nav-links a[aria-current="page"] {
    background: transparent;
    color: var(--pub-or-clair);
}
.public-site .nav-links .btn-primary {
    background: var(--pub-or);
    color: var(--pub-noir);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 2px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
}
.public-site .nav-links .btn-primary:hover {
    background: var(--pub-or-clair);
}

/* --- Hero (accueil) --- */
.pub-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin: 0;
    padding: 4rem 1rem;
}
.pub-hero-bg {
    position: absolute;
    inset: 0;
    background: var(--pub-nuit);
    z-index: 0;
}
.pub-hero-bg .img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}
.pub-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(12, 14, 20, 0.75) 0%,
        rgba(12, 14, 20, 0.55) 40%,
        rgba(12, 14, 20, 0.90) 100%
    );
    z-index: 1;
}
.pub-hero-content {
    position: relative;
    z-index: 2;
    max-width: 52rem;
}
.pub-hero-label {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pub-or);
    border: 2px solid var(--pub-or);
    padding: 0.5rem 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.pub-hero h1 {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 300;
    color: var(--pub-creme);
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 14px rgba(10, 12, 20, 0.75);
}
.pub-hero h1 strong {
    font-weight: 700;
}
.pub-hero-tagline {
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    color: var(--pub-texte-clair-sur-sombre);
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(10, 12, 20, 0.7);
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}
.pub-hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Boutons publics --- */
.btn-pub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 2rem;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
}
.btn-pub-primary {
    background: var(--pub-or);
    color: var(--pub-noir);
}
.btn-pub-primary:hover {
    background: var(--pub-or-clair);
}
.btn-pub-outline {
    background: transparent;
    color: var(--pub-creme);
    border: 2px solid var(--pub-creme);
}
.btn-pub-outline:hover {
    border-color: var(--pub-or-clair);
    color: var(--pub-or-clair);
    background: rgba(212, 166, 74, 0.1);
}
.btn-pub-dark {
    background: var(--pub-nuit);
    color: var(--pub-creme);
    border: 2px solid var(--pub-or);
}
.btn-pub-dark:hover {
    border-color: var(--pub-or-clair);
    color: var(--pub-or-clair);
}

/* --- Image placeholders --- */
.img-placeholder {
    background: var(--pub-ardoise);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pub-texte-clair-sur-sombre);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
}
.img-placeholder::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(201, 149, 60, 0.08) 0%, transparent 60%);
}

/* --- Sections publiques --- */
.pub-section {
    padding: 5rem 1.5rem;
}
.pub-section-inner {
    max-width: 72rem;
    margin: 0 auto;
}
.pub-section-dark {
    background: var(--pub-nuit);
    color: var(--pub-creme);
}
.pub-section-warm {
    background: var(--pub-blanc);
    color: var(--pub-texte);
}
.pub-section-cream {
    background: var(--pub-creme);
    color: var(--pub-texte);
}
.pub-section-label {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pub-or);
    margin-bottom: 0.75rem;
    font-weight: 700;
}
.pub-section h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 300;
    margin: 0 0 1.5rem;
    line-height: 1.2;
}
.pub-section h2 strong {
    font-weight: 700;
}
.pub-section-dark h2 {
    color: var(--pub-creme);
}
.pub-section p {
    line-height: 1.8;
    max-width: 40rem;
}
.pub-section-dark p {
    color: var(--pub-texte-clair-sur-sombre);
}

/* --- Grille editoriale --- */
.pub-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 768px) {
    .pub-grid-2 {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}
.pub-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .pub-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Cartes publiques --- */
.pub-card {
    background: var(--pub-blanc);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 2rem;
    transition: transform 0.3s, box-shadow 0.3s;
}
.pub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.pub-card-dark {
    background: var(--pub-ardoise);
    border: 1px solid rgba(201, 149, 60, 0.12);
}
.pub-card-dark:hover {
    border-color: rgba(201, 149, 60, 0.3);
}
.pub-card-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(201, 149, 60, 0.1);
    color: var(--pub-or);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}
.pub-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.pub-card-dark h3 {
    color: var(--pub-creme);
}
.pub-card p {
    font-size: 0.95rem;
    line-height: 1.7;
}
.pub-card-dark p {
    color: var(--pub-texte-clair-sur-sombre);
}

/* --- Concerts a venir --- */
.pub-concert-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(201, 149, 60, 0.15);
    align-items: flex-start;
}
.pub-concert-date {
    text-align: center;
    min-width: 4.5rem;
    padding: 0.75rem;
    background: rgba(201, 149, 60, 0.1);
}
.pub-concert-day {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pub-or);
}
.pub-concert-month {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.25rem;
    color: var(--pub-texte-clair-sur-sombre);
}
.pub-concert-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    color: var(--pub-creme);
}
.pub-concert-meta {
    font-size: 0.875rem;
    color: var(--pub-texte-clair-sur-sombre);
}

/* --- Citation / blockquote --- */
.pub-quote {
    position: relative;
    padding: 2.5rem 2rem;
    margin: 2rem 0;
    border-left: 3px solid var(--pub-or);
    background: rgba(201, 149, 60, 0.04);
}
.pub-quote p {
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    max-width: 100%;
}
.pub-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--pub-or);
    letter-spacing: 0.06em;
}

/* --- Page header interieur --- */
.pub-page-hero {
    position: relative;
    padding: 6rem 1.5rem 4rem;
    text-align: center;
    background: var(--pub-nuit);
    margin: 0;
    overflow: hidden;
    min-height: clamp(18rem, 36vh, 28rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Overlay d assombrissement garanti au-dessus de l image hero CMS
   pour preserver le contraste AAA du titre clair (accessibilite).
   Ratio calcule : sur image 100% blanche, composite ~#45464C,
   crème sur ce composite = 7.8:1 → AAA sur texte large. */
.pub-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 12, 20, 0.70) 0%,
        rgba(10, 12, 20, 0.85) 100%
    );
    z-index: 0;
    pointer-events: none;
}
.pub-page-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pub-or), transparent);
    z-index: 2;
}
.pub-page-hero .img-placeholder,
.pub-page-hero .pub-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.pub-page-hero .img-placeholder {
    opacity: 0.15;
}
.pub-page-hero .pub-hero-img {
    object-fit: cover;
}
.pub-page-hero-content {
    position: relative;
    z-index: 1;
}
.pub-page-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 300;
    color: var(--pub-creme);
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(10, 12, 20, 0.75);
}
.pub-page-hero-subtitle {
    font-size: 1.1rem;
    color: var(--pub-texte-clair-sur-sombre);
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(10, 12, 20, 0.65);
}

/* --- Portrait Chef --- */
.pub-portrait {
    position: relative;
}
.pub-portrait .img-placeholder {
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: 24rem;
}
.pub-portrait-caption {
    margin-top: 1rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-gris);
}

/* --- Actualites grille --- */
.pub-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}
@media (min-width: 768px) {
    .pub-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.pub-news-card {
    background: var(--pub-blanc);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}
.pub-news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.pub-news-card .img-placeholder,
.pub-news-img {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.pub-news-img {
    display: block;
    object-fit: cover;
}

/* --- Galerie photo --- */
.pub-galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 768px) {
    .pub-galerie {
        grid-template-columns: repeat(4, 1fr);
    }
}
.pub-galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.pub-galerie-credit {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--pub-texte-doux);
}
.pub-news-body {
    padding: 1.5rem 2rem 2rem;
}
.pub-news-date {
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pub-or);
    margin-bottom: 0.5rem;
}
.pub-news-card h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--pub-texte);
}
.pub-news-card p {
    color: var(--pub-texte-doux);
    line-height: 1.7;
    max-width: 100%;
}

/* --- CTA band --- */
.pub-cta {
    text-align: center;
    padding: 5rem 1.5rem;
    background: var(--pub-noir);
    position: relative;
    overflow: hidden;
}
.pub-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pub-or), transparent);
}
.pub-cta h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 300;
    color: var(--pub-creme);
    margin-bottom: 1rem;
}
.pub-cta p {
    color: var(--pub-texte-clair-sur-sombre);
    margin: 0 auto 2rem;
}

/* --- Footer public --- */
.public-site .footer-main {
    background: var(--pub-noir);
    border-top: 1px solid rgba(201, 149, 60, 0.15);
    color: var(--pub-texte-clair-sur-sombre);
    text-align: left;
    padding: 4rem 1.5rem 2rem;
}
.public-site .footer-main h3 {
    color: var(--pub-creme);
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1rem;
}
.public-site .footer-main a {
    color: var(--pub-texte-clair-sur-sombre);
    text-decoration: none;
    transition: color 0.2s;
}
.public-site .footer-main a:hover {
    color: var(--pub-or);
    text-decoration: none;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.footer-links-list { list-style: none; padding: 0; margin: 0; }
.footer-links-list li { margin-bottom: 0.5rem; }
.footer-links-list a { font-size: 0.9rem; }
.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(245, 240, 232, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8rem;
}
.btn-text { background: none; border: none; color: var(--pub-texte-clair-sur-sombre); cursor: pointer; font-size: 0.8rem; padding: 0; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.btn-text:hover { color: var(--pub-or); }

/* --- Separateur dore --- */
.pub-divider {
    width: 3rem;
    height: 1px;
    background: var(--pub-or);
    border: none;
    margin: 1.5rem 0;
}

/* --- Animation apparition --- */
@keyframes pub-fade-up {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}
.pub-animate {
    animation: pub-fade-up 0.7s ease-out both;
}
.pub-animate-d1 { animation-delay: 0.1s; }
.pub-animate-d2 { animation-delay: 0.2s; }
.pub-animate-d3 { animation-delay: 0.35s; }
.pub-animate-d4 { animation-delay: 0.5s; }

/* --- Responsive public --- */
@media (max-width: 768px) {
    .pub-hero { min-height: 70vh; }
    .pub-section { padding: 3rem 1rem; }
    .pub-page-hero { padding: 4rem 1rem 3rem; }
    .pub-concert-item { flex-direction: column; gap: 0.75rem; }
}

/* --- Dark mode public --- */
[data-theme="dark"] .public-site {
    --pub-blanc: #1a1f2e;
    --pub-creme: #e0ddd6;
    --pub-texte: #e0ddd6;
    --pub-texte-doux: #a8a3a3;
}
[data-theme="dark"] .pub-card { border-color: rgba(245, 240, 232, 0.06); }
[data-theme="dark"] .pub-news-card { border-color: rgba(245, 240, 232, 0.06); }
[data-theme="dark"] .pub-news-card h2 { color: var(--pub-creme); }
[data-theme="dark"] .pub-quote { background: rgba(201, 149, 60, 0.06); }

/* Classe utilitaire sr-only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Admin CMS --- */
.drop-zone {
    /* Desormais un <button> natif : on neutralise ses styles par defaut. */
    width: 100%;
    font: inherit;
    color: var(--couleur-texte);
    background: var(--couleur-carte);
    border: 2px dashed var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
    .drop-zone { transition: none; }
    /* pub-animate utilise animation-fill-mode:both — annuler entierement l'animation */
    .pub-animate,
    .pub-animate-d1,
    .pub-animate-d2,
    .pub-animate-d3,
    .pub-animate-d4 { animation: none !important; }
}
.drop-zone:focus-visible {
    outline: 3px solid var(--couleur-focus);
    outline-offset: 2px;
}
.drop-zone.drop-active {
    border-color: var(--couleur-primaire);
    background: rgba(26, 54, 93, 0.05);
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.media-item {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--couleur-carte);
}
.media-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.media-item-info {
    padding: 0.75rem;
    font-size: 0.8rem;
}
.preview-banner {
    /* Meme cause que les filtres : --couleur-accent s'inverse, le #fff non. */
    background: var(--accent-profond);
    color: #fff;
    text-align: center;
    padding: 0.75rem;
    font-weight: 600;
}
.preview-banner a {
    color: #fff;
    text-decoration: underline;
    margin-left: 1rem;
}

/* ---- Admin : champs Hero (recadrage grille 9 + aperçu) ---- */
.hero-fields__cadrage { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 0.75rem; }
.hero-grid {
    display: grid;
    grid-template-columns: repeat(3, 2.75rem);
    grid-template-rows: repeat(3, 2.75rem);
    gap: 4px;
}
.hero-grid__cell {
    display: block; cursor: pointer;
    border: 1px solid var(--couleur-bordure);
    border-radius: 4px;
    background: var(--couleur-fond);
}
.hero-grid__cell > span[aria-hidden] {
    display: block; width: 100%; height: 100%; border-radius: 3px;
    position: relative;
}
.hero-grid__cell:hover { border-color: var(--accent); }
.hero-grid__cell:has(input:checked) {
    border-color: var(--accent-profond);
    background: var(--accent-profond);
}
.hero-grid__cell:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.hero-preview__circle {
    width: 8rem; height: 8rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    box-shadow: var(--ombre-sm);
}
.hero-preview__circle img { width: 100%; height: 100%; object-fit: cover; }
.hero-preview__circle.is-empty img { display: none; }

/* --- Viewer PDF plein écran (S0-4, PDF.js self-hébergé) --- */
.pdf-viewer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    overflow: hidden;
}
.pdf-viewer[hidden] { display: none; }
.pdf-viewer-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    /* --couleur-surface n'est declaree nulle part : le repli #2a2a2a
       s'appliquait dans les deux themes, avec un titre herite de --encre
       par-dessus, soit 1,27:1 en theme clair. Les tokens panneau sont
       stables dans les deux modes. */
    background: var(--panneau);
    color: var(--panneau-texte);
    border-bottom: 1px solid var(--ligne-forte);
    flex: 0 0 auto;
}
.pdf-viewer-titre { font-weight: 600; }
.pdf-viewer-controles { display: flex; gap: 0.5rem; }
.pdf-viewer-controles .btn { min-height: 44px; min-width: 44px; }
.pdf-viewer-pages {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    -webkit-overflow-scrolling: touch;
}
.pdf-viewer-pages .pdf-page {
    max-width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.pdf-viewer-repli {
    flex: 0 0 auto;
    text-align: center;
    padding: 0.75rem;
    margin: 0;
    font-size: 0.9rem;
}

/* ============================================================================
   Bandeau d'acces support — l'admin plateforme entre dans un ensemble dont il
   n'est pas membre. Jamais silencieux : le libelle porte l'information, la
   couleur ne fait que la renforcer (lisible en niveaux de gris).
   ============================================================================ */
.bandeau-support {
    margin: 0;
    padding: 0.75rem 1.5rem;
    display: block;
    background: #fff4d6;
    color: #3d2c00;
    border-bottom: 3px solid #8c5a1e;
    font-size: 0.95rem;
    line-height: 1.5;
}
.bandeau-support p { margin: 0; }
.bandeau-support strong { font-weight: 700; }

:root[data-theme="dark"] .bandeau-support {
    background: #2a2000;
    color: #ffe9a8;
    border-bottom-color: #e5b84d;
}

/* Ecran de selection d'orchestre. La classe etait posee dans le gabarit mais
   n'existait dans aucune feuille : la carte ne se distinguait d'un bloc de
   texte que par sa bordure a 1,49:1. --accent-profond depasse largement les
   3:1 exiges pour un element d'interface. */
.orchestre-choice {
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--couleur-texte);
    background: var(--couleur-carte);
    border: 2px solid var(--accent-profond);
    transition: border-color 0.15s, background 0.15s;
}
.orchestre-choice:hover,
.orchestre-choice:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent-deep);
}
@media (prefers-reduced-motion: reduce) {
    .orchestre-choice { transition: none; }
}

/* .alert-warning etait utilisee dans le layout sans exister dans aucune
   feuille : le bloc heritait d'un border-left sans couleur sur fond
   transparent, indistinguable d'un paragraphe. 8,15:1 en clair. */
.alert-warning { background: #fef3c7; border-color: #78350f; color: #78350f; }
[data-theme="dark"] .alert-warning { background: #78350f; border-color: #fbbf24; color: #fef3c7; }