body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    height: 100vh; /* Force le body à prendre toute la hauteur */
    display: flex;
    flex-direction: column; /* Organise les enfants verticalement */
    overflow: hidden; /* Empêche le scroll sur le body */
}

/* ----- HEADER AJUSTÉ ----- */
header {
    position: relative; /* Keep relative for absolute positioning of children */
    padding: 15px; /* Adjust padding as needed */
    background-color: #46d1c0;
    color: white;
    flex-shrink: 0;
    display: flex; /* Use flexbox for the main layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    min-height: 80px; /* Minimum height */
}

/* Bloc de deux logos sur la gauche */
.left-logos {
    position: absolute; /* Position absolutely within the header */
    left: 15px; /* Distance from the left edge */
    top: 50%; /* Align to the vertical center */
    transform: translateY(-50%); /* Adjust for vertical centering */
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    flex-shrink: 0;
}

.left-logos img {
    width: 90px;
    height: auto;
}

/* Logo principal centré */
.logo-container {
    /* No absolute positioning needed, it will be centered by the header's flex properties */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 10px; /* Add some space between the logo and the title */
}

.logo {
    width: 100px;
    height: auto;
}

/* Titre principal (H1) ajusté */
h1 {
    margin: 0; /* Remove default margin */
    font-size: 16px; /* Keep your desired font size */
    text-align: center; /* Center the text */
    flex-grow: 0; /* Prevent it from growing */
    flex-shrink: 0; /* Prevent it from shrinking */
    min-width: 150px; /* Maintain minimum width */
    line-height: 1.3;
}

/* Logo numéro à droite */
.right-logo {
   position: absolute; /* Position absolutely within the header */
   right: 15px; /* Distance from the right edge */
   top: 50%; /* Align to the vertical center */
   transform: translateY(-50%); /* Adjust for vertical centering */
   display: flex;
   align-items: center;
   flex-shrink: 0;
}

.right-logo img {
    width: 180px;
    height: auto;
}
/* --- Assurez-vous que le reste du CSS (body, #content-area, etc.) reste comme dans la version précédente --- */

/* ------------- ZONE DE CONTENU ------------- */

/* Conteneur principal qui prendra le reste de l'écran */
#content-area {
    flex-grow: 1; /* Permet à cette zone de prendre tout l'espace vertical restant */
    overflow-y: auto; /* Ajoute le scroll UNIQUEMENT si nécessaire pour cette zone */
    padding: 15px; /* Padding réduit */
    background-color: #ffffff; /* Fond blanc pour distinguer du body */
    display: flex;
    flex-direction: column;
}

/* Titre H2 ajusté */
h2 {
    font-size: 1.5em; /* Taille de police légèrement réduite */
    padding: 10px 0; /* Padding vertical réduit, horizontal supprimé */
    margin: 0 0 15px 0; /* Marge inférieure réduite */
    color: #333;
    flex-shrink: 0; /* Empêche le titre de rétrécir */
}

.navigation-container {
    /* Suppression des marges/paddings superflus si nécessaire */
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Permet au conteneur de navigation de s'étendre */
    display: flex;
    flex-direction: column;
    min-height: 0; /* Nécessaire pour flex-grow dans certains navigateurs */
}

.breadcrumb {
    display: flex;
    align-items: center;
    margin-bottom: 15px; /* Marge inférieure réduite */
    flex-wrap: wrap;
    font-size: 1em; /* Taille ajustée */
    padding: 5px 0; /* Padding réduit */
    flex-shrink: 0;
}

.breadcrumb-item {
    margin-right: 8px; /* Espace réduit */
    cursor: pointer;
    color: #666;
}

.breadcrumb-item:not(:last-child)::after {
    content: ">";
    margin-left: 8px; /* Espace réduit */
}

.breadcrumb-item:hover {
    color: #333;
}

.navigation-content {
    --gap: 15px; /* Espacement réduit entre les blocs */

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center; /* Centre les blocs */
    align-content: flex-start; /* Aligne les lignes en haut */
    padding: 10px 0; /* Ajoute un peu de padding vertical */
    overflow-y: auto; /* Permet le scroll *interne* si les blocs dépassent */
    flex-grow: 1; /* Permet à cette zone de s'étendre */
}

.group-header, .link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1.8 / 1; /* Ratio ajusté pour potentiellement réduire la hauteur */
    margin: 0;
    border-radius: 8px; /* Rayon réduit */
    overflow: hidden;
    background-color: #cecece;
    transition: transform 0.2s ease, background-color 0.2s ease; /* Transition plus rapide */
    cursor: pointer;
    color: #ffffff;
    font-size: 1.1vw; /* Taille de police relative à la largeur de la vue, peut nécessiter ajustement */
    /* Ajustement de la largeur pour potentiellement en afficher plus par ligne */
    /* Essayons 5 colonnes : 100% / 5 = 20%. Il faut soustraire le gap. */
    /* calc(20% - (var(--gap) * 4 / 5)) -> Approximation pour 5 colonnes */
    width: calc(20% - 12px); /* Ajustement manuel approximatif pour 5 colonnes avec gap de 15px */
    min-width: 120px; /* Largeur minimale pour éviter qu'ils soient trop petits */
    padding: 5px; /* Padding réduit */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    text-align: center; /* Assure le centrage du texte */
    line-height: 1.3; /* Améliore la lisibilité */
    word-break: break-word; /* Coupe les mots longs si nécessaire */
}

.group-header:hover, .link:hover {
    transform: translateY(-3px) scale(1.03); /* Effet de survol ajusté */
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
}

.resource-count {
    font-size: 0.75em; /* Taille réduite */
    font-weight: normal; /* Poids normal */
    margin-top: 3px; /* Marge réduite */
    letter-spacing: normal; /* Espacement normal */
    text-transform: none; /* Pas de majuscules */
    opacity: 0.8; /* Légèrement transparent */
}


.small-note {
    font-size: 0.8em;
    font-style: italic; /* Mise en italique pour distinction */
    color: #ffffff;
    display: block; /* Assure qu'il prend sa propre ligne si nécessaire */
    margin-top: 3px; /* Petite marge supérieure */
    opacity: 0.9;
}

.align-left {
    text-align: left;
    display: block; /* Prend toute la largeur disponible */
    margin-top: 5px;
    width: 100%; /* Assure qu'il prend toute la largeur du parent */
}

/* Styles spécifiques pour s'assurer que le span dans le titre des liens s'affiche correctement */
.link .small-note {
    line-height: 1.1; /* Ajuste l'interligne pour les notes */
    font-size: 0.75em;
}