/* ════════════════════════════════════════════════════════════════
   SECTION LA SAISON — SOUS-SECTIONS AVEC FONDU
   css/la_saison.css
   ════════════════════════════════════════════════════════════════ */

:root {
    --saison-transition  : 0.6s ease;
    --saison-padding-top : 2rem;
    --saison-padding-bot : 5rem;
}
@media (max-width: 799px) {
    :root { --saison-padding-top : 0.75rem; }
}

/* ── Largeur de la colonne — calée sur la nav sans logo (730px) ── */
#sectionsContainer .section:nth-child(4) .section-content,
#sectionsContainer .section:nth-child(4) .section-content-txt {
    max-width : 730px;
}

/* ── Correctif : le contenu apparaissait décalé de 15px vers la droite
   (probablement lié à la scrollbar verticale de .section — cf. le même
   phénomène déjà documenté et corrigé dans structures.css).
   On repositionne tout le contenu de 15px vers la gauche. ── */
@media (min-width: 800px) {
    #sectionsContainer .section:nth-child(4) .section-content,
    #sectionsContainer .section:nth-child(4) .section-content-txt {
        position: relative;
        left    : -12px;
    }
}

@keyframes saisonFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ════════════════════════════════════════════════════════════════
   EN-TÊTE LA SAISON — minimalisme éditorial (aligné sur Histoire)
   ════════════════════════════════════════════════════════════════ */

#sectionsContainer .section:nth-child(4) .section-content-txt {
    --i-titre-color   : #000000;
    --i-eyebrow-color : rgba(0,0,0,0.38);
    --i-h3-color      : #364156;
    --i-lead-color    : #364156;
    --i-corps-color   : rgba(54,65,86,0.75);
    --i-pull-color    : #364156;
    --i-rule-color    : rgba(54,65,86,0.15);

    --i-titre-size    : clamp(2.4rem, 6vw, 4.2rem);
    --i-eyebrow-size  : 0.7rem;
    --i-h3-size       : clamp(1.25rem, 2.8vw, 1.75rem);
    --i-lead-size     : clamp(0.95rem, 1.6vw, 1.1rem);
    --i-corps-size    : clamp(0.88rem, 1.4vw, 1rem);
    --i-pull-size     : 0.7rem;
    --i-bloc-gap      : clamp(2rem, 5vw, 3.5rem);

    font-family : 'Noto Sans', sans-serif;
    width       : 100%;
}

/* ── En-tête ── */
.saison-page-header {
    margin-bottom : clamp(2.5rem, 6vw, 4.5rem);
    padding-left  : 150px;
    /* Aligne le titre sur la même hauteur visuelle que Festival / Billetterie / Infos.
       Ajustez cette valeur (var(--saison-header-align)) pour affiner si besoin. */
    margin-top    : var(--saison-header-align, 2rem);
}

/* ── Alignement horizontal du header uniquement — mesuré à ~33px de trop
   vers la droite par rapport au groupe Histoire / Structures / Festival.
   N'affecte que le header (fiches et blocs de texte non concernés). ── */
@media (min-width: 800px) {
    .saison-page-header {
        position : relative;
        left     : -24px;
    }
}

.saison-header-eyebrow {
    font-size      : var(--i-eyebrow-size);
    font-weight    : 600;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--i-eyebrow-color);
    margin-bottom  : 0.6rem;
    text-align     : left !important;
}

.saison-titre {
    font-size      : var(--i-titre-size)        !important;
    font-weight    : 300                         !important;
    color          : var(--i-titre-color)        !important;
    margin         : 0                           !important;
    line-height    : 1.05                        !important;
    text-align     : left                        !important;
    letter-spacing : -0.02em;
    font-family    : 'Noto Sans', sans-serif     !important;
}

.saison-titre em {
    font-style: italic;
    font-weight: 600;
}

/* ── Bouton téléchargement plaquette — élément de flux normal (pas fixé
   comme .saison-btn-archives), juste sous le titre. Hérite du padding-left
   et de l'alignement de .saison-page-header en étant placé dans le header. ── */
.saison-btn-telecharger {
    display        : block;
    width          : max-content;
    margin-top     : 1.2rem;

    padding        : 0.55em 1.4em;
    font-family    : 'Noto Sans', sans-serif;
    font-size      : 0.7rem;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    line-height    : 1;
    white-space    : nowrap;
    text-decoration: none;

    color          : #ffffff;
    background     : #e72962;
    border         : none;
    border-radius  : 2px;

    cursor         : pointer;
    transition     : background 0.2s ease, color 0.2s ease;
}

.saison-btn-telecharger:hover {
    background : #e72962;
    color      : #ffffff;
}

/* ── Mobile ── */
@media (max-width: 799px) {
    .saison-page-header {
        padding-left : 0;
    }
    .saison-header-eyebrow,
    .saison-titre {
        text-align : left !important;
    }}@media (max-width: 799px) {}


/* ════════════════════════════════════════════════════════════════
   AFFICHE SAISON — visuel centré au-dessus des cadres
   ════════════════════════════════════════════════════════════════ */
.saison-affiche {
    display         : flex;
    justify-content : center;
    align-items     : center;
    margin-bottom   : clamp(2rem, 5vw, 3.5rem);
}

/* Même repère horizontal que .saison-cards-container et .saison-bloc,
   pour rester visuellement centrée par rapport au reste du contenu. */
@media (min-width: 800px) {
    .saison-affiche {
        position : relative;
        left     : 28.5px;
    }
}

.saison-affiche-img {
    max-width     : 100%;
    height        : auto;
    display       : block;
    border-radius : 2px;
}


/* ════════════════════════════════════════════════
   CADRES ÉVÉNEMENTS — Grille 500x350px
   ════════════════════════════════════════════════ */

.saison-cards-container {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 50px;
    padding         : 0 0 8rem;
    align-items     : flex-start;
    justify-content : flex-start;
}

/* Décale les fiches vers la gauche pour caler leur bord gauche sur celui
   du bouton HISTOIRE de la nav desktop (calc(50vw - 336.5px) − la position
   par défaut centrée de la colonne 730px, calc(50vw - 365px), soit +28.5px).
   Uniquement sur desktop : la nav est masquée en dessous de 800px. */
@media (min-width: 800px) {
    #sectionsContainer .section:nth-child(4) .saison-cards-container {
        position: relative;
        left    : 28.5px;
    }
}

/* La pagination est maintenant enfant du container — elle doit s'étendre en pleine largeur */
.saison-cards-container .saison-pagination {
    width : 100%;
    flex  : 0 0 100%;
}

.saison-loading,
.saison-empty {
    font-size  : var(--i-corps-size);
    color      : var(--i-corps-color);
    font-style : italic;
    opacity    : 0.7;
    padding    : 16px 0;
}

/* ── Cadre individuel ───────────────────────────────────────── */
.saison-card {
    width         : 730px;
    min-height : 350px;
    display       : flex;
    flex-direction: column;
    overflow      : hidden;
    //border-top    : 1px solid rgba(54,65,86,0.15);
    background    : #ffffff;
    transition    : transform 0.18s ease, box-shadow 0.18s ease;
    flex-shrink   : 0;
    //box-shadow    : 3px 4px 0px rgba(0,0,0,0.12);
    //border-radius : 0px;
}

/* ── Bande image (100px) ────────────────────────────────────── */
.saison-card-banner {
    width      : 100%;
    height     : 300px;
    min-height : 300px;
    overflow   : hidden;
    position   : relative; /* nécessaire pour l'empilement du diaporama */
    background : linear-gradient(135deg, rgba(0,0,0,0.06) 0%, rgba(54,65,86,0.12) 100%);
    flex-shrink: 0;
}

.saison-card-banner img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
    display         : block;
}

/* ── Diaporama en fondu (plusieurs visuels slug_01.jpg, slug_02.jpg…) ──
   Visuellement identique à un visuel unique tant qu'il n'y en a qu'un. */
.saison-card-banner-img {
    position   : absolute;
    inset      : 0;
    opacity    : 0;
    transition : opacity var(--saison-transition);
}

.saison-card-banner-img-active {
    opacity : 1;
}

/* ── Corps du cadre ─────────────────────────────────────────── */
.saison-card-body {
    flex           : 1;
    padding        : 14px 16px 12px;
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    overflow       : hidden;
}

/* Méta — reprend eyebrow */
#sectionsContainer .section:nth-child(4) .saison-card-meta {
    font-size      : var(--i-eyebrow-size)  !important;
    font-weight    : 600                    !important;
    letter-spacing : 0.1em;
    text-transform : uppercase;
    color          : var(--i-eyebrow-color) !important;
    line-height    : 1.7                    !important;
    flex-shrink    : 0;
}

/* Texte libre — reprend .intro-texte-bloc p */
#sectionsContainer .section:nth-child(4) .saison-card-texte {
    font-size   : var(--i-corps-size)        !important;
    color       : var(--i-corps-color)       !important;
    line-height : 1.8                        !important;
    font-weight : 400                        !important;
    text-align  : left                       !important;
    font-family : 'Noto Sans', sans-serif    !important;
    overflow    : hidden;
    flex        : 1;
    margin      : 0                          !important;
	color       : #000;
}

#sectionsContainer .section:nth-child(4) .saison-card-texte a:hover{ text-decoration: underline; }


/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(4) .section-content-txt {
        padding-top  : calc(50px + 100px);
        padding-left : 0;
    }

    .saison-page-header {
        padding-left : 0;
        /* Décalage mesuré précisément pour retrouver la même hauteur que
           Festival / Billetterie / Infos sur mobile. Ajustable via --saison-header-align-mobile. */
        margin-top   : var(--saison-header-align-mobile, 42px);
    }

    #sectionsContainer .section:nth-child(4) h1 {
        margin-left : 0 !important;
    }

    .saison-card {
        width      : 100%;
        height     : auto;
        min-height : 350px;
    }
}


/* ════════════════════════════════════════════════════════════════
   RÉGLAGES TYPOGRAPHIQUES DES CADRES — ZONE DE CONTRÔLE
   Toutes les valeurs modifiables sont ici, regroupées par élément.
   ════════════════════════════════════════════════════════════════ */

/* ── TITRE DU CADRE (h3) ──────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-titre {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 1.5rem                 !important;
    font-weight    : 700                     !important;
    font-style     : normal                      !important;
    color          : #000000                 !important;
    text-align     : left                    !important;
    letter-spacing : -0.01em                 !important;
    line-height    : 1.2                     !important;
    text-transform : none                    !important;
    text-decoration: none                    !important;
    margin         : 0 0 4px 0              !important;
    padding        : 0                       !important;
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}

/* ── MÉTA : DATE ──────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-date {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 1rem                  !important;
    font-weight    : 700                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,0.6)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── MÉTA : LIEU ──────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-lieu {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.8rem                  !important;
    font-weight    : 650                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,0.38)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── MÉTA : HEURE ─────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-heure {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.8rem                  !important;
    font-weight    : 600                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,1)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── MÉTA : TARIF ─────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-tarif {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.7rem                  !important;
    font-weight    : 600                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,0.38)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── CORPS : PARAGRAPHES ──────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-texte p {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.9rem                  !important;
    font-weight    : 400                     !important;
    font-style     : normal                  !important;
    color          : rgba(54,65,86,0.85)     !important;
    text-align     : left                    !important;
    letter-spacing : 0                       !important;
    line-height    : 1.7                     !important;
    text-transform : none                    !important;
    text-decoration: none                    !important;
    margin         : 0 0 0.5em 0            !important;
    padding        : 0                       !important;
}

/* ── CORPS : GRAS ─────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-texte strong {
    font-weight    : 700                     !important;
    color          : inherit                 !important;
}

/* ── CORPS : ITALIQUE ─────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-texte em {
    font-style     : italic                  !important;
    color          : inherit                 !important;
}

/* ── CORPS : LIENS ────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-texte a {
    color          : #e72962                 !important;
    text-decoration: none                    !important;
    font-weight    : inherit                 !important;
}


/* ════════════════════════════════════════════════════════════════
   NOUVEAUX CHAMPS — Cie, Durée, Âge min
   ════════════════════════════════════════════════════════════════ */

/* ── CIE — Rose Friche, uppercase ── */
#sectionsContainer .section:nth-child(4) .saison-card-cie {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.75rem                 !important;
    font-weight    : 600                     !important;
    color          : #e72962                 !important;
    margin         : 0 0 4px 0               !important;
    padding        : 0                       !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    text-transform : uppercase               !important;
}

/* ── MÉTA : DURÉE ──────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-duree {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.7rem                  !important;
    font-weight    : 600                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,0.38)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── MÉTA : ÂGE MIN ────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(4) .saison-card-meta-age_min {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.7rem                  !important;
    font-weight    : 600                     !important;
    font-style     : normal                  !important;
    color          : rgba(0,0,0,0.38)        !important;
    text-align     : left                    !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    text-decoration: none                    !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

/* ── Texte complet (caché par défaut, animation smooth) ── */
#sectionsContainer .section:nth-child(4) .saison-card-texte-full {
    max-height : 0                           !important;
    overflow   : hidden                      !important;
    transition : max-height 0.3s ease        !important;
}

/* ── Texte preview (1er paragraphe) — ne doit pas prendre tout l'espace ── */
#sectionsContainer .section:nth-child(4) .saison-card-texte-preview {
    overflow    : visible         !important;
    flex        : 0              !important;
    margin      : 0              !important;
}

/* ── Bouton "En savoir plus" ── */
#sectionsContainer .section:nth-child(4) .saison-card-savoir-plus-btn {
    align-self     : flex-start              !important;
    padding        : 0.35em 0.75em           !important;
    margin         : 0.4rem 0 0 0            !important;
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.7rem                  !important;
    font-weight    : 600                     !important;
    letter-spacing : 0.1em                   !important;
    text-transform : uppercase               !important;
    
    color          : #ffffff                 !important;
    background     : #e72962                 !important;
    border         : none                    !important;
    border-radius  : 2px                     !important;
    
    cursor         : pointer                 !important;
    transition     : background 0.2s ease, color 0.2s ease !important;
    flex-shrink    : 0                       !important;
    z-index        : 10                      !important;
}

/* Rose en permanence tant que le bouton est cliquable — pas de dépendance
   à :hover, qui se comporte de façon incohérente sur mobile. */
#sectionsContainer .section:nth-child(4) .saison-card-savoir-plus-btn:hover {
    background : #e72962                     !important;
    color      : #ffffff                     !important;
}

#sectionsContainer .section:nth-child(4) .saison-card-savoir-plus-btn:focus {
    outline : none                           !important;
}


/* ════════════════════════════════════════════════════════════════
   BOUTON FIXE — ARCHIVES
   ════════════════════════════════════════════════════════════════ */

.saison-btn-archives {
    position       : fixed;
    top            : 130px;
    right          : 100px;
    z-index        : 1000;

    padding        : 0.55em 1.4em;
    font-family    : 'Noto Sans', sans-serif;
    font-size      : 0.7rem;
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    line-height    : 1;
    white-space    : nowrap;

    color          : #ffffff;
    background     : #e72962;
    border         : none;
    border-radius  : 2px;

    cursor         : pointer;
    transition     : background 0.2s ease, color 0.2s ease;
}

/* Rose en permanence tant que le bouton est cliquable — pas de dépendance
   à :hover, qui se comporte de façon incohérente sur mobile (état "hover"
   simulé après un tap, parfois maintenu, parfois non). */
.saison-btn-archives:hover {
    background : #e72962;
    color      : #ffffff;
}

/* État actif — mode archives ouvert */
.saison-btn-archives.active {
    background : #e72962;
    color      : #ffffff;
}

.saison-btn-archives.active:hover {
    background : #e72962;
}


/* ════════════════════════════════════════════════════════════════
   PAGINATION ARCHIVES
   ════════════════════════════════════════════════════════════════ */

.saison-pagination {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : 6px;
    padding         : 2rem 0 3rem;
}

.saison-pagination-btn {
    font-family    : 'Noto Sans', sans-serif;
    font-size      : 0.7rem;
    font-weight    : 700;
    letter-spacing : 0.12em;
    text-transform : uppercase;

    min-width      : 2.2em;
    height         : 2.2em;
    padding        : 0 0.6em;

    color          : #000000;
    background     : transparent;
    border         : 1px solid rgba(0,0,0,0.18);
    border-radius  : 2px;
    cursor         : pointer;
    transition     : background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.saison-pagination-btn:hover:not(:disabled) {
    background   : #000000;
    color        : #ffffff;
    border-color : #000000;
}

.saison-pagination-btn.active {
    background   : #000000;
    color        : #ffffff;
    border-color : #000000;
    cursor       : default;
}

.saison-pagination-btn:disabled {
    opacity : 0.25;
    cursor  : default;
}

@media (max-width: 799px) {
    .saison-pagination {
        gap     : 4px;
        padding : 1.5rem 0 2rem;
    }
    .saison-pagination-btn {
        font-size : 0.65rem;
        min-width : 2em;
        height    : 2em;
    }
}


/* ════════════════════════════════════════════════════════════════
   BLOCS DE BAS DE PAGE — Animation / Edito 26
   Calqués sur .festival-titre / .festival-h3 / .festival-lead
   (css/festival_hef.css)
   ════════════════════════════════════════════════════════════════ */

/* ── Titre h1 collé à gauche (identique à "Animations") ── */
#sectionsContainer .section:nth-child(4) .saison-section-titre {
    font-size      : var(--i-titre-size);
    font-weight    : 300;
    color          : var(--i-titre-color);
    margin         : 0;
    line-height    : 1.05;
    text-align     : left;
    letter-spacing : -0.02em;
    font-family    : 'Noto Sans', sans-serif;
}
#sectionsContainer .section:nth-child(4) .saison-section-titre em {
    font-style  : italic;
    font-weight : 600;
}

/* ── Titre h3 collé à gauche (identique à "EDITO 26") ── */
#sectionsContainer .section:nth-child(4) .saison-h3 {
    font-size      : var(--i-h3-size);
    font-weight    : 700;
    color          : var(--i-h3-color);
    margin         : 0;
    line-height    : 1.15;
    text-align     : left;
    letter-spacing : -0.01em;
    font-family    : 'Noto Sans', sans-serif;
}

/* ── Paragraphe de présentation associé (identique à .festival-lead) ── */
#sectionsContainer .section:nth-child(4) .saison-lead {
    font-size   : var(--i-lead-size);
    color       : var(--i-lead-color);
    line-height : 1.7;
    margin      : 0;
    font-weight : 400;
    text-align  : left;
    font-family : 'Noto Sans', sans-serif;
    text-indent : 0 !important;
}

#sectionsContainer .section:nth-child(4) .saison-lead p {
    text-indent : 0 !important;
    margin      : 0 0 0.5em 0;
}

/* ── Espacement entre les deux blocs de bas de page ── */
#sectionsContainer .section:nth-child(4) .saison-bloc {
    margin-bottom : clamp(2rem, 5vw, 3.5rem);
    padding-top   : clamp(1.5rem, 3vw, 2.5rem);
    border-top    : 1px solid rgba(54,65,86,0.15);
}

/* Alignement horizontal identique aux fiches (.saison-cards-container) */
@media (min-width: 800px) {
    #sectionsContainer .section:nth-child(4) .saison-bloc,
    #sectionsContainer .section:nth-child(4) .saison-mentions {
        position : relative;
        left     : 28.5px;
        width    : 730px;
    }
}


/* ════════════════════════════════════════════════════════════════
   MENTIONS OBLIGATOIRES — texte en noir
   À appliquer sur l'élément qui enveloppe le bloc "Mentions obligatoires"
   dans la_saison.php, ex : <div class="saison-mentions">...</div>
   ════════════════════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(4) .saison-mentions {
    color      : #000000 !important;
    text-align : justify  !important;
}

/* ════════════════════════════════════════════════════════════════
   BOUTON ARCHIVES — décalage mobile uniquement (collé à 20px du bord)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 799px) {
    .saison-btn-archives {
        right : 20px;
    }
}