/* ===========================
   RESET & BASE
=========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #333;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ===========================
   CONTENEUR STRUCTUREL COMMUN
   Largeur de bords gauche/droite partagée par TOUT le site (navbar,
   footer, sections de page). Padding en rem (pas px) : suit la taille de
   police choisie par l'utilisateur (zoom/préférences navigateur), une des
   recommandations d'accessibilité de base pour les marges de confort.
   Réutiliser cette classe partout plutôt que redéfinir un max-width/margin
   ad hoc à chaque section — voir CLAUDE.md, "CSS public — étape 1".
=========================== */
.conteneur {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Largeur de LECTURE pour les blocs de texte long (présentation hero,
   textes "À propos", contenus d'accordéon) : plus étroite que .conteneur,
   centrée dans celui-ci. Les grilles (cards, trombinoscope) n'utilisent
   PAS cette classe : elles restent sur la largeur structurelle complète. */
.texte-lecture {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================
   BANDEAU D'ANNONCE
   Global, réductible (jamais fermé définitivement) — voir includes/header.php
   pour le JS (bascule + mémorisation localStorage par signature de contenu).
   Couleur d'accent de la charte (rose corail), pas de rouge (pas une alerte
   d'erreur). Pousse le contenu vers le bas dans les deux états : élément de
   flux normal, sans position fixed/sticky, sa hauteur (donc l'espace pris)
   varie simplement avec le padding réduit/déployé.
=========================== */
.bandeau-annonce {
    background-color: #e94560;
    color: #fff;
}

.bandeau-annonce-interieur {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    transition: padding 0.2s ease;
}

.bandeau-annonce-corps {
    flex: 1;
    text-align: center;
    font-size: 0.95rem;
}

.bandeau-annonce-reduit-texte {
    display: none;
    font-weight: bold;
}

.bandeau-annonce-lien {
    text-decoration: underline;
    font-weight: bold;
    margin-left: 0.5rem;
    color: #fff;
}

.bandeau-annonce-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
}

.bandeau-annonce-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* État réduit : même emplacement (élément identique, juste moins de
   padding), texte remplacé par "📣 Annonce". */
.bandeau-annonce-reduit .bandeau-annonce-interieur {
    padding: 0.4rem 1.5rem;
}

.bandeau-annonce-reduit .bandeau-annonce-texte {
    display: none;
}

.bandeau-annonce-reduit .bandeau-annonce-reduit-texte {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .bandeau-annonce-interieur {
        transition: none;
    }
}

@media (max-width: 768px) {
    .bandeau-annonce-interieur {
        padding: 0.6rem 1rem;
        gap: 0.5rem;
    }

    .bandeau-annonce-corps {
        font-size: 0.85rem;
    }

    .bandeau-annonce-reduit .bandeau-annonce-interieur {
        padding: 0.35rem 1rem;
    }
}

/* ===========================
   NAVIGATION
=========================== */
nav {
    background-color: #1a1a2e;
    color: #fff;
}

.nav-interieur {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 2rem;
}

nav a {
    color: #fff;
}

nav > .nav-interieur > a {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 1px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

nav ul a:hover {
    color: #e94560;
}

/* ===========================
   HERO
=========================== */
#hero {
    background-color: #1a1a2e;
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-align: center;
    position: relative;
}

.hero-interieur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

#hero h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #e94560;
}

#hero h2 {
    font-size: 1.4rem;
    font-weight: normal;
    margin-bottom: 1.5rem;
    color: #ccc;
}

#hero p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #aaa;
}

/* ===========================
   AGENDA / CARDS
=========================== */
#agenda {
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
}

#agenda h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #1a1a2e;
}

.cards-agenda {
    /* Grille (pas flex) : 3 colonnes ÉGALES, les cards remplissent leur
       colonne (plus de largeur fixe sur .card) — bords extérieurs alignés
       sur le conteneur par construction, sans avoir besoin de
       justify-content. Avec moins de 3 cards, les colonnes restantes
       restent simplement vides (pas d'étalement/centrage automatique) —
       voir CLAUDE.md, "CSS public — grilles cards accueil". */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.card {
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-4px);
}

.card h3 {
    padding: 0.8rem;
    background-color: #1a1a2e;
    color: #fff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card img {
    /* Format A4 portrait (1 / 1,414) : toutes les affiches sont réellement
       au format A4, donc largeur de colonne + ce ratio = affiche entière,
       jamais rognée (object-fit: contain en filet de sécurité si jamais
       une image n'était pas exactement A4). Plus de hauteur fixe : elle se
       déduit du ratio, donc les 3 cards de la rangée ont la même hauteur
       automatiquement (même largeur de colonne partout). */
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
    background-color: #eee;
}

/* Même hauteur que les vraies affiches (format A4) pour la carte "sans
   affiche" de l'accueil (spectacle sans affiche, ou fillers "à venir" —
   scopé à .cards-agenda pour ne pas affecter spectacles.php/spectacle.php,
   qui utilisent aussi .pas-affiche dans un contexte différent). */
.cards-agenda .pas-affiche {
    aspect-ratio: 1 / 1.414;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pas-spectacle {
    padding: 3rem 1rem;
    color: #999;
    font-style: italic;
    font-size: 0.95rem;
}

.pas-affiche {
    padding: 3rem 1rem;
    color: #333;
    font-weight: bold;
}

/* ===========================
   AVIS
=========================== */
#avis {
    padding-top: 3rem;
    padding-bottom: 3rem;
    text-align: center;
}

#avis h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #1a1a2e;
}

.cards-avis {
    /* Grille (pas flex) : mêmes 3 colonnes égales que .cards-agenda, mêmes
       bords extérieurs, même largeur de card que les spectacles — voir
       CLAUDE.md, "CSS public — grilles cards accueil". */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.avis-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* Étoiles : 5 étoiles grises en fond, 5 étoiles pleines superposées et
   rognées à la largeur correspondant au pourcentage de la note
   (ex. 4.5/5 = 90% => 4 étoiles pleines + une demie). */
.avis-etoiles {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    font-size: 1.3rem;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 1rem;
}

.avis-etoiles-vides {
    color: #ddd;
}

.avis-etoiles-pleines {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #e94560;
    white-space: nowrap;
}

.avis-texte {
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
}

.avis-auteur {
    font-weight: bold;
    color: #1a1a2e;
    font-size: 0.95rem;
    text-align: right;
}

/* Grilles cards accueil (.cards-agenda / .cards-avis) — paliers responsive.
   Tablette AVANT mobile dans l'ordre du fichier : la règle mobile (portée
   plus étroite) doit passer en dernier pour l'emporter en cascade sous
   768px, les deux media queries étant vraies simultanément à cette largeur. */
@media (max-width: 1024px) {
    .cards-agenda,
    .cards-avis {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .cards-agenda,
    .cards-avis {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   FOOTER
=========================== */
footer {
    background-color: #1a1a2e;
    color: #aaa;
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-top: 3rem;
    font-size: 0.9rem;
    line-height: 2;
}

footer a {
    color: #e94560;
}

footer a:hover {
    text-decoration: underline;
}

/* ===========================
   RESPONSIVE MOBILE
=========================== */
@media (max-width: 768px) {
    .nav-interieur {
        flex-direction: column;
        justify-content: center;
        gap: 0.8rem;
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    nav ul {
        width: 100%;
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
        font-size: 0.9rem;
    }

    #hero h1 {
        font-size: 2rem;
    }
}
/* ===========================
   LANDING PAGE
=========================== */
#landing-spectacle {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#landing-atelier {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.landing-contenu {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.landing-affiche {
    flex: 0 0 350px;
}

.landing-affiche img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.landing-infos {
    flex: 1;
}

.landing-infos h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

.landing-date {
    font-size: 1.1rem;
    color: #e94560;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.landing-lieu {
    color: #555;
    margin-bottom: 1.5rem;
}

.landing-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

.landing-message {
    margin-top: 1.5rem;
}

.btn-principal {
    display: inline-block;
    background-color: #e94560;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-principal:hover {
    background-color: #c73652;
}

/* État désactivé (ex. "Préparer la newsletter" quand aucun candidat) : sans
   cette règle, un <button disabled> garde la couleur d'accent pleine —
   visuellement indiscernable d'un bouton actif malgré l'attribut disabled. */
.btn-principal:disabled {
    background-color: #ccc;
    color: #888;
    cursor: not-allowed;
}

.btn-principal:disabled:hover {
    background-color: #ccc;
}

.btn-secondaire {
    display: inline-block;
    background-color: #1a1a2e;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    margin-top: 1rem;
    transition: background-color 0.2s;
}

.btn-secondaire:hover {
    background-color: #2d2d4e;
}

.landing-message.attente p {
    font-size: 1.1rem;
    color: #666;
}

.landing-sous-message {
    font-size: 0.9rem;
    color: #999;
    margin-top: 0.5rem;
}

.landing-message.passe p {
    font-size: 1.2rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

/* Responsive landing */
@media (max-width: 768px) {
    .landing-contenu {
        flex-direction: column;
    }

    .landing-affiche {
        flex: none;
        width: 100%;
    }
}
/* ===========================
   LISTE SPECTACLES
=========================== */
#liste-spectacles {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#liste-spectacles h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
    text-align: center;
}

.liste-section {
    margin-bottom: 3rem;
}

.liste-section h2 {
    font-size: 1.5rem;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e94560;
}

.liste-affiches {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.liste-card {
    /* .liste-affiches (flex-wrap) étire par défaut (align-items:stretch)
       toutes les cards d'une même ligne à la hauteur de la plus haute —
       mais SEULEMENT la card elle-même : sans display:flex ici, son unique
       enfant (le <a>) restait à sa hauteur naturelle, laissant un vide en
       bas (fond blanc de la page au lieu du gris de .liste-card-date) sur
       les cards dont le titre tient sur 1 ligne. */
    width: 200px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    display: flex;
}

.liste-card:hover {
    transform: translateY(-4px);
}

.liste-card a {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.liste-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    flex-shrink: 0;
}

.liste-card-titre {
    /* flex:1 absorbe l'espace en trop quand le titre tient sur 1 ligne :
       c'est SON PROPRE fond gris qui comble le vide (jamais de blanc), et
       ça pousse .liste-card-date en bas de la card dans tous les cas —
       même logique de card "étirée" que .cards-agenda/.cards-avis
       (accueil), qui n'ont pas ce problème car leurs cards n'affichent pas
       de titre/date variable (juste "Passé"/"Prochain"/"À venir" fixe). */
    flex: 1;
    padding: 0.5rem;
    font-weight: bold;
    font-size: 0.9rem;
    color: #1a1a2e;
    background-color: #f9f9f9;
}

.liste-card-date {
    padding: 0.3rem 0.5rem 0.5rem;
    font-size: 0.8rem;
    color: #999;
    background-color: #f9f9f9;
    flex-shrink: 0;
}

.liste-card-passe {
    opacity: 0.75;
}

.liste-card-passe:hover {
    opacity: 1;
}

.aucun-spectacle {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 3rem;
}

/* Responsive liste */
@media (max-width: 768px) {
    .liste-affiches {
        justify-content: center;
    }
}

/* ===========================
   ATELIERS
   Section A (contenu éditorial "Ateliers réguliers") + section B (liste des
   ateliers ponctuels, réutilise .liste-affiches/.liste-card/.liste-section
   — voir "LISTE SPECTACLES" ci-dessus). Badge "Complet" partagé entre la
   liste (overlay sur l'affiche) et le détail (inline sous le titre).
=========================== */
#ateliers {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.ateliers-reguliers {
    margin-bottom: 3.5rem;
}

.ateliers-reguliers-titre {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    text-align: center;
}

.ateliers-reguliers-intro {
    margin-bottom: 2rem;
}

.ateliers-reguliers-intro p {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

/* Encadré commun (créneaux / conditions) : même esprit visuel que les cards
   du site (fond clair, coins arrondis, ombre légère) sans en réutiliser la
   classe (.card a une largeur/mise en page pensée pour une affiche+titre). */
.ateliers-encadre {
    max-width: 1000px;
    margin: 0 auto 2rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.ateliers-encadre-label {
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #e94560;
    margin-bottom: 0.8rem;
}

.ateliers-creneaux-ligne {
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 0.4rem;
}

.ateliers-creneaux-ligne:last-child {
    margin-bottom: 0;
}

.ateliers-conditions .texte-lecture {
    max-width: none;
    margin: 0;
}

.ateliers-conditions .texte-lecture p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 2rem;
}

/* Places disponibles : encart d'accent, centré, mis en évidence (couleur
   d'accent du site, cohérent avec .landing-date/.accordeon-titre). */
.ateliers-badge-places {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 2rem;
    background-color: #e94560;
    color: #fff;
    font-weight: bold;
    font-size: 1.05rem;
    padding: 0.6rem 1.5rem;
    border-radius: 999px;
    text-align: center;
}

.ateliers-prestations {
    max-width: 1000px;
    margin: 2rem auto 0;
}

.ateliers-prestations h2 {
    font-size: 1.5rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e94560;
}

.ateliers-prestations p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

.ateliers-ponctuels .liste-section h3 {
    font-size: 1.2rem;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

/* Badge "Complet" — overlay sur la card liste (.liste-card doit être
   positionnée pour ancrer le badge) et version inline sur le détail. */
.liste-card {
    position: relative;
}

.liste-card-badge-complet {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    background-color: #1a1a2e;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.landing-badge-complet {
    position: static;
    display: inline-block;
    margin-bottom: 1rem;
}

/* ===========================
   CONTACT
=========================== */
#contact {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#contact h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-succes {
    background-color: #d4edda;
    color: #155724;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-erreur {
    background-color: #f8d7da;
    color: #721c24;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin-bottom: 2rem;
    text-align: center;
}

.contact-form-wrapper {
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.form-groupe {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-groupe label {
    font-weight: bold;
    font-size: 0.95rem;
    color: #1a1a2e;
}

.form-groupe input,
.form-groupe select,
.form-groupe textarea {
    padding: 0.7rem 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    color: #333;
    background-color: #fff;
    transition: border-color 0.2s;
}

.form-groupe input:focus,
.form-groupe select:focus,
.form-groupe textarea:focus {
    outline: none;
    border-color: #e94560;
}

.form-erreur {
    color: #e94560;
    font-size: 0.85rem;
}

.form-groupe textarea {
    resize: vertical;
    min-height: 150px;
}

/* ===========================
   PRESSE
=========================== */
#presse {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#presse h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 2rem;
    text-align: center;
}

.presse-section {
    margin-bottom: 3rem;
}

.presse-section h2 {
    font-size: 1.5rem;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e94560;
}

.presse-liste {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.presse-card {
    display: flex;
    gap: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 1.5rem;
    align-items: flex-start;
}

.presse-card img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.presse-card-infos {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.presse-card-infos h3 {
    /* CSS étape 2 : ~x1.5 (1.1rem → 1.65rem). */
    font-size: 1.65rem;
    color: #1a1a2e;
}

.presse-source {
    font-weight: bold;
    color: #e94560;
    font-size: 0.95rem;
}

.presse-date {
    color: #999;
    font-size: 0.85rem;
}

.presse-description {
    /* CSS étape 2 : ~x1.5 (0.95rem → 1.4rem), line-height inchangé
       (unitless, reste proportionnel). */
    color: #555;
    font-size: 1.4rem;
    line-height: 1.6;
}

audio {
    width: 100%;
    margin-top: 0.5rem;
}

/* Photos */
.presse-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.presse-photo {
    width: 200px;
}

.presse-photo img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s;
}

.presse-photo img:hover {
    transform: scale(1.03);
}

.presse-photo-legende {
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.3rem;
    text-align: center;
}

/* CTA Journaliste */
.presse-cta {
    margin-top: 3rem;
    background-color: #1a1a2e;
    color: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    text-align: center;
}

.presse-cta h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.presse-cta p {
    color: #ccc;
    margin-bottom: 1.5rem;
}

.aucun-contenu {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 3rem;
}

/* Responsive presse */
@media (max-width: 768px) {
    .presse-card {
        flex-direction: column;
    }

    .presse-card img {
        width: 100%;
        height: 200px;
    }

    .presse-photos {
        justify-content: center;
    }
}
/* ===========================
   HERO LOGOS
=========================== */

.hero-logo-gauche,
.hero-logo-droite {
    flex-shrink: 0;
    width: 120px;
}

.hero-logo-gauche img,
.hero-logo-droite img {
    width: 100%;
    height: auto;
}

/* ===========================
   FOOTER — SOUSCRIPTION NEWSLETTER
=========================== */
.footer-newsletter {
    text-align: left;
    margin-bottom: 2rem;
}

.footer-newsletter-message {
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    text-align: center;
}

.footer-newsletter-succes {
    background-color: #d4edda;
    color: #155724;
}

.footer-newsletter-erreur {
    background-color: #f8d7da;
    color: #721c24;
}

.footer-newsletter-form {
    /* Grille 2 colonnes x 3 LIGNES (une ligne par élément de la colonne 1 :
       intro / email / consentement), pas 1 seule ligne comme avant — c'est
       ce qui permet au bouton de se placer explicitement sur la ligne 2
       (celle du champ email, via grid-row sur .footer-newsletter-bouton)
       plutôt que d'être centré sur la hauteur totale des 3 lignes.
       .footer-newsletter-champs passe en display:contents (voir plus bas) :
       son rôle de conteneur de mise en page est repris ICI, directement
       par la grille — ses enfants (intro/email/consentement) deviennent
       des items de grille à part entière. row-gap (0.7rem) = ancien gap
       interne entre les 3 lignes ; column-gap (24px) = espace colonne
       1 <-> colonne 2 (bouton), inchangé. Groupe centré dans le footer via
       justify-content, jamais étalé sur toute la largeur du conteneur. */
    display: grid;
    grid-template-columns: var(--footer-newsletter-col1, 420px) max-content;
    grid-template-rows: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 0.7rem 24px;
}

.footer-newsletter-champs {
    /* display:contents : ce <div> disparaît de la mise en page (plus de
       boîte flex propre), ses enfants directs (intro/email/consentement)
       deviennent des items DIRECTS de la grille .footer-newsletter-form
       ci-dessus — c'est ce qui permet de placer .footer-newsletter-email
       sur une ligne de grille précise (ligne 2) que le bouton peut cibler
       explicitement. Aucun changement HTML : le <div> reste dans le DOM,
       juste sans effet visuel/layout propre. */
    display: contents;
}

.footer-newsletter-intro {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: #fff;
    font-weight: bold;
    font-size: 1.35rem;
    line-height: 1.3;
}

.footer-newsletter-email {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    width: 100%;
}

.footer-newsletter-email input {
    width: 100%;
}

.footer-newsletter-email input::placeholder {
    font-style: italic;
}

/* Bordure plus épaisse + bien contrastée (pas seulement la couleur) :
   l'erreur doit se voir immédiatement, pas seulement au survol/focus. */
.footer-newsletter-email.erreur input {
    border-width: 2px;
    border-color: #e94560;
}

/* Case + libellé + lien "Détails" sur une même ligne. Le lien est HORS du
   <label> (voir footer.php) : un <a> imbriqué dans un <label> associé à
   une checkbox coche/décoche accidentellement la case au clic sur le lien
   — les garder frères évite ce piège. */
.footer-newsletter-consentement {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.footer-newsletter-case {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #ccc;
    font-size: 1.1rem;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

.footer-newsletter-case input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

/* Rouge persistant (case ET libellé), tant que la case n'est pas cochée —
   pas un état transitoire de focus/hover. Rouge éclairci (#ff6b81, pas le
   #e94560 générique du site) SPÉCIFIQUEMENT ici : sur le fond sombre du
   footer (#1a1a2e), #e94560 seul reste sous le seuil de contraste AA
   (~4.0:1) — #ff6b81 remonte à ~6.5:1. Le reste du site (formulaires sur
   fond clair) n'est pas concerné, #e94560 y contraste déjà largement assez. */
.footer-newsletter-case.erreur {
    color: #ff6b81;
    font-weight: bold;
}

.footer-newsletter-case.erreur input[type="checkbox"] {
    accent-color: #ff6b81;
    outline: 2px solid #ff6b81;
    outline-offset: 2px;
}

.footer-newsletter-details {
    font-size: 0.85rem;
    color: #999;
    text-decoration: underline;
    white-space: nowrap;
}

.footer-newsletter-details:hover {
    color: #ccc;
}

.footer-newsletter-bouton {
    /* Placé EXPLICITEMENT sur la ligne 2 de la grille (grid-row: 2), la
       même que .footer-newsletter-email — pas centré sur la hauteur
       totale des 3 lignes de la colonne 1 comme avant (c'était la cause
       du décalage vers le bas : align-items:center centrait le bouton sur
       tout .footer-newsletter-champs, alors que le champ email n'occupe
       que la ligne du milieu). align-self:center (pas stretch) : la
       hauteur du bouton reste la sienne (déjà correcte, voir plus bas) ;
       comme la ligne 2 ne contient que .footer-newsletter-email et le
       bouton, et qu'ils ont la même hauteur en usage normal, le centrage
       donne 0px d'écart en haut et en bas. (stretch aurait aussi marché
       en usage normal, mais aurait étiré le bouton si la ligne devient
       plus haute que lui — ex. message d'erreur affiché sous le champ
       email — ce que center évite.)

       Hauteur alignée sur .footer-newsletter-email input via le MÊME
       mécanisme (pas une valeur en dur) : .btn-principal donne un
       padding vertical (1rem) et un font-size (1.1rem) plus grands que
       l'input (0.7rem / 1rem), et l'input a un border de 1px que le
       bouton n'a pas — cumulé, ça rendait le bouton plus haut. Corrigé en
       reprenant ici le même padding vertical, le même font-size (donc la
       même line-height) et un border de même largeur (transparent, pour
       ne pas changer la couleur) : les deux boîtes (box-sizing:
       border-box, réglage global) ont alors une hauteur calculée
       identique. Le padding horizontal (2rem, hérité de .btn-principal)
       et la couleur ne sont pas touchés. */
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    border: 1px solid transparent;
    font-size: 1rem;
    /* Un <button> n'hérite PAS de font-family par défaut (contrairement à
       .form-groupe input, qui le fait déjà explicitement) : sans ça, il
       utilise la police système du navigateur, avec une line-height
       différente de celle de la page — dernière source résiduelle de
       l'écart de hauteur avec le champ email, une fois padding/border/
       font-size déjà alignés ci-dessus. */
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s, background-color 0.2s;
}

/* État "envoi en cours" (AJAX) : déclenché par JS au clic, retiré à la
   réponse — voir includes/footer.php. */
.footer-newsletter-bouton.chargement {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}

/* Secousse déclenchée par la présence de la classe (ajoutée côté serveur
   après une soumission invalide) : une seule occurrence au chargement de la
   page, jamais répétée — pas de clignotement continu (WCAG). */
@keyframes footer-newsletter-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

.footer-newsletter-shake {
    animation: footer-newsletter-shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@media (prefers-reduced-motion: reduce) {
    .footer-newsletter-shake {
        animation: none;
    }
}

@media (max-width: 768px) {
    .footer-newsletter-form {
        /* La grille s'effondre à 1 colonne x 4 lignes (au lieu de 2
           colonnes x 3 lignes en desktop) : le bouton n'a plus de colonne
           2 où se placer à côté du champ email, il devient une 4e ligne,
           sous les 3 autres — voir grid-row sur .footer-newsletter-bouton
           ci-dessous, qui doit être réaffecté (la ligne 2 desktop, celle
           du champ email, n'a plus de sens ici, elle accueillerait sinon
           le bouton PAR-DESSUS le champ email au lieu d'en dessous). */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        justify-content: stretch;
    }

    .footer-newsletter-bouton {
        /* Colonne unique, 4e ligne (après intro/email/consentement) :
           l'ordre du DOM correspond déjà à l'ordre voulu, ce
           repositionnement explicite est nécessaire car le bouton a un
           grid-row/grid-column FIXE (2/2) posé pour le desktop, qui ne
           correspond plus à une grille à 1 colonne. */
        grid-column: 1;
        grid-row: 4;
        align-self: center;
        /* Pleine largeur de la colonne en mobile (au lieu de sa largeur de
           contenu naturelle utilisée en desktop). */
        width: 100%;
    }
}

/* ===========================
   FOOTER LOGOS
=========================== */
.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.footer-logos img {
    height: 50px;
    width: auto;
    opacity: 0.8;
}

.footer-logos img:hover {
    opacity: 1;
}

/* Responsive logos */
@media (max-width: 768px) {
    .hero-logo-gauche,
    .hero-logo-droite {
        display: none;
    }
}
/* ===========================
   À PROPOS
=========================== */
#apropos {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

#apropos h1 {
    font-size: 2rem;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    text-align: center;
}

.apropos-intro p {
    /* CSS étape 2 : ~x1.5 (1rem → 1.5rem). */
    font-size: 1.5rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

.apropos-details h2 {
    /* Titre de section ("Qui sommes-nous"/"Nos valeurs"/"L'équipe") — PAS
       agrandi (hors périmètre étape 2, seul le texte "Nos valeurs" ci-dessous
       l'est). margin-top uniforme (2026-07-08, réorganisation "À propos") :
       auparavant réservé au 2ᵉ h2 via :not(:first-child), qui reposait sur une
       asymétrie de structure (un seul h2 enveloppé dans son propre div) ;
       devenu impossible à maintenir correctement avec 3 sections (chaque h2
       enveloppé dans son propre .texte-lecture redevient ":first-child" de
       CE div, cassant la règle pour la 2ᵉ/3ᵉ section). margin-top constant
       sur tous les h2 : le premier absorbe son excès via le collapsing CSS
       avec la marge du bloc précédent (photo de groupe), pas de double
       espace visible — vérifié. */
    font-size: 1.3rem;
    color: #1a1a2e;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e94560;
}

/* Texte de la section "Nos valeurs" — scopé à .apropos-details
   .texte-lecture (PAS juste ".apropos-details p" : ce sélecteur plus large
   attrapait aussi .membre-card-prenom/-fonction, qui sont aussi des <p>
   dans .apropos-details, et ne doivent PAS être agrandis — bug détecté aux
   tests, corrigé). CSS étape 2 : ~x1.5 par rapport à la taille de base
   héritée (1rem/16px, aucune règle dédiée n'existait avant) + line-height
   ajouté pour rester confortable, cohérent avec .apropos-intro p. */
.apropos-details .texte-lecture p {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #555;
}

/* ===========================
   MENTIONS LÉGALES
=========================== */
/* Sans cette règle, le reset global (* { margin: 0 }) laisse les <p>
   produits par renduTexteEditorial() collés les uns aux autres malgré les
   paragraphes distincts (bug diagnostiqué le 2026-07-08 : HTML/PHP déjà
   corrects, il manquait juste cette règle CSS). Scopée à #mentions-legales
   (id propre à cette page) pour ne jamais déborder sur les autres pages
   utilisant .texte-lecture (À propos, Contact, accueil). Mêmes valeurs que
   .apropos-intro p (autre page de texte éditorial long), pour rester
   visuellement cohérent avec le reste du site. */
#mentions-legales .texte-lecture p {
    font-size: 1.5rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

.placeholder-note {
    font-style: italic;
    color: #999;
    background-color: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 6px;
    padding: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.apropos-photo-groupe {
    text-align: center;
    margin-bottom: 2rem;
}

.apropos-photo-groupe img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.apropos-photo-groupe-legende {
    font-size: 0.85rem;
    color: #777;
    font-style: italic;
    margin-top: 0.6rem;
}

/* Grille (pas flex) : 4 colonnes égales desktop, mêmes bords extérieurs que
   le conteneur par construction (comme .cards-agenda/.cards-avis). Moins de
   4 membres sur la dernière ligne : restent alignés à GAUCHE, comportement
   natif de la grille, pas de justify-content à ajouter. */
.trombinoscope {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Vraie card (bordure/ombre/fond), cohérente avec .card/.avis-card —
   auparavant juste une photo + texte flottants, sans bloc délimité. */
.membre-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.2s;
}

.membre-card:hover {
    transform: translateY(-4px);
}

.membre-card img,
.membre-card-placeholder {
    /* Photo carrée pleine largeur de la card, jamais rognée hors du
       recadrage carré volontaire (photos déjà 800×800 à la source) — le
       ratio 1/1 + object-fit:cover sur une image DÉJÀ carrée ne rogne rien.
       Pas de border-radius ici : les coins arrondis viennent du
       overflow:hidden du .membre-card parent (même technique que .card). */
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #eee;
}

.membre-card-prenom {
    font-weight: bold;
    color: #1a1a2e;
    margin-top: 0.8rem;
    margin-bottom: 0.1rem;
    padding: 0 0.5rem;
}

.membre-card-fonction {
    font-size: 0.85rem;
    color: #777;
    padding: 0 0.5rem 1rem;
}

/* Paliers responsive — même logique/ordre que .cards-agenda/.cards-avis :
   tablette avant mobile dans le fichier, pour que la règle mobile
   l'emporte en cascade sous 768px. */
@media (max-width: 1024px) {
    .trombinoscope {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .trombinoscope {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   ACCORDÉON
=========================== */
#accordeon {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
}

.accordeon-item {
    border-bottom: 1px solid #eee;
}

.accordeon-titre {
    width: 100%;
    background: none;
    border: none;
    padding: 1.2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* CSS étape 2 : ~x1.5 (1rem → 1.5rem), unité relative (accessibilité,
       suit l'agrandissement du navigateur) — voir CLAUDE.md. */
    font-size: 1.5rem;
    font-weight: bold;
    color: #1a1a2e;
    text-align: left;
    font-family: inherit;
}

.accordeon-titre:hover {
    color: #e94560;
}

.accordeon-icone {
    font-size: 0.8rem;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.accordeon-titre[aria-expanded="true"] .accordeon-icone {
    transform: rotate(90deg);
}

.accordeon-contenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordeon-contenu p {
    /* CSS étape 2 : ~x1.5 (0.95rem → 1.4rem), line-height inchangé
       (unitless, reste proportionnel à la nouvelle taille). */
    padding: 0 0 1.2rem;
    color: #555;
    line-height: 1.7;
    font-size: 1.4rem;
}