/* font supplémentaire */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

/* surcouche sur css général */
.bl-header {
    background: white;
}

h1,
h2,
h3 {
    /* Gradient doré */
    background: linear-gradient(90deg,
            #F7EAC4 0%,
            #FFBF7A 33%,
            #FAEBC5 66%,
            #FFB363 100%);

    /* Appliquer le gradient au texte */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

h1 {
    font-family: 'Crimson Text';
    font-style: italic;
    letter-spacing: .04em;
    font-size: 3.4vw;
}

h2,
h3 {
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

p {
    color: #FFF1DB;
    font-family: 'Crimson Text';
    font-style: italic;
    letter-spacing: .03em;
    font-weight: 400;
    font-size: 1.5vw;
}

/* --- CONTENU FOND DE PAGE --- */
/* page-chauffe-forte.css */
#page-chauffe-forte {
    position: relative;
    min-height: 366.1vw;
    isolation: isolate;
}

/* Background qui suit le scroll (attaché au container) */
#page-chauffe-forte::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* DESKTOP par défaut */
/* FR */
#page-chauffe-forte[data-locale^="fr"]::before {
    background-image: url("/assets/img/chauffe-forte/BDL_PAGE-DEDIEE_Chauffe forte_FOND_DESKTOP_FR.jpg");
}

/* EN */
#page-chauffe-forte[data-locale^="en"]::before {
    background-image: url("/assets/img/chauffe-forte/BDL_PAGE-DEDIEE_Chauffe forte_FOND_DESKTOP_EN.jpg");
}

/* --- CONTENU HEADER DE PAGE --- */
/* Wrapper video qui définit la zone (et donc le ratio) */
.hero-video {
    position: relative;
    width: 80vw;
    margin: 0 auto;
    /* Desktop = 16/9 */
    aspect-ratio: 16 / 9;
}

/* La vidéo en absolute dans le wrapper */
.hero-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- CONTENU PRINCIPAL DE PAGE --- */
.text-presentation {
    position: absolute;
    top: 75vw;
    width: 32vw;
    text-align: center;
    right: 7vw;
}

.text-presentation p {
    margin-top: 2.2vw;
}

.logo-text {
    margin-top: 84vw;
    margin-left: 7vw;
    width: 36vw;
    text-align: center;
}

.logo-text img {
    width: 7vw;
    margin-bottom: 2vw;
}

.logo-text span {
    color: #FFF1DB;
}

.logo-text .text-clair {
    color: #ffd7ac;
}

.winemaker-note {
    margin-top: 33vw;
}

.winemaker-note .title-container {

    margin-right: auto;
    margin-left: auto;
    width: 90vw;

    padding: 10px 0;
    border-top: 1px solid #FFF1DB;
    border-bottom: 1px solid #FFF1DB;

    position: relative;
    display: flex;
    justify-content: center;
}

.winemaker-note .title-container:before,
.winemaker-note .title-container:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    width: 1px;
    height: 50px;
    background-color: #FFF1DB;
}

.winemaker-note .title-container:before {
    top: -50px;
}

.winemaker-note .title-container:after {
    bottom: -51px;
}

.winemaker-note .title-container h2 {
    font-size: 3vw;
}

.winemaker-note .oenologue-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 2vw;
}

.winemaker-note .oenologue-section div {
    width: 29vw;
    padding-left: 1vw;
    padding-right: 3vw;
}

.winemaker-note .oenologue-section h3 {
    font-size: 2vw;
    margin-top: 2vw;
    margin-bottom: 1vw;
}

.winemaker-note .oenologue-section p {
    font-size: 1.4vw;
}

.winemaker-note .oenologue-section .tasting-notes {
    text-align: right;
}

.content-video {
    position: relative;
    width: 80vw;
    margin: 10vw auto 0;
    /* Desktop = 16/9 */
    aspect-ratio: 16 / 9;
}

.content-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.conclusion {
    margin-top: 18vw;
    text-align: center;
    width: 35vw;
    margin-left: 56vw;
}

.conclusion .text {
    font-style: inherit;
}

.conclusion .citation {
    margin-top: 5vw;
    font-size: 1.8vw;
    font-weight: 200;
}

/* MOBILE */
@media (max-width: 950px) {
    h1 {
        font-size: 9vw;
    }

    p {
        font-size: 4.5vw;
    }

    #page-chauffe-forte[data-locale^="fr"]::before {
        background-image: url("/assets/img/chauffe-forte/BDL_PAGE-DEDIEE_Chauffe forte_FOND_MOBILE_FR.jpg");
    }

    #page-chauffe-forte[data-locale^="en"]::before {
        background-image: url("/assets/img/chauffe-forte/BDL_PAGE-DEDIEE_Chauffe forte_FOND_MOBILE_EN.jpg");
    }

    #page-chauffe-forte {
        min-height: 1357vw;
    }

    .hero-video {
        width: 82vw;
        aspect-ratio: 9 / 16;
    }

    .hero-video__media {
        top: 10vw;
    }

    .text-presentation {
        top: 168vw;
        width: 80vw;
        right: 10vw;
    }

    .text-presentation p {
        margin-top: 5vw;
    }

    .logo-text {
        margin-top: 295vw;
        width: 86vw;
    }

    .logo-text img {
        width: 25vw;
    }

    .logo-text .decalage {
        margin-left: 36vw;
        text-align: left;
    }

    .winemaker-note {
        margin-top: 145vw;
    }

    .winemaker-note .title-container h2 {
        font-size: 7vw;
    }

    .winemaker-note .oenologue-section {
        flex-direction: column;
        margin-top: 12vw;
    }

    .winemaker-note .oenologue-section div {
        width: 80vw;
    }

    .winemaker-note .oenologue-section h3 {
        font-size: 6vw;
        margin-top: 8vw;
        margin-bottom: 4vw;
    }

    .winemaker-note .oenologue-section p {
        font-size: 4.5vw;
        margin-bottom: 2vw;
    }

    .winemaker-note .oenologue-section .tasting-notes,
    .winemaker-note .oenologue-section div {
        text-align: center;

    }

    .content-video {
        width: 82vw;
        aspect-ratio: 9 / 16;
        margin: 20vw auto 0;
    }

    .conclusion {
        width: 80vw;
        margin-top: 16vw;
        margin-left: 10vw;
    }

    .conclusion .citation {
        margin-top: 13vw;
        font-size: 5.8vw;
    }

}