:root {
    --bg-color: #cccccc;
    --text-color: #313131;
    --box-color: #313131;
    /* Gris foncé pour les blocs */
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');


body,
html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    user-select: none;
}

/* chargment */

#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color); /* Utilise le même gris clair que ton fond */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Par-dessus tout le reste */
    transition: opacity 0.5s ease; /* Pour la disparition en fondu */
}

.loader-text {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-color);
    /* Petite animation de clignotement doux */
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* fresque */

#viewport {
    width: 100%;
    height: 100%;
    position: relative;;
    touch-action: none; 
}

#fresco {
    position: absolute;
    width: 5000px;
    height: 5000px;
    left: calc(50vw - 2500px);
    top: calc(50vh - 2500px);
    transform: scale(0.2);
    transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
}

/* --- TEXTE CENTRAL --- */
#intro-text {
    position: absolute;
    top: 2500px;
    left: 2500px;
    transform: translate(-50%, -50%);
    text-align: left;
    z-index: 50;
}

#intro-text h1 {
    font-size: 3.5rem;
    margin: 5px 0 15px 0;
    letter-spacing: 2px;
    font-weight: 700;
}

#intro-text p {
    margin: 2px 0;
    font-size: 0.9rem;
    font-weight: 600;
}

#intro-text .small-text {
    font-size: 0.8rem;
    font-weight: 500;
}

/* --- STYLE DES ÎLOTS --- */
.island {
    position: absolute;
}

/* 1. Base commune pour TOUS les éléments (photos et blocs) */
.fresco-item {
    position: absolute;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fresco-item:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* 2. Spécifique aux PHOTOS */
.photo-box {
    background-color: #e0e0e0;
    /* Gris très clair en attendant que l'image charge */
    background-size: cover;
    background-position: center;
}

/* 3. Spécifique aux BLOCS GRIS */
.grey-box {
    background-color: var(--box-color);
    color: white;
    /* Couleur du texte si tu en ajoutes */
    display: flex;
    /* Permet de centrer le texte facilement */
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    font-size: 0.85rem;
}

/* --- BOUTON FLEUR RETOUR ACCUEIL --- */
#back-home-flower {
    position: fixed;
    bottom: -40px; /* Distance du bas */
    left: -40px;   /* Distance de la gauche */
    z-index: 1000; /* Toujours au-dessus de la fresque */
    display: block;
    width: 200px; /* Taille globale de la fleur (à ajuster) */
    transition: transform 0.3s ease; /* Pour l'animation au survol */
}

/* Petit effet quand on passe la souris dessus */
#back-home-flower:hover {
    transform: scale(1.1); 
}

/* Le conteneur interne */
#flower-container {
    position: relative; /* Référence pour positionner les yeux */
    width: 100%;
    height: auto;
}

#flower-base {
    width: 100%;
    display: block;
    rotate: -145deg; /* Inclinaison de la fleur */

}

/* L'image des yeux */
#flower-eyes {
    position: absolute;
    width: 40px; /* Taille des yeux (à ajuster selon ton SVG) */
    
    /* Centre les yeux par défaut. Ajuste le 'top' pour qu'ils tombent pile au bon endroit */
    top: 100px; 
    left: 40%;
    
    transform: translate(-50%, -50%); /* Règle d'or pour centrer */
    transition: transform 0.1s ease-out; /* Fluidité du mouvement */
    pointer-events: none; /* IMPORTANT : Laisse passer le clic vers le lien <a> en dessous */
}

@media screen and (max-width: 768px) {
    
    #back-home-flower {
        /* On annule le positionnement en bas */
        bottom: auto; 
        
        /* On le place en haut */
        top: -30px; /* Petite marge par rapport au haut de l'écran */
        left: -30px; /* Petite marge par rapport à la gauche */
        
        /* Optionnel : On réduit un peu sa taille sur mobile 
           pour ne pas qu'il cache trop les photos */
        width: 150px; 
    }
    #flower-base {
    rotate: -45deg; /* Inclinaison de la fleur */

}
    /* Optionnel : On ajuste la taille des yeux en conséquence */
    #flower-eyes {
        width: 35px; /* Ajuste selon ton SVG pour que ça reste proportionné */
        /* Il faudra peut-être ajuster le 'top' ici aussi 
           si tu as changé la taille globale */
        top: 54px;
        left: 65px;

    }
}