body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }


        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 15px;
            font-size: 0.8em;
        }


        h1 {
            font-size: 36px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        p {
            font-size: 18px;
            line-height: 1.5;
        }

        a {
            color: #007bff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }


/* Le CSS du Menu Navbar */ 


.menu {
    display: flex;              /* Transformation en flexbox */
    padding:0;                  /* Suppression des marges internes */
    background-color: #ccc;   /* Ajout de la couleur d'arrière-plan */
	justify-content: center     /* Alignements des liens dans le menu */
}

.menu li {
    list-style-type: none ;       /* Suppression des puces */
}
.menu a {
    display:block;                /* Transformation en block */
    min-width: 100px;             /* Largeur minimale des liens */
	height : 50px;
	margin: 0.6rem;               /* Marges externes (1 valeurs = 4 directions) */
    padding: 0.5rem;              /* Marges internes (2 valeurs = haut/bas et gauche/droite)*/
    text-align: center;           /* Centrage du texte */   
    background-color: #6c6a6a;  /* Couleur d'arrière-plan */
    color: #fff;                /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    border: 1px solid #fff;     /* Ajout d'une bordure */
    border-radius: 8px;           /* Arrondis des bordures */
	transition: all 1s ;          /* Ajout des effets de transition */
}

.menu a:hover {
    background-color: #7b8790;
    color: #666;
    border-color: black;
  }
  #menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
    /* on centre le menu dans la page */
        text-align: center;
    }
    #menu-deroulant li {
    /* on place les liens du menu horizontalement */
        display: inline-block;
    }
    #menu-deroulant ul li {
    /* on enlève ce comportement pour les liens du sous menu */
        display: inherit;
    }
    #menu-deroulant a {
        text-decoration: none;
        display: block;
        color:#000;
    }
    #menu-deroulant ul {
        position: absolute;
    /* on cache les sous menus complètement sur la gauche */
        left: -999em;
        text-align: left;
        z-index: 1000;
    }
    #menu-deroulant li:hover ul {
    /* Au survol des li du menu on replace les sous menus */
        left: auto;
    }




/* Page Membres */

.member-titre {
    background-color: #6a6969;
    color: #fff;
    text-align: left;
    padding: 10px;
}
        .member-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px;
            text-align: center;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Pour espacer les fiches */
            width: 100%; /* Assurez-vous que le div principal occupe toute la largeur */
        }

        .member-card {
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: calc(25% - 15px);
            /* Pour avoir 4 fiches par ligne (25% - espacement) */
            margin-bottom: 15px;
            padding: 15px;
        }



        .member-image {
            width: auto; /* Largeur automatique pour conserver le rapport hauteur/largeur */
            height: 400px; /* Hauteur fixe de 400px */
            min-width: 245.5px; /* Largeur minimale de 245.5px */
            margin: 5px;
            margin-bottom: 5px;
            max-width: 100%;
        }
        
        

        /* Si vous avez une photo manquante, vous pouvez ajouter une classe "no-photo" pour masquer l'image */
        .no-photo {
        display: none; /* Masque l'image si la classe "no-photo" est présente */
        }

        .member-name {
            font-weight: bold;
        }

        .member-skills {
            margin-top: 10px;
        }




/* CSS Pour la page acteur */


.actor-profile.member-card {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Occupe toute la largeur disponible */
    padding: 15px;
    text-align: center;
}

.actor-profile.member-card img {
    height: 200px;
    max-height: 200px;
    margin: 5px auto;
    max-width: 100%;
}

.actor-profile.member-card h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

.actor-profile.member-card .subtitle {
    font-size: 18px;
    margin-bottom: 10px;
}

.actor-profile.member-card .info p {
    font-size: 16px;
    margin-bottom: 5px;
}

.actor-profile.member-card .member-skills {
    font-size: 18px;
    margin-top: 10px;
}

.actor-profile.member-card h2 {
    font-size: 20px;
    margin-top: 20px;
}

.actor-profile.member-card .experience-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.actor-profile.member-card .experience-list li {
    margin-bottom: 15px;
}

.actor-profile.member-card .experience-list h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.actor-profile.member-card .experience-list p {
    font-size: 16px;
    margin-bottom: 5px;
}