/* REMSIM — panneau de quiz latéral (assets/js/quiz.js).
   Neutre, volontairement pas aux couleurs d'un fabricant : c'est une
   surcouche pédagogique REMSIM, pas un élément du portail reproduit.

   `position: fixed` sur le panneau ET sur son bouton : la vue du portail
   n'est jamais rétrécie ni décalée quand le quiz s'ouvre — les captures de
   rapports sont calibrées en pixels, une colonne plus étroite les
   déformerait.

   Deux modes, selon la largeur de la fenêtre :
   - **côte à côte** (fenêtre large) : à l'ouverture, #root reçoit une marge
     droite de la largeur du panneau. Le portail, centré par sa propre règle
     `margin: 0 auto`, se recentre donc dans l'espace restant : il GLISSE
     VERS LA GAUCHE, mangeant la bande grise de gauche, et libère à droite
     exactement la place du quiz. Rien n'est recouvert et le portail garde
     sa largeur (les bandes grises se réduisent, pas le cas) ;
   - **superposé** (fenêtre étroite) : sous --qz-case-w + --qz-w, glisser ne
     suffirait plus et le portail devrait rétrécir — ce qu'on refuse, les
     captures de rapports étant calibrées en pixels. Le panneau repasse
     alors par-dessus, comme un tiroir.

   --qz-case-w doit valoir la largeur du conteneur du vendeur affiché
   (.mc-shell = 1100px chez Medtronic). Un vendeur plus large n'a qu'à
   redéfinir cette variable. */

:root { --qz-case-w: 1100px; --qz-w: 380px; }

/* Fenêtre trop étroite pour 380 px sans rogner le portail : le panneau se
   resserre à 300 px plutôt que de repasser par-dessus le cas. Mieux vaut un
   quiz un peu serré qu'un cas recouvert.
   Rappel utile : Chrome mémorise le zoom PAR ORIGINE — le même écran peut
   être au-dessus du seuil sur localhost et en dessous sur le site déployé,
   ce qui donne l'impression d'un déploiement manquant. */
@media (max-width: 1499px) { :root { --qz-w: 300px; } }
@media (max-width: 1399px) { :root { --qz-w: 260px; } }  /* 1366 px = portable courant */

/* Le portail glisse au lieu d'être recouvert. Seuil le plus bas possible :
   il doit rester --qz-case-w une fois la place du quiz retirée (1360 - 260
   = 1100). En dessous, glisser rognerait le cas — on repasse en tiroir. */
@media (min-width: 1360px) {
  #root, #simbanner { transition: margin-right .18s ease-out; }
  body.qz-open #root,
  body.qz-open #simbanner,
  body.qz-open #simfoot { margin-right: var(--qz-w); }

  /* Les modales (détail d'un épisode) sont en `position: fixed; inset: 0` :
     elles couvrent le viewport ENTIER et ignorent donc la marge posée sur
     #root. La modale se centrait sur toute la largeur et son bouton ✕, en
     haut à droite, passait sous le panneau — plus moyen de fermer
     l'épisode. On borne l'overlay à la zone visible : la modale s'y
     recentre et le ✕ reste à sa place, celle du portail réel.
     Un vendeur qui reçoit un quiz ajoute sa classe d'overlay ici. */
  body.qz-open .mc-modal-overlay,
  body.qz-open .ab-modal-overlay,
  body.qz-open .bo-egm-overlay { right: var(--qz-w); }
}

.qz-toggle {
  position: fixed;
  top: 96px;
  right: 0;
  z-index: 1200;
  transform: translateX(0);
  border: 1px solid #c9ccd6;
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: #fff;
  color: #1f2430;
  font: inherit;
  font-size: 12.5px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .12);
}
.qz-toggle:hover { background: #f4f5f8; }
/* Ouvert, le bouton flottant n'a plus lieu d'être : il tomberait pile sur la
   frontière portail/panneau, donc à cheval sur le cas. Le ✕ de l'en-tête
   referme, et le bouton réapparaît aussitôt. */
.qz-toggle.qz-on { display: none; }

.qz-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1190;
  width: var(--qz-w);
  max-width: 92vw;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  border-left: 1px solid #c9ccd6;
  box-shadow: -4px 0 18px rgba(0, 0, 0, .16);
  transform: translateX(100%);
  transition: transform .18s ease-out;
}
.qz-panel.qz-on { transform: translateX(0); }
.qz-toggle { transition: right .18s ease-out; }

.qz-head {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px;
  background: #1f2430; color: #fff;
}
.qz-title { font-weight: 700; font-size: 14px; }
.qz-close {
  border: none; background: transparent; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.qz-close:hover { color: #ffd9d9; }

.qz-body { padding: 6px 16px 40px; }

.qz-q { padding: 16px 0; border-bottom: 1px solid #e6e8ee; }
.qz-q:last-child { border-bottom: none; }
.qz-q-head { display: flex; gap: 9px; align-items: baseline; }
.qz-q-num {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  background: #1f2430; color: #fff; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.qz-q-text { font-size: 13.5px; font-weight: 600; color: #1f2430; }
.qz-multi { font-size: 11.5px; color: #6a7080; margin: 4px 0 0 29px; font-style: italic; }

.qz-answers { margin: 10px 0 0 0; display: flex; flex-direction: column; gap: 6px; }
.qz-a {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 9px; border: 1px solid #dcdfe7; border-radius: 4px;
  font-size: 12.5px; line-height: 1.35; cursor: pointer; background: #fff;
}
.qz-a:hover { background: #f6f7fa; }
.qz-a input { margin: 2px 0 0 0; flex: 0 0 auto; }
.qz-a-text { color: #2b3040; }
/* Vert/rouge doublés d'une bordure épaisse et d'un préfixe : la couleur
   seule ne suffit pas (daltonisme). */
.qz-a.qz-ok { background: #eaf7ee; border-color: #2e7d43; border-left-width: 4px; }
.qz-a.qz-ok .qz-a-text::before { content: '✓ '; font-weight: 700; color: #2e7d43; }
.qz-a.qz-ko { background: #fdecec; border-color: #b3261e; border-left-width: 4px; }
.qz-a.qz-ko .qz-a-text::before { content: '✕ '; font-weight: 700; color: #b3261e; }

.qz-actions { margin-top: 12px; display: flex; gap: 8px; }

/* Les boutons du quiz étaient plats et se confondaient avec les cases à
   cocher. Trois niveaux, qui se distinguent au premier coup d'œil :
     · plein sombre .... l'action principale (Valider) ;
     · contour ......... l'action secondaire (Recommencer) ;
     · plein orange .... les deux boutons qui font QUITTER le quiz pour
                         aller dans le dossier. */
.qz-btn {
  border: 1px solid #1f2430; background: #1f2430; color: #fff;
  border-radius: 4px; padding: 7px 16px; font: inherit; font-size: 12.5px;
  font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 3px rgba(31, 36, 48, .30);
}
.qz-btn:hover { background: #333a4a; box-shadow: 0 2px 6px rgba(31, 36, 48, .38); }
.qz-btn:active { transform: translateY(1px); box-shadow: none; }

.qz-btn-flat { background: #fff; color: #1f2430; box-shadow: none; }
.qz-btn-flat:hover { background: #f1f2f6; box-shadow: 0 1px 3px rgba(31, 36, 48, .20); }

/* « Voir la preuve » (après validation) et « Aller voir » (avant) portent
   l'orange de l'encadré qu'ils font apparaître dans le dossier (.qz-spot
   plus bas) : le bouton et le surlignage sont la même chose, et ça se voit.
   Pleine largeur, alignés à gauche — leurs libellés sont des phrases. */
.qz-btn-reveal,
.qz-btn-goto {
  display: block; width: 100%; text-align: left;
  background: #d9530b; border-color: #b04106; color: #fff;
  box-shadow: 0 1px 4px rgba(217, 83, 11, .40);
}
.qz-btn-reveal:hover,
.qz-btn-goto:hover {
  background: #ef6a1d; border-color: #c74a06; color: #fff;
  box-shadow: 0 2px 7px rgba(217, 83, 11, .50);
}
.qz-btn-reveal::before,
.qz-btn-goto::before { content: '↗ '; }
.qz-btn-reveal { margin-top: 11px; }
/* Posé AVANT la barre Valider / Recommencer, donc avec sa propre marge. */
.qz-btn-goto { margin: 4px 0 0; }

/* Bloc de fin de quiz → synthèse pédagogique (quiz.js, `debriefLink`).
   Séparé des questions par un filet : ce n'est pas une question de plus,
   c'est la sortie. */
.qz-outro {
  margin: 6px 0 4px; padding: 14px 12px 12px;
  border-top: 2px solid #1f2430; background: #f6f7fa; border-radius: 0 0 4px 4px;
}
.qz-outro-t { margin-bottom: 10px; line-height: 1.5; }
.qz-btn-outro { display: block; width: 100%; padding: 8px 12px; font-weight: 700; font-size: 12.5px; }
.qz-btn-outro::before { content: '📘 '; }

/* Encadré posé sur la page du rapport pour montrer d'où vient la réponse.
   Ancré dans .mc-pdf-page-stage, qui est `position: relative` — c'est la
   même propriété dont dépend déjà la pagination de la visionneuse.
   Le clignotement attire l'œil sans masquer le texte encadré ; il s'efface
   tout seul au bout de quelques secondes. */
.qz-spot {
  position: absolute;
  border: 3px solid #e8590c;
  border-radius: 3px;
  background: rgba(232, 89, 12, .10);
  pointer-events: none;
  z-index: 5;
  animation: qz-flash 900ms ease-in-out 5;
}
@keyframes qz-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}
/* Un clignotement soutenu est à proscrire quand l'utilisateur a demandé de
   limiter les animations : l'encadré reste, simplement fixe. */
@media (prefers-reduced-motion: reduce) {
  .qz-spot { animation: none; }
}

.qz-btn-image { display: block; margin-top: 9px; background: #fff; color: #1f2430; border-color: #1f2430; }
.qz-btn-image:hover { background: #f1f2f6; }
.qz-btn-image::before { content: '🖼 '; }

/* Variante de l'encadré pour une cible en HTML (ligne de tableau d'un
   sous-rapport) : on souligne l'élément lui-même, sans calcul de position.
   `outline` plutôt que `border` : n'occupe aucune place, donc ne décale pas
   la ligne ni le tableau autour. */
.qz-spot-el {
  outline: 3px solid #e8590c;
  outline-offset: 2px;
  background: rgba(232, 89, 12, .10) !important;
  animation: qz-flash 900ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) { .qz-spot-el { animation: none; } }

/* ---------------- image en plein écran ---------------- */
.qz-lightbox {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(10, 12, 20, .82);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.qz-lightbox-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; gap: 10px; }
.qz-lightbox-fig img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  background: #fff; border-radius: 3px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.qz-lightbox-fig figcaption { color: #f2f3f6; font-size: 13px; line-height: 1.45; max-width: 900px; }
.qz-lightbox-link {
  align-self: flex-start; display: inline-block; margin-top: 2px;
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  color: #1f2430; background: #fff; text-decoration: none;
}
.qz-lightbox-link:hover { background: #f1f2f6; }
.qz-lightbox-link::before { content: '↗ '; }
.qz-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  border: none; background: transparent; color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 10px;
}
.qz-lightbox-close:hover { color: #ffd9d9; }

.qz-verdict { margin-top: 9px; font-size: 12.5px; padding: 7px 9px; border-radius: 4px; }
.qz-good { background: #eaf7ee; color: #1e5c31; }
.qz-bad { background: #fdecec; color: #8c1d17; }
.qz-todo { background: #fff6e5; color: #7a5300; }
.qz-hint { margin-top: 6px; font-size: 12px; color: #3d4353; }

/* Sous 980 px le panneau couvrirait presque tout : il passe en pleine
   largeur. */
@media (max-width: 980px) {
  .qz-panel { width: 100vw; max-width: 100vw; }
}

/* ---------------- téléphone : panneau en bas d'écran ----------------
   quiz.js pose .qz-sheet / .qz-sheet-toggle / body.qz-mobile sous 760 px.
   Le tiroir plein écran obligeait à fermer le quiz pour regarder le cas,
   puis à le rouvrir, à chaque question. Ici il n'occupe que 40 % du bas de
   l'écran : le cas reste lisible au-dessus, une question à la fois, et la
   question OU la réponse (data-view) — jamais les deux empilées. */
.qz-m-only, .qz-m-head { display: none; }

.qz-panel.qz-sheet {
  top: auto; bottom: 0; left: 0; right: 0;
  width: 100vw; max-width: 100vw;
  height: 40vh; height: 40dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  border-left: none; border-top: 1px solid #c9ccd6;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
  transform: translateY(100%);
}
.qz-panel.qz-sheet.qz-on { transform: translateY(0); }
.qz-sheet .qz-head { position: static; flex: 0 0 auto; padding: 5px 8px 5px 12px; gap: 6px; border-radius: 10px 10px 0 0; }
.qz-sheet .qz-title { font-size: 12px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-sheet .qz-m-head { display: inline-flex; align-items: center; gap: 2px; }
.qz-sheet .qz-count { font-size: 12px; font-weight: 700; min-width: 44px; text-align: center; }
.qz-sheet .qz-close { font-size: 18px; padding: 4px 9px; }
.qz-sheet .qz-close:disabled { opacity: .3; cursor: default; }
.qz-sheet .qz-body { flex: 1 1 auto; overflow-y: auto; padding: 0 12px 14px; -webkit-overflow-scrolling: touch; }

/* une question à la fois */
.qz-sheet .qz-q { display: none; padding: 9px 0 0; border-bottom: none; }
.qz-sheet .qz-q.qz-cur { display: block; }
.qz-sheet .qz-q-head { gap: 7px; }
.qz-sheet .qz-q-num { width: 17px; height: 17px; font-size: 10px; }
.qz-sheet .qz-q-text { font-size: 12px; line-height: 1.35; }
.qz-sheet .qz-multi { font-size: 10.5px; margin-left: 24px; }
.qz-sheet .qz-answers { margin-top: 7px; gap: 4px; }
.qz-sheet .qz-a { font-size: 11.5px; padding: 5px 7px; line-height: 1.3; }
/* Valider / Suivante restent collés au bas du panneau : sans cela, sur une
   question à quatre propositions, le bouton tombait sous le bord. */
.qz-sheet .qz-actions {
  margin-top: 8px; flex-wrap: wrap;
  position: sticky; bottom: -14px; z-index: 1;
  background: #fff; padding: 7px 0 14px; margin-bottom: -14px;
  box-shadow: 0 -6px 8px -6px rgba(0, 0, 0, .15);
}
.qz-sheet .qz-btn { font-size: 11.5px; padding: 6px 12px; }
.qz-sheet .qz-btn-reveal, .qz-sheet .qz-btn-goto { margin-top: 7px; }
.qz-sheet .qz-verdict { margin-top: 0; font-size: 11.5px; padding: 6px 8px; }
.qz-sheet .qz-hint { font-size: 11.5px; line-height: 1.4; }

/* question OU réponse */
.qz-sheet .qz-m-only { display: inline-block; }
.qz-sheet .qz-m-nav { display: flex; }
.qz-sheet .qz-q:not([data-graded]) .qz-to-a,
.qz-sheet .qz-q:not([data-graded]) .qz-m-nav { display: none; }
.qz-sheet .qz-q[data-view="a"] .qz-q-head,
.qz-sheet .qz-q[data-view="a"] .qz-multi,
.qz-sheet .qz-q[data-view="a"] .qz-answers,
.qz-sheet .qz-q[data-view="a"] .qz-btn-goto,
.qz-sheet .qz-q[data-view="a"] .qz-actions:not(.qz-m-nav) { display: none; }
.qz-sheet .qz-q[data-view="q"][data-graded] .qz-verdict,
.qz-sheet .qz-q[data-view="q"] .qz-m-nav { display: none !important; }

/* fermé : une barre en bas, qui rebondit une fois à l'arrivée sur le cas */
.qz-toggle.qz-sheet-toggle {
  top: auto; bottom: 10px; right: 10px;
  border: 1px solid #1f2430; border-radius: 18px;
  background: #1f2430; color: #fff; font-weight: 600; font-size: 12.5px;
  padding: 8px 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .28);
}
.qz-toggle.qz-sheet-toggle:hover { background: #333a4a; }
.qz-toggle.qz-bump { animation: qz-bump 1.1s ease-out 1; }
@keyframes qz-bump {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-14px); }
  40% { transform: translateY(0); }
  55% { transform: translateY(-6px); }
  70% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .qz-toggle.qz-bump { animation: none; } }

/* le bas du cas reste atteignable au-dessus du panneau */
body.qz-mobile { padding-bottom: 56px; }
body.qz-mobile.qz-open { padding-bottom: 40vh; padding-bottom: 40dvh; }

@media print { .qz-panel, .qz-toggle { display: none; } }