/* ============================================================
   Feuille de style commune du portail (extraite de layout.php,
   v3.53.0) — chargée avec ?v=APP_VERSION pour le cache-busting.
   Les couleurs passent par les variables : les thèmes (body[data-theme])
   ne redéfinissent que --bleu / --bleu-fonce.
   ============================================================ */

:root { --bleu:#1a4f8b; --bleu-fonce:#123a68; --gris:#f4f6f9; --bord:#dde3ea; --accent:#eef4fb; }
body[data-theme=emeraude]   { --bleu:#1e7a52; --bleu-fonce:#145a3c; --accent:#ecf6f1; }
body[data-theme=bordeaux]   { --bleu:#8b2635; --bleu-fonce:#671b27; --accent:#f9eff1; }
body[data-theme=violet]     { --bleu:#5b3a8b; --bleu-fonce:#43296b; --accent:#f2eef8; }
body[data-theme=ardoise]    { --bleu:#3c4858; --bleu-fonce:#28313d; --accent:#eef1f4; }
body[data-theme=terracotta] { --bleu:#b45a3c; --bleu-fonce:#8c4128; --accent:#f8f0ec; }

* { box-sizing:border-box; margin:0; }
body { font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; background:var(--gris); color:#222; }

/* ---------- Bandeau haut ---------- */
header.top { background:var(--bleu); color:#fff; padding:0.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; position:relative; z-index:300; }
header.top a { color:#fff; text-decoration:none; }
header.top .brand { font-weight:700; font-size:1.1rem; display:inline-flex; align-items:center; gap:0.6rem; }
header.top .brand-logo { height:34px; width:auto; display:block; }
header.top .esp-logo { background:#fff; border-radius:6px; padding:3px 8px; height:30px; } /* logo d'espace : pastille blanche (logos souvent foncés) */
header.top .brand .esp { opacity:.85; font-weight:500; font-size:1rem; }
/* Le bandeau se replie au lieu de déborder : sous ~850 px, la barre portait
   plus d'éléments (menus, « Voir comme », version, thème, compte) que de place,
   et poussait la page en défilement latéral sur TOUTES les pages du portail. */
header.top nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0.5rem 1.2rem; align-items:center; font-size:0.95rem; min-width:0; }

/* Largeur de l'application (v3.64.0) : les 3/4 de l'écran, jamais moins de
   1200 px. Le socle est longtemps resté à 1060 px pendant que les modules s'en
   échappaient un par un — quinze surcharges « main { max-width } » copiées,
   dont la moitié disait déjà cette règle. Elle est désormais posée ICI, une
   fois : les pages qui veulent autre chose (console pleine largeur, écrans très
   denses à 90 vw) le déclarent, et ce sont les seules. */
main { max-width:max(1200px, 75vw); margin:2rem auto; padding:0 1.5rem; }
h1 { font-size:1.5rem; margin-bottom:1.2rem; color:var(--bleu-fonce); }

/* ---------- Cartes et tuiles ---------- */
.card { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:1.5rem; margin-bottom:1.5rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.tile { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:1.3rem; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .15s; display:block; position:relative; }
.tile:hover { box-shadow:0 4px 14px rgba(0,0,0,.08); transform:translateY(-2px); }
.tile .ico { font-size:1.8rem; }
.tile h3 { margin:0.5rem 0 0.3rem; color:var(--bleu-fonce); }
.tile p { font-size:0.88rem; color:#555; }

/* Tuile compacte (accueil d'espace) + badge compteur */
.tiles-compactes { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:0.9rem; }
.tile-compacte { text-align:center; padding:1.15rem 0.9rem 1rem; border-radius:12px; }
.tile-compacte .ico { font-size:1.9rem; }
.tile-compacte h3 { margin:0.5rem 0 0; font-size:0.92rem; }
.tile-badge { position:absolute; top:0.55rem; right:0.55rem; background:#c0392b; color:#fff; font-size:0.72rem; font-weight:700; border-radius:99px; padding:0.1rem 0.45rem; line-height:1.4; }

/* Raccourci vers un outil métier externe (accueil d'espace) */
.tile-outil { background:#fbfcfe; border-style:dashed; }
.tile-ext { position:absolute; top:0.5rem; right:0.6rem; font-size:0.8rem; color:#8a94a6; }

/* ---------- Tableaux et formulaires ---------- */
table { width:100%; border-collapse:collapse; }
th, td { padding:0.6rem 0.7rem; text-align:left; border-bottom:1px solid var(--bord); font-size:0.92rem; }
th { background:#f0f3f7; color:var(--bleu-fonce); }
form.inline { display:inline; }
label { display:block; font-size:0.88rem; font-weight:600; margin:0.7rem 0 0.25rem; }
input[type=text], input[type=email], input[type=password], select { width:100%; padding:0.55rem 0.7rem; border:1px solid var(--bord); border-radius:6px; font-size:0.95rem; }
.btn { display:inline-block; background:var(--bleu); color:#fff; border:none; border-radius:6px; padding:0.55rem 1.1rem; font-size:0.92rem; cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--bleu-fonce); }
.btn-danger { background:#b3362b; } .btn-danger:hover { background:#8f2b22; }
.btn-sm { padding:0.3rem 0.7rem; font-size:0.83rem; }
.btn-ghost { background:#fff; color:var(--bleu); border:1px solid var(--bord); }
.btn-ghost:hover { background:var(--accent); color:var(--bleu-fonce); }

/* ---------- Alertes et badges ---------- */
.alert { padding:0.8rem 1rem; border-radius:8px; margin-bottom:1.2rem; font-size:0.93rem; }
.alert-err { background:#fdecea; color:#8f2b22; border:1px solid #f5c6c0; }
.alert-ok { background:#e8f5ec; color:#1e6b3a; border:1px solid #bfe3cc; }
.badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:99px; font-size:0.78rem; font-weight:600; }
.badge-admin { background:#fff3d6; color:#8a6100; }
.badge-collab { background:#e3ecf7; color:var(--bleu-fonce); }
.badge-off { background:#eee; color:#777; }
.checks { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.4rem; margin-top:0.4rem; }
.checks label { font-weight:400; margin:0; display:flex; gap:0.4rem; align-items:center; }
.muted { color:#777; font-size:0.85rem; }

/* ---------- Bandeau haut : pastilles et menus déroulants ---------- */
.ver { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); border-radius:99px; padding:0.15rem 0.65rem; font-size:0.8rem; font-weight:600; }
.ver:hover { background:rgba(255,255,255,.28); }
#theme-sel, #viewas-sel { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff; border-radius:99px; padding:0.15rem 0.5rem; font-size:0.8rem; cursor:pointer; width:auto; }
#theme-sel option, #viewas-sel option { color:#222; background:#fff; }
.dd { position:relative; }
.dd-btn { background:none; border:none; color:#fff; font:inherit; font-size:0.95rem; cursor:pointer; padding:0; }
.dd-menu { display:none; position:absolute; right:0; top:calc(100% + 0.55rem); background:#fff; border:1px solid var(--bord); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.15); min-width:190px; padding:0.3rem; z-index:301; }
.dd.open .dd-menu { display:block; }
.dd-menu a { display:block; color:#222 !important; padding:0.5rem 0.8rem; border-radius:6px; font-size:0.92rem; white-space:nowrap; }
.dd-menu a:hover { background:var(--gris); }

/* ============================================================
   Accueil d'espace — tableau de bord (v3.53.0)
   ============================================================ */

/* En-tête : salutation + date */
.accueil-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.3rem; }
.accueil-head h1 { margin-bottom:0.1rem; }
.accueil-date { color:#66707c; font-size:0.9rem; }
.edit-btns { display:flex; gap:0.5rem; }

/* Bandeau « à traiter aujourd'hui » */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.9rem; margin-bottom:1.5rem; }
.kpi { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:0.95rem 1.1rem; display:flex; align-items:center; gap:0.85rem; text-decoration:none; color:inherit; transition:box-shadow .15s; }
.kpi:hover { box-shadow:0 4px 14px rgba(16,42,74,.10); }
.kpi .ic { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex:none; background:var(--accent); }
.kpi.kpi-alerte .ic { background:#fdecea; }
.kpi .n { font-size:1.35rem; font-weight:700; color:var(--bleu-fonce); line-height:1.1; }
.kpi .l { font-size:0.8rem; color:#66707c; }

/* Sections titrées */
.sect { margin-bottom:1.6rem; }
.sect-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:0.7rem; gap:1rem; flex-wrap:wrap; }
.sect-head h2 { font-size:0.85rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#66707c; }

/* « Reprendre où vous en étiez » */
.recents { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:0.8rem; }
.recent { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:0.8rem 1rem; text-decoration:none; color:inherit; display:flex; gap:0.7rem; align-items:flex-start; transition:box-shadow .15s; }
.recent:hover { box-shadow:0 4px 14px rgba(16,42,74,.10); }
.recent .em { font-size:1.15rem; margin-top:0.1rem; }
.recent b { display:block; font-size:0.88rem; color:var(--bleu-fonce); margin-bottom:0.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.recent span { font-size:0.78rem; color:#66707c; }
.recent > div { min-width:0; }

/* Actions rapides */
.actions-rapides { display:flex; gap:0.6rem; flex-wrap:wrap; }
.actions-rapides a { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 0.9rem; border:1px solid var(--bord); border-radius:9px; background:#fff; text-decoration:none; color:var(--bleu-fonce); font-size:0.88rem; font-weight:600; transition:background .15s; }
.actions-rapides a:hover { background:var(--accent); }

/* Mode réorganisation des tuiles (conservé de l'ancien accueil) */
#edit-hint { display:none; background:#eef4fb; border:1px solid #c9dcf2; color:#2a4a86; border-radius:8px; padding:0.55rem 0.9rem; font-size:0.88rem; margin:0.8rem 0; }
body.tiles-edit #edit-hint { display:block; }
body.tiles-edit .tile { cursor:grab; user-select:none; animation:wiggle 0.35s ease-in-out infinite alternate; }
body.tiles-edit .tile:active { cursor:grabbing; }
body.tiles-edit .tile:nth-child(2n) { animation-delay:0.12s; }
@keyframes wiggle { from { transform:rotate(-0.4deg); } to { transform:rotate(0.4deg); } }
.tile.dragging { opacity:0.45; border-style:dashed; animation:none !important; }
.tile.drop-over { outline:2px dashed var(--bleu); outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { body.tiles-edit .tile { animation:none; } }

/* ---------- Panneau « Signaler un bug » (layout_footer) ---------- */
#fb-bug-btn { position:fixed; right:1.1rem; bottom:1.1rem; z-index:80; width:46px; height:46px; border-radius:50%; background:var(--bleu); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.35rem; border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25); }
#fb-panel { display:none; position:fixed; right:1.1rem; bottom:4.6rem; z-index:81; width:min(360px, calc(100vw - 2.2rem)); background:#fff; border:1px solid var(--bord); border-radius:14px; box-shadow:0 10px 34px rgba(0,0,0,.25); overflow:hidden; }
#fb-panel.open { display:block; }
#fb-panel .fbp-head { background:var(--bleu); color:#fff; padding:0.7rem 1rem; display:flex; align-items:center; justify-content:space-between; }
#fb-panel .fbp-head strong { font-size:0.95rem; }
#fb-panel .fbp-close { background:none; border:none; color:#fff; font-size:1.1rem; cursor:pointer; line-height:1; }
#fb-panel .fbp-body { padding:0.9rem 1rem; max-height:min(70vh, 520px); overflow:auto; }
#fb-panel label { display:block; font-size:0.82rem; font-weight:600; margin:0.6rem 0 0.2rem; }
#fb-panel input[type=text], #fb-panel textarea { width:100%; padding:0.5rem 0.6rem; border:1px solid var(--bord); border-radius:6px; font-size:0.9rem; font-family:inherit; }
#fb-panel .fbp-page { font-size:0.78rem; color:#777; word-break:break-all; background:var(--gris); border-radius:6px; padding:0.4rem 0.6rem; }
#fb-panel .fbp-msg { display:none; border-radius:8px; padding:0.6rem 0.8rem; font-size:0.88rem; margin-bottom:0.6rem; }
#fb-panel .fbp-msg.ok { display:block; background:#e8f5ec; color:#1e6b3a; border:1px solid #bfe3cc; }
#fb-panel .fbp-msg.err { display:block; background:#fdecea; color:#8f2b22; border:1px solid #f5c6c0; }

/* ============================================================
   v3.54.0 — recherche globale (⌘K) et fil d'activité
   ============================================================ */

/* Champ de recherche de l'accueil (ouvre la palette) */
.accueil-search { flex:1 1 260px; max-width:430px; position:relative; }
.accueil-search button { width:100%; text-align:left; padding:0.6rem 1rem 0.6rem 2.4rem; border:1px solid var(--bord); border-radius:10px; font-size:0.93rem; background:#fff; color:#8a94a6; cursor:pointer; box-shadow:0 1px 3px rgba(16,42,74,.06); font-family:inherit; }
.accueil-search::before { content:"🔍"; position:absolute; left:0.8rem; top:50%; transform:translateY(-50%); font-size:0.9rem; pointer-events:none; }
.accueil-search kbd { position:absolute; right:0.7rem; top:50%; transform:translateY(-50%); background:var(--gris); border:1px solid var(--bord); border-radius:5px; padding:0.1rem 0.4rem; font-size:0.72rem; color:#66707c; pointer-events:none; }

/* Palette de recherche (overlay plein écran, toutes les pages de l'espace) */
#pal-overlay { display:none; position:fixed; inset:0; z-index:400; background:rgba(16,30,50,.45); padding:10vh 1rem 0; }
#pal-overlay.open { display:block; }
#pal { max-width:560px; margin:0 auto; background:#fff; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.35); overflow:hidden; }
#pal input { width:100%; border:none; outline:none; padding:0.95rem 1.1rem; font-size:1rem; border-bottom:1px solid var(--bord); border-radius:0; }
#pal-res { max-height:min(52vh, 460px); overflow:auto; padding:0.35rem; }
#pal-res .pal-grp { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#8a94a6; padding:0.55rem 0.75rem 0.2rem; }
#pal-res a { display:flex; gap:0.65rem; align-items:baseline; padding:0.5rem 0.75rem; border-radius:8px; text-decoration:none; color:#222; font-size:0.92rem; }
#pal-res a .pal-ico { flex:none; }
#pal-res a b { color:var(--bleu-fonce); font-weight:600; }
#pal-res a span { color:#66707c; font-size:0.8rem; margin-left:auto; text-align:right; }
#pal-res a.sel, #pal-res a:hover { background:var(--accent); }
#pal-vide { padding:0.9rem 1rem; color:#8a94a6; font-size:0.88rem; }
#pal-aide { border-top:1px solid var(--bord); padding:0.45rem 1rem; font-size:0.72rem; color:#8a94a6; display:flex; gap:1rem; }
.nav-loupe { background:none; border:none; color:#fff; font-size:1rem; cursor:pointer; padding:0; }

/* ============================================================
   Gestion des utilisateurs — console globale (admin/users.php) et
   page d'espace (utilisateurs.php), v3.60.0. Habillage repris de
   l'accueil d'espace : bandeau de compteurs (.kpis), sections
   titrées (.sect/.sect-head) et listes en CARTES. Plus aucun
   tableau large : une carte se replie, elle ne déborde pas.
   ============================================================ */

[hidden] { display:none !important; }

/* Barre de recherche + pastilles de filtre d'une liste de comptes */
.gu-barre { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; margin-bottom:0.9rem; }
.gu-barre input[type=search] { flex:1 1 230px; max-width:340px; padding:0.5rem 0.8rem; border:1px solid var(--bord); border-radius:9px; font-size:0.9rem; font-family:inherit; }
.gu-filtre { border:1px solid var(--bord); background:#fff; border-radius:99px; padding:0.32rem 0.8rem; font:inherit; font-size:0.82rem; font-weight:600; color:#66707c; cursor:pointer; }
.gu-filtre:hover { background:var(--accent); }
.gu-filtre.on { background:var(--bleu); border-color:var(--bleu); color:#fff; }

/* Une carte par compte */
.gu-liste { display:grid; gap:0.7rem; }
.gu-item { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:0.85rem 1.1rem; transition:box-shadow .15s; }
.gu-item:hover { box-shadow:0 4px 14px rgba(16,42,74,.10); }
.gu-item.off { background:#fbfbfc; }
.gu-ligne { display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem 1rem; }
.gu-ini { flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent); color:var(--bleu-fonce); font-size:0.82rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.gu-item.off .gu-ini { background:#eceef1; color:#98a1ab; }
.gu-qui { flex:1 1 200px; min-width:0; }
.gu-qui b { display:block; color:var(--bleu-fonce); font-size:0.94rem; overflow-wrap:anywhere; }
.gu-qui .mail { display:block; color:#66707c; font-size:0.79rem; overflow-wrap:anywhere; }
.gu-tags { flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem; }
.gu-meta { flex:none; display:flex; flex-wrap:wrap; gap:0.2rem 0.9rem; font-size:0.78rem; color:#66707c; }
.gu-meta b { display:block; color:#3c4858; font-weight:600; font-size:0.82rem; }
.gu-actions { flex:none; display:flex; flex-wrap:wrap; gap:0.4rem; margin-left:auto; }
.gu-actions form { display:inline-flex; }

/* Pastille de présence */
.gu-pt { display:inline-flex; align-items:center; gap:0.32rem; font-size:0.78rem; color:#8a94a6; white-space:nowrap; }
.gu-pt::before { content:""; width:8px; height:8px; border-radius:50%; background:#c8ced6; }
.gu-pt.on { color:#1a7f37; font-weight:600; }
.gu-pt.on::before { background:#1a7f37; }
.badge-ok { background:#e8f5ec; color:#1e6b3a; }
.badge-warn { background:#fff8e1; color:#8a6100; }

/* Fiche dépliante d'un compte */
.gu-fiche { margin-top:0.55rem; border-top:1px solid var(--gris); }
.gu-fiche > summary { list-style:none; cursor:pointer; padding-top:0.55rem; font-size:0.83rem; font-weight:600; color:var(--bleu); }
.gu-fiche > summary::-webkit-details-marker { display:none; }
.gu-fiche > summary::before { content:"▸"; display:inline-block; width:1.1em; }
.gu-fiche[open] > summary::before { content:"▾"; }
.gu-corps { display:grid; grid-template-columns:repeat(auto-fit,minmax(265px,1fr)); gap:0.9rem; align-items:start; padding:0.7rem 0 0.3rem; }
.gu-bloc { border:1px solid var(--bord); border-radius:10px; padding:0.75rem 0.9rem; background:#fcfdfe; }
.gu-bloc > h4 { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:#66707c; }
.gu-bloc label:first-of-type { margin-top:0.45rem; }
.gu-bloc .checks { grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); }
.gu-bloc select { width:100%; }
.gu-large { grid-column:1 / -1; }

/* Groupe repliable (console : un espace = un groupe) */
.gu-groupe { margin-bottom:0.9rem; }
.gu-groupe > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0.9rem; background:#fff; border:1px solid var(--bord); border-radius:10px; font-size:0.9rem; font-weight:700; color:var(--bleu-fonce); }
.gu-groupe > summary::-webkit-details-marker { display:none; }
.gu-groupe > summary::before { content:"▸"; }
.gu-groupe[open] > summary::before { content:"▾"; }
.gu-groupe > summary .n { margin-left:auto; font-weight:600; font-size:0.8rem; color:#66707c; }
.gu-groupe > .gu-liste, .gu-groupe > .gu-sous { padding:0.7rem 0 0.2rem 0.9rem; display:grid; gap:0.7rem; }

/* Formulaires repliés (création, rattachement) */
.gu-fold { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:0 1.2rem; }
.gu-fold > summary { cursor:pointer; padding:1rem 0; font-weight:700; color:var(--bleu-fonce); font-size:0.92rem; list-style:none; }
.gu-fold > summary::-webkit-details-marker { display:none; }
.gu-fold > summary::before { content:"▸"; display:inline-block; width:1.1em; }
.gu-fold[open] > summary::before { content:"▾"; }
.gu-fold .corps { padding-bottom:1.2rem; }
.gu-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:0 1rem; }

/* État vide */
.gu-vide { background:#fff; border:1px dashed var(--bord); border-radius:12px; padding:1.5rem 1.2rem; text-align:center; color:#66707c; font-size:0.9rem; }

/* Bas de l'accueil : activité récente + colonne droite */
.cols { display:grid; grid-template-columns:1.6fr 1fr; gap:1.2rem; align-items:start; }
@media (max-width:820px) { .cols { grid-template-columns:1fr; } }
.flux { list-style:none; padding:0; margin:0; }
.flux li { padding:0.5rem 0; border-bottom:1px solid var(--gris); font-size:0.87rem; }
.flux li:last-child { border-bottom:none; }
.flux a { color:inherit; text-decoration:none; display:flex; gap:0.6rem; align-items:baseline; }
.flux a:hover b { text-decoration:underline; }
.flux .quand { margin-left:auto; color:#98a1ab; font-size:0.76rem; white-space:nowrap; }
.flux .quoi { min-width:0; }
.flux b { color:var(--bleu-fonce); font-weight:600; }