html, body {
  margin: 0;
  padding: 0;
}

body {
    font-family: Verdana, sans-serif;
    background: linear-gradient(135deg, #FF7300 0%, #FFB07C 50%, #FFDAB9 100%);
    overflow-x: hidden;
}

img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.07); /* 7% plus grand */
}

/* Header */
.header {
  text-align: center;
  padding: 20px 10px;
  color: #333;
  
  justify-content: center;
  
  display : flex;
  
}

/* Style du médaillon - photo personnelle */
.medaillon {
    position: absolute;
    top: 220px;
    left: 20px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}


.medaillon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   cursor: pointer;
}

h4{
    position: absolute;
    top: 160px;
    left: 60px;
    color : white;
    font-style: italic;
}

.Bigheader {
  justify-content: center;
  
  display : flex;
  
}

.headerBis {
   display : flex; 
}

.headerTer {
   display : flex; 
}



.header h1 {
  margin: 0;
  font-size: 2.5em;
  color: #222;
}

.header h2 {
  margin: 10px 0 0;
  font-size: 3rem;
  font-weight: normal;
  color: #444;
  display : block;
}


#boule{
    display : none;
    position : absolute;
    z-index : 500;
    
    transition: opacity 3s ease; /* Animation douce de 3s */
}

.fade-out {
  opacity: 0;
}

.fade-in {
  opacity: 1;
}


.boule-container {
  transform: translateY(-200px);
  opacity: 0;
  animation: slideIn 0.8s ease-out forwards;
}

.boule-container:nth-child(1) {
  animation-delay: 0.3s;
}

.boule-container:nth-child(2) {
  animation-delay: 0.8s;
}

.boule-container:nth-child(3) {
  animation-delay: 1.3s;
}


#anim1:hover {
  transform: scale(1.07); /* 7% plus grand */
  transition: transform 0.3s ease-in-out;
}

#anim2:hover {
  transform: scale(1.07); /* 7% plus grand */
  transition: transform 0.3s ease-in-out;
}

#anim3:hover {
  transform: scale(1.07); /* 7% plus grand */
  transition: transform 0.3s ease-in-out;
}




@keyframes slideIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.boule-lottie { 
    
    width: 120px; height: 120px; margin: 20px; cursor : pointer; }

.boule-label {
  position: relative;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.9);/*#FFA500; /* Orange, ou adapte à ton thème */
  
  text-align: center;
  font-weight: bold;
  font-size: 1.4rem;
  
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
  
  background: rgba(255, 255, 255, 0); /* Optionnel : fond blanc transparent */
  padding: 4px 8px;
  border-radius: 6px;
}    






.modal {
  position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-content {
  background: #fff; border-radius: 15px; box-shadow: 0 8px 32px #2228;
  padding: 2rem;
  position: relative;
  min-width: 300px; max-width: 95vw;
  justify-content: center;
}

.modal-content h3 {
    text-align: center;
    width: 100%;
  }

.close {
  position: absolute; top: 0.05em; right: 0.5em; cursor: pointer; font-size: 2em;
}


.overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.3);
      /*display: none;*/
      align-items: center;
      justify-content: center;
      padding: 1rem;
      z-index: 2000;
      opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.4s ease;
  
  pointer-events: none;
    }

#overlayChangePwd {
    display : flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    } /* Apparaitra au-dessus même des autres overlays */

    
#overlayDP{
    display : flex;
    align-items: center;
    justify-content: center;
}

#overlayQS{
    display :flex ;
    justify-content: center;
    align-items: center;
}

#overlayAE{
    display :flex ;
    justify-content: center;
    align-items: center;
}   

#overlayPhoto{
    display :flex ;
    justify-content: center;
    align-items: center;
}


    .modaleDP {
      position: relative;
      background: #fff7f0;
      border-radius: 1.5rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-width: 500px;
      padding: 2rem;
      box-sizing: border-box;
      
      border-left: 6px solid #77c7d7;
      
    }

    .modaleQS {
      position: relative;
      background: #fff7f0;
      border-radius: 1.5rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      width: 100%;
      max-height: 90vh; /* pour que ça ne dépasse pas l'écran */
      overflow: hidden;
      max-width: 700px;
      /*max-height: 1200px;*/
      padding: 2rem;
      box-sizing: border-box;
      
      border-left: 6px solid #77c7d7;
      
    }

    .modaleDP h2 {
      margin-top: 0;
      font-size: 1.5rem;
      color: #333;
    }

    .modaleQS h2 {
      margin-top: 0;
      font-size: 1.5rem;
      color: #333;
    }

    .scrollable-content {
      max-height: 500px;
      overflow-y: auto;
      padding-right: 0.5rem; /* évite que le scroll cache le contenu */
      margin-top: 1rem;
    }


    label {
      display: block;
      margin: 1rem 0 0.3rem;
      font-size: 0.9rem;
      color: #444;
    }

    input,
    select {
      width: 100%;
      padding: 0.6rem;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 0.5rem;
      background: #fff;
      box-sizing: border-box;
    }

    .profil{
        height : 100px;
        width : 500px;
    }
    
    .readonly {
      background-color: #f0f0f0;
    }

    .password-link {
      display: inline-block;
      margin-top: 0.5rem;
      color: #f58025;
      cursor: pointer;
      font-weight: bold;
      text-decoration: none;
    }

    .password-link:hover {
      text-decoration: underline;
    }

    .actions {
      display: flex;
      justify-content: space-between;
      margin-top: 2rem;
    }

    .actions button {
      padding: 0.6rem 1.2rem;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
      cursor: pointer;
    }

    .btn-cancel {
      background-color: #ddd;
      color: #333;
    }

    .btn-save {
      background-color: #f58025;
      color: #fff;
    }

    .btn-save_pw {
      background-color: #f58025;
      color: #fff;
    }

    .btn-save_photo {
      background-color: #f58025;
      color: #fff;
    }
    
    .btn-save_synth {
      background-color: #f58025;
      color: #fff;
    }


    .btn-save:hover {
      box-shadow: 0 0 0 3px #f58025a8;
    filter: brightness(1.07);
    }

    .btn-save_pw:hover {
      box-shadow: 0 0 0 3px #f58025a8;
    filter: brightness(1.07);
    }

    .btn-save_photo:hover {
      box-shadow: 0 0 0 3px #f58025a8;
    filter: brightness(1.07);
    }
    
    .btn-save_synth:hover {
      box-shadow: 0 0 0 3px #f58025a8;
    filter: brightness(1.07);
    }

    .btn-cancel:hover {
      box-shadow: 0 0 0 3px #ddda8;
    filter: brightness(1.07);
    }
    
    
    
    .btn-seconnecter {
    display: block;
    margin: 20px auto; /* centré horizontalement avec marge */
    padding: 12px 24px; /* plus gros bouton */
    background-color: #f58025;/*#d35400; /* orange foncé */
    color: white;
    border: none;
    border-radius: 8px; /* bords arrondis */
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

    .btn-seconnecter:hover {
    background-color: #d35400;/*#e67e22; /* hover plus clair */
  }


    

.overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.overlay.hide {
  opacity: 0;
  visibility: hidden;
}

/* Bouton de fermeture */
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #f58025;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.close-btn:hover {
  transform: scale(1.2);
}


#autoeval-individuelle label,
#autoeval-collective label {
  margin-top: 1rem;
}



details {
  margin-top: 1.5rem;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-left: 5px solid #009fe3; /* Flèche bleue ! */
}

details summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
  color: #009fe3;
}

.slider-item {
  margin-top: 1rem;
}

.slider-item label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
}

.slider-line {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider-line input[type=range] {
  flex: 1;
  accent-color: #f58025;
}

.slider-line span {
  min-width: 20px;
  font-weight: bold;
}

.textarea-container {
      position: relative;
      display: inline-block;
      width: 100%;
      max-width: 500px;
    }
.char-counter {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 0.8em;
      color: #999;
      pointer-events: none;
      user-select: none;
      opacity: 0.5;
    }

.char-counter_p {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 0.8em;
      color: #999;
      pointer-events: none;
      user-select: none;
      opacity: 0.5;
    }









#mon-image
{
    position:absolute;
    right : 50px;
    top :20px;
    z-index:-1;
    
    /* Fondu dégradé en bas ! */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.onoff
{
  padding-top : 20px; 
   padding-left : 20px;  
}

#actua
{
  padding-top : 20px;
   padding-left : 20px;  
}

.sauvegarde
{
  padding-top : 20px; 
   padding-left : 20px;  
}

.param
{
  padding-top : 20px; 
   padding-left : 20px;  
}


#date-display {
  margin-top: 10px;
  font-size: 1.2rem;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#chrono {
  
  font-size: 1.2rem;
  font-weight: normal;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#tokens-max {
  
  font-size: 1.2rem;
  font-weight: normal;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#tokens-used {
  
  font-size: 1.2rem;
  font-weight: normal;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#audioVisualizer {
    position: absolute; /* ou 'fixed' selon le besoin */
    top: 80%;            /* aligne le haut du canvas avec le haut du conteneur */
    left: 25%;           /* aligne le côté gauche du canvas avec le côté gauche du conteneur */
    z-index: 10;       /* assurez-vous que ce z-index est supérieur à celui d'autres éléments */
    width: 100%;
    height: 150px;
    pointer-events: none; /* permet les interactions avec les éléments sous le canvas */
}

#content{
    display : flex;
   
    justify-content: center;
    
    overflow : hidden;
}

h1{
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    text-align : center;
    color : #eeeeee;
}
h2{
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-align : center;
    color : #999999;
}

h3 {
  font-style: italic;
}

#micro {
    text-align: center; /* centre le texte à l'intérieur du h2 */
    display: block;     /* il l'est par défaut, donc optionnel */
    width: 100%;        /* prend toute la largeur de son parent */
    margin-top: 0px;    /* Diminue la marge du haut */
    margin-bottom: 0px; /* Diminue la marge du bas */
    padding: 0;         /* Enlève tout padding éventuel */
    font-size : 0.8em;
}

#entete{
    height : 50px;
    display : flex;
    padding-left : 35px;
    align-items : center;
    justify-content : center;
    padding-top : 20px;
}


#soussousentete{
   display : flex;
  padding-left : 120px;
   align-items : center;
    
}

#session-timer{
    display : flex;
    font-size: 1.2rem;
    gap : 10px;
}

#loadingMessage{
    padding-left : 30px;
}

/* Chat Container */
.chat-container {
  
  background: #ffffffcc;
  border-radius: 20px;
  padding: 15px;
  width: 75%;
  justify-content: center;
  /*align-items : center;*/
  height: 700px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  overflow: hidden;
}


/* Chat Window */
#chat-window {
  flex-grow: 1;
  min-height: 450px;
  max-height: 450px;
  
  position : relative;
  
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}

#overlaySynthese {
  
  display : flex;
  justify-content: center;
  align-items: center;
  /*border-left: 6px solid #77c7d7;*/
}
#syntheseTextarea {
  width: 100%;
  min-height: 120px;
  border: 1.5px solid #d7e7f7;
  border-radius: 10px;
  padding: 1rem;
  box-sizing: border-box;
  font-size: 1.1rem;
  font-family: inherit;
  background: #f7fbff;
  color: #374151;
}


#overlayReprise {
  
  display : flex;
  justify-content: center;
  align-items: center;
  /*border-left: 6px solid #77c7d7;*/
}



.image-cours {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 95px;
    cursor: pointer;
  }
  
.image-cours_2 {
    display : none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 95px;
    cursor: pointer;
  }


#chat-window textarea {
  width: 100%;
  height: 100%;
  border: none;
  resize: none;
  background: transparent;
  font-size: 1em;
  color: #333;
  padding: 5px;
  overflow-x: hidden; 
}

#response {
    width: 100%;
    height: 100%;
    border: none;
    
    box-sizing: border-box;
    
    resize: none;
   
   /*padding: 7px;*/
    
    padding: 7px 10px 7px 7px;
    
    font-size: 16px;
    font-family: Verdana, sans-serif;
    background-color : #aaaaaa;
    line-height: 1.6;
    /*overflow: hidden;*/
}

#chat-form {
    width: 100%;
    display: flex;
    
    padding: 10px;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form input[type="text"] {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    
    /*border: 1px solid #ddd;*/
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form button {
    margin-right: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Verdana, sans-serif;
}

#chat-form button:hover {
    background-color: #4cae4c;
}

#chat-form textarea {
    font-size: 16px;
    font-family: Verdana, sans-serif;
    flex: 1; /* Si vous souhaitez qu'il remplisse l'espace disponible */
    height: auto; /* Hauteur peut être automatique ou fixe, selon vos besoins */
    min-height: 150px; /* Hauteur minimale pour commencer */
    padding: 10px;
    border-radius: 20px;
    margin-right: 10px;
    border: none;/*1px solid #ddd;*/
    resize: none; /* Empêche l'utilisateur de redimensionner le textarea */
    overflow-y: auto; /* Permettre le défilement vertical si le texte est trop long */
    
}

#spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  margin-bottom : 20px;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  
}

.footer
{
     
     width : 100%;
     height : 60px;
     background-color:#FFB07C;
     justify-content: center;
     text-align: center;
}

#footer-content
{
     padding-top : 20px;
     justify-content: center;
     text-align: center;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media screen and (max-width: 1360px) {
  
  /* Style du médaillon - photo personnelle */
.medaillon {
    position: absolute;
    top: 220px;
    left: 20px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}
    
h4{
    position: absolute;
    top: 160px;
    left: 20px;
    color : white;
    font-style: italic;
}

    
    
}



@media screen and (max-width: 768px) {
 html, body {
    margin: 0 !important;
    padding: 0 !important;
  }
 
  body {
    font-size: 14px;
    overflow-x: hidden;
  }

.onoff
{
  padding-top : 20px; 
   padding-left : 10px;  
}

#actua
{
  padding-top : 20px;
   padding-left : 10px;  
}

.sauvegarde
{
  padding-top : 20px; 
   padding-left : 50px;  
}

.param
{
  padding-top : 20px; 
   padding-left : 50px;  
}

.boule-lottie { 
    
    width: 100px; height: 100px; margin: 10px; cursor : pointer; }

.boule-label {
  position: relative;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0, 0, 0, 0.9);/*#FFA500; /* Orange, ou adapte à ton thème */
  
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
  
  text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.6);
  
  background: rgba(255, 255, 255, 0); /* Optionnel : fond blanc transparent */
  padding: 4px 8px;
  border-radius: 6px;
}    



.modal-content {
  
  align-items: center;
}

#profileForm {
    display: block;
    display: flex;
  flex-direction: column;
  align-items: center;
    /*margin-bottom: 10px; /* optionnel, pour espacer */
  }
  
 #profileForm label{
    display: block;
    display: flex;
  flex-direction: column;
  align-items: center;
  
    margin-bottom: 10px; /* optionnel, pour espacer */
  }
  
.modal-content h3 {
    text-align: center;
    width: 100%;
  }
 
 
.overlay.modaleDP {
        height: 100%;
        border-radius: 0;
        max-width: none;
        overflow-y: auto;
      }
 
 
.profil{
        height : 100px;
        width : 250px;
    } 
 
 
 
 
 #entete {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }


.header{
    display: flex;
  justify-content: left;
  align-items: center;
  height: 300px; /* hauteur du conteneur */
}


/* Style du médaillon - photo personnelle */
.medaillon {
    position: absolute;
    top: 330px;
    left: 20px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 100;
}

h4{
    position: absolute;
    top: 280px;
    left: 20px;
    color : white;
    font-style: italic;
}





.headerBis {
   flex-direction:column; 
}

.headerTer {
   flex-direction:column;
   left: 20px;
}

.Bigheader{
    display: flex;
  justify-content: space-between;
  
}

.sauvegarde
{
    padding-right : 20px;  
}

#sousheader {
    display : none;
  }
  
  .chat-container {
    width: 95%;
    height: 450px;
    padding: 10px;
  }

  #chat-window {
  flex-grow: 1;
  min-height: 150px;
  max-height: 150px;
  
  position : relative;
  
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
}
  
.image-cours {
    display : none;
    
  }

.image-cours_2 {
    display : flex;
    position: absolute;
    top: 300px;
    right: 10;
    width: 90px;
    height: 90px;
    cursor: pointer;
  }


  
  #chat-form textarea {
    min-height: 100px;
    font-size: 14px;
  }

  #mon-image {
   position: absolute;
  top: 0;
   left : 25px;
   z-index:-1;
    display: block;
    
    
  }

  .header h1, .header h2 {
    font-size: 2.5em;
    
  }

  #soussousentete, #entete {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  #session-timer {
    flex-direction :column;
    align-items: center;
    gap: 5px;
    
  }

#motsconso {
    display : flex;
}

  #audioVisualizer {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    height: 100px;
  }

  #chat-form {
    flex-direction: column;
  }

 #tokens-max {
  
  
  color: black;
  
}

#tokens-used {
  
  
  color: black;
  
} 

  #chat-form button {
    margin: 5px 0 0 0;
    width: 95%;
  }

  #chat-form input[type="text"] {
    width: 95%;
    padding-right: 10px;
  }

#chat-form textarea {
    width: 92%;
    
}


.grecaptcha-badge {
  transform: scale(0.85);
  transform-origin: bottom right;
  transition: none !important;
  width: 70px !important;
  overflow: hidden !important;
}

.grecaptcha-badge iframe {
  width: 70px !important;
  height: 60px !important;
  pointer-events: none !important;
}



  .footer {
    height: auto;
    padding: 10px 0;
  }

  #footer-content {
    padding-top: 10px;
  }
}



@media screen and (max-width: 560px) {
    #chat-form textarea {
    width: 90%;
    
}


}