/* ================================================================
   style.css — Science L@b22 — Page d'accueil (index.html)
   
   Palette :
     Bleu principal  : #059DDC
     Gris texte      : #444444
     Fond crème      : #f5f2eb
     Blanc           : #ffffff
   
   Police : Plus Jakarta Sans (Google Fonts, 400 + 700)
   
   Structure des sections dans l'ordre de la page :
     1. Réglages globaux
     2. Barre de navigation
     3. Hero
     4. Description
     5. Section chiffres clés (bandeau bleu)
     6. Missions
     7. Actualité
     8. Carrousel événements
     9. Bureau / équipe
     10. Footer
     11. @media — Responsive (hamburger < 1100px, tablette < 900px, mobile < 600px)
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap');


/* ── 1. RÉGLAGES GLOBAUX ─────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #444444;
}


/* ── 2. BARRE DE NAVIGATION ──────────────────────────────────── */
/*
   La navbar est fixée en haut (position: fixed, z-index: 100).
   Par défaut : transparente, liens blancs.
   Après scroll (classe 'scrolled' ajoutée par script.js) :
     → fond blanc, liens gris, ombre légère.
*/
.barre-navigation {
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    padding: 25px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    transition: background 0.5s;
}

.barre-navigation.scrolled {
    background: white;
    box-shadow: 0 1px 10px -5px rgba(68, 68, 68, 0.3);
}

/* Logo + nom de l'asso */
.barre-navigation .identitee {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.barre-navigation.scrolled .identitee {
    color: #444444;
}

.barre-navigation .identitee .logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.barre-navigation .identitee .Science-lab22 {
    font-size: 22px;
    font-weight: 700;
}

/* Liens de navigation */
.barre-navigation .navigation {
    display: flex;
    align-items: center;
    gap: 55px;
}

.barre-navigation .navigation a {
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.barre-navigation.scrolled .navigation:not(.mobile-menu) a {
    color: #444444;
}

.barre-navigation .navigation a:hover {
    opacity: 0.5;
}

/* Bouton Contact */
.barre-navigation .btn-contact {
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    background: #444444;
    color: white;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.barre-navigation .btn-contact:hover {
    background: #333333;
}

/* Icônes hamburger (cachées sur desktop, visibles via @media < 1100px) */
.barre-navigation .menu-ham {
    width: 35px;
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    display: none;   /* affiché seulement sur mobile */
}

.barre-navigation .menu-ham-2 {
    width: 35px;
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    display: none;   /* version noire, visible quand la navbar est blanche */
}


/* ── 3. HERO ─────────────────────────────────────────────────── */
.hero {
    display: flex;
}

.hero-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    object-fit: cover;
    z-index: -1;
    filter: brightness(0.4);  /* assombrit l'image pour que le texte blanc soit lisible */
}

/* Texte positionné en absolu sur le hero */
.accueil-1 {
    position: absolute;
    width: 1100px;
    padding: 210px 190px;
    font-size: 70px;
    color: whitesmoke;
    line-height: 70px;
}

.accueil-1 .Science-Lab22 {
    font-size: 80px;
    color: whitesmoke;
    font-weight: bold;
}


/* ── 4. DESCRIPTION ──────────────────────────────────────────── */
/*
   Le mot "Science L@b22" géant en arrière-plan est un effet décoratif :
   .fond → position absolute, z-index: -1, opacité très faible.
   .decr → le vrai texte, z-index: 1, passe au-dessus.
*/
.description {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 200px;
    padding-bottom: 225px;
    position: relative;  /* nécessaire pour que .fond soit ancré ici */
}

.description .decr {
    z-index: 1;
    max-width: 800px;
    line-height: 1.7;
}

.description .fond {
    z-index: -1;
    left: 80px;
    position: absolute;
    font-size: 180px;
    font-weight: 700;
    width: 180px;
    color: rgba(68, 68, 68, 0.06);
    line-height: 150px;
    pointer-events: none;
}


/* ── 5. SECTION CHIFFRES CLÉS (bandeau bleu) ─────────────────── */
.section-1 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 250px;
    background-color: #059DDC;
}

.section-1 .text-sect-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-1 .text-sect-1 .titre-sect-1 {
    font-size: 65px;
}

.section-1 .text-sect-1 p {
    font-size: 40px;
    color: white;
}


/* ── 6. MISSIONS ─────────────────────────────────────────────── */
.missions {
    display: flex;
    flex-direction: column;
    padding: 160px 100px 200px;
}

.missions .text-mission {
    text-align: center;
    margin-bottom: 150px;
    font-size: 50px;
    text-decoration: underline;
    text-underline-offset: 10px;
}

.missions .nos-missions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap; 
}

.missions .nos-missions .mission {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.missions .nos-missions .forme {
    width: 200px;
    height: 200px;
    background-color: #444444;
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    border-radius: 10px;
}

.missions .nos-missions .nom-mission p {
    text-align: center;
    padding-top: 25px;
    width: 225px;
}


/* ── 7. ACTUALITÉ ────────────────────────────────────────────── */
.actualité {
    margin-bottom: 150px;
    height: 550px;
    background-color: #e8e8e8;
    border-radius: 12px;
    margin: 0 80px 150px;
}


/* ── 8. CARROUSEL ÉVÉNEMENTS ─────────────────────────────────── */
/*
   Carrousel CSS.
   Fonctionne avec une animation @keyframes sur le conteneur .slider.
   
   Logique de largeur :
     - .slider a width: 500% (5 slides × 100%)
     - Chaque .slide fait 20% du .slider, soit 100% de la zone visible
     - L'animation translateX de 0% à -80% fait défiler les 5 slides
   
   Pour modifier le nombre de slides :
    Changer "5" dans width (slider) et "20%" dans chaque slide
    Ajuster les % dans @keyframes slider-1
*/
.transition-sect-1 {
    padding: 0 80px;
    font-size: 30px;
    color: #444444;
    margin-bottom: 10px;
}

.slider-container {
    width: 85%;
    margin: 50px auto;
    overflow: hidden;
    border-radius: 50px;
}

.slider-1 .slider {
    animation: slider-1 40s infinite ease-in-out;
    display: flex;
    width: 500%;  /* 5 slides */
}

.slider-1 .slide {
    flex-shrink: 0;
    width: 20%;  /* 1/5 du slider = 100% de la zone visible */
}

/* Animation : pause 20% du temps sur chaque slide, transition rapide entre elles */
@keyframes slider-1 {
    0%,  20% { transform: translateX(0);    }
    25%, 45% { transform: translateX(-20%); }
    50%, 70% { transform: translateX(-40%); }
    75%, 95% { transform: translateX(-60%); }
    100%     { transform: translateX(-80%); }
}

/* Mise en page d'un événement dans le carrousel */
.evenement-gauche {
    display: flex;
    height: 500px;
    width: 100%;
}

.image-evenement {
    flex: 1;
    min-width: 0;
    height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 50px 0 0 50px;
}

/* Bloc texte à droite de l'image */
.text-evenements {
    flex: 0 0 500px;
    height: 100%;
    padding: 0 80px;
    background-color: #f5f2eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border-radius: 0 50px 50px 0;
}

.date-evenements {
    color: #444444;
    font-size: 27px;
}

.titre-evenements {
    color: #444444;
    font-size: 40px;
    font-weight: 800;
}

.descriptif-evenements {
    color: #888888;
    font-size: 20px;
}

/* Lien "Voir plus d'événements" */
.plus-event {
    display: flex;
    justify-content: center;
    margin: 20px 0 80px;
}

.plus-event a {
    font-size: 18px;
    text-decoration: underline;
    color: #444444;
}

.plus-event a:hover {
    opacity: 0.6;
}


/* ── 9. BUREAU ──────────────────────────────────────── */
.bureau {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
    padding: 120px 80px;
}

.bureau .membre {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bureau .membre .forme {
    height: 150px;
    width: 150px;
    border-radius: 100px;
    background-color: #cccccc;
}

.bureau .membre .nom-membre {
    padding-top: 20px;
    font-size: 18px;
    font-weight: 700;
}

.bureau .membre .poste {
    margin-top: 5px;
    color: #888888;
    font-size: 15px;
}


/* ── 10. FOOTER ──────────────────────────────────────────────── */
/*
   Identique sur toutes les pages — copier-coller ce bloc CSS si tu
   crées une nouvelle page avec sa propre feuille de style.
*/
.footer {
    background-color: #444444;
    height: 200px;
    display: flex;
    padding: 80px;
    gap: 60px;
    color: white;
    justify-content: space-around;
    align-items: center;
}

.footer .identitee {
    display: flex;
    align-items: center;
    color: white;
    gap: 20px;
}

.footer .identitee .logo {
    height: 60px;
}

.footer .identitee .Science-lab22 {
    font-size: 25px;
    width: 60px;
}

.footer .adresses {
    color: white;
}

.footer .adresses:hover {
    opacity: 0.7;
}

.footer .reseaux img {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

.footer .reseaux img:hover {
    opacity: 1;
}


/* ══════════════════════════════════════════════════════════════
   11. RESPONSIVE — @media
   
   Breakpoints :
     < 1100px : menu hamburger (navigation mobile)
     < 900px  : mise en page tablette
     < 600px  : mise en page mobile
══════════════════════════════════════════════════════════════ */

/* ── < 1100px : Menu hamburger ───────────────────────────────── */
@media screen and (max-width: 1100px) {

    /* On garde le logo/nom visible au-dessus du menu overlay */
    .barre-navigation .identitee {
        z-index: 10;
    }

    /* Le bouton Contact disparaît de la navbar (réapparaît dans le menu overlay) */
    .barre-navigation .btn-contact {
        display: none;
    }

    /* Icône hamburger blanche (fond transparent/sombre) */
    .barre-navigation .menu-ham {
        display: block;
        z-index: 10;
    }

    /* Menu de navigation en overlay plein écran */
    /* Par défaut : caché (opacity 0, décalé vers le haut) */
    /* Actif (classe 'mobile-menu') : visible et à sa place */
    .barre-navigation .navigation {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        flex-direction: column;
        position: absolute;
        align-items: flex-start;
        top: 0;
        right: 0;
        width: 100vw;
        background: rgba(17, 17, 17, 0.88);
        padding: 120px 0 100vh 35px;
        gap: 35px;
        z-index: 5;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .barre-navigation .navigation.mobile-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .barre-navigation .navigation.mobile-menu a {
        color: white;
        font-size: 20px;
    }

    /* Sur fond blanc (après scroll) : hamburger noir à la place */
    .barre-navigation.scrolled .menu-ham {
        display: none;
    }

    .barre-navigation.scrolled .menu-ham-2 {
        display: block;
        z-index: 10;
    }

    /* Quand le menu est ouvert ET que la navbar est scrolled :
       on force le logo en blanc pour qu'il reste lisible sur l'overlay sombre */
    .barre-navigation.scrolled.menu-ouvert .identitee {
        color: white;
    }

    .barre-navigation.scrolled.menu-ouvert .menu-ham {
        display: block;
    }

    .barre-navigation.scrolled.menu-ouvert .menu-ham-2 {
        display: none;
    }

    /* Bouton Contact réinjecté dans le menu overlay */
    .barre-navigation .navigation.mobile-menu .btn-contact {
        display: inline-flex;
        position: absolute;
        top: 400px;
        left: 35px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        color: #444444;
        background-color: white;
        z-index: 6;
    }

    /* Texte hero plus petit */
    .accueil-1 {
        font-size: 50px;
        padding-left: 60px;
        width: 90%;
    }

    .accueil-1 .Science-Lab22 {
        font-size: 60px;
    }
}


/* ── < 900px : Tablette ──────────────────────────────────────── */
@media screen and (max-width: 900px) {

    /* Hero */
    .accueil-1 {
        padding: 200px 40px 0;
        font-size: 42px;
        line-height: 52px;
        width: 100%;
    }

    .accueil-1 .Science-Lab22 {
        font-size: 52px;
    }

    /* Description */
    .description {
        padding: 80px 40px;
    }

    .description .fond {
        font-size: 100px;
        left: 15px;
        line-height: 110px;
    }

    /* Chiffres clés */
    .section-1 {
        height: auto;
        padding: 50px 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .section-1 .text-sect-1 .titre-sect-1 {
        font-size: 48px;
    }

    .section-1 .text-sect-1 p {
        font-size: 28px;
    }

    /* Missions */
    .missions {
        padding: 80px 40px;
    }

    .missions .text-mission {
        margin-bottom: 60px;
        font-size: 36px;
    }

    .missions .nos-missions {
        flex-direction: column;
        gap: 50px;
    }

    /* Section actualité */
    .actualité {
        margin: 0 30px 80px;
        height: 350px;
    }

    /* Carrousel : layout horizontal → vertical */
    .slider-container {
        width: 95%;
        border-radius: 20px;
    }

    .evenement-gauche {
        flex-direction: column;
        height: auto;
    }

    .image-evenement {
        width: 100%;
        height: 250px;
        border-radius: 20px 20px 0 0;
        flex: none;
    }

    .text-evenements {
        flex: none;
        width: 100%;
        padding: 30px 25px;
        border-radius: 0 0 20px 20px;
        gap: 12px;
    }

    .titre-evenements {
        font-size: 26px;
    }

    .date-evenements {
        font-size: 18px;
    }

    .descriptif-evenements {
        font-size: 16px;
    }

    /* Titre section carrousel */
    .transition-sect-1 {
        padding: 0 30px;
        font-size: 22px;
    }

    /* Bureau */
    .bureau {
        padding: 60px 30px;
        gap: 30px;
    }
}


/* ── < 600px : Mobile ────────────────────────────────────────── */
@media screen and (max-width: 600px) {

    /* Hero */
    .hero-img {
        height: 500px;
    }

    .accueil-1 {
        padding-top: 160px;
        font-size: 32px;
        line-height: 42px;
    }

    .accueil-1 .Science-Lab22 {
        font-size: 40px;
    }

    /* Description */
    .description {
        padding: 60px 25px;
    }

    /* Cache le mot décoratif géant sur très petits écrans */
    .description .fond {
        display: none;
    }

    /* Chiffres */
    .section-1 .text-sect-1 .titre-sect-1 {
        font-size: 38px;
    }

    .section-1 .text-sect-1 p {
        font-size: 22px;
    }

    /* Footer : colonne sur mobile */
    .footer {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
        gap: 20px;
        text-align: center;
    }
}