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


/* ── Stabilisation de la scrollbar verticale ──
   .section (parent) a overflow-y: auto. Si la hauteur du contenu varie
   (édition de blocs, ajout/suppression de texte), la scrollbar verticale
   peut apparaître ou disparaître → la largeur utile de la section varie
   de ~15px → .section-content (margin: 0 auto, width: 100%) se recentre/
   redimensionne → le contenu se décale horizontalement.
   scrollbar-gutter: stable réserve l'espace de la scrollbar en permanence,
   éliminant ce risque de shift. Même technique que .histoire-section et
   que structures.css (#subsection-Structures).
   Désactivé sur mobile (≤799px), comme dans structures.css. */
#sectionsContainer .section:nth-child(6) {
    scrollbar-gutter: stable !important;
}

@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(6) {
        scrollbar-gutter: auto !important;
    }
}

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

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

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

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

/* ── Layout : pleine largeur + alignement gauche ──────────── */
/* Formule identique à festival_hef.css : max-width:800px + padding-right:50px.
   .section-content hérite de padding-left:20px et padding-right:20px depuis
   styles.css (padding-right ici surchargé à 50px pour absorber le
   translateX(50px) des blocs).
   Zone de texte utile = max-width − padding-left − padding-right
                       = 800 − 20 − 50 = 730px. */
#sectionsContainer .section:nth-child(6) .section-content,
#sectionsContainer .section:nth-child(6) .section-content-txt {
    max-width    : 800px;
    margin       : 0 auto;
    text-align   : left;
    font-family  : 'Noto Sans', sans-serif;
    padding-right: 50px;
}

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

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

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

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


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

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

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


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

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


/* ════════════════════════════════════════════════
   TYPOGRAPHIE CONTENU
════════════════════════════════════════════════ */
#sectionsContainer .section:nth-child(6) .billet-h3 {
    font-size      : var(--b-h3-size);
    font-weight    : 700;
    color          : var(--b-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(6) .billet-lead {
    font-size   : var(--b-lead-size);
    color       : var(--b-lead-color);
    line-height : 1.7;
    margin      : 0;
    font-weight : 400;
    text-align  : left;
    font-family : 'Noto Sans', sans-serif;
}

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

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

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


/* ════════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════════ */
@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(6) .billet-header {
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(6) .billet-header-eyebrow,
    #sectionsContainer .section:nth-child(6) .billet-titre {
        text-align : left;
    }
    #sectionsContainer .section:nth-child(6) .billet-bloc {
        transform    : translateX(0);
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(6) .section-content,
    #sectionsContainer .section:nth-child(6) .section-content-txt {
        padding-right : 0;
    }
}