/* ============================= */
/* RÉINITIALISATION DES STYLES */
/* ============================= */

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

/* ============================= */
/* CORPS DE LA PAGE */
/* ============================= */

body{
font-family:Arial, sans-serif;
color: #151515;
}

/* ============================= */
/* EN-TÊTE DU SITE */
/* ============================= */

.header{
background:#FFF4F1;
border-bottom:1px solid #ddd;
}

/* ============================= */
/* BARRE DE NAVIGATION */
/* ============================= */

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
}

/* ============================= */
/* LOGO DU SITE */
/* ============================= */

.logo{
width:170px;
}

/* ============================= */
/* MENU PRINCIPAL */
/* ============================= */

.menu{
display:flex;
list-style:none;
gap:30px;
}

/* ============================= */
/* LIENS DU MENU */
/* ============================= */

.menu a{
text-decoration:none;
color:#333;
font-weight:bold;
padding:10px;
display:block;
}

/* ============================= */
/* EFFET AU SURVOL DES LIENS */
/* ============================= */

.menu a:hover{
color:#ff6b4a;
}

/* ============================= */
/* FLÈCHE DES MENUS DÉROULANTS */
/* ============================= */

.arrow{
font-size:12px;
margin-left:5px;
}

/* ============================= */
/* ÉLÉMENT CONTENANT UN MENU DÉROULANT */
/* ============================= */

.dropdown{
position:relative;
}

/* ============================= */
/* SOUS-MENU (MENU DÉROULANT) */
/* ============================= */

.submenu{
position:absolute;
top:40px;
left:0;
background:white;
list-style:none;
width:200px;
border:1px solid #ddd;
box-shadow:0 4px 10px rgba(0,0,0,0.1);

/* paramètres pour l'animation d'apparition */

opacity:0;
visibility:hidden;
transform:translateY(10px);

transition:all 0.3s ease;
}

/* ============================= */
/* LIENS À L'INTÉRIEUR DU SOUS-MENU */
/* ============================= */

.submenu li a{
padding:10px;
}

/* ============================= */
/* AFFICHER LE MENU DÉROULANT AU SURVOL */
/* ============================= */

.dropdown:hover .submenu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* ============================= */
/* EFFET AU SURVOL D’UN ÉLÉMENT DU SOUS-MENU */
/* ============================= */

.submenu li:hover{
background:#f5f5f5;
}

/* ============================= */
/* BOUTON MENU MOBILE (MENU HAMBURGER) */
/* ============================= */

.menu-toggle{
display:none;
flex-direction: column;
font-size:28px;
cursor:pointer;
z-index: 1001;

display: flex;
color: #333; /* Pour que l'icône soit visible */
}

/* HERO SECTION */

.hero{
background:#ffff;
text-align:center;
padding:120px 20px;
box-shadow: #333;
}

/* TITRE */

.hero h1{
font-size:60px;
font-weight:bold;
margin-bottom:15px;
}

.hero h1 span{
color:#ff6a00;
}
/* TEXTE */

.hero p{
font-size:20px;
color: #545454;;
max-width:700px;
margin:auto;
margin-bottom:40px;
}

/* le bouton */
.btn-start {
    display:inline-block;
    background-color:#ff6233;
    color:#151515;
    padding:15px 40px;
    border-radius:50px;
    margin-top:20px;
    font-weight:bold;
    font-family: Arial, sans-serif;
    transition: 0.3s;

}
.btn-start:hover{
    transform: scale(1.05);

}
.btn-start a {
    color: #000000;
    text-decoration: none; 

}
/* La petite flèche dans le bouton */
.cta-button span {
    font-size: 3rem;
}


/* Slider */
.carousel-container{
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin: 20px auto;
    overflow: hidden;/* Cache tout ce qui dépasse de la zone visible */
    border-radius: 20px;
    box-shadow: 5px 5px 10px 5px rgba(188, 188, 188, 1);
    
    
}

/* Slides */
.slide{
    display: none;
    position: relative;
    
}

.slide.active{
    display: block;
}

.slide-img{
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}

/* Texte sur image */
.slide-content {
     
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    line-height: 1.6;
    width: 80%;
    text-align: center;
}

/* Texte 100% blanc */
.slide-content h2,
.slide-content p,
.slide-content * {
    color: #fff !important;
}

/* Optionnel : lisibilité */
.slide-content {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}


/* Bouton commencer le quiz */
.btn-slide{
    
    background-color:#15171C;
    color: #000;
    font-weight: bold;
    border-radius: 50px;
    padding:12px 25px;
    font-size: 16px;
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;

}

/* Boutons precedent et suivant */
.precedent, .suivant{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    padding: 8px;
    opacity: 0;
    transition: 0.3s;
}

.precedent{
    left: 6px;
}

.suivant{
    right: 6px;
}

.carousel-container:hover .precedent,
.carousel-container:hover .suivant{
    opacity: 1;
}


/* Les cards */
.features{
    background-color:rgba(217, 217, 217, 0.17);
    min-height: 480px;
    text-align: center;
    padding: 60px 5%;
    line-height: 1.4;
    color: #151515;
    transition:0.3s;
}
.feature:hover{
    transform:translateY(-5px);
}


.pourquoi{
    font-weight: bold;
    font-size: 2rem;

}
.subtitle{
    font-size: 20px;
    
}

.cards{
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap: wrap;/* permet aux cartes de passer à la ligne */
    margin-top:60px;
}

/* boite de l'icone */
.icon-card{
    width:55px;
    height:45px;
    background:rgba(251, 239, 224, 1);
    border-radius:10px;

    display:flex;
    justify-content:center;

    margin:auto;
    margin-bottom:20px;
    margin-left: 4%;
}

.feature {
    padding: 15px;
    border-radius:8px;
    width:350px;
    box-shadow: 5px 5px 10px 5px rgba(188, 188, 188, 1);
    background: #fff;
}
.feature h4{
    font-weight: bold;
    margin-right: 115px;
    
}
.feature .text-card{
    margin-right: 46%;
}
/* Pret a tester connaissances */
.connaissances{
    background-color: white;
    padding:50px 0;
    text-align:center;
    
}

.connaissance{
    background-color: rgba(84, 84, 84, 1);
    padding: 30px 20px;
    border-radius: 50px;
    text-align: center;
    margin: 40px auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 850px;

}

.couleur-jaune {
    color: #ffbd59;    
    font-size: 2.2rem;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    margin-bottom: 25px;
}

.cta-text {
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.5;
    margin-bottom: 35px;
    font-family: 'Arial', sans-serif;
}
/* le bouton */
.btn-start {
    display:inline-block;
    background-color:#ff6233;
    color:#151515;
    padding:15px 40px;
    border-radius:50px;
    margin-top:20px;
    font-weight:bold;
    font-family: Arial, sans-serif;
    transition: 0.3s;

}

.btn-start:hover{
    transform: scale(1.05);

}
.btn-start a {
    color: #000000 !important;
    text-decoration: none; 

}
/* La petite flèche dans le bouton */
.cta-button span {
    font-size: 3rem;
}
/* FOOTER */

.footer{
    background-color:rgba(217, 217, 217, 0.17);
    color:#151515;
    padding:40px 0;
}


.footer-container {
    display: flex;
    flex-direction:column; /* met les éléments en colonne */
    align-items:flex-start;
}
.footer-logo{
    width:200px;
    margin : 0px;
    margin-left: 45%;
}
.footer-columns-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Pour occuper toute la largeur sous le logo */
    gap: 30px;
    flex-wrap:wrap;
    margin-left: 7%;
}

.footer-column {
    flex: 1;
    min-width: 200px;
}
.footer-column h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}
.footer-column p, 
.footer-column li {
    font-size: 0.95rem;
    line-height: 1.8; /* Donne de l'espace entre les lignes */
    margin-bottom: 8px;
}
.footer-column ul {
    list-style: none; /* Enlève les puces */
    padding: 0;
}
.footer-column a {
    text-decoration: none; /* Enlève le soulignement */
    color: #333;
    transition: 0.3s;
}

.footer-column a:hover {
    text-decoration: underline;
    color: #000;
}
/* La ligne horizontale */
.footer-line {
    border: 2px;
    border-top: 1px solid black; /* Ligne grise fine */
    margin:40px 0 20px 0;
    width: 85%;
    margin-left: 7%;
    
}

/* Le texte de copyright en bas */
.footer-copy {
    text-align: center;
    font-size: 0.9rem;
    color: #151515;
    margin-top: 40px;

}

/* POPUP */

.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    justify-content:center;
    align-items:center;
    z-index:1000; /* il permet d'afficher le popup au dessus de la page d'accueil  */
    line-height: 1.6 ;
    padding:20px;
    align-items:flex-start;/* évite que le popup que ça coupe en haut */
    
}

/* fenêtre */

.modal-content{
    background:white;
    width:90%;
    max-width:900px;
    padding:40px;
    border-radius:30px;
    border:3px solid #ff6233;
    position:relative;
    transition: 0.3s;
    padding:20px;
    max-height:90vh;
    overflow-y:auto;/* permet de scroller dans le popup de voir toutes les cartes*/
    
}

/* bouton fermer */

.close{
    position:absolute;
    top:20px;
    right:25px;
    font-size:28px;
    cursor:pointer;
}

/* cartes */

.courses{
    display:flex;
    gap:20px;
    margin-top:30px;
}

.course-card{
    flex:1;
    border:1px solid #ddd;
    padding:30px;
    border-radius:20px;
    text-align:center;
    transition:0.3s;
}

.course-card:hover{
    transform:translateY(-5px);
    box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.course-card a{
    color:#ff6a00;
    font-weight:bold;
    text-decoration:none;
}
.icon-circle{
    background: #ff6233;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-circle img {
    max-width: 28px; /* Ajuste cette valeur pour la taille de  l'icône */
    max-height: 28px;
    height: auto;
    object-fit: contain; /* Garde les proportions de l'image */
    width: 35px;
    
}

/* ===================================== */
/*  Ce bloc gère l'UI (Interface Utilisateur) et l'UX (Expérience Utilisateur) 
    de la fin du quiz. Son rôle est de transformer une simple donnée (le score) 
    en une étape visuelle claire et gratifiant */
/* ===================================== */

.result-final {
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 2px solid #3498db;
    margin-top: 30px;
    
    /* Applique l'animation nommée "fadeIn" pendant 0.5 seconde */
    /* "ease-in" signifie que l'animation commence doucement */
    animation: fadeIn 0.5s ease-in;
}


/* ===================================== */
/* C'est ici que tu gères la fluidité */
/* ===================================== */

@keyframes fadeIn {
    /* ÉTAT DE DÉPART (0%) */
    from { 
        opacity: 0;                /* Le bloc est totalement invisible */
        transform: translateY(20px); /* Le bloc est décalé de 20px vers le bas */
    }
    
    /* ÉTAT FINAL (100%) */
    to { 
        opacity: 1;                /* Le bloc est totalement visible */
        transform: translateY(0);    /* Le bloc reprend sa position normale (remonte) */
    }
}





/* ===================================== */
/* RESPONSIVITÉ (ADAPTATION POUR MOBILE) */
/* ===================================== */

@media (max-width:768px){

/* MENU PRINCIPAL EN MODE MOBILE */

.menu{
display:none;
flex-direction:column;
background:white;
position:absolute;
top:80px;
left:0;
width:100%;
border-top:1px solid #ddd;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

/* AFFICHER LE MENU LORSQU’IL EST ACTIVÉ */

.menu.active{
display:flex;
}

/* AFFICHER LE BOUTON HAMBURGER */

.menu-toggle{
display:flex;
font-size: 30px;
        cursor: pointer;
}

/* ADAPTATION DU MENU DÉROULANT EN MODE MOBILE */

.dropdown:hover .submenu{
position:static;
box-shadow:none;
border:none;
display: block;
}

/* SOUS-MENU EN MODE MOBILE */

.submenu{
opacity:1;
visibility:visible;
transform:none;
display:none;
box-shadow: none;
}

/* AFFICHER LE SOUS-MENU */

.dropdown:hover .submenu{
display:block;
}

}

/* Responsiviter des slides */

@media (max-width: 768px) {
    .slide-img {
        height: 300px; /* Image moins haute sur mobile */
    }

    .slide-content h2 {
        font-size: 1.5rem; /* Titre plus petit */
    }

    .slide-content p {
        font-size: 0.9rem; /* Paragraphe plus petit */
    }

    .btn-slide {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .precedent, .suivant {
        font-size: 25px; /* Flèches moins imposantes */
        padding: 5px;
        opacity: 1; /* Toujours visibles sur mobile (pas de souris) */
    }
}

/*/////////////////////////////////////:*/
@media (max-width: 768px) {
    /* ... tes autres codes media (menu, etc.) ... */

    .hero h1 {
        font-size: 35px; /* Réduit la taille du gros titre sur mobile */
    }

    .cards {
        gap: 20px;
    }

    .feature {
        max-width: 100%; /* Les cartes prennent toute la largeur sur petit écran */
    }

    .footer-columns-wrapper {
        margin-left: 0;
        flex-direction: column; /* Colonnes du footer les unes sous les autres */
        text-align: center;
    }
    
    .footer-logo {
        margin-left: auto;
        margin-right: auto;
    }
}

/* popup EN MODE MOBILE */
@media (max-width: 768px){

    .modal-content{
        width:100%;
        padding:20px;
        border-radius:15px;
    }

    .courses{
        flex-direction:column; /* les cartes passent en colonne */
    }

    .course-card{
        padding:20px;
    }

    .close{
        top:10px;
        right:15px;
        font-size:24px;
    }

}

/* popup EN MODE MOBILE /* les petits telephones */
@media (max-width: 480px){

    .modal-content{
        padding:15px;
    }

    .icon-circle{
        width:50px;
        height:50px;
    }

    .icon-circle img{
        max-width:20px;
    }

}