/* Tableau de bord administrateur */
.admin-layout { display: grid; grid-template-columns: minmax(270px, .8fr) minmax(0,1.2fr); align-items: start; gap: 30px; }
.admin-layout > .carte { position: sticky; top: 100px; }
.admin-layout h2 { font-size: 35px; margin: 10px 0 25px; }
.admin-liste { display: grid; gap: 9px; margin-bottom: 24px; }
.admin-event { padding: 16px; background: white; border: 1px solid var(--ligne); border-radius: 3px; display: flex; gap: 15px; align-items: center; justify-content: space-between; }
.admin-event h3 { font-size: 20px; margin: 5px 0; }
.admin-event p { font: 11px var(--technique); color: var(--gris); }
.admin-event .formulaire-actions { flex-shrink: 0; }
@media (max-width: 950px) { .admin-layout { grid-template-columns: 1fr; } .admin-layout > .carte { position: static; } }
@media (max-width: 560px) { .admin-event { display: block; } .admin-event .formulaire-actions { margin-top: 15px; } }

/* Onglets du panel */
.onglets-admin { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.ligne-titre { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.recherche { min-width: min(320px, 100%); }

/* Tableau de bord */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 22px; }
.tuile { padding: 18px; background: var(--carte); border: 1px solid var(--ligne); border-top: 4px solid var(--rouge); border-radius: 4px; }
.tuile strong { display: block; font: 38px/1.1 var(--titre); margin: 6px 0 2px; }
.tuile small { font: 10px var(--technique); color: var(--gris); text-transform: uppercase; letter-spacing: .8px; }
.tuile.bleue { border-top-color: var(--bleu); }
.dashboard-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dashboard-grille h3 { margin: 6px 0 16px; font-size: 22px; }
.dashboard-large { grid-column: 1 / -1; }
.dashboard-grille > *, [data-partie] { min-width: 0; }
.barres { display: grid; gap: 12px; }
.barre-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 13px; }
.barre-ligne b { font: 700 12px var(--technique); }
.barre { grid-column: 1 / -1; height: 10px; background: var(--fond-gris); border-radius: 2px; overflow: hidden; }
.barre span { display: block; height: 100%; background: var(--rouge); border-radius: 2px; }

/* Tableaux */
.tableau-defilant { overflow-x: auto; padding: 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; font: 700 10px var(--technique); text-transform: uppercase; letter-spacing: .8px; color: var(--gris); padding: 12px 14px; border-bottom: 2px solid var(--ligne); white-space: nowrap; }
.tableau td { padding: 11px 14px; border-bottom: 1px solid var(--ligne); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--fond-clair); }
.tableau .mono { font: 12px var(--technique); white-space: nowrap; }
.tableau .actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.tableau .vide { text-align: center; color: var(--gris); padding: 26px; }

/* Fenetre de modification */
.fenetre { width: min(560px, calc(100% - 32px)); border: 0; border-radius: 6px; padding: 26px; background: var(--carte); color: var(--noir); }
.fenetre::backdrop { background: rgba(29, 28, 22, .55); }
.fenetre h3 { margin-bottom: 4px; }

@media (max-width: 760px) { .dashboard-grille { grid-template-columns: 1fr; } .champs-2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .intro-page h1 { font-size: 44px; overflow-wrap: anywhere; } }

/* Tableau de bord : outils, graphiques, heures */
.barre-outils { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 18px; }
.periodes { display: flex; gap: 6px; }
.ajouter-utilisateur.bouton-petit { margin-left: auto; }
.en-ligne { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--technique); text-transform: uppercase; color: var(--gris); }
.en-ligne i { width: 9px; height: 9px; border-radius: 50%; background: #b9b2a8; }
.en-ligne.actif i { background: #1f9d55; box-shadow: 0 0 0 4px rgba(31,157,85,.18); }
.tuile em { display: block; font: 11px var(--technique); font-style: normal; color: var(--gris); }
.graphique { position: relative; }
.graph-legende { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--gris); }
.graph-legende span { display: inline-flex; align-items: center; gap: 7px; }
.cle-ligne { width: 16px; height: 2px; border-radius: 2px; }
.cle-barre { width: 10px; height: 10px; border-radius: 2px; }
.graph-zone { position: relative; width: 100%; }
.graph-zone svg { display: block; overflow: visible; }
.graph-grille { stroke: #eee8df; stroke-width: 1; }
.graph-axe { stroke: #cfc7be; stroke-width: 1; }
.graph-texte { font: 10px var(--technique); fill: var(--gris); }
.graph-repere { stroke: var(--noir); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; }
.graph-zone rect:focus { outline: none; }
.graph-bulle { position: absolute; top: 8px; min-width: 150px; padding: 9px 11px; background: var(--noir); color: white; border-radius: 4px; font-size: 12px; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.graph-bulle b { display: block; font: 700 10px var(--technique); text-transform: uppercase; color: #cfc8bd; margin-bottom: 4px; }
.graph-bulle div { display: flex; align-items: center; gap: 8px; }
.graph-bulle i { width: 12px; height: 2px; border-radius: 2px; }
.graph-bulle strong { font: 700 13px var(--technique); }
.graph-bulle span { color: #cfc8bd; }
.graph-donnees { margin-top: 10px; font-size: 12px; }
.graph-donnees summary { cursor: pointer; color: var(--gris); font: 11px var(--technique); }
.graph-donnees table { margin-top: 8px; }
.graph-donnees[open] { max-height: 320px; overflow: auto; }
.barre-ligne small { font-weight: 400; color: var(--gris); }
.heures { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 150px; align-items: end; }
.heure { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.heure-col { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.heure span { width: 100%; max-width: 22px; background: var(--bleu-graph, #0087b8); border-radius: 3px 3px 0 0; min-height: 0; }
.heure small { height: 18px; font: 9px var(--technique); color: var(--gris); padding-top: 4px; }
.heure b { display: none; position: absolute; bottom: 100%; white-space: nowrap; padding: 5px 8px; background: var(--noir); color: white; font: 11px var(--technique); border-radius: 3px; z-index: 2; }
.heure:hover b, .heure:focus b { display: block; }
.heure:hover span, .heure:focus span { filter: brightness(1.15); }
@media (max-width: 760px) { .ajouter-utilisateur.bouton-petit { margin-left: 0; } .heures { gap: 1px; } }