/* 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;
    background: var(--couleur-primaire);
    color: #fff;
    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);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--couleur-focus);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.2);
}

/* 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 {
    background: var(--couleur-primaire);
    color: #fff;
    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;
    opacity: 0.8;
    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); }
.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;
    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: 2.5rem;
    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: 2rem;
}
.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;
    }
    .sidebar-collapsed .admin-sidebar {
        width: 0;
    }
    /* Demarrer collapsed sur mobile */
    body:not(.sidebar-collapsed) .admin-sidebar { width: 0; padding: 0; overflow: 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: 2.2rem;
}
.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;
    color: var(--couleur-texte-secondaire, #6b7280);
}
[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;
}
.filter-tag.active { background: var(--couleur-primaire); color: #fff; border-color: var(--couleur-primaire); }
.filter-tag:hover { background: var(--couleur-secondaire); color: #fff; border-color: var(--couleur-secondaire); }

/* 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; }
.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 {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.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 {
    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 {
    background: var(--couleur-accent);
    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, #1a1a1a);
    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;
    background: var(--couleur-surface, #2a2a2a);
    border-bottom: 1px solid var(--couleur-bordure, #444);
    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;
}