/*
 | Les héros, et les marges de chaque bloc de page.
 |
 | ── Pourquoi les marges sont ICI et non dans les plugins ──────────────────
 |
 | Parce qu'une même section n'a pas les mêmes marges d'une page à l'autre. Le
 | bloc des monuments vaut `96 48` sur l'accueil et `96 48 0 48` sur la page
 | Événement ; les offres perdent leur marge basse sur la page Informations. La
 | marge est donc une décision de **page**, pas de composant.
 |
 | Chaque plugin expose sa marge en variable (`--cw-xxx-marge`) et se donne pour
 | défaut la valeur du Figma : posé seul dans une page, il est déjà juste. Le
 | thème n'intervient que là où la maquette diffère.
 |
 | Toutes les valeurs viennent du Figma, relevées par l'API.
 */

/* ── Le héros ────────────────────────────────────────────────────────────── */

/*
 | Accueil : une photo de 737 px, sans texte. Le Figma n'y met rien — pas de
 | titre, pas de bouton, pas de voile. On n'y met rien non plus.
 */
.bt-hero--image {
    height: 737px;
    overflow: hidden;
}

.bt-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 | Pages intérieures : le titre est posé **en bas** du bloc (`justify: end`), ce
 | qui le rapproche du contenu qu'il annonce plutôt que de le laisser flotter au
 | milieu d'un vide.
 */
.bt-hero--titre {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    padding: 40px 80px 24px;
    text-align: center;
}

.bt-hero-titre {
    margin: 0;
    font-family: var(--bt-titre);
    font-size: var(--bt-display);
    font-weight: 400;
    letter-spacing: var(--bt-display-lettres);
    line-height: var(--bt-display-interligne);
}

.bt-hero-accroche {
    margin: 0;
    font-size: var(--bt-h5);
    letter-spacing: var(--bt-titre-lettres);
    line-height: 1.1;
}

/* ── Les blocs ───────────────────────────────────────────────────────────── */

/*
 | Chaque bloc donne sa marge au plugin qu'il contient, par la variable que
 | celui-ci expose. Le thème ne redessine rien : il place.
 */

.bt-bloc--offres {
    --cw-tun-marge: 80px 48px 48px;
}

/* Sur la page Informations, le bloc du parcours qui suit apporte sa propre
   marge haute de 128 px : les additionner creuserait un trou de 208 px. */
.bt-bloc--sans-bas {
    --cw-tun-marge: 80px 48px 0;
}

.bt-bloc--offres-rangee {
    --cw-tun-marge: 80px 48px;
}

.bt-bloc--cadeau {
    padding: 0 var(--bt-gouttiere);
}

.bt-bloc--parcours {
    --cw-btp-marge: 128px 80px;
}

.bt-bloc--monuments {
    --cw-mon-marge: 96px 48px;
}

.bt-bloc--monuments-clair {
    --cw-mon-marge: 96px 48px 0;
    --cw-mon-fond: var(--bt-fond-clair);
}

.bt-bloc--privatisation {
    --cw-pri-marge: 56px 48px;
}

.bt-bloc--atouts {
    --cw-pou-marge: 96px 80px;
}

.bt-bloc--temoignages {
    --cw-tem-marge: 96px 48px;
}

.bt-bloc--partenaires {
    --cw-par-marge: 56px 0;
}

.bt-bloc--reseaux {
    --cw-res-marge: 80px 0 96px;
}

.bt-bloc--faq {
    --cw-faq-marge: 96px 48px;
}

/* ── Blocs propres au thème ──────────────────────────────────────────────── */

.bt-bloc--photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 56px;
}

.bt-bloc--photo img {
    display: block;
    border-radius: var(--bt-rayon);
}

/* Le corps du tunnel : deux colonnes en réservation, une seule en carte cadeau. */
.bt-bloc--tunnel {
    padding: 48px 48px 80px;
}

.bt-bloc--texte {
    padding: 64px var(--bt-gouttiere) 96px;
}

.bt-prose {
    max-width: 44em;
    font-size: var(--bt-corps-lg);
}

.bt-prose h2 {
    margin: 1.5em 0 0.5em;
}

.bt-article-titre {
    margin: 0 0 1rem;
    font-size: var(--bt-h1);
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

/*
 | Le Figma donne ses propres marges au 375 : ce ne sont pas les valeurs du
 | desktop réduites d'un facteur. La verticale passe de 96 à 64, l'horizontale
 | de 48 à 16, et les écarts internes de 56 à 32.
 */
@media (max-width: 782px) {
    .bt-hero--image {
        height: 722px;
    }

    .bt-hero--titre {
        padding: 32px var(--bt-gouttiere) 24px;
    }

    .bt-bloc--offres {
        --cw-tun-marge: 64px 16px 16px;
    }

    .bt-bloc--sans-bas {
        --cw-tun-marge: 64px 16px 0;
    }

    .bt-bloc--monuments,
    .bt-bloc--atouts,
    .bt-bloc--temoignages,
    .bt-bloc--faq {
        --cw-mon-marge: 64px 16px;
        --cw-pou-marge: 64px 16px;
        --cw-tem-marge: 64px 16px;
        --cw-faq-marge: 64px 16px;
    }

    .bt-bloc--privatisation {
        --cw-pri-marge: 56px 16px;
        /* Le Figma pose un fond sombre sur ce bloc en mobile, et pas en desktop.
           Ce n'est pas un oubli : la section y devient une bande à part entière. */
        --cw-pri-fond: var(--bt-fond-sombre);
    }

    .bt-bloc--reseaux {
        --cw-res-marge: 64px 0;
    }

    .bt-bloc--parcours {
        --cw-btp-marge: 64px 16px;
    }

    .bt-bloc--photo,
    .bt-bloc--tunnel {
        padding: 32px var(--bt-gouttiere) 48px;
    }
}