/* home.css - VERSION SVG + CALAGE PARFAIT */

/* POLICE LOCALE */
@font-face {
    font-family: 'ArabDances';
    src: url('fonts/ArabDances.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* --- 1. LE BODY --- */
body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: #0d0d2b; 
    
    /* Centrage impératif */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* --- 2. LE CADRE (Le secret du calage) --- */
#home-container {
    position: relative;
    
    /* L'image de fond */
    background-image: url('images/fond-hp.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    /* --- VERROUILLAGE DU RATIO --- */
    /* On force le conteneur HTML à épouser exactement l'image visible */
    /* Ratio 1699 / 1366 = 1.2437 */
    aspect-ratio: 1699 / 1366;
    
    /* Formule magique : */
    /* La hauteur ne dépasse jamais l'écran ET la largeur respecte le ratio */
    height: min(100vh, 100vw / 1.2437);
    /* La largeur ne dépasse jamais l'écran ET la hauteur respecte le ratio */
    width: min(100vw, 100vh * 1.2437);
    
    z-index: 10;
}

/* --- 3. LA GRILLE --- */
.grid-zone {
    position: absolute;
    /* Coordonnées précises par rapport à l'image de fond */
    /* Ajustez "Top" si ça touche le toit jaune */
    top: 29%;    
    bottom: 9%;
    left: 14%;
    right: 14%;
    
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    
    justify-items: center;
    align-items: center; 
}

/* --- 4. LA VIGNETTE (Lien) --- */
.menu-item {
    position: relative;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    opacity: 0; 
    transform: scale(0);
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: calc(var(--delay) * 0.15s);
}

/* --- 5. CONTENEUR ETOILE --- */
.star-container {
    position: relative;
    /* Taille de l'étoile dans la case (85% pour ne pas toucher les voisines) */
    width: 85%;
    aspect-ratio: 1/1; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: transform 0.3s ease;
}

/* --- 6. LA PHOTO (Dessous) --- */
.star-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* On découpe la photo selon la forme exacte du SVG */
    clip-path: polygon(
        50% 0%, 65% 15%, 85% 15%, 85% 35%, 
        100% 50%, 85% 65%, 85% 85%, 65% 85%, 
        50% 100%, 35% 85%, 15% 85%, 15% 65%, 
        0% 50%, 15% 35%, 15% 15%, 35% 15%
    );
}

/* --- 7. LE FILET SVG (Dessus) --- */
.star-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Le clic passe à travers pour aller au lien */
    pointer-events: none; 
    
    /* Ombre portée noire */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    
    transition: filter 0.3s ease;
    
    /* Important si le trait est très épais */
    overflow: visible;
}

/* --- 8. LE TEXTE --- */
.menu-item span {
    position: absolute;
    bottom: -5%; /* Sous l'étoile */
    left: 50%;
    transform: translateX(-50%);
    
    font-family: 'ArabDances', Arial, sans-serif;
    font-weight: normal;
    /* Taille relative à la hauteur du conteneur pour rester proportionnel */
    font-size: 2.5vh; 
    color: white;
    text-shadow: 0 2px 4px black;
    
    opacity: 0;
    transition: all 0.3s;
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}

/* --- SURVOL --- */

.menu-item:hover .star-container {
    transform: scale(1.2) rotate(5deg);
    z-index: 50;
}

/* Changement de couleur du SVG au survol */
.menu-item:hover .star-border {
    /* Transforme le rouge en jaune brillant */
    filter: drop-shadow(0 4px 6px rgba(186,157,85,1)) hue-rotate(60deg) brightness(2);
}

.menu-item:hover span {
    opacity: 1;
    /* Le texte remonte légèrement */
    transform: translateX(-50%) translateY(5px);
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

/* Ajustements Mobile */
@media (max-width: 768px) {
    /* On resserre un peu les marges latérales sur mobile */
    .grid-zone { left: 10%; right: 10%; top: 29%; bottom: 9%; }
    .menu-item span { font-size: 10px; bottom: -10%; }
}