/* ==================== PARTIE Projets ==================== */
/* Section principale dédiée à l’affichage des projets */

/* Couleur du texte par défaut pour toute la page */
body { 
    color :#1e2535;
}


/* ==================== Container principal ==================== */
/* Conteneur général utilisant Flexbox */
#container { 
    display: flex;              /* active le layout flex */
    line-height: 2;             /* augmente l’interligne pour une meilleure lisibilité */

    /* Style des listes non ordonnées à l’intérieur du container */
    ul {
        list-style-type: disc;      /* puces classiques */
        list-style-position: outside; /* puces à l’extérieur du texte */
        margin: 1em 0;              /* marges verticales standard */
        padding-left: 40px;         /* indentation des listes */
    }

    /* Style des éléments de liste */
    li {
        margin: 0;                 /* supprime les marges par défaut */
        padding: 0;                /* supprime les espacements internes */
    }
}


/* Mise en valeur du texte en gras */
b {
    font-size: 18px;               /* augmente la taille de la police */
}


/* ==================== Bloc gauche fixe ==================== */
/* Colonne contenant les filtres ou informations fixes */
#bloc-fixe {
    width: 30%;                    /* largeur du bloc */
    padding: 20px;                 /* espace interne */
    position: relative;            /* positionnement relatif */
    top: 25%;                      /* décalage vertical */
    left: 4%;                      /* décalage horizontal */
    background: #f5f7fa;           /* fond clair */
    border-radius: 12px;           /* coins arrondis */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* ombre portée */
    overflow-y: auto;              /* scroll vertical si nécessaire */
    margin-top: 3%;                /* marge supérieure */
}


/* ==================== Explication des filtres ==================== */
/* Texte explicatif sous les filtres */
.explication-filtre {
    font-size: 1rem;               /* taille standard */
    color: #FFA500;                /* couleur orange */
    margin-top: 15px;              /* espace au-dessus */
    margin-bottom: 8px;            /* espace en dessous */
    line-height: 1;                /* interligne serré */
}


/* ==================== Bloc central ==================== */
/* Colonne principale contenant les projets */
#colonne_stages {
    width: 75%;                    /* largeur principale */
    margin-left: 8%;               /* espace à gauche */
    margin-top: 2%;                /* espace en haut */
    padding: 20px;                 /* espace interne */
}


/* ==================== Titre à droite ==================== */
/* Titre principal de la colonne projets */
#titre-droite {
    font-size: 2rem;               /* taille du titre */
    color: #1a73e8;                /* bleu */
}


/* ==================== Blocs de projets filtrés ==================== */
/* Carte individuelle d’un projet */
.bloc-stage {
    display: none;                 /* caché par défaut (filtrage) */
    background: white;             /* fond blanc */
    border-radius: 12px;           /* coins arrondis */
    padding: 30px;                 /* espace interne */
    margin-bottom: 4%;             /* espace entre les blocs */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* ombre */
    transition: all 0.3s;          /* animation fluide */
}

/* Titres des projets */
.bloc-stage h2 {
    font-size: 1.5rem;             /* taille du sous-titre */
    color: #FFA500;                /* couleur orange */
}


/* ==================== Bouton reset ==================== */
/* Bouton pour réinitialiser les filtres */
#reset-filters {
    margin-top: 6%;                /* espace au-dessus */
    width: 100%;                   /* pleine largeur */
    padding: 12px;                 /* espace interne */
    background: #FFA500;           /* fond orange */
    color: white;                  /* texte blanc */
    font-weight: bold;             /* texte en gras */
    border: none;                  /* pas de bordure */
    border-radius: 6px;            /* coins arrondis */
    cursor: pointer;               /* curseur cliquable */
    transition: 0.2s;              /* transition au survol */
}

/* Effet hover du bouton reset */
#reset-filters:hover { 
    background: #1e2535;           /* changement de couleur */
}


/* ==================== Wrapper texte / PDF ==================== */
/* Conteneur flex pour aligner texte et PDF */
.conteneur {
    display: flex;                 /* mise en page flex */
    gap: 50px;                     /* espace entre texte et PDF */
    align-items: flex-start;       /* alignement en haut */
}


/* Bloc texte */
.texte {
    flex: 1;                       /* occupe la moitié de l’espace */
}


/* Bloc PDF */
.pdf-viewer {
    flex: 1;                       /* occupe l’autre moitié */
}


/* iframe affichant le PDF */
.pdf-viewer iframe {
    width: 100%;                   /* largeur maximale */
    max-width: auto;               /* largeur non limitée */
    height: 600px;                 /* hauteur fixe */
    border: 1px solid #ccc;        /* bordure grise */
}


/* ==================== Bloc présentation ==================== */
/* Bloc introductif ou descriptif */
.presentation { 
    width: 92%;                    /* largeur du bloc */
    padding: 20px;                 /* espace interne */
    position: relative;            /* positionnement relatif */
    top: 5%;                       /* décalage vertical */
    left: 4%;                      /* décalage horizontal */
    background: #f5f7fa;           /* fond clair */
    border-radius: 12px;           /* coins arrondis */
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* ombre */
    overflow-y: auto;              /* scroll vertical */
    margin-top: 3%;                /* marge supérieure */
}


/* Bordure supérieure décorative des blocs projets */
.bloc-stage {  
    border-top: 4px solid #1e2535; /* ligne colorée en haut */
}