/* ════════════════════════════════════════════════════════════════
   STRUCTURES — Cartes et boutons (style la_saison)
   css/structures.css
   ════════════════════════════════════════════════════════════════ */

/* ── Conteneur des sous-sections ── */
#collectif-subsections {
    width: 100% !important;
}

/* ── Stabilisation de la scrollbar verticale ──
   La .section (parent éloigné) a overflow-y: auto. Au clic d'un bouton de
   sous-navigation, la hauteur du contenu change (placeholder ↔ fiche) → la
   scrollbar verticale peut apparaître ou disparaître → la largeur utile de
   la section varie de ~15px → le .section-content (margin: 0 auto) se
   recentre → le header se décale horizontalement.
   scrollbar-gutter: stable réserve l'espace de la scrollbar en permanence,
   éliminant ce shift. Même technique que .histoire-section.
   Désactivé sur mobile (≤799px) : l'espace réservé à droite créait un
   déséquilibre visuel par rapport au bord gauche des fiches.              */
#sectionsContainer .section:has(#subsection-Structures) {
    scrollbar-gutter: stable !important;
}

@media (max-width: 799px) {
    #sectionsContainer .section:has(#subsection-Structures) {
        scrollbar-gutter: auto !important;
    }
}

/* ── Stabilisation de la largeur du conteneur parent ──
   CAUSE RACINE du décalage horizontal du header au clic :
   .section a display:flex (defini dans styles.css), donc .section-content
   est un flex item. Comme .section-content n'a pas de width explicite
   (juste max-width: 800px et margin: 0 auto), sa largeur est calculée
   selon la largeur intrinsèque de son contenu.
   • Avant clic : le placeholder (width: 100%) étend le container → 800px
   • Après clic : la fiche (width: 600px) → le container rétrécit à ~600px
   → .section-content rétrécit → #subsection-Structures rétrécit → le
   header rétrécit de ~160px et donne l'impression d'un décalage à droite.
   Forcer width: 100% (plafonné par max-width: 800px) fixe le problème
   sans toucher aux autres sections (cible uniquement la section Structures). */
#sectionsContainer .section:has(#subsection-Structures) .section-content,
#sectionsContainer .section:has(#subsection-Structures) .section-content-txt {
    width: 100% !important;
}

/* ── Wrapper pour contenu avec contrainte de largeur ── */
/* Layout calqué sur festival_hef.css → colonne 800px centrée
   • max-width 800px + margin auto → colonne fixe, ne bouge pas selon le contenu
     → le header reste stable au clic d'un bouton (plus de décalage à droite)
   • padding-right 50px → absorbe le translateX(50px) des .structures-bloc
     → placeholder placé exactement comme un .festival-bloc                       */
#subsection-Structures {
    max-width    : 728px !important;  /* ← -17px (745 mesuré à 747px de large, ajusté pour viser 730px) */
    margin       : 0 auto !important;
    padding-right: 50px !important;
    text-align   : left !important;
    position     : relative !important;
    top          : 0 !important;
}
/* Note largeur : le reset global "* { box-sizing: border-box; }" (styles.css)
   fait que max-width INCLUT le padding.
   (Historique : 780px visait 730px de texte mais débordait de 30px à droite ;
   passé à 750px, mesuré ensuite à 745px de contenu visible ; réduit à
   735px pour ramener le contenu visible à 730px.) */

/* ── Décalage de 3px vers la gauche (desktop uniquement, le mobile a son
   propre override plus bas avec max-width:100%). ── */
@media (min-width: 800px) {
    #subsection-Structures {
        left : -16px !important;
    }
}

/* ── Sous-sections ── */
.subsection {
    display: none !important;
}

.subsection.active {
    display: block !important;
    animation: subsectionFadeIn 0.4s ease forwards;
}

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

/* ── En-tête — IDENTIQUE à .saison-page-header ── */
#subsection-Structures .st-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(--st-header-align)) pour affiner si besoin. */
    margin-top: var(--st-header-align, 2rem);
}

#subsection-Structures .st-header-eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.38);
    margin-bottom: 0.6rem;
    text-align: left;
}

#subsection-Structures .st-header-titre {
    font-size: clamp(2.4rem, 6vw, 4.2rem) !important;
    font-weight: 300 !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 1.05 !important;
    text-align: left !important;
    letter-spacing: -0.02em;
    font-family: 'Noto Sans', sans-serif !important;
}

#subsection-Structures .st-header-titre em {
    font-style: italic;
    font-weight: 600;
}

@media (max-width: 799px) {
    #subsection-Structures .st-header {
        padding-left: 0;
        /* Décalage mesuré précisément pour retrouver la même hauteur que
           Festival / Billetterie / Infos sur mobile. Ajustable via --st-header-align-mobile. */
        margin-top: var(--st-header-align-mobile, 12px);
    }
}






/* ════════════════════════════════════════════════════════════════
   BOUTONS DE NAVIGATION — Style Archives
   ════════════════════════════════════════════════════════════════ */

#st-buttons-container {
    position: fixed !important;
    top: calc(180px + var(--content-shift)) !important;
    right: 100px !important;
    z-index: 999 !important;
    
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    
    max-width: 180px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

.st-buttons-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
}

.st-btn {
    padding: 0.55em 1.4em !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !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;
}

/* 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). */
.st-btn:hover {
    background: #e72962 !important;
    color: #ffffff !important;
}

/* État actif — reste rose ── */
.st-btn-active {
    background: #e72962 !important;
    color: #ffffff !important;
}

.st-btn-active:hover {
    background: #e72962 !important;
}

.st-btn:focus {
    outline: none !important;
}

/* ── Bouton toggle déroulant — comportement géré ci-dessous (toutes tailles) ── */
.st-dropdown-toggle {
    display: none; /* valeur de base, écrasée par le bloc dropdown universel ci-dessous */
}

/* ── Affichage structure sélectionnée — comportement géré ci-dessous (toutes tailles) ── */
#st-current-structure {
    display: none; /* valeur de base, écrasée par le bloc dropdown universel ci-dessous */
}

/* ════════════════════════════════════════════════════════════════
   VERSION DÉROULANTE — Menu déroulant (toutes tailles d'écran)
   ════════════════════════════════════════════════════════════════ */
#st-buttons-container {
    position: fixed !important;
    top: calc(180px + var(--content-shift)) !important;
    right: 60px !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 5px !important;
    z-index: 999 !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: visible !important;
}

/* Le toggle devient visible — petit carré avec flèche au centre */
.st-dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0 !important;
    font-weight: 700 !important;
        
    color: #ffffff !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
        
    position: relative !important;
}

/* Flèche ▾ au centre du petit carré */
.st-dropdown-toggle::before {
    content: '▾' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.2s ease !important;
    color: #e72962 !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Flèche retournée quand le menu est ouvert */
#st-buttons-container.st-dropdown-open .st-dropdown-toggle::before {
    transform: translate(-50%, -50%) rotate(180deg) !important;
}

/* ── Flèches Précédent/Suivant — mêmes dimensions que le toggle d'origine,
   mais flèche blanche. Regroupées et serrées dans .st-nav-arrows.       ── */
.st-nav-arrows {
    display: flex !important;
    flex-direction: row !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
}

.st-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    font-size: 0 !important;
    color: #ffffff !important;
    background: #e72962 !important;
    border: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: background 0.2s ease !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. */
.st-nav-btn:hover {
    background: #e72962 !important;
}

.st-prev-btn::before,
.st-next-btn::before {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -58%) !important;
    color: #ffffff !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
}

.st-prev-btn::before { content: '‹' !important; }
.st-next-btn::before  { content: '›' !important; }

/* Cadre noir affichant le nom de la structure sélectionnée */
#st-current-structure {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 24px !important;
    padding: 0 0.8em !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: max-content !important;   /* ← S'élargit pour afficher le nom complet */
    max-width: 90vw !important;      /* ← Garde-fou anti-débordement écran */

    color: #ffffff !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Fond blanc — derrière la liste (z-index inférieur), dépasse de 6px
   en haut et en bas par rapport à la liste pour rester visible aux
   bords pendant le défilement, quelle que soit la position de scroll. */
.st-buttons-nav-wrapper {
    display: none !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    position: absolute !important;
    top: calc(100% + 4px) !important;  /* ← 6px au-dessus du haut de la liste (qui est elle-même à +10px) */
    right: 0 !important;
    width: 280px !important;
    max-width: 90vw !important;
    height: 242px !important;                  /* ← 230px (liste) + 6px haut + 6px bas */
    z-index: 1 !important;
}

/* Liste scrollable — positionnée par-dessus le fond, mêmes dimensions
   horizontales, hauteur normale sans padding supplémentaire.          */
.st-buttons-nav {
    display: none !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
    padding: 6px !important;
    margin-top: 0 !important;
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 280px !important;
    max-width: 90vw !important;
    max-height: 230px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
}

/* Le wrapper et la liste apparaissent quand le conteneur a la classe open */
#st-buttons-container.st-dropdown-open .st-buttons-nav-wrapper {
    display: block !important;
}

#st-buttons-container.st-dropdown-open .st-buttons-nav {
    display: flex !important;
}

/* ════════════════════════════════════════════════════════════════
   CARTES DE STRUCTURES — IDENTIQUE à .saison-cards-container
   ════════════════════════════════════════════════════════════════ */

#st-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 50px !important;
    padding: 0 0 8rem !important;             /* ← Aligné sur .saison-cards-container */
    /* Compense le padding-right: 50px du parent #subsection-Structures
       pour que les fiches restent centrées dans la colonne 800px complète       */
    margin-right: -50px !important;
    margin-top: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;        /* ← Aligné sur .saison-cards-container */
    max-width: none !important;
}

/* ── Placeholder éditable — bloc texte type .structures-bloc, pleine largeur ── */
#st-placeholder {
    width: 100% !important;          /* ← Prend toute la largeur du cards-container */
    flex: 0 0 100% !important;       /* ← Ne se met pas sur la même ligne que les fiches */
}
/* ════════════════════════════════════════════════
   BLOCS STRUCTURES — calqués sur .saison-bloc / .festival-bloc
   Style identique au BLOC 1 de festival_hef.php
   ════════════════════════════════════════════════ */

.structures-bloc {
    margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
    padding-top: clamp(1.5rem, 3vw, 2.5rem) !important;
    border-top: 1px solid rgba(54, 65, 86, 0.15) !important;
    transform: translateX(50px) !important;        /* ← Aligné sur .saison-bloc */
}

.structures-bloc-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
}

.structures-h3 {
    font-size: clamp(1.25rem, 2.8vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #364156 !important;
    margin: 0 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    letter-spacing: -0.01em !important;
    font-family: 'Noto Sans', sans-serif !important;
}

.structures-lead {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem) !important;
    color: #364156 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
    font-family: 'Noto Sans', sans-serif !important;
}

.structures-texte-bloc {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
}

.structures-texte-bloc p {
    font-size: clamp(0.88rem, 1.4vw, 1rem) !important;
    color: rgba(54, 65, 86, 0.75) !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
    font-family: 'Noto Sans', sans-serif !important;
}
/* ── Mobile — calqué sur .saison-bloc ── */
@media (max-width: 799px) {
    .structures-bloc {
        transform: translateX(0) !important;
        padding-left: 0 !important;
    }
}

/* ── Conteneur des boutons de téléchargement ── */
.structures-downloads {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin-top: 1.5rem !important;
    flex-wrap: wrap !important;
}

/* ── Bouton de téléchargement — style cohérent avec les boutons de navigation ── */
.structures-download-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.55em 1.4em !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    
    color: #ffffff !important;
    background: #000000 !important;
    border: none !important;
    border-radius: 2px !important;
    text-decoration: none !important;
    
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* ── Hover — Rose #e72962 ── */
.structures-download-btn:hover {
    background: #e72962 !important;
    color: #ffffff !important;
}

/* ── Focus ── */
.structures-download-btn:focus {
    outline: none !important;
}

/* ── Classe réutilisable pour liens en rose Friche ── */
.liensRose {
    color: #e72962 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: text-decoration 0.2s ease !important;
}

.liensRose:hover {
    text-decoration: underline !important;
    color: #e72962 !important;
}

.liensRose:focus {
    outline: none !important;
}

.st-loading,
.st-empty,
.st-error {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.9rem !important;
    color: rgba(54, 65, 86, 0.7) !important;
    text-align: center !important;
    padding: 16px 0 !important;
    font-style: italic !important;
    opacity: 0.7 !important;
}

/* ── Carte — visuel 200×200 en haut à gauche, méta en haut à droite,
   texte du .md en pleine largeur dans l'espace restant en bas.
   Hauteur libre : la fiche s'adapte à la longueur du texte ── */
.st-card {
    width: 600px !important;
    display: flex !important;
    flex-direction: column !important;     /* ← header (image+méta) puis texte en dessous */
    background: #ffffff !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    flex-shrink: 0 !important;
}

/* ── Header — visuel + méta côte à côte, en haut de la fiche ── */
.st-card-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
}

/* ── Visuel — bloc fixe 200×200, en haut à gauche, ne rétrécit jamais ── */
.st-card-banner {
    width: 200px !important;
    height: 200px !important;
    min-width: 200px !important;
    min-height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    overflow: hidden !important;
    position: relative !important;  /* ← Nécessaire pour empiler les visuels du diaporama */
    background: linear-gradient(135deg, rgba(0,0,0,0.06) 0%, rgba(54,65,86,0.12) 100%) !important;
    flex-shrink: 0 !important;
}

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

/* ── Diaporama en fondu — visuels superposés, un seul visible à la fois ── */
.st-card-banner-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transition: opacity 1s ease !important;
}

.st-card-banner-img-active {
    opacity: 1 !important;
}

/* ── Méta — nom / description / url, à droite du visuel ── */
.st-card-meta {
    flex: 1 1 auto !important;
    min-width: 0 !important;                /* ← Permet au texte de wrap/ellipsis sans déborder */
    height: 200px !important;               /* ← Limite la hauteur à celle du visuel */
    padding: 10px !important;               /* ← Marge uniforme de 10px autour du texte */
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    overflow-y: auto !important;            /* ← Ascenseur vertical si la méta dépasse 200px */
    overflow-x: hidden !important;
    text-align: left !important;   /* ← Force l'alignement gauche (override .section-content center) */
}

/* ── NOM → style TITRE de la_saison ── */
.st-card-titre {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 1.15rem !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: normal !important;         /* ← Autorise le retour à la ligne si le nom est trop long */
    overflow: visible !important;           /* ← Le titre ne doit jamais être tronqué */
}

/* ── URL → style HEURE de la_saison (texte cliquable) ── */
.st-card-lien {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;   /* ← Aligne le <a> inline à gauche */
}

.st-card-lien a {
    display: inline-block !important;
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    color: #e72962 !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;
    cursor: pointer !important;
}

.st-card-lien a:hover {
    color: #e72962 !important;
    text-decoration: underline !important;
}

/* ── DESCRIPTION → style HEURE de la_saison, en corps réduit ── */
.st-card-description {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.65rem !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;
}

/* ── CORPS (reste du .md) → pleine largeur, hauteur libre, sans ascenseur ── */
.st-card-texte {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 20px !important;
    margin: 0 !important;
}

.st-card-texte p {
    font-family: 'Noto Sans', sans-serif !important;
    font-size: 0.9rem !important;
    color: rgba(54, 65, 86, 0.85) !important;
    text-align: left !important;
    line-height: 1.8 !important;
    margin: 0 0 0.5em 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.st-card-texte strong {
    font-weight: 700 !important;
    color: inherit !important;
}

.st-card-texte em {
    font-style: italic !important;
    color: inherit !important;
}

.st-card-texte a {
    color: #e72962 !important;
    text-decoration: none !important;
}

.st-card-texte a:hover {
    text-decoration: underline !important;
}

/* ── Mobile — même présentation que desktop (visuel 200×200, hauteur libre),
   seule la largeur de la fiche passe en pleine largeur ── */
@media (max-width: 799px) {
    #subsection-Structures {
        max-width    : 100% !important;
        padding-right: 0 !important;
    }

    #st-cards-container {
        padding      : 0 0 8rem 0 !important;
        margin-right : 0 !important;
    }

    .st-card {
        width: 100% !important;
    }

    /* ── Lien "site internet" — sur mobile, remplace l'URL affichée par
       "SITE INTERNET" (le href reste inchangé, seul le texte visible change) ── */
    .st-card-lien a {
        font-size : 0 !important;
    }

    .st-card-lien a::after {
        content        : 'Site internet' !important;
        font-family    : 'Noto Sans', sans-serif !important;
        font-size      : 0.65rem !important;
        font-weight    : 600     !important;
        letter-spacing : 0.1em   !important;
        line-height    : 1.7     !important;
        text-transform : uppercase !important;
        color          : #e72962 !important;
    }
}

/* ════════════════════════════════════════════════════════════════
   BOUTON STRUCTURES — décalage mobile uniquement (collé à 20px du bord)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 799px) {
    #st-buttons-container {
        right : 20px !important;
    }
}