/* ════════════════════════════════════════════════════════════════
   PAGE : HISTOIRE  —  mise en page minimalisme éditorial
   Fichier : css/histoire.css
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════
   VARIABLES DE CONTRÔLE
════════════════════════════════════════════════ */
.histoire-section {

    /* ── Couleurs ── */
    --h-titre-color:        #000;
    --h-eyebrow-color:      rgba(0,0,0,0.38);
    --h-h2-color:           #364156;
    --h-lead-color:         #364156;
    --h-corps-color:        rgba(54,65,86,0.75);
    --h-pull-color:         #364156;
    --h-label-color:        rgba(255,255,255,0.18);
    --h-rule-color:         #364156;
    --h-liste-color:        #364156;

    /* ── Typographie ── */
    --h-titre-size:         clamp(2.4rem, 6vw, 4.2rem);
    --h-eyebrow-size:       0.7rem;
    --h-h2-size:            clamp(1.25rem, 2.8vw, 1.75rem);
    --h-lead-size:          clamp(0.95rem, 1.6vw, 1.1rem);
    --h-corps-size:         clamp(0.88rem, 1.4vw, 1rem);
    --h-pull-size:          0.7rem;
    --h-label-size:         clamp(3.5rem, 8vw, 6rem);

    /* ── Espacements ── */
    --h-nav-height:         50px;
    --h-nav-margin:         112px;  /* ← 100px → 112px : aligne le header
        Histoire sur le même total que les autres pages (162px), calculé
        depuis styles.css : padding-top 180px du .section-content commun
        - 50px de content-shift + 32px (2rem) de padding-top des
        .xxx-subsection.active = 162px. Histoire n'utilise pas
        .section-content (histoire-section le remplace entièrement dans
        index.php), d'où ce calcul indépendant à recaler manuellement. */
    --h-padding-top:        calc(var(--h-nav-height) + var(--h-nav-margin));
    --h-bloc-gap:           clamp(3rem, 7vw, 5rem);
}


/* ════════════════════════════════════════════════
   LAYOUT GÉNÉRAL — inchangé (gestion du scroll, parallaxe)
════════════════════════════════════════════════ */
.histoire-section {
    display:    block;
    position:   absolute;
    top:    0; left: 0; right: 0; bottom: 0;
    width:  100%    !important;
    max-width: none !important;
    margin: 0       !important;
    padding: 0      !important;
    background-color: #b3ceff;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

.histoire-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
    padding-top:    var(--h-padding-top);
    padding-bottom: 6rem;
    padding-left:  max(1.5rem, calc(50vw - 412.5px));
    padding-right: max(1.5rem, calc(50vw - 412.5px + 80px));
    font-family: 'Noto Sans', sans-serif;
}





/* Note largeur : la constante 405px donnait 730px de contenu en théorie,
   mais mesurée à 715px en réel (écart de 15px, cause probable :
   scrollbar-gutter: stable qui réserve un espace non pris en compte par
   le calc(50vw...), vu ailleurs sur billetterie/infos/structures).
   412.5px (405+7.5) compense cet écart pour revenir à 730px réels.
   Le second paramètre (+80px) n'est pas touché : il sert de buffer pour
   le translateX(50px) des .histoire-bloc — le réduire risquerait de
   faire déborder les blocs à droite. */

/* ── Décalage de 20px vers la droite, desktop uniquement (au-dessus de
   799px, seuil où la nav desktop apparaît). Indépendant du calcul de
   largeur ci-dessus. ── */
@media (min-width: 800px) {
    .histoire-inner {
        left: 25px;
    }
}


/* ════════════════════════════════════════════════
   EN-TÊTE
════════════════════════════════════════════════ */
.histoire-header {
    margin-bottom: clamp(3rem, 7vw, 5.5rem);
    padding-left: 150px;
}

.histoire-header-eyebrow {
    font-size: var(--h-eyebrow-size);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--h-eyebrow-color);
    margin-bottom: 0.6rem;
}

.histoire-titre {
    font-size: var(--h-titre-size);
    font-weight: 300;
    color: var(--h-titre-color);
    margin: 0;
    line-height: 1.05;
    text-align: left;
    letter-spacing: -0.02em;
}
.histoire-titre em {
    font-style: italic;
    font-weight: 600;
}


/* ════════════════════════════════════════════════
   BLOCS THÉMATIQUES — grille label / contenu
════════════════════════════════════════════════ */
.histoire-bloc {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 0 2rem;
    margin-bottom: var(--h-bloc-gap);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid var(--h-rule-color);
    transform: translateX(50px);
}

@media (max-width: 799px) {
    .histoire-header { padding-left: 0; text-align: center; }
    .histoire-header-eyebrow { text-align: center; }
    .histoire-titre { text-align: center; }
    .histoire-bloc {
        grid-template-columns: 1fr;
        transform: translateX(0);
    }
    .histoire-bloc-label { font-size: 2rem; margin-bottom: 0.5rem; }
}

/* Numéro de bloc */
.histoire-bloc-label {
    font-size: var(--h-label-size);
    font-weight: 700;
    color: var(--h-label-color);
    line-height: 1;
    letter-spacing: -0.04em;
    padding-top: 0.1em;
    user-select: none;
}

/* ── Images de label (caravan, bouche) ── */
.histoire-bloc-label img {
    display: block;
    width:      90px;       /* largeur de base */
    height:     auto;
    object-fit: contain;
    position:   relative;
    top:        0px;        /* décalage vertical   — ajuster */
    left:       0px;        /* décalage horizontal — ajuster */
    opacity:    1;
}

/* Réglages individuels par image */
.histoire-bloc:nth-child(2) .histoire-bloc-label img {   /* caravan.png */
    width:  90px;
    top:    0px;
    left:   0px;
}

.histoire-bloc:nth-child(3) .histoire-bloc-label img {   /* bouche.png */
    width:  90px;
    top:    0px;
    left:   0px;
}

/* Contenu du bloc */
.histoire-bloc-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}


/* ════════════════════════════════════════════════
   TYPOGRAPHIE DU CONTENU
════════════════════════════════════════════════ */

/* H2 */
.histoire-h2 {
    font-size: var(--h-h2-size);
    font-weight: 700;
    color: var(--h-h2-color);
    margin: 0;
    line-height: 1.15;
    text-align: left;
    letter-spacing: -0.01em;
}

/* Lead — premier paragraphe de chaque bloc */
.histoire-lead {
    font-size: var(--h-lead-size);
    color: var(--h-lead-color);
    line-height: 1.7;
    margin: 0;
    font-weight: 400;
    text-align: left;
}

/* Pull — chapeau / sous-titre intermédiaire */
.histoire-pull {
    display: inline-block;
    font-size: var(--h-pull-size);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--h-pull-color);
    background: rgba(255,255,255,0.85);
    padding: 0.35em 0.9em;
    border-radius: 2px;
    align-self: flex-start;
}

/* Bloc de corps de texte */
.histoire-texte-bloc {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.histoire-texte-bloc p {
    font-size: var(--h-corps-size);
    color: var(--h-corps-color);
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
    text-align: left;
}

.histoire-texte-bloc p em { font-style: italic; }
.histoire-texte-bloc p strong { font-weight: 700; color: #fff; }

/* Liste */
.histoire-liste {
    margin: 0.25rem 0 0;
    padding-left: 1.1em;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.histoire-liste li {
    font-size: var(--h-corps-size);
    color: var(--h-liste-color);
    line-height: 1.6;
    padding-left: 0.3em;
}

/* Billes : canvas masqué sur mobile */
@media (max-width: 799px) {
    .billes canvas { display: none; }
}

/* Billes : le contenu textuel reste au-dessus du canvas */
.billes > *:not(canvas) {
    position: relative;
    z-index: 1;
}


/* ════════════════════════════════════════════════
   PARALLAXE — inchangé
════════════════════════════════════════════════ */
.histoire-parallax-back,
.histoire-parallax-front {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-bottom: -100vh;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
}
.histoire-parallax-back  { z-index: 0; }
.histoire-parallax-front { z-index: 2; }
.histoire-parallax-back img,
.histoire-parallax-front img {
    position: absolute;
    top: 0;
    display: block;
    will-change: transform;
}

/* ── Scrollbar toujours accessible ── */
.histoire-section::after {
    content: '';
    position: sticky;
    display: block;
    top: 0;
    height: 0;
    margin-left: auto;
    width: var(--scrollbar-width, 17px);
    z-index: 3;
    pointer-events: auto;
}