/* ============================================================================
   ERATO — SITE PUBLIC (identité « affiches » : crème + accent saisonnier + cercles)
   Chargé APRÈS app.css (couche de base). Recâble la palette navy/or historique
   sur les tokens de marque (tokens.css). Le motif cercles/bulles est la signature.

   Identité « aérée & accessible » : surfaces claires, beaucoup d'air, et toute
   surface d'accent PORTANT DU TEXTE utilise --accent-profond (blanc ≥ 7:1, stable
   en clair ET en sombre). Le gradient d'accent reste réservé au décor (bulles).
   ============================================================================ */

/* ---- Palette publique recâblée sur les tokens saisonniers ---- */
.public-site {
    --pub-noir:    var(--encre);
    --pub-nuit:    var(--encre);
    --pub-ardoise: var(--encre-douce);
    --pub-or:        var(--accent-deep);
    --pub-or-clair:  var(--accent);
    --pub-or-sombre: var(--accent-deep);
    --pub-creme:   var(--creme);
    --pub-blanc:   var(--papier);
    --pub-texte:       var(--encre);
    --pub-texte-doux:  var(--encre-douce);
    --pub-texte-clair-sur-sombre: #f3ece1;
    --pub-gris:    var(--encre-douce);

    background: var(--creme);
    color: var(--encre);
    font-family: var(--font-corps);
}
.public-site h1, .public-site h2, .public-site h3,
.public-site .pub-hero h1, .public-site .pub-cta h2 {
    font-family: var(--font-titre);
}

/* ---- Motif cercles / bulles (réutilisable) ---- */
.er-bulle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.er-bulle--soft   { background: var(--accent-soft); }
.er-bulle--accent { background: var(--accent-grad); }
.er-bulle--ligne  { background: transparent; border: 2px solid var(--accent-soft); }
.er-bulles-fond {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

/* ---- Navigation publique : crème, logo, accent ---- */
.public-site .nav-main {
    background: var(--papier);
    border-bottom: 1px solid var(--ligne);
    padding: 0 1.5rem;
}
.public-site .nav-brand {
    display: inline-flex;
    align-items: center;
    color: var(--encre);
    text-transform: none;
    letter-spacing: 0;
}
.public-site .nav-brand .er-logo {
    height: 2.6rem;
    width: auto;
    display: block;
    color: var(--encre); /* le SVG inline suit currentColor → s'adapte au thème */
}
.public-site .nav-links a {
    color: var(--encre);
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}
.public-site .nav-links a:hover,
.public-site .nav-links a[aria-current="page"] {
    background: transparent;
    color: var(--accent-deep);
    box-shadow: inset 0 -2px 0 var(--accent);
}
/* CTA de la nav : surface porteuse de texte → accent-profond (blanc AAA, stable) */
.public-site .nav-links .btn-primary {
    background: var(--accent-profond);
    color: #fff;
    border-radius: var(--rayon-full);
    padding: 0.55rem 1.35rem;
    box-shadow: var(--ombre-sm);
}
.public-site .nav-links .btn-primary:hover {
    background: var(--panneau);
    color: #fff;
}
.public-site .nav-toggle { color: var(--encre); }

/* ---- Bouton thème dans la nav publique (icône, toujours visible) ---- */
.nav-theme-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    margin-left: 0.25rem;
    border: 1px solid var(--ligne);
    border-radius: 50%;
    background: transparent;
    color: var(--encre);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}
.nav-theme-toggle:hover { border-color: var(--accent); color: var(--accent-deep); }
.nav-theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.nav-theme-toggle .theme-toggle-icon { margin: 0; }

/* ---- Hero d'accueil : crème, photo en cercle, texte encre net, bulles décor ---- */
.pub-hero {
    min-height: auto;
    background: var(--creme);
    padding: clamp(3.5rem, 7vw, 6.5rem) 1.5rem;
    overflow: hidden;
}
/* la photo plein cadre devient un grand cercle décoratif en fond */
.pub-hero-bg {
    position: absolute;
    inset: auto -8% -12% auto;
    top: 50%;
    transform: translateY(-50%);
    width: min(46rem, 70vw);
    height: min(46rem, 70vw);
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    box-shadow: var(--ombre-lg);
    opacity: 0.95;
}
.pub-hero-bg .pub-hero-img,
.pub-hero-bg .img-placeholder {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 1;
}
/* scrim léger crème pour garantir la lisibilité du texte à gauche */
.pub-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        var(--creme) 0%, var(--creme) 38%,
        color-mix(in srgb, var(--creme) 70%, transparent) 56%,
        transparent 72%);
    z-index: 1;
}
.pub-hero-content {
    position: relative;
    z-index: 2;
    max-width: 38rem;
    margin: 0;
    text-align: left;
}
.pub-hero-label {
    color: var(--accent-deep);
    border: 2px solid var(--accent);
    border-radius: var(--rayon-full);
    background: var(--papier);
}
/* Texte encre sur crème = 16:1 (AAA). Pas de text-shadow (vestige de l'ère
   « hero sombre » qui embuait le titre une fois passé en encre sur crème). */
.pub-hero h1 {
    color: var(--encre);
    font-weight: 600;
    font-size: var(--t-3xl);
    line-height: var(--lh-titre);
    letter-spacing: -0.015em;
    text-shadow: none;
}
.pub-hero h1 strong { color: var(--accent-deep); font-weight: 900; }
/* Mot tournant du hero : fondu doux au changement (JS pilote .est-en-transition). */
.pub-hero-rotateur {
    display: inline-block;
    transition: opacity 0.4s ease;
}
.pub-hero-rotateur.est-en-transition { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .pub-hero-rotateur { transition: none; }
}
.pub-hero-tagline {
    color: var(--encre-douce);
    max-width: 34rem;
    line-height: 1.75;
    text-shadow: none;
}
.pub-hero-actions { justify-content: flex-start; }

/* petites bulles décoratives autour du hero */
.pub-hero::before,
.pub-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: 0;
}
.pub-hero::before {
    width: 9rem; height: 9rem;
    background: var(--accent-grad);
    opacity: 0.18;
    top: 8%; right: 32%;
}
.pub-hero::after {
    width: 4rem; height: 4rem;
    background: var(--accent-soft);
    bottom: 12%; left: 6%;
}

/* ---- Hero : petite bulle image (optionnelle, CMS) ---- */
.pub-hero-bulle {
    position: absolute;
    z-index: 1;
    bottom: 8%;
    left: 5%;
    width: clamp(6rem, 12vw, 11rem);
    height: clamp(6rem, 12vw, 11rem);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--ombre-md);
    border: 4px solid var(--papier);
}

/* ---- En-têtes de sous-pages : bande claire et aérée (pas une dalle sombre).
   Un voile crème (adaptatif au thème) garantit le contraste du titre même si
   une photo de fond est présente. ---- */
.pub-page-hero {
    background: var(--creme);
    min-height: clamp(12rem, 26vh, 18rem);
    padding: clamp(3.5rem, 7vw, 5.5rem) 1.5rem clamp(2.5rem, 4vw, 3.25rem);
}
.pub-page-hero::before {
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--creme) 86%, transparent),
        color-mix(in srgb, var(--creme) 94%, transparent));
}
.pub-page-hero::after { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.pub-page-hero h1 { color: var(--encre); font-weight: 600; text-shadow: none; }
.pub-page-hero-subtitle { color: var(--encre-douce); text-shadow: none; }
.pub-page-hero .img-placeholder { opacity: 0.12; }

/* ---- Barre de filtres agenda (S0-2) ---- */
.pub-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-end;
    margin-bottom: 1.5rem;
}
.pub-filtre-champ {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 10rem;
    min-width: 9rem;
}
.pub-filtre-champ label {
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--encre);
}
.pub-filtre-champ select {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--accent);
    border-radius: var(--rayon);
    background: var(--papier);
    color: var(--encre);
    font: inherit;
}
.pub-filtre-champ select:focus-visible {
    outline: 3px solid var(--couleur-focus, var(--accent-deep));
    outline-offset: 2px;
}
.pub-filtre-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}
.pub-filtre-actions .btn-pub { min-height: 44px; }
.pub-filtre-reset {
    color: var(--accent-deep);
    text-decoration: underline;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.pub-filtres-resume {
    color: var(--encre-douce);
    font-size: var(--t-sm);
    margin: 0;
}

/* ---- Formulaire public (contact) ---- */
.pub-honeypot { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.pub-form .form-group { margin-bottom: 1.25rem; }
.pub-form label { display: block; font-weight: 600; color: var(--encre); margin-bottom: 0.35rem; }
.pub-form input[type="text"],
.pub-form input[type="email"],
.pub-form textarea {
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--accent);
    border-radius: var(--rayon);
    background: var(--papier);
    color: var(--encre);
    font: inherit;
}
.pub-form textarea { min-height: 8rem; resize: vertical; }
.pub-form input:focus-visible,
.pub-form textarea:focus-visible,
.pub-form input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--couleur-focus, var(--accent-deep));
    outline-offset: 2px;
}

/* ---- Boutons publics ---- */
/* Bouton plein porteur de texte → accent-profond (blanc AAA, stable). */
.btn-pub-primary {
    background: var(--accent-profond);
    color: #fff;
    border: none;
    border-radius: var(--rayon-full);
    box-shadow: var(--ombre-sm);
}
.btn-pub-primary:hover { background: var(--panneau); color: #fff; }
.btn-pub-outline {
    border: 2px solid var(--accent-deep);
    color: var(--accent-deep);
    border-radius: var(--rayon-full);
    background: transparent;
}
.btn-pub-outline:hover { background: var(--accent-deep); color: #fff; }
.btn-pub-dark {
    background: var(--encre);
    color: var(--creme);
    border-radius: var(--rayon-full);
}
.btn-pub-dark:hover { background: var(--accent-deep); }

/* ---- Sections : surfaces claires, beaucoup d'air vertical ---- */
.pub-section {
    background: var(--creme);
    color: var(--encre);
    padding-block: clamp(4.5rem, 9vw, 8rem);
}
.pub-section-warm  { background: var(--creme-ombre); }
.pub-section-cream { background: var(--papier); }
.pub-grid-2 { gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pub-grid-3 { gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Largeur de lecture confortable (~66 caractères) */
.pub-contenu-cms, .pub-section .prose { max-width: 46rem; }
.pub-contenu-cms p, .pub-section .prose p { line-height: 1.75; }
.pub-section-inner > .pub-section-label + h2 { max-width: 22ch; }

/* « dark » = panneau clair et aéré (le seul moment sombre conservé = le footer).
   La classe est conservée pour ne pas toucher les vues ; son rendu est clair. */
.pub-section-dark {
    background: var(--creme-ombre);
    color: var(--encre);
    position: relative;
}
.pub-section-dark h2,
.pub-section-dark h3 { color: var(--encre); }
.pub-section-dark p  { color: var(--encre-douce); }
.pub-section-label { color: var(--accent-deep); letter-spacing: 0.18em; }
.pub-section-dark .pub-section-label { color: var(--accent-deep); }
.pub-section h2 strong { color: var(--accent-deep); }
.pub-section-dark h2 strong { color: var(--accent-deep); }
.pub-divider { border: none; height: 2px; background: var(--accent-soft); }
.pub-section-dark .pub-divider { background: var(--accent-soft); }

/* ---- Cartes : légères, ombre douce, du souffle intérieur ---- */
.pub-card {
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent);
    border-radius: var(--rayon-lg);
    box-shadow: 0 1px 2px rgba(26, 20, 16, .04);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}
.pub-card:hover { box-shadow: var(--ombre-md); transform: translateY(-4px); }
.pub-card-dark {
    background: var(--papier);
    border: 1px solid color-mix(in srgb, var(--ligne) 55%, transparent);
    box-shadow: 0 1px 2px rgba(26, 20, 16, .04);
    color: var(--encre);
}
.pub-card-dark h3 { color: var(--encre); }
.pub-card-dark p  { color: var(--encre-douce); }
.pub-card-icon {
    color: var(--accent-deep);
    background: var(--accent-soft);
    width: 3.25rem; height: 3.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 1.5rem;
}
.pub-section-dark .pub-card-icon { background: var(--accent-soft); color: var(--accent-deep); }

/* ---- Agenda : pastille date ronde (surface porteuse de texte → accent-profond) ---- */
.pub-concert-item {
    border-bottom: 1px solid color-mix(in srgb, var(--ligne) 60%, transparent);
}
.pub-concert-date {
    background: var(--accent-profond);
    color: #fff;
    width: var(--bulle-xs); height: var(--bulle-xs);
    min-width: var(--bulle-xs);
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: var(--ombre-sm);
}
.pub-concert-day { font-size: 1rem; font-weight: 800; }
.pub-concert-month { font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- CTA : fond profond stable (blanc lisible AAA), une vraie respiration colorée ---- */
.pub-cta {
    background: linear-gradient(135deg, var(--accent-profond), var(--panneau));
    color: #fff;
    padding-block: clamp(4rem, 8vw, 7rem);
}
.pub-cta h2, .pub-cta h2 strong { color: #fff; }
.pub-cta p { color: rgba(255, 255, 255, 0.92); }
.pub-cta .pub-section-label { color: rgba(255, 255, 255, 0.85); }
.pub-cta .btn-pub-primary { background: #fff; color: var(--accent-profond); }
.pub-cta .btn-pub-primary:hover { background: var(--creme); color: var(--accent-profond); }
.pub-cta .btn-pub-outline { border-color: #fff; color: #fff; }
.pub-cta .btn-pub-outline:hover { background: #fff; color: var(--accent-deep); }

/* ---- Pied de page : encre + logo + accent ---- */
.public-site .footer-main {
    background: var(--encre);
    color: var(--pub-texte-clair-sur-sombre);
    border-top: 4px solid var(--accent);
}
.public-site .footer-main h3 { color: var(--papier); }
.public-site .footer-main a { color: var(--pub-texte-clair-sur-sombre); }
.public-site .footer-main a:hover { color: var(--accent); }
.public-site .footer-brand .er-logo {
    height: 3.4rem;
    width: auto;
    color: var(--papier); /* logo clair sur pied de page encre */
    margin-bottom: 1rem;
}

/* ---- Placeholders photo : lavis clair neutre-chaud ----
   Lavis très léger (accent à peine perceptible fondu dans le papier) : les zones
   « en attente d'image » respirent et s'effacent au lieu de rivaliser avec le
   contenu. Le libellé passe en encre douce (AAA). */
.public-site .img-placeholder {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--accent-soft) 45%, var(--papier)),
            color-mix(in srgb, var(--creme-ombre) 65%, var(--papier)));
    color: var(--encre-douce);
    border: 1px solid color-mix(in srgb, var(--ligne) 50%, transparent);
    border-radius: var(--rayon-lg);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

/* ---- Bandeau d'information cookies (non bloquant) ---- */
/* L'attribut [hidden] doit l'emporter sur display:flex, sinon le bouton
   « J'ai compris » ne masque rien (sélecteur plus spécifique = gagne). */
.info-cookies[hidden] { display: none; }
.info-cookies {
    position: fixed;
    left: 1rem; right: 1rem; bottom: 1rem;
    max-width: 56rem;
    margin-inline: auto;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--papier);
    color: var(--encre);
    border: 1px solid var(--ligne);
    border-left: 4px solid var(--accent);
    border-radius: var(--rayon-md);
    box-shadow: var(--ombre-lg);
    padding: 0.9rem 1.1rem;
}
.info-cookies__texte { margin: 0; flex: 1 1 18rem; font-size: 0.92rem; line-height: 1.5; }
.info-cookies__texte a { color: var(--accent-deep); font-weight: 600; }
.info-cookies__btn {
    flex: 0 0 auto;
    background: var(--accent-profond);
    color: #fff;
    border: none;
    border-radius: var(--rayon-full);
    padding: 0.6rem 1.4rem;
    min-height: 44px;
    font-weight: 600;
    cursor: pointer;
}
.info-cookies__btn:hover { background: var(--panneau); }
.info-cookies__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ============================================================================
   RESPONSIVE & MÉDIA
   ============================================================================ */
@media (max-width: 768px) {
    .pub-hero-bg {
        position: relative;
        inset: auto;
        transform: none;
        width: 70vw; height: 70vw;
        margin: 0 auto 2rem;
    }
    .pub-hero-overlay { display: none; }
    .pub-hero-content { text-align: center; max-width: 100%; }
    .pub-hero-actions { justify-content: center; }
    .pub-hero-bulle { position: relative; inset: auto; display: block; margin: -3rem auto 1rem; }
}
@media (max-width: 600px) {
    .info-cookies { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
    .info-cookies__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .pub-card:hover { transform: none; }
}