/* ==========================================================================
   Concepteur MSP : synthèse des MSP validées (fiche « Bilan », hors des 16 pages du pager)
   Page A4 paysage (classes .msp-page, .pg-title, .blk, .rb de concepteur.css). Préfixe sy- : aucun conflit avec les MSP.
   Aplats uniquement, aucun liseré.
   ========================================================================== */

/* ----- Page ----- */
/* Bandeau sur une seule rangée (BILAN MSP + officier évalué) : 16 mm, bas à 20 mm ; logo à la hauteur du bandeau.
   Sélecteur .pg-title.sy-title : l'emporte sur .pg-title de concepteur.css sans le modifier (les MSP restent inchangées). */
.pg-title.sy-title { height: 16mm; grid-template-columns: 38mm minmax(0, 1fr) 48mm; grid-template-rows: 16mm; }
.sy-title .pg-tb-logo { grid-row: 1; }
/* Cellule officier évalué sur deux lignes : formation et code en gras, puis l'officier */
.sy-title .sy-l1 { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.2mm; }
.sy-form { font-size: 10.4pt; font-weight: 700; white-space: nowrap; }   /* 1 pt de plus que le texte du bandeau (9,4 pt) */
.sy-ofc { display: flex; align-items: center; gap: 1.5mm; min-width: 0; max-width: 100%; }
.sy-title .pg-logo { height: 16mm; max-width: none; }

.sy-up { font: 700 6.5pt/1.2 Arial, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.sy-big { font: 700 22pt/1 Arial, sans-serif; color: var(--ink); }
.sy-mut { font-size: 7.5pt; color: var(--muted); }

.sy-n1 { left: 5mm; top: 23mm; width: 38mm; height: 33mm; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2mm; padding: 0 2mm; }
.sy-n1 .sy-up { font-size: 9pt; }
.sy-tc { left: 45mm; top: 23mm; width: 247mm; height: 33mm; }
.sy-tc-l { position: absolute; left: 5mm; right: 5mm; top: 2mm; bottom: 2mm; display: flex; align-items: center; justify-content: space-between; }
.sy-it { display: flex; align-items: center; gap: 3mm; }
.sy-lb { font: 700 9pt/1.2 Arial, sans-serif; }

.sy-donut { position: relative; display: inline-block; flex: none; }
.sy-donut svg { display: block; }
.sy-donut-v { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ink); letter-spacing: -0.2pt; }
.sy-donut-v small { font-size: 0.72em; font-weight: 600; }

/* Légende des niveaux et avertissement sur la même rangée */
.sy-leg { position: absolute; left: 5mm; top: 58.5mm; height: 6mm; display: flex; align-items: center; gap: 5mm; }
.sy-leg-t { font-weight: 700; font-size: 8pt; color: var(--ink); }
.sy-leg-i { display: inline-flex; align-items: center; gap: 1.6mm; font-size: 8pt; color: var(--ink); }
.sy-leg .rb { width: 5.2mm; height: 5.2mm; font-size: 5pt; }
.sy-warn { position: absolute; left: 138mm; top: 58.5mm; width: 88mm; height: 6mm; display: flex; align-items: center; font: 700 7pt/1.15 Arial, sans-serif; color: var(--na); }

/* Pied de page : adresse à gauche, boutons à droite, sans fond (bas à 205 mm comme les blocs des MSP) */
.sy-foot { position: absolute; left: 5mm; top: 197.6mm; width: 287mm; height: 7.4mm; display: flex; align-items: center; justify-content: space-between; gap: 4mm; padding: 0; }
.sy-foot-t { min-width: 0; font: 400 7.5pt/1.2 Arial, sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; }
.sy-actions { flex: none; display: flex; gap: 2mm; }
.sy-btn { display: inline-flex; align-items: center; gap: 1.8mm; height: 6mm; padding: 0 3.4mm; border: 0; border-radius: 1mm; background: var(--navy); color: #fff; font: 700 7.5pt/1 Arial, sans-serif; white-space: nowrap; cursor: pointer; }
.sy-btn img { display: block; flex: none; width: 3.8mm; height: 3.8mm; }   /* mêmes dimensions pour les deux pictogrammes */
.sy-btn:hover { background: var(--yellow); color: var(--navy); }
.sy-btn:focus-visible { outline: 0.6mm solid var(--blue); outline-offset: 0.4mm; }
/* Pictogramme exporter.svg (bleu nuit) : passé en blanc sur le bouton plein, bleu nuit d'origine au survol */
.sy-btn[data-sy="pdf"] img { filter: brightness(0) invert(1); }
.sy-btn[data-sy="pdf"]:hover img { filter: none; }
/* Pictogramme enregistrer.svg (noir) : teinté en bleu nuit, comme le bouton Enregistrer de la barre d'outils */
.sy-btn[data-sy="json"] { background: #e2e7f1; color: var(--ink); }
.sy-btn[data-sy="json"] img { filter: brightness(0) saturate(100%) invert(9%) sepia(60%) saturate(4300%) hue-rotate(236deg) brightness(.82); }
.sy-btn[data-sy="json"]:hover { background: var(--yellow); color: var(--navy); }

/* ----- Tableau : 8 lignes de hauteur identique, une par MSP validée (haut 67 mm, bas 194,6 mm : 3 mm au-dessus du pied de page) ----- */
.sy-tab { position: absolute; left: 5mm; top: 67mm; width: 287mm; height: 127.6mm; display: grid; grid-template-rows: 8mm repeat(8, minmax(0, 1fr)); row-gap: 0.8mm; }
.sy-row { display: grid; grid-template-columns: 96mm repeat(4, 21mm) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 0.8mm; min-height: 0; }
.sy-h { background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 1mm; font: 700 8pt/1.15 Arial, sans-serif; }
.sy-c { background: #f2f5f9; border-radius: 1mm; display: flex; align-items: center; justify-content: center; min-width: 0; }
/* Cellule MSP : grille à une rangée centrée en hauteur ; le numéro s'étire sur la hauteur des deux lignes (titre et type) */
.sy-m { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: stretch; justify-content: flex-start; gap: 2.5mm; padding: 0 3mm; }
.sy-o { align-items: stretch; justify-content: flex-start; padding: 1.4mm 3mm; }
.sy-n { min-width: 11.5mm; padding: 0 1.8mm; display: flex; align-items: center; justify-content: center; border-radius: 1mm; background: var(--ink); color: #fff; font: 700 7.5pt/1.2 Arial, sans-serif; text-align: center; white-space: nowrap; }
.sy-ti { min-width: 0; font: 700 8.5pt/1.2 Arial, sans-serif; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Cellule MSP sur deux lignes : titre, puis type de MSP (cases Simple, Dérivée, Complexe de la fiche, sans bloc de fond) */
.sy-mt { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1mm; }
.sy-m2 .pg-cx { grid-column: auto; grid-row: auto; padding: 0; background: none; }
.sy-vide { grid-row: 2 / span 8; display: flex; align-items: center; justify-content: center; border-radius: 1mm; background: #f2f5f9; font: 700 9pt/1.3 Arial, sans-serif; color: var(--muted); text-align: center; padding: 0 10mm; }

/* Axes d'amélioration : reprise du texte du formateur, non saisissable ; texte coupé au bord du cadre */
.sy-obs { flex: 1; min-width: 0; overflow: hidden; font-size: 7.5pt; line-height: 1.25; color: #111; }
.sy-obs p { margin: 0; }
.sy-for { margin: 0 0 0.6mm; }   /* FORACC / Formateur repris de la fiche MSP, en tête du bloc */
.sy-for b { text-decoration: underline; }   /* libellé souligné (le nom reste sans soulignement) */
.sy-obs ul, .sy-obs ol { margin: 0; padding-left: 4mm; }
.sy-obs b, .sy-obs strong { font-weight: 700; }
.sy-cut { position: relative; }
/* Pastille d'alerte : uniquement dans l'éditeur (la classe .sy-ovf n'est posée que sur la vue éditeur) */
.msp-page.sy-editable .sy-ovf::after { content: "Texte trop long"; position: absolute; right: 2mm; bottom: 1mm; z-index: 3; padding: 0.5mm 2mm; border-radius: 2mm; background: var(--na); color: #fff; font: 600 7pt/1.4 Arial, sans-serif; }

/* ----- Vignette fixe de la colonne MSP (sous la liste défilante) ----- */
.synth { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 14px; background: #fff; border-top: 3px solid var(--line); }
.synth-titre { font: 700 0.9rem/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-align: center; }
.synth[hidden] { display: none; }
.synth.is-current .thumb-frame { outline-color: var(--blue); }
.synth-meta { display: flex; align-items: center; gap: 6px; width: 200px; padding: 0 2px; }
.synth.is-current .thumb-num { background: var(--blue); }
.synth.is-current .thumb-title { color: var(--ink); font-weight: 500; }