:root {
    --rose:#ff1e6f;
    --bleu:#00c3c9;
    --bleuc:#edf6fa;
    --text:#000000;
}

*{
font-family:'Outfit',arial;    
font-size:58%;
font-size:1em;
font-weight:300;
margin:0;
padding:0;
}
#header,
#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:24px;
height:auto;    
}
#header .login{
background:var(--bleu);
right:105px;
}
#header .panier{
background:var(--rose);
right:60px;
}
#header .linkedin{
background:var(--text);
right:15px;
}
#header a{
width:36px;
height:36px;
}
#header .login:hover,
#header .panier:hover{background:var(--text);}
#header .linkedin:hover{background:var(--bleu);}


.chapeau{
width:90%;
display:block;
margin:auto;    
box-sizing:border-box; 
}
.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;    
}

.chapeau .points{
display:inline-block;    
width:100%;
max-width:355px;  
box-sizing:border-box; 
vertical-align:top;
margin-left:15px;
}
.square{
width:160px; 
height:160px;   
border:1px solid var(--bleu);
border-radius:1.4em;
display:inline-block;
box-sizing:border-box; 
text-align:center;
padding:.8em;
color:var(--bleu);
align-content:center;
line-height:1em;
font-weight:600;
vertical-align:top;
margin:0 15px 15px 0;
transition:all ease 0.3s;
}
.square img{
height:2.8em;   
display:block; 
margin:0 auto 5px auto;
}
.square:last-child{
background:var(--rose);   
border:1px solid var(--rose); 
color:white;
cursor:pointer;
}
.square:last-child:hover{
background:var(--bleu);   
border:1px solid var(--bleu);     
}

.etape{
width:90%;
display:block;
background:var(--bleuc);
border-radius:1em;
text-align:center;
align-content:center;    
box-sizing:border-box;
margin:0 auto 30px auto;
padding:1em;
}
.etape .step{
display:inline-block;    
font-weight:600;
margin:10px;
width:160px;
font-size:1.1em;
vertical-align:top;
transition:all 0.5s;
}
.etape .step:hover{
transform:translateY(-5px);    
}

.etape .step span{
color:white;
background:var(--rose);
width:1em;
height:1em;
line-height:1em;
font-size:0.8em;
font-weight:400;
border-radius:10em;
display:block;
padding:4px;
text-align:center;
align-content:center; 
margin:0 auto 2px auto;
}

.bloc{
width:90%;
max-width:1280px;
margin:0 auto 30px auto;
display:block;  
direction:ltr; 
align-content:center;
box-sizing:border-box;
}
.bloc.right{
direction:rtl; 
} 
.bloc.intro{
padding:0 15% 30px 15%;   
}
.full{
width:100%;  
max-width:100%;
padding:30px;
box-sizing:border-box;  
}

h2{
font-size:1.6em;
margin:0 0 10px 0;
font-weight:600;
}
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.4em;
border-radius:4em; 
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{
width:32px;
height:32px;
border-radius:4em;    
display:block;
cursor:pointer;
transition:all ease 0.3s;
align-content:center;
text-align:center;
margin:10px 6px 10px 0;  
position:relative;
}
#footer .social img{
width:22px;
height:auto;    
}
#footer .social a{
width:32px;
height:32px;
border-radius:4em;
position:absolute;
top:0;
left:0;
align-content:center;
cursor:pointer;
}
#footer .social a:hover{
background:var(--rose);
}
#footer .linkedin a{
background:var(--text);
}



#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;    
}    
}