body{background: #000;}
*{color: white;}

/* =================================
            Section Intro
==================================== */

#intro{
    margin-bottom:  clamp(-270px, -15%, 0px);
    height: clamp(400px, 70vw, 967px);
    min-height: 100vh;
}

#intro .container{
    height: 100%;
}

#intro .fond img{
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    z-index: -1;
}

#intro .container > *{position: relative;}

#intro .fond:before{
    content: "";
    z-index: 0;
    position: absolute;
    bottom: 0; left: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(to bottom, transparent, black);
}

#intro .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#intro svg{
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
    transform: translateY(50%);
    margin-top: clamp(-270px, -15%, 0px);
    max-width: 52%;
    min-width: 200px;
}
#intro svg.animated{opacity: 1;transform: translateY(0);}
#intro h1{text-align: center;}

#intro h1, #intro h1 span{
    color: white;
    font-family: Chewy, sans-serif;
    font-size: clamp(36px, 8vw, 95px);
    line-height: 1.5;
    font-weight: normal;
    text-transform: uppercase;
}

#intro h1.desktop {
    overflow: hidden;
}

#intro h1.mobile{
    display: none;
    font-size: clamp(30px, 15.5vw, 84px);
    opacity: 0;
    transform: translateY(50%);
    transition: transform 1s ease;
    line-height: 1;
    margin-top: 20px;
}

#intro h1.mobile.animated{
    transform: translateY(0);
    opacity: 1;
}

#intro h1 span{
    --i: 0;
    --duration: calc(var(--i) * .05s + .5s);
    display: inline-block;
    transition: transform 0s ease, opacity 0s ease;
    transform: translateY(100%);
    opacity: 0;
}

#intro h1.animated span{
    transition: transform .2s ease var(--duration), opacity .2s ease var(--duration);
    transform: translateY(0);
    opacity: 1;
}

@media (max-width: 480px) {
    #intro h1.desktop{display: none;}
    #intro h1.mobile{display: inline;}
    #intro svg{max-width: 100%; margin-top: 0}
}

/* =================================
            Section Vidéo
==================================== */

#video .container{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1464px;
    position: relative;
    margin-bottom: clamp(-120px, -12vw, 0px);
}

#video .video{
    border: var(--primary) 11px solid;
    position: relative;
    max-width: 72%;
}

#video video{
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    background-color: black;
}

.video-play-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background-color .3s ease;
}

.video-play-overlay svg{
    width: clamp(60px, 20%, 160px);
    transition: opacity .3s ease;
}

.video-play-overlay.is-playing{ background-color: rgba(0, 0, 0, 0); }
.video-play-overlay.is-playing svg{ opacity: 0; }

.video-play-overlay svg circle, .video-play-overlay svg path{
    transform-box: fill-box;
    transform-origin: center;
    transition: r .3s ease, fill .3s ease, stroke .3s ease, stroke-width .3s ease;
    will-change: r, fill, stroke, stroke-width;
}

.video-play-overlay:hover svg circle{
    r: 58px;
    fill: transparent;
    stroke: #FA4570;
    stroke-width: 14px;
}

.video-play-overlay:hover svg path{
    d: path('M67 100.897L67 59.1023L101.069 79.9998L67 100.897Z');
    fill: transparent;
    stroke: #FA4570;
    stroke-width: 14px;
}

.left-img, .right-img{
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.left-img{ left: 0; bottom: 0; transform: translateY(10%); max-width: 25%;}
.right-img{ right: 0; top: 0; transform: translateY(-20%); max-width: 22%;}

@media (max-width: 480px) {
    .left-img, .right-img{z-index: -0}
    #video .video{z-index: 2; max-width: 90%;}
    .left-img{transform: translate(-25%, 20%) rotate(40deg)!important; max-width: 30%;}
    .right-img{transform: translate(30%, -30%) rotate(-40deg)!important; max-width: 30%;}
}

/* =================================
        Section date / lieux
==================================== */

#dates-lieux .deco{ position: absolute; z-index: -1; }
#dates-lieux .rond{ top: 10%; left: 0; transform: translate(-5%, 0); max-width: clamp(120px, 30vw, 427px); transform-origin: left;}
#dates-lieux .carre{ top: 0; right: 0; transform: translate(5%, 0%); max-width: clamp(120px, 30vw, 453px);  transform-origin: right;}
#dates-lieux .triangle{ bottom: 0; left: 0; transform: translate(20%, 21%); max-width: clamp(120px, 40vw, 627px); }
#dates-lieux .deco svg{width: 100%;}

#dates-lieux{ padding: clamp(30px, 30vw, 240px) 0; overflow: hidden;}
#dates-lieux .container{ max-width: 1370px; }
#dates-lieux h2, #dates-lieux h3{ text-align: center; }

#dates-lieux h2{
    font-size: clamp(26px, 7vw, 95px);
    font-family: Chewy, sans-serif;
    font-weight: normal;
}

#dates-lieux h3{
    text-transform: uppercase;
    color: var(--primary);
    font-size: clamp(24px, 11vw, 50px);
    line-height: 1;
}

.map-wrapper{
    display: grid;
    grid-template-columns: minmax(270px, 864px) minmax(350px, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.map-wrapper .map-col{
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-wrapper .map-col svg{ width: 100%; }

.map-col svg .arrows,
.map-col svg .pin-circle{
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .3s ease, d .3s ease;
}

.map-col svg .arrows{ transform: scale(0); }
.map-col svg .pin.active .arrows{ transform: scale(1); }
.map-col svg .pin .pin-circle{transform: scale(.6); cursor: pointer;}
.map-col svg .pin.active .pin-circle{transform: scale(1);}

#dates-lieux .lieu{
    padding: 20px 0;
    opacity: .3;
    transition: opacity .3s ease;
}

#dates-lieux .lieu.active{ opacity: 1; }
#dates-lieux .lieu:not(:last-of-type){ border-bottom: 1px solid white; }

#dates-lieux .date{
    position: relative;
    z-index: 2;
    font-size: clamp(20px, 3vw, 33px);
    padding-left: 20px;
    font-family: Chewy, sans-serif;
    margin-bottom: 15px;
    margin-top: 15px;
}

#dates-lieux .date svg{
    position: absolute;
    left: 0; top: 50%;
    transform: translate(0,-50%);
    z-index: -1;
}

#dates-lieux .time, #dates-lieux .location{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(16px, 5vw, 20px);
}

#dates-lieux .time{ margin-bottom: 10px; }

#dates-lieux .time svg,
#dates-lieux .location svg{
    width: clamp(20px, 5vw, 30px);
}

#dates-lieux .fond{
    display: none;
    position: absolute;
    z-index: -1;
    width: 100%;
    transform: translateY(5%);
}

#dates-lieux .fond img{max-width: 100%; opacity: .75}

@media (max-width: 1024px) {
    #dates-lieux .rond{ top: 25%; }
    .map-wrapper{ grid-template-columns: 1fr; }
    .map-col svg{
        width: 80%;
        max-width: 600px;
    }
    #dates-lieux .deco{display: none;}
}

@media (max-width: 480px) {
    #dates-lieux h2{font-size: 14vw;}
    #dates-lieux .map-col{display: none;}
    #dates-lieux .lieu{opacity: 1;}
    #dates-lieux .fond{display: initial}
}

/* =================================
        Section nouveau bouchon
==================================== */

#bouchon{
    background-color: #306A5E;
    background: radial-gradient(circle at center, #306A5E 0%, #1C433B 100%);
    overflow: hidden;
}

#bouchon .fond{
    position: absolute;
    inset: 0;
}

#bouchon .fond svg{
    width: auto;
    height: auto;
    min-width: 100vw;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
}

#bouchon .fond path{
    --path-delay: calc(var(--delay, 0) * .1s);
    --easing: cubic-bezier(.41,.28,.56,1.41);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .2s var(--easing) var(--path-delay), opacity .2s var(--easing) var(--path-delay);
}

#bouchon .fond path {--path-delay: calc(var(--delay, 0) * 2s);}

@media (min-width: 481px) {
    #bouchon .fond.animated .line path{animation: rotate 15s var(--easing) var(--path-delay) infinite;}
    @keyframes rotate {
        0%{transform: rotate(0deg)}
        3%{transform: rotate(90deg)}
        20%{transform: rotate(90deg)}
        23%{transform: rotate(0deg)}
        100%{transform: rotate(0deg)}
    }
}

#bouchon .container{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: clamp(60px, 12vw, 120px);
    gap: clamp(30px, 12vw, 120px);
}

#bouchon h2{
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

#bouchon h2 svg{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-width: 52%;
    min-width: 160px;
}

#bouchon h2 span{
    position: relative;
    font-family: Chewy, sans-serif;
    font-size: clamp(33px, 7.5vw, 72px);
    color: white;
}

#bouchon h3{
    font-size: clamp(20px, 5vw, 50px);
    font-weight: bold;
    color: white;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
}

#bouchon h3 span{color: var(--tertiary);}

#bouchon h2, #bouchon h3{
    transition: transform 1s ease, opacity 1s ease;
    opacity: 0;
    transform: translateY(50%);
}

#bouchon h3{
    transition-delay: .35s;
}

#bouchon h2.animated, #bouchon h3.animated{
    opacity: 1;
    transform: translateY(0);
}

#bouchon .thumb{
    position: relative;
    max-width: 58%;
}

#bouchon .thumb-wrapper{
    transition: transform 1s ease;
    transform: translateY(100%);
}

#bouchon .thumb.animated .thumb-wrapper{
    transform: translateY(0);
}

#bouchon .slogan{
    position: absolute;
    top: 40%; left: -10%;
    transform: translate(-50%, -50%);
    max-width: 45%;
}

#bouchon .slogan svg{ width: 100%; }

#bouchon .bouchon_text{
    transform: translateY(50%);
    transition: transform 1s ease 1s, opacity 1s ease 1s;
    opacity: 0;
}

#bouchon .bouchon_arrow{
    position: absolute;
    top: 0;
    right: 0;

    transition: transform 1s ease 1.5s, opacity 1s ease 1.5s;
    opacity: 0;
    transform: translate(90%, -110%) scale(.5) rotate(-30deg);
    width: 100%;
    max-width: 70%;
}

#bouchon .thumb.animated .bouchon_text{
    opacity: 1;
    transform: translateY(0);
}

#bouchon .thumb.animated .bouchon_arrow{
    opacity: 1;
    transform: translate(100%, -100%) scale(1) rotate(0);
}

@media (max-width: 480px) {
    #bouchon h2 svg{max-width: 52%;}
    #bouchon h3{font-size: 6.5vw; margin-top: 35px;}
    #bouchon .thumb{width: 110%; max-width: 110%; position: relative}
    #bouchon .container{gap: 120px;}
    #bouchon .slogan{top: 0;left: 26%;max-width: 34%;}
    #bouchon .thumb .bouchon_arrow{transform: translate(80%, 70%) scale(1) rotate(95deg)!important;}
}


/* =================================
        Produits
==================================== */

/*#products{*/
/*    padding-top: 60px;*/
/*}*/

#products img{
    max-width: 100%;
}

#products svg{
    width: 116%;
    transform: translate(-7%, 18%);
    max-width: 116%;
    height: auto;
}

@media (max-width:  480px) {
    #products svg {
        width: 135%;
        transform: translate(-13%, 18%);
        max-width: 135%;
    }
}