/**
 * DOCUMENTS D'ÉVALUATION — « détails » et « synthèse »
 *
 * Feuille PARTAGÉE par les deux portes d'entrée du même document :
 *   - back-office : /cms/impression_evaluation_{details,synthese}/{id}
 *   - front-office : /compte/evaluation_{details,synthese}/{id} (pour le stagiaire)
 *
 * Le scope était auparavant l'id du body (= nom du controller CMS). Ce hook
 * n'existe pas côté front-office, où le body porte id='compte'. Les règles sont
 * donc scopées par les classes que le gabarit pose lui-même sur son conteneur
 * (Web/inc/impression-evaluation-*.php) : .eval-doc.doc-details et
 * .eval-doc.doc-synthese. Un seul jeu de règles → un seul document, où qu'il
 * soit servi.
 *
 * Chargée en media='print' par le CMS (le document ne s'affiche pas à l'écran,
 * comportement historique) et sans media par le front-office, où le stagiaire
 * doit voir son document avant de l'imprimer.
 *
 * NB : les tailles de police portent !important pour neutraliser les règles
 * génériques des print.css du projet (tableaux à 70%, .page à 80% côté front).
 */

/* Le document impose sa propre boîte de page : le .page du CMS fait 17cm, celui
   du front-office 600px. Mêmes marges des deux côtés = même rendu imprimé. */
.eval-doc .page { width:17cm; margin:0 1cm 0 .7cm; display:block; }

/* Forcer l'impression des fonds de couleur (sinon Chrome les retire) */
.eval-doc, .eval-doc * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

/* --- Document « détails » --- */
.eval-doc.doc-details { color:#000; }
/* Neutraliser les tailles 70% que le print.css du projet impose aux tableaux (la police reste celle du projet : Futura) */
.eval-doc.doc-details table.grid td, .eval-doc.doc-details table.grid th { font-size:11px !important; height:auto !important; padding:2px 5px !important; }
.eval-doc.doc-details table.legend td { font-size:10.5px !important; height:auto !important; }
.eval-doc.doc-details table.comments td { font-size:11px !important; height:1.4cm !important; }
.eval-doc.doc-details .doc-head { display:flex; align-items:flex-start; gap:18px; margin-bottom:14px; }
.eval-doc.doc-details img.logo { flex:0 0 auto; display:block; width:170px; height:auto; }
.eval-doc.doc-details .ident { font-size:13px; line-height:1.5; }
.eval-doc.doc-details .ident .lbl { color:#1f3864 !important; text-decoration:underline; margin-right:6px; }
.eval-doc.doc-details .ident b { font-weight:600; }
.eval-doc.doc-details table.grid { width:100%; border-collapse:collapse; font-size:11px; margin-top:6px; }
.eval-doc.doc-details table.grid th, .eval-doc.doc-details table.grid td { border:1px solid #000; padding:2px 5px; vertical-align:middle; }
.eval-doc.doc-details table.grid thead th { background:#fff; text-align:left; font-weight:600; border-bottom:1.5px solid #000; }
.eval-doc.doc-details table.grid td.col-theme { width:18%; font-weight:600; vertical-align:top; }
.eval-doc.doc-details table.grid td.col-num, .eval-doc.doc-details table.grid th.col-num { width:4%; text-align:right; }
.eval-doc.doc-details table.grid td.col-item { width:42%; }
.eval-doc.doc-details table.grid th.col-eval { width:18%; }
.eval-doc.doc-details table.legend { width:100%; border-collapse:collapse; font-size:10.5px; margin-top:0; }
.eval-doc.doc-details table.legend tr { border:0; }
.eval-doc.doc-details table.legend td { padding:1px 6px; vertical-align:top; border:0; }
.eval-doc.doc-details table.legend td.term { width:110px; font-weight:600; }
.eval-doc.doc-details .legend-title { font-size:11px; font-weight:600; margin:10px 0 2px; }
.eval-doc.doc-details .legend-title small { font-weight:normal; font-style:italic; }
.eval-doc.doc-details .comments-title { font-size:12px; font-weight:600; margin:4px 0 4px; }
.eval-doc.doc-details table.comments { width:100%; border-collapse:collapse; font-size:11px; }
.eval-doc.doc-details table.comments tr { border:0; }
.eval-doc.doc-details table.comments td { border:1px solid #000; padding:6px; height:1.4cm; vertical-align:top; }
.eval-doc.doc-details table.comments td.doc-role { width:90px; border:0; font-style:italic; }

/* PIED DU DOCUMENT — la taxonomie et les commentaires ne se separent pas.
   Le gabarit (Web/inc/impression-evaluation-details.php) enveloppe la legende de
   la taxonomie et le tableau des commentaires dans .doc-tail. La grille d'items,
   elle, reste libre de couler sur plusieurs feuilles : c'est une liste, on la lit
   ligne a ligne. Le pied non : la legende donne le sens des valeurs de la grille
   et les commentaires les nuancent, les deux se lisent ensemble.

   break-inside:avoid demande au navigateur de ne PAS couper la boite : si elle
   n'entre plus sur la page courante, il la reporte en entier sur la suivante —
   exactement le comportement demande (mieux vaut du blanc en bas de page qu'un
   bloc coupe). Doublon page-break-inside pour les moteurs anciens ; les deux
   sont sans effet a l'ecran (fragmentation = impression uniquement).

   Repli sur .doc-tail-block : un bloc plus haut qu'une feuille ne PEUT pas etre
   garde entier, le navigateur ignore alors la regle et coupe ou il veut. En
   posant la meme contrainte sur chacune des deux moities, la coupure d'un pied
   surdimensionne (commentaires tres longs) tombe ENTRE taxonomie et commentaires
   plutot qu'au milieu de l'une des deux. */
.eval-doc.doc-details .doc-tail,
.eval-doc.doc-details .doc-tail-block { break-inside: avoid; page-break-inside: avoid; }

/* Les commentaires sont le seul endroit du document où le lecteur trouve de la
   PROSE — des remarques libres, pas des cellules d'un mot. 11px tient sur la page
   imprimée mais devient illisible à l'écran, où le stagiaire lit désormais son
   détail avant de l'imprimer. On ne remonte donc la taille QU'EN @media screen :
   côté CMS cette feuille est liée en media='print', ce bloc n'y existe pas, et le
   document imprimé reste identique des deux côtés. */
@media screen {
  .eval-doc.doc-details table.comments td { font-size:14px !important; line-height:1.5; }
}

/* --- Document « synthèse » --- */
.eval-doc.doc-synthese { color:#1f3864; }
.eval-doc.doc-synthese .doc-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px; }
.eval-doc.doc-synthese .doc-head .title b { font-size:16px !important; color:#1f3864 !important; }
.eval-doc.doc-synthese .doc-head .title small { display:block; font-size:12px !important; color:#2e5496 !important; margin-top:1px; }
.eval-doc.doc-synthese img.logo { flex:0 0 auto; display:block; width:150px; height:auto; margin-left:auto; }
/* Taxonomie (evaluation_taxonomies.libelle) : rappel discret de la norme
   d'évaluation appliquée, posé au-dessus du bloc Stagiaire. */
.eval-doc.doc-synthese .taxo-libelle { font-size:11px !important; line-height:1.3 !important; color:#2e5496 !important; margin:0 0 8px; }
.eval-doc.doc-synthese table.synth { width:100%; border-collapse:collapse; }
.eval-doc.doc-synthese table.synth tr { border:0; }
.eval-doc.doc-synthese table.synth td { font-size:12px !important; height:auto !important; line-height:1.15 !important; }
.eval-doc.doc-synthese table.synth tr.section td { background:#b8cce4 !important; color:#1f3864 !important; font-weight:700; padding:2px 12px !important; font-size:12.5px !important; }
.eval-doc.doc-synthese table.synth td.lbl { width:34%; text-align:right; color:#1f3864 !important; padding:0 16px 0 0 !important; vertical-align:top; }
.eval-doc.doc-synthese table.synth td.val { color:#8497b0 !important; padding:0 0 0 12px !important; vertical-align:top; }
.eval-doc.doc-synthese table.synth tr.spacer td { height:4px; padding:0; }
/* Les remarques proviennent de champs SQL text : interligne confortable et respiration verticale. */
.eval-doc.doc-synthese table.synth tr.remarque td { line-height:1.4 !important; padding-top:2px !important; padding-bottom:2px !important; }
.eval-doc.doc-synthese .chart-wrap { text-align:center; margin:14px 0 0; }
.eval-doc.doc-synthese #radarChart { display:block; margin:0 auto; }
.eval-doc.doc-synthese .page { page-break-inside: avoid; }

/* ============================================================================
   ÉCRAN — front-office uniquement (le CMS charge cette feuille en media=print,
   tout ce bloc y est donc inerte et son rendu reste celui d'avant).

   Le document est dessiné pour du papier blanc : texte marine #1f3864, valeurs
   #8497b0, bandeaux #b8cce4. Posé tel quel sur le fond marine du thème, le titre
   et les libellés disparaissaient. On lui rend donc sa feuille — même parti pris
   que .eval-carte dans app.css, qui blanchit déjà le radar et les tableaux des
   pages d'évaluation.
   ============================================================================ */
@media screen {
    .eval-doc {
        background: #fff;
        border-radius: 8px;
        padding: 26px 22px;
        margin: 0 auto 20px;
        width: fit-content;
        max-width: 100%;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }

    /* Les marges asymétriques du .page servent le papier ; à l'écran la feuille
       est centrée dans la colonne. */
    .eval-doc .page { margin: 0 auto; }

    /* Barre d'actions (retour / imprimer) : masquée à l'impression par print.css. */
    .eval-doc-actions {
        margin: 0 auto 14px;
        width: fit-content;
        max-width: 100%;
    }
    .eval-doc-actions .button { margin: 0 4px 0 0; }
}

/* Sous le breakpoint small de Foundation, la feuille fixe à 17cm déborderait :
   on la laisse fluide et on met le graphe à l'échelle (Chart.js pose des
   attributs width/height en dur sur le canvas). */
@media screen and (max-width: 40em) {
    .eval-doc { padding: 14px 10px; width: auto; }
    .eval-doc .page { width: auto; margin: 0; }
    .eval-doc.doc-synthese #radarChart { max-width: 100%; height: auto; }
}