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

   Contient 3 groupes (Contact, Adresse, Newsletter) — chacun
   composé d'un .infos-header suivi de plusieurs .infos-bloc.
   ════════════════════════════════════════════════════════════════ */


/* ── Stabilisation de la scrollbar verticale ──
   .section (parent) a overflow-y: auto. Si la hauteur du contenu varie,
   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, structures.css et billetterie.css.
   Désactivé sur mobile (≤799px), comme dans ces mêmes fichiers. */
#sectionsContainer .section:nth-child(7) {
    scrollbar-gutter: stable !important;
}

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

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

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

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

    /* ── Espacement entre les 3 groupes (Contact / Adresse / Newsletter) ── */
    --c-groupe-gap    : clamp(4rem, 9vw, 7rem);

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

/* ── Layout : pleine largeur + alignement gauche ──────────── */
#sectionsContainer .section:nth-child(7) .section-content,
#sectionsContainer .section:nth-child(7) .section-content-txt {
    width        : 100%;           /* ← force la largeur réelle (voir note ci-dessous) */
    max-width    : 795px;          /* ← 730px de texte utile + 50px de padding-right + 15px de compensation (voir note) */
    margin       : 0 auto;
    text-align   : left;
    font-family  : 'Noto Sans', sans-serif;
    padding-right: 50px;           /* ← absorbe le translateX(50px) des blocs */
}
/* Note largeur : mêmes réglages que billetterie.css. Le reset global
   "* { box-sizing: border-box; }" (styles.css) fait que max-width INCLUT
   le padding — avec 730px + padding-right:50px, le texte n'aurait eu que
   680px de large réel. 780px (730+50) compense le padding, et les 15px
   supplémentaires (→795px) compensent la scrollbar verticale de .section
   (avant l'ajout du scrollbar-gutter:stable ci-dessus). Résultat : 730px
   de texte utile, calé sur la largeur de la nav sans logo.
   Note largeur (2) : .section (parent) est en display:flex, donc
   .section-content est un flex item ; sans width explicite sa largeur
   suivrait la largeur intrinsèque de son contenu et non max-width — d'où
   le width:100% pour forcer la colonne à occuper tout l'espace disponible
   (plafonné par max-width). */

/* ── Correctif : même décalage que sur billetterie.css / la_saison.css —
   le contenu apparaissait décalé vers la droite. On repositionne le
   contenu vers la gauche. Valeur de départ reprise de billetterie.css :
   à réajuster au pixel près après vérification visuelle sur cette page. ── */
@media (min-width: 800px) {
    #sectionsContainer .section:nth-child(7) .section-content,
    #sectionsContainer .section:nth-child(7) .section-content-txt {
        position: relative;
        left    : -2px;
    }
}

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

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

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

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


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

/* Tous les en-têtes sauf le premier reçoivent un grand espace
   au-dessus pour matérialiser le passage à un nouveau groupe. */
#sectionsContainer .section:nth-child(7) .infos-bloc + .infos-header {
    margin-top : var(--c-groupe-gap);
}

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

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


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

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


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

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

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

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

/* ── Iframe (carte Google Maps) — 730px sur grand écran, 100% sur mobile ── */
#sectionsContainer .section:nth-child(7) .infos-pull iframe {
    width     : 730px !important;
    max-width : 100%  !important;
}


/* ════════════════════════════════════════════════
   MOBILE
════════════════════════════════════════════════ */
@media (max-width: 799px) {
    #sectionsContainer .section:nth-child(7) .infos-header {
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(7) .infos-header-eyebrow,
    #sectionsContainer .section:nth-child(7) .infos-titre {
        text-align : left;
    }
    #sectionsContainer .section:nth-child(7) .infos-bloc {
        transform    : translateX(0);
        padding-left : 0;
    }
    #sectionsContainer .section:nth-child(7) .section-content,
    #sectionsContainer .section:nth-child(7) .section-content-txt {
        padding-right : 0;
    }
    #sectionsContainer .section:nth-child(7) .infos-pull:has(iframe) {
        display    : block !important;
        width      : 100%  !important;
        max-width  : 100%  !important;
        padding    : 0     !important;
        background : transparent !important;
    }
    #sectionsContainer .section:nth-child(7) .infos-pull iframe {
        width : 100% !important;
    }
}