@charset "UTF-8";
/* CSS Document */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    overflow-x:hidden;
}

/* ==========================
   HEADER FIXE
========================== */

.top-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#000;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:slideDown 1s ease forwards;
}

.top-bar img{
    height:32px;
    width:auto;
}

@keyframes slideDown{
    from{
        transform:translateY(-100%);
    }
    to{
        transform:translateY(0);
    }
}

/* ==========================
   SECTIONS
========================== */

.section{
    position:relative;
    min-height:85vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

/*.parallax-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    z-index:1;
}*/
	
	.parallax-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    
    z-index:1;

    transform:scale(1);
    transition:transform .85s linear;
    will-change:transform;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.20);
    z-index:2;
}

.content{
    position:relative;
    z-index:3;
    width:min(900px,90%);
    margin:auto;
}

.content.left{
    text-align:left;
}

.content.right{
    text-align:right;
}

/* ==========================
   TYPO
========================== */

h1{
    font-size:clamp(2.5rem,4vw,5rem);
    margin-bottom:15px;
    font-weight:bold;
}

h2{
    font-size:clamp(1.1rem,2vw,1.8rem);
    font-weight:normal;
    margin-bottom:35px;
    max-width:700px;
}

.content.right h2{
    margin-left:auto;
}

.btn{
    display:inline-block;
    padding:15px 35px;
    border:2px solid #fff;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:.9rem;
    letter-spacing:2px;
    transition:.3s;
}

.btn:hover{
    background:#fff;
    color:#000;
}

/* ==========================
   ANIMATIONS
========================== */

.animate-left{
    opacity:0;
    transform:translateX(-100px);
}

.animate-right{
    opacity:0;
    transform:translateX(100px);
}

.animate-left.visible,
.animate-right.visible{
    opacity:1;
    transform:translateX(0);
    transition:all .9s ease;
}

/* ==========================
   FOOTER
========================== */

footer{
    background:#000;
    text-align:center;
    padding:80px 20px;
}

footer img{
    width:120px;
    margin-bottom:30px;
}

footer p{
    color:#ccc;
    font-size:.9rem;
    line-height:1.7;
    max-width:900px;
    margin:auto;
}

.mentions{
    margin-top:20px;
    font-size:.8rem;
}
	
	

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .section{
        min-height:80vh;
    }

    .parallax-bg{
        background-attachment:scroll;
    }

    .content,
    .content.left,
    .content.right{
        text-align:center;
    }

    .content.right h2{
        /*margin:auto;*/
		margin: auto auto 35px auto
    }

    h1{
        font-size:2.2rem;
    }

    h2{
        font-size:1.1rem;
    }

    .btn{
        padding:14px 25px;
    }
}

/* ==========================
   PROMO POPUP
========================== */

.promo-popup{

    position:fixed;

    top:100px;
    right:0px;

    width:320px;

    background:#333;

    padding:35px;

    z-index:9998;

    box-shadow:
        0 12px 35px rgba(0,0,0,.18);

    transform:translateX(120%);
    animation:popupSlideIn .8s ease forwards;
    animation-delay:1s;
}

@keyframes popupSlideIn{

    to{
        transform:translateX(0);
    }
}

.promo-content p{

    color:#fff;

    font-family:Georgia, serif;

    font-size:1.4rem;

    line-height:1.2;

    margin-bottom:40px;
}

.promo-link{

    color:#fff;

    text-decoration:none;

    font-family:Georgia, serif;

    font-size:1.2rem;

    font-weight:bold;

    display:inline-flex;
    align-items:center;
    gap:10px;
}

.promo-link span{

    width:38px;
    height:38px;

    border-radius:50%;

    background:#fff;
    color:#333;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
}

.promo-close{

    position:absolute;

    top:12px;
    right:12px;

    width:30px;
    height:30px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#333;

    cursor:pointer;

    font-size:24px;
    line-height:1;
}

@media(max-width:768px){

    .promo-popup{

        width:calc(100% - 30px);

        right:15px;
        top:75px;

        padding:25px;
    }

    .promo-content p{

        font-size:1.5rem;
        margin-bottom:25px;
    }
}

/* CORRECTION MOBILE POPUP + DÉCALAGE */

html,
body{
    width:100%;
    overflow-x:hidden;
}

@media(max-width:768px){

    .top-bar{
        left:0;
        right:0;
        width:auto;
    }

    .promo-popup{
        left:15px;
        right:15px;
        width:auto;
        max-width:none;

        top:75px;

        padding:30px 25px;

        transform:translateX(120%);
    }

    .promo-content p{
        font-size:1.8rem;
        line-height:1.15;
    }

    .promo-link{
        font-size:1.35rem;
    }

    .promo-close{
        right:12px;
        top:12px;
    }
}