body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Empêche les barres de défilement si l'œil sort un peu */
    min-height: 100vh;
    background-color: #ffffff;
    margin: 0;
    font-family: sans-serif;
	
}

#spiral-container {
    position: relative; /* Needed for absolute positioning of links */
    width: 550px; /* Adjust as needed */
    height: 523px; /* Adjust as needed */
    margin: 50px auto;
    border: 0px solid #000000; /* For visualization during development */
  }
  
.spiral-dot {
	z-index:4;
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%; /* Make it a circle */
    background-color: blue;
    position: absolute; /* Positioned relative to the container */
    text-decoration: none; /* Remove underline from links */
    color: blue; /* Match text color to background for a solid dot */
    font-size: 0; /* Hide any text content */
    line-height: 0; /* Ensure no extra line height affects positioning */
}

.eyes-container {
    display: flex;
    gap: 30px; /* Espace entre les yeux */
}

.eye {
    width: 60px;
    height: 60px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
	border: 3px solid #ffffff;
	z-index:3;
}

.pupil {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
	z-index:2;
    /* Le JavaScript va ajuster la position de la pupille */
}

.pentagon-background {

			margin-bottom:40px;
            width: 550px; /* Largeur du conteneur */
            height: 523px; /* Hauteur du conteneur (ajustée pour un pentagone régulier) */
			    /* Ou utilisez aspect-ratio si supporté et souhaité */
    /* aspect-ratio: 1 / 0.951; */
            background-color: #880808; /* Couleur de fond du pentagone (bleu clair) */
            position: absolute; /* Nécessaire pour positionner les éléments internes si besoin */
			z-index:1;

            /* Définit la forme du pentagone */
            /* Points: (x% y%) Top, Top-Right, Bottom-Right, Bottom-Left, Top-Left */
            clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
            /* Préfixe pour compatibilité (moins nécessaire aujourd'hui) */
            -webkit-clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);

            /* Utilisation de Flexbox pour organiser les boîtes à l'intérieur */
            display: flex;
            flex-direction: center; /* Empile les boîtes verticalement */
            justify-content: center; /* Centre les boîtes verticalement */
            align-items: center; /* Centre les boîtes horizontalement */
            
            box-sizing: border-box; /* Le padding ne s'ajoute pas à la taille totale */
			
}

.link-box {
            background-color: #880808; /* Fond blanc pour les boîtes */
            border: 1px solid #cccccc; /* Bordure grise légère */
            padding: 15px 25px; /* Espace intérieur des boîtes */
            margin-bottom: 15px; /* Espace entre les boîtes */
            border-radius: 5px; /* Coins arrondis */
            text-align: center;
            min-width: 150px; /* Largeur minimale des boîtes */
            box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* Ombre légère */
}

.link-box:last-child {
            margin-bottom: 0; /* Pas de marge en bas pour la dernière boîte */
}

.link-box a {
            text-decoration: none; /* Enlève le soulignement du lien */
            color: #880808; /* Couleur du lien (bleu marine) */
            font-weight: bold;
            font-family: sans-serif;
}

.link-box a:hover {
            color: #ffffff; /* Change la couleur au survol (orange) */
}


body {
  
}


.pentagon-grid {

    width: 100%;
    height: 100%;
	margin-top:85px;
    background-color: #880808; /* Arrière-plan visible dans les espaces */

    /* --- Création de la forme du pentagone --- */
    /* Les pourcentages définissent les sommets du polygone */
    /* Ordre: haut, haut-droit, bas-droit, bas-gauche, haut-gauche */
   
	clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);

    /* --- Configuration de la grille interne --- */
    display: grid;
    /* Définissez le nombre de colonnes et de lignes */
    /* Ex: 5 colonnes de largeur égale, 5 lignes de hauteur égale */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px; /* Espace entre les cases */

    /* Un peu de padding à l'intérieur du pentagone avant les cases */
    padding: 5px;
    box-sizing: border-box; /* Inclut padding dans la taille */
}

.grid-item {
    background-color: #ffffff; /* Couleur des cases */
    border: 1px solid #ffffff;
    border-radius: 4px;
    display: flex; /* Pour centrer le lien dans la case */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Cache le contenu qui dépasse (utile pour les bords coupés) */
    min-height: 40px; /* Hauteur minimale pour la visibilité */
    transition: transform 0.2s ease-out; /* Effet au survol */
}

.grid-item:hover {
    transform: scale(1.05); /* Grossit légèrement au survol */
    z-index: 10; /* Pour passer au-dessus des voisins au survol */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}


/* --- Classes pour définir la taille des cases --- */
.span-col-2 {
    grid-column: span 2; /* La case s'étend sur 2 colonnes */
}
.span-row-2 {
    grid-row: span 2; /* La case s'étend sur 2 lignes */
}
.span-all-2 {
    grid-column: span 2;
    grid-row: span 2;
    background-color: #f5a623; /* Couleur différente pour la case plus grande */
}

/* Style des liens à l'intérieur des cases */
.grid-item a {
    display: block; /* Pour que le lien remplisse la case */
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    text-align: center;
    /* Re-centrer le texte si padding interne au lien */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px; /* Espace autour du texte du lien */
    box-sizing: border-box;
}

.grid-item a:hover {
    text-decoration: underline;
}

/* --- Placement spécifique des items (Optionnel mais recommandé pour contrôle) --- */
/* Ajustez ces lignes pour positionner précisément chaque item si l'auto-placement ne convient pas */

.item-1 { grid-column: 1; grid-row: 1 / span 2;}
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 3 / span 2; grid-row: 1;  background-image: url("lib.jpg");}
.item-4 { grid-column: 2; grid-row: 2; }
.item-5 { grid-column: 3; grid-row: 2; }
.item-6 { grid-column: 4 / span 2; grid-row: 2 / span 2; }
.item-7 { grid-column: 1; grid-row: 3; }
.item-8 { grid-column: 2; grid-row: 3; }
.item-9 { grid-column: 1 / span 2; grid-row: 4; }
.item-10 { grid-column: 3; grid-row: 3; }
.item-11 { grid-column: 4; grid-row: 5; }
.item-12 { grid-column: 3; grid-row: 5; }

... et ainsi de suite pour remplir la grille
*/