@import url("https://siyaraxess.com/tuning-configurateur/css_oswald/style.css");

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://dadiprixchoc34.com/bebas.woff) format('woff');
}


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

body{

font-family: Oswald, sans-serif; text-transform: uppercase ;
background:#111;
}

.hero h1,
.youtube-right h2,
.about-text h2,
.videos-title h1,
.footer-logo h1{

    font-family:'Bebas Neue', sans-serif;

    letter-spacing:2px;

}

/************************************************/

header{

width:100%;
height:80px;

background:
linear-gradient(to bottom,#121212,#070707);

border-bottom:1px solid #7d6222;

position:relative;

overflow:visible;

z-index:10000;

}

/* Effet fumée */

header::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:3px;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        rgba(80,56,15,.20) 6%,
        rgba(146,104,25,.65) 15%,
        rgba(215,177,84,1) 50%,
        rgba(146,104,25,.65) 85%,
        rgba(80,56,15,.20) 94%,
        rgba(0,0,0,0) 100%
    );

    background-size:200% 100%;
    animation:goldLine 8s linear infinite;
}

@keyframes goldLine{

    from{
        background-position:100% 0;
    }

    to{
        background-position:-100% 0;
    }

}

header::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:

radial-gradient(circle at 15% 50%,rgba(255,190,70,.15),transparent 35%),
radial-gradient(circle at 80% 20%,rgba(255,170,50,.08),transparent 30%),
radial-gradient(circle at 40% 90%,rgba(255,180,50,.08),transparent 35%);

opacity:.8;

}

/************************************************/

.container{

position:relative;
z-index:10;

width:95%;
max-width:1600px;

height:80px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

}

/************************************************/


.logo img {
    width: 260px;   /* augmente ou diminue selon le rendu */
    height: auto;
    object-fit: contain;
}
/************************************************/

nav ul{

display:flex;

list-style:none;

gap:35px;

}

nav ul li{

position:relative;

}

nav ul li a{

color:#FFF;

text-decoration:none;

font-size:13px;

font-weight:bold;

transition:.3s;

}

nav ul li:hover a{

color:#C89A2C;

}

nav ul li.active a{

color:#C89A2C;

}

nav ul li.active::after{

content:"";

position:absolute;

left:0;
bottom:-9px;

width:100%;
height:2px;

background:#C89A2C;

}

/************************************************/

.right{

display:flex;

align-items:center;

gap:18px;

}

.right a{

color:white;

font-size:21px;

transition:.3s;

}

.right a:hover{

color:#C89A2C;
transform:scale(1.1);

}



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

.menu-toggle{

    display:none;

    width:42px;
    height:42px;

    cursor:pointer;

    position:relative;

    z-index:999;

}

.menu-toggle span{

    display:block;

    width:30px;
    height:3px;

    margin:6px auto;

    border-radius:50px;

    background:#d7b154;

    transition:.35s;

    box-shadow:0 0 8px rgba(215,177,84,.5);

}

/* Animation X */

.menu-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/* ============================= */

@media(max-width:991px){

nav{

    position:fixed;

    top:80px;
    left:-100%;

    width:100%;
    height:calc(100vh - 80px);

    background:rgba(8,8,8,.97);

    backdrop-filter:blur(12px);

    transition:.4s;

    z-index:998;

}

nav.active{

    left:0;

}

nav ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    gap:35px;

    padding-top:50px;

}

nav ul li{

    width:100%;

    text-align:center;

}

nav ul li a{

    display:block;

    font-size:20px;

    color:white;

    padding:10px 0;

    letter-spacing:1px;

}

.right{

    display:none;

}

.menu-toggle{

    display:block;

}

}

.hero{

    position:relative;

    width:100%;
    min-height:850px;

    background:url("https://dadiprixchoc34.com/header.jpg") center center;
    background-size:cover;
    background-repeat:no-repeat;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(5,5,5,.80),
        rgba(5,5,5,.30),
        rgba(5,5,5,.10)
    );

}



.hero-left{

    width:46%;

}

.hero h1{

    color:white;

    font-size:75px;

    line-height:70px;

    font-weight:900;

}

.hero h1 span{

    color:#dcb45c;

}

.hero h1 strong{

    color:#dcb45c;

}

.hero h3{

    margin-top:18px;

    color:white;

    font-size:20px;

    font-weight:700;

}

@font-face {
    font-family: 'DadiFont';
    src: url('https://dadiprixchoc34.com/dadi.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.hero h2{

    margin-top:25px;

    color:#d7b154;

    font-size:42px;

    font-family:'DadiFont', cursive;

    font-weight:normal;

    text-transform:none;

}
.hero p{

    margin-top:30px;

    color:#d8d8d8;

    line-height:34px;

    font-size:20px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

}

.btn-gold{

    padding:18px 34px;

    background:#d4a948;

    color:white;

    text-decoration:none;

    font-weight:bold;

    border-radius:8px;

    transition:.3s;

}

.btn-gold:hover{

    background:#e2bd69;

}

.btn-dark{

    padding:18px 34px;

    border:1px solid #b78d39;

    color:white;

    text-decoration:none;

    border-radius:8px;

    transition:.3s;

}

.btn-dark:hover{

    background:#b78d39;

}

.hero-stats{

    display:flex;

    gap:55px;

    margin-top:65px;

}

.hero-stats div{

    display:flex;

    flex-direction:column;

}

.hero-stats span{

    color:#d7b154;

    font-size:46px;

    font-weight:bold;

}

.hero-stats small{

    color:white;

    margin-top:8px;

    font-size:14px;

}

.hero-content{

    position:relative;

    z-index:2;

    width:90%;
    max-width:1500px;

    margin:auto;

    min-height:850px;

    display:flex;
    align-items:center;

}

.pub{

    width:730px;
    height:70px;

    margin:-35px auto 0 auto; /* Chevauche le hero */

    position:relative;
    z-index:50;

    border:1px solid rgba(197,154,60,.55);

    background:rgba(0,0,0,.30);

    backdrop-filter:blur(3px);

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

.pub::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,200,90,.08),
        transparent
    );

}

.pub{
	
	

    color:#d7b154;

    font-size:26px;

    font-weight:bold;

    letter-spacing:1px;

}

.pub small{

    color:#8d8d8d;

    font-size:13px;

    margin-top:5px;

}

.pub-badge{

    position:absolute;

    right:8px;
    bottom:6px;

    font-size:10px;

    color:#111;

    background:#d7b154;

    padding:2px 6px;

    border-radius:2px;

    font-weight:bold;

}


.youtube-section{

    padding:15px 0;

    background:#090909;

}

.youtube-container{

    width:92%;
    max-width:1600px;

    margin:auto;

    border:1px solid rgba(200,160,60,.35);

    border-radius:8px;

    overflow:hidden;

    display:flex;

    background:#0d0d0d;

}

.youtube-left{

    width:70%;

    position:relative;

}

.youtube-left img{

    width:100%;

    display:block;

}

.youtube-left{

    width:68%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#000;

    padding:20px;

}


.youtube-left video{

    width:auto;

    max-width:100%;

    height:650px;

    max-height:70vh;

    border-radius:12px;

    object-fit:contain;

}

.play-btn{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    border-radius:50%;

    border:2px solid #d7b154;

    background:rgba(0,0,0,.45);

    color:#d7b154;

    display:flex;

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

    font-size:34px;

    text-decoration:none;

    transition:.35s;

}

.play-btn:hover{

    transform:translate(-50%,-50%) scale(1.1);

    box-shadow:0 0 30px rgba(215,177,84,.6);

}

.youtube-right{

    width:30%;

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.youtube-right h2{

    color:white;

    font-size:42px;

    line-height:48px;

    margin-bottom:25px;

    font-weight:800;

}

.youtube-right h2 span{

    display:block;

    color:#d7b154;

}

.youtube-right p{

    color:#cfcfcf;

    line-height:32px;

    margin-bottom:35px;

    font-size:18px;

}

.youtube-right ul{

    list-style:none;

}

.youtube-right li{

    color:white;

    margin-bottom:18px;

    font-size:18px;

    display:flex;

    gap:12px;

    line-height:30px;

}

.youtube-right li i{

    color:#d7b154;

    margin-top:5px;

}

.youtube-btn{

    margin-top:40px;

    align-self:flex-start;

    padding:18px 30px;

    border:1px solid #d7b154;

    border-radius:5px;

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.35s;

}

.youtube-btn i{

    color:#d7b154;

    margin-right:12px;

}

.youtube-btn:hover{

    background:#d7b154;

    color:#111;

}

.youtube-btn:hover i{

    color:#111;

}

/* ============================
   SECTION QUI SUIS-JE
============================ */

.about-section {

    width:100%;
    min-height:420px;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.85)
    ),
  

    background-size:cover;
    background-position:center;

    padding:40px 0;

    overflow:hidden;

}



.about-container {

    max-width:1400px;
    margin:auto;

    display:flex;
    align-items:center;

    gap:25px;

    padding:0 40px;

}



/* TEXTE */

.about-text {

    width:32%;

    color:white;

}



.about-text h2 {

    font-size:34px;

    font-weight:800;

    margin-bottom:20px;

    letter-spacing:1px;

}



.about-text p {

    font-size:15px;

    line-height:1.7;

    color:#ddd;

    max-width:360px;

}



.signature {

    margin-top:20px;

    font-family:'DadiFont', cursive;

    font-weight:normal;

    text-transform:none;

font-size:45px;

color:#d7b154;

}



.about-btn {


    display:inline-block;

    margin-top:25px;

    padding:13px 25px;

    border:1px solid #c79b28;

    color:white;

    text-decoration:none;

    font-size:13px;

    transition:.3s;

}



.about-btn:hover {

    background:#c79b28;

    color:#000;

}




/* IMAGE CENTRALE */


.about-main-image{

    width:35%;

    height:420px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-main-image video{

    width:360px;
    height:360px;

    object-fit:cover;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(215,177,84,.25);

    filter:drop-shadow(0 20px 30px rgba(0,0,0,.7));

    background:transparent;

}

.about-video-circle{

    width:360px;
    height:360px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(215,177,84,.25);

    box-shadow:0 20px 35px rgba(0,0,0,.55);

}

.about-video-circle video{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

}



.about-main-image img {

    width:100%;

    max-height:420px;

    object-fit:contain;

    filter:drop-shadow(0 20px 30px black);

}



/* GALERIE */


.about-gallery {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;

}


.about-gallery img {

    width: 100%;
    height: 180px;

    object-fit: contain;
	    cursor: pointer;

    background: #111;

    border-radius: 10px;

    display: block;

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}


.about-gallery img:hover {

    transform: translateY(-8px) scale(1.03);

    box-shadow: 0 10px 25px rgba(215,177,84,0.25);

}

.videos-section{

    width:95%;
    margin:20px auto;

    background:#080d0f;

    border:1px solid #554521;

    border-radius:6px;

    padding:15px;

    color:white;


}



/* HEADER VIDEOS */

.videos-header{

    display:flex;

    gap:30px;

}




.videos-title{

    width:180px;

    display:flex;
    flex-direction:column;

    justify-content:center;   /* Centre verticalement */
    align-items:center;       /* Centre horizontalement */

    text-align:center;

    padding:0;

}



.videos-title h3{

    color:#d7a947;

    font-size:18px;

    margin:0;
	font-family: Oswald, sans-serif; text-transform: uppercase ;
}



.videos-title h1{

    font-size:19px;

    line-height:22px;

    margin:5px 0 25px;

}




.videos-title button{

    background:#090d10;

    color:white;

    border:1px solid #b28a35;

    padding:10px 15px;

    font-size:11px;

    cursor:pointer;

}




/* CARTES */

.videos-list{

    flex:1;

    display:flex;

    gap:10px;

}



.video-card{

    flex:1;

    aspect-ratio:9/16;

    border-radius:10px;

    overflow:hidden;

    position:relative;

    background:#111;

    text-decoration:none;

    transition:.35s;

}



.video-image{

    width:100%;

    height:100%;

    position:relative;

}



.video-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}




.play{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:55px;
    height:55px;

    border-radius:50%;

    background:rgba(0,0,0,.6);

    color:#fff;

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

    font-size:22px;

}

.video-card:hover{

    transform:translateY(-8px);

    box-shadow:0 12px 30px rgba(215,177,84,.35);

}











/* PUBLICITES */


.pub-container{

    margin-top:12px;

    display:flex;

    justify-content:space-between;

    gap:10px;

}



.pub-box{

    height:80px;

    border:1px solid #765b1d;

    background:#090d0f;

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
	
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



.pub-box.small{

    width:20%;

}



.pub-box.big{

    width:60%;

}



.pub-box span{

    position:absolute;

    top:5px;

    right:5px;

    font-size:9px;

    background:#d6a53d;

    color:#111;

    padding:2px 4px;

}



.pub-box h3{

    color:#d6a53d;

    font-size:13px;

    margin:0;

}



.pub-box p{

    color:#d6a53d;

    font-size:11px;

    margin:5px;

}


.footer{

    width:95%;

    margin:20px auto 0;

    color:white;


}




/* HAUT FOOTER */


.footer-top{

    display:flex;

    gap:20px;

    align-items:stretch;

}


.stats-box,
.partners-box{

    flex:1;

    display:flex;

    flex-direction:column;

    border:1px solid #59451c;

    border-radius:5px;

    padding:15px;

    background:#080d0f;


}



.stats-box{

    width:471px;
    max-width:100%;

}

.partners-box{

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

}



.stats-box h3{
	    text-align:center;

    margin:0 0 15px;

    color:#d6a43b;

    font-size:14px;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



.stats-list{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
}



.stat-card{


    width:70px;

    height:80px;

    border:1px solid #61491b;

    border-radius:6px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


}



.stat-card img{

    width:25px;

    height:25px;

    object-fit:contain;

}



.stat-card strong{

    color:#e0ad45;

    margin-top:5px;

    font-size:15px;

}



.stat-card small{

    font-size:9px;

    color:white;

}







/* PARTENAIRES */


.partners-box h3{
	
	  text-align:center;

    font-size:14px;

    margin:0 0 20px;
	
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}


.partners{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;

    justify-items:center;
    align-items:center;

    width:100%;

}



.partners img{

    max-width:100px;

    max-height:35px;

    object-fit:contain;

}



.dots{

    text-align:center;

    color:#aaa;

    font-size:12px;

    margin-top:10px;

}






/* FOOTER BAS */


.footer-bottom{


    margin-top:15px;

    display:flex;

    align-items:center;

    justify-content:space-between;


    border-top:1px solid #252525;

    padding-top:20px;


}




.footer-bottom > div{


    padding:0 20px;

    border-right:1px solid #222;
		font-family: Oswald, sans-serif; text-transform: uppercase ;


}




.footer-logo h1{


    margin:0;

    color:#d7a63e;

    font-size:25px;


}



.footer-logo span{

    color:#d7a63e;

    font-size:10px;

}




.footer-bottom h4{


    font-size:12px;

    margin:0 0 10px;


}




.footer-bottom p{

    font-size:11px;

    color:#ddd;

    line-height:17px;

}





.footer-social img{


    width:22px;

    height:22px;

    margin-right:8px;

}





.copyright{

    border-right:none!important;

}

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


@media(max-width:768px){


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

header{
    width:100%;
    height:100px;
}


.container{
    height:100px;
}

.logo{
    display:flex;
    align-items:center;
    height:100%;
    position:relative;
    z-index:20;
}

.logo img{
    width:280px;
    height:auto;
    display:block;
	  transform:translateY(8px);
}



/* =========================
   HERO
========================= */

.hero{

    min-height:auto;
    padding-bottom:50px;
    background-position:center;
	   transition:background-image .8s ease;

}


.hero-content{

    width:90%;
    min-height:auto;
    padding-top:80px;

}


.hero-left{

    width:100%;
    text-align:center;

}


.hero h1{

    font-size:42px;
    line-height:42px;

}


.hero h3{

    font-size:15px;
    line-height:22px;

}


.hero h2{

    font-size:30px;

}


.hero p{

    font-size:16px;
    line-height:26px;

}


.hero-buttons{

    flex-direction:column;
    gap:15px;

}


.btn-gold,
.btn-dark{

    width:100%;
    text-align:center;

}



/* =========================
   STATS HERO
========================= */


.hero-stats{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin-top:40px;

}


.hero-stats span{

    font-size:32px;

}



/* =========================
   PUBLICITE HAUT
========================= */


.pub{

    width:90%;
    height:70px;
    font-size:20px;

}




/* =========================
   YOUTUBE
========================= */


.youtube-section{

    padding:0px 0;

}


.youtube-container{

    width:90%;
    flex-direction:column;

}


.youtube-left,
.youtube-right{

    width:100%;

}


.youtube-right{

    padding:25px;

}


.youtube-right h2{

    font-size:30px;
    line-height:35px;

}


.youtube-right p{

    font-size:16px;

}




/* =========================
   ABOUT
========================= */


.about-section{

    padding:40px 0;

}


.about-container{

    flex-direction:column;
    padding:0 20px;

}


.about-text,
.about-main-image,
.about-gallery{

    width:100%;
    text-align:center;

}


.about-text p{

    margin:auto;

}


.about-main-image{

    height:auto;

}


.about-main-image img{
	

    max-height:350px;

}





/* =========================
   VIDEOS
========================= */


.videos-section{

    width:92%;

}


.videos-header{

    flex-direction:column;

}


.videos-title{

    width:100%;
    text-align:center;

}


.videos-list{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;

}


.video-card{

    width:100%;

}


.video-image{

    width:100%;
    height:100%;

    position:relative;

}



/* =========================
   PUBLICITES BAS
========================= */


.pub-container{

    flex-direction:column;

}


.pub-box.small,
.pub-box.big{

    width:100%;

}





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


.footer{

    width:92%;
    margin:30px auto;

}


.footer-top{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:20px;

}


.stats-box,
.partners-box{

    background:#080d0f;

    border:1px solid #59451c;

    border-radius:5px;

    padding:15px;

    display:flex;
    flex-direction:column;

    flex:1;
}



/* TITRES FOOTER */


.stats-box h3,
.partners-box h3{

    text-align:center;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



/* CARTES CHIFFRES */


.stats-list{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;

}


.stat-card{

    width:100%;
    height:75px;

}


.stat-card img{

    width:22px;
    height:22px;

}


.stat-card strong{

    font-size:12px;

}


.stat-card small{

    font-size:8px;

}



/* PARTENAIRES */


.partners{

    grid-template-columns:repeat(3,1fr);
    gap:15px;

}


.partners img{

    max-width:70px;
    margin:auto;

}





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


.footer-bottom{

    flex-direction:column;

    gap:0;

    text-align:center;

    border-top:1px solid rgba(215,177,84,.2);

    padding-top:20px;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



.footer-bottom > div{

    width:100%;

    padding:25px 10px;

    border-right:none!important;

    border-bottom:1px solid rgba(255,255,255,.08);
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



.footer-bottom > div:last-child{

    border-bottom:none;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



/* LOGO */


.footer-logo h1{

    font-size:38px;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}


.footer-logo span{
	
		font-family: Oswald, sans-serif; text-transform: uppercase ;

    font-size:12px;

}



/* TEXTE */


.footer-bottom h4{

    color:#d7a63e;

    font-size:13px;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}


.footer-bottom p{

    font-size:12px;
    line-height:20px;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}



/* RESEAUX */


.footer-social div{

    display:flex;

    justify-content:center;
		font-family: Oswald, sans-serif; text-transform: uppercase ;

}


.footer-social img{

    width:30px;
    height:30px;

    margin:8px;

}




}



/* =========================
   PETIT TELEPHONE
========================= */


@media(max-width:480px){
	
.about-gallery{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;

}

.about-gallery img{

    width:100%;
    height:auto;

    display:block;

    border-radius:10px;

    object-fit:contain;

    cursor:pointer;

    transition:.35s;

}

.about-gallery img:hover{

    transform:scale(1.04);

}


.about-gallery img:active{

    transform:scale(.96);

}
	
	
	
	/* PARCOURS MOBILE */


.parcours-section{

    padding:40px 0;

}


.parcours-title span{

    width:50px;

}


.timeline{


    flex-direction:column;

    gap:35px;

}



.timeline-line{


    width:1px;

    height:85%;

    left:50%;

    top:40px;


}



.timeline-item{


    width:100%;

}



.timeline-item p{


    font-size:13px;

}


.hero h1{

    font-size:36px;

}



.hero-stats{

    grid-template-columns:1fr;

}



.videos-list{

    grid-template-columns:1fr;

}



.stats-list{

    grid-template-columns:repeat(3,1fr);

}



.partners{

    grid-template-columns:repeat(2,1fr);

}






}

/* =========================
   HR ANIMATION OR
========================= */

.section-line{

    width:100%;

    height:3px;

    border:none;

    margin:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0),
        rgba(80,56,15,.30),
        rgba(215,177,84,1),
        rgba(80,56,15,.30),
        rgba(0,0,0,0)
    );

    background-size:200% 100%;

    animation:goldLine 8s linear infinite;

}

@keyframes goldLine{

    from{
        background-position:100% 0;
    }

    to{
        background-position:-100% 0;
    }

}

html{

scroll-behavior:smooth;

}


/* =====================================
   PARCOURS
===================================== */


.parcours-section{


    width:100%;

    padding:55px 0;

    background:
    radial-gradient(
        circle at center,
        rgba(215,177,84,.08),
        transparent 45%
    ),
    #080d0f;


}




.parcours-title{


    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    margin-bottom:40px;


}



.parcours-title span{


    width:120px;

    height:1px;

    background:#d7b154;


}



.parcours-title h2{


    color:white;

    font-family:'Bebas Neue',sans-serif;

    font-size:25px;

    letter-spacing:2px;


}






.timeline{


    width:90%;

    max-width:1300px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    position:relative;


}



.timeline-line{


    position:absolute;

    top:42px;

    left:8%;

    width:84%;

    height:1px;


    background:

    linear-gradient(
        90deg,
        transparent,
        #d7b154,
        transparent
    );


}





.timeline-item{


    width:20%;

    text-align:center;

    position:relative;

    z-index:2;


}





.timeline-icon{


    width:45px;

    height:45px;

    margin:auto;

    border-radius:50%;


    border:1px solid #c99b2c;


    background:#080d0f;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#d7b154;


    font-size:18px;


    box-shadow:
    0 0 15px rgba(215,177,84,.25);


}




.timeline-item h3{


    color:white;

    font-size:18px;

    margin-top:10px;

    font-weight:bold;


}





.timeline-item strong{


    display:block;

    color:#d7b154;

    font-size:11px;

    margin-top:3px;


}





.timeline-item p{


    color:#ccc;

    font-size:12px;

    line-height:18px;

    margin-top:12px;


}





.timeline-item:hover .timeline-icon{


    transform:translateY(-5px);

    box-shadow:
    0 0 25px rgba(215,177,84,.6);


}



.timeline-icon{


    transition:.3s;

}


/* =====================================
   POPUP VIDEO PREMIUM OR
===================================== */


.video-modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.85);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}



.video-modal.active{

    display:flex;

}



/* CADRE VIDEO */


.video-box{

    width:85%;

    max-width:1100px;

    position:relative;

    padding:15px;

    background:#080808;


    border:2px solid #d7b154;

    border-radius:12px;


    box-shadow:

    0 0 20px rgba(215,177,84,.5),

    0 0 60px rgba(215,177,84,.25);

}



/* effet ligne or */

.video-box::before{

    content:"";

    position:absolute;

    inset:-3px;

    border-radius:15px;


    background:

    linear-gradient(
        90deg,
        transparent,
        #d7b154,
        transparent
    );


    opacity:.5;

    z-index:-1;

}



/* VIDEO */


.video-box video{

    width:100%;

    max-height:75vh;

    display:block;

    background:#000;

    border-radius:6px;

}



/* BOUTON FERMETURE */


.video-close{

    position:absolute;

    top:-18px;

    right:-18px;


    width:45px;

    height:45px;


    border-radius:50%;


    border:2px solid #d7b154;


    background:#111;


    color:#d7b154;


    font-size:22px;


    cursor:pointer;


    transition:.3s;


    z-index:5;

}



.video-close:hover{

    background:#d7b154;

    color:#111;

    transform:rotate(90deg);

}



/* MOBILE */

@media(max-width:768px){


.video-box{

    width:94%;

    padding:8px;

}


.video-close{

    width:38px;

    height:38px;

    top:-15px;

    right:-10px;

}


}


/* =================================
   EFFET ABONNEMENT YOUTUBE
================================= */


.follow-effect{

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle,
        rgba(215,177,84,.25),
        rgba(0,0,0,.95)
    );

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    z-index:999999;

    transition:.5s;

}


.follow-effect.active{

    opacity:1;

    visibility:visible;

}



.follow-message{

    text-align:center;

    color:white;

    font-family:'Bebas Neue',sans-serif;

    font-size:45px;

    letter-spacing:3px;

    transform:scale(.7);

    transition:.5s;

}



.follow-effect.active .follow-message{

    transform:scale(1);

}



.follow-message i{

    display:block;

    color:#d7b154;

    font-size:70px;

    margin-bottom:20px;

}



.follow-message span{

    display:block;

    margin-top:20px;

    font-family:oswald,sans-serif;

    font-size:15px;

    letter-spacing:2px;

    color:#FFFFFF;

}




@media(max-width:768px){


.follow-message{

    font-size:30px;

}


.follow-message i{

    font-size:55px;

}


}


/* =============================
   SECTION PUBLICITE PREMIUM
============================= */

.advert-section {

    width: 100%;

    padding: 19px 0;

    min-height: 320px;

    background: #090909;
    justify-content: center;
    align-items: center;

}



.advert-title{


    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin-bottom:25px;


}



.advert-title span{


    width:120px;

    height:1px;


    background:#d7b154;


}



.advert-title h2{


    color:#d7b154;

    font-family:'Bebas Neue',sans-serif;

    font-size:24px;

    letter-spacing:3px;


}

.advert-box {

    width: 723px;
    height: auto;

    margin: 40px auto;

    background: #111;

    border: 2px solid #d7b154;
    border-radius: 10px;

    padding: 15px;

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

    color: #d7b154;
    text-align: center;

    box-sizing: border-box;
}

.advert-box img {

    width: 100%;
    height: auto;

    display: block;

}

.advert-box strong{


    display:block;

    text-align:center;

    color:#d7b154;

    font-size:28px;

    font-family:'Bebas Neue',sans-serif;

    letter-spacing:2px;


}



.advert-box small{


    display:block;

    text-align:center;

    margin-top:5px;

    color:#aaa;

    font-size:13px;


}



/* MOBILE */


@media(max-width:768px){


    .advert-box{
        width:90%;
    }


.advert-box strong{

    font-size:20px;

}


.advert-title span{

    width:40px;

}


}

.image-popup {

    display:none;

    position:fixed;

    z-index:9999;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.85);

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

}


.image-popup img {

    max-width:85%;
    max-height:85%;

    border:4px solid #d7b154;

    border-radius:15px;

    box-shadow:0 0 30px rgba(215,177,84,0.5);

    animation:zoomImage 0.35s ease;

}


.close-popup {

    position:absolute;

    top:25px;
    right:40px;

    color:#d7b154;

    font-size:45px;

    cursor:pointer;

}


@keyframes zoomImage {

    from {

        transform:scale(0.7);
        opacity:0;

    }

    to {

        transform:scale(1);
        opacity:1;

    }

}

.video-card{
    text-decoration:none;
    color:inherit;
    display:block;
}

.btn-videos{

    display:inline-block;
	font-family: Oswald, sans-serif; text-transform: uppercase ;

    padding:12px 25px;

    background:#d7b154;

    color:#000;

    text-decoration:none;

    font-weight:bold;

    border-radius:4px;

    transition:.3s;

}

.btn-videos:hover{

    background:#e6c36a;

}

/* ======================================
   MENU LANGUES
====================================== */

.lang{
    position:relative;
    display:flex;
    align-items:center;
    margin-left:10px;
    z-index:99999;
}

.lang-selected{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.lang-selected img{
    width:24px;
    height:24px;
    border-radius:50%;
}

.lang-selected i{
    color:#d7b154;
    font-size:11px;
    transition:.3s;
}

.lang:hover .lang-selected i{
    transform:rotate(180deg);
}

/* Sous-menu */

.lang-menu{

    position:absolute;

    top:100%;
    right:0;

    margin-top:0;

    width:220px;

    background:#0d0d0d;

    border:1px solid rgba(215,177,84,.45);

    border-radius:10px;

    overflow:hidden;

    display:none;

    padding:8px 0;

    z-index:99999;
}

.lang:hover .lang-menu{
    display:block;
}

.lang-menu li{
    list-style:none;
}

.lang-menu li a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 18px;

    text-decoration:none;

    color:#ffffff;

    font-size:14px;

    transition:.25s;

}

.lang-menu li a:hover{

    background:rgba(215,177,84,.12);

    color:#d7b154;

}

.lang-menu img{

    width:24px;

    height:24px;

    border-radius:50%;

    flex-shrink:0;

}