/* ════════════════════════════════════════════════════════════════════
   ÉCOLE — Système de design
   Encre profonde + or éditorial. Calme et structuré par défaut ;
   l'accent n'intervient que pour ce qui compte vraiment : actions
   principales, états actifs, chiffres clés.
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* Encre — structure, autorité, texte */
    --encre: #141d33;
    --encre-douce: #2a3655;
    --encre-eclat: #3d4b73;

    /* Or — l'unique signal chaud, utilisé avec parcimonie */
    --or: #b8872f;
    --or-fonce: #96701f;
    --or-clair: #e8c777;
    --or-fond: #fbf3e2;

    /* Sauge — succès, croissance (évite le vert générique) */
    --sauge: #2f6b57;
    --sauge-fond: #e7f3ee;

    /* Neutres — fond légèrement tiède, jamais crème ni blanc pur */
    --fond: #f5f5f3;
    --carte: #ffffff;
    --bordure: #e4e1da;
    --bordure-vive: #d4cfc2;
    --texte: #1c2230;
    --texte-doux: #6b6f7d;
    --texte-tenu: #9a9da8;

    /* Alertes */
    --rouge: #b2433a;
    --rouge-fond: #fbeceb;
    --ambre: #a36a1f;
    --ambre-fond: #fbf0dd;
    --bleu: #35507e;
    --bleu-fond: #ecf1fa;

    /* Compat : l'ancien nom --primaire reste pointé vers l'or, pour les
       pages qui le référencent encore directement via style inline. */
    --primaire: var(--or);
    --primaire-fonce: var(--or-fonce);
    --sidebar-bg: var(--encre);
    --sidebar-texte: #aab2c8;
    --sidebar-actif: var(--encre-douce);
    --surface-alt: #f7f6f3;
    --vert: var(--sauge);

    --rayon: 12px;
    --rayon-sm: 8px;
    --ombre: 0 1px 2px rgba(20,29,51,.04), 0 6px 20px rgba(20,29,51,.06);
    --ombre-hover: 0 2px 4px rgba(20,29,51,.06), 0 14px 32px rgba(20,29,51,.1);

    --police-titre: 'Lexend', 'Segoe UI', system-ui, sans-serif;
    --police-texte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ── MODE SOMBRE ──
   Le choix explicite de la personne (bouton lune/soleil, mémorisé) l'emporte toujours ;
   sans choix explicite, on suit la préférence système (prefers-color-scheme). La sidebar
   reste volontairement sombre dans les deux thèmes (c'est déjà sa couleur de marque) —
   seules les surfaces claires (fond de page, cartes, tableaux, formulaires) changent. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fond: #0d1119;
        --carte: #161b29;
        --bordure: #262e42;
        --bordure-vive: #37405a;
        --texte: #e7e9f1;
        --texte-doux: #a7adc2;
        --texte-tenu: #767d94;
        --surface-alt: #1a2032;
        --or-fond: rgba(184,135,47,.16);
        --sauge-fond: rgba(47,107,87,.22);
        --rouge-fond: rgba(178,67,58,.2);
        --ambre-fond: rgba(163,106,31,.22);
        --bleu-fond: rgba(53,80,126,.25);
        --ombre: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
        --ombre-hover: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.45);
    }
}
:root[data-theme="dark"] {
    --fond: #0d1119;
    --carte: #161b29;
    --bordure: #262e42;
    --bordure-vive: #37405a;
    --texte: #e7e9f1;
    --texte-doux: #a7adc2;
    --texte-tenu: #767d94;
    --surface-alt: #1a2032;
    --or-fond: rgba(184,135,47,.16);
    --sauge-fond: rgba(47,107,87,.22);
    --rouge-fond: rgba(178,67,58,.2);
    --ambre-fond: rgba(163,106,31,.22);
    --bleu-fond: rgba(53,80,126,.25);
    --ombre: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35);
    --ombre-hover: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.45);
}

/* Bouton bascule jour/nuit — repris dans la barre utilisateur de la sidebar et
   dans la barre du portail parents. */
.bouton-theme {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 8px; border: none; background: rgba(255,255,255,.08); color: inherit; cursor: pointer;
    flex-shrink: 0; transition: background .12s ease;
}
.bouton-theme:hover { background: rgba(255,255,255,.16); }
.bouton-theme i[data-lucide] { width: 16px; height: 16px; }
.bouton-theme .icone-lune { display: none; }
:root[data-theme="dark"] .bouton-theme .icone-soleil { display: none; }
:root[data-theme="dark"] .bouton-theme .icone-lune { display: inline-block; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; font-family: var(--police-texte); background: var(--fond); color: var(--texte);
    font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--police-titre); letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
i[data-lucide] { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

/* ── LAYOUT ── */
.layout { display: flex; min-height: 100vh; }
.content { flex: 1; padding: 30px 36px; max-width: 100%; min-width: 0; }

/* Filet de sécurité global : de nombreuses pages placent ces blocs dans une grille ou
   une ligne flexible en `1fr`, qui par défaut ne peut pas rétrécir sous la largeur
   naturelle de son contenu (un graphique, un long nombre...) — d'où des débordements
   horizontaux. min-width:0 lève cette contrainte, sans rien changer visuellement
   tant que le contenu tient déjà dans l'espace disponible. */
.panneau, .sous-panneau, .carte-kpi, .grille-kpi > * { min-width: 0; }

/* ── SIDEBAR ── */
.sidebar {
    width: 258px; background: linear-gradient(185deg, var(--encre) 0%, #0f1526 100%);
    color: var(--sidebar-texte); display: flex; flex-direction: column; flex-shrink: 0;
    min-height: 100vh; min-height: 100dvh;
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; font-family: var(--police-titre); font-weight: 700; font-size: 15px; color: #fff; }
.sidebar-nav { flex: 1; min-height: 0; padding: 8px 12px; overflow-y: auto; }
.sidebar-nav ul { list-style: none; margin: 0; padding: 0; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-radius: 8px;
    font-size: 12.8px; font-weight: 500; margin-bottom: 1px; line-height: 1.3; color: var(--sidebar-texte);
    transition: background .12s ease, color .12s ease;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar-nav a.actif { background: var(--or); color: var(--encre); font-weight: 700; }
.sidebar-nav a.actif i[data-lucide] { color: var(--encre); }
.sidebar-nav a i[data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }

.sidebar-section-label { font-family: var(--police-titre); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #6b7390; padding: 14px 13px 5px; }
.sidebar-section-label:first-child { padding-top: 6px; }

.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sidebar-user .avatar-init { width: 34px; height: 34px; border-radius: 50%; background: var(--or); color: var(--encre); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; overflow: hidden; }
.sidebar-user .avatar-init img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user .infos { flex: 1; min-width: 0; }
.sidebar-user .infos a { display: block; }
.sidebar-user .nom { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .role { font-size: 11px; opacity: .65; }
.sidebar-user > a { color: var(--sidebar-texte); flex-shrink: 0; }
.sidebar-user > a:hover { color: #fff; }

.sidebar input[type="search"] {
    border-radius: 8px; border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.07) !important; color: #fff !important;
}
.sidebar input[type="search"]::placeholder { color: #8891ab; }
.sidebar input[type="search"]:focus { outline: none; border-color: var(--or) !important; background: rgba(255,255,255,.11) !important; }

/* ── PAGE HEADER ── */
.page-header {
    margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px;
    background: linear-gradient(120deg, var(--encre) 0%, #27345a 100%);
    border-radius: 16px; padding: 26px 28px; color: #fff; position: relative; overflow: hidden;
}
.page-header::after {
    content: ''; position: absolute; top: -40%; right: -8%; width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(184,135,47,.18) 0%, transparent 72%); pointer-events: none;
}
.page-header h1 { font-size: 1.55em; margin: 0 0 6px; color: #fff; font-weight: 700; display: flex; align-items: center; gap: 9px; position: relative; }
.page-header .sous-titre { color: rgba(255,255,255,.72); font-size: 13px; margin: 0; position: relative; }
.page-header .sous-titre a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.page-header .btn-secondaire { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.page-header .btn-secondaire:hover { background: rgba(255,255,255,.2); }
.page-header .badge { font-size: 12px; }
.page-header > form { position: relative; }

/* ── PANNEAUX / CARTES ── */
.panneau { background: var(--carte); border-radius: var(--rayon); border: 1px solid var(--bordure); margin-bottom: 18px; box-shadow: var(--ombre); }
.panneau-entete {
    display: flex; align-items: center; gap: 8px; padding: 15px 20px; border-bottom: 1px solid var(--bordure);
    font-family: var(--police-titre); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-douce);
}
.barre-outils-liste {
    display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center;
    background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 13px 16px;
}
.barre-outils-liste input[type="search"] { flex: 1; min-width: 180px; padding: 9px 14px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure); font-size: 13px; background: var(--surface-alt); }
.barre-outils-liste select { padding: 9px 12px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure); font-size: 13px; background: var(--surface-alt); }

/* ── KPI ── */
.grille-kpi { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.carte-kpi {
    background: var(--carte); border-radius: var(--rayon); border: 1px solid var(--bordure); padding: 19px 20px;
    display: flex; align-items: center; gap: 14px; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
a.carte-kpi:hover, .carte-kpi.carte-kpi-lien:hover { transform: translateY(-2px); box-shadow: var(--ombre-hover); text-decoration: none; color: inherit; border-color: var(--bordure-vive); }
.carte-kpi .icone { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.carte-kpi > div:not(.icone) { min-width: 0; }
.carte-kpi strong { display: block; font-family: var(--police-titre); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--texte); overflow-wrap: break-word; }
.carte-kpi span { font-size: 12px; color: var(--texte-doux); overflow-wrap: break-word; }

/* ── BOUTONS ── */
.btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: var(--rayon-sm); border: none;
    font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: var(--police-texte);
    transition: background .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primaire { background: var(--or); color: var(--encre); box-shadow: 0 1px 2px rgba(150,112,31,.25); }
.btn-primaire:hover { background: var(--or-fonce); color: #fff; }
.btn-secondaire { background: var(--carte); color: var(--texte); border: 1px solid var(--bordure-vive); }
.btn-secondaire:hover { background: var(--surface-alt); border-color: var(--encre-eclat); }
.btn-danger { background: var(--rouge-fond); color: var(--rouge); }
.btn-danger:hover { filter: brightness(0.92); }
.btn-large { width: 100%; justify-content: center; padding: 12px; font-size: 14px; }

/* ── MODALE DE CONFIRMATION ──
   Remplace les confirm()/alert() natifs du navigateur (non stylables, incohérents
   en thème sombre) par une boîte de dialogue intégrée au design de l'application. */
.modale-fond {
    display: none; position: fixed; inset: 0; background: rgba(12,16,28,.55); z-index: 500;
    align-items: center; justify-content: center; padding: 20px;
}
.modale-fond.ouverte { display: flex; }
.modale-boite {
    background: var(--carte); border-radius: var(--rayon); border: 1px solid var(--bordure);
    box-shadow: var(--ombre-hover); max-width: 420px; width: 100%; padding: 22px 24px;
    animation: modale-apparition .15s ease;
}
@keyframes modale-apparition { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.modale-boite h3 {
    display: flex; align-items: center; gap: 9px; font-family: var(--police-titre); font-size: 15.5px;
    font-weight: 700; margin: 0 0 10px; color: var(--texte);
}
.modale-boite h3 i { color: var(--rouge); width: 19px; height: 19px; flex-shrink: 0; }
.modale-boite p { margin: 0 0 20px; color: var(--texte-doux); font-size: 14px; line-height: 1.5; }
.modale-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ── TABLEAU ── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-family: var(--police-titre); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); padding: 11px 16px; border-bottom: 1.5px solid var(--bordure); white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--bordure); font-size: 13.3px; color: var(--texte); }
.table tr:last-child td { border-bottom: none; }
.table tr.ligne-cliquable { cursor: pointer; transition: background .1s ease; }
.table tr.ligne-cliquable:hover { background: var(--surface-alt); }
/* Un tableau dans un panneau défile horizontalement plutôt que de casser la mise en page sur petit écran */
.panneau:has(.table) { overflow-x: auto; }

/* ── BADGES ── */
.badge { display: inline-block; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.badge-planifie { background: var(--bleu-fond); color: var(--bleu); }
.badge-en_cours { background: var(--or-fond); color: var(--or-fonce); }
.badge-en_attente { background: var(--ambre-fond); color: var(--ambre); }
.badge-suspendu { background: var(--rouge-fond); color: var(--rouge); }
.badge-termine { background: var(--sauge-fond); color: var(--sauge); }
.badge-annule { background: var(--surface-alt); color: var(--texte-tenu); }

/* ── BARRE DE PROGRESSION ── */
.progression { background: var(--surface-alt); border-radius: 20px; height: 8px; overflow: hidden; width: 100%; }
.progression-remplie { background: var(--or); height: 100%; border-radius: 20px; }

/* ── FORMULAIRES ── */
.formulaire label { display: block; font-size: 12.5px; font-weight: 600; margin: 13px 0 5px; color: var(--encre-douce); }
.formulaire label:first-child { margin-top: 0; }
.formulaire input, .formulaire select, .formulaire textarea {
    width: 100%; padding: 9px 12px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure-vive); font-size: 13.5px;
    font-family: inherit; background: var(--carte); color: var(--texte); transition: border-color .12s ease, box-shadow .12s ease;
}
.formulaire input::placeholder, .formulaire textarea::placeholder { color: var(--texte-tenu); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(184,135,47,.14); }
.formulaire-ligne { display: flex; gap: 12px; }
.formulaire-ligne > div { flex: 1; }
.champ-invalide { border-color: var(--rouge) !important; box-shadow: 0 0 0 3px var(--rouge-fond) !important; }
.champ-erreur { display: none; color: var(--rouge); font-size: 12px; margin-top: 5px; line-height: 1.4; }
.champ-erreur.visible { display: block; }

/* ── INFOBULLE D'AIDE ──
   Petite icône « i » à poser à côté d'un libellé de champ prêtant à confusion. Survol sur
   ordinateur, appui sur mobile/tactile (géré en JS — voir footer.php) ; le texte vient de
   l'attribut data-aide, pour ne pas dupliquer de balisage à chaque usage. */
.aide-info {
    display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
    border-radius: 50%; background: var(--surface-alt); color: var(--texte-tenu); cursor: help;
    position: relative; margin-left: 5px; flex-shrink: 0; vertical-align: middle; border: none; padding: 0;
}
.aide-info i { width: 10px; height: 10px; pointer-events: none; }
.aide-info::after {
    content: attr(data-aide);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--encre); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.45;
    padding: 9px 11px; border-radius: 8px; width: max-content; max-width: 230px;
    box-shadow: var(--ombre-hover); opacity: 0; visibility: hidden; transition: opacity .12s ease;
    z-index: 60; text-align: left; pointer-events: none;
}
.aide-info::before {
    content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--encre);
    opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none;
}
.aide-info:hover::after, .aide-info:hover::before,
.aide-info:focus-visible::after, .aide-info:focus-visible::before,
.aide-info.ouverte::after, .aide-info.ouverte::before { opacity: 1; visibility: visible; }
@media (max-width: 480px) {
    .aide-info::after { max-width: 200px; font-size: 12.5px; }
}

/* ── BANDEAU D'INSTALLATION (PWA) ──
   Invite explicite à installer l'application sur l'écran d'accueil — le navigateur seul
   ne le propose pas toujours de façon visible, et jamais automatiquement sur iPhone/iPad.
   Injecté en JS (voir footer.php) une fois le manifeste détecté comme installable, ou sur
   iOS avec les instructions manuelles (Safari n'offre pas d'installation programmatique). */
.bandeau-installer {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400; max-width: 420px;
    margin: 0 auto; background: var(--carte); border: 1px solid var(--bordure-vive); border-radius: var(--rayon);
    box-shadow: var(--ombre-hover); padding: 13px 14px; display: flex; align-items: center; gap: 12px;
    transform: translateY(120%); opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.bandeau-installer.visible { transform: translateY(0); opacity: 1; }
.bandeau-installer .bandeau-icone {
    width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-alt);
}
.bandeau-installer .bandeau-texte { flex: 1; min-width: 0; }
.bandeau-installer .bandeau-texte strong { display: block; font-size: 13px; color: var(--texte); }
.bandeau-installer .bandeau-texte span { display: block; font-size: 12px; color: var(--texte-doux); margin-top: 2px; line-height: 1.4; }
.bandeau-installer .bandeau-fermer {
    background: none; border: none; cursor: pointer; color: var(--texte-tenu); flex-shrink: 0; padding: 4px;
    display: flex; align-self: flex-start;
}

/* ── LOGIN ── */
.page-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(circle at 20% 20%, #1d2846 0%, var(--encre) 45%, #0c1021 100%); padding: 20px; }
.carte-login { background: var(--carte); border-radius: 18px; padding: 38px 36px; width: 100%; max-width: 384px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.carte-login-entete { text-align: center; margin-bottom: 26px; }
.logo-login { width: 54px; height: 54px; background: var(--or); border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--encre); margin: 0 auto 16px; }
.carte-login-entete h1 { font-family: var(--police-titre); font-size: 19px; margin: 0 0 5px; color: var(--texte); }
.carte-login-entete p { color: var(--texte-doux); font-size: 13px; margin: 0; }
.carte-login-pied { text-align: center; font-size: 11.5px; color: var(--texte-doux); margin-top: 20px; }
.carte-login input { width: 100%; padding: 10px 12px; border-radius: var(--rayon-sm); border: 1px solid var(--bordure-vive); background: var(--carte); color: var(--texte); font-size: 13.5px; }
.carte-login input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(184,135,47,.14); }
.carte-login label { display: block; font-size: 12.5px; font-weight: 600; margin: 13px 0 5px; color: var(--encre-douce); }

/* ── ALERTES / FLASH ── */
.alerte { padding: 11px 15px; border-radius: var(--rayon-sm); font-size: 13px; margin-bottom: 14px; }
.alerte-erreur { background: var(--rouge-fond); color: var(--rouge); }
.conteneur-flash { position: fixed; top: 18px; right: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 36px); }
.flash { padding: 13px 19px; border-radius: 10px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.flash-succes { background: var(--sauge); color: #fff; }
.flash-erreur { background: var(--rouge); color: #fff; }
.flash-action { display: inline-block; margin-left: 8px; color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.flash-action:hover { opacity: .85; }

/* ── PASTILLES DE CRITICITÉ ── */
.pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.pastille-normal { background: var(--sauge); }
.pastille-risque { background: var(--ambre); }
.pastille-critique { background: var(--rouge); }

/* ── BARRE MOBILE (bouton menu) — masquée sur desktop ── */
.barre-mobile { display: none; }
.sidebar-fond { display: none; }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

/* Tablette : la grille KPI se resserre, le contenu respire un peu moins */
@media (max-width: 1080px) {
    .grille-kpi { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .content { padding: 26px 28px; }
}

@media (max-width: 860px) {
    .layout { flex-direction: column; }

    /* Barre fixe en haut, avec le bouton hamburger — seul élément toujours visible sur mobile */
    .barre-mobile {
        display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 220;
        background: var(--encre); color: #fff; padding: 13px 16px;
        padding-top: calc(13px + env(safe-area-inset-top, 0px));
        box-shadow: 0 2px 10px rgba(0,0,0,.12);
    }
    .bouton-hamburger { background: none; border: none; color: #fff; padding: 4px; cursor: pointer; display: flex; }
    .bouton-hamburger i[data-lucide] { width: 23px; height: 23px; }
    .barre-mobile-nom { font-family: var(--police-titre); font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Le menu devient un tiroir qui glisse depuis la gauche, par-dessus le contenu.
       100dvh (hauteur de viewport "dynamique") au lieu de 100vh : sur Safari/Chrome
       mobile, 100vh correspond à la hauteur SANS la barre d'adresse (donc plus grande
       que ce qui est réellement visible à l'ouverture), ce qui repoussait le bas du
       tiroir — et donc le bouton de déconnexion — sous la zone visible à l'écran. */
    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 82vw; max-width: 300px;
        transform: translateX(-100%); transition: transform .28s cubic-bezier(.3,.9,.4,1); z-index: 230;
        overflow-y: auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 10px 0 40px rgba(0,0,0,.25);
    }
    body.menu-ouvert .sidebar { transform: translateX(0); }

    /* Fond sombre derrière le tiroir, pour le refermer en touchant à côté */
    .sidebar-fond {
        display: block; position: fixed; inset: 0; background: rgba(12,16,28,.55); z-index: 220;
        opacity: 0; pointer-events: none; transition: opacity .25s ease; backdrop-filter: blur(1px);
    }
    body.menu-ouvert .sidebar-fond { opacity: 1; pointer-events: auto; }
    body.menu-ouvert { overflow: hidden; }

    .content { padding: 18px 16px 32px; }
    .grille-kpi { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
    .carte-kpi { padding: 15px; gap: 11px; }
    .carte-kpi .icone { width: 38px; height: 38px; }
    .carte-kpi strong { font-size: 20px; }

    .page-header { padding: 20px 20px; border-radius: 14px; }
    .page-header h1 { font-size: 1.28em; }
    .page-header > form, .page-header > div:not(:first-child) { width: 100%; }
    /* De nombreuses pages placent leurs boutons d'action dans un div flex en ligne,
       sans retour à la ligne prévu — on le force ici, une fois pour toutes. */
    .page-header > div { flex-wrap: wrap; }
    .page-header .btn, .page-header .btn-secondaire { flex: 1 1 auto; justify-content: center; }

    .formulaire-ligne { flex-direction: column; gap: 0; }

    /* De nombreuses pages placent deux panneaux côte à côte avec une grille 2 colonnes
       écrite en style inline (ex. "détail des frais" + "historique des paiements"). Sans
       cela, les deux colonnes se compressent sur mobile au lieu de s'empiler, ce qui rend
       les tableaux (et tout le reste) illisibles. On ne touche pas aux grilles
       auto-fit/auto-fill (cartes KPI, etc.), déjà responsives par nature. */
    [style*="grid-template-columns:minmax(0,1fr) minmax(0,1"] { grid-template-columns: minmax(0,1fr) !important; }

    .barre-outils-liste { padding: 11px 13px; }
    .barre-outils-liste input[type="search"] { min-width: 100%; }
    .barre-outils-liste select { flex: 1; min-width: 0; }

    /* ── TABLEAUX → CARTES SUR MOBILE ──
       Un tableau large qui défile horizontalement est pénible à lire au doigt. Sur petit
       écran, chaque ligne devient une carte autonome et chaque cellule une rangée
       "étiquette : valeur" (l'étiquette vient de l'attribut data-label porté par le <td>,
       recopié du <th> correspondant). Un <td> sans data-label s'affiche simplement seul,
       sans étiquette — ça reste lisible, juste moins explicite que les tableaux déjà
       étiquetés (paiements, présences, notes...). */
    .panneau:has(.table) { overflow-x: visible; }
    .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .table, .table tbody, .table tr { display: block; width: 100%; }
    .table { border: none; }
    .table tr {
        background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon-sm);
        margin-bottom: 10px; padding: 2px 14px; box-shadow: var(--ombre);
    }
    .table tr:last-child { margin-bottom: 0; }
    .table td {
        display: flex; justify-content: space-between; align-items: center; gap: 14px;
        border-bottom: 1px solid var(--bordure) !important; padding: 10px 0; text-align: right; white-space: normal;
    }
    .table td:last-child { border-bottom: none !important; }
    .table td[data-label]::before {
        content: attr(data-label); font-weight: 600; font-size: 11px; color: var(--texte-doux);
        text-transform: uppercase; letter-spacing: .03em; text-align: left; margin-right: auto; flex-shrink: 0;
    }
    .table td:not([data-label]) { justify-content: flex-start; text-align: left; }
    /* Une cellule qui contient un champ de saisie (ex. feuille de présence, saisie de
       notes) a besoin de toute la largeur pour ce champ — l'étiquette passe donc
       au-dessus plutôt qu'à côté. */
    .table td:has(select), .table td:has(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), .table td:has(textarea) {
        flex-direction: column; align-items: stretch; gap: 6px; text-align: left;
    }
    .table td:has(select)::before,
    .table td:has(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]))::before,
    .table td:has(textarea)::before {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .grille-kpi { grid-template-columns: minmax(0,1fr); }
    .carte-login { padding: 30px 24px; border-radius: 14px; }
}

/* ── UTILITAIRES ── */
.fw-semibold { font-weight: 600; }
.icone-lucide { width: 18px; height: 18px; vertical-align: middle; margin-right: 4px; }
@media print { .no-print { display: none !important; } }
.cache { display: none !important; }