/* ========================================
 STRUCTURE
======================================== */



/**  ----------------  ***/
/**  LE BIG CONTENEUR  ***/
/**  ----------------  ***/

.content-section {
   /*! doit être en 100% */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-2);
   margin: var(--space-2);
   width: 100%;
   height: fit-content;
   margin: 0 auto;
   /* Pour qu'elle grandisse et prenne la hauteur qu'il reste pour faire min 100vh */
   flex: 1;
   /* flex est le raccourcis pour flex : flex-grow flex-shrink flex-basis */


   /* * --- le sous conteneur --- **/
   .section-content {
      /*! doit être en 90/80%*/
      padding: var(--space-4) var(--space-2);
      /* padding : top+bottom right+left*/
      /* border: green 1px solid; */
      width: 90%;
      max-width: 800px;
      /* Largeur maximale fixe */
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
   }

   /** ------------------------ --- */
   /** ------- Section titre ------ */
   /** ------------------------ --- */

   .section-header {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      width: 60%;
      box-sizing: border-box;
      max-width: 1200px;
      /* border: 2px solid lightblue; */
      text-align: center;
      padding: var(--space-4);
      /* margin: var(--space-4); */
   }

   @media (max-width: 768px) {
      .content-section {
         margin: var(--space-2) 0;
         /* Réduit les marges */
         padding: var(--space-4) var(--space-1);
         /* Au lieu de --space-12 */
      }

      .section-header {
         padding: var(--space-2);
         /* Au lieu de --space-4 */
         width: 90%;
         /* Plus large sur mobile */
      }

      .section-content {
         padding: var(--space-2) var(--space-1);
         min-width: 95%;
         /* Utilise presque toute la largeur */
      }
   }

}

/* Container des boutons level  */
.container-btn-level {
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}

/* Container des boutons thème  */
.container-btn-theme {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   gap: var(--space-2)
}

.container-btn-option {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   gap: var(--space-2);
   /* width: 60%; */
   max-width: 600px;
   margin: 0 auto;

   .option-btn {
      width: 100%;
      text-align: center;
      padding: var(--space-4) var(--space-6);
   }


}

.container-btn-nav {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-evenly;
   padding: var(--space-4);
}

/* ========================================
INITIALISATION 
======================================== */

.loading-container {
   display: flex;
   flex-direction: column;
   align-items: center;
    min-height: 400px
}

/* ========================================
SCENARIO
======================================== */

.scenario {
   /* = DIV_SCENARIO */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-4);
   /* border: 1px yellow solid; */
}

.scenario-contexte {
   flex-direction: row;
   align-items: center;
   justify-content: center;
   text-align: center;
   border: 1px;
   background-color: var(--gray-100);
   padding: var(--space-4);
   border-radius: var(--radius-sm);
   box-shadow: var(--shadow-md);
   background-color: var(--gray-100);
   /* width: 60%; */
   margin: 0 auto;
   margin-bottom: var(--space-6);
   font-size: var(--font-size-small);
   width: fit-content;

}

.interlocuteur-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
   border: 1px;

   /* border: 1px pink solid; */
   /* width: 60%; */
   margin: 0 auto;
   font-style: italic;
}

.replique-container {
   display: flex;
   align-items: center;
   justify-content: center;
   /* gap: var(--space-1); */
   margin-top: var(--space-4);

   .avatar-container {
      width: fit-content;

      img {
         box-shadow: none;
         max-width: 200px;
      }
   }


   .texte-container {
      /* display: flex;
      align-items: center;
      flex-direction: column; */
      /* justify-content: center; */
      /* display: inline-block;
    padding: var(--space-4);
      border-radius: var(--radius-full);
      box-shadow: var(--shadow-md);
      background-color: var(--secondary);
      font-size: var(--font-size-small);
      text-align: center;
      max-width: 800px; */
      position: relative;
      display: inline-block;
      padding: var(--space-4);
      border-radius: var(--radius-md);
      /* Au lieu de radius-full pour avoir une vraie bulle */
      box-shadow: var(--shadow-md);
      background-color: var(--secondary);
      font-size: var(--font-size-small);
      text-align: center;
      max-width: 500px;

      &::before {
         content: '';
         position: absolute;
         left: -9px;
         /* Ajuste selon ta mise en page */
         top: 90px;
         transform: translateY(-50%);
         width: 0;
         height: 0;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
         border-right: 10px solid var(--secondary);
      }

      p {
         text-align: center;
         word-wrap: break-word;
      }

   }
}

strong {
   /* Nom de l'avatar */
}

.section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: var(--space-8);
   margin-bottom: var(--space-4);
}

.imgAvatar {
   width: 80px;
}



/* Pour plus tard : exemple de speech bubble 
.speech-bubble {
	position: relative;
	background: #c0c0c0;
	border-radius: .4em;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-right-color: #c0c0c0;
	border-left: 0;
	margin-top: -20px;
	margin-left: -20px;
} */


/* ========================================
   BOUTONS
======================================== */

.option-btn {
   background: var(--secondary-700);
   color: var(--white);
}

.option-btn:hover {
   background: var(--secondary-800);
   color: var(--white);
}

.option-btn:disabled {
   background: var(--gray-200);
   color: var(--white);
   pointer-events: none;
}

.option-btn:disabled.option-choisie {
   background: var(--secondary-800);
   color: var(--white)
}


/* ========================================
   FEEDBACK / RÉSULTAT
======================================== */

.result-container {
   /* border: 1px red solid; */
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
   align-items: center;
   justify-content: center;
   /* width: 60%; */
   margin: 0 auto;


   .h2_resultat {
      text-align: center;
   }

   .feedback-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* border: 4px cornflowerblue solid; */
      /* width: 60%; */
      margin: 0 auto;

      font-style: italic;
   }

   .container-avatar-reaction {
      /* border: 2px lightseagreen solid; */
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 5%;
      gap: var(--space-1);

      .avatar-container {
         width: fit-content;

         img {
            box-shadow: none;
            max-width: 200px;
         }
      }

      .feedback-reaction {
         /* Réaction de l'interlocuteur·ice */
         /* display: inline-block;
         flex-direction: column;
         align-items: center;
         border-radius: var(--radius-full);
         background-color: var(--secondary);
         padding: var(--space-4);
         text-align: center;
         font-size: var(--font-size-small);
          max-width: 800px; */


         position: relative;
         display: inline-block;
         padding: var(--space-4);
         border-radius: var(--radius-md);
         /* Au lieu de radius-full pour avoir une vraie bulle */
         box-shadow: var(--shadow-md);
         background-color: var(--secondary);
         font-size: var(--font-size-small);
         text-align: center;
         max-width: 500px;

         &::before {
            content: '';
            position: absolute;
            left: -9px;
            /* Ajuste selon ta mise en page */
            top: 50px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid var(--secondary);
         }

         p {
            font-size: var(--font-size-small);

         }

         p:first-of-type {
            /* reponse de l'interlocuteur·ice*/
            font-style: italic;
         }
      }

   }

}




.container-analyse-reminder {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--space-1);
   background: var(--gray-100);
   border-radius: var(--radius-md);
   padding: var(--space-2);
   margin-top: 5%;
   max-width: 800px;
   margin: 0 auto;

   .feedback-analyse,
   .feedback-reminder {
      text-align: center;
      font-size: var(--font-size-small);
      padding: var(--space-4);

   }
}


/* .feedback-reaction img {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   vertical-align: middle;
   margin-right: 5px;
} */

.feedback-analyse {
   text-align: center;
}

.feedback-type {
   font-style: italic;

}