/* ================================
   MISE EN FORME GÉNÉRALE DE LA PAGE
   ================================ */

/* Style global du corps de la page */
body {
    /* Police principale du site */
    font-family: 'Arial',  sans-serif;

    /* Centrage du texte par défaut */
    text-align: center;

    /* Couleur principale du texte */
    color: #1e2535;
}


/* ================================
   TITRES
   ================================ */

/* Mise en forme des titres de niveau 1 */
h1 {
    /* Police identique au reste du site */
    font-family: 'Segoe UI', Roboto, sans-serif;

    /* Centrage horizontal du titre */
    text-align: center;

    /* Espacements verticaux */
    margin-top: 3%;
    margin-bottom: 1%;

    /* Couleur du texte */
    color: #1e2535;

    /* Taille du texte */
    font-size: 30px;
}

/* Mise en forme des titres de niveau 2 */
h2 {
    /* Police cohérente avec le reste du site */
    font-family: 'Segoe UI', Roboto, sans-serif;

    /* Centrage horizontal */
    text-align: center;

    /* Marges verticales plus faibles que h1 */
    margin-top: 2%;
    margin-bottom: 1%;

    /* Couleur du texte */
    color: #1e2535;

    /* Taille équivalente aux h1 pour homogénéité */
    font-size: 30px;
}


/* ================================
   PARAGRAPHES ET TEXTE
   ================================ */

/* Mise en forme des paragraphes standards */
p {
    /* Police du texte */
    font-family: 'Segoe UI', Roboto, sans-serif;

    /* Couleur du texte */
    color: #1e2535;

    /* Décalage à droite pour limiter la largeur du texte */
    padding-right: 20%;

    /* Taille du texte */
    font-size: 15px;

    /* Alignement du texte */
    text-align: center;
}

/* Paragraphe spécifique (grille n°3 – équipe support) */
#p1 {
    /* Police identique au reste du site */
    font-family: 'Segoe UI', Roboto, sans-serif;

    /* Couleur du texte */
    color: #1e2535;

    /* Décalage plus important que les paragraphes standards */
    padding-right: 30%;

    /* Taille du texte */
    font-size: 15px;

    /* Centrage du texte */
    text-align: center;
}


/* ================================
   LIENS
   ================================ */

/* Style général des liens */
a {
    /* Police cohérente avec le reste du contenu */
    font-family: 'Segoe UI', Roboto, sans-serif;

    /* Couleur des liens */
    color: #1e2535;

    /* Taille du texte */
    font-size: 15px;
}


/* ================================
   CARTES (ÉQUIPE / ÉTUDIANTS)
   ================================ */

/* Conteneur des cartes */
.cards-container {
    /* Mise en page flexible */
    display: flex;

    /* Retour à la ligne automatique */
    flex-wrap: wrap;

    /* Centrage horizontal des cartes */
    justify-content: center;

    /* Espacement entre les cartes */
    gap: 25px;

    /* Marges internes du conteneur */
    padding: 40px 20px;
}

/* Carte individuelle */
.card {
    /* Position relative pour éléments internes */
    position: relative;

    /* Largeur flexible des cartes */
    flex: 1 1 calc(20% - 25px);

    /* Largeur minimale pour rester lisible */
    min-width: 220px;

    /* Couleur de fond (orange translucide) */
    background-color: #ffa600a1;

    /* Coins arrondis */
    border-radius: 12px;

    /* Ombre portée */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);

    /* Centrage du contenu */
    text-align: center;

    /* Marges internes */
    padding: 20px;

    /* Animation au survol */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Effet visuel au survol d’une carte */
.card:hover {
    /* Légère remontée de la carte */
    transform: translateY(-5px);

    /* Ombre plus marquée */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Image contenue dans une carte */
.card img {
    /* Taille fixe de l’image */
    width: 150px;
    height: 150px;

    /* Ajustement de l’image sans déformation */
    object-fit: cover;

    /* Forme circulaire */
    border-radius: 50%;

    /* Bordure colorée */
    border: 3px solid var(--accent-color);

    /* Espacement sous l’image */
    margin-bottom: 15px;
}

/* Nom (ou titre) affiché dans la carte */
.card .name {
    /* Taille du texte */
    font-size: 1.1rem;

    /* Texte semi-gras */
    font-weight: 600;

    /* Marge basse */
    margin-bottom: 8px;

    /* Couleur du texte */
    color: var(--primary-color);
}

/* Date ou information secondaire */
.card .date {
    /* Taille plus petite */
    font-size: 0.8rem;

    /* Poids normal */
    font-weight: 400;

    /* Marge basse */
    margin-bottom: 8px;

    /* Couleur du texte */
    color: var(--primary-color);
}


/* ================================
   PHOTOS (HORS CARTES)
   ================================ */

/* Mise en forme des photos générales */
#photo {
    /* Bordure blanche */
    border: 1% solid #fff;

    /* Ombre portée */
    box-shadow: 0 14px 18px rgba(0, 0, 0, 0.2);

    /* Coins arrondis */
    border-radius: 10px;
}

/* Effet au survol des photos */
#photo:hover {
    /* Agrandissement léger */
    transform: scale(1.1);

    /* Ombre plus prononcée */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}