/* Feuille de app_colorateur/templates/app_colorateur/configuration.html — sortie du gabarit le 2026-10-06 (carnet #36, lot 2).
   Chargée par {% feuille 'app_colorateur/css/configuration.css' %} : l'URL porte l'empreinte du fichier, le cache suit. */
/* OpenDyslexic vendorisée (../fonts/, licence dans fonts/LICENCES.md) : l'URL CDN
   utilisée jusqu'au 2026-10-29 répondait 404, la police ne s'affichait jamais. */
@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: normal; font-display: swap;
    src: local('OpenDyslexic'), local('OpenDyslexic-Regular'), url('../fonts/OpenDyslexic-Regular.otf') format('opentype'); }
@font-face { font-family: 'OpenDyslexic'; font-weight: 700; font-style: normal; font-display: swap;
    src: local('OpenDyslexic Bold'), local('OpenDyslexic-Bold'), url('../fonts/OpenDyslexic-Bold.otf') format('opentype'); }
@font-face { font-family: 'OpenDyslexic'; font-weight: 400; font-style: italic; font-display: swap;
    src: local('OpenDyslexic Italic'), local('OpenDyslexic-Italic'), url('../fonts/OpenDyslexic-Italic.otf') format('opentype'); }

.page-title { font-size: 1.8rem; font-weight: 700; color: var(--lfis-blue-dark); margin: 0 0 4px; }
.page-sub { color: #718096; margin: 0 0 24px; }

.col-grid { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .col-grid { grid-template-columns: 1fr; } }

.panel-title { font-size: 1rem; font-weight: 700; color: var(--lfis-blue); margin: 0 0 14px; }
.opt { margin-bottom: 14px; }
.opt label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 5px; color: #4a5568; }
.opt select, .opt input[type=text], .opt .champ { width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid #cbd5e0; border-radius: 7px; font-family: inherit; }
.opt-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; }
.opt-check input { width: 16px; height: 16px; }
.range-row { display: flex; align-items: center; gap: 10px; }
.range-row input[type=range] { flex: 1; }
.range-val { font-size: 0.8rem; color: #718096; min-width: 40px; text-align: right; }

#zone-texte { width: 100%; box-sizing: border-box; min-height: 140px; padding: 12px;
    border: 1px solid #cbd5e0; border-radius: 8px; font-family: inherit; font-size: 0.92rem; resize: vertical; }

.upload-row { display: flex; gap: 10px; align-items: center; margin: 10px 0 4px; }
.upload-btn { background: #fff; color: var(--lfis-blue); border: 1px solid #cbd5e0;
    padding: 8px 14px; border-radius: 7px; font-weight: 600; cursor: pointer; font-size: 0.85rem; }
.upload-btn:hover { background: #f1f5f9; }
#upload-status { font-size: 0.8rem; color: #718096; }
#upload-status.err { color: var(--lfis-red); }

.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.preview-head h3 { margin: 0; font-size: 1.1rem; color: var(--lfis-blue-dark); }
#apercu { border: 1px solid #edf2f7; border-radius: 8px; padding: 24px; background: #fff; min-height: 300px;
    white-space: pre-wrap; word-wrap: break-word; }
.ligne-alt { background: #f1f5f9; }

/* Mode fluence (2026-10-29) : chaque ligne de la source reste UNE ligne (nowrap),
   le compte de mots s'affiche en marge, l'aperçu prend la largeur utile d'une
   page A4 (170 mm) pour que ce qui déborde à l'écran déborde aussi à l'impression. */
#apercu.lignes-fixes { white-space: nowrap; }
#apercu .ligne.fixe { white-space: nowrap; }   /* ligne IMPRIMÉE, découpée par decouperEnLignesImprimees */
#apercu.page-a4 { width: 170mm; max-width: none; box-sizing: border-box; margin: 0 auto; }
.col-grid > .card:last-child { overflow-x: auto; }   /* fenêtre étroite : la page A4 défile, elle ne rétrécit pas */
#apercu .ligne { display: flex; align-items: baseline; gap: 8mm; }
#apercu .ligne > .texte { flex: 1; min-width: 0; }
#apercu.lignes-fixes .ligne > .texte { overflow: visible; }
#apercu .ligne > .nb { flex: 0 0 14mm; text-align: right; font-size: 0.85em; color: #2d3436; font-variant-numeric: tabular-nums; }
#apercu .ligne.deborde > .texte { outline: 2px dashed var(--lfis-red); outline-offset: 2px; }
#apercu .titre-fiche { text-align: center; font-weight: 700; font-size: 1.25em; letter-spacing: .08em; margin: 0 0 .6em; }
#deborde-alerte { display: none; font-size: 0.8rem; color: var(--lfis-red); margin-top: 8px; }
#deborde-alerte.visible { display: block; }

/* Grille d'évaluation de fluence, au pied de la fiche. */
.fiche-grille { margin-top: 1.2em; font-size: 0.72em; line-height: 1.3; color: #2d3436; }
.fiche-grille table { width: 100%; border-collapse: collapse; }
.fiche-grille th, .fiche-grille td { border: 1px solid #2d3436; padding: 6px 4px; text-align: center; vertical-align: middle; font-weight: 400; }
.fiche-grille th.lib { width: 34mm; }
.fiche-grille td.v { height: 20mm; }
.fiche-grille .lecture { margin-top: 1.4em; }
.fiche-grille .lecture .deux { display: flex; gap: 18mm; margin-top: .6em; }

.legende { font-size: 0.8rem; color: #94a3b8; margin-top: 10px; }

@media print {
    @page { size: A4; margin: 12mm 16mm; }
    /* Repli si la fenêtre d'impression est bloquée : on imprime la page du
       hub, sans rien d'autre que l'aperçu. */
    .sidebar, .mob-topbar, .mob-bottombar, .mob-drawer, .mob-overlay, .mob-search-bar,
    .barre-eleve, .nouveaute-bandeau, #fb-btn, #fb-panel, .page-title, .page-sub,
    .col-grid > .card:first-child, .preview-head, .no-print, #deborde-alerte { display: none !important; }
    html, body { background: #fff; }
    .main-content { margin: 0 !important; padding: 0 !important; transform: none !important; }
    .col-grid { display: block; }
    .card { box-shadow: none; border: none; padding: 0; margin: 0; }
    #apercu { border: none; padding: 0; min-height: 0; }
    #apercu.page-a4 { max-width: none; margin: 0; }
    #apercu .ligne.deborde > .texte { outline: none; }
    .ligne-alt { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .fiche-grille { page-break-inside: avoid; }
}