/* Observation en classe — styles tactiles (01/11/2026). Les couleurs des niveaux viennent du
   catalogue (variable --c posée en ligne) ; tout le reste suit les variables Tabler, mode nuit compris. */
:root { --obs-primary: #1f5fbf; }
body { font-size: 1rem; }
.obs-navbar { border-bottom: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); }
.obs-brand { font-weight: 700; }
.obs-contenu { padding-top: 1rem; padding-bottom: 2rem; }

/* Tuiles classes / élèves */
.obs-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .75rem; }
.obs-tuile { display: flex; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid var(--tblr-border-color); border-radius: .75rem;
    background: var(--tblr-bg-surface); color: inherit; text-decoration: none; min-height: 4.6rem; transition: box-shadow .12s, transform .12s; }
.obs-tuile:hover, .obs-tuile:focus-visible { box-shadow: 0 4px 14px rgba(0,0,0,.12); transform: translateY(-1px); color: inherit; }
.obs-tuile.obs-tuile-classe { font-size: 1.15rem; font-weight: 700; justify-content: space-between; }
.obs-avatar { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(31, 95, 191, .14); color: var(--obs-primary); font-weight: 700; }
.obs-tuile-nom { font-weight: 600; line-height: 1.2; }
.obs-tuile-sous { font-size: .8rem; color: var(--tblr-secondary-color); }
.obs-tuile .badge { font-size: .72rem; }

/* Bandeau élève */
.obs-bandeau { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .9rem 1.1rem; border-radius: .75rem;
    background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); box-shadow: inset 6px 0 0 var(--obs-primary); }
.obs-bandeau .obs-avatar { width: 3.2rem; height: 3.2rem; font-size: 1.1rem; }
.obs-bandeau-nom { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.obs-nav-eleve { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 1px solid var(--tblr-border-color); color: inherit; }
.obs-nav-eleve.disabled { opacity: .3; pointer-events: none; }

/* Vues */
.obs-vues .btn { min-height: 2.8rem; }
.obs-vues .btn.active { font-weight: 700; }

/* Composants de la fiche */
.pilules { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pilules .btn { border-radius: 999px; }
.obs-pilule { min-height: 2.7rem; display: inline-flex; align-items: center; }
.obs-bloc-titre { font-weight: 600; font-size: 1rem; }
.obs-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; font-size: .85rem; }
.obs-legende-item { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.obs-pastille { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
    background: var(--c, #9aa6b5); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; flex: none; }
.obs-serie { display: inline-flex; gap: .2rem; flex-wrap: wrap; }
.obs-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem .2rem .25rem; border-radius: 999px;
    border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); font-size: .85rem; }
.obs-item { padding-bottom: .25rem; }
.obs-item .obs-valeur { font-size: .85rem; font-weight: 600; color: var(--c, #9aa6b5); white-space: nowrap; }
.obs-item[data-niveau="0"] .obs-valeur { font-weight: 400; }
.obs-aide { margin-top: 0; margin-bottom: .15rem; font-size: .78rem; }
.obs-range { height: 2.2rem; accent-color: var(--c, #9aa6b5); touch-action: pan-y; }
.obs-range::-webkit-slider-runnable-track { height: .55rem; border-radius: .3rem;
    background: linear-gradient(90deg, #d63939 0 20%, #f59f00 20% 45%, #2fb344 45% 70%, #1f5fbf 70% 100%); opacity: .35; }
.obs-range::-moz-range-track { height: .55rem; border-radius: .3rem;
    background: linear-gradient(90deg, #d63939 0 20%, #f59f00 20% 45%, #2fb344 45% 70%, #1f5fbf 70% 100%); opacity: .35; }
.obs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.7rem; height: 1.7rem; margin-top: -.58rem; border-radius: 50%;
    background: var(--c, #9aa6b5) !important; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.obs-range::-webkit-slider-thumb:active { background: var(--c, #9aa6b5) !important; }
.obs-range::-moz-range-thumb { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--c, #9aa6b5) !important; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.obs-item[data-niveau="0"] .obs-range::-webkit-slider-runnable-track { opacity: .18; }
.obs-item[data-niveau="0"] .obs-range::-moz-range-track { opacity: .18; }
.obs-switch .form-check-input { width: 3rem; height: 1.6rem; }
.obs-switch .form-check-label { margin-left: .5rem; }
.obs-adapt .pilules { gap: .3rem; }
.obs-barre-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .75rem 1rem; margin: 0 -.5rem; background: var(--tblr-bg-surface); border-top: 1px solid var(--tblr-border-color);
    box-shadow: 0 -6px 16px rgba(0,0,0,.06); padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
.obs-barre-resume { font-size: .85rem; }
.obs-table-synthese td, .obs-table-synthese th { vertical-align: middle; }
.obs-brouillon { display: none; }
.obs-brouillon.visible { display: block; }

/* État vide */
.etat-vide { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: 1rem 0; padding: 1.75rem 1rem; text-align: center;
    border: 1.5px dashed var(--tblr-border-color); border-radius: .75rem; background: var(--tblr-bg-surface-secondary); }
.etat-vide-icone { font-size: 1.9rem; color: var(--obs-primary); }
.etat-vide-titre { font-weight: 600; }
.etat-vide-texte { font-size: .85rem; color: var(--tblr-secondary-color); max-width: 36rem; }

/* Connexion */
.obs-login { max-width: 26rem; margin: 3rem auto; }

@media (max-width: 767.98px) {
    .obs-barre-actions .btn-lg { flex: 1 1 auto; }
    .obs-barre-resume { display: none; }
    .obs-tuiles { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

/* Impression de la synthèse (dossier CAPPEI) : sans navigation, tableaux à plat. */
@media print {
    .obs-navbar, .obs-vues, .footer, .breadcrumb, .btn, .toast-container { display: none !important; }
    .obs-contenu { padding: 0; }
    .card { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
    .obs-pastille, .badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .obs-bandeau { box-shadow: none; border: 1px solid #ccc; }
}