/* REMSIM — habillage Abbott Merlin.net™ Patient Care Network.
   Relevé sur le portail réel (session du 07/08/2026) : bandeau supérieur
   bleu marine très sombre, barre d'onglets principale bleu moyen avec
   onglet actif en cyan d'accent, barre de sous-onglets plus claire, police
   système sans-serif (Angular Material — pas de police custom identifiée),
   panneau latéral blanc à en-têtes de section en gras, visionneuse PDF au
   chrome gris foncé (PDF.js standard) pour les rapports FastPath/Test
   Results/détail d'épisode. */

.ab-bg { background: #f2f3f5; }

.ab-shell {
  font: 13px/1.4 Arial, "Segoe UI", Helvetica, sans-serif;
  color: #222;
  max-width: 1180px; margin: 0 auto;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0,0,0,.06);
}

/* ---------------- bandeau supérieur ---------------- */
.ab-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: #fff; color: #222;
  border-bottom: 1px solid #dde2e8;
}
.ab-topbar-logo {
  display: flex; align-items: center; font-size: 19px; font-weight: 800;
}
.ab-topbar-logo-img { height: 20px; width: auto; display: block; }
.ab-topbar-right { text-align: right; font-size: 11.5px; color: #556; }
.ab-topbar-right div { margin: 1px 0; }
.ab-topbar-right b { color: #222; font-weight: 600; }
.ab-topbar-brand { font-size: 12.5px; color: #0a1f33; font-weight: 600; margin-top: 2px; }

/* ---------------- barre d'onglets principale ---------------- */
.ab-navbar { display: flex; background: #0e3a5f; }
.ab-navbar a, .ab-navbar span.ab-nav-item {
  padding: 11px 20px; font-size: 13.5px; font-weight: 600; color: #cfe3f5;
  text-decoration: none; cursor: default;
}
.ab-navbar a.on { background: #00a9ce; color: #fff; }

/* ---------------- barre de sous-onglets (dans une transmission) ---------------- */
.ab-subtabbar { display: flex; background: #eef2f6; border-bottom: 1px solid #d5dbe2; }
.ab-subtabbar a, .ab-subtabbar span.ab-subtab-item {
  padding: 10px 18px; font-size: 12.5px; font-weight: 600; color: #333;
  text-decoration: none; cursor: default;
}
.ab-subtabbar a.on { background: #00a9ce; color: #fff; }

/* ---------------- fil d'Ariane / fiche patient ---------------- */
.ab-patienthead { padding: 14px 20px 0; }
.ab-patienthead h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; color: #222; }
.ab-crumb { font-size: 12px; color: #555; }
.ab-crumb a { color: #0072a3; text-decoration: none; }
.ab-crumb a:hover { text-decoration: underline; }
.ab-patientmeta { font-size: 12.5px; color: #444; margin: 6px 0 12px; }
.ab-patientmeta div { margin: 1px 0; }

/* ---------------- corps : panneau latéral + contenu ---------------- */
.ab-body { display: flex; border-top: 1px solid #e2e5e9; }
.ab-sidebar { flex: 0 0 190px; padding: 16px 0; border-right: 1px solid #e2e5e9; }
.ab-sb-section { font-size: 12px; font-weight: 700; color: #222; padding: 10px 16px 4px; }
.ab-sb-section:first-child { padding-top: 0; }
.ab-sidebar a, .ab-sidebar span.ab-sb-off {
  display: block; padding: 5px 16px 5px 22px; font-size: 12.5px; text-decoration: none;
}
.ab-sidebar a { color: #0072a3; }
.ab-sidebar a.on { background: #e3f3fa; color: #005e82; font-weight: 700; }
.ab-sidebar a:hover { background: #f0f6fa; }
.ab-sidebar span.ab-sb-off { color: #aab0b8; cursor: default; }

.ab-main { flex: 1 1 auto; min-width: 0; padding: 16px 22px 24px; }

.ab-txhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 6px; }
.ab-txhead h2 { font-size: 15px; font-weight: 400; color: #444; margin: 0; }
.ab-txlinks { font-size: 12.5px; display: flex; gap: 16px; }
.ab-txlinks a, .ab-txlinks span.ab-link-off { text-decoration: none; }
.ab-txlinks a { color: #0072a3; }
.ab-txlinks span.ab-link-off { color: #aab0b8; cursor: default; }

/* ---------------- lien générique ---------------- */
a.ab-link { color: #0072a3; text-decoration: none; cursor: pointer; }
a.ab-link:hover { text-decoration: underline; }

/* ---------------- visionneuse PDF (FastPath / Test Results / détail épisode) ---------------- */
.ab-pdf-viewer { border: 1px solid #cfd3d8; background: #fff; }
.ab-pdf-toolbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  background: #323639; color: #e8eaed; font-size: 12px;
}
.ab-pdf-nav-btn {
  border: none; background: none; color: #e8eaed; font-size: 15px; cursor: pointer;
  padding: 2px 6px; border-radius: 3px; line-height: 1;
}
.ab-pdf-nav-btn:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.ab-pdf-nav-btn:disabled { color: #6f7377; cursor: default; }
.ab-pdf-page-label { min-width: 60px; text-align: center; }
.ab-pdf-zoom { margin-left: auto; color: #cfd3d8; }
/* Défilement vertical continu (comme PDF.js réel) : colonne, pas centrage
   ligne. align-items: center (pas le stretch par défaut d'un flex column,
   qui étendrait chaque <img> à la largeur du conteneur dans le mauvais
   axe et déformerait la page — même bug déjà documenté pour Medtronic
   .mc-pdf-page-stage, reproduit une 1re fois ici avant ce passage en
   colonne). */
.ab-pdf-stage { max-height: 74vh; overflow-y: auto; background: #525659; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; scroll-behavior: smooth; }
.ab-pdf-img { width: 100%; max-width: 800px; height: auto; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.35); flex: 0 0 auto; }

/* ---------------- Episodes and EGMs (tableau) ---------------- */
.ab-ep-toolrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ab-ep-toolrow select, .ab-ep-toolrow input {
  font: inherit; font-size: 12.5px; padding: 6px 10px; border: 1px solid #c6c8cf; border-radius: 3px; color: #333;
}
.ab-ep-toolrow .ab-ep-search { flex: 0 0 220px; }
.ab-ep-toolrow .ab-view-off { margin-left: auto; color: #aab0b8; font-size: 12.5px; }

table.ab-tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.ab-tbl th { text-align: left; font-weight: 700; padding: 8px 10px 8px 0; border-bottom: 2px solid #333; color: #222; }
table.ab-tbl td { padding: 9px 10px 9px 0; border-bottom: 1px solid #e6e8eb; vertical-align: middle; }
.ab-egm-ico { width: 26px; height: 18px; color: #0072a3; }

/* ---------------- modale détail d'épisode ---------------- */
.ab-modal-overlay { position: fixed; inset: 0; background: rgba(10,20,30,.5); display: flex; align-items: flex-start; justify-content: center; z-index: 90; padding: 30px 12px; overflow: auto; }
.ab-modal { background: #fff; max-width: 900px; width: 100%; box-shadow: 0 8px 30px rgba(0,0,0,.35); font: 13px/1.4 Arial, "Segoe UI", Helvetica, sans-serif; }
.ab-modal-head { display: flex; align-items: center; justify-content: space-between; background: #0a1f33; color: #fff; padding: 10px 16px; font-weight: 700; font-size: 13px; }
.ab-modal-head button { border: none; background: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .85; }
.ab-modal-head button:hover { opacity: 1; }
.ab-modal-body { padding: 14px 16px 18px; }
.ab-modal-note { font-size: 12.5px; color: #555; background: #f7f8f9; border: 1px solid #e2e5e9; padding: 14px; }

/* ---------------- Parameter (tableau texte) ---------------- */
.ab-param-h { font-size: 13px; font-weight: 700; color: #222; border-bottom: 2px solid #0072a3; padding-bottom: 4px; margin: 20px 0 8px; }
.ab-param-h:first-child { margin-top: 0; }
table.ab-kv { border-collapse: collapse; font-size: 12.5px; margin-bottom: 6px; }
table.ab-kv td { padding: 3px 22px 3px 0; vertical-align: top; }
table.ab-kv td:first-child { color: #444; }
table.ab-kv td:last-child { font-weight: 600; color: #111; }
.ab-param-note { font-size: 11.5px; color: #777; margin-top: 10px; }

/* ---------------- lien de retour au cas ---------------- */
.ab-caselink { padding: 10px 22px; font-size: 12px; background: #f2f2f4; border-top: 1px solid #ccc; }
.ab-caselink a { color: #0072a3; text-decoration: none; }


/* ================= interrogation en face-à-face =================
   Le seul écran du simulateur qui ne reproduise PAS le portail : il montre
   le programmateur et les ECG du jour, c'est-à-dire ce qu'on ne voit qu'en
   faisant venir le patient. L'habillage le dit — fond ardoise, cadre de
   fenêtre, rien du bleu Merlin.net. Voir renderInterrogation() dans
   assets/js/render-abbott.js ; le pendant BIOTRONIK est dans
   biotronik.css, avec le préfixe bt-. */

/* Bouton de la barre de sous-onglets, poussé tout à droite. Il doit se
   VOIR : c'est la seule commande de la page qui ne vienne pas du portail,
   et c'est le pas que le cas demande de franchir. Le cyan (#00a9ce) est
   déjà la couleur d'accent de Merlin.net — un bouton cyan se fondrait dans
   la barre. D'où l'indigo, absent de la palette du portail. Ce n'est
   volontairement ni l'ambre ni le rouge : ce n'est pas une alerte, c'est
   une action. */
/* Bleu du logo Abbott, relevé au pixel sur assets/img/abbott-logo.png :
   rgb(21, 155, 215) = #159bd7. Le cyan de la barre d'onglets du portail
   (#00a9ce) en est proche mais plus vert ; le dégradé descend vers #0b6fa4
   pour que le bouton se détache quand même du bandeau.

   Sélecteurs préfixés par `.ab-subtabbar` : la règle générique
   `.ab-subtabbar a` de la barre est plus spécifique qu'une simple classe et
   reprenait sinon la couleur (#333), le rembourrage et surtout
   `cursor: default` — le seul bouton cliquable de la barre n'avait alors pas
   l'air cliquable. */
.ab-subtabbar a.ab-interro-toplink {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 3px 10px 3px auto; padding: 7px 16px 8px;
  text-decoration: none; color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 700; white-space: nowrap; letter-spacing: .3px;
  background: linear-gradient(#159bd7, #0b6fa4);
  border: 1px solid #0a5f8c; border-radius: 5px;
  box-shadow: 0 2px 7px rgba(11, 111, 164, .45);
}
.ab-subtabbar a.ab-interro-toplink:hover {
  background: linear-gradient(#2eb0e8, #0d81bd); text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 11px rgba(11, 111, 164, .60);
}
/* Écran ouvert : le bouton s'enfonce au lieu de s'éteindre — il reste le
   repère de l'endroit où l'on se trouve. */
.ab-subtabbar a.ab-interro-toplink-on {
  background: linear-gradient(#0a6392, #084f75); box-shadow: none;
}
.ab-subtabbar a.ab-interro-toplink .ab-interro-ico { width: 16px; height: 16px; flex: 0 0 16px; }

/* Boutons « aller voir » / « voir la preuve » du quiz — repeints en bleu
   Abbott sur ce vendeur SEULEMENT (quiz.css est commun aux cinq portails).
   Ces boutons sont le fil conducteur du cas : la moitié des questions
   demandent d'aller regarder une image avant de répondre, et le contour
   pointillé gris d'origine passait inaperçu à côté des réponses. */
body.ab-bg .qz-btn-goto,
body.ab-bg .qz-btn-reveal,
body.ab-bg .qz-btn-image,
body.ab-bg .qz-btn-outro {
  background: linear-gradient(#159bd7, #0b6fa4); color: #fff;
  border: 1px solid #0a5f8c; border-radius: 5px;
  padding: 7px 14px; font-weight: 700; font-size: 12px;
  box-shadow: 0 2px 6px rgba(11, 111, 164, .35);
}
body.ab-bg .qz-btn-goto:hover,
body.ab-bg .qz-btn-reveal:hover,
body.ab-bg .qz-btn-image:hover,
body.ab-bg .qz-btn-outro:hover {
  background: linear-gradient(#2eb0e8, #0d81bd); border-color: #0a5f8c;
  box-shadow: 0 3px 10px rgba(11, 111, 164, .50);
}
body.ab-bg .qz-outro { border-top-color: #159bd7; background: #eef7fc; }
.ab-interro-ico { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; }

/* Le cadre. */
.ab-interro { background: #2b3a46; border: 1px solid #1d2933; display: flex; flex-direction: column; }
.ab-interro-intro { margin-bottom: 10px; color: #34495e; font-size: 12.5px; line-height: 1.5; }

.ab-interro-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; background: #22303a;
  color: #dbe6ee; font-size: 11px; border-bottom: 1px solid #16212a;
}
.ab-interro-bar-t { font-weight: 700; letter-spacing: .2px; }
.ab-interro-count { color: #9db3c3; }
.ab-interro-full {
  margin-left: auto; cursor: pointer;
  padding: 2px 9px; font: inherit; font-size: 11px; color: #dbe6ee;
  background: #3b4f5e; border: 1px solid #55707f; border-radius: 3px;
}
.ab-interro-full:hover { background: #4a6273; }

.ab-interro-stage { position: relative; display: flex; justify-content: center; background: #1d2933; }
.ab-interro-img { display: block; max-width: 100%; height: auto; }

.ab-interro-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 54px; cursor: pointer;
  font: 700 26px/1 Arial, Helvetica, sans-serif; color: #fff;
  background: rgba(20, 32, 42, .55); border: 1px solid rgba(255, 255, 255, .28);
}
.ab-interro-nav:hover { background: rgba(20, 32, 42, .85); }
.ab-interro-prev { left: 6px; }
.ab-interro-next { right: 6px; }

.ab-interro-cap {
  padding: 7px 10px; background: #22303a; color: #dbe6ee;
  border-top: 1px solid #16212a; font-size: 12px; line-height: 1.5;
}
.ab-interro-cap-t { font-weight: 700; }
.ab-interro-cap-n { color: #a8bccb; margin-top: 2px; }

/* Pellicule. */
.ab-interro-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; }
.ab-interro-thumb {
  position: relative; padding: 0; cursor: pointer; line-height: 0;
  background: #fff; border: 1px solid #d5dbe2;
}
.ab-interro-thumb img { width: 96px; height: 60px; object-fit: cover; object-position: top left; }
.ab-interro-thumb-n {
  position: absolute; left: 0; bottom: 0; padding: 0 4px;
  font: 700 9px/13px Arial, Helvetica, sans-serif; color: #fff;
  background: rgba(20, 32, 42, .72);
}
.ab-interro-thumb-on { border-color: #2b3a46; box-shadow: 0 0 0 2px #2b3a46; }
.ab-interro-note {
  margin-top: 10px; padding: 8px 10px; background: #f6f8fa;
  border: 1px solid #e2e5e9; font-size: 11.5px; line-height: 1.55; color: #445;
}

/* Plein écran. La classe suffit à couvrir la fenêtre, que
   requestFullscreen() ait abouti ou non (fichier local, navigateur qui
   refuse) : la commande fait donc toujours quelque chose. Au-dessus du
   panneau de quiz (z-index 1200) et de sa lightbox (1300) : c'est pendant
   le quiz qu'on vient regarder la capture. */
.ab-interro-max { position: fixed; inset: 0; z-index: 1400; background: #10181f; border: none; }
.ab-interro-max .ab-interro-stage { flex: 1 1 auto; align-items: center; min-height: 0; }
.ab-interro-max .ab-interro-img { max-height: 100%; max-width: 100%; object-fit: contain; }
body.ab-noscroll { overflow: hidden; }

/* ================= débriefing =================
   Masqué par défaut, ouvert par son bouton. Vert franc, volontairement
   étranger à la palette Merlin.net : ce bloc n'est pas un écran du portail,
   c'est le commentaire pédagogique. Même habillage que chez BIOTRONIK
   (préfixe bt-) pour qu'un apprenant qui passe d'un vendeur à l'autre
   reconnaisse le bloc. */
.ab-debrief { margin-top: 18px; border: 1px solid #b7d3a8; background: #f6fbf3; }
.ab-debrief-h { display: flex; align-items: center; gap: 8px; padding: 6px 9px; }
.ab-debrief-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #4f9a3a; color: #fff; padding: 2px 6px; border-radius: 8px;
}
.ab-debrief-q { flex: 1; font-weight: 700; color: #2c5220; font-size: 12.5px; }
.ab-debrief-btn {
  font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap;
  border: 1px solid #7fae6a; background: linear-gradient(#ffffff, #ebf5e5);
  color: #2c5220; border-radius: 3px; padding: 3px 9px;
}
.ab-debrief-btn:hover { background: linear-gradient(#ffffff, #dcecd2); }
.ab-debrief-body { padding: 0 11px 11px; border-top: 1px solid #d7e8cd; }
.ab-step { padding-top: 9px; }
.ab-step-t { font-weight: 700; color: #2c5220; font-size: 12.5px; }
.ab-step-x { color: #24331c; max-width: 92ch; font-size: 12.5px; line-height: 1.55; }
.ab-step-fig { margin: 8px 0 2px; max-width: 560px; }
.ab-step-fig img { display: block; width: 100%; height: auto; border: 1px solid #d7e8cd; background: #fff; }
.ab-pitfall {
  margin-top: 11px; padding: 6px 9px; border-left: 3px solid #d9a441;
  background: #fdf7ea; color: #5a4212; font-size: 12.5px; line-height: 1.55;
}

/* ---------------- mobile ---------------- */
@media (max-width: 720px) {
  /* `display: none` sur .ab-sidebar coupait TOUT accès à Episodes and EGMs /
     Test Results / Parameter sur téléphone — c'est la seule navigation
     entre onglets pour ce vendeur (pas de rail d'icônes comme Medtronic,
     signalé par capture d'écran réelle). Repli : empiler le panneau
     au-dessus du contenu plutôt que le supprimer — toujours visible, pas
     de repli/dépli JS qui ajouterait un risque pour un gain marginal ici. */
  .ab-body { flex-direction: column; }
  .ab-sidebar { flex: 0 0 auto; width: 100%; border-right: none; border-bottom: 1px solid #e2e5e9; padding: 6px 0; }
  .ab-sb-section { padding: 8px 16px 2px; }
  .ab-sidebar a, .ab-sidebar span.ab-sb-off { padding: 4px 16px 4px 20px; }
  .ab-main { padding: 14px 12px 20px; }
  .ab-navbar a, .ab-navbar span.ab-nav-item { padding: 9px 12px; font-size: 12px; }
  .ab-subtabbar { flex-wrap: wrap; }
  .ab-subtabbar a.ab-interro-toplink { margin: 6px 8px; }
  .ab-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ab-topbar-right { text-align: left; }
}