/* ════════════════════════════════════════════════════════════════
   PAGE : FESTIVAL HEF (Herbe en Friche)
   Fichier : css/festival_hef.css
   ────────────────────────────────────────────────────────────────
   Mise en page : minimalisme éditorial — calquée sur l'INTRO du
                  collectif (css/collectif.css → #subsection-intro).
   Scope : uniquement la section 5 (navigateTo(4)) via :nth-child(5)
   Appelé depuis index.php via :
       <link href="css/festival_hef.css?v=..."> (cache-busting PHP)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   VARIABLES DE CONTRÔLE — copie exacte des valeurs Intro
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) #subsection-festival {

    /* ── Couleurs ── */
    --f-titre-color   : #000000;
    --f-eyebrow-color : rgba(0,0,0,0.38);
    --f-h3-color      : #364156;
    --f-lead-color    : #364156;
    --f-corps-color   : rgba(54,65,86,0.75);
    --f-pull-color    : #364156;
    --f-rule-color    : rgba(54,65,86,0.15);

    /* ── Tailles de police ── */
    --f-titre-size    : clamp(2.4rem, 6vw, 4.2rem);
    --f-eyebrow-size  : 0.7rem;
    --f-h3-size       : clamp(1.25rem, 2.8vw, 1.75rem);
    --f-lead-size     : clamp(0.95rem, 1.6vw, 1.1rem);
    --f-corps-size    : clamp(0.88rem, 1.4vw, 1rem);
    --f-pull-size     : 0.7rem;
    --f-bloc-gap      : clamp(2rem, 5vw, 3.5rem);
    --f-transition    : 0.6s ease;

    /* ── Position verticale des ancres à partir du haut ──────────
       (Journée du 26 / Journée du 27 / Animations)
       Augmenter la valeur si le titre visé apparaît encore trop
       haut / trop caché sous le menu ; la diminuer s'il y a trop
       d'espace vide au-dessus. Réglage séparé mobile / desktop
       ci-dessous — voir bloc d'application juste en dessous :
       "RÉGLAGES ANCRES — MOBILE / DESKTOP". */
    --f-ancre-offset-mobile  : 70px;
    --f-ancre-offset-desktop : 80px;

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

/* ════════════════════════════════════════════════
   RÉGLAGES ANCRES — MOBILE / DESKTOP
   Position verticale (depuis le haut) des ancres visées
   par les boutons Journée du 26 / Journée du 27 / Animations,
   côte à côte pour être modifiées facilement ensemble.

   • MOBILE  (< 800px) : variable --f-ancre-offset-mobile
   • DESKTOP (≥ 800px) : variable --f-ancre-offset-desktop
   Les deux variables sont juste au-dessus, dans
   "VARIABLES DE CONTRÔLE".
════════════════════════════════════════════════ */
@media (max-width: 799px) {
    #hef-ancre-jour26,
    #hef-ancre-jour27,
    #hef-ancre-animations {
        scroll-margin-top : var(--f-ancre-offset-mobile, 70px);
    }
}

@media (min-width: 800px) {
    #hef-ancre-jour26,
    #hef-ancre-jour27,
    #hef-ancre-animations {
        scroll-margin-top : var(--f-ancre-offset-desktop, 70px);
    }
}

/* ── Layout : pleine largeur + alignement gauche ──────────── */
#sectionsContainer .section:nth-child(5) .section-content,
#sectionsContainer .section:nth-child(5) .section-content-txt {
    max-width    : 800px;          /* ← même contrainte que la_saison et billeterie */
    margin       : 0 auto;
    text-align   : left;
    font-family  : 'Noto Sans', sans-serif;
    padding-right: 50px;           /* ← absorbe le translateX(50px) des blocs */
}

/* ════════════════════════════════════════════════
   SOUS-SECTION — fondu d'apparition
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-subsection {
    display : none;
}

#sectionsContainer .section:nth-child(5) .festival-subsection.active {
    display        : block;
    padding-top    : 2rem;
    padding-bottom : 5rem;
    animation      : festivalFadeIn 0.6s ease forwards;
}

@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(5) .festival-subsection.active {
        padding-top : 0.75rem;
    }
}

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


/* ════════════════════════════════════════════════
   EN-TÊTE
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-header {
    margin-bottom : clamp(2.5rem, 6vw, 4.5rem);
    padding-left  : 150px;
}

#sectionsContainer .section:nth-child(5) .festival-header-eyebrow {
    font-size      : var(--f-eyebrow-size);
    font-weight    : 600;
    letter-spacing : 0.2em;
    text-transform : uppercase;
    color          : var(--f-eyebrow-color);
    margin-bottom  : 0.6rem;
    text-align     : left;
}

#sectionsContainer .section:nth-child(5) .festival-titre {
    font-size      : var(--f-titre-size);
    font-weight    : 300;
    color          : var(--f-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(5) .festival-titre em {
    font-style  : italic;
    font-weight : 600;
}

/* ── Bouton téléchargement plaquette — même logique que
   .saison-btn-telecharger (la_saison.css), élément de flux normal
   juste sous le titre, dans le header. ── */
#sectionsContainer .section:nth-child(5) .festival-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;
}

#sectionsContainer .section:nth-child(5) .festival-btn-telecharger:hover {
    background : #e72962;
    color      : #ffffff;
}


/* ════════════════════════════════════════════════
   BLOCS — colonne unique
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-bloc {
    margin-bottom : var(--f-bloc-gap);
    padding-top   : clamp(1.5rem, 3vw, 2.5rem);
    border-top    : 1px solid var(--f-rule-color);
    transform     : translateX(50px);
}

#sectionsContainer .section:nth-child(5) .festival-bloc-body {
    display        : flex;
    flex-direction : column;
    gap            : 1.25rem;
}


/* ════════════════════════════════════════════════
   TYPOGRAPHIE CONTENU
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-h3 {
    font-size      : var(--f-h3-size);
    font-weight    : 700;
    color          : var(--f-h3-color);
    margin         : 0;
    line-height    : 1.15;
    text-align     : left;
    letter-spacing : -0.01em;
    font-family    : 'Noto Sans', sans-serif;
}

#sectionsContainer .section:nth-child(5) .festival-lead {
    font-size   : var(--f-lead-size);
    color       : var(--f-lead-color);
    line-height : 1.7;
    margin      : 0;
    font-weight : 400;
    text-align  : left;
    font-family : 'Noto Sans', sans-serif;
}

#sectionsContainer .section:nth-child(5) .festival-texte-bloc {
    display        : flex;
    flex-direction : column;
    gap            : 0.85rem;
}

#sectionsContainer .section:nth-child(5) .festival-texte-bloc p {
    font-size   : var(--f-corps-size);
    color       : var(--f-corps-color);
    line-height : 1.8;
    margin      : 0;
    font-weight : 400;
    text-align  : left;
    font-family : 'Noto Sans', sans-serif;
}

#sectionsContainer .section:nth-child(5) .festival-pull {
    display        : inline-block;
    font-size      : var(--f-pull-size);
    font-weight    : 700;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    color          : var(--f-pull-color);
    background     : #fff;
    padding        : 0.35em 0.9em;
    border-radius  : 2px;
    align-self     : flex-start;
}


/* ════════════════════════════════════════════════
   SOUS-SECTIONS PROGRAMME — Spectacles / Animations
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .hef-programme-section {
    margin-top : clamp(1.5rem, 3vw, 2.5rem);
}

#sectionsContainer .section:nth-child(5) .hef-programme-section:first-of-type {
    margin-top : 0;
}

#sectionsContainer .section:nth-child(5) .hef-programme-titre {
    font-size      : clamp(1.05rem, 2vw, 1.35rem);
    font-weight    : 700;
    color          : var(--f-h3-color);
    margin         : 0;
    line-height    : 1.15;
    text-align     : left;
    letter-spacing : -0.01em;
    font-family    : 'Noto Sans', sans-serif;
}


/* ════════════════════════════════════════════════
   CADRES PROGRAMME — ÉVÉNEMENTS (festival_hef.js)
   Calqué sur .saison-card (css/la_saison.css)
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .hef-events-container {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 50px;
    padding         : 1.5rem 0 1rem;
    align-items     : flex-start;
    justify-content : flex-start;
}

#sectionsContainer .section:nth-child(5) .hef-loading,
#sectionsContainer .section:nth-child(5) .hef-empty {
    font-size  : var(--f-corps-size);
    color      : var(--f-corps-color);
    font-style : italic;
    opacity    : 0.7;
    padding    : 16px 0;
}

/* ── Cadre individuel ───────────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-card {
    width          : calc(50% - 25px);
    min-height     : 350px;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
    background     : #ffffff;
    transition     : transform 0.18s ease, box-shadow 0.18s ease;
    flex-shrink    : 0;
}

/* ── Bande image ─────────────────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-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;
}

#sectionsContainer .section:nth-child(5) .hef-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…) ── */
#sectionsContainer .section:nth-child(5) .hef-card-banner-img {
    position   : absolute;
    inset      : 0;
    opacity    : 0;
    transition : opacity var(--f-transition);
}

#sectionsContainer .section:nth-child(5) .hef-card-banner-img-active {
    opacity : 1;
}

/* ── Corps du cadre ─────────────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-card-body {
    flex           : 1;
    padding        : 14px 16px 12px;
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    overflow       : hidden;
}

/* ── Titre du cadre ───────────────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-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 — reprend eyebrow ──────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-card-meta {
    font-size      : var(--f-eyebrow-size)  !important;
    font-weight    : 600                    !important;
    letter-spacing : 0.1em;
    text-transform : uppercase;
    color          : var(--f-eyebrow-color) !important;
    line-height    : 1.7                    !important;
    flex-shrink    : 0;
}

/* ── Méta : cie (nom de la compagnie) ─────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-card-meta-cie {
    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.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 secondaire : date / horaires / lieu / tarif / durée / âge minimum ── */
#sectionsContainer .section:nth-child(5) .hef-card-meta-date {
	font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 1.0rem                  !important;
    font-weight    : 800                     !important;
    font-style     : bold                    !important;
    color          : rgba(1,1,1,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;
}



#sectionsContainer .section:nth-child(5) .hef-card-meta-duree,
#sectionsContainer .section:nth-child(5) .hef-card-meta-age-min,
#sectionsContainer .section:nth-child(5) .hef-card-meta-style {
    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,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 : resa (lien vers la page de réservation) ──────────── */
#sectionsContainer .section:nth-child(5) .hef-card-meta-resa {
    font-family    : 'Noto Sans', sans-serif !important;
    font-size      : 0.8rem                  !important;
    font-weight    : 700                     !important;
    letter-spacing : 0.1em                   !important;
    line-height    : 1.7                     !important;
    text-transform : uppercase               !important;
    margin         : 0                       !important;
    padding        : 0                       !important;
}

#sectionsContainer .section:nth-child(5) .hef-card-meta-resa a {
    color           : #e72962 !important;
    text-decoration : none    !important;
    font-weight     : inherit !important;
}

#sectionsContainer .section:nth-child(5) .hef-card-meta-resa a:hover {
    text-decoration : underline !important;
}

/* ── Corps : paragraphes ──────────────────────────────────────── */
#sectionsContainer .section:nth-child(5) .hef-card-texte {
    font-size   : var(--f-corps-size)        !important;
    color       : var(--f-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;
    max-height  : 0                          !important;
    transition  : max-height var(--f-transition);
}

#sectionsContainer .section:nth-child(5) .hef-card-texte.hef-card-texte-expanded {
    max-height : 2000px !important;
}

/* ── Bouton En savoir plus / Moins d'infos (calqué sur la_saison) ── */
#sectionsContainer .section:nth-child(5) .hef-card-toggle {
    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(5) .hef-card-toggle:hover {
    background : #e72962                     !important;
    color      : #ffffff                     !important;
}

#sectionsContainer .section:nth-child(5) .hef-card-toggle:focus {
    outline : none                           !important;
}

#sectionsContainer .section:nth-child(5) .hef-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;
}

#sectionsContainer .section:nth-child(5) .hef-card-texte strong {
    font-weight : 700    !important;
    color       : inherit !important;
}

#sectionsContainer .section:nth-child(5) .hef-card-texte em {
    font-style : italic  !important;
    color      : inherit !important;
}

#sectionsContainer .section:nth-child(5) .hef-card-texte a {
    color           : #e72962 !important;
    text-decoration : none    !important;
    font-weight     : inherit !important;
}

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


/* ════════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════════ */
@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(5) .festival-header {
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(5) .festival-header-eyebrow,
    #sectionsContainer .section:nth-child(5) .festival-titre {
        text-align : left;
    }
    #sectionsContainer .section:nth-child(5) .festival-bloc {
        transform    : translateX(0);
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(5) .section-content,
    #sectionsContainer .section:nth-child(5) .section-content-txt {
        padding-right : 0;
    }
    #sectionsContainer .section:nth-child(5) .hef-card {
        width      : 100%;
        height     : auto;
        min-height : 350px;
    }
}


/* ════════════════════════════════════════════════
   ARCHIVES — AFFICHES DES ÉDITIONS PRÉCÉDENTES
   4 affiches en ligne, largeur répartie sur l'espace
   disponible, hauteur fixe 200px, sans déformation
   (object-fit: contain).
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-archives-affiches {
    display   : flex;
    gap       : 20px;
    margin-top: 1.5rem;
    width     : 100%;
}

#sectionsContainer .section:nth-child(5) .festival-affiche {
    flex       : 1 1 0;
    height     : 200px;
    overflow   : hidden;
    display    : flex;
    align-items    : center;
    justify-content: center;
    background : transparent;
}

#sectionsContainer .section:nth-child(5) .festival-affiche img {
    width      : 100%;
    height     : 100%;
    object-fit : contain;
    display    : block;
}

@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(5) .festival-archives-affiches {
        display          : grid;
        grid-template-columns : 140px 140px;
        justify-content  : center;
        gap              : 20px;
    }
    #sectionsContainer .section:nth-child(5) .festival-affiche {
        width  : 140px;
        height : 200px;
    }
}


/* ════════════════════════════════════════════════
   AFFICHE PRINCIPALE — ÉDITION EN COURS (BLOC 2)
   Centrée horizontalement, sans déformation
   (object-fit: contain).
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(5) .festival-affiche-principale {
    display         : flex;
    justify-content : center;
    width           : 100%;
    margin-top      : 0.5rem;
}

#sectionsContainer .section:nth-child(5) .festival-affiche-principale img {
    max-width  : 100%;
    height     : auto;
    object-fit : contain;
    display    : block;
}


/* ════════════════════════════════════════════════
   BOUTONS FIXES DE NAVIGATION PAR ANCRE
   Même position/comportement que .saison-btn-archives
   (css/la_saison.css) : position fixed, non scopée à la
   section — masquée automatiquement via display:none sur
   .festival-subsection quand la section n'est pas active.
════════════════════════════════════════════════ */
.festival-btn-ancres {
    position : fixed;
    top      : 130px;
    right    : 100px;
    z-index  : 1000;

    display        : flex;
    flex-direction : column;
    gap            : 8px;
}

.festival-btn-ancre {
    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-align     : center;

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

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

.festival-btn-ancre:hover {
    background : #e72962;
    color      : #ffffff;
}

@media (max-width: 799px) {
    #subsection-festival .festival-btn-ancres {
        top   : 70px;
        right : 20px;
    }
}