/* file: css/zones.css */
/* --- Recommandation de Performance : Très Important ! --- */
/* L'utilisation de @import en CSS bloque le rendu de la page pendant que la police est téléchargée.
Pour un chargement optimal, supprimez la ligne @import ci-dessous et ajoutez les lignes suivantes
dans la balise de votre fichier index.html :
*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');
/* --- Styles de base des zones --- */
.clickable-zone {
position: absolute;
border: 2px solid rgba(255, 255, 255, 0.01);
border-radius: 20px;
background: transparent;
opacity: 1;
cursor: default;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 2s ease, background-color 2s ease, opacity 2s ease;
/* --- OPTIMISATION --- */
/* Prépare les zones aux changements fréquents (hover, activation).
Ceci place l'élément sur sa propre couche de composition,
réduisant drastiquement le coût de "Recalculate Style". */
will-change: transform, opacity, border-color, filter;
}
/* --- Position des zones --- */
.zone-1 { top: 3vh; left: 3vw; width: 44vw; height: 44vh; }
.zone-2 { top: 3vh; right: 3vw; width: 44vw; height: 44vh; }
.zone-3 { bottom: 3vh; left: 3vw; width: 44vw; height: 44vh; }
.zone-4 { bottom: 3vh; right: 3vw; width: 44vw; height: 44vh; }
.zone-5 { top: 28vh; left: 28vw; width: 44vw; height: 44vh; }
/* --- Styles du point d'interrogation (?) --- */
.clickable-zone::before {
content: '?';
font-family: 'Kalam', cursive;
font-size: 8rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.01);
position: absolute;
z-index: 5;
transform: rotate(-5deg) skewX(-5deg);
animation: handDrawnQuestion 4s ease-in-out infinite;
transition: color 0.3s ease, text-shadow 0.5s ease;
}
/* Variations individuelles du point d'interrogation */
.zone-1::before { transform: rotate(-7deg) skewX(-3deg); animation-delay: 0s; }
.zone-2::before { transform: rotate(3deg) skewX(5deg); animation-delay: 0.5s; }
.zone-3::before { transform: rotate(-4deg) skewX(2deg); animation-delay: 1s; }
.zone-4::before { transform: rotate(6deg) skewX(-4deg); animation-delay: 1.5s; }
.zone-5::before { transform: rotate(-2deg) skewX(3deg); animation-delay: 2s; }
/* --- État d'activation en cours --- */
.clickable-zone.activating {
transition: border-color 0.1s ease;
border-color: rgba(255, 255, 255, 0.1);
animation: loadingProgress 3s ease-in-out forwards;
}
.clickable-zone.activating::before {
color: rgba(255, 255, 255, 0.3);
animation: questionMarkAppear 6s ease-in-out forwards;
filter: url(#distortionFilter);
}
.clickable-zone.permanently-activated {
background-image: var(--bg-image);
border: 2px solid var(--zone-color-soft);
box-shadow: inset 0 0 60px var(--zone-color-deep), 0 0 20px var(--zone-color-soft);
opacity: 0.2;
border-radius: 35px 20px 40px 25px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: auto;
cursor: pointer;
filter: none;
animation: gentleColorGlow 8s ease-in-out infinite;
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-radius 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.4s ease,
box-shadow 0.4s ease;
}
.clickable-zone.permanently-activated::before {
color: rgba(255, 255, 255, 0);
text-shadow: none;
transition: color 0.5s ease, text-shadow 0.5s ease;
}
.clickable-zone.permanently-activated.fade-in {
animation: imageAppearAndFade 4s ease-in-out forwards;
filter: none;
}
/* --- Définition des variables spécifiques à chaque zone --- */
.zone-1.permanently-activated {
--bg-image: url('../assets/img/Tristesse.jpg');
--zone-color-soft: rgba(255, 130, 110, 0.2);
--zone-color-deep: rgba(255, 120, 100, 0.08);
}
.zone-2.permanently-activated {
--bg-image: url('../assets/img/Mariage.jpg');
--zone-color-soft: rgba(190, 130, 255, 0.2);
--zone-color-deep: rgba(180, 120, 255, 0.08);
}
.zone-3.permanently-activated {
--bg-image: url('../assets/img/Colere.jpg');
--zone-color-soft: rgba(130, 255, 190, 0.2);
--zone-color-deep: rgba(120, 255, 180, 0.08);
}
.zone-4.permanently-activated {
--bg-image: url('../assets/img/Peur.jpg');
--zone-color-soft: rgba(130, 210, 255, 0.2);
--zone-color-deep: rgba(120, 200, 255, 0.08);
}
.zone-5.permanently-activated {
--bg-image: url('../assets/img/Espoir.jpg');
--zone-color-soft: rgba(255, 225, 130, 0.2);
--zone-color-deep: rgba(255, 220, 120, 0.08);
}
/* --- Icône de livre (toujours visible sur les zones activées) --- */
.clickable-zone.permanently-activated::after {
content: '📖';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
color: rgba(255, 255, 255, 0.6);
z-index: 9999;
pointer-events: none;
transition: font-size 0.3s ease, color 0.3s ease, text-shadow 0.3s ease, filter 0.3s ease;
}
/* --- Effets de survol (hover) sur les zones activées --- */
.clickable-zone.permanently-activated:hover {
opacity: 1;
filter: none;
border: 4px solid rgba(255, 255, 255, 0.9);
transition: opacity 0.4s ease, border 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.clickable-zone.permanently-activated:hover::after {
font-size: 5rem;
color: rgba(255, 255, 255, 0.9);
text-shadow:
0 0 10px rgba(0, 0, 0, 0.9),
0 0 15px rgba(0, 0, 0, 0.7),
0 0 20px rgba(255, 255, 255, 0.4),
0 0 30px rgba(255, 255, 255, 0.3);
filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
}
/* --- États additionnels (Zoom, Distorsion) --- */
.clickable-zone.zooming {
animation: zoneZoomEffect 0.5s ease-out forwards;
z-index: 10;
}
.clickable-zone.distortion-active {
filter: url(#distortionFilter);
transition: filter 0.5s ease;
}
.clickable-zone.permanently-activated.distortion-active {
filter: url(#distortionFilter) brightness(1.1);
}
/* --- Styles pour mobile --- */
@media (max-width: 768px) {
.clickable-zone.permanently-activated::after {
font-size: 5rem;
}
.clickable-zone.permanently-activated:hover::after {
font-size: 5.5rem;
}
}
/* --- Classe utilitaire pour l'accessibilité --- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}