/* styles.css */

/* Styles généraux du body et page */
html {
  background-color: #cccccc;
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  margin: 0;
  width: 100%;
  text-align: center;
  
}

#page {
  width: 100%;
  background-color: white;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;

  flex-direction: column;
  align-items: center;

  min-height: calc(100vh - 40px); /* Assure que le body prend au moins toute la hauteur de la fenêtre */
}

#logoHead {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
}

#logoHead img {
  /*max-height: 250px;*/
  /*width: auto;*/
  margin: 0 15px;
}

#logoHead span {
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
  color: #333;
}

#logoHead a {
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
  color: #333;
}

#BasDePage {
  background: linear-gradient(to top, #059e99, #035f5c);
  padding: 10px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

#BasDePage a {
  color: #FFFFFF;
}

/* --- Styles pour le menu déroulant --- */
#Menu {
  background: linear-gradient(to bottom, #059e99, #035f5c);
  padding: 10px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}

#Menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.main-menu {
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
}

#Menu li {
  position: relative;
  padding: 8px 15px;
  cursor: pointer;
  font-weight: bold;
  /*background-color: #ddd;*/
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#Menu li:hover {
  background-color: #069e99;
}

#Menu li a {
  text-decoration: none;
  color: #FFFFFF;
  display: block;
}

/* Styles pour les sous-menus */
.submenu {
  display: none; /* Cache les sous-menus par défaut */
  position: absolute;
  left: 0;
  top: 100%;
  /*background-color: #e0e0e0;*/
  background: linear-gradient(to bottom, #059e99, #035f5c);
  min-width: 200px;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 5px 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.submenu li {
  padding: 8px 15px;
  background-color: transparent;
  border-radius: 0;
}

.submenu li:hover {
  background-color: #c0c0c0;
}

/* Pour les sous-sous-menus, les faire apparaître à droite */
.submenu .submenu {
  left: 100%;
  top: 0;
  margin-left: 5px;
}

/* --- AFFICHAGE AU SURVOL (CSS) --- */
/* Affiche le sous-menu quand le LI parent est survolé */
.has-submenu:hover > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Affiche les sous-sous-menus quand leur LI parent est survolé */
.submenu li.has-submenu:hover > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* --- AFFICHAGE AU CLIC (JavaScript) --- */
/* Classe JavaScript pour afficher les sous-menus */
.show-submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Assure que les sous-menus imbriqués restent ouverts au clic de leur parent */
.submenu li.has-submenu.active > .submenu {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Style pour le texte simple après le menu */
#page > div:last-of-type {
    margin-top: 0px;
    text-align: center;
}


.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%; /* S'assure que le container prend toute la largeur */
    flex: 1; /* C'est la ligne magique ! Elle fait que le container prend tout l'espace disponible verticalement */
    background-color: #E8F3E1;
}

.blockCommplet {
  background-color: #E8F3E1;
  width: 100%;
  /*height: 100%;*/
  padding-top: 10px;
  padding-bottom: 10px;
  flex-shrink: 0; /* Empêche ce bloc de rétrécir et s'assure qu'il garde sa taille */
  text-align: justify;
}

.blockCommplet p {
  padding-left: 10px;
  padding-right: 10px;
}
.blockCommplet H2 {
  padding-left: 10px;
  padding-right: 10px;
}
.blockCommplet H3 {
  padding-left: 10px;
  padding-right: 10px;
}
.blockCommplet li {
  padding-left: 10px;
  padding-right: 10px;
}

.block-1On2 {
  /*border: 1px solid #069e99;*/
  background-color: #E8F3E1;
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 0px;
  flex-shrink: 0; /* Empêche ce bloc de rétrécir et s'assure qu'il garde sa taille */
}
.block-2On2 {
    display: flex;
    /*gap: 10px;*/
    width: 100%;
    height: 100%;
    padding: 0px;
    margin-top: 0px;
    flex: 1; /* Ceci fait que le bloc-2 prend tout l'espace vertical restant dans le container */
}
.column-1On2 {
    flex: 1; /* Prend 33% de l'espace */
    padding: 20px;
    background-color: #E8F3E1;
    /*border: 1px solid #069e99;*/
}
.column-2On2 {
    flex: 2; /* Prend 66% de l'espace */
    padding: 20px;
    background-color: #E8F3E1;
    /*border: 1px solid #069e99;*/
}

.column-1On2_66 {
    flex: 2; /* Prend 66% de l'espace */
    padding: 20px;
    background-color: #E8F3E1;
    /*border: 1px solid #069e99;*/
}
.column-2On2_33 {
    flex: 1; /* Prend 33% de l'espace */
    padding: 20px;
    background-color: #E8F3E1;
    /*border: 1px solid #069e99;*/
}

#QuestionnaireModuleB {
    padding: 20px;
    width: 100%;
    background-color: #E8F3E1;
    /*border: 1px solid #069e99;*/
}

#QuestionnaireModuleB TD {
  border:none;
}

#QuestionnaireModuleB TD.Reponse {
  border:1px solid black;
  background-color: white;
}

#QuestionnaireModuleB TD.Reponse.vert {
  border:3px solid darkgreen;
  background-color: #C6EFCE;
}

#QuestionnaireModuleB TD.Reponse.rouge {
  border:3px solid darkred;
  background-color: #FFC7CE;
}

#QuestionnaireModuleB TD.Reponse.orange {
  border:3px solid darkorange;
  background-color: #FFCC99;
}


TH.categorieModuleB {
    margin-left: 10px;
    font-weight: bold;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: slategray;
}

#QuestionnaireModuleB TD.ResultatGlobal {
  font-size: 1.3em;
  font-weight: bold;
}

#QuestionnaireModuleB TD.ResultatGlobal.vert {
  border:3px solid darkgreen;
  background-color: #C6EFCE;
}

#QuestionnaireModuleB TD.ResultatGlobal.rouge {
  border:3px solid darkred;
  background-color: #FFC7CE;
}



.Question {
  text-align: left;
  background-color: lightgray;
}

.content {
  background-color: #E8F3E1;
}

/* Flexbox pour le formulaire lui-même */
.block-1On2 form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* Distribue l'espace de manière égale */
}

/* Style pour les groupes d'éléments du formulaire */
.form-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pour le groupe du choix du poomsae */
.form-group.First-select {
  margin-left:20px;
    justify-content: flex-start; /* Aligné à gauche */
    order: 1; /* S'assure qu'il est le premier élément */
}

/* Pour le groupe des boutons radio */
.form-group.radio-options {
    justify-content: center; /* Centré */
    order: 2;
}

/* Pour le groupe des boutons précédent/suivant */
.form-group.navigation-buttons {
    justify-content: flex-end; /* Aligné à droite */
    order: 3;
    margin-right: 20px;
}

/* Style pour les boutons */
.form-group.navigation-buttons button {
    margin-left: 10px;
}

.youtube-viewer {
    position: relative;
    width: 100%;
    /* Ajustement pour que la vidéo prenne tout l'espace de la colonne */
    height: 100%; 
}
.youtube-viewer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tabulation-paragraphe {
  text-align: justify;
  text-indent: 40px; /* Indente seulement la première ligne */
}

.column-1On2 h2 {
  margin-block-start: 0.3em;
}

/*** KIBON ***/ 
/* Styles pour le conteneur principal */
.KibonStep {
    width: 100%;
    height: 90%;
    border-radius: 15px;
    padding: 20px;
    margin-top: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Aligne les éléments verticalement */
    align-items: flex-start; /* Aligne les éléments à gauche */
    gap: 15px; /* Espace de 15px entre chaque div enfant */
    flex-shrink: 0; /* Empêche ce bloc de rétrécir et s'assure qu'il garde sa taille */
}

/* Couleurs de fond principales */
.MS {
    background-color: #ff8c00; /* Orange */
}

.MI {
    background-color: #2e8b57; /* Vert */
}

.MIS {
    background-color: #2F5496; /* Bleu */
}

/* Styles pour les divs de mouvement (action et position) */
.KibonStep > div {
    width: 90%; /* Prend toute la largeur disponible */
    border-radius: 8px;
    border-style: solid;
    border-width: 2px;
    padding: 10px 15px;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #000;
}

/* Couleurs des divs en fonction de la couleur principale */
/* MS - Orange */
.KibonStep.MS .action {
    background-color: #ffac33;
    border-color: #e67e00;
}

.KibonStep.MS .position {
    background-color: #e67e00;
    border-color: #ffffff;
}

/* MI - Vert */
.KibonStep.MI .action {
    background-color: #B2D3A3;
    border-color: #2c7744;
}

.KibonStep.MI .position {
    background-color: #70AD47;
    border-color: #ffffff;
}

/* MIS - Bleu */
.KibonStep.MIS .action {
    background-color: #DAE3F3; /* Bleu plus clair */
    border-color: #1a71c2; /* Bleu plus foncé */
}

.KibonStep.MIS .position {
    background-color: #4472C4; /* Bleu plus foncé (couleur principale) */
    border-color: #ffffff; /* Bleu encore plus foncé */
}

center.restriction {
  background-color: #B2D3A3;
  padding-top: 15px;
  padding-bottom: 15px;
}

span.restriction {
  font-size: 1.2em;
  margin-top: 5px;
  margin-bottom: 5px;
}

span.restriction:hover {
  cursor: pointer;
  text-decoration: underline;
}

ul.ListVideo {
  display: flex;
  flex-wrap: wrap;
  list-style: none; /* Optionnel : pour enlever les puces */
  /*padding: 0; /* Optionnel : pour enlever le padding par défaut de la liste */
  gap: 20px; /* Ajoute un espace entre chaque div */
}

ul.ListVideo > li {
  /* Assurez-vous que les li ne prennent pas toute la largeur */
  /* Ajoutez des marges pour un meilleur espacement */
  margin-right: 15px;
  margin-bottom: 15px;
}

ul.ListVideo > iframe {
  /* Assurez-vous que les iframes ne prennent pas toute la largeur */
  /* Ajoutez des marges pour un meilleur espacement */
  margin-right: 15px;
  margin-bottom: 15px;
}

.alignement-vertical {
  display: flex; /* Active Flexbox sur le conteneur parent */
  align-items: center; /* Centre les éléments enfants verticalement */
}

ul.liste-personnalisee {
  list-style: none; /* Supprime les puces par défaut */
  padding-left: 0; /* Important : réinitialise le rembourrage pour aligner la liste */
}

ul.liste-personnalisee li {
  display: flex; /* Active Flexbox sur chaque élément de liste */
  align-items: center; /* Centre verticalement le contenu (pseudo-élément et texte) */
}

ul.liste-personnalisee li::before {
  content: ""; /* Obligatoire pour afficher le pseudo-élément */
  display: block;
  width: 15px; /* Largeur désirée de l'image */
  height: 15px; /* Hauteur désirée de l'image */
  margin-right: 10px; /* Espacement entre la puce et le texte */
  background-image: url('../IMG/icone/verifier.png');
  background-size: contain; /* Ajuste la taille de l'image pour qu'elle tienne dans la zone */
  background-repeat: no-repeat;
  background-position: center;
}

#show-answer-button {
    background-color: #059e99; 
    color: black;
    padding: 15px 30px;
    font-size: 1.2em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;*/
}

#show-answer-button:hover {
    background-color: #035f5c;
}

.image-tooltip {
  position: relative;
  display: inline-block;
}

.image-tooltip img {
  display: block;
}

.image-tooltip .tooltip {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* empêche le texte d'intercepter le survol */
}

.image-tooltip:hover .tooltip {
  opacity: 1;
}