/* =========================================================
 * CAD — Déliroom Drag & Drop : correctifs front
 * Couche CSS enqueue par le plugin → s'applique à TOUTES les
 * quêtes déjà publiées (pas besoin de republier) et SURVIT aux
 * mises à jour de QSM.
 * ========================================================= */

/* -------------------------------------------------------------
 * #1 Numéro de question
 * Le badge décoratif (cadre gravé) doit rester ancré au coin
 * HAUT-GAUCHE de la carte de question, et non centré par-dessus
 * la bannière d'affiche (régression apparue avec le QSM officiel
 * dont le markup place le badge en tête de section centrée).
 * ------------------------------------------------------------- */
.qsm-quiz-container .quiz_section {
  position: relative !important;
}
.qsm-quiz-container .quiz_section > span.mlw_qmn_question_number {
  position: absolute !important;
  top: -14px !important;
  left: -12px !important;
  margin: 0 !important;
  z-index: 5 !important;
}
@media (max-width: 600px) {
  .qsm-quiz-container .quiz_section > span.mlw_qmn_question_number {
    top: -10px !important;
    left: -4px !important;
  }
}

/* -------------------------------------------------------------
 * #2 Barre de boutons Save/Resume : suppression du bouton
 *    « Sauvegarder mes réponses ».
 * La sauvegarde est AUTOMATIQUE (auto-save sur chaque réponse +
 * sauvegarde forcée au passage à l'étape suivante, cf. runtime) :
 * on rétablit le fonctionnement d'origine de l'add-on QSM et on
 * retire le bouton manuel devenu inutile. On ne garde que
 * « Accueil » et « recharger vos réponses ».
 * ------------------------------------------------------------- */
.qsm-save-resume-form-btn .qsm-save-quiz,
.qsm-quiz-container .qsm-save-quiz {
  display: none !important;
}

/* -------------------------------------------------------------
 * #2bis Barre de boutons « Accueil » / « recharger vos réponses » :
 *    FERRÉE À DROITE. Le markup QSM officiel pose la barre
 *    `position: fixed` sans l'ancrer horizontalement (elle se
 *    collait en haut à droite « brut »). On la cale sur le bord
 *    DROIT de la page tant que la fenêtre est ≤ 1024 px ; au-delà,
 *    elle reste alignée sur le bord droit du cadre du CAD (colonne
 *    centrée de 1024 px de large). `max(0px, …)` gère les deux cas
 *    d'un seul tenant : offset positif = collé au cadre, négatif
 *    (petits écrans) = ramené à 0 = collé au bord de la page.
 * ------------------------------------------------------------- */
/* v1.13.0 — Barre d'actions CENTRÉE (style app). Home / Restaurer / Fullscreen
 * regroupés en pastilles rondes, alignés au centre haut de la page.
 * Le lecteur audio de narration reste inline dans la question. */
.btn-group.qsm-save-resume-form-btn {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
  display: inline-flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}

/* -------------------------------------------------------------
 * #2quater (v1.12.0) BOUTONS ICÔNES de la barre Save/Resume.
 * Les libellés texte historiques (« Accueil » / « recharger vos
 * réponses ») sont remplacés par des ICÔNES SVG carrées avec
 * TOOLTIP natif au survol (`title=`) + `aria-label` (a11y). Rendu :
 *   • pastille ronde 36 px, fond couleur d'accent du thème
 *     (`--cad-dnd-theme-accent`, alimentée par dnd-buttons.js) ;
 *   • trait SVG en blanc (currentColor) ;
 *   • hover / focus : léger éclaircissement + ombre.
 * ------------------------------------------------------------- */
.qsm-save-resume-form-btn .cad-icon-btn,
.qsm-save-resume-form-btn a.homeGame,
.qsm-save-resume-form-btn .qsm-resume-quiz,
.qsm-save-resume-form-btn .cad-fs-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--cad-dnd-theme-accent, #a33) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28) !important;
  cursor: pointer !important;
  line-height: 0 !important;
  font-size: 0 !important;
  text-decoration: none !important;
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.qsm-save-resume-form-btn .cad-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: #fff !important;
  stroke: currentColor !important;
}
.qsm-save-resume-form-btn .cad-icon-btn:hover,
.qsm-save-resume-form-btn .cad-icon-btn:focus-visible {
  filter: brightness(1.08) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
  outline: none !important;
}
.qsm-save-resume-form-btn .cad-icon-btn:active {
  transform: scale(0.94) !important;
}

/* -------------------------------------------------------------
 * #2ter Bouton « Indice » : libellé en BLANC par défaut.
 * Le gabarit QSM colore le texte du lien indice avec la teinte
 * claire du thème, qui se confondait avec son propre fond. On
 * force un texte blanc lisible sur le fond coloré du bouton, sur
 * toutes les quêtes déjà publiées (sans republication).
 * ------------------------------------------------------------- */
.qsm-landing-page .mlw_qmn_hint_link,
.qsm-landing-page .qsm_hint.mlw_qmn_hint_link,
.qsm-quiz-container .mlw_qmn_hint_link {
  color: #fff !important;
}

/* -------------------------------------------------------------
 * #3 Texture d'arrière-plan : couverture SANS duplication.
 * v1.13.0 — l'ancien `repeat-y + size: 100% auto` dupliquait la
 * texture verticalement sur les longues pages, brouillait la
 * lecture et cassait l'effet unifié voulu. On passe à `no-repeat`
 * + `cover`, ancré au viewport via `background-attachment: fixed`
 * pour rester net quelle que soit la hauteur du document.
 * Sur iOS Safari (fixed → local), le repli natif reste `cover`
 * plein écran, sans duplication (préférable à l'ancien tuilage).
 * ------------------------------------------------------------- */
html,
body {
  min-height: 100% !important;
}
.qsm-landing-page {
  min-height: 100vh !important;
  height: auto !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  /* Padding-bottom de sécurité pour ne pas coller le contenu à la
   * pastille flottante « Aide » (bas-gauche). */
  padding-bottom: 96px !important;
}

/* Mise en page validée de l'affiche/titre : l'espace de 220 px est
 * réservé uniquement au-dessus du contenu, jamais sous celui-ci. */
article.qsm-landing-page-article {
  background-size: 58% !important;
  padding: 324px 0 0 !important;
}

@media (max-width: 735px) {
  article.qsm-landing-page-article {
    padding: 62% 0 0px 0 !important;
    margin: -15px 0 !important;
    background-position: center top !important;
    background-size: 62% !important;
  }
}

@media (max-width: 600px) {
  article.qsm-landing-page-article {
    padding: 62% 0 0px 0 !important;
    margin: -15px 0 !important;
    background-position: center top !important;
    background-size: 62% !important;
  }
}

/* Mise en page des sections CAD : aucun espace supérieur artificiel.
 * NB : on NE force PAS `display` ici — sinon le `!important` écrase la
 * pagination auto de QSM qui masque les pages non-courantes via
 * `display:none` (la page de fin `.quiz_end` s'affichait alors dès le
 * début de l'aventure, mise en page cassée). QSM gère l'affichage. */
.qsm-quiz-container .quiz_section {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 0 50px 0 !important;
  font-size: 16px !important;
}

/* Alerte D&D : visible même sur les anciennes quêtes dont le CSS embarqué ne
 * stylait que `.qmn_error_message` et pas son conteneur QSM. */
.qsm-quiz-container .dda-dnd-error {
  display: block !important;
  position: relative !important;
  z-index: 1000 !important;
  margin: 0 0 24px !important;
  padding: 10px !important;
  color: #fff !important;
  background: var(--cad-dnd-theme-accent, #a33) !important;
  border: 1px solid var(--cad-dnd-theme-accent, #a33) !important;
  font-size: 17px !important;
  line-height: 22px !important;
}

/* Dédoublonnage des alertes QSM natives : QSM rend DEUX messages identiques
 * (haut + bas de page) au texte générique. On les masque → un message UNIQUE,
 * homogène et adapté à l'étape est injecté par dnd-validation.js (module B),
 * au même endroit et dans le même style que les alertes D&D. */
#mlw_error_message,
#mlw_error_message_bottom,
.qsm-quiz-container #mlw_error_message,
.qsm-quiz-container #mlw_error_message_bottom {
  display: none !important;
}

/* Alerte classique homogène : hérite du style `.dda-dnd-error` ci-dessus.
 * On ajoute un léger espacement bas pour la décoller du champ de réponse. */
.qsm-quiz-container .cad-classic-error {
  margin: 0 0 16px !important;
}

/* -------------------------------------------------------------
 * « Passer cette étape » (anti-frustration) — ex-plugin CAD_deliroom-skip,
 * intégré au moteur D&D. Rendu = COMPLÉMENT de l'alerte : même charte que
 * `.dda-dnd-error` (bande accent, texte blanc lisible), collé JUSTE en dessous
 * de l'alerte (pas de bloc isolé en pied de section). Le bouton est bien
 * contrasté (bouton clair sur la bande accent) et de taille cliquable.
 * ------------------------------------------------------------- */
.qsm-quiz-container .cad-skip-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px 16px !important;
  margin: -24px 0 24px !important;
  max-width: none !important;
  padding: 12px 14px !important;
  color: #fff !important;
  /* Scrim sombre superposé à l'accent thème → contraste AA garanti même quand
   * l'accent est clair (tan médiéval, jaune, etc.), sans dépendre du thème. */
  background:
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38)),
    var(--cad-dnd-theme-accent, #a33) !important;
  border: 1px solid var(--cad-dnd-theme-accent, #a33) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
  text-align: left !important;
  animation: cad-skip-fade 0.35s ease-out both;
}
@keyframes cad-skip-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qsm-quiz-container .cad-skip-hint {
  flex: 1 1 220px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  opacity: 1 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.qsm-quiz-container .cad-skip-btn {
  flex: 0 0 auto !important;
  display: inline-block !important;
  cursor: pointer !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #1a1a1a !important;
  background: #fff !important;
  white-space: nowrap !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
  -webkit-appearance: none;
  appearance: none;
}
.qsm-quiz-container .cad-skip-btn:hover,
.qsm-quiz-container .cad-skip-btn:focus-visible {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #1a1a1a !important;
  outline: none !important;
}
.qsm-quiz-container .cad-skip-btn:active {
  transform: scale(0.97);
}
/* État « armé » (2e clic pour confirmer) : bouton fantôme sur la bande.
 * Correctif régression : le :hover générique ci-dessus repassait le fond en
 * blanc quasi-opaque tout en gardant `color:#fff` → texte blanc sur blanc.
 * On rétablit ici un hover contrasté (halo blanc léger, texte blanc). */
.qsm-quiz-container .cad-skip-btn--armed {
  background: transparent !important;
  color: #fff !important;
  border-color: #fff !important;
}
.qsm-quiz-container .cad-skip-btn--armed:hover,
.qsm-quiz-container .cad-skip-btn--armed:focus-visible {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border-color: #fff !important;
}





/* -------------------------------------------------------------
 * #4 Fil d'Ariane (barre de progression) : pleine largeur +
 *    centrage. Le sélecteur du gabarit QSM historique ciblait un
 *    id (`#qsm-progress-bar`) alors que le markup officiel rend
 *    une CLASSE (`.qsm-progress-bar`) → la barre restait à sa
 *    largeur fixe (300px), calée à gauche de la pagination au
 *    lieu de s'étirer et d'être centrée dans la page.
 * La COULEUR de remplissage (bleu `#3498db` codé en dur dans le
 * SVG de QSM) est reprise sur le thème par JS (cf. dnd-buttons.js).
 * ------------------------------------------------------------- */
 .qmn_pagination {
   justify-content: center !important;
   /* Fil d'Ariane trop collé au contenu/pied : on décolle la barre de
    * pagination d'au moins 15px (marge haute de sécurité). */
   margin-top: 24px !important;
 }
.qmn_pagination .qsm-progress-bar,
.qsm-quiz-container .qsm-progress-bar {
  position: relative !important;
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 18px 12px 0 !important;
  padding: 0 !important;
}

/* Le pourcentage appartient au fil d'Ariane : même couleur que
 * son trait et positionné immédiatement AU-DESSUS, aligné à droite.
 * La variable est alimentée par dnd-buttons.js depuis le thème. */
.qsm-progress-bar .progressbar-text,
#qsm-progress-bar .progressbar-text {
  color: var(--cad-dnd-theme-accent, currentColor) !important;
  position: absolute !important;
  top: -18px !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: none !important;
}

/* -------------------------------------------------------------
 * #5 Composant D&D « image à trou » (fill_gap) : responsive.
 * Sur les quêtes déjà publiées (CSS de skin figé à la publica-
 * tion), la scène et la grille pouvaient garder une largeur en
 * pixels → débordement / désalignement sur smartphone. On force
 * ici le comportement fluide moderne (largeur relative + ratio
 * calé sur le nombre de colonnes/lignes exposé en variables CSS
 * par le markup) pour TOUTES les quêtes, sans republication.
 * ------------------------------------------------------------- */
.dda-skin .fg-wrap--puzzle {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.dda-skin .fg-wrap--puzzle .fg-stage {
  width: min(100%, 440px) !important;
  max-width: 100% !important;
  aspect-ratio: var(--fg-cols, 2) / var(--fg-rows, 2) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}
.dda-skin .fg-wrap--puzzle ul.fg-grid,
.dda-skin .fg-wrap--puzzle ul.fg-bg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}
.dda-skin .fg-viv {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  .dda-skin .fg-wrap--puzzle .fg-stage {
    width: 100% !important;
  }
  .dda-skin .fg-viv li {
    width: 56px !important;
    height: 56px !important;
  }
}

/* -------------------------------------------------------------
 * #N Grille à permutation (carré magique / puzzle image)
 * Moteur SWAP : la pièce en cours de déplacement reste à sa place
 * (slot réservé, estompé) et la case cible est surlignée. Aucun
 * reflow pendant le drag → plus d'effet stroboscopique ni de
 * décalage en cascade des cases voisines. S'applique à toutes les
 * quêtes déjà publiées (couche enqueue, pas de republication).
 * ------------------------------------------------------------- */
.dda-skin ul.grid li.dda-swap-source {
  opacity: 0.28 !important;
}
.dda-skin ul.grid li.dda-swap-target {
  outline: 3px solid rgba(255, 255, 255, 0.92);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 0 22px rgba(0, 0, 0, 0.22);
  filter: brightness(1.07);
}

/* -------------------------------------------------------------
 * #Z Dernier écran narratif — anti-débordement + submit visible.
 *    Régression observée : sur la dernière page (« Le Trésor
 *    Révélé »), le texte est tronqué par la scrollbar QSM et la
 *    flèche de pagination « > » chevauche la narration, laissant
 *    croire à un submit inactif. Correctif CSS-only (pas de
 *    republication d'aventure requise).
 * ------------------------------------------------------------- */
/* 1. Padding droit sur la dernière section narrative pour éviter
 *    que la scrollbar interne mange les mots (Chrome/Safari macOS
 *    affichent une barre de 15-16 px selon l'OS). */
.qsm-quiz-container .quiz_section:last-of-type {
  padding-right: 22px !important;
  scrollbar-gutter: stable both-edges;
}
/* 2. Neutralise la flèche pagination « suivante » orpheline sur la
 *    DERNIÈRE section (aucune page suivante à afficher) — elle est
 *    remplacée par le bouton Terminer/Submit natif QSM. */
.qsm-quiz-container .quiz_section:last-of-type .mlw_next,
.qsm-quiz-container .quiz_section:last-of-type .qsm-next,
.qsm-quiz-container .quiz_section:last-of-type .qsm-next-btn,
.qsm-quiz-container .quiz_section:last-of-type .qsm-btn-next {
  display: none !important;
}
/* 3. Force le submit natif QSM à rester VISIBLE et ACTIF sur la
 *    dernière page : QSM masque parfois `.qsm-submit-btn` via un
 *    `style="display:none"` inline lorsque la validation d'une
 *    étape précédente a échoué et n'a jamais été purgée. On force
 *    l'affichage, la couleur d'accent du thème, et un tap target
 *    ≥ 44 px pour mobile. */
.qsm-quiz-container .quiz_section:last-of-type input.qsm-submit-btn,
.qsm-quiz-container .quiz_section:last-of-type button.qsm-submit-btn,
.qsm-quiz-container input.qsm-submit-btn,
.qsm-quiz-container button.qsm-submit-btn {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  min-height: 44px !important;
  padding: 12px 28px !important;
  background: var(--cad-dnd-theme-accent, #a33) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin: 18px auto !important;
}
.qsm-quiz-container input.qsm-submit-btn:hover,
.qsm-quiz-container button.qsm-submit-btn:hover {
  filter: brightness(1.08);
}