/* =========================================
   VARIABLES GLOBALES (Le dictionnaire du site)
   ========================================= */
:root {
    /* Couleurs de base */
    --fond-site: #ebf2f8;
    --orange-declic: #ff6b35;
    --blanc-pur: #ffffff;
    
    /* Couleurs de texte */
    --texte-principal: #333333;
    --texte-titre: #2c3e50;
    --texte-secondaire: #7f8c8d;
    
    /* Couleurs d'interface */
    --bordure-claire: #eeeeee;
    --bordure-sombre: #e0e0e0;
    --vert-succes: #2ecc71;
    --bleu-info: #3498db;
    --gris-badge: #f1f2f6;
}

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

body { /*les règles de base : police,couleur */
    font-family: 'Segoe UI', sans-serif; /* sans-serif : backup */
    background-color: var(--fond-site); /* Gris très clair */
    color: var(--texte-principal);
    margin: 0; /* Retire les marges par défaut du navigateur */
}

/* 1. L'entete ' */
.entete {
    background: var(--blanc-pur);
    padding: 15px 40px; /* espace de l'entete */
    display: flex; /* Active le mode alignement */
    justify-content: space-between; /* Pousse le logo à gauche et le bouton à droite */
    align-items: center;
    border-bottom: 1px solid var(--bordure-claire); /*Une ligne fine grise en bas pour séparer le menu du reste.*/
}

.logo {
    font-size: 1.2rem;
    color: var(--texte-titre);
    display: flex; /* Pour bien aligner l'image avec le texte */
    align-items: center;
    gap: 10px; /*espace entre le logo et le texte*/
}
.logo img {
    height: 60px; /* Ajuste ce chiffre selon la taille voulue */
    width: auto; /* Garde les proportions de l'image */
}

.logo small {
    color: var(--texte-secondaire);
    font-size: 0.7em; /* 70% de la taille normale */
}

.bouton-contact {
    background-color: var(--orange-declic); /* L'orange image */
    color: var(--blanc-pur);
    text-decoration: none; /*Supprime le soulignement moche par défaut des liens bleus.*/
    padding: 10px 20px;
    border-radius: 50px; /* Bords très ronds */
    font-weight: bold;
    font-size: 0.9rem;
}

/* 2. Le titre principal (Recherche) */
.main-title {
    text-align: center;
    padding: 20px 20px 0px 20px;
}

h1 {
    font-size: 2rem;
    margin-bottom: 30px;
    color: #222;
    font-weight: 600;
}

h2 {
    margin-bottom: 20px;
    font-weight: 500;
}

/* La barre de recherche */
.search-container {
    background: var(--blanc-pur);
    width: 100%;
    max-width: 700px; /* Ne dépasse pas 700px de large */
    margin: 0 auto; /* Centre la barre */
    padding: 15px 20px;
    border-radius: 50px; /* Bords ronds */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Ombre douce */
    align-items: center;
    border: 1px solid var(--bordure-sombre);
}

.search-input {
    border: none; /* Enlève la bordure moche par défaut */
    outline: none; /* Enlève le cadre bleu quand on clique */
    width: 100%;
    font-size: 1rem;
    color: #555;
}

/* 3. LA GRILLE DE CARTES */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px 50px 20px; 
}

/* Le système de grille */
.MEP-carte {
    display: grid; /* MEP de grille */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Magie : s'adapte aux écrans */
    gap: 20px; /* Espace entre les cartes */
}

/* Grille spécifique pour les vidéos : forcé à 2 colonnes max */
.section-videos .MEP-carte, 
#zone-recherche .MEP-carte {
    grid-template-columns: repeat(2, 1fr);
}

/* Le design d'une carte individuelle */
.card {
    background: var(--blanc-pur);
    padding: 30px;
    border-radius: 12px;
    border: none; /* On enlève le gris triste */
    border-bottom: 4px solid var(--bordure-sombre); /* Faux effet 3D en bas */
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: all 0.3s ease; /* Animation fluide */
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Cercle parfait */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
    background-color: var(--bordure-claire); /* Couleur de secours */
}

.card h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.card p {
    color: #777;
    font-size: 0.9rem;
}

/* --- COULEURS PAR CATÉGORIE --- */

/* On stocke les couleurs pour chaque catégorie */
.card[data-target="sante"]   { --cat-bg: #e8f5e9; --cat-color: var(--vert-succes); --cat-shadow: rgba(46, 204, 113, 0.15); }
.card[data-target="emploi"]  { --cat-bg: #e3f2fd; --cat-color: var(--bleu-info);   --cat-shadow: rgba(52, 152, 219, 0.15); }
.card[data-target="papiers"] { --cat-bg: #f4e8f9; --cat-color: #9b59b6;            --cat-shadow: rgba(155, 89, 182, 0.15); }
.card[data-target="logement"]{ --cat-bg: #fef5e7; --cat-color: #f1c40f;            --cat-shadow: rgba(241, 196, 15, 0.15); }
.card[data-target="outils"]  { --cat-bg: #eceff1; --cat-color: #34495e;            --cat-shadow: rgba(52, 73, 94, 0.15); }
.card[data-target="aide"]    { --cat-bg: #fce4ec; --cat-color: #e84393;            --cat-shadow: rgba(232, 67, 147, 0.15); }

/* le navigateur fait le travail automatiquement pour l'affichage et l'animation ! */
.card[data-target] .icon-circle { 
    background-color: var(--cat-bg); 
    color: var(--cat-color); 
}

.card[data-target]:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--cat-color);
    box-shadow: 0 15px 25px var(--cat-shadow);
}

/* --- STYLE DES SECTIONS VIDÉOS --- */

.section-videos {
    margin-top: 40px;
    border-top: 1px solid var(--bordure-claire);
    padding-top: 30px;
    animation: fadeIn 0.5s; /* Petit effet d'apparition fluide */
}

/* En-tête de la section vidéo (Titre + Masquer) */
.video-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.btn-masquer {
    color: var(--texte-secondaire);
    text-decoration: underline; /*souligne pour montrer que c'est un lien*/
    font-size: 0.9rem;
    cursor: pointer;
}

/* --- CARTE VIDÉO SPÉCIFIQUE --- */
.card-video {
    background: var(--blanc-pur);
    border-radius: 12px;
    overflow: hidden; /* Empêche l'image de dépasser des coins arrondis */
    border: 1px solid var(--bordure-claire);
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: transform 0.2s;
    height: 100%;
}

.card-video:hover {
    transform: translateY(-5px);
}

/* Zone Image */
.thumbnail { /*miniature: cadre qui entoure image*/
    position: relative; /* Important pour placer la durée par dessus */
    aspect-ratio: 16 / 9;
    background-color: #ddd;
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit bien la zone */
}

.duree {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7); /* Fond noir transparent */
    color: var(--blanc-pur);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Zone Texte */
.video-content {
    padding: 20px;
}

.video-content h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--texte-titre);
}

.description {
    color: var(--texte-secondaire);
    font-size: 0.95rem;
    margin-bottom: 10px;
}

/* Les petits badges gris (tags) */
.tags span {
    background: var(--gris-badge);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--texte-titre);
    margin-right: 5px;
    display: inline-block;
}

/* Petite animation pour l'ouverture */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- BADGE DE PROGRESSION --- */
.badge-vu {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--vert-succes); /* Un beau vert pour dire "Validé" */
    color: var(--blanc-pur);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2; /* Pour être sûr qu'il passe par dessus l'image */
}

/* --- CAROUSEL --- */
.carousel {
    display: flex;
    overflow-x: auto; /* Active le défilement horizontal */
    gap: 20px;
    padding: 10px 5px 20px 5px; /* Laisse de la place pour l'ombre au survol */
    scroll-snap-type: x mandatory; /* Effet "aimant" très satisfaisant sur téléphone */
    -webkit-overflow-scrolling: touch; /* Rend le glissement très fluide sur mobile */
}

/* On stylise la barre de défilement pour la rendre discrète et élégante */
.carousel::-webkit-scrollbar { height: 8px; }
.carousel::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.carousel::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }

/* On force la largeur des LIENS qui contiennent les cartes */
.carousel a {
    flex: 0 0 300px; /* C'est le lien qui fixe la largeur maintenant */
    scroll-snap-align: start; /* S'aimante au début du cadre */
    display: block; /* Indispensable pour qu'un lien se comporte comme une boîte */
}

/* =========================================
   PAGE VIDÉO UNIQUE (LAYOUT, FAQ, CHECKLIST)
   ========================================= */

.video-page-layout {
    display: flex;          /* Active les deux colonnes */
    gap: 30px;              /* Espace entre vidéo et aide */
    align-items: flex-start;
}

.video-main-col { flex: 3; } /* La vidéo prend 75% de la largeur */
.video-side-col { flex: 1; } /* La colonne d'aide prend 1/3 */

/* --- FAQ ACCORDÉON --- */
.faq-container {
    margin-top: 25px;
}

.faq-item {
    background: var(--blanc-pur);
    border: 1px solid var(--bordure-claire);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.faq-question {
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
}

.faq-question:hover {
    background: #f8f9fa;
}

.faq-reponse {
    padding: 0 20px;
    max-height: 0; /* Caché par défaut */
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s;
    color: #555;
    line-height: 1.6;
    border-top: 0 solid var(--bordure-claire);
}
.fleche {
    margin-left: 15px; /* Évite que la flèche ne colle au texte */
    font-size: 0.8rem;
    color: #999;
}

/* Classe ajoutée par le JavaScript quand on ouvre */
.faq-item.active .faq-reponse {
    max-height: 200px; /* On laisse de la place pour le texte */
    padding: 15px 20px;
    border-top-width: 1px;
}

/* --- DESIGN DE LA CHECKLIST (PC & MOBILE) --- */
.checklist-container {
    background-color: #fff9f4;
    border-left: 5px solid var(--orange-declic);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.95rem;
    cursor: pointer;
}

.checklist-item input { 
    width: 18px; 
    height: 18px; 
    cursor: pointer; 
    flex-shrink: 0; /* Empêche la case de s'écraser */
}

/* Quand la case est cochée (:checked), on cible le texte juste à côté (+) pour le barrer */
.doc-checkbox:checked + .doc-texte {
    text-decoration: line-through;
    color: #a4b0be; /* Rend le texte un peu gris pour bien montrer que c'est fait */
}

.lexique-container {
    background-color: #f0f8ff; /* Bleu très très pâle (AliceBlue) */
    border-left: 5px solid var(--bleu-info); /* Bleu information */
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.lexique-item {
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lexique-mot {
    font-weight: bold;
    color: var(--texte-titre);
    display: block; /* Met le mot sur sa propre ligne */
    margin-bottom: 2px;
}

/* =========================================
   VERSION MOBILE (Pour les écrans < 768px)
   ========================================= */
@media (max-width: 768px) {

    /* 1. L'Entête plus compact */
    .entete {
        padding: 10px 15px; /* On réduit les marges (avant: 15px 40px) */
        flex-direction: column; /* On empile Logo et Bouton l'un sur l'autre */
        gap: 10px; /* Un petit espace entre les deux */
    }

    .logo img {
        height: 40px; /* On réduit le logo (avant: 60px) */
    }

    .bouton-contact {
        width: 100%; /* Le bouton prend toute la largeur */
        text-align: center; /* Texte centré */
        padding: 8px 0; /* Un peu moins épais */
    }

    /* 2. Le Titre et la Recherche */
    .main-title {
        padding: 0px 15px; /* Moins d'espace vide autour */
    }

    h1 {
        font-size: 1.5rem; /* Titre plus petit (avant: 2rem) */
    }

    .search-container {
        width: 100%; /* Prend toute la largeur dispo */
        box-sizing: border-box; /* S'assure que le padding ne casse pas la largeur */
    }

    /* 3. La Grille de Catégories (2 par ligne) */
    .MEP-carte {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px; /* Espace réduit entre les cartes */
    }
    
    .section-videos .MEP-carte, #zone-recherche .MEP-carte {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: 15px; /* Moins de marge à l'intérieur des cartes */
    }
    
    .icon-circle {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .card h3 {
        font-size: 1rem; /* Titre de carte un peu plus petit */
    }

    /* 4. Gestion de l'entête vidéo (Titre long qui casse tout) */
    .video-header {
        flex-direction: column; /* On met le bouton Masquer SOUS le titre */
        align-items: flex-start;
        gap: 10px;
    }
    
    /* Sur petit écran de téléphone, on rétrécit un peu la carte */
    .carousel a {
        flex: 0 0 260px; 
    }

    .video-page-layout {
        flex-direction: column;
        gap: 5px;
    }
    /* 5. Correction des boutons de la page vidéo */
    .video-main-col .card > div {
        flex-direction: column; /* Empile les éléments à la verticale */
        align-items: stretch !important; /* Force les boîtes à s'étirer sur toute la largeur */
    }
    
    .video-main-col .bouton-contact {
        display: block !important; /* Écrase le style inline-block du HTML */
        width: 100% !important;
        box-sizing: border-box;
        margin-top: 5px; /* Laisse un peu d'espace entre les boutons */
    }
}