/* Importation de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Roboto:wght@400;700&display=swap');

/********************************************/
        /** CSS POUR LE BLOCAGE D'ORIENTATION **/
        /********************************************/
        #orientation-blocker {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            color: white;
            display: none; /* Caché par défaut, géré par JS */
            flex-direction: column; /* Pour placer l'icône au-dessus du texte */
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 9999; /* Au-dessus de tout le reste */
            font-family: 'Orbitron', sans-serif;
        }

        #orientation-blocker::before {
            content: '🔄'; /* Emoji de rotation */
            font-size: 4rem;
            display: block;
            margin-bottom: 25px;
            animation: spin 3s linear infinite; /* Animation de rotation */
        }

        .animated-text {
            font-size: 1.5rem;
            font-weight: bold;
            white-space: nowrap; /* Empêche le retour à la ligne pendant l'animation */
            overflow: hidden; /* Cache le texte qui n'est pas encore "écrit" */
            border-right: .15em solid orange; /* Le curseur qui clignote */
            animation: 
                typing 3.5s steps(40, end) infinite alternate, /* L'animation se répète en avant et en arrière */
                blink-caret .75s step-end infinite;
        }

        /* Keyframes pour l'animation de l'icône qui tourne */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Keyframes pour l'animation "machine à écrire" */
        @keyframes typing {
          from { width: 0 }
          to { width: 100% }
        }

        /* Keyframes pour l'animation du curseur qui clignote */
        @keyframes blink-caret {
          from, to { border-color: transparent }
          50% { border-color: orange; }
        }


.index-body {
    margin: 0;
    color: white;
    background-image: url('../asset/indeximage.png');
    /* MODIFICATION ICI : Étire l'image pour remplir le conteneur */
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;
    font-family: 'Orbitron', sans-serif;
    overflow: hidden;
}
.pannel{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    gap: 2rem;

}  

.panel {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 320px;
}
.left-panel {
    max-width: 611px;
    aspect-ratio: 611 / 690;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 611 690'%3e%3cdefs%3e%3clinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3e%3cstop stop-color='rgba(217,217,217,.4)'/%3e%3cstop offset='1' stop-color='rgba(217,217,217,.1)'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23g)' d='M611 167v523H189L0 523V0h421l190 167z'/%3e%3c/svg%3e");
}
.right-panel {
    height: 700px;
    aspect-ratio: 1084 / 844;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1084" height="844" viewBox="0 0 1084 844" fill="none"%3E%3Cdefs%3E%3ClinearGradient id="grad2" x1="0%25" y1="0%25" x2="100%25" y2="100%25"%3E%3Cstop offset="0%25" style="stop-color:rgba(217,217,217,0.3);" /%3E%3Cstop offset="100%25" style="stop-color:rgba(217,217,217,0.05);" /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d="M821.561 844L-3.68924e-05 844L-1.14379e-05 261.668L0.262684 261.931L262.442 -3.59114e-05L1084 0L1084 581.809L821.561 844Z" fill="url(%23grad2)" /%3E%3C/svg%3E');
}

.content {
    max-width: 65%;
    padding: 2rem;
}
.logo-image {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.6));
}
.redirect {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 269px;
    height: 49px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    background-color: transparent;
    border: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="269" height="49" viewBox="0 0 269 49" fill="none"><path d="M256.717 0L269 32.4834V49H12.2832L0 16.5166V0H256.717Z" fill="%233C4054"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.redirect:hover {
    transform: scale(1.05) translateY(-2px);
    cursor: pointer;
}

/* Styles généraux pour un affichage plein écran et fluide */
html {
    scroll-behavior: smooth; /* Permet un défilement fluide lorsque l'on clique sur le lien */
}

body {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    overflow-x: hidden; /* Empêche le défilement horizontal manuel */
}

/* Style de base pour chaque section */
.section {
    width: 100vw; /* Chaque section prend toute la largeur de l'écran */
    height: 100vh; /* Chaque section prend toute la hauteur de l'écran */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Nécessaire pour positionner les boutons à l'intérieur */
    transition: background-image 0.5s ease-in-out; /* Effet de transition pour le fond */
    /* MODIFICATION ICI : Étire l'image pour remplir le conteneur */
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

/* Style pour la deuxième section */
#section2 {
    background-image: url('../asset/Salle_2_sans_simon.jpg');
}

/* Style du bouton pour changer l'arrière-plan */
#background-changer {
    position: absolute;
    cursor: pointer;
    display: flex;
}

/* Style du bouton pour passer à la section suivante */
#next-section-btn {
    position: absolute; /* Positionnement par rapport à la section */
    right: 30px;
    top: 50%;
    transform: translateY(-50%); /* Centrage vertical parfait */
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease; /* Animation douce pour les changements */
}

/* Classe pour désactiver le bouton */
#next-section-btn.disabled {
    pointer-events: none; /* Bloque tous les clics et événements de la souris */
    opacity: 0.5; /* Rend le bouton semi-transparent pour montrer qu'il est inactif */
}

/* --- Styles Section 1 --- */
#section1 {
    background-image: url('../asset/Salle_1_no_batterie.jpg');
}
#background-changer {
    position: absolute;
    bottom: 100px;
    right: 300px;
    background: rgba(0, 0, 0, 0);
    text-decoration: none;
    border: none;
    cursor: pointer;
}
#background-changer:hover {
    background: rgba(0, 0, 0, 0);
}

.batterieimg {
    width: 100px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto; /* Garde les proportions de l'image */
    transition: transform 0.3s ease;
}

/* --- SECTION 2 : MÉTHODE AVEC POSITIONNEMENT ABSOLU --- */

/* 1. Le parent (la section) sert de référence pour le positionnement */
#section2 {
    position: relative; /* Indispensable pour que le positionnement absolu fonctionne */
}

/* 2. Le bouton d'alimentation et son état initial */
#power-switch-btn {
    position: absolute;   /* Permet de le positionner n'importe où dans la section */
    bottom: 20px;            /* On le place verticalement au milieu */
    right: 350px;         /* Position de départ : à 100px du bord droit */
    transition: all 0.7s ease-in-out; /* Ajoute une animation de déplacement fluide */
    z-index: 1;
    background: none;
    border: none;
    cursor: pointer;
}

/* 3. La position du bouton une fois qu'il a la classe ".activated" */
#power-switch-btn.activated {
    right: auto; /* On annule la position de droite */
    left: 300px; /* On applique la nouvelle position de gauche */
    bottom: -200px;
    top: auto;
}

/* NOUVEAU : Style ajouté pour le bouton désactivé */
/* Style pour le bouton désactivé et retourné horizontalement */
#power-switch-btn:disabled {
    cursor: default;
    transform: rotate(10deg) translateY(-60%) translatex(-40%) scaleX(-1);
}

/* 4. La taille de l'image dans le bouton */
#power-switch-btn img {
    max-height: 250px;
    width: auto;
    
}


/* 5. Le jeu Simon, non cliquable par défaut */
#simon-game {
    pointer-events: none; /* Bloque les clics */
    opacity: 0.6;         /* Indice visuel */
    transition: opacity 0.4s ease;
}

/* 6. Le jeu Simon quand il devient actif */
#simon-game.active {
    pointer-events: auto; /* Autorise les clics */
    opacity: 1;
}

/* 7. Le texte dans le cercle du Simon */
#simon-start-text {
    font-family: 'Orbitron', sans-serif;
    font-size: 35px;
    fill: #ffffff;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* --- Styles communs aux boutons de navigation --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 80px; 
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; 
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0; 
}
.nav-btn img {
    /* L'image occupera 60% de l'espace du bouton */
    width: 60%; 
    height: auto; /* Garde les bonnes proportions */
}

.nav-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* NOUVELLE version - Effet de lueur */
.simon-pad.lit {
    filter: drop-shadow(0 0 20px white) brightness(1.2);
}

#Calque_1{
    width: 800px;
    height: auto;
}

.simon-container {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cls-1 {
        fill: #17282d;
      }

      .cls-2 {
        fill: #17282d;
      }

      .cls-3 {
        fill: #ffdc0a;
      }

      .cls-4 {
        fill: #39d95c;
      }

 

      .cls-6 {
        fill: #041414;
      }

      .cls-7 {
        fill: #606060;
      }

      .cls-8 {
        fill: #97ff56;
      }

      .cls-9 {
        fill: #f8d639;
      }

      .cls-10 {
        fill: #d10052;
      }

      .cls-5 {
        fill: #fe3e24;
      }

      .cls-11 {
        fill: #0a3056;
      }

      .cls-12 {
        fill: #0b3335;
      }

      .cls-13 {
        fill: #00b1e2;
      }

/* --- Styles Section 3 --- */
.sections-container {
    display: flex;
    width: 400vw;
    height: 100vh;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}


/* --- Styles Section 3 --- */
#section3 {
    background-image: url('../asset/salle_4_sans_pc_et_vent.jpg');
}

#image-changer-btn {
    position: absolute;
    top: 60px;
    left: 300px;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#image-changer-btn:hover {
    transform: scale(1.1);
}

.image-changer-btnimg {
    width: 200px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto; /* Garde les proportions de l'image */
    transition: transform 0.3s ease;
}

#login-prompt-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.3s;
}

#login-prompt-btn:hover {
    transform: scale(1.05);
}

#login-prompt-btn:disabled {
    cursor: not-allowed;
    filter: grayscale(100%) opacity(0.5);
}

.login-prompt-btn-img{
    width: 280px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto; /* Garde les proportions de l'image */

}


/* --- Styles du Pop-up de connexion --- */
.hidden {
    display: none !important; /* Pour s'assurer qu'il est bien caché */
}

#login-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Pour qu'il soit au-dessus de tout */
}

.popup-content {
    background-color: #1a252f;
    padding: 30px;
    border-radius: 15px;
    border: 2px solid #00b1e2;
    text-align: center;
    color: white;
    font-family: 'Orbitron', sans-serif;
    min-width: 350px;
    box-shadow: 0 0 20px rgba(0, 177, 226, 0.5);
}

.profile-pic {
    padding: 10px;
    width: 80px;
    height: 100px;
    border-radius: 10px;
    border: 3px solid #00b1e2;
    margin-bottom: 15px;
}

.password-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

#password-input {
    background-color: #0b1a24;
    border: 1px solid #00b1e2;
    color: white;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    width: 70%;
    border-radius: 5px 0 0 5px;
}

#submit-password-btn {
    background-color: #00b1e2;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

.submit-password-btn-img {
    width: 20px; /* Ajustez la taille de l'image selon vos besoins */
    height: auto; /* Garde les proportions de l'image */
}

#feedback-message {
    margin-top: 15px;
    height: 20px;
    font-size: 0.9rem;
}

/* Classes pour les messages de retour */
.feedback-success {
    color: #39d95c;
}
.feedback-error {
    color: #fe3e24;
}

/* --- Styles Section 4 --- */
#section4 {
    background-image: url('../asset/Salle4.png');
    flex-direction: column; /* Pour centrer le bouton et le texte */
}

#launch-btn {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-family: 'Orbitron', sans-serif;
    color: white;
    background-color: #00B9CA;
    border: 3px solid #0E3E77;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

#launch-btn:hover {
    background-color: #0E3E77;
    transform: scale(1.05);
}

#launch-btn img {
    width: 60%;
    height: auto;
}


/* --- Positionnement des nouveaux boutons de navigation --- */
#prev-section-3-btn {
    left: 220px;
}

#next-section-3-btn {
    right: 220px;
}

#prev-section-4-btn {
    left: 30px;
}

/* --- Styles communs aux boutons de navigation --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nav-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}
#next-section-btn, #next-section-2-btn {
    right: 220px;
}
#prev-section-btn {
    left: 220px;
}


/* --- Bouton d'ouverture du carousel --- */
#open-carousel-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    background: rgb(0, 0, 0);
    border: 2px solid white;
    border-radius: 50%;
    width: 125px;
    height: 125px;
    cursor: pointer;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#open-carousel-btn img {
    width: 80px;
    height: 80px;
}

/* --- Styles du Pop-up et du Carousel --- */
#carousel-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.carousel-container {
    position: relative;
    width: 80%;
    max-width: 900px;
    background: #1a252f;
    border: 2px solid #00b1e2;
    border-radius: 10px;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
}

/* --- Boutons de navigation et de fermeture --- */
#close-carousel-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #fe3e24;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    cursor: pointer;
    z-index: 10;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid white;
    padding: 10px 15px;
    font-size: 1.5rem;
    cursor: pointer;
}

.carousel-nav.prev {
    left: 10px;
}

.carousel-nav.next {
    right: 10px;
}

/* BLOCK */
.chat-widget {
    position: fixed;
    top: 20px;            
    right: 20px;          
    z-index: 1000;        
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 20px;
}
/* ELEMENT */
.chat-widget__controls {
    display: flex;
    gap: 15px;
}

.boutontext {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s;
}

.boutontext:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.chat-widget__main-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.chat-widget__bubble-container {
    width: 411px;
    height: 133px;
    opacity: 0; 
}

.chat-widget__video {
    width: 100%;
    height: 125px;
    border-radius: 15px;
    object-fit: cover; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 2px solid #ffffff;
}

.bubble-text {
    width: 100%;
    height: 100%;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


/* Écrans larges */
@media (max-width: 1920px) {
  .pannel{
    gap: 30px;
}
.index-h1 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 5px;
    
}
.index-p {
    font-size: 18px;
    text-align: center;
    
}

.redirect-p {
    font-size: 15px;
    text-align: center;
}
.redirect {
    width: 300px;
    height: 60px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="269" height="49" viewBox="0 0 269 49" fill="none"><path d="M256.717 0L269 32.4834V49H12.2832L0 16.5166V0H256.717Z" fill="%233C4054"/></svg>');
}

.left-panel {
    max-height: 500px;
  }

.right-panel {
    max-height: 500px;
  }

}

/* Laptops standards */
@media (max-width: 1366px) {
    .pannel{
    gap: 20px;
}
.index-h1 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
    
}
.index-p {
    font-size: 15px;
    text-align: center;
    
}

.redirect-p {
    font-size: 10px;
    text-align: center;
}
.redirect {
    width: 160px;
    height: 30px;

}

.left-panel {
    max-height: 380px;
  }

.right-panel {
    max-height: 380px;
  }

.chat-widget {
    transform: scale(0.8);
    transform-origin: top right;
  }
#open-carousel-btn {
    transform: scale(0.8);
    transform-origin: top left;
  }
.carousel-container {
    transform: scale(0.8);
  }
#background-changer {
    transform: scale(0.75);
    transform-origin: bottom right;
  }

  #next-section-btn {
    transform: scale(0.75);
    transform-origin: center right;
    right: 160px;
  }
  #prev-section-4-btn {
    transform: scale(0.8);
    transform-origin: center left;
  }

  #next-section-3-btn {
    transform: scale(0.8);
    transform-origin: center right;
    right: 8%;
  }
  #prev-section-3-btn {
    transform: scale(0.8);
    transform-origin: center right;
    left: 13%;
  }
  #image-changer-btn,
  #login-prompt-btn {
    transform: scale(0.6);
  }

  #launch-btn {
    transform: scale(0.8);
  }

  .popup-content {
    transform: scale(0.8);
  }
  #power-switch-btn {
    transform: scale(0.8);
    transform-origin: bottom right;
  }

  #power-switch-btn:disabled {
    transform: rotate(10deg) translateY(-60%) translatex(-40%) scaleX(-1) scale(0.8);
  }
  #prev-section-btn {
    transform: scale(0.8);
    transform-origin: center left;
    left: 13%;
  }
  #next-section-2-btn {
    transform: scale(0.8);
    transform-origin: center right;
    right: 13%;
  }
}

/* Tablettes en paysage */
@media (max-width: 999px) {

.pannel{
    gap: 3px;
}
.index-h1 {
    font-size: 15px;
    text-align: center;
    margin-bottom: 5px;
    
}
.index-p {
    font-size: 10px;
    text-align: center;
    
}

.redirect-p {
    font-size: 10px;
    text-align: center;
}
.redirect {
    width: 160px;
    height: 30px;

}

.left-panel {
    max-height: 260px;
  }

.right-panel {
    max-height: 260px;
  }

.chat-widget {
    transform: scale(0.6);
    transform-origin: top right;
  }
#open-carousel-btn {
    transform: scale(0.6);
    transform-origin: top left;
  }
.carousel-container {
    transform: scale(0.6);
  }
#background-changer {
    transform: scale(0.5);
    transform-origin: bottom right;
    right:20%;
    bottom: 10%;
  }

#next-section-btn {
    transform: scale(0.6);
    transform-origin: center right;
    right: 13%;
  }
  
  #power-switch-btn {
    transform: scale(0.4);
    transform-origin: bottom right;
    right: 10%;
  }

  #power-switch-btn:disabled {
  /* La nouvelle ligne avec la valeur en pixels que VOUS avez trouvée */
  transform: rotate(10deg) translateY(-50%) translatex(200px) scaleX(-1) scale(0.4); 
  
  /* N'oubliez pas que 'left' est aussi en pourcentage et peut être ajusté de la même manière */
  left: -60%; 
  bottom: -20%;
}

  #next-section-2-btn {
    transform: scale(0.6);
    transform-origin: center right;
    right: 13%;
  }
  #prev-section-4-btn {
    transform: scale(0.6);
    transform-origin: center left;
  }

  #next-section-3-btn {
    transform: scale(0.6);
    transform-origin: center right;
    right: 13%;
  }
#prev-section-3-btn {
    transform: scale(0.6);
    transform-origin: center right;
    left: 8%;
  }

  #image-changer-btn,
  #login-prompt-btn {
    transform: scale(0.4);
    left: 100px;
    top: 30px;
  }

  #launch-btn {
    transform: scale(0.6);
  }

  .popup-content {
    transform: scale(0.6);
  }

  .simon-container {
    transform: translate(-50%, -50%) scale(0.4);
  }
  #prev-section-btn {
    transform: scale(0.6);
    transform-origin: center left;
    left: 13%;
  }
}

@media (max-width: 640px) {
  .animated-text{
    font-size: 1.2rem;
  }
 
}