:root {
    --rose:#e5067e;
    --violet:#582361;
    --bleu:#3e96d1;
    --bleu2:#3160a0;
    --bleu3:#492467;
    --gris:#ecefe8;
    --text:#000000;
}

@font-face {
    font-family: 'edosz';
    src: url('webfont/EdoSZ.woff2') format('woff2'),
        url('webfont/EdoSZ.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{
font-family:'Montserrat',arial;    
font-size:1em;
line-height:1.4em;
font-weight:300;
margin:0;
padding:0;
box-sizing:border-box;    
}
body{
font-size:85%;
background:var(--gris)    
}
#entete,
#content,
#footer{
/* max-width:1280px; */
width:100%;    
margin:auto;    
}

#header{
max-width:1280px;
height:120px;
box-sizing:border-box;
position:relative;  
}
#header .logo{
width:250px;
height:auto;
position:absolute;
top:20px;
}
#header p{
position:absolute;
top:48px;
left:300px;
color:var(--rose); 
font-size:1.3em;   
}
#header span{
position:absolute;
top:15px;
width:36px;
height:36px;
border-radius:4em;    
display:block;
cursor:pointer;
transition:all ease 0.3s;
align-content:center;
text-align:center;
}
#header span img{
width:26px;
height:auto;
display:block;
margin:auto;
}
#header .login{
background:var(--bleu);
right:145px;
}
#header .panier{
background:var(--rose);
right:100px;
}
#header .linkedin{
background:var(--text);
right:55px;
}
#header .insta{
background:var(--text);
right:10px;
}
#header a{
width:36px;
height:36px;
display:block; 
align-content:center;
}
#header .login:hover,
#header .panier:hover{background:var(--text);}
#header .linkedin:hover, #header .insta:hover{background:var(--bleu);}


.intro{
background:#000;    
}
#frise{
background:linear-gradient(To right, var(--violet), var(--rose));
padding:8px 0;
}
#frise .defil{
color:white;
font-weight:600;
font-size:.9em;
}
.gris{
padding:30px;
}
.bleu{
background:linear-gradient(To right, var(--bleu3), var(--bleu));
padding:30px;
}
.violet{
padding:30px;
background:linear-gradient(To right, var(--violet), var(--rose));    
}
.violet *,
.bleu * {
color:white;    
}
.maxbloc{
max-width:1280px;
margin:auto;    
}
.center{
text-align:center;    
}

.bigSviolet{
background-image:url(images/bigSviolet.svg); 
background-repeat:no-repeat;
background-position:center;
background-size:contain;   
}

.squarelinks{
max-width:1280px;
padding:30px;
text-align:center;    
margin:auto;
}
.game-elem{
width:150px;
display:inline-block;
vertical-align:top;
margin:10px;    
background:red;
}
.game-elem p{
font-weight:600;
color:var(--violet);
font-size:1em;    
}
.tiers{
width:280px;   
display:inline-block;
vertical-align:top;
margin:20px;    
padding:8px;
border-radius:14px;
transition:all ease 0.5s;
cursor:pointer;
}
.tiers .theme{
background:linear-gradient(to right, var(--bleu3), var(--bleu));  
text-align:left;
color:white;
font-weight:600;  
padding:6px 10px;
border-radius:8px;
margin-bottom:6px;
}
.tiers .theme::before{
content:'';
background-image:url(images/pZig.svg);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
width:1.2em;
height:1.2em;
display:inline-block;
vertical-align:bottom;
margin-right:5px;
}
.tiers img{
border-radius:8px;
margin-bottom:6px;
background:#9e9e9e45;
width:100%;
height:140px;
display:block;
align-content:center;
}
.tiers p{
line-height:1.1em;    
}
.tiers:hover{
background:white;    
}


.chapeau .ludikSlider{
width:calc(100% - 375px);
height:335px;
display:inline-block; 
background-image:url(/obj/1.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
border-radius:1.4em;  
box-sizing:border-box; 
text-align:center;
align-content:center;
padding:80px;
}
.chapeau .ludikSlider h1{
color:white;
font-weight:500;
font-size:1.8em;    
}


h2{
margin:0 0 10px 0;
font-weight:400;
font-size:2em;
font-weight:600;
}
h2.EdoSZ{
font-family:'edosz',arial;    
font-size:4.8em;
line-height:1em;
font-weight:normal;
color:var(--rose);
display:block;
text-align:center;
margin-bottom:-20px;
}

h3{
color:var(--bleu);
font-size:1.2em;
font-weight:500;
margin:0 0 10px 0;
}
h5{text-align:center;}
h5 a,
.closeMyPopBtn{
display:inline-block;
background:var(--rose);
padding:10px 24px;
text-decoration:none;
color:white;
font-size:1.2em;
border-radius:8px; 
margin:30px 0; 
font-weight:400;
transition:all ease 0.5s; 
border:none; 
}
h5 a:hover,
.closeMyPopBtn:hover{
background:var(--bleu);
padding:10px 48px;
}
.closeMyPopBtn{
display:block;
margin:30px auto 0 auto;    
}

ul{
padding-left:30px; 
margin:0 0 15px 0;     
}
li{
list-style-type:none;
margin-bottom:.3em;
}
li::before{
content:"";
display:inline-block;
width:.7rem;
height:.7rem;
background:var(--bleu);   
margin-right:5px;
border-radius:2em;
margin-left:-16px;
vertical-align:top;
margin-top:.3em;
}

.text{
width:50%;
display:inline-block;    
vertical-align:middle;  
direction:ltr; 
}
.img{
width:calc(50% - 20px);
display:inline-block;
margin-right:15px; 
margin-left:0;
border-radius:2em;
position:relative;
vertical-align:middle; 
box-sizing:border-box; 
transition:all ease 0.5s;
}
.img::before{
content:"";
position:absolute;
background: #00C3C9;
background: linear-gradient(90deg,rgba(0, 195, 201, 1) 0%, rgba(255, 30, 111, 1) 100%);
width:100%;
height:100%;
border-radius:2em;
opacity:.3;
top:0;
left:0; 
}

.right .img{
margin-right:0;
margin-left:15px;    
}
.img img{ 
width:100%;
height:auto;
border-radius:2em;
float:left;
}

.rainbow{
background: #00C3C9;
background: linear-gradient(90deg,rgba(0, 195, 201, 1) 0%, rgba(255, 30, 111, 1) 100%);
text-align:center;
color:white;
}
.games{
display:block;
margin-top:20px;    
}
.game{
margin:10px 10px;
width:160px;
height:100px;
vertical-align:top;
display:inline-block;    
background:white;
border-radius:1em;
border:2px solid var(--bleu);
text-align:center;
align-content:top;
font-weight:800;
padding:12px;
box-sizing:border-box;
color:black;
transition:all ease 0.3s;
}
.game img{
padding-top:5px;
max-height:45px;  
max-width:80%;  
display:block;
margin:auto;
}
.game:hover{
transform:translateY(-5px);    
}


#footer{
margin-top:30px;    
}
.s1-6,
.s2-6{
display:inline-block;
box-sizing:border-box;
vertical-align:top; 
padding:20px;   
}
.s2-6{
width:16%;
border-left:1px solid white;
}
.s2-6{
width:32%;
}
#footer .info{
position:relative;   
}
#footer .info p{
font-size:.9em; 
margin-top:10px;  
text-align:left; 
}
#footer .info .social{
display:block;
width:100%;
margin:8px 0px 8px 0; 
text-align:left;
}
#footer .info .social span{
width:32px;
height:32px;
display:inline-block;
cursor:pointer;
align-content:center;
text-align:center;
margin:3px;  
position:relative;
}
#footer .social img{
width:24px;
height:auto;
}
#footer .social a{
width:32px;
height:32px;
border-radius:4em;
display:block;
align-content:center;
cursor:pointer;
transition:all ease 0.3s;
}
#footer .social a:hover{background:var(--rose);}
#footer .social span a{background:var(--text);align-content:center;}



#footer h5{
text-align:left;     
}
#footer h5 a{
background:white;
color:var(--rose);
font-weight:600;
padding:2px 12px;
font-size:1.2em; 
margin-top:15px;     
}
#footer h5 a:hover{
padding:2px 24px;
}

#footer .previews img{
height:220px;
padding:3px;
background:white;
border-radius:1em; 
box-sizing:border-box;
vertical-align:top;
margin:0 10px 0 0;
}
#footer .previews h4{
font-weight:400;
font-size:1.6em;    
line-height:1.2em;
width:30%;
text-align:left;
display:inline-block;
vertical-align:middle;
margin:0 10px 0 0;
}

#footer .partenaire{
display:inline-block;
text-align:left;    
}
#footer .partenaire:first-child{
margin-right:20px;    
}
#footer .partenaire img{
height:100px;
margin:10px 10px 0 0;    
}

.copyright{
display:block;
margin-top:30px;   
font-size:.9em; 
}

/*POPUP*/

.popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9997;
backdrop-filter: blur(3px);
}

.popup-overlay.active {
display: block;
}

.popup-container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
z-index: 9998;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
animation: popupFadeIn 0.3s ease-out;
}

.popup-container.active {
display: block;
}

@keyframes popupFadeIn {
    from {
    opacity: 0;
    transform: translate(-50%, -45%);
    }
    to {
    opacity: 1;
    transform: translate(-50%, -50%);
    }
}

.popup-header {
padding: 20px 25px;
border-bottom: 1px solid #e0e0e0;
display: flex;
justify-content: space-between;
align-items: center;
}

.popup-header h2 {
margin: 0;
font-size: 22px;
color: #333;
}

.popup-close {
display:none;
}

.popup-close:hover {
background-color: #f0f0f0;
color: #333;
}

.popup-content{
padding: 25px;
}
.popup-thanks{
padding: 25px;
text-align:center;    
}
.popup-content h3,
.popup-content p{
text-align:center;    
}
.form-group {
margin-bottom: 10px;
}

.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: #333;
font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
transition: border-color 0.2s;
box-sizing:border-box;
}

.form-group input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.form-group.required label::after {
content: " *";
color: #dc3545;
}

.checkbox-group {
margin-bottom: 15px;
display: flex;
align-items: flex-start;
}

.checkbox-group input[type="checkbox"] {
margin-right: 10px;
margin-top: 3px;
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0;
}

.checkbox-group label {
cursor: pointer;
font-size: 14px;
color: #555;
line-height: 1.5;
user-select: none;
}

.form-submit {
width: 100%;
padding: 12px;
background-color: var(--rose);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}

.form-submit:hover {
background-color: var(--bleu);
}

.form-submit:active {
transform: scale(0.98);
}

/* Responsive */
@media (max-width: 600px) {
    .popup-container {
    width: 95%;
    }
    .popup-header {
    padding: 15px 20px;
    }
    .popup-content {
    padding: 20px;
    }
}

/* Responsive */
@media (max-width: 600px) {
#header .logo{
    width:280px;
    height:auto;
    position:absolute;
    top:10px;
left:20px;
}
#header p{
display:none;
}    
.chapeau .ludikSlider{
    width:100%;
    height:335px;
    padding:30px;
    margin-bottom:30px;
}
.chapeau .points{
    display:block;    
    width:100%;
    max-width:100%;  
    box-sizing:border-box; 
    vertical-align:top;
    margin-left:0px;
text-align:center;
}
.bloc.intro{
padding:0;   
}    
.img{
    width:100%;
    display:inline-block;
    margin-right:0px; 
    margin-left:0;
margin-bottom:10px;
}
.text{
    width:100%;
}
.s1-6,
.s2-6{
width:100%;
border:none;
}
#footer .logo{
max-width:60%;    
}
#footer .previews img{
height:160px;
}
#footer .previews h4{
font-size:1.5em;    
}
#footer .partenaire img{
height:70px;
margin:10px 10px 0 0;    
}    
}