/* ==========================================================================
   Concepteur MSP : feuille de style de l'application
   Dépend de fonts.css (Poppins local). Le style.css du livret n'est pas chargé ici :
   il suppose un tokens.css absent du dossier et ses classes (.page, .card, .btn, .zoom...)
   entreraient en conflit avec celles de cette application.
   Sommaire : 1 variables | 2 base | 3 bouton colonne MSP | 4 barre d'outils | 5 espace de travail
              6 colonne MSP | 7 page A4 (matrice) | 8 fenêtres et messages | 9 responsive | 10 impression
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  --ink: #0f2435;          /* bandeau du header, identique au bandeau de la fiche PDF */
  --navy: #141460;         /* couleur des icônes du dossier images */
  --yellow: #fbd600;       /* accent, repris du style.css du livret */
  --bg: #e3e7ee;
  --panel: #ffffff;
  --panel-2: #f3f5f9;
  --line: #dde2ea;
  --text: #1b2433;
  --muted: #667085;
  --blue: #3d7dc9;

  /* Niveaux d'évaluation : couleurs de style_odg.css (A, ECA, NA, SO devenu NE) */
  --a: #1a7a4a;   --a-l: #e8f8ee;
  --eca: #e8720c; --eca-l: #faeeda;
  --na: #c0392b;  --na-l: #fdecea;
  --ne: #888885;  --ne-l: #eeeeec;
  --red: #c0141f;

  --r: 8px;
  --sidebar-w: 252px;
  --font-ui: "Poppins", "Segoe UI", system-ui, Arial, sans-serif;
  --shadow-page: 0 10px 34px rgba(15, 36, 53, 0.28), 0 2px 6px rgba(15, 36, 53, 0.18);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
::selection { background: rgba(251, 214, 0, 0.45); }

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh; height: 100dvh;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--navy);
  font: 600 0.8rem var(--font-ui);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn img { display: block; width: 16px; height: 16px; }
.btn:hover:not(:disabled) { border-color: var(--navy); background: #f6f7fc; }
.btn:disabled { opacity: 0.4; }
.btn-plein { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-plein img { filter: brightness(0) invert(1); transition: filter 0.15s ease; }
.btn-plein:hover:not(:disabled) { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.btn-plein:hover:not(:disabled) img { filter: none; }
.btn.danger { background: var(--na); border-color: var(--na); color: #fff; }
.btn.danger:hover { background: #a02f23; border-color: #a02f23; color: #fff; }
/* enregistrer.svg est noir : teinte approchée vers le bleu des autres icônes */
.btn .ico-noir { filter: brightness(0) saturate(100%) invert(9%) sepia(60%) saturate(4300%) hue-rotate(236deg) brightness(.82); }

.btn:focus-visible, .tool:focus-visible, .sw:focus-visible, .sel:focus-visible, .menu-toggle:focus-visible,
.thumb-btn:focus-visible, .ico:focus-visible, .rb:focus-visible, .color-btn:focus-visible, .pager-btn:focus-visible,
.pager-input:focus-visible, .exp-card:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--navy);
}

/* ---------- 3. Bouton colonne MSP (mobile) et état d'enregistrement ---------- */
/* Logo ENSOSP en haut à gauche : teinte appliquée par le filtre SVG #logoBleu (index.html) */
.tb-logo { flex: none; display: block; height: 36px; width: auto; filter: url(#logoBleu); }
.tb-id { display: flex; align-items: center; gap: 10px; flex: none; }
.tb-nom { font: 700 0.95rem var(--font-ui); letter-spacing: 0.06em; color: var(--navy); white-space: nowrap; }
.tb-nom-msp { color: var(--yellow); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.menu-toggle {
  display: none;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--ink);
}
.menu-toggle:hover { background: #e6eaf2; }
/* Pastille sur « Enregistrer » : jaune = modifications non enregistrées, verte = enregistré */
#btnSave { position: relative; }
#btnSave[data-etat="sale"]::after, #btnSave[data-etat="ok"]::after {
  content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
  border-radius: 50%; border: 2px solid #fff; background: var(--yellow);
}
#btnSave[data-etat="ok"]::after { background: #4ade80; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 4. Barre d'outils ---------- */
.toolbar {
  position: relative;
  z-index: 55;   /* au-dessus du recouvrement du tiroir (50), sous le tiroir (60) : le bouton Home reste visible et cliquable */
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;   /* zone des outils sous le logo et les boutons d'action quand la largeur ne suffit pas (au lieu de les écraser) */
  align-items: center;
  gap: 8px 14px;
  min-height: 54px;
  padding: 7px 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(20, 20, 96, 0.08);
  overflow-x: clip;   /* les outils qui glissent depuis la droite ne dépassent pas de la barre */
}
.tg { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.tb-home { flex: none; width: 34px; padding: 0; justify-content: center; }  /* bouton icône seule, bleu, jaune au survol (.btn-plein) */
.tb-home img { width: 18px; height: 18px; }
/* Actions du document (Ouvrir, Sauvegarder, Exporter) : à droite de la barre ; icônes seules quand la largeur ne permet plus
   les libellés sur une seule ligne (sous 1900 px, sous 2000 px en conception ; titre et aria-label conservés) */
.tb-doc { flex: none; gap: 8px; margin-left: auto; }
.tb-doc .btn { justify-content: center; padding: 0 12px; }
@media (max-width: 1899px) {
  .tb-doc .lbl { display: none; }
  .tb-doc .btn { width: 34px; padding: 0; }
}
@media (max-width: 1999px) {
  .app[data-mode="conception"] .tb-doc .lbl { display: none; }
  .app[data-mode="conception"] .tb-doc .btn { width: 34px; padding: 0; }
}
/* Boutons d'action du header : bleu, jaune au survol (.btn-plein) ; le svg inline suit currentColor (blanc, puis bleu au survol) */
.tb-act { flex: none; gap: 8px; }
.tb-act .btn svg { display: block; flex: none; }
/* Évaluation : une seule ligne (identité, actions, outils de texte ouverts par un clic, documents) ; sous 1400 px de fenêtre,
   deux lignes : ligne 1 = identité, actions, documents ; ligne 2 = outils de texte.
   Zoom et pagination : pied de page (.pied) dans toutes les configurations. Libellés conservés tant que la ligne 1 tient,
   puis icônes seules (titre et aria-label conservés). Seuils en largeur de fenêtre : zone de travail = fenêtre - colonne MSP (252 px). */
.app[data-mode="evaluation"] .tg-edit { display: contents; }   /* ne laisse que .tg-outils comme élément de la barre */
.app[data-mode="evaluation"] .tg-outils { order: 1; flex: 1 1 auto; }   /* une seule ligne : outils entre les actions et les documents */
.app[data-mode="evaluation"] .tb-doc { order: 2; }
/* Fenêtre réduite : espacements resserrés par paliers (gaps, marges des blocs, largeur des listes) pour garder la ligne unique le plus longtemps
   possible ; au-delà, deux lignes (actions et documents, puis outils de texte sur toute la largeur, espacements d'origine). */
@media (min-width: 1263px) and (max-width: 1372px) {
  .app[data-mode="evaluation"].outils-on .toolbar { column-gap: 8px; }
  .app[data-mode="evaluation"].outils-on .tg-outils { gap: 6px; }
  .app[data-mode="evaluation"].outils-on .tg-outils .tb-bloc { padding: 3px 4px; }
}
@media (min-width: 1263px) and (max-width: 1325px) {
  .app[data-mode="evaluation"].outils-on .toolbar { padding-left: 12px; padding-right: 12px; }
  .app[data-mode="evaluation"].outils-on .tg-outils .tb-bloc { padding: 3px; gap: 2px; }
  .app[data-mode="evaluation"].outils-on #fontFamily { width: 112px; }
  .app[data-mode="evaluation"].outils-on #fontSize { width: 54px; }
}
@media (max-width: 1262px) {
  .app[data-mode="evaluation"] .tb-doc { order: 1; }
  .app[data-mode="evaluation"] .tg-outils { order: 2; flex: 1 1 100%; }
}
.app[data-mode="evaluation"] .tb-doc .lbl { display: inline; }
.app[data-mode="evaluation"] .tb-doc .btn { width: auto; padding: 0 12px; }
@media (max-width: 1402px) {
  .app[data-mode="evaluation"] .tb-doc .lbl { display: none; }
  .app[data-mode="evaluation"] .tb-doc .btn { width: 34px; padding: 0; }
}
@media (max-width: 1122px) {
  .app[data-mode="evaluation"] .tb-lbl { display: none; }
  .app[data-mode="evaluation"] .tb-act .btn { width: 34px; padding: 0; justify-content: center; }
}
.app[data-mode="accueil"] .tg-edit { display: none; }   /* accueil : aucun outil de texte, la zone vide ne réserve pas de place */
/* Évaluation, outils de texte ouverts (clic dans une zone de texte, classe .outils-on posée par app.js) : tous les boutons de la barre
   en icônes seules, quelle que soit la largeur (titre et aria-label conservés) */
.app[data-mode="evaluation"].outils-on .tb-lbl,
.app[data-mode="evaluation"].outils-on .tb-doc .lbl { display: none; }
.app[data-mode="evaluation"].outils-on .tb-act .btn,
.app[data-mode="evaluation"].outils-on .tb-doc .btn { width: 34px; padding: 0; justify-content: center; }
/* Pied de page : zoom et pagination, sous la feuille (au-dessus du logotype de fond de l'accueil) */
.pied { position: relative; z-index: 1; flex: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 8px 16px; background: #fff; border-top: 1px solid var(--line); }
/* Outils de mise en forme : masqués par défaut (attribut hidden), glissent depuis la droite avec rebond.
   Classes entre / sort posées par app.js ; aucune transformation une fois l'animation terminée
   (la fenêtre des couleurs est en position fixe et ne doit pas dépendre d'un parent transformé). */
.tg-outils { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tg-outils.entre { animation: outilsEntree 0.9s linear; }
.tg-outils.sort { animation: outilsSortie 0.35s ease-in forwards; }
@keyframes outilsEntree {
  0%   { transform: translateX(100vw); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  45%  { transform: translateX(-70px); opacity: 1; animation-timing-function: ease-in-out; }
  65%  { transform: translateX(32px); animation-timing-function: ease-in-out; }
  80%  { transform: translateX(-14px); animation-timing-function: ease-in-out; }
  92%  { transform: translateX(5px); animation-timing-function: ease-in-out; }
  100% { transform: translateX(0); }
}
@keyframes outilsSortie {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100vw); opacity: 0; }
}
/* Zone des outils : prend la largeur restante à droite du logo et empile les blocs sur plusieurs lignes si besoin */
.tg-edit { flex: 1 1 520px; min-width: 520px; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* Bloc d'outils : groupe insécable (ne se coupe jamais), fond léger à la place des séparateurs */
.tb-bloc { flex: none; gap: 4px; padding: 3px 6px; border-radius: 10px; background: var(--panel-2); }
.tb-bloc .tool:hover:not(:disabled) { background: #e2e7f1; }
.sep { flex: none; width: 1px; height: 22px; margin: 0 6px; background: var(--line); }
.toolbar.no-zone .tb-txt { opacity: 0.6; }

.tool {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--ink);
  font: 700 0.95rem var(--font-ui);
  transition: background-color 0.12s ease, color 0.12s ease;
}
.tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool:hover:not(:disabled) { background: #eef1f7; }
.tool:disabled { opacity: 0.35; }
.tool.on { background: var(--navy); color: #fff; }
.tool-i { font: italic 700 1rem Georgia, "Times New Roman", serif; }
.tool-u { text-decoration: underline; text-underline-offset: 3px; }

.sel {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  color: var(--text);
  font: 500 0.8rem var(--font-ui);
  cursor: pointer;
}
.sel:hover { border-color: var(--navy); }
#fontFamily { width: 132px; }
#fontSize { width: 62px; }

.palette { display: flex; align-items: center; gap: 6px; padding: 0 2px; }

/* Menu déroulant des couleurs : la fenêtre est en position fixe (placée par app.js) car la barre d'outils défile */
.color-menu { position: relative; flex: none; }
.color-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 8px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.color-btn:hover, .color-btn[aria-expanded="true"] { border-color: var(--navy); background: #f6f7fc; }
.color-cur { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 1px solid rgba(15, 36, 53, 0.28); }
.color-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s ease; }
.color-btn[aria-expanded="true"] .color-chev { transform: rotate(180deg); }
.color-pop {
  position: fixed; z-index: 40; gap: 8px; padding: 10px 12px;
  border-radius: 10px; background: #fff; box-shadow: 0 8px 28px rgba(15, 36, 53, 0.28);
}
.color-pop[hidden] { display: none; }
.color-pop .sw { width: 22px; height: 22px; }
.sw {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(15, 36, 53, 0.28);
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.12s ease;
}
.sw:hover { transform: scale(1.18); }
.sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--navy); }
.sw[data-color="#ffffff"] { border-color: #9aa3b2; }

.zoom { gap: 6px; }
.zoom .tool { border: 1px solid var(--line); background: #fff; }
.zoom .tool:hover:not(:disabled) { border-color: var(--navy); background: #f6f7fc; }
.zoom .tool.on { border-color: var(--navy); background: var(--navy); }
.zoom-lbl { min-width: 54px; text-align: center; font: 600 0.78rem var(--font-ui); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Pagination (menu de la barre d'outils) */
.pager { display: flex; align-items: center; gap: 6px; flex: none; }
.pager-btn {
  flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.pager-btn:hover:not(:disabled) { border-color: var(--navy); background: #f6f7fc; }
.pager-btn:disabled { opacity: 0.35; }
.pager-btn svg { width: 16px; height: 16px; }
.pager-status { display: flex; align-items: center; gap: 4px; padding: 0 4px; font: 600 0.78rem var(--font-ui); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pager-status::before { content: "Page"; margin-right: 2px; }
.pager-input {
  width: 3.2em; height: 28px; padding: 0 4px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
  font: 600 0.78rem var(--font-ui); -moz-appearance: textfield; appearance: textfield;
}
.pager-input::-webkit-outer-spin-button, .pager-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pager-input:hover, .pager-input:focus { border-color: var(--navy); }

/* ---------- 5. Espace de travail ---------- */
.workspace { display: contents; }
.stage-wrap { position: relative; grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; display: flex; flex-direction: column; }   /* page au-dessus, pied de page (.pied) dessous */
.stage { flex: 1; display: flex; overflow: auto; padding: 20px 24px 24px; background: var(--bg); }
.sheet-sizer { position: relative; flex: none; margin: auto; }
.sheet { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sheet .msp-page { box-shadow: var(--shadow-page); }

/* Déplacement de la page (appui prolongé, géré par app.js) : la page est inerte pendant le glissement,
   aucune sélection de texte ni clic n'est possible */
.stage.panning { cursor: grabbing; touch-action: none; -webkit-user-select: none; user-select: none; }
.stage.panning .sheet { pointer-events: none; }

/* ---------- 6. Colonne MSP (vignettes style Acrobat) ---------- */
.sidebar {
  position: relative;
  z-index: 6;
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-w);
  min-height: 0;
  background: var(--panel-2);
  border-left: 1px solid var(--line);
}
.sb-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.sb-title { font: 700 0.95rem var(--font-ui); letter-spacing: 0.06em; color: var(--ink); line-height: 1.2; }
.sb-count { font-size: 0.72rem; color: var(--muted); line-height: 1.2; }
.sb-add { margin-left: auto; }

.thumbs { flex: 1; min-height: 0; margin: 0; padding: 16px 0 28px; list-style: none; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.thumb { position: relative; flex: none; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.thumb-btn { display: block; padding: 0; border-radius: 3px; }
.thumb-frame {
  position: relative;
  display: block;
  width: 200px;
  height: 141.4px;           /* 200 x 210 / 297 */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 36, 53, 0.32);
  transition: outline-color 0.15s ease;
  outline: 3px solid transparent;
  outline-offset: 2px;
}
.thumb-btn:hover .thumb-frame { outline-color: rgba(61, 125, 201, 0.45); }
.thumb.is-current .thumb-frame { outline-color: var(--blue); }
.thumb-scale { position: absolute; left: 0; top: 0; display: block; transform: scale(0.17818); transform-origin: 0 0; pointer-events: none; }  /* 200 / 1122,5 px */
/* Cadenas de MSP validée : centré sur la vignette, rouge (filtre SVG #verrouRouge, couleur = --na), sans prise sur les clics */
.thumb-lock { position: absolute; left: 50%; top: 50%; width: 20px; height: auto; transform: translate(-50%, -50%); filter: url(#verrouRouge) drop-shadow(0 0 3px #fff); pointer-events: none; user-select: none; }
.thumb-lock[hidden] { display: none; }
.thumb-meta { display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 2px; }
.thumb-num { flex: none; min-width: 22px; padding: 0 6px; border-radius: 4px; background: #98a2b3; color: #fff; text-align: center; font: 600 0.7rem var(--font-ui); line-height: 18px; }
.thumb.is-current .thumb-num { background: var(--blue); }
.thumb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--muted); }
.thumb.is-current .thumb-title { color: var(--ink); font-weight: 500; }

.thumb-tools { position: absolute; top: 6px; left: 6px; right: 6px; justify-content: space-between; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
.thumb:hover .thumb-tools, .thumb:focus-within .thumb-tools { opacity: 1; }
.thumb-grip { width: 24px; height: 24px; padding: 3px; margin-right: auto; border-radius: 4px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); cursor: grab; pointer-events: auto; }
.thumb .ico { pointer-events: auto; display: grid; place-items: center; width: 33px; height: 33px; border-radius: 7px; background: rgba(255, 255, 255, 0.95); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.thumb .ico:hover:not(:disabled) { background: var(--navy); color: #fff; }
.thumb .ico[data-act="del"]:hover:not(:disabled) { background: var(--na); }
.thumb .ico:disabled { opacity: 0.4; }
.thumb.dragging { opacity: 0.4; }
.thumb.drop-before::before, .thumb.drop-after::after { content: ""; position: absolute; left: -6px; right: -6px; height: 3px; border-radius: 2px; background: var(--blue); }
.thumb.drop-before::before { top: -11px; }
.thumb.drop-after::after { bottom: -11px; }

.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(15, 36, 53, 0.45); }

/* ---------- 7. Page A4 paysage (matrice MSP) ----------
   Dimensions en mm : la mise en page est identique à l'écran, dans les vignettes, à l'impression et dans le PDF.
   Aucun liseré : les blocs sont des aplats de couleur aux angles arrondis. */
.msp-page {
  position: relative;
  flex: none;
  width: 297mm;
  height: 210mm;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 9pt;
  line-height: 1.3;
}
.msp-page, .msp-page *, .msp-page *::before, .msp-page *::after { box-sizing: border-box; }

/* Bandeau de titre : grille 2 rangées (hauteur 20,4 mm, bas à 24,4 mm).
   Rangée 1 : numéro de la MSP + officier évalué ; rangée 2 : titre sur toute la largeur ; logo bleu sans fond à droite, sur les 2 rangées.
   Dimensions de la maquette C réduites de 15 % (num 40 -> 34 mm, rangées 10,6 / 12,2 -> 9 / 10,2 mm, polices 16 / 11 / 17 -> 13,6 / 9,4 / 14,5 pt). */
.pg-title {
  position: absolute; left: 5mm; top: 4mm; width: 287mm; height: 20.4mm;
  display: grid; grid-template-columns: 34mm minmax(0, 1fr) 48mm; grid-template-rows: 9mm 10.2mm; gap: 1.2mm 2mm;
}
.pg-tb { display: flex; align-items: center; min-width: 0; border-radius: 1.5mm; background: var(--ink); color: #fff; }
.pg-tb-num { grid-column: 1; grid-row: 1; justify-content: center; gap: 1.5mm; padding: 0 3mm; font-size: 13.6pt; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.pg-num-l { flex: none; }
.z-num { flex: none; min-width: 7mm; max-width: 12mm; white-space: nowrap; overflow: hidden; }
/* Niveau de complexité (Simple, Dérivée, Complexe) : trois cases carrées à choix unique, en tête de la cellule « Officier évalué » */
.pg-cx { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 2.72mm; padding: 0 4mm; border-radius: 1.5mm; background: #f2f5f9; }
.cx-opt { display: inline-flex; align-items: center; gap: 1.2mm; margin: 0; padding: 0; border: 0; background: none; color: #4a5a6a; font: 400 6.8pt/1 Arial, "Helvetica Neue", Helvetica, sans-serif; white-space: nowrap; }
.cx-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.8mm; height: 3.8mm; border: 0.3mm solid #8a97a8; border-radius: 0.8mm; background: #fff; }
.cx-ck { display: none; width: 2.6mm; height: 2.6mm; }
.cx-opt.on { color: var(--ink); }
.cx-opt.on .cx-box { border-color: var(--ink); background: var(--ink); }
.cx-opt.on .cx-ck { display: block; }
button.cx-opt { cursor: pointer; }
button.cx-opt:hover .cx-box { border-color: var(--ink); }
button.cx-opt:focus-visible { outline: 2px solid var(--ink); outline-offset: 0.8mm; border-radius: 1mm; }
/* Officier évalué : cellule en aplat clair (même teinte que les blocs), texte bleu nuit */
.pg-l1 { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-start; gap: 1.5mm; min-width: 0; padding: 0 5mm; border-radius: 1.5mm; background: #f2f5f9; color: var(--ink); font-size: 9.4pt; line-height: 1.2; }
.pg-ofc-l { flex: none; font-weight: 700; white-space: nowrap; }
.pg-ref { flex: none; font-weight: 700; white-space: nowrap; }   /* référence de la formation (ex. F-ODG-2026-01), avant « Officier évalué » */
.pg-sep { flex: none; width: 0.35mm; height: 4.4mm; margin: 0 2.5mm; border-radius: 0.2mm; background: #aab4c3; }   /* séparateur en aplat (aucun liseré) */
.z-ofc { flex: 0 1 auto; min-width: 70mm; max-width: 100%; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.pg-tb-titre { grid-column: 1 / 3; grid-row: 2; min-height: 0; padding: 0 5mm; }
.z-title { flex: 1; min-width: 0; font-size: 14.5pt; line-height: 1.15; text-align: left; white-space: nowrap; overflow: hidden; }
/* Logo : aucun fond, visuel bleu (LOGO_BLEU, PNG prétraité : html2canvas ignore la propriété CSS filter) */
.pg-tb-logo { grid-column: 3; grid-row: 1 / 3; justify-content: center; padding: 0; background: none; } /* logo centré dans sa colonne de 48 mm (décalé de 7,2 mm vers la gauche) */
.pg-logo { display: block; height: 17mm; width: auto; max-width: 100%; object-fit: contain; }
/* Fiche MSP uniquement (la synthèse garde sa grille à 3 colonnes) : colonne 2 = bloc des niveaux de complexité, colonne 3 = officier évalué, colonne 4 = logo */
.pg-title.pg-msp { grid-template-columns: 34mm auto minmax(0, 1fr) 48mm; }
.pg-msp .pg-l1 { grid-column: 3; }
.pg-msp .pg-tb-titre { grid-column: 1 / 4; }
.pg-msp .pg-tb-logo { grid-column: 4; }

.blk { position: absolute; overflow: hidden; border-radius: 1.5mm; background: #f2f5f9; }
.blk-tab {
  position: absolute; left: 3mm; right: 3mm; top: 2mm; height: 7mm;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1mm; background: var(--ink); color: #fff;
  font-size: 10.5pt; letter-spacing: 0.1pt; white-space: nowrap;
}
.blk .z-body { position: absolute; left: 4mm; right: 4mm; top: 11mm; bottom: 3mm; overflow: hidden; }

.blk-sit  { left: 5mm;   top: 27.4mm; width: 78mm; height: 70.1mm; } /* haut 27,4 mm (sous le bandeau de 20,4 mm) ; bas inchangé à 97,5 mm */
.blk-res  { left: 5mm;   top: 100.5mm; width: 78mm; height: 73.5mm; background: #fdf1f1; } /* base MSP 1 : contenu 54,9 mm + 1 ligne libre ; bas aligné à 174 mm */
.blk-res .blk-tab { background: var(--red); font-size: 9.5pt; } /* 9,5 pt : le libellé le plus long reste centré sans toucher le pictogramme */
.blk-res .z-body { left: 3mm; right: 2mm; }
.blk-prob { left: 86mm;  top: 27.4mm; width: 65mm; height: 146.6mm; } /* bas inchangé à 174 mm */
.blk-act  { left: 154mm; top: 27.4mm; width: 65mm; height: 146.6mm; }
.blk-eval { left: 222mm; top: 27.4mm; width: 70mm; height: 146.6mm; }
/* Rangée du bas, jusqu'à 5 mm du bord de la feuille (de gauche à droite) : Axes d'amélioration (158,5 mm), puis le bloc FORACC (125,5 mm)
   qui englobe le champ de saisie (72,5 mm) et la tuile de validation de la MSP (42 mm), de même hauteur (10,3 mm + libellé). Écart de 3 mm entre les blocs. */
.blk-obs  { left: 5mm;     top: 177mm; width: 158.5mm; height: 28mm; }
.blk-for  { left: 166.5mm; top: 177mm; width: 125.5mm; height: 28mm; }
.blk-for .blk-tab, .blk-obs .blk-tab { height: 6mm; font-size: 9.5pt; }
/* Bloc FORACC : grille à deux colonnes (identité | validation), deux rangées (libellé 4 mm, champ 10,3 mm) ; onglet standard (bleu nuit, pictogramme blanc).
   Hauteur utile : 28 - 9,5 (onglet) - 3 (marge basse) = 15,5 mm = 4 + 1,2 + 10,3. Le champ et la tuile de validation ont ainsi le même bas. */
.blk-for { display: grid; grid-template-columns: minmax(0, 1fr) 42mm; grid-template-rows: 4mm 10.3mm; column-gap: 3mm; row-gap: 1.2mm; align-content: start; padding: 9.5mm 4mm 3mm; }
.blk-for .id-lbl { grid-column: 1; grid-row: 1; margin: 0; }
.blk-for .fld-id { grid-column: 1; grid-row: 2; width: auto; height: 10.3mm; margin: 0; padding: 0 3.5mm; font-size: 9.5pt; line-height: 10.3mm; }

/* Validation de la MSP, dans le bloc FORACC (colonne de droite, sur les deux rangées) : tuile bleue (jaune au survol, rouge une fois validée) ;
   l'horodatage est superposé en bas de la tuile rouge, la hauteur du bloc ne change donc jamais */
.val-zone { position: relative; grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: stretch; }
.val-btn {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 2mm; min-height: 0; border-radius: 1.5mm;
  background: var(--navy); color: #fff; font: 700 10.5pt/1 Arial, "Helvetica Neue", Helvetica, sans-serif; letter-spacing: 0.1pt;
  transition: background-color 0.15s ease, color 0.15s ease;
}
button.val-btn { width: 100%; cursor: pointer; }
button.val-btn:not(.on):hover { background: var(--yellow); color: var(--navy); }
/* 3e état : MSP validée, rouge du rond NA (var(--na)), plus foncé au survol (clic = retrait de la validation) */
.val-btn.on { background: var(--na); color: #fff; padding-bottom: 4.2mm; }
button.val-btn.on:hover { background: #a02f23; }
button.val-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
.val-ic { flex: none; display: block; width: 4.6mm; height: 4.6mm; }
.val-ts { position: absolute; left: 0; right: 0; bottom: 2.2mm; text-align: center; font-size: 7pt; font-weight: 600; line-height: 1.2; color: #fff; pointer-events: none; }
.blk-obs .z-body { top: 9.5mm; }

/* Pictogrammes : blancs à gauche des onglets (hors flux, le libellé reste strictement centré) ; bleu nuit devant les lignes de l'évaluation */
.blk-tab .tab-ic { position: absolute; left: 2.6mm; top: 0; bottom: 0; width: 4.6mm; height: 4.6mm; margin: auto 0; pointer-events: none; }
.blk-for .blk-tab .tab-ic, .blk-obs .blk-tab .tab-ic { width: 4mm; height: 4mm; }
.tab-ic svg, .ev-ic svg { display: block; width: 100%; height: 100%; }
.ev-lblrow { display: flex; align-items: center; gap: 1.6mm; margin-bottom: 1.2mm; }
.ev-lblrow .ev-lbl { flex: 1; min-width: 0; margin-bottom: 0; }
.ev-ic { flex: none; width: 4mm; height: 4mm; }

.zone p { margin: 0; }
.zone ul, .zone ol { margin: 0; padding-left: 4.2mm; }
.zone li { margin: 0; }
/* Liens des ressources réglementaires : bleu marine souligné, ouverts dans un nouvel onglet */
.msp-page .zone a { color: var(--navy); text-decoration: underline; text-underline-offset: 0.3mm; }

/* Identité apprenant et formateur (sans signature) : intitulé gras, champ unique, puis ligne « Date : » */
.id-lbl { margin: 9.5mm 4mm 1mm; height: 4mm; font-size: 8.5pt; font-weight: 700; line-height: 4mm; white-space: nowrap; }
.fld-id { margin: 0 4mm 1.8mm; }
.fld { display: flex; align-items: center; gap: 1.5mm; margin: 0 4mm; height: 4.8mm; }
.fld-l { flex: none; width: 13mm; font-size: 7.5pt; font-weight: 700; }
.fld-v { flex: 1; min-width: 0; height: 4.8mm; padding: 0 1.5mm; border-radius: 0.5mm; background: #fff; font-size: 8pt; line-height: 4.8mm; white-space: nowrap; overflow: hidden; }

/* Bouton mémo vocal (bloc Axes d'amélioration) : invisible hors fiche HTML exportée */
.memo-btn { display: none; }
.msp-page.mode-html .memo-btn {
  position: absolute; top: 2.7mm; right: 5mm; z-index: 2;
  display: inline-flex; align-items: center; gap: 1.5mm; height: 4.6mm; padding: 0 2.5mm;
  border-radius: 2mm; background: var(--yellow); color: var(--ink);
  font: 600 7.5pt/1 var(--font-ui); cursor: pointer;
}
.memo-btn svg { display: block; width: 3.2mm; height: 3.2mm; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msp-page.mode-html .memo-btn:hover { background: #fff; }
.msp-page.mode-html .memo-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Grille d'évaluation : référentiel, puis 4 items (texte, niveaux A / ECA / NA / NE dessous) séparés discrètement */
.ev-grid {
  position: absolute; left: 0; right: 0; top: 11mm; bottom: 0;
  display: flex; flex-direction: column;
}
.ev-ref { flex: none; height: 7mm; display: flex; align-items: center; padding-left: 3mm; color: #111; }
.ev-refz { font-size: 9.5pt; font-weight: 700; white-space: nowrap; overflow: hidden; }
.ev-item { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0 3mm; }
.ev-item + .ev-item { border-top: 0.2mm solid rgba(15, 36, 53, 0.12); }
.ev-txt { flex: 0 1 auto; min-width: 0; min-height: 0; padding: 2mm 0 0; overflow: hidden; }
.ev-lbl { margin-bottom: 1.2mm; font-size: 8.5pt; font-weight: 700; white-space: nowrap; overflow: hidden; }
.ev-desc { font-size: 8pt; line-height: 1.25; }
.ev-niv { flex: none; display: flex; align-items: center; justify-content: space-evenly; height: 8mm; margin-top: 1.5mm; }

.rb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 6.4mm; height: 6.4mm; padding: 0; border-radius: 50%;
  border: 0.35mm solid rgba(0, 0, 0, 0.18); background: #fff; color: var(--ne);
  font: 700 6pt/1 Arial, sans-serif;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rb.on { color: #fff; }
.rb-A.on { background: var(--a); border-color: var(--a); }
.rb-ECA.on { background: var(--eca); border-color: var(--eca); }
.rb-NA.on { background: var(--na); border-color: var(--na); }
.rb-NE.on { background: var(--ne); border-color: var(--ne); }
button.rb { cursor: pointer; }
button.rb:hover { border-color: rgba(0, 0, 0, 0.5); }

/* Aides à la saisie : uniquement dans l'éditeur, jamais dans le PDF ni les vignettes */
.msp-page.editable .zone { cursor: text; border-radius: 1mm; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.msp-page.editable .zone:hover { background: rgba(251, 214, 0, 0.14); }
.msp-page.editable .zone:focus { outline: none; background: rgba(251, 214, 0, 0.18); box-shadow: 0 0 0 0.5mm rgba(61, 125, 201, 0.7); }
.msp-page.editable .fld-v:hover { background: #fffbe0; }
.msp-page.editable .fld-v:focus { background: #fff; }
.msp-page.editable .zone[data-ph]:empty::before { content: attr(data-ph); color: #9aa3b2; pointer-events: none; }
/* Nom de l'officier évalué verrouillé (mode stagiaire) : ni curseur de saisie ni surbrillance au survol */
.msp-page.editable .zone.zone-lock { cursor: default; }
.msp-page.editable .zone.zone-lock:hover { background: transparent; }
/* Zones figées d'une page éditable (contenu de la fiche en mode évaluation) : aucune aide à la saisie, aucun texte indicatif */
.msp-page.editable .zone:not([contenteditable="true"]) { cursor: default; }
.msp-page.editable .zone:not([contenteditable="true"]):hover { background: transparent; }
.msp-page.editable .zone:not([contenteditable="true"])[data-ph]:empty::before { content: none; }
.msp-page.editable .z-title[data-ph]:empty::before, .msp-page.editable .z-num[data-ph]:empty::before { color: rgba(255, 255, 255, 0.5); }
.msp-page.editable .blk.ovf::after, .msp-page.editable .pg-title.ovf::after {
  content: "Texte trop long";
  position: absolute; right: 3mm; bottom: 1.5mm; z-index: 3;
  padding: 0.5mm 2mm; border-radius: 2mm; background: var(--na); color: #fff;
  font: 600 7pt/1.4 var(--font-ui);
}
.msp-page.editable .pg-title.ovf::after { bottom: 0.8mm; right: 8mm; }

/* ---------- 8. Fenêtres et messages ---------- */
.app-dlg {
  margin: auto; width: min(440px, 92vw); padding: 22px 24px 18px;
  border: 0; border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
  color: var(--text); font-family: var(--font-ui);
}
.app-dlg::backdrop { background: rgba(15, 36, 53, 0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.app-dlg p { margin: 0 0 18px; font-size: 0.9rem; line-height: 1.55; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Fenêtre de lien (zone « Ressources réglementaires ») : adresse et texte affiché */
.dlg-lien { width: min(480px, 94vw); }
.dlg-lien .dlg-titre { margin-bottom: 14px; }
.lien-lbl { display: block; margin: 0 0 4px; font: 600 0.78rem var(--font-ui); color: var(--ink); }
.lien-champ {
  display: block; width: 100%; height: 38px; margin: 0 0 14px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--text); font: 500 0.85rem var(--font-ui);
}
.lien-champ:hover, .lien-champ:focus { border-color: var(--navy); }
.lien-champ:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.dlg-lien .lien-err { margin: -4px 0 14px; font: 600 0.78rem var(--font-ui); color: var(--na); }
.dlg-lien #lienRetirer { margin-right: auto; }

/* Fenêtre d'export : choix du format */
.dlg-export { width: min(520px, 94vw); padding: 20px 22px 22px; }
.dlg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dlg-titre { display: flex; align-items: center; gap: 10px; margin: 0; outline: none; font: 700 1.05rem var(--font-ui); color: var(--ink); }
.dlg-ico { display: block; flex: none; width: 20px; height: 20px; }
.dlg-x { color: var(--muted); }
.exp-choix { display: grid; gap: 15px; margin-bottom: 16px; }
.exp-card {
  display: block; width: 100%; padding: 18px 16px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--text);
}
.exp-ligne { display: flex; align-items: center; gap: 11px; }
.exp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
.exp-nom { font: 600 0.92rem/21px var(--font-ui); color: var(--ink); }
.exp-desc { font-size: 0.76rem; line-height: 17px; color: var(--muted); }

/* Bouton poussoir : case à cocher native masquée, rendu porté par .exp-sw-ui (rond navy à gauche = coupé, rond jaune à droite = sélectionné) */
.exp-sw { position: relative; flex: none; display: block; width: 51px; height: 31px; margin-top: 1px; cursor: pointer; }
.exp-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.exp-sw-ui {
  position: absolute; inset: 0; border: 1px solid #d8d8d8; border-radius: 999px; background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.08); transition: background-color 0.18s ease, border-color 0.18s ease;
}
.exp-sw-ui::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 27px; height: 27px; border-radius: 50%;
  background: var(--navy); transition: transform 0.18s ease, background-color 0.18s ease;
}
.exp-sw input:checked + .exp-sw-ui::after { transform: translateX(20px); background: var(--yellow); }
.exp-sw input:focus-visible + .exp-sw-ui { outline: 3px solid var(--yellow); outline-offset: 2px; }

/* Choix de la portée : boutons radio sous le texte de la carte PDF (le cadre de la carte reste continu) */
.exp-portee {
  display: grid; gap: 14px; min-width: 0; margin: 8px 0 0; padding: 0 0 2px 69px; border: 0;
}
.exp-rb {
  display: flex; align-items: center; gap: 16px; height: 26px; cursor: pointer;
  font: 700 0.8rem var(--font-ui); letter-spacing: 0.215em; text-transform: uppercase; color: #000204;
}
.exp-rb:first-of-type span { margin-left: 3px; }   /* décalage de 3 px entre les deux libellés, repris du modèle */
.exp-rb input {
  appearance: none; -webkit-appearance: none; flex: none; width: 15px; height: 15px; margin: 0;
  border: 1px solid #bebfc1; border-radius: 50%; background: #fdfdfd; box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.12); cursor: inherit;
}
.exp-rb input:checked { border: 2px solid #c3c4cf; background: #1b1b64; box-shadow: none; }
.exp-rb input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Bouton Valider : navy, jaune au survol, inactif tant que « Exporter en PDF » n'est pas sélectionné */
.exp-valider {
  display: block; width: 100%; height: 51px; padding: 0; border: 0; border-radius: 5px;
  background: var(--navy); color: #fff; font: 600 1rem var(--font-ui); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.exp-valider:hover:not(:disabled) { background: var(--yellow); color: var(--navy); }
.exp-valider:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.exp-valider:disabled { opacity: 0.4; cursor: not-allowed; }

.toast {
  position: fixed; left: 50%; top: 70px; z-index: 80; max-width: min(560px, 92vw);
  padding: 10px 16px; border-radius: var(--r); background: var(--ink); color: #fff;
  font: 500 0.82rem var(--font-ui); box-shadow: 0 8px 28px rgba(15, 36, 53, 0.35);
  opacity: 0; transform: translate(-50%, -8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: #14532d; }
.toast.err { background: #8a1c14; }

/* Conteneurs techniques */
#print-root { display: none; }
#export-root { position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; }

/* ---------- 9. Responsive ---------- */
@media (max-width: 768px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .menu-toggle { display: grid; }
  .toolbar { flex-wrap: wrap; gap: 6px 10px; padding: 6px 10px; }
  .menu-toggle { margin-left: auto; }
  .tb-act { gap: 6px; }
  .tb-act .btn { width: 34px; padding: 0; justify-content: center; }   /* icônes seules sous 768 px (titre et aria-label conservés) */
  .tb-lbl { display: none; }
  .tg-edit { flex: 1 1 100%; min-width: 0; justify-content: flex-start; gap: 6px; }  /* sous le logo, sur toute la largeur */
  .tg-outils { flex: 1 1 100%; justify-content: flex-start; gap: 6px; }
  .stage { padding: 12px 10px 16px; }
  .toast { top: 64px; }
  /* Colonne MSP : tiroir coulissant (sort par la droite car la colonne est à droite de la page) */
  .sidebar {
    grid-column: auto; grid-row: auto;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.25);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .thumb-tools { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .tg-outils.entre, .tg-outils.sort { animation: none !important; }
}

/* ---------- 10. Impression (Ctrl+P) : A4 paysage, une fiche par feuille ---------- */
@page { size: A4 landscape; margin: 0; }
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { height: auto; background: #fff; }
  .app, .sidebar-overlay, .toast, .app-dlg, #export-root, .memo-btn { display: none !important; }
  #print-root { display: block; }
  #print-root .msp-page { height: 209.5mm; break-after: page; page-break-after: always; box-shadow: none; }
  #print-root .msp-page:last-child { break-after: auto; page-break-after: auto; }
}