/* ClassUp — styles du portail élèves / profs (index.php) et des horaires (get_horaire.php, Services/agenda.php).
   Même système visuel que le panel (assets/css/panel.css) : mêmes couleurs, même police, thème clair ou
   sombre selon l'appareil, un seul accent (bleu), le vert réservé aux succès.
   Lié avec une empreinte du contenu dans l'URL (classup_asset) : jamais resservi dans une version obsolète.
   Aucune couleur en ligne dans les vues : tout est ici. */

/* --- POLICE HÉBERGÉE LOCALEMENT (assets/fonts/, licence SIL OFL) : aucune requête vers Google Fonts --- */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   VARIABLES (identiques au panel)
   ========================================================================= */
:root {
    --bg-main: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #f9fafb;            /* zones secondaires (en-têtes de tableau, pause) */
    --text-dark: #111827;
    --text-muted: #6b7280;
    --border: #e5e7eb;
    --ligne: rgba(17, 24, 39, .07);
    --survol: rgba(17, 24, 39, .04);

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-rgb: 37, 99, 235;
    --accent-texte: #1d4ed8;
    --ok: #047857;
    --danger: #dc2626;
    --warning: #b45309;
    --ok-fond: rgba(5, 150, 105, .09);
    --danger-fond: rgba(220, 38, 38, .08);
    --warning-fond: rgba(217, 119, 6, .1);

    /* Compatibilité : noms historiques encore lus par d'anciennes règles */
    --primary: var(--accent);
    --primary-hover: var(--accent-hover);

    --champ-fond: #ffffff;
    --champ-bord: #d1d5db;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 12px 28px -8px rgba(16, 24, 40, .18);
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0e0f12;
        --surface: #16181c;
        --surface-2: #1a1c21;
        --text-dark: #ececef;
        --text-muted: #9a9ea8;
        --border: #262930;
        --ligne: rgba(255, 255, 255, .07);
        --survol: rgba(255, 255, 255, .04);

        --accent: #4d86f7;
        --accent-hover: #6b9bff;
        --accent-rgb: 77, 134, 247;
        --accent-texte: #8fb3ff;
        --ok: #34d399;
        --danger: #f87171;
        --warning: #fbbf24;
        --ok-fond: rgba(16, 185, 129, .13);
        --danger-fond: rgba(239, 68, 68, .13);
        --warning-fond: rgba(245, 158, 11, .13);

        --champ-fond: #111317;
        --champ-bord: rgba(255, 255, 255, .11);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-md: 0 16px 32px -8px rgba(0, 0, 0, .55);
        color-scheme: dark;
    }
}

/* =========================================================================
   BASE
   ========================================================================= */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px; line-height: 1.5;
    background: var(--bg-main); color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -.011em; }
::selection { background: rgba(var(--accent-rgb), .2); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Icônes (Support/vues.php : classup_icone) et monogramme */
.ico { flex: 0 0 auto; width: 18px; height: 18px; vertical-align: -3px; }
.monogramme { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: .95rem; font-weight: 700; line-height: 1; }
.monogramme.monogramme-grand { width: 52px; height: 52px; border-radius: 12px; font-size: 1.45rem; }

/* =========================================================================
   CONNEXION, A2F, FENÊTRES MODALES
   ========================================================================= */
.modern-login-wrapper { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; background: var(--bg-main); }
.modern-login-card { width: 100%; max-width: 380px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.login-logo-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 26px; text-align: center; }
.login-logo-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 6px; }
.login-logo-mark img { width: 80px; height: 80px; object-fit: contain; }
.login-logo-mark .monogramme { width: 44px; height: 44px; border-radius: 11px; font-size: 1.25rem; }
.login-logo-mark > span:not(.monogramme) { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); letter-spacing: -.015em; }
.login-school-name { max-width: 300px; font-size: .88rem; color: var(--text-muted); }

.modern-form-group { margin-bottom: 16px; }
.modern-form-group label { display: block; margin-bottom: 6px; font-size: .84rem; font-weight: 500; color: var(--text-dark); }
.modern-input {
    width: 100%; height: 42px; padding: 0 12px;
    background: var(--champ-fond); border: 1px solid var(--champ-bord); border-radius: var(--radius-md);
    color: var(--text-dark); font-family: inherit; font-size: .92rem; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.modern-input::placeholder { color: var(--text-muted); opacity: .7; }
.modern-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
.input-code { text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

.modern-btn {
    width: 100%; height: 42px; margin-top: 8px; padding: 0 16px;
    background: var(--accent); border: 0; border-radius: var(--radius-md);
    color: #fff; font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
    transition: background .15s;
}
.modern-btn:hover { background: var(--accent-hover); }
.modern-btn--secondaire { background: var(--surface); color: var(--text-dark); border: 1px solid var(--border); }
.modern-btn--secondaire:hover { background: var(--survol); }

.modern-alert { margin-top: 14px; padding: 10px 12px; border: 1px solid transparent; border-left: 3px solid var(--danger); border-radius: var(--radius-md);
    background: var(--danger-fond); color: var(--text-dark); font-size: .86rem; }
.modern-alert--info { border-left-color: var(--warning); background: var(--warning-fond); }
.rester-connecte { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; cursor: pointer; font-size: .86rem; color: var(--text-muted); }
.rester-connecte input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent); }
.captcha-zone { display: flex; justify-content: center; margin: 14px 0 4px; }
.liens-reset { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; text-align: center; }
.liens-reset br { display: none; }
.lien-discret { font-size: .86rem; color: var(--text-muted); text-decoration: none; }
.lien-discret:hover { color: var(--text-dark); }
.lien-fort { font-size: .86rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.lien-fort:hover { text-decoration: underline; }
.login-footer { margin-top: 26px; text-align: center; font-size: .75rem; color: var(--text-muted); }

.modale { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.modale--dessus { z-index: 10000; }
.modale-contenu { width: 100%; max-width: 400px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 24px; text-align: left;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.modale-contenu--centre { max-width: 380px; text-align: center; }
.modale-titre { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; color: var(--text-dark); }
.modale-note { margin: 0 0 18px; font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
.modale-actions { display: flex; gap: 10px; margin-top: 16px; }
.modale-icone-ok { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: var(--ok-fond); color: var(--ok); }
.modale-icone-ok .ico { width: 22px; height: 22px; }

/* =========================================================================
   EN-TÊTE ET NAVIGATION
   ========================================================================= */
.portal-header {
    position: sticky; top: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    height: 60px; padding: 0 24px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.header-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--text-dark); font-size: 1rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.header-brand img { height: 30px; object-fit: contain; }
.portal-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.nav-link {
    display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--radius-sm);
    color: var(--text-muted); font-size: .87rem; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background .12s, color .12s;
}
.nav-link .ico { width: 16px; height: 16px; }
.nav-link:hover { background: var(--survol); color: var(--text-dark); }
.nav-link.active { background: rgba(var(--accent-rgb), .1); color: var(--accent-texte); font-weight: 600; }
.user-menu { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.user-infos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.user-infos strong { font-size: .86rem; font-weight: 600; color: var(--text-dark); }
.user-infos span { font-size: .76rem; color: var(--text-muted); }
.btn-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-dark); font-size: .84rem; font-weight: 500; text-decoration: none; transition: background .12s;
}
.btn-badge .ico { width: 15px; height: 15px; color: var(--text-muted); }
.btn-badge:hover { background: var(--survol); }
.btn-logout { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; }
.btn-logout:hover { background: var(--danger-fond); color: var(--danger); }
.hamburger-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; background: none; border: 0; border-radius: var(--radius-md); color: var(--text-dark); cursor: pointer; }
.hamburger-btn .ico { width: 22px; height: 22px; }
.hamburger-btn .ico-fermer, .hamburger-btn[aria-expanded="true"] .ico-ouvrir { display: none; }
.hamburger-btn[aria-expanded="true"] .ico-fermer { display: inline; }
.mobile-user-info { display: none; }
.mobile-user-nom { display: block; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.mobile-user-role { font-size: .84rem; color: var(--text-muted); }
.lien-menu-mobile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dark); font-weight: 500; text-decoration: none; }
.lien-menu-mobile:hover { background: var(--survol); }
.lien-menu-danger { color: var(--danger); }

/* =========================================================================
   CONTENU
   ========================================================================= */
.content-wrapper { max-width: 1120px; min-height: calc(100vh - 60px); margin: 0 auto; padding: 28px 24px 56px; }
.page { display: none; }
.page.active { display: block; animation: apparition .18s ease-out; }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }
.page h2 { margin: 0 0 18px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; color: var(--text-dark); }

.panel-card { margin-bottom: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.clean-input {
    height: 40px; padding: 0 12px; background: var(--champ-fond); border: 1px solid var(--champ-bord); border-radius: var(--radius-md);
    color: var(--text-dark); font-family: inherit; font-size: .9rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.clean-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }

.btn-primary, .btn-secondaire {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px;
    border-radius: var(--radius-md); font-family: inherit; font-size: .88rem; font-weight: 600; white-space: nowrap;
    text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondaire { background: var(--surface); border: 1px solid var(--border); color: var(--text-dark); box-shadow: var(--shadow-sm); }
.btn-secondaire:hover { background: var(--survol); }
.btn-secondaire:disabled { opacity: .45; cursor: default; }
.btn-primary .ico, .btn-secondaire .ico { width: 16px; height: 16px; }

/* Listes */
.data-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.data-list > li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.data-list > li strong { display: block; margin-bottom: 2px; font-size: .95rem; font-weight: 600; color: var(--text-dark); }
.data-list > li span { font-size: .85rem; color: var(--text-muted); }
.meta-liste { display: flex; flex-direction: column; gap: 2px; }

/* États vides, succès, erreurs */
.etat-vide, .data-list > li.etat-vide {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 36px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
    color: var(--text-muted); font-size: .92rem; text-align: center;
}
.etat-vide strong { color: var(--text-dark); font-size: .98rem; font-weight: 600; }
.etat-vide.etat-ok { border-style: solid; border-color: transparent; background: var(--ok-fond); }
.etat-vide.etat-ok strong { color: var(--ok); }
.message-erreur, .data-list > li.message-erreur { margin: 0; padding: 12px 14px; border-left: 3px solid var(--danger); border-radius: var(--radius-md); background: var(--danger-fond); color: var(--text-dark); font-size: .9rem; }

/* Annonces */
.annonce-card { margin-bottom: 10px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.annonce-card h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.annonce-card p { margin: 0 0 12px; font-size: .92rem; line-height: 1.6; color: var(--text-dark); }
.annonce-meta { font-size: .8rem; color: var(--text-muted); }

/* Agenda : devoirs à venir */
.data-list > li.devoir { display: block; }
.devoir-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.data-list > li .devoir-echeance { display: block; margin-bottom: 2px; font-size: .78rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.data-list > li.devoir-aujourdhui .devoir-echeance { color: var(--danger); }
.data-list > li.devoir-demain .devoir-echeance { color: var(--warning); }
.data-list > li .devoir-matiere { margin: 0; }
.devoir-prof, .data-list > li .devoir-prof { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.devoir-contenu { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--ligne); border-radius: var(--radius-md); font-size: .9rem; line-height: 1.55; color: var(--text-dark); }
.agenda-cours, .data-list > li .agenda-cours { display: inline-block; margin-top: 2px; font-size: .76rem; color: var(--text-muted); }

/* Page « Projet » */
.projet-carte { max-width: 460px; margin: 0 auto; padding: 32px 28px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.projet-logo { max-height: 90px; margin-bottom: 14px; }
.projet-carte .monogramme { margin-bottom: 14px; }
.projet-carte h2, .page .projet-carte h2 { margin: 0 0 4px; font-size: 1.2rem; }
.projet-ecole { margin: 0 0 22px; font-size: .9rem; color: var(--text-muted); }
.projet-infos { margin: 0 0 22px; border-top: 1px solid var(--border); text-align: left; }
.projet-infos div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.projet-infos dt { color: var(--text-muted); }
.projet-infos dd { margin: 0; font-weight: 600; color: var(--text-dark); }

/* =========================================================================
   HORAIRE — ENTÊTE ET CONTENEUR
   ========================================================================= */
.horaire-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.horaire-entete h2, .page .horaire-entete h2 { margin: 0; }
.horaire-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.horaire-barre .clean-input { min-width: 240px; }
.schedule-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.horaire-message { margin: 0; padding: 40px 20px; text-align: center; font-size: .92rem; color: var(--text-muted); }
.horaire-message.horaire-erreur { color: var(--danger); }
.jours-onglets { display: none; }
.badge-auj { display: block; margin-top: 1px; font-size: .64rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent-texte); }

/* Blocs de cours : style UNIFORME et neutre (fond gris léger, trait d'accent à gauche).
   La teinte par matière (--h, envoyée par le serveur) est volontairement ignorée : un arc-en-ciel
   de couleurs pastel (jaune, rose…) faisait gadget. Seul le PDF l'utilise encore. */
.slot, .ag-ev {
    --bloc-fond: #f3f5f8;
    --bloc-bord: #e3e7ee;
    --bloc-trait: var(--accent);
    --bloc-heure: var(--text-muted);
}
@media (prefers-color-scheme: dark) {
    .slot, .ag-ev {
        --bloc-fond: #1d2026;
        --bloc-bord: #2b2f37;
    }
}

/* =========================================================================
   HORAIRE — GRILLE COMMUNE (get_horaire.php) : grille fine, blocs sobres
   ========================================================================= */
.schedule-table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; font-size: .86rem; }
.schedule-table thead th {
    height: 46px; padding: 0 10px; background: var(--surface); border-bottom: 1px solid var(--border);
    color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
.schedule-table thead th:first-child { position: sticky; left: 0; z-index: 2; width: 104px; }
.schedule-table tbody th {
    position: sticky; left: 0; z-index: 1;
    padding: 10px 12px; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--ligne);
    color: var(--text-muted); font-size: .76rem; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; vertical-align: top; white-space: nowrap;
}
.schedule-table td { height: 62px; padding: 4px; border-bottom: 1px solid var(--ligne); border-left: 1px solid var(--ligne); vertical-align: top; }
.schedule-table tbody tr:last-child th, .schedule-table tbody tr:last-child td { border-bottom: 0; }
.schedule-table td.slot .bloc {
    height: 100%; min-height: 52px; padding: 7px 9px;
    background: var(--bloc-fond); border: 1px solid var(--bloc-bord); border-left: 3px solid var(--bloc-trait); border-radius: var(--radius-sm);
}
.schedule-table td .subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--text-dark); font-size: .85rem; font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }
.schedule-table td .details { display: block; margin-top: 2px; overflow: hidden; color: var(--text-muted); font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.schedule-table td.break.lunch { height: 34px; padding: 0 12px; background: var(--surface-2); color: var(--text-muted); font-size: .76rem; font-weight: 500; text-align: center; vertical-align: middle; }
/* Jour courant : en-tête à l'accent, colonne légèrement teintée */
.schedule-table thead th.auj { color: var(--accent-texte); box-shadow: inset 0 -2px 0 var(--accent); }
.schedule-table td.auj { background: rgba(var(--accent-rgb), .035); }

/* =========================================================================
   HORAIRE — AGENDA (heures libres par cours, Services/agenda.php)
   La hauteur d'une heure arrive par --ag-heure (seule valeur propre à chaque agenda).
   ========================================================================= */
.ag { --ag-tete: 52px; --ag-heure: 90px; display: flex; gap: 0; min-width: 760px; padding: 12px 16px 20px 8px; font-size: .85rem; }
.ag-axe { position: relative; flex: 0 0 52px; margin-top: var(--ag-tete); }
.ag-axe span { position: absolute; right: 10px; transform: translateY(-50%); color: var(--text-muted); font-size: .72rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.ag-col { flex: 1 1 0; min-width: 0; }
.ag-jour {
    display: flex; flex-direction: column; justify-content: flex-end; height: 44px; margin-bottom: 8px; padding: 0 8px 8px;
    border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em;
}
.ag-col.ag-auj .ag-jour { color: var(--accent-texte); box-shadow: inset 0 -2px 0 var(--accent); }
.ag-corps {
    position: relative; border-left: 1px solid var(--ligne);
    background-image: linear-gradient(to bottom, var(--ligne) 1px, transparent 1px);
    background-size: 100% var(--ag-heure);
}
.ag-col.ag-auj .ag-corps { background-color: rgba(var(--accent-rgb), .035); }
.ag-ev {
    position: absolute; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 6px 8px;
    background: var(--bloc-fond); border: 1px solid var(--bloc-bord); border-left: 3px solid var(--bloc-trait); border-radius: var(--radius-sm);
    color: var(--text-dark); line-height: 1.3;
}
.ag-ev:hover { z-index: 2; box-shadow: var(--shadow-md); }
.ag-h { color: var(--bloc-heure); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .83rem; font-weight: 600; overflow-wrap: break-word; }
.ag-d { overflow: hidden; color: var(--text-muted); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.ag-ev.ag-court { gap: 0; padding: 3px 8px; }
.ag-ev.ag-court .ag-t { -webkit-line-clamp: 1; }
.ag-ev.ag-court .ag-d { display: none; }
.ag-vide { display: none; }

/* Tablette : colonnes lisibles, défilement horizontal (colonne des heures figée) */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .schedule-table { min-width: 880px; }
    .ag { min-width: 900px; }
}

/* =========================================================================
   JOURNAL DE CLASSE (vue semaine, assets/js/journal-semaine.js)
   ========================================================================= */
.journal-navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.journal-semaine-libelle { font-size: .95rem; font-weight: 600; color: var(--text-dark); }
.journal-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.journal-colonne { display: flex; flex-direction: column; }
.journal-jour-titre { padding: 6px 2px 8px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.journal-jour-titre.journal-aujourdhui, .journal-jour-titre.journal-day-today-header { color: var(--accent-texte); box-shadow: inset 0 -2px 0 var(--accent); }
.journal-jour-date { margin-top: 1px; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.journal-jour-entrees { display: flex; flex-direction: column; gap: 8px; min-height: 60px; padding-top: 10px; }
.journal-jour-vide { padding: 10px 0; color: var(--text-muted); font-size: .78rem; text-align: center; opacity: .5; }
.journal-vide { padding: 30px; color: var(--text-muted); text-align: center; }
.journal-entry { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: .86rem; line-height: 1.5; }
.journal-entry .je-matiere { display: block; margin-bottom: 2px; color: var(--text-dark); font-size: .9rem; font-weight: 600; }
.journal-entry .je-meta { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: .74rem; }
.journal-entry .je-contenu { color: var(--text-dark); font-size: .85rem; white-space: pre-wrap; }

/* =========================================================================
   MES PRÉSENCES : résumé, onglets Liste / Justification
   ========================================================================= */
.presences-intro { margin: -8px 0 16px; color: var(--text-muted); font-size: .9rem; }
.presences-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.pr-chiffre { display: flex; flex-direction: column; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); font-size: .82rem; }
.pr-chiffre strong { color: var(--text-dark); font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pr-absent strong { color: var(--danger); }
.pr-retard strong { color: var(--warning); }

.presences-onglets { display: inline-flex; gap: 2px; margin-bottom: 16px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.presences-onglets button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: none; border: 0; border-radius: var(--radius-sm);
    color: var(--text-muted); font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; }
.presences-onglets button .ico { width: 16px; height: 16px; }
.presences-onglets button small { font-weight: 400; opacity: .8; }
.presences-onglets button[aria-selected="true"] { background: var(--surface); color: var(--text-dark); box-shadow: var(--shadow-sm); font-weight: 600; }
.pr-compteur { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 600; line-height: 18px; text-align: center; }

/* Pastilles X / R */
.pc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 700; line-height: 1; }
.pc-absent { background: var(--danger-fond); color: var(--danger); }
.pc-retard { background: var(--warning-fond); color: var(--warning); }
.pc.pc-justifie { background: var(--ok-fond); color: var(--ok); }
.pc.pc-attente { border: 1px dashed currentColor; }
.presences-legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; color: var(--text-muted); font-size: .82rem; }
.presences-legende span { display: inline-flex; align-items: center; gap: 6px; }
.presences-legende .pc { width: 20px; height: 20px; font-size: .7rem; }

.presences-grille-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.presences-grille { width: 100%; border-collapse: collapse; font-size: .85rem; }
.presences-grille th, .presences-grille td { padding: 8px 6px; border-bottom: 1px solid var(--ligne); text-align: center; }
.presences-grille thead th { background: var(--surface-2); color: var(--text-muted); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.presences-grille thead th small { display: block; font-weight: 400; opacity: .75; }
.presences-grille tbody tr:last-child th, .presences-grille tbody tr:last-child td { border-bottom: 0; }
.presences-grille td { min-width: 44px; border-left: 1px solid var(--ligne); }
.presences-grille .pg-date { position: sticky; left: 0; z-index: 1; padding: 8px 14px; background: var(--surface); color: var(--text-dark); font-weight: 500; text-align: left; white-space: nowrap; }
.presences-grille thead .pg-date { background: var(--surface-2); color: var(--text-muted); }

.justif-titre { margin: 4px 0 10px; color: var(--text-dark); font-size: .95rem; font-weight: 600; }
.justif-titre span { color: var(--text-muted); font-weight: 400; }
.justif-vide { margin: 0 0 20px; color: var(--text-muted); font-size: .9rem; }
.justif-liste { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.justif-item { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.3fr) minmax(170px, 1.3fr); align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 10px; }
.justif-item.justif-non { border-left-color: var(--danger); }
.justif-item.justif-attente { border-left-color: var(--warning); }
.justif-item.justif-ok { border-left-color: var(--ok); }
.justif-quand strong { display: block; color: var(--text-dark); font-size: .9rem; font-weight: 600; }
.justif-quand span, .justif-quoi small, .justif-etat small { color: var(--text-muted); font-size: .8rem; }
.justif-quoi { display: flex; align-items: center; gap: 10px; color: var(--text-dark); font-size: .9rem; }
.justif-quoi small { display: block; }
.justif-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.justif-badge { padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; }
.justif-badge-ok { background: var(--ok-fond); color: var(--ok); }
.justif-badge-attente { background: var(--warning-fond); color: var(--warning); }
.justif-badge-non { background: var(--danger-fond); color: var(--danger); }
.justif-aide { margin: 0; color: var(--text-muted); font-size: .85rem; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
    .user-infos { display: none; }
}
@media (max-width: 900px) {
    .hamburger-btn { display: grid; }
    .user-menu { display: none; }
    .portal-nav {
        position: absolute; top: 60px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 16px 20px;
        background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
        clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .22s ease-out, visibility .22s;
    }
    .portal-nav.menu-open { clip-path: inset(0 0 0 0); visibility: visible; }
    .nav-link { padding: 11px 12px; font-size: .95rem; }
    .nav-link .ico { width: 18px; height: 18px; }
    .mobile-user-info { display: block; margin-bottom: 8px; padding: 4px 12px 14px; border-bottom: 1px solid var(--border); }
    .mobile-user-info.mobile-user-actions { margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); border-bottom: 0; }
    .content-wrapper { padding: 22px 16px 48px; }
}
@media (max-width: 767.98px) {
    .presences-resume { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
    .pr-chiffre { padding: 10px 12px; }
    .pr-chiffre strong { font-size: 1.25rem; }
    .presences-onglets { display: flex; }
    .presences-onglets button { flex: 1; justify-content: center; }
    .justif-item { grid-template-columns: 1fr; gap: 8px; }
    .horaire-barre, .horaire-barre .clean-input { width: 100%; min-width: 0; }
    .horaire-barre .clean-input { flex: 1; }
    .journal-grille { grid-template-columns: 1fr; }
}

/* =========================================================================
   HORAIRE — MOBILE (< 768 px) : un jour à la fois, sans défilement horizontal
   ni texte tronqué. Le jour est choisi par les onglets (ou un balayage, portal.js).
   ========================================================================= */
@media (max-width: 767.98px) {
    .jours-onglets { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--border); }
    .jour-onglet {
        flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 2px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
        background: none; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted);
        font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1.2; cursor: pointer;
        -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s;
    }
    .jour-onglet small { color: var(--accent-texte); font-size: .6rem; font-weight: 600; }
    .jour-onglet.auj { color: var(--text-dark); }
    .jour-onglet[aria-selected="true"] { background: var(--accent); color: #fff; }
    .jour-onglet[aria-selected="true"] small { color: #fff; }

    /* Seul le jour choisi reste affiché */
    .horaire[data-jour-actif="1"] .j:not(.j1),
    .horaire[data-jour-actif="2"] .j:not(.j2),
    .horaire[data-jour-actif="3"] .j:not(.j3),
    .horaire[data-jour-actif="4"] .j:not(.j4),
    .horaire[data-jour-actif="5"] .j:not(.j5),
    .horaire[data-jour-actif="6"] .j:not(.j6),
    .horaire[data-jour-actif="7"] .j:not(.j7) { display: none !important; }

    /* Grille commune : chaque ligne devient « heure | cours du jour », pleine largeur */
    .schedule-table, .schedule-table thead, .schedule-table tbody { display: block; width: 100%; min-width: 0; }
    .schedule-table thead { display: none; }
    .schedule-table tbody { padding: 6px 8px; }
    .schedule-table tr { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ligne); }
    .schedule-table tbody tr:last-child { border-bottom: 0; }
    .schedule-table th, .schedule-table td { position: static; display: flex; flex-direction: column; justify-content: center; height: auto; min-height: 48px; padding: 0; border: 0; background: none; }
    .schedule-table tbody th { align-items: flex-end; padding-top: 6px; justify-content: flex-start; white-space: normal; }
    .schedule-table td.auj { background: none; }
    .schedule-table td.break.lunch { min-height: 32px; border-radius: var(--radius-sm); background: var(--surface-2); }
    .schedule-table td.slot .bloc { min-height: 48px; }
    .schedule-table td .subject { display: block; -webkit-line-clamp: unset; overflow: visible; }
    .schedule-table td .details { overflow: visible; white-space: normal; }

    /* Agenda : liste des cours du jour choisi, textes complets */
    .ag { flex-direction: column; min-width: 0; padding: 12px; }
    .ag-axe, .ag-jour { display: none; }
    .ag-corps { height: auto !important; padding: 0; border: 0; background: none !important; }
    .ag-ev { position: static !important; width: auto !important; height: auto !important; margin: 0 0 8px; padding: 10px 12px; }
    .ag-ev.ag-court { gap: 2px; padding: 10px 12px; }
    .ag-t, .ag-ev.ag-court .ag-t { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: .92rem; }
    .ag-d, .ag-ev.ag-court .ag-d { display: block; overflow: visible; white-space: normal; font-size: .8rem; }
    .ag-vide { display: block; padding: 20px 8px; color: var(--text-muted); font-size: .85rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .page.active, .portal-nav { animation: none; transition: none; }
    .schedule-wrapper { scroll-behavior: auto; }
}