@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');


#page-quarante-ans .bandeau {
    display: flex;
    flex-direction: row;

    background-image: url('/assets/img/quarante-ans-BDL/BDL_40ANS_HEADER_DESKTOP.jpg');
    height: 25.7vw;
    background-size: contain;
    background-repeat: no-repeat;
}

#page-quarante-ans .bandeau .image-container {
    margin-left: 4vw;
}

#page-quarante-ans .bandeau .image-container img {
    width: 25vw;
    margin-top: 4vw;
}

#page-quarante-ans .bandeau .text {
    width: 33vw;
    margin-left: 33vw;
    margin-top: 8vw;
    color: white;
    letter-spacing: .01em;
}

#page-quarante-ans .bandeau .text p {
    font-family: "Crimson Text", "serif";
    font-size: 1.4vw;
    text-align: center;
}

/* ====== TIMELINE 40 ANS – DESKTOP ====== */

.timeline-40ans {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.timeline-40ans__wrapper {
    position: relative;
}

.timeline-40ans__picture {
    display: block;
    width: 100%;
}

.timeline-40ans__image {
    display: block;
    width: 100%;
    height: auto;
}

/* Bloc générique */
.timeline-40ans__block {
    position: absolute;
    max-width: 30vw;
    color: #000000;
    font-family: "Crimson Text", "serif";
    z-index: 2;
}

.timeline-40ans__title {
    font-size: 3vw;
    line-height: 1;
    font-weight: 400;
    margin: 0 0 0.5em;
    font-family: "Courgette", cursive;
    text-align: center;
}

.timeline-40ans__title span {
    color: #9F2240;
}

.timeline-40ans__text {
    font-size: 1.2vw;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.timeline-40ans__block .conclusion {
    font-size: 1.3vw;
    margin-top: 3vw;
    text-align: center;
}

/* ---- Positions des blocs FR ---- */

/* DESK */
/* 1 - La Genèse  */
.timeline-40ans__block--1 {
    top: 18vw;
    left: 43vw;
    width: 27vw;
}

/* 2 - Les premières tables  */
.timeline-40ans__block--2 {
    top: 50vw;
    left: 32vw;
}

/* 3 - Cap sur l’international */
.timeline-40ans__block--3 {
    top: 85vw;
    left: 52vw;
}

/* 4 - L’élégance signée  */
.timeline-40ans__block--4 {
    top: 112vw;
    left: 55vw;
}

/* 5 - Alliance fraîcheur & bois  */
.timeline-40ans__block--5 {
    top: 138vw;
    left: 25vw;
}

/* 6 - Le chai à barriques */
.timeline-40ans__block--6 {
    top: 173vw;
    left: 41vw;
    max-width: 36vw;
}

/* 7 - Nouveaux formats, grands terroirs */
.timeline-40ans__block--7 {
    top: 205vw;
    left: 50vw;
}

/* 8 - La touche rosé */
.timeline-40ans__block--8 {
    top: 240vw;
    left: 44vw;
}

/* 9 - « Ce Bordeaux, c’est quelqu’un »  */
.timeline-40ans__block--9 {
    top: 291vw;
    left: 3vw;
    max-width: 27vw;
}

/* 11 - 100% Terra Vitis  */
.timeline-40ans__block--10 {
    top: 328vw;
    left: 62vw;
}

/* 10 - Baron de Lestac à portée de clic !*/
.timeline-40ans__block--11 {
    top: 358vw;
    left: 15vw;
    max-width: 27vw;
}

/* 12 - 40 ans d’histoire  */
.timeline-40ans__block--12 {
    top: 391vw;
    left: 49vw;
}

/* 13 - Aujourd’hui l’histoire continue */
.timeline-40ans__block--13 {
    top: 422vw;
    left: 34vw;
    max-width: 42vw;
}

/* ---- Positions des blocs EN ---- */
/* The Genesis */
.timeline-40ans-en__block--1 {
    top: 18vw;
    left: 44vw;
    width: 25vw;
}

/* At the heart */
.timeline-40ans-en__block--2 {
    top: 49vw;
    left: 34vw;
    width: 25vw;
}

/* Going Global */
.timeline-40ans-en__block--3 {
    top: 85vw;
    left: 52vw;
}

/* A signature elegance */
.timeline-40ans-en__block--4 {
    top: 113vw;
    left: 56vw;
}

/* The perfect balance */
.timeline-40ans-en__block--5 {
    top: 139vw;
    left: 23vw;
}

/* New formats */
.timeline-40ans-en__block--6 {
    top: 175vw;
    left: 54vw;
    max-width: 25vw;
}

/* A rosé touch */
.timeline-40ans-en__block--7 {
    top: 212vw;
    left: 47vw;
    width: 26vw;
}

/* The faces behind */
.timeline-40ans-en__block--8 {
    top: 261vw;
    left: 3vw;
    width: 27vw;
}

/* 100% TV */
.timeline-40ans-en__block--9 {
    top: 300vw;
    left: 62vw;
    max-width: 27vw;
}

/* Baron de Lestac click */
.timeline-40ans-en__block--10 {
    top: 332vw;
    left: 15vw;
    width: 28vw;
}

/* A bold step */
.timeline-40ans-en__block--11 {
    top: 364vw;
    left: 56vw;
    max-width: 27vw;
}

/* BDX best-kept */
.timeline-40ans-en__block--12 {
    top: 395vw;
    left: 10vw;
}

/* 40 years of history */
.timeline-40ans-en__block--13 {
    top: 448vw;
    left: 63vw;
    max-width: 31vw;
}

/* Today the story continues */
.timeline-40ans-en__block--14 {
    top: 480vw;
    left: 29vw;
    max-width: 42vw;
}

@media screen and (max-width: 890px) {
    #page-quarante-ans .bandeau {
        background-image: url('/assets/img/quarante-ans-BDL/BDL_40ANS_HEADER_MOBILE.jpg');
        height: 92.85vw;

        display: flex;
        justify-content: flex-end;
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    #page-quarante-ans .bandeau .image-container img {
        width: 38vw;
        margin-top: 13vw;
        margin-right: 6vw;
    }

    #page-quarante-ans .bandeau .text {
        width: 70vw;
        margin-left: inherit;
        margin-top: 5vw;
        margin-right: 6vw;
    }

    #page-quarante-ans .bandeau .text p {
        font-size: 4.5vw;
        text-align: right;
    }

    .timeline-40ans__block {
        position: absolute;
        max-width: 80vw;
    }

    .timeline-40ans__title {
        font-size: 9vw;
    }

    .timeline-40ans__text {
        font-size: 4.2vw;
        line-height: 1.2;
        margin: 0;
        text-align: center;
    }

    /* ---- Positions des blocs FR ---- */
    /* MOBILE */

    /* 1 - La Genèse  */
    .timeline-40ans__block--1 {
        top: 94vw;
        left: 11vw;
        width: 80vw;
    }

    /* 2 - Les premières tables  */
    .timeline-40ans__block--2 {
        top: 216vw;
        left: 14vw;
    }

    /* 3 - Cap sur l’international */
    .timeline-40ans__block--3 {
        top: 293vw;
        left: 6vw;
        width: 65vw;
    }

    /* 4 - L’élégance signée  */
    .timeline-40ans__block--4 {
        top: 399vw;
        left: 9vw;
    }

    /* 5 - Alliance fraîcheur & bois  */
    .timeline-40ans__block--5 {
        top: 546vw;
        left: 16vw;
    }

    /* 6 - Le chai à barriques */
    .timeline-40ans__block--6 {
        top: 640vw;
        left: 3vw;
        width: 72vw;
    }

    /* 7 - Nouveaux formats, grands terroirs */
    .timeline-40ans__block--7 {
        top: 750vw;
        left: 5vw;
        width: 76vw;
    }

    /* 8 - La touche rosé */
    .timeline-40ans__block--8 {
        top: 974vw;
        left: 15vw;
    }

    /* 9 - « Ce Bordeaux, c’est quelqu’un »  */
    .timeline-40ans__block--9 {
        top: 1107vw;
        left: 6vw;
        max-width: 76vw;
    }

    /* 11 - 100% Terra Vitis  */
    .timeline-40ans__block--10 {
        top: 1305vw;
        left: 24vw;
        width: 72vw;
    }

    .timeline-40ans__block--10 h2 {
        width: 42vw;
        text-align: right;
    }

    /* 10 - Baron de Lestac à portée de clic !*/
    .timeline-40ans__block--11 {
        top: 1448vw;
        left: 10vw;
        max-width: 70vw;
    }

    /* 12 - 40 ans d’histoire  */
    .timeline-40ans__block--12 {
        top: 1612vw;
        left: 18vw;
    }

    /* 13 - Aujourd’hui l’histoire continue */
    .timeline-40ans__block--13 {
        top: 1704vw;
        left: 10vw;
        max-width: 74vw;
    }

    .timeline-40ans__block--13 .conclusion {
        font-size: 4.5vw;
        margin-top: 25vw;
        margin-left: 10vw;
        text-align: center;
        width: 55vw;
    }

    /* ---- Positions des blocs EN ---- */
    /* MOBILE */
    /* The Genesis */
    .timeline-40ans-en__block--1 {
        top: 94vw;
        left: 13vw;
        width: 76vw;
    }

    /* At the heart */
    .timeline-40ans-en__block--2 {
        top: 216vw;
        left: 14vw;
        width: 77vw;
    }

    /* Going Global */
    .timeline-40ans-en__block--3 {
        top: 293vw;
        left: 6vw;
        width: 65vw;
    }

    /* A signature elegance */
    .timeline-40ans-en__block--4 {
        top: 399vw;
        left: 5vw;
    }

    /* The perfect balance */
    .timeline-40ans-en__block--5 {
        top: 546vw;
        left: 18vw;
        max-width: 78vw;
    }

    /* New formats */
    .timeline-40ans-en__block--6 {
        top: 738vw;
        left: 6vw;
        max-width: 71vw;
    }

    /* A rosé touch */
    .timeline-40ans-en__block--7 {
        top: 969vw;
        left: 17vw;
        width: 76vw;
    }

    /* The faces behind */
    .timeline-40ans-en__block--8 {
        top: 1107vw;
        left: 7vw;
        width: 75vw;
    }

    /* 100% TV */
    .timeline-40ans-en__block--9 {
        top: 1305vw;
        left: 24vw;
        width: 72vw;
    }

    .timeline-40ans-en__block--9 h2 {
        width: 42vw;
        text-align: right;
    }

    /* Baron de Lestac click */
    .timeline-40ans-en__block--10 {
        top: 1446vw;
        left: 9vw;
        width: 75vw;
    }

    /* A bold step */
    .timeline-40ans-en__block--11 {
        top: 1571vw;
        left: 21vw;
        max-width: 75vw;
    }

    /* BDX best-kept */
    .timeline-40ans-en__block--12 {
        top: 1764vw;
        left: 9vw;
    }

    /* 40 years of history */
    .timeline-40ans-en__block--13 {
        top: 1919vw;
        left: 22vw;
        max-width: 75vw;
    }

    /* Today the story continues */
    .timeline-40ans-en__block--14 {
        top: 2028vw;
        left: 12vw;
        max-width: 77vw;
    }

    .timeline-40ans-en__block--14 .conclusion {
        font-size: 4.5vw;
        margin-top: 25vw;
        margin-left: 10vw;
        text-align: center;
        width: 55vw;
    }


}