body.admin-page {
    font-family: sans-serif;
    margin: 0; /* Important: Supprime les marges par défaut du body */
    padding: 0; /* Important: Supprime les paddings par défaut du body */
    background-color: #272727;
    color: #EFEFEF;

    /* Configuration Flexbox pour coller le pied de page en bas */
    display: flex;
    flex-direction: column; /* Empile les enfants (header, main-content-wrapper, footer) verticalement */
    min-height: 100vh; /* La hauteur minimale est 100% de la hauteur de la vue */
}

/* --- Styles de l'en-tête (calqués sur style_accueil.css) --- */
.header {
    background-color: #CF2E2E; /* Fond rouge */
    color: #EFEFEF; /* Texte clair */
    padding: 10px 20px; /* Espace interne */
    display: flex; /* Active Flexbox */
    align-items: center; /* Alignement vertical des éléments au centre */
    justify-content: space-between; /* Espacement entre le bloc gauche et le bouton */
    min-height: 80px; /* Hauteur minimale de l'en-tête */
    width: 100%; /* S'assure que l'en-tête prend toute la largeur */
    box-sizing: border-box; /* Inclut le padding dans le calcul de la largeur */
}

.header-left {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Permet à cette section de prendre l'espace disponible */
}

.header img {
    max-height: 40px; /* Hauteur du logo */
    margin-right: 15px; /* Espace à droite du logo */
}

.header h1 {
    margin: 0 auto; /* Centre le titre horizontalement dans header-left */
    font-size: 1.8em; /* Taille du titre */
    text-align: center; /* Assure que le texte est centré */
    /* white-space: nowrap; n'est plus nécessaire ici, car nous le gérons avec les media queries */
}

/* Styles pour le bouton de configuration/déconnexion (calqués sur style_accueil.css) */
.config-button {
    background-color: transparent; /* Fond transparent */
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none; /* Supprime le soulignement par défaut */
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    transition: background-color 0.2s ease-in-out; /* Transition fluide au survol */
}

.config-button:hover {
    background-color: #EFEFEF; /* arrière plan blanc au survol */
}

.config-button img {
    display: block;
    margin: 0 auto;
    max-height: 30px; /* Taille de l'icône */
    max-width: auto;
}

/* --- Wrapper pour le contenu principal (entre l'en-tête et le pied de page) --- */
.main-content-wrapper {
    flex-grow: 1; /* S'étend pour pousser le footer vers le bas */
    margin: 20px; /* Ajoute des marges latérales au contenu principal */
    /* Vous pouvez ajouter un background-color ou d'autres styles ici si le contenu doit avoir un fond différent */
}

/* --- MEDIA QUERIES POUR LA RESPONSIVITÉ DE L'EN-TÊTE --- */
@media (max-width: 768px) { /* Pour les écrans de tablette et petits ordinateurs */
    .header {
        flex-wrap: wrap; /* Permet aux éléments de l'en-tête de passer à la ligne */
        justify-content: center; /* Centre les éléments lorsqu'ils passent à la ligne */
        padding: 10px; /* Réduit le padding pour les petits écrans */
        min-height: auto; /* Laisse la hauteur s'ajuster dynamiquement */
    }

    .header-left {
        flex-basis: 100%; /* Force header-left (logo + titre) à prendre toute la largeur */
        justify-content: center; /* Centre le logo et le titre à l'intérieur de header-left */
        margin-bottom: 10px; /* Espace sous le logo/titre */
    }

    .header img {
        max-height: 35px; /* Réduit la taille du logo */
        margin-right: 10px;
    }

    .header h1 {
        font-size: 1.5em; /* Réduit la taille du titre */
        white-space: normal; /* PERMET AU TEXTE DE REVENIR À LA LIGNE ! */
        text-align: center;
        margin: 0; /* Réinitialise les marges pour éviter les problèmes d'alignement */
    }

    .config-button {
        flex-basis: 100%; /* Force le bouton à prendre toute la largeur */
        order: 1; /* Le place en dernier (en bas) après le logo/titre */
        margin-top: 5px; /* Espace au-dessus du bouton */
    }
}

@media (max-width: 480px) { /* Pour les très petits écrans (téléphones) */
    .header img {
        max-height: 30px;
    }

    .header h1 {
        font-size: 1.2em; /* Réduit encore la taille du titre */
    }
}


/* --- Styles existants de la page webmin --- */

.folder {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #272727;
    color: #EFEFEF;
    border-radius: 8px; /* Coins légèrement arrondis */
}

.folder h2 {
    color: #EFEFEF;
    display: flex; /* Permet d'aligner les éléments enfants (bouton, texte, corbeille) */
    align-items: center; /* Centre verticalement les éléments */
    justify-content: flex-start; /* Aligne les éléments au début (à gauche) */
    text-align: left; /* Assure que le texte lui-même s'aligne à gauche si sur plusieurs lignes */
    /* Assurez-vous qu'il n'y a pas de margin-left ou de padding-left excessif ailleurs qui le pousserait */
    margin-left: 0; /* Réinitialiser toute marge gauche potentielle */
    padding-left: 10px; /* Un petit padding pour ne pas coller au bord gauche de la div .folder */
    width: 100%; /* S'assurer que le h2 prend toute la largeur disponible */
    box-sizing: border-box; /* Inclure padding et border dans la largeur */
}

.folder h2 .toggle-content {
    margin-right: 10px; /* Espace entre le bouton et le texte */
}

.folder h2 .delete-zone {
    margin-left: auto; /* Pousse le bouton de suppression complètement à droite */
}

.toggle-content {
    background-color: transparent;
    color: transparent;
    border: none;
    padding: 0;
    margin-right: 10px;
    cursor: pointer;
    width: 48px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* S'assurer que l'image ne dépasse pas */
    /* Ajouter une transition pour le hover si vous voulez une animation sur le survol, même sans fond */
    transition: background-color 0.2s ease-in-out;
}

.toggle-content:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Un léger fond blanc transparent au survol */
    border-radius: 3px;
}

.toggle-content img {
    display: block;
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease-in-out; /* Transition douce pour la rotation */
    filter: invert(100%); /* Inverse les couleurs de l'image (noir devient blanc, etc.) */
}

/* Rotation de l'icône lorsque le dossier est "ouvert" --- */
/* Cible l'icône de la flèche à l'intérieur d'un bouton .toggle-content qui est lui-même dans un .folder.open */
.folder.open .toggle-content img {
    transform: rotate(180deg); /* Rotation de 180 degrés pour pointer vers le haut */
}

.media-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
}

.media-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #EFEFEF;
    padding: 5px;
    text-align: center;
    background-color: #333;
    color: #EFEFEF;
    width: 200px;
    background-image: url('');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.media-item img {
    margin-bottom: 0px;
    max-width: 160px;
    height: auto;
    opacity: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.messages {
    padding: 10px;
    margin-bottom: 15px;
    color: #EFEFEF;
    border-radius: 5px;
}

.messages label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #EFEFEF;
}

.messages textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #444;
    color: #EFEFEF;
    border: 1px solid #666;
    padding: 8px;
    border-radius: 3px;
}

.messages button.save-message {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.messages button.save-message:hover {
    background-color: #AF2E2E;
}

.upload-form {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 15px;
    color: #EFEFEF;
}

.upload-form h3 {
    color: #EFEFEF;
    margin-top: 0;
}

.upload-form input[type="file"] {
    padding: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #444;
    color: #EFEFEF;
    border: 1px solid #666;
    border-radius: 3px;
}

.upload-form button.upload-button {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.upload-form button.upload-button:hover {
    background-color: #AF2E2E;
}

button.delete-media {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 5px 5px;
    border-radius: 3px;
    width: 32px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 5px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

button.delete-media:hover {
    background-color: #a62424;
}

.download-media {
    color: #EFEFEF;
    border: none;
    padding: 5px 5px;
    border-radius: 3px;
    width: 16px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 5px;
    position: absolute;
    left: 5px;
    z-index: 10;
    background-color: #007bff;
}

.download-media:hover {
    background-color: #0056b3;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}

.image-duration-control {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #EFEFEF;
}

.image-duration-control label {
    font-weight: bold;
}

.image-duration-control input[type="number"] {
    width: 60px;
    padding: 7px;
    border-radius: 3px;
    border: 1px solid #666;
    background-color: #444;
    color: #EFEFEF;
    text-align: center;
}

.image-duration-control button.save-image-duration {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.image-duration-control button.save-image-duration:hover {
    background-color: #AF2E2E;
}

#media-container {
    /* Les marges latérales sont maintenant gérées par .main-content-wrapper */
}
#media-container .folder .media-list .media-item img {
    opacity: 0;
}
#media-container .folder .media-list .media-item .delete-media img {
    opacity: 1;
}
#media-container .folder .media-list .media-item .download-media img {
    opacity: 1;
}

#media-container .folder .media-list .media-item .filename-overlay {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: auto;
    background-color: rgba(0, 0, 0, 0.6);
    color: #EFEFEF;
    font-size: 0.8em;
    text-align: right;
    padding: 5px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 11;
}

.new-zone-creation {
    margin-top: 30px;
    margin: 0px; 
    padding: 15px;
    border: 1px solid #ccc;
    background-color: #272727;
    color: #EFEFEF;
    border-radius: 8px; /* Coins légèrement arrondis */
}

.new-zone-creation h2 {
    margin-top: 0;
    color: #EFEFEF;
    font-size: 1.4em;
    text-align: left;
}

.delete-zone {
    /*background-color: #CF2E2E;
    color: #EFEFEF;*/
    background-color: transparent;
    color: transparent;
    border: none;
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10px;
}

.delete-zone:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.delete-zone img {
    display: block;
    width: 34px;
    height: 34px;
    transition: transform 0.3s ease-in-out; /* Transition douce pour la rotation */
    filter: invert(100%); /* Inverse les couleurs de l'image (noir devient blanc, etc.) */
}

.rename-zone {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ccc;
    color: #EFEFEF;
}

.rename-zone h3 {
    margin-top: 0;
    font-size: 1.1em;
}

.rename-zone p {
    margin-bottom: 5px;
}

.rename-zone input[type="text"] {
    padding: 7px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 3px;
    border: 1px solid #666;
    background-color: #444;
    color: #EFEFEF;
}

.rename-zone button.rename-zone-button {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

.rename-zone button.rename-zone-button:hover {
    background-color: #AF2E2E;
}

#createZoneButton {
    background-color: #CF2E2E;
    color: #EFEFEF;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
}

#createZoneButton:hover {
    background-color: #AF2E2E;
}

#newZoneName {
    padding: 7px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 3px;
    border: 1px solid #666;
    background-color: #444;
    color: #EFEFEF;
}

/* --- FOOTER STYLES (calqués sur style_accueil.css) --- */
.admin-footer {
    background-color: #272727; /* Même fond que le body pour s'intégrer */
    color: #EFEFEF; /* Texte clair */
    padding: 20px;
    margin-top: auto; /* Poussera le pied de page vers le bas */
    border-top: 1px solid #444; /* Petite ligne de séparation */
    text-align: center; /* Centrer le texte par défaut */
}

.footer-content {
    display: flex;
    flex-wrap: wrap; /* Permettre aux sections de passer à la ligne sur petits écrans */
    justify-content: space-between; /* Espacer les sections (gauche, centre, droite) */
    align-items: flex-start; /* Aligner les éléments en haut de chaque section */
    max-width: 1200px; /* Largeur maximale pour le contenu du pied de page */
    margin: 0 auto; /* Centrer le contenu du pied de page */
}

.footer-section {
    flex: 1; /* Chaque section prend une part égale de l'espace */
    padding: 10px;
    min-width: 250px; /* Largeur minimale pour les sections avant de passer à la ligne */
    box-sizing: border-box; /* Inclure padding dans la largeur */
}

.footer-left {
    text-align: left;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.footer-logo {
    max-height: 50px; /* Taille du logo du pied de page */
    margin-bottom: 10px;
}

.footer-section p {
    margin: 5px 0; /* Espacement entre les paragraphes */
    font-size: 0.9em;
}

.footer-link {
    color: #CF2E2E; /* Couleur du lien, assortie à l'en-tête */
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Media Queries pour la responsivité du pied de page */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column; /* Les sections s'empilent sur les petits écrans */
        align-items: center; /* Centrer les éléments dans chaque section empilée */
    }

    .footer-section {
        text-align: center; /* Centrer le texte dans chaque section sur petits écrans */
        min-width: 100%; /* Les sections prennent toute la largeur */
        margin-bottom: 20px; /* Espace entre les sections empilées */
    }

    .footer-section:last-child {
        margin-bottom: 0; /* Pas de marge en bas de la dernière section */
    }

    .footer-logo {
        margin-bottom: 15px; /* Plus d'espace sous le logo */
    }
}

/* --- STYLES POUR LES LOGOS SOCIAUX DANS LE FOOTER --- */
.social-icons {
    margin-top: 15px; /* Espacement au-dessus des icônes */
    display: flex; /* Utiliser flexbox pour aligner les icônes */
    justify-content: center; /* Centrer les icônes horizontalement */
    gap: 15px; /* Espacement entre les icônes */
    flex-wrap: wrap; /* Permettre aux icônes de passer à la ligne si l'espace est insuffisant */
}

.social-icon {
    height: 35px; /* Taille fixe pour les icônes (ajustez si besoin) */
    width: auto; /* Garder les proportions */
    transition: transform 0.2s ease-in-out; /* Animation légère au survol */
}

.social-icon:hover {
    transform: scale(1.1); /* Agrandir légèrement l'icône au survol */
}

/* --- Styles pour les liens SVG avec fond rouge --- */
.social-link-svg {
    display: flex; /* Permet de centrer l'image SVG à l'intérieur */
    align-items: center;
    justify-content: center;
    background-color: #CF2E2E; /* Votre rouge emblématique */
    border-radius: 5px; /* Arrondir les coins pour un look bouton */
    padding: 5px; /* Espacement interne pour que le logo ne colle pas aux bords */
    height: 35px; /* Assure que le conteneur a la même hauteur que les autres icônes */
    width: 35px; /* Assure que le conteneur a la même largeur que la hauteur pour un carré */
    box-sizing: border-box; /* Inclure padding et border dans les dimensions */
}

/* Ajuster l'image SVG à l'intérieur du conteneur */
.social-link-svg .social-icon {
    height: 25px; /* Réduire la taille de l'icône pour qu'elle s'insère dans le padding */
    width: 25px;
    /* Si vos SVGs sont noirs et que vous voulez qu'ils apparaissent blancs sur fond rouge,
       vous pouvez appliquer un filtre CSS. Si vos SVGs sont déjà rouges ou blancs,
       vous n'aurez peut-être pas besoin de cette ligne ou devrez l'ajuster. */
    filter: invert(100%); /* Rend une icône noire blanche. Ajustez selon vos SVG. */
}

/* Adapter l'effet hover pour ces liens spécifiques si nécessaire */
.social-link-svg:hover {
    background-color: #a62424; /* Un rouge plus foncé au survol */
    transform: scale(1.1); /* Conserver l'effet de scale sur le conteneur */
}

/* Assurez-vous que l'effet de transformation du .social-icon ne se double pas */
.social-link-svg .social-icon:hover {
    transform: none; /* Supprime l'effet scale de l'icône si déjà sur le conteneur */
}

/* Ajustez la règle .social-icon existante pour s'assurer que les PNG (Moodle) gardent leur style */
/* Cette règle est répétée pour clarté, mais assure la cohérence */
.social-icon {
    height: 35px; /* Taille fixe pour les icônes */
    width: auto; /* Garder les proportions */
    transition: transform 0.2s ease-in-out; /* Animation légère au survol */
}

/* L'effet de scale pour les PNG uniquement */
.social-icons a:not(.social-link-svg) .social-icon:hover {
    transform: scale(1.1);
}

/* Styles pour la carte d'information (info-card) */
.info-card {
    background-color: #373737; /* Arrière-plan légèrement gris */
    border: 1px solid #ddd; /* Bordure discrète */
    padding: 10px;
    margin: 0px; /* marges */
    margin-bottom: 20px; /* Espace sous la carte */
    border-radius: 8px; /* Coins légèrement arrondis */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Ombre légère pour un effet de profondeur */
    font-family: Arial, sans-serif; /* Police lisible */
    line-height: 1.6;
    color: #EFEFEF;
}

.info-card h3 { /* Si vous ajoutez un h3 à l'intérieur */
    color: #EFEFEF;
    margin-top: 0;
    margin-bottom: 10px;
}

.info-card p {
    margin-bottom: 10px;
}

.info-card ul {
    list-style: none; /* Supprime les puces par défaut */
    padding-left: 0;
    margin-bottom: 10px;
}

.info-card ul li {
    position: relative;
    padding-left: 25px; /* Espace pour une puce personnalisée */
    margin-bottom: 5px;
}

.info-card ul li::before {
    content: '✔️'; /* Caractère de puce (checkmark) */
    position: absolute;
    left: 0;
    color: #CF2E2E; /* Couleur pour la puce */
    font-size: 1.1em;
    line-height: 1.6; /* Assure l'alignement vertical */
}

/* Styles spécifiques pour les listes imbriquées si nécessaire */
.info-card ul ul {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 20px; /* Indentation pour la sous-liste */
}

.info-card ul ul li::before {
    content: '➡️'; /* Puce différente pour la sous-liste */
    color: #CF2E2E; /* Couleur différente */
    font-size: 0.9em;
}

/* Style pour la ligne de séparation */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
    margin: 10px 0; /* Espacement autour de la ligne */
}