:root {
    --primary: #E63946;
    --black: #000;
    --white: #fff;
    --grey: #F8F9FA;
    --dark-grey: #848484;
}

html{font-size: 16px;}
*{font-family: "Poppins", sans-serif;}

/*# Texte #*/
h1, .h1{font-size: 3rem; font-weight: 600; line-height: 110%; letter-spacing: 0%; margin-bottom: 1rem;}
h2, .h2{font-size: 2rem; font-weight: 600; line-height: 120%; letter-spacing: 0%; margin-bottom: 1.5rem;}
h3, .h3{font-size: 1.5rem; font-weight: 600; line-height: 110%; letter-spacing: 0%;}
.lead{font-size: 1.25rem; font-weight: 300; line-height: 150%; letter-spacing: 0%;}
p{font-size: 1rem; font-weight: 400; line-height: 150%; letter-spacing: 0%;}
a{text-decoration: none; color: var(--black);}
.small{font-size: 0.875rem; font-weight: 400; line-height: 100%; letter-spacing: 0%;}
.surtitle{text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; display: inline-block;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}

.color-white{color: var(--white);}

/*# Classes globales #*/
.bg-grey{background-color: var(--grey); overflow: hidden;}

.shadow{box-shadow: 0px 4px 25px 0px #0000000D;}
.shadow-lg{box-shadow: 0px 2.16px 45.39px -10.81px #00000026, 0px 3.48px 12.17px 0px #00000012;}

.full-width{width: calc(100vw - 8px); position: relative; margin-left: -50vw; left: 50%;}

/*# Buttons #*/
.btn{font-size: 1rem; padding: 1rem 1.5rem; border-radius: .5rem; text-align: center; font-weight: 500; line-height: 150%; display: inline-block;}
.btn.btn-md{padding: 0.75rem 1.25rem;}

.btn.btn-primary{background-color: var(--primary); color: var(--white) !important; border: 1px solid var(--primary) !important;}
.btn.btn-primary:hover{background-color: #be2f3b; color: var(--white) !important;}

.btn.btn-outline-black{background-color: transparent; color: var(--black) !important; border: 1px solid var(--black);}
.btn.btn-outline-black:hover{background-color: var(--black); color: var(--white) !important;}

/*# Header #*/
header{padding-top: 1rem; padding-bottom: 1rem; z-index: 100; transition: ease-in 350ms;}
header.scrolled{padding: 0; backdrop-filter: blur(10px); transition: ease 350ms; background-color: rgba(255, 255, 255, .9);}
header .navbar{padding: .5rem;}
header .navbar .nav-item{margin: 0 .25rem;}
header .navbar .nav-item a{font-weight: 400 !important; transition: 350ms ease; color: var(--black); border: 1px solid transparent;}
header .navbar .nav-item a:hover{border: 1px solid #c2c2c2;}
header button:focus{outline: none !important; box-shadow: none !important;}

.custom-toggler{width: 30px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; background: transparent; border: none; padding: 0; cursor: pointer; z-index: 100; margin-top: .2rem;}
.custom-toggler .bar{height: 3px; width: 100%; background-color: #000; transition: all 0.3s ease-in-out; border-radius: 2px;}
  
.custom-toggler.open .bar:nth-child(1){transform: rotate(45deg) translate(5px, 5px);}
.custom-toggler.open .bar:nth-child(2){opacity: 0;}
.custom-toggler.open .bar:nth-child(3){transform: rotate(-45deg) translate(7.5px, -9px);}
  
/*# Hero-Banner #*/
.hero-banner-illustration{position: relative;  height: 60vh; max-height: 800px; min-height: 700px;}
.hero-banner-illustration .hero-banner-bg{top: 47%; left: 65%; transform: translate(-50%, -50%);}

/*# Description #*/
.desc-wrapper{width: 90%;}
.desc-wrapper .sign{background-image: url('../img/sign.svg'); background-size: contain; background-position: bottom; background-repeat: no-repeat;}

/*# Table Wrapper #*/
.signature-wrapper{display: inline-block; padding: 2.5rem; background-color: white; border-radius: 25px; transition: ease;}
.signature-wrapper .table-wrapper span, .signature-wrapper .table-wrapper td{font-family: "Inter", sans-serif;}
.signature-wrapper .add-banner{display: flex; flex-direction: column; justify-content: center; align-items: center; height: 200px; width: 100%; background-color: rgba(241, 241, 241, 1); border: 1.75px dashed rgba(154, 154, 154, 1); border-radius: 25px; color: rgba(87, 87, 87, 1);}
.witness-signature-1{top: 28%; left: 27%; transform-origin: top left; z-index: 10; scale: .715;}
.witness-signature-2{bottom: 13%; left: 10%; transform-origin: bottom left; scale: .26;}
.witness-signature-3{top: 23%; left: 10%; transform-origin: top left; scale: .23;}
.witness-signature-4{top: 14%; left: 52%; transform-origin: top left; scale: .13;}
.witness-signature-5{top: 18%; right: -13%; transform-origin: top right; scale: .23;}
.witness-signature-6{bottom: 40%; right: -35%; transform-origin: bottom right; scale: .26;}
.witness-signature-7{bottom: 14%; right: -12%; transform-origin: bottom right; scale: .23;}

/*# Arguments #*/
.argument-wrapper{height: 100%; padding: 2.25rem 1.5rem; border-radius: 16px; display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; background-color: var(--white);}

/*# Configurateur #*/
.sign-illustration{left: 50%; margin-left: -50vw; position: absolute; width: calc(100vw - 8px); pointer-events: none; z-index: -1;}
.sign-illustration img{position: absolute; left: 50%; transform: translateX(-85%); top: 0; transform-origin: top;}

.functionality{margin-bottom: 8rem;}

.configurator-title{padding-top: 14.5rem;}

.configurator{padding: 4rem 0;}
.configurator>img{top: 50%; transform: translateY(-50%);}
.configurator .text-wrapper{top: 13%; right: 4%; transform-origin: top right;}
.configurator .text-wrapper .color-picker-wrapper{border-radius: 32px; padding: .125rem 1rem .125rem .125rem; background-color: var(--white); transition: 350ms ease; cursor: pointer;}
.configurator .text-wrapper .color-picker-wrapper label{cursor: pointer;}
.configurator .text-wrapper .color-picker-wrapper:hover{transform: scale(1.05);}
.configurator .text-wrapper .color-picker-wrapper #color-picker{-webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; width: 38px; height: 38px; border: none; cursor: pointer;}
.configurator .text-wrapper .color-picker-wrapper #color-picker::-webkit-color-swatch{border-radius: 50%; border: none;}
.configurator .text-wrapper .color-picker-wrapper #color-picker::-moz-color-swatch{border-radius: 50%; border: none;}
.configurator .text-wrapper .color-picker-wrapper #color-picker::before{content: "\f00c"; font-family: "Font Awesome 6 Pro"; color: var(--white); position: absolute;}

.configurator .signature-wrapper{position: relative !important; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.88); transform-origin: center;}
.configurator .left-arrow{left: 14%; bottom: 30%; transform-origin: left bottom; z-index: 1;}
.configurator .right-arrow{right: 23%; bottom: 17%; transform-origin: right bottom; z-index: 1;}

.configurator .campaign-choice{width: 80%; top: 35%; left: 12%; padding: 1rem; border-radius: 16px; background-color: var(--white);}
.configurator .campaign-choice .img-wrapper{margin-bottom: .5rem; position: relative; transition: 300ms ease;}
.configurator .campaign-choice .img-wrapper:last-child{margin-bottom: 0;}
.configurator .campaign-choice .img-wrapper:hover{transform: scale(1.025);}
.configurator .campaign-choice .img-wrapper.is-used::after{content: '\f058'; font-family: "Font Awesome 6 Pro"; font-weight: 900; color: var(--primary); position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; background-color: var(--white); border-radius: 100%; display: flex; align-items: center;}
.configurator .campaign-choice .img-wrapper img{width: 100%; border-radius: 8px; cursor: pointer; border: solid 2px transparent;}
.configurator .campaign-choice .img-wrapper.is-used img{border: 2px solid var(--primary); position: relative;}

/*# Banners / Swiper #*/
.banners{margin-bottom: 10rem;}
.swiper-container{overflow: hidden; pointer-events: none;}
.swiper-container .swiper-wrapper{height: 110px; transition-timing-function: linear !important;}
.swiper-container .swiper-wrapper .swiper-slide{width: auto; border-radius: 10px;}
.swiper-container .swiper-wrapper .swiper-slide img{height: 100%; width: auto; border-radius: 10px;}

/*# Programation #*/
.programation{margin-bottom: 6rem;}
.programation .banners-wrapper img{width: 90%;}
.programation .banners-wrapper img:nth-child(even){transform: translateX(-15%);}
.programation .banners-wrapper img:nth-child(odd){transform: translateX(10%);}

/*# Compatibility #*/
.compatibility{margin-bottom: 4rem; padding: 6rem 0; overflow: hidden;}
.compatibility .content-wrapper{background-color: var(--primary);}
.compatibility .content-wrapper .text-container{padding: 4rem 0;}
.compatibility .content-wrapper .img-container img{left: 0; top: 50%; transform: translateY(-50%); height: 150%;}

/*# Planification #*/
.planification{margin-bottom: 10rem;}
.planification .red-sign{transform-origin: bottom left; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: 1rem;}
.planification .looks-like{font-size: 3.25rem; font-family: "Gloria Hallelujah", cursive; color: var(--primary); display: inline-block; margin-top: -2rem;}

/*# Mentions Légales #*/
.mentions-legales{padding-top: 8rem; padding-bottom: 10rem;}
.mentions-legales br{display: block !important;}
.mentions-legales section{margin-bottom: 3rem;}

/*# Footer #*/
footer .footer-bg{transform-origin: left bottom; left: 0; bottom: 0; pointer-events: none; width: 100%;}
.footer-menu{padding-bottom: 8rem;}
.footer-menu img{margin-bottom: 2rem;}
.footer-menu a, .footer-menu span{display: block; margin-top: .5rem; line-height: 2rem; transition: 350ms ease;}
.footer-menu a:hover{text-decoration: underline;}
.footer-bottom a{text-decoration: underline;}
.footer-bottom a, .footer-bottom span{display: inline-block; color: var(--dark-grey); line-height: 120%;}

@media (max-width: 1400px){
    /*# Configurator #*/
    .configurator .signature-wrapper{transform: translate(-50%, -50%) scale(.72);}
}

@media (max-width: 1200px){
    /*# Configurator #*/
    .configurator .signature-wrapper{transform: translate(-50%, -50%) scale(.6);}
}

@media (max-width: 991px){
    h1, .h1{font-size: 2.5rem;}
    h2, .h2{font-size: 1.75rem;}
    .lead{font-size: 1rem;}
    p{font-size: .875rem;}

    .btn{font-size: .875rem; padding: .875rem 1.25rem;}

    br{display: none;}
    .signature-wrapper br,
    .planification h2 br{display: block;}

    .full-width{width: calc(100vw);}

    /*# Header #*/
    body.open{overflow: hidden;}
    body.open header{backdrop-filter: blur(10px); transition: ease 500ms; background-color: rgba(255, 255, 255, .9); height: 100dvh;}

    header.scrolled{padding-top: .5rem; padding-bottom: .5rem;}
    header .navbar{padding: 0;}
    header .navbar .navbar-toggler{border: none;}
    header .navbar .container .nav-item{padding-top: 1.5rem;}

    /*# Hero-banner #*/
    .hero-banner .hero-banner-illustration{height: 450px; min-height: 450px; max-height: 450px;}
    .hero-banner .desc-wrapper{padding-top: 3.5rem; width: 100%;}

    .hero-banner-illustration .hero-banner-bg{top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}

    .witness-signature-1{top: 50%; left: 50%; scale: .45; transform: translate(-50%, -50%);}
    .witness-signature-2{bottom: 12%; left: 23%; scale: .16;}
    .witness-signature-3{top: 15%; left: 20%; scale: .13;}
    .witness-signature-4{top: 10%; left: 40%; scale: .1;}
    .witness-signature-5{top: 14%; right: 20%; scale: .13;}
    .witness-signature-6{display: none;}
    .witness-signature-7{bottom: 10%; right: 22%; scale: .13;}
 
    /*# Argument #*/
    .argument-wrapper{padding: 1.75rem 1.5rem;}
    
    /*# Functionality #*/
    .functionality{margin-bottom: 2rem;}
    .functionality .sign-illustration>img{width: 70%;}

    /*# Configurateur #*/
    .sign-illustration{left: 0; margin-left: 0; transform: translateX(-20%);}
    .sign-illustration img{transform: translateX(-80%);}

    .configurator-title{padding-top: 10rem;}

    .configurator .container-signature{position: sticky; top: 75px; z-index: 10; overflow: hidden;}
    .configurator .container-signature .signature-wrapper{transform: scale(.1); left: 0; top: 1.5rem; transform-origin: top left; scale: 1;}
    .configurator .text-wrapper, .configurator .campaign-choice{position: relative !important;}

    .configurator .text-wrapper{top: 0; right: 0;}
    .configurator .campaign-choice{width: 100%; top: 0; left: 0;}


    /*# Banners / Swiper #*/
    .banners{margin-bottom: 2rem;}
    .swiper-container{overflow: hidden;}
    .swiper-container .swiper-wrapper{height: 70px; transition-timing-function: linear !important;}

    /*# Planification #*/
    .planification .looks-like{line-height: 100%; margin-top: -1rem;}
    .planification .red-sign{width: 40%;}

    /*# Footer #*/
    footer{overflow: hidden;}
    .footer-menu{padding-bottom: 3rem;}
    .footer-menu img{margin-bottom: 1rem;}
    .footer-menu a{font-size: .875rem; margin-top: 0rem;}
    .footer-bg{height: 100%;}
}

@media (max-width: 768px){
    /*# Hero-banner #*/
    header img{width: 65%;}

    .witness-signature-1{top: 50%; left: 50%; scale: .45;}
    .witness-signature-2{bottom: 12%; left: 13%; scale: .16;}
    .witness-signature-3{top: 15%; left: 10%; scale: .13;}
    .witness-signature-4{top: 10%; left: 40%; scale: .1;}
    .witness-signature-5{top: 14%; right: 10%; scale: .13;}
    .witness-signature-6{display: none;}
    .witness-signature-7{bottom: 10%; right: 12%; scale: .13;}

    /*# Configurateur #*/
    .functionality .sign-illustration>img{width: 90%;}
    .functionality .sign-illustration img{transform: translateX(-80%);}

    /*# Programation #*/
    .programation{margin-bottom: 4rem;}

    /*# Compatibility #*/
    .compatibility{margin-bottom: 20rem; margin-top: 2rem; overflow: visible;}
    .compatibility .content-wrapper .text-container{padding-top: 2rem; padding-bottom: 7rem;}
    .compatibility .content-wrapper .img-container img{position: absolute; height: auto; width: 100%; top: 0; transform: translateY(-30%);}
}

@media (max-width: 576px){
    /*# Hero-banner #*/
    .witness-signature-1{top: 50%; left: 50%; scale: .45;}
    .witness-signature-2{bottom: 5%; left: 3%; scale: .16;}
    .witness-signature-3{top: 10%; left: 3%; scale: .13;}
    .witness-signature-4{top: 7%; left: 40%; scale: .1;}
    .witness-signature-5{top: 10%; right: 3%; scale: .13;}
    .witness-signature-6{display: none;}
    .witness-signature-7{bottom: 8%; right: 2%; scale: .13;}

    /*# Configurateur #*/
    .functionality .sign-illustration>img{width: 140%;}
    .functionality .sign-illustration img{transform: translateX(-70%);}

    /*# Programation #*/
    .programation{margin-bottom: 0rem;}

    /*# Compatibility #*/
    .compatibility{margin-bottom: 9rem; margin-top: 0rem;}
    .compatibility .content-wrapper .img-container img{transform: translateY(-35%);}

    /*# Planification #*/
    .planification{margin-bottom: 9rem;}
    .planification .looks-like{line-height: 100%; margin-top: -1rem;}
    .planification .red-sign{width: 80%;}
}