/* ===============================
   GETeet – Global H5P Typography
   =============================== */

/* Police globale */
.h5p-content,
.h5p-content * {
  font-family: "Poppins", Arial, sans-serif;
}

/* Titres */
.h5p-content h1 {
  color: #000BB4;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

.h5p-content h2 {
  color: #000BB4;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}

.h5p-content h3 {
  color: #ffb644;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
}
/* GETeet – Personality Test (globalisé) */

/* Titre écran d’introduction */
.h5p-personality-quiz-title-card-wrapper h2 {
  color: #000BB4;
  font-weight: 900;
}

/* Bouton Start */
.h5p-personality-quiz-start-button-wrapper button,
.h5p-personality-quiz-start-button-wrapper .h5p-button,
.h5p-personality-quiz-start-button-wrapper a {
  background-color: #4444BB;
  color: #ffb644;
  border: 1px solid #ffb644;
  border-radius: 7px;
  font-weight: 800;
}
/* Personality test */
.h5p-personality-quiz .h5p-personality-quiz-title {
  color: #000bb4;
}
.h5p-personality-quiz .h5p-personality-quiz-button{
  color: #000bb4;
 font-size: 18px;
}
.h5p-personality-quiz-personality h2 {
  color: #000BB4 !important;
  font-size: 26px !important;
  font-weight: 700;
}

.h5p-personality-quiz-personality p {
  color: #000BB4 !important;
  font-size: 18px !important;
  line-height: 1.5;
}

/* GETeet – H5P Interactive Video Splash */

.h5p-splash-main {
  background-color: #4444BB !important;
  border-radius: 13px !important;
  padding: 20px !important;
}

/* Icône play */
.h5p-splash-play-icon,
.h5p-splash-play-icon::before {
  color: #ffb644 !important;
}

/* Texte */
.h5p-splash-title {
  color: #ffb644 !important;
  font-weight: 600;
}

/* Optionnel : effet hover plus premium */
.h5p-splash-main:hover {
  transform: scale(1.03);
  transition: all 0.2s ease;
}
/* GETeet – Interactive Video: GoToQuestion (choices) */

/* Carte interaction */
.h5p-interaction-outer {
  border: 1px solid rgba(0, 11, 180, 0.18) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10) !important;
  overflow: hidden;
}

/* En-tête / question */
.h5p-gotoquestion-text {
  background: #4444BB !important;
  color: #ffb644 !important;
  font-weight: 800 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(255, 182, 68, 0.55) !important;
}

/* Liste des choix */
.h5p-gotoquestion-choices {
  margin: 0 !important;
  padding: 8px !important;
  background: #ffffff !important;
}

/* Boutons choix */
.h5p-gotoquestion-button {
  background: #ffffff !important;
  color: #000BB4 !important;
  border: 1px solid rgba(0, 11, 180, 0.20) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease !important;
}

/* Hover / focus */
.h5p-gotoquestion-button:hover,
.h5p-gotoquestion-button:focus {
  background: #4444BB !important;
  color: #ffb644 !important;
  border-color: #ffb644 !important;
  box-shadow: 0 8px 18px rgba(68, 68, 187, 0.18) !important;
  transform: translateY(-1px);
  outline: none !important;
}

/* Optionnel : espacement entre choix */
.h5p-gotoquestion-choice {
  margin: 6px 0 !important;
}
/* ==============================
   GETeet – H5P Drag Text (Interactive Video)
   ============================== */

/* Conteneur */
.h5p-drag-text,
.h5p-drag-text p,
.h5p-drag-text span {
  color: #000BB4 !important;
}

/* Zones de dépôt (les "blanks") */
.h5p-drag-text .ui-droppable {
  background: rgba(68, 68, 187, 0.10) !important;
  border: 2px dashed rgba(68, 68, 187, 0.55) !important;
  border-radius: 10px !important;
  min-height: 34px;
}

/* Hover droppable */
.h5p-drag-text .ui-droppable-hover {
  background: rgba(255, 182, 68, 0.12) !important;
  border-color: #ffb644 !important;
}

/* Mots déplaçables */
.h5p-drag-text .ui-draggable {
  background: #ffffff !important;
  color: #000BB4 !important;
  border: 1px solid rgba(0, 11, 180, 0.22) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  font-weight: 700 !important;
  padding: 6px 10px !important;
}

/* Hover draggables */
.h5p-drag-text .ui-draggable:hover {
  border-color: #ffb644 !important;
}

/* Bouton Vérifier */
.h5p-drag-text .h5p-question-check-answer.h5p-joubelui-button {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
}

/* Hover bouton */
.h5p-drag-text .h5p-question-check-answer.h5p-joubelui-button:hover {
  background: #ffffff !important;
  color: #4444BB !important;
}
/* =====================================
   GETeet – H5P Scorebar (Drag & Drop)
   ===================================== */

/* Conteneur score */
.h5p-question-scorebar {
  background: #ffffff !important;
  border-top: 1px solid rgba(0,11,180,0.15);
  padding: 10px 12px !important;
}

/* Barre fond */
.h5p-joubelui-score-bar {
  background: rgba(68,68,187,0.12) !important;
  border-radius: 20px !important;
  overflow: hidden;
}

/* Progression */
.h5p-joubelui-score-bar-progress {
  background: linear-gradient(90deg, #4444BB, #000BB4) !important;
  border-radius: 20px !important;
}

/* Score numérique */
.h5p-joubelui-score-number {
  color: #000BB4 !important;
  font-weight: 800 !important;
}

/* Étoile */
.h5p-joubelui-score-bar-star-fill {
  fill: #ffb644 !important;
}

.h5p-joubelui-score-bar-star-border {
  stroke: #4444BB !important;
}

/* Bouton Continue */
.h5p-question-continue,
.h5p-question-continue.h5p-joubelui-button {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
}

/* Hover Continue */
.h5p-question-continue:hover {
  background: #ffffff !important;
  color: #4444BB !important;
}
/* GETeet – Interactive Video: bouton Continue */
button.h5p-question-iv-continue.h5p-joubelui-button,
.h5p-question-iv-continue {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
  padding: 10px 16px !important;
  box-shadow: 0 8px 18px rgba(68, 68, 187, 0.18) !important;
}

/* Hover / focus */
button.h5p-question-iv-continue.h5p-joubelui-button:hover,
button.h5p-question-iv-continue.h5p-joubelui-button:focus {
  background: #ffffff !important;
  color: #4444BB !important;
  border-color: #ffb644 !important;
  outline: none !important;
}
/* =====================================
   GETeet – H5P Fill in the Blanks
   ===================================== */

/* Carte interaction */
.h5p-blanks .h5p-question-content,
.h5p-blanks {
  color: #000BB4 !important;
}

/* Champs texte */
.h5p-blanks .h5p-text-input {
  background: #ffffff !important;
  border: 2px solid rgba(68, 68, 187, 0.55) !important;
  border-radius: 8px !important;
  color: #000BB4 !important;
  font-weight: 700 !important;
  padding: 6px 8px !important;
  transition: all 0.2s ease !important;
}

/* Focus input */
.h5p-blanks .h5p-text-input:focus {
  border-color: #ffb644 !important;
  box-shadow: 0 0 0 3px rgba(255,182,68,0.2) !important;
  outline: none !important;
}

/* Bouton Vérifier */
.h5p-blanks .h5p-question-check-answer.h5p-joubelui-button {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}

/* Hover bouton */
.h5p-blanks .h5p-question-check-answer.h5p-joubelui-button:hover {
  background: #ffffff !important;
  color: #4444BB !important;
}

/* Feedback correct / incorrect */
.h5p-blanks .h5p-correct {
  color: #000BB4 !important;
}

.h5p-blanks .h5p-wrong {
  color: #ffb644 !important;
}
/* =====================================
   GETeet – Interactive Video End Screen
   ===================================== */

/* Conteneur écran de fin */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen {
  font-family: "Poppins", Arial, sans-serif !important;
}

/* Fond principal (remplace #db2020) */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-bubble-endscreen-inner {
  background: #ffffff !important;
  border: 1px solid rgba(0,11,180,0.15) !important;
  border-radius: 13px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important;
}

/* Texte */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-bubble-endscreen,
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen * {
  color: #000BB4 !important;
}

/* Liens / titres (si présents) */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen a {
  color: #4444BB !important;
}

/* Tableau / overview */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen-overview {
  border-top: 1px solid rgba(0,11,180,0.12) !important;
  margin-top: 10px;
  padding-top: 10px;
}

/* Lignes */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen-overview * {
  background: transparent !important;
}

/* Boutons */
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen button,
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen .h5p-joubelui-button {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 800 !important;
}

.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen button:hover,
.h5p-interactive-video.h5p-minimal .h5p-interactive-video-endscreen .h5p-joubelui-button:hover {
  background: #ffffff !important;
  color: #4444BB !important;
}
/* GETeet – Forcer la couleur de l’étoile endscreen */

/* Cas SVG (fill / stroke sur les formes, pas sur le div) */
.h5p-interactive-video.h5p-minimal
.h5p-interactive-video-endscreen-star-symbol svg * {
  fill: #ffb644 !important;
  stroke: #ffb644 !important;
}

/* Cas icône font via ::before */
.h5p-interactive-video.h5p-minimal
.h5p-interactive-video-endscreen-star-symbol,
.h5p-interactive-video.h5p-minimal
.h5p-interactive-video-endscreen-star-symbol::before {
  color: #ffb644 !important;
}
/* =====================================
   GETeet – Interactive Book
   ===================================== */
.h5p-interactive-book-cover-title,
.h5p-interactive-book-cover-title p {
  color: #000BB4 !important;
}
/* =========================================
   H5P QCM – Style GETeet
   ========================================= */

/* 1️⃣ Question (titre) */
.h5p-question-introduction,
#h5p-mcq p {
  color: #000BB4 !important;
  font-weight: 600;
}

/* 2️⃣ Réponses – conteneur */
.h5p-answer {
  border: 1px solid #000BB4 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  transition: all 0.2s ease;
}

/* 3️⃣ Hover réponse */
.h5p-answer:hover {
  background: rgba(0, 11, 180, 0.06) !important;
  border-color: #ffb644 !important;
}

/* 4️⃣ Réponse sélectionnée */
.h5p-answer[aria-checked="true"] {
  background: rgba(255, 182, 68, 0.15) !important;
  border-color: #ffb644 !important;
}

/* 5️⃣ Bouton Vérifier */
.h5p-question-buttons .h5p-question-check-answer {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 600;
}

/* Hover bouton */
.h5p-question-buttons .h5p-question-check-answer:hover {
  background: #ffffff !important;
  color: #4444BB !important;
  border-color: #ffb644 !important;
}

/* 6️⃣ Bouton Suivant (flèche droite) */
.h5p-question-next {
  background: #4444BB !important;
  color: #ffb644 !important;
  border-radius: 50% !important;
}

/* 7️⃣ Feedback correct */
.h5p-question.h5p-question-correct {
  border-left: 4px solid #ffb644 !important;
}

/* 8️⃣ Feedback incorrect */
.h5p-question.h5p-question-wrong {
  border-left: 4px solid #000BB4 !important;
}
/* =========================================
   H5P Branching Scenario – START SCREEN (GETeet)
   Objectif :
   - Fond bleu (#4444BB)
   - Titre orange (#ffb644)
   - Bouton start : OK (GETeet)
   - Ne pas toucher au bouton plein écran
   ========================================= */

/* 1) Fond bleu (calques réels du start screen) */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen,
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-screen-background,
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-screen-banner {
  background: #4444BB !important;
}

/* (sécurisation) l’image de fond reste visible (logo) */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen img.h5p-background-image {
  opacity: 1 !important;
}

/* Titre START SCREEN – orange forcé */
.h5p-branching-scenario 
.h5p-start-screen.h5p-current-screen 
.h5p-branching-scenario-title-text,
.h5p-branching-scenario 
.h5p-start-screen.h5p-current-screen 
.h5p-branching-scenario-title-text p {
  color: #ffb644 !important;
  font-weight: 800 !important;
}

/* (optionnel mais cohérent) sous-titre */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-branching-header .library-subtitle {
  color: #ffb644 !important;
  font-weight: 600 !important;
}

/* 3) Bouton "Lancer la mission" – GETeet */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-start-button {
  background: #4444BB !important;
  color: #ffb644 !important;
  border: 1px solid #ffb644 !important;
  border-radius: 7px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
}

/* Hover */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-start-button:hover {
  background: #ffffff !important;
  color: #4444BB !important;
  border-color: #ffb644 !important;
}

/* 4) Protection : ne pas toucher au bouton plein écran */
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-branching-full-screen,
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-branching-full-screen:hover,
.h5p-branching-scenario .h5p-start-screen.h5p-current-screen .h5p-branching-full-screen:focus {
  background: unset !important;
  border: unset !important;
  box-shadow: unset !important;
  color: unset !important;
}

/* Header Branching Scenario – orange GETeet */

/* Titre */
.h5p-branching-scenario 
.h5p-current-screen 
.h5p-branching-header h1,
.h5p-branching-scenario 
.h5p-current-screen 
.h5p-branching-header h1 p {
  color: #ffb644 !important;
  font-weight: 600 !important; /* semi-gras */
}

/* Sous-titre */
.h5p-branching-scenario 
.h5p-current-screen 
.h5p-branching-header .library-subtitle {
  color: #ffb644 !important;
  font-weight: 500 !important;
}

/* Bouton Poursuivre – encadré orange */
.h5p-branching-scenario 
.h5p-current-screen 
.h5p-nav-button.h5p-proceed-button {

  background: #transparent !important;
  color: #ffb644 !important;
  border: 2px solid #ffb644 !important;
  border-radius: 13px !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
}

/* Hover */
.h5p-branching-scenario 
.h5p-current-screen 
.h5p-nav-button.h5p-proceed-button:hover {

  background: #ffffff !important;
  color: #000bb4 !important;
}
/* =========================================================
   H5P Branching – Question screen (GETeet) – CLEAN
   Objectif design :
   - Carte blanche lisible
   - Question orange GETeet
   - Réponses : fond blanc + bordure orange (premium)
   - Hover : fond très léger orange + flèche bleue
   - Sélection : fond orange + texte bleu
   (Sans toucher aux autres boutons / fullscreen)
   ========================================================= */

/* 1) Titre de question */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-title {
  color: #ffb644 !important;
  font-weight: 700 !important;
}

/* 2) Réponses (boutons) */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative {
  background: #ffffff !important;
  color: #000BB4 !important;
  border: 2px solid #ffb644 !important;
  border-radius: 13px !important;
  padding: 16px 18px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

/* Le texte interne (souvent dans un <p>) */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative p {
  margin: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
}

/* 3) Hover (subtil + premium) */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative:hover {
  background: rgba(255, 182, 68, 0.14) !important; /* orange léger */
  color: #000BB4 !important;
  border-color: #ffb644 !important;
  transform: translateY(-1px) !important;
}

/* 4) Flèche (pseudo-élément ::after) : bleu GETeet */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative::after {
  color: #000BB4 !important;
  opacity: 1 !important;
}

/* 5) Réponse sélectionnée (fond orange + texte bleu) */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative.h5p-selected {
  background: #ffb644 !important;
  color: #000BB4 !important;
  border-color: #ffb644 !important;
}

/* Flèche sur sélectionnée : bleu */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative.h5p-selected::after {
  color: #000BB4 !important;
}

/* 6) Focus clavier (accessibilité) */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question-alternative:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 182, 68, 0.35) !important;
}
/* Cercle blanc */
.h5p-branching-scenario
.h5p-current-screen
.h5p-branching-question {

  background: #ffffff !important;
  border-radius: 16px !important;
}

/* =========================================
   H5P Branching – END SCREEN GETeet
   ========================================= */

/* 1) Fond bleu réel */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen,
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-screen-background,
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-screen-banner {

  background: #4444BB !important;
}

/* 2) Titre orange */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-branching-scenario-title-text,
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-branching-scenario-title-text p {

  color: #ffb644 !important;
  font-weight: 700 !important;
}

/* 3) Points / score (GET-in 6 / 9) */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-result-wrapper {

  color: #ffb644 !important;
  font-weight: 700 !important;
}

/* Si les chiffres sont dans un span interne */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
.h5p-result-wrapper span {

  color: #ffb644 !important;
}

/* =========================================
   H5P Branching – END SCREEN button (Relancer)
   Cible : button.h5p-end-button.transition
   ========================================= */

.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
button.h5p-end-button {
  background: transparent !important;
  color: #ffb644 !important;
  border: 2px solid #ffb644 !important;
  border-radius: 13px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
}

/* Hover */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
button.h5p-end-button:hover {
  background: #ffb644 !important;
  color: #4444BB !important;
}

/* Icône éventuelle (::before) */
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
button.h5p-end-button::before {
  color: #ffb644 !important;
}
.h5p-branching-scenario
.h5p-end-screen.h5p-current-screen
button.h5p-end-button:hover::before {
  color: #4444BB !important;
}