img {
    -webkit-tap-highlight-color: transparent; /* Pour les navigateurs WebKit (Safari, Chrome) */
    user-select: none; /* Empêche la sélection */
    outline: none; /* Supprime le contour de focus */
}

/* Forcer l'affichage du titre */
#Titre1 {
    right: 28.90% !important;
    top: 7.00% !important;
    width: 55.30% !important;
    height: 16.10% !important;
    z-index: 1001 !important;
    opacity: 1.00 !important;
    display: block !important;
    pointer-events: none !important;
}

/* Assurer que les boutons de menu restent visibles */
.menu-button {
    z-index: 1002 !important;
}

/* Corriger le canvas du jeu - permettre au JS de l'afficher */
#gameCanvas {
    background: #001122 !important;
    z-index: 1000 !important; /* Au-dessus de la mosaïque */
    /* Pas de display: none !important pour que le JS puisse contrôler l'affichage */
}

/* S'assurer que l'overlay de pause est caché sur la page menu */
#pauseOverlay {
    display: none !important;
}

/* Titre principal */
#Titre1 h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

/* Corriger le conflit d'opacité - permettre le gradient de fonctionner */
.game-container::after {
    opacity: 0.1 !important; /* Seulement pour ::after */
}

/* Laisser .background-layer-opaque normal pour ne pas affecter les autres pages */
/* La règle originale sans modification pour préserver cover.jpg sur accueil.html */

/* FIN DES CORRECTIONS D'URGENCE */

/* Reset pour assurer une base propre */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styles du corps de la page */
body {
    background: #000;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}
h2 {
    color: pink; /* Choisissez la nuance de rose que vous préférez ! */
}
/* Conteneur principal du jeu (le cadre 16:9) */
.game-container {
    position: relative;
    width: min(100vw, calc(100vh * (16 / 9)));
    height: min(100vh, calc(100vw * (9 / 16)));
    container-type: inline-size;
    overflow: hidden;
}

/* Fond noir avec opacité progressive (gradient linéaire rectangulaire) */
.game-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* OPTION 2: Dégradé linéaire rectangulaire (ACTIF) */
    background: 
        linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);*/
    
    /* OPTION 1: Dégradé radial carré (désactivé)
    background: radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 100%);
    */

    pointer-events: none;
    z-index: 1;
}

/* Overlay sombre sur le game-container */
.game-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* Couche de superposition opaque (transparence.png) */
.background-layer-opaque {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/transparence.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
}

/* Overlay général du motif (motif.png) - DÉFINITION UNIQUE ET CORRECTE */
.motif-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('images/motif.png') !important;
    background-repeat: repeat !important;
    background-size: 10% !important;
    opacity: 0.5 !important;
    z-index: 1 !important; /* Au-dessus des autres éléments */
    pointer-events: none !important;
    display: block !important;
}

/* Styles généraux des boutons de menu */
.menu-button {
    position: absolute;
    background: linear-gradient(to right, #D4940A, #F4AE08, #FFD700);
    border: none;
    border-radius: 8px;
    color: #C73A5E; /* Couleur de texte par défaut */
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.1s ease;
    z-index: 10;

    border-top: 2px solid #FFD700;
    border-left: 2px solid #FFD700;
    border-right: 2px solid #B8860B;
    border-bottom: 2px solid #B8860B;
    font-family: 'Montserrat', sans-serif;
}

.menu-button:hover {
    background: linear-gradient(to right, #E5A520, #FFD700, #FFFF99);
    border-top: 2px solid #FFFF99;
    border-left: 2px solid #FFFF99;
    border-right: 2px solid #DAA520;
    border-bottom: 2px solid #DAA520;
    transform: scale(1.02);
}

.menu-button:active {
    border-top: 2px solid #B8860B;
    border-left: 2px solid #B8860B;
    border-right: 2px solid #FFD700;
    border-bottom: 2px solid #FFD700;
    transform: scale(0.98);
}

.button-text {
    line-height: 1.2;
    text-align: center;
}

/* STYLE CSS POUR LE BOUTON ACTIF AVEC PULSATION PLUS RAPIDE ET PETITES CAPITALES */
.menu-button.active {
    background: linear-gradient(to right, #FFD700, #F4AE08, #D4940A);
    color: #C73A5E;
    border-top: 2px solid #B8860B;
    border-left: 2px solid #B8860B;
    border-right: 2px solid #FFD700;
    border-bottom: 2px solid #FFD700;
    box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.7);
    pointer-events: none;
    cursor: default;

    font-variant: small-caps;
    animation: pulse 0.8s infinite alternate ease-in-out;
}

/* DÉFINITION DE L'ANIMATION DE PULSATION (vitesse ajustée) */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.03);
    }
}

/* Styles de base pour les wrappers d'images et de texte */
/* ATTENTION : Le display: block; ICI est pour les wrappers génériques.
   Pour #contener, on le surcharge plus bas. */
.custom-image-wrapper, .text-block-wrapper, .shape-wrapper {
    position: absolute;
    box-sizing: border-box;
    /* display: block; */ /* J'ai commenté cette ligne car elle pourrait causer des problèmes avec Flexbox/Grid */
}
.custom-image-wrapper img {
    -webkit-tap-highlight-color: transparent;
    width: 100%; height: 100%; object-fit: contain; display: block; opacity: 1;
}

/* Styles interactifs pour les wrappers */
.custom-image-wrapper.interactive-link,
.custom-image-wrapper[data-interactive="true"],
.text-block-wrapper.interactive-link,
.text-block-wrapper[data-interactive="true"] {
    cursor: pointer;
}

/* Positionnement et dimensionnement du LIEN de l'image de sortie */
#link-sortir {
    position: absolute;
    right: 0.70%; top: 80.40%; width: 19.30%; height: 18.10%;
    z-index: 100;
    cursor: pointer;
    display: block;
}

/* Applique la pulsation à l'image quand le LIEN est survolé */
#link-sortir:hover {
    animation: pulse-image 0.4s infinite alternate ease-in-out;
}

/* DÉFINITION DE L'ANIMATION DE PULSATION POUR L'IMAGE DE SORTIE */
@keyframes pulse-image {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* L'image elle-même à l'intérieur du lien */
#customImage-img-1749678070399-7va8iyn {
    position: relative;
    width: 100%; height: 100%;
    pointer-events: none;
}

#customImage-img-1749678070399-7va8iyn img {
    -webkit-tap-highlight-color: transparent;
    width: 100%; height: 100%; object-fit: contain; opacity: 1.00;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Styles pour l'infobulle personnalisée */
.tooltip-text {
    visibility: hidden;
    width: max-content;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    white-space: nowrap;
    font-size: clamp(10px, 0.8vw, 16px);
    font-weight: 600;
    pointer-events: none;
}

/* Flèche de l'infobulle (petit triangle en bas) */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Afficher l'infobulle au survol du LIEN PARENT */
#link-sortir:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Styles pour les images de cadre (s1.png et s2.png) */
#image-s1 {
    left: 15.00%;
    top: 19.30%;
    height: 26.10%;
    width: 15.00%;
    z-index: 19;
    pointer-events: none;
    animation: pulse-frame 0.8s infinite alternate ease-in-out;
}

#image-s3 {
    right: 25.00%;
    top: 19.30%;
    height: 26.10%;
    width: 10.00%;
    z-index: 19;
    pointer-events: none;
    animation: pulse-frame 0.8s infinite alternate ease-in-out;
}

/* Animation de pulsation plus intense pour les cadres */
@keyframes pulse-frame {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

#customImage-img-1749733637101-fxl42dm {
    right: 5.00%; top: 52.60%; width: 64.60%; height: 33.40%;
    z-index: 4;
    pointer-events: none; display: block;
}
#customImage-img-1749733637101-fxl42dm img {
    -webkit-tap-highlight-color: transparent;
    width: 100%; height: 100%; object-fit: contain; opacity: 1.00;
    z-index: 5;
}

/* Styles spécifiques pour les blocs de texte */
#Titre0,
#Titre1,
#Titre2,
#Titre3,
#Titre4,
#Titre5 {
    right: 28.90%;
    top: 7.00%;
    width: 55.30%;
    height: 16.10%;
    z-index: 14;
    opacity: 1.00;
    display: block;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
}

/* Styles pour les balises h1 à l'intérieur de ces conteneurs */
#Titre0 h1,
#Titre1 h1,
#Titre2 h1,
#Titre3 h1,
#Titre4 h1,
#Titre5 h1 {
    font-family: 'Montserrat';
    font-size: clamp(28px, 4.0vw, 70px);
    color: #ffd452;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    text-shadow:
        -2px -2px 0 #d14d77,
        2px -2px 0 #d14d77,
        -2px 2px 0 #d14d77,
        2px 2px 0 #d14d77,
        0 0 8px rgba(0, 0, 0, 0.8); /* Ombre plus prononcée */
    margin: 0;
    padding: 0;
    line-height: 1.2;
    word-wrap: break-word;
    white-space: pre-wrap;
}
/* Styles pour l'état normal */
#Titre0 h1 a,
#Titre1 h1 a,
#Titre2 h1 a,
#Titre3 h1 a {
    color: #87CEEB;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

/* Styles pour l'état :hover (quand la souris survole l'élément) */
#Titre0 h1 a:hover,
#Titre1 h1 a:hover,
#Titre2 h1 a:hover,
#Titre3 h1 a:hover,
#Titre4 h1 a:hover,
#Titre5 h1 a:hover {
    color: #ADD8E6;
    text-shadow: 0 0 5px #87CEEB;
}

/* Styles pour l'état :active (quand l'élément est cliqué/activé) */
#Titre0 h1 a:active,
#Titre1 h1 a:active,
#Titre2 h1 a:active,
#Titre3 h1 a:hover,
#Titre4 h1 a:hover,
#Titre5 h1 a:active {
    color: #4682B4;
}
#textBlock-txt-1749679420253-d67r5kj {
    right: 24.40%;
    top: 22.71%;
    width: 57.00%;
    height: 19.28%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
#textBlock-txt-1749679420253-d67r5kj p {
    font-family: 'Montserrat';
    font-size: clamp(14px, 1.2vw, 22px);
    color: #ffffff;
    font-weight: normal; font-style: normal; text-decoration: none;
    text-align: center;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        3px 3px 6px #ff6600;
    margin: 0; padding: 0;
    line-height: 1.5;
    word-wrap: break-word; white-space: pre-wrap;
}
#textBlock-txt-1749679420253-d67r5kj p a {
    color: #87CEEB; text-decoration: underline; cursor: pointer; transition: color 0.2s ease;
}
#textBlock-txt-1749679420253-d67r5kj p a:hover {
    color: #ADD8E6; text-shadow: 0 0 5px #87CEEB;
}
#textBlock-txt-1749679420253-d67r5kj p a:active {
    color: #4682B4;
}

#textBlock-txt-1749679865839-e9wrqll {
    left: 28.60%;
    width: 35.00%;
    top: calc(22.71% + 19.28% + 0.5%);
    height: 12.90%;
    right: auto;
    margin: 0;

    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
#textBlock-txt-1749679865839-e9wrqll p {
    font-family: 'Montserrat';
    font-size: clamp(18px, 1.8vw, 30px);
    color: #fe859b; font-weight: bold; font-style: normal; text-decoration: none;
    text-align: center;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        3px 3px 6px #ff6600;
    margin: 0; padding: 0;
    line-height: 1.5;
    word-wrap: break-word; white-space: pre-wrap;
}
#textBlock-txt-1749679865839-e9wrqll p a {
    color: #87CEEB; text-decoration: underline; cursor: pointer; transition: color 0.2s ease;
}
#textBlock-txt-1749679865839-e9wrqll p a:hover {
    color: #ADD8E6; text-shadow: 0 0 5px #87CEEB;
}
#textBlock-txt-1749679865839-e9wrqll p a:active {
    color: #4682B4;
}

#textBlock-txt-1749681008818-y9cks42 {
    right: 57.40%; top: 55.50%; width: 30.80%; height: 29.80%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
#textBlock-txt-1749681008818-y9cks42 p {
    font-family: 'Montserrat';
    font-size: clamp(12px, 0.9vw, 18px);
    color: #ffffff; font-weight: normal; font-style: normal; text-align: justify;
    text-shadow: none;
    margin: 0; padding: 0;
    line-height: 1.5;
    word-wrap: break-word; white-space: pre-wrap;
}
#textBlock-txt-1749681008818-y9cks42 p a {
    color: #87CEEB; text-decoration: underline; cursor: pointer; transition: color 0.2s ease;
}
#textBlock-txt-1749681008818-y9cks42 p a:hover {
    color: #ADD8E6; text-shadow: 0 0 5px #87CEEB;
}
#textBlock-txt-1749681008818-y9cks42 p a:active {
    color: #4682B4;
}

#textBlock-txt-1749735057758-sl99em0 {
    right: 45.30%; top: 67.50%; width: 40.40%; height: 19.90%;
    z-index: 32; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
#textBlock-txt-1749735057758-sl99em0 p {
    font-family: 'Montserrat';
    font-size: clamp(12px, 0.9vw, 18px);
    color: #ffffff;
    font-weight: normal; font-style: normal; text-decoration: none; text-align: left;
    text-shadow:
        -1px -1px 0 #000000,
        1px -1px 0 #000000,
        -1px 1px 0 #000000,
        1px 1px 0 #000000,
        3px 3px 6px #ff6600;
    margin: 0; padding: 0;
    line-height: 1.5;
    word-wrap: break-word; white-space: pre-wrap;
}
#textBlock-txt-1749735057758-sl99em0 p a:hover {
    color: #ADD8E6; text-shadow: 0 0 5px #87CEEB;
}
#textBlock-txt-1749735057758-sl99em0 p a:active {
    color: #4682B4;
}

/* --- AUTRES CONTENEURS (PAS DE CHANGEMENT ICI, ILS SONT SÉPARÉS) --- */
#contener2 {
    color: white;
    font-size: clamp(14px, 1.1vw, 20px);
    text-align: justify;
    right: 25%; top: 20%; width: 30%; height: 68%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}

#contener3 {
    color: white;
    font-size: clamp(14px, 1.1vw, 20px);
    text-align: justify;
    right: 25%; top: 20%; width: 60%; height: 68%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
#contener4 {
    color: white;
    font-size: clamp(14px, 1.1vw, 20px);
    text-align: justify;
     right: 25%; top: 20%; width: 30%; height: 68%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
overflow: hidden; transition: opacity 0.2s ease-in-out;}

#contener5 {
    color: white;
    font-size: clamp(14px, 1.1vw, 20px);
    text-align: justify;
     right: 65%; top: 20%; width: 20%; height: 68%;
    z-index: 20; opacity: 1.00; display: block; pointer-events: none;
    overflow: hidden; transition: opacity 0.2s ease-in-out;
}
/* Forme (ligne) */
#shape-shape-1749681498209-t9g7b95 {
    position: absolute;
    right: 46.40%;
    top: calc(22.71% + 14.28% + 0.5% + 12.90% + 0.2%);
    width: 15.00%; height: 0.60%;
    z-index: 5; opacity: 0.70; display: block;
    border: 0px solid #ffffff;
    background-color: #fef1ec; border-radius: 50%;
}

/* Boutons spécifiques */
#btn1 {
    right: 3.00%; top: 9.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#btn2 {
    right: 3.00%; top: 19.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#btn3 {
    right: 3.00%; top: 29.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#btn-1749677668999-7w92gde {
    right: 3.00%; top: 39.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#btn-1749677959969-87jolms {
    right: 3.00%; top: 49.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#btn-1749735375917-age566t {
    right: 3.00%; top: 59.90%; width: 14.70%; height: 8.00%;
    font-size: clamp(14px, 1.5vw, 24px);
}
#medecin {
    position: absolute;
    left: 2.00%;
    top: 70.30%;
    height: 26.10%;
    z-index: 190;
    pointer-events: none;
    animation: pulse-frame 0.8s infinite alternate ease-in-out;
    transform: scaleX(-1);
}
#prof {
    position: absolute;
    left: 0.50%;
    top: 70%;
    width: 20.00%;
    z-index: 190;
    pointer-events: none;
    animation: pulse-frame 2s infinite alternate ease-in-out;
    transform: scaleX(-1);
}
#prof2 {
    position: absolute;
    left: -0.50%;
    top: 55%;
    width: 15.00%;
    z-index: 190;
    pointer-events: none;
    animation: pulse-frame 2s infinite alternate ease-in-out;
    transform: scaleX(-1);
}
#podium {
    position: absolute;
    left: 10.00%;
    top: 43%;
    width: 29.00%;
    z-index: 190;
    pointer-events: none;
    animation: pulse-frame 2s infinite alternate ease-in-out;
    transform: scaleX(-1);
}

#medaille {
    position: absolute;
    left: 13.00%;
    top: 50%;
    width: 22.00%;
    z-index: 190;
    pointer-events: none;

    filter: contrast(1.5) brightness(1.1);
}
#coupe {
    position: absolute;
    left: 13.00%;
    top: 50%;
    width: 22.00%;
    z-index: 190;
    pointer-events: none;
    animation: pulse-frame 2s infinite alternate ease-in-out;
    filter: contrast(1.5) brightness(1.1);
}


.video-container {
    width: 100%; /* S'adapte à la largeur de l'écran */
    min-height: 200px; /* Hauteur minimale pour éviter un conteneur trop petit */
    text-align: center; /* Centre les éléments enfants */
}

.centered-video {
    width: 600px; /* Largeur fixe */
    height: auto; /* Préserve le ratio d'aspect */
    margin: 0 auto; /* Centre horizontalement dans le flux */
    display: block; /* Assure que la vidéo est un élément de bloc */
}

/* Position relative pour le bouton (pour ::after) */
.fullscreen-btn {
    position: relative; /* Déplacé ici au lieu d'être dans ::after */
}



/* État désactivé du bouton plein écran */
.fullscreen-btn:disabled,
.fullscreen-btn.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #666 !important;
    color: #999 !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Masquer l'infobulle normale pendant le chargement */
.fullscreenBtn.loading .tooltip-text {
    display: none !important;
}bulle quand le bouton est désactivé */
.fullscreen-btn:disabled .tooltip-text,
.fullscreen-btn.disabled .tooltip-text {
    display: none !important;
}

/* Empêcher les effets hover sur bouton désactivé */
.fullscreen-btn:disabled:hover,
.fullscreen-btn.disabled:hover {
    background: #666 !important;
    transform: none !important;
}

.fullscreenBtn {
    position: relative; /* Pour le ::after */
}



/* Masquer l'info