/* ============================================================
   Feuille de style commune du portail (extraite de layout.php,
   v3.53.0) — chargée avec ?v=APP_VERSION pour le cache-busting.
   TOUTE couleur passe par un jeton : body[data-theme=sombre] les
   redéfinit tous, et rien d'autre ne change. Une couleur écrite en
   dur ici est une couleur qui restera claire en thème sombre.
   ============================================================ */

/* Les GRIS DE TEXTE, en jetons (v3.178.0). Quatre valeurs voisines coexistaient,
   ecrites en dur a plus de 200 endroits : var(--encre-2), var(--encre-2), var(--encre-3), var(--encre-3) —
   soit 5,03 / 4,48 / 3,06 / 2,62 pour 1 de contraste sur blanc, quand le seuil
   AA en demande 4,5. Elles portaient les en-tetes de tableaux, les libelles de
   formulaire, les etats vides et les horodatages : tout ce qu'on lit quand on
   cherche une information precise. Trois jetons les remplacent, tous conformes,
   et la palette devient reglable en un endroit.
   --bord reste decoratif (bordure de carte, 1,29:1) ; --bord-fort est celui des
   CHAMPS, ou WCAG 1.4.11 exige 3:1. */
:root { --bleu:#1a4f8b; --bleu-fonce:#123a68; --gris:#f4f6f9; --bord:#dde3ea; --accent:#eef4fb;
        --encre:#1c2530;      /* 14,2:1 — texte courant   */
        --encre-2:#4c5765;    /*  7,4:1 — texte secondaire */
        --encre-3:#5f6b7a;    /*  5,4:1 — le plus clair qui reste lisible */
        --bord-fort:#c2cbd5;  /*  3,05:1 — bordure d'un champ, d'un controle */
        /* Les SURFACES, en jetons (v3.182.0). #fff etait ecrit en dur a 289
           endroits : autant de fonds qui seraient restes blancs en thema sombre. */
        --surface:#fff;       /* la carte, le tableau, le champ : ce sur quoi on lit */
        --surface-2:#fbfcfe;  /* un sous-bloc DANS une carte (en-tete, pied, zone repliee) */
        --bandeau:var(--bleu);   /* le fond du bandeau du haut */
        --sur-bandeau:#fff;      /* ce qui s'ecrit dessus */
        --sur-accent:#fff;       /* ce qui s'ecrit sur un fond --bleu : bouton, pastille active */
        --ombre:rgba(0,0,0,.08); /* en sombre, une ombre noire ne se voit pas : elle s'ouvre */
        /* Les TEINTES DE SENS (v3.182.0). Quatre-vingt-dix-neuf couleurs de texte
           coexistaient — onze rouges, neuf verts, treize ambres — nées d'un
           copier-coller de module en module, jamais d'un choix. Six roles les
           remplacent la ou le texte n'a pas de fond a lui ; la ou une pastille
           pose SA pastel et SA teinte foncee, la paire est coherente et reste
           telle quelle : c'est ce qui fait qu'un badge vert reste vert en sombre. */
        --rouge:#b3261e; --vert:#1a6b46; --ambre:#8a6100; --violet:#5b21b6; --cyan:#0a5c8a;
        /* Et le FOND de ces sens, plus sa bordure. C'est ce couple qui rend un
           theme sombre possible : une pastille rouge doit devenir un rouge
           SOMBRE, pas rester une tache rose sur un ecran noir — et son texte
           bascule avec elle. Les deux jetons changent ensemble, jamais l'un
           sans l'autre : c'est la seule facon que la paire reste lisible. */
        --fond-rouge:#fdecea;  --bord-rouge:#f2c9c9;
        --fond-vert:#e8f5ec;   --bord-vert:#b9e2c9;
        --fond-ambre:#fdf3e0;  --bord-ambre:#ecd9a8;
        --fond-violet:#f3eefb; --bord-violet:#ddd0f5;
        --fond-cyan:#e6f4f9;   --bord-cyan:#c7e4f0;
        --fond-bleu:#eef4fb;   --bord-bleu:#cddff2; }

/* ── THEME SOMBRE ────────────────────────────────────────────────────────
   Un theme n'est pas un filtre : chaque valeur est choisie et mesuree sur
   SON fond. Les trois encres tiennent 13,8 / 8,7 / 6,2 pour 1 sur --surface
   (AA en demande 4,5), --bord-fort tient 3,4 (1.4.11 en demande 3).
   --bleu s'eclaircit parce qu'il sert de LIEN sur fond sombre ; du coup ce
   qui s'ecrit DESSUS (bouton, pastille active) devient sombre, d'ou
   --sur-accent. Le bandeau, lui, ne prend pas ce bleu clair : une barre
   vive en haut d'un ecran sombre eblouit — il prend une surface plus
   basse que la page. */
body[data-theme=sombre] {
    --bleu:#7db3e8; --bleu-fonce:#a9cdf2; --accent:#1c2b3d;
    --gris:#0e141b; --surface:#18212c; --surface-2:#1e2833;
    --bord:#2a3542; --bord-fort:#66757f;
    --encre:#e8edf3; --encre-2:#b3bfcb; --encre-3:#94a2b0;
    --bandeau:#131c26; --sur-bandeau:#e8edf3; --sur-accent:#0e141b;
    --rouge:#ff9d94; --vert:#6fd39b; --ambre:#e0b341; --violet:#c3a6f7; --cyan:#7cc4e8;
    --fond-rouge:#3d211e;  --bord-rouge:#5a302b;
    --fond-vert:#173324;   --bord-vert:#235739;
    --fond-ambre:#352a11;  --bord-ambre:#5a4718;
    --fond-violet:#2b2242; --bord-violet:#43356a;
    --fond-cyan:#152e3a;   --bord-cyan:#1f4b5e;
    --fond-bleu:#1c2b3d;   --bord-bleu:#2f4560;
    --ombre:rgba(0,0,0,.45);
    color-scheme:dark;  /* barres de defilement, champs natifs, calendriers */
}

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

/* ---------- Bandeau haut ---------- */
header.top { background:var(--bandeau); color:var(--sur-bandeau); 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:var(--surface); 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:var(--surface); 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:var(--surface); 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:var(--encre-2); }

/* 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; line-height:1.15; }
/* Le dessin SVG (module_icone) : il prend la couleur du texte, donc le theme
   choisi par l'utilisateur — les six themes marchent sans une ligne de plus.
   Les modules qui n'ont pas encore de dessin gardent leur emoji, a sa taille. */
.tile-compacte .ico .mod-ico { width:27px; height:27px; display:block; margin:0.15rem auto 0.2rem; color:var(--bleu); }
.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; }

/* Les raccourcis vers les logiciels et sites externes (Pennylane, l'extranet
   d'une compagnie…) : une BARRE en tete d'accueil depuis la v3.178.5, la ou
   c'etaient des tuiles en bas de page, apres tous les modules. Ce sont des
   liens ouverts plusieurs fois par jour : ils doivent se lire d'un coup et ne
   prendre qu'une ligne. Le ↗ reste — « Pennylane » existe AUSSI comme module,
   et le meme libelle pointait sur deux destinations. */
.outils-barre { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.4rem; }
.outils-barre a { display:inline-flex; align-items:center; gap:0.45rem;
    background:var(--surface); border:1px solid var(--bord); border-radius:99px;
    padding:0.35rem 0.85rem; font-size:0.85rem; font-weight:600;
    color:var(--bleu-fonce); text-decoration:none; white-space:nowrap; }
.outils-barre a:hover { border-color:var(--bleu); color:var(--bleu); }
.outils-barre .em { font-size:1rem; line-height:1; }
.outils-barre .ext { color:var(--encre-3); font-size:0.8rem; }
/* Sur un telephone, la barre glisse du doigt plutot que de s'empiler. */
@media (max-width:640px) {
    .outils-barre { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-bottom:1rem; }
    .outils-barre::-webkit-scrollbar { display:none; }
    .outils-barre a { flex:none; min-height:38px; }
}

/* ---------- 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:var(--surface-2); 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-fort); border-radius:6px; font-size:0.95rem; }
.btn { display:inline-block; background:var(--bleu); color:var(--sur-accent); 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 { color:#fff; background:#b3362b; } .btn-danger:hover { color:#fff; background:#8f2b22; }
.btn-sm { padding:0.3rem 0.7rem; font-size:0.83rem; }
.btn-ghost { background:var(--surface); 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:var(--fond-rouge); color:var(--rouge); border:1px solid var(--bord-rouge); }
.alert-ok { background:var(--fond-vert); color:var(--vert); border:1px solid var(--bord-vert); }
.badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:99px; font-size:0.78rem; font-weight:600; }
.badge-admin { background:var(--fond-ambre); color:var(--ambre); }
.badge-collab { background:var(--fond-bleu); color:var(--bleu-fonce); }
.badge-off { background:var(--surface-2); color:var(--encre-2); }
.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:var(--encre-2); 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:var(--encre); background:var(--surface); }
.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:var(--surface); 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:var(--encre) !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:var(--encre-2); font-size:0.9rem; }
/* max-width et flex-wrap : la barre de boutons de l'accueil prenait sa largeur
   de contenu et débordait de l'écran sous 400 px (v3.177.5). */
.edit-btns { display:flex; flex-wrap:wrap; max-width:100%; gap:0.5rem; }

/* Bandeau « à traiter aujourd'hui » */
/* auto-FILL et non auto-FIT : `auto-fit` effondre les pistes vides et etire
   les cartes restantes — avec un seul compteur, la carte occupait toute la
   largeur de `main` pour afficher « 0 ». La grille voisine (.tiles) utilisait
   deja auto-fill. Corrige en v3.178.1. */
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr)); gap:0.9rem; margin-bottom:0.7rem; }
.kpi { background:var(--surface); 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); }
/* L'alerte se voyait a la seule teinte du carre d'icone — #eef4fb contre
   #fdecea. A la vitesse ou l'on lit un bandeau, ces deux bleus pales sont le
   meme. Elle porte maintenant un filet, un chiffre colore et une fleche. */
.kpi.kpi-alerte { border-left:3px solid #b5292d; background:var(--surface-2); }
.kpi.kpi-alerte .ic { background:var(--fond-rouge); }
.kpi .n { font-size:1.35rem; font-weight:700; color:var(--bleu-fonce); line-height:1.1; }
.kpi.kpi-alerte .n { color:var(--rouge); }
.kpi .l { font-size:0.8rem; color:var(--encre-2); }
.kpi::after { content:"›"; margin-left:auto; color:var(--encre-3); font-size:1.2rem; line-height:1; }

/* Les compteurs a ZERO : une ligne, pas une carte chacun. */
.kpis-repos { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 1.1rem;
    background:var(--surface); border:1px solid var(--bord); border-radius:10px;
    padding:0.6rem 0.9rem; margin-bottom:1.5rem; font-size:0.84rem; color:var(--encre-2); }
.kpis-repos a { color:var(--encre-2); text-decoration:none; white-space:nowrap; }
.kpis-repos a:hover { color:var(--bleu); text-decoration:underline; }
.kpis-repos b { color:var(--encre); font-weight:700; }

/* 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:var(--encre-2); }
.sect-head .sect-note { font-weight:400; text-transform:none; letter-spacing:0; color:var(--encre-3); margin-left:0.5rem; }


/* Mode réorganisation des tuiles (conservé de l'ancien accueil) */
#edit-hint { display:none; background:var(--fond-bleu); border:1px solid var(--bord-bleu); color:var(--bleu-fonce); 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:var(--sur-accent); 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:var(--surface); 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:var(--sur-accent); 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:var(--sur-accent); 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:var(--encre-2); 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:var(--fond-vert); color:var(--vert); border:1px solid var(--bord-vert); }
#fb-panel .fbp-msg.err { display:block; background:var(--fond-rouge); color:var(--rouge); border:1px solid var(--bord-rouge); }

/* ============================================================
   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:var(--surface); color:var(--encre-3); 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:var(--encre-2); 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:var(--surface); border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.35); overflow:hidden; }
#pal input { width:100%; border: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:var(--encre-3); 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:var(--encre); 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:var(--encre-2); 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:var(--encre-3); font-size:0.88rem; }
#pal-aide { border-top:1px solid var(--bord); padding:0.45rem 1rem; font-size:0.72rem; color:var(--encre-3); 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:var(--surface); border-radius:99px; padding:0.32rem 0.8rem; font:inherit; font-size:0.82rem; font-weight:600; color:var(--encre-2); cursor:pointer; }
.gu-filtre:hover { background:var(--accent); }
.gu-filtre.on { background:var(--bleu); border-color:var(--bleu); color:var(--sur-accent); }

/* Une carte par compte */
.gu-liste { display:grid; gap:0.7rem; }
.gu-item { background:var(--surface); 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:var(--surface-2); }
.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:var(--surface-2); color:var(--encre-3); }
.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:var(--encre-2); 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:var(--encre-2); }
.gu-meta b { display:block; color:var(--bleu-fonce); font-weight:600; font-size:0.82rem; }
/* `flex:none` interdit à la barre de rétrécir : elle prend sa largeur de contenu
   — 419 px mesurés sur Flux financier — dans une fenêtre de 375, et pousse TOUTE
   la page en défilement latéral, bandeau compris. Le flex-wrap ci-dessous ne se
   déclenchait donc jamais, faute de contrainte de largeur. Le bandeau v2 étant
   partout, le défaut l'était aussi : 15 écrans mesurés le 22/08/2026 (v3.177.5).
   max-width borne la boîte, et le retour à la ligne se produit enfin. */
.gu-actions { flex:none; max-width:100%; 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:var(--encre-3); white-space:nowrap; }
.gu-pt::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--bord-fort); }
.gu-pt.on { color:var(--vert); font-weight:600; }
.gu-pt.on::before { background:#1a7f37; }
.badge-ok { background:var(--fond-vert); color:var(--vert); }
.badge-warn { background:var(--fond-ambre); color:var(--ambre); }

/* 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:var(--surface-2); }
.gu-bloc > h4 { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--encre-2); }
.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:var(--surface); 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:var(--encre-2); }
.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:var(--surface); 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:var(--surface); border:1px dashed var(--bord); border-radius:12px; padding:1.5rem 1.2rem; text-align:center; color:var(--encre-2); font-size:0.9rem; }


/* ============================================================
   Petits écrans — v3.177.5
   Mesuré le 22/08/2026 en rendant les 34 écrans du portail à 375 px :
   20 d'entre eux poussaient la PAGE en défilement latéral. Aucune des
   causes n'était propre à un module — elles sont donc corrigées ici,
   avec `.gu-actions` et `.edit-btns` plus haut.
   La mesure qui fait foi : à 375 px, document.scrollWidth ne doit pas
   dépasser document.clientWidth. Sur un tableau large, c'est le
   tableau qui glisse, jamais la page.
   ============================================================ */

/* Enveloppe posée à l'exécution par layout_footer() autour des tableaux qui
   n'en avaient pas : 197 des 294 <table> du portail au 22/08/2026. Sans elle,
   un tableau trop large emporte la page entière. Les modules qui posent déjà
   la leur (.flx-scroll, .cf-tbl…) sont reconnus et laissés tranquilles. */
[data-tbl] { overflow-x:auto; }

/* ============================================================
   Un tableau qui devient une liste de FICHES (v3.178.5)
   Envelopper un tableau l'empeche de casser la page (v3.177.7), mais ne le
   rend pas lisible : la file des reversements n'en montre que 45 % a la fois
   sur un telephone, « Suivi contrats » 22 %. Sous 820 px, une ligne devient
   donc une fiche : l'intitule de colonne passe devant la valeur, via
   `content: attr(data-l)` — un attribut par cellule, aucune duplication du
   gabarit, et le tableau reste un tableau pour qui l'ouvre sur un ecran large.
   C'est un OPT-IN (.tbl-fiches) : le portail compte 294 tableaux, dont
   beaucoup ne sont pas des listes d'enregistrements — une bascule d'office en
   casserait plus qu'elle n'en reparerait.
   ============================================================ */
@media (max-width:820px) {
    /* thead disparait : son role est repris par data-l, cellule par cellule. */
    .tbl-fiches thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
    .tbl-fiches, .tbl-fiches tbody { display:block; width:auto; }

    /* La fiche est une GRILLE a deux colonnes : le nom de l'enregistrement et
       le chiffre qui compte partagent la premiere ligne, comme sur un releve.
       Le reste s'empile dessous, un intitule a gauche, sa valeur a droite. */
    main .tbl-fiches tr { display:grid; grid-template-columns:1fr auto; column-gap:0.8rem;
        background:var(--surface); border:1px solid var(--bord); border-radius:11px;
        padding:0.65rem 0.85rem; margin-bottom:0.5rem; }
    .tbl-fiches tr:hover td { background:none; }

    /* `main` en tete : le filet vient du <style> du module, charge APRES cette
       feuille — a specificite egale il gagnerait, et la fiche garderait les
       lignes du tableau. Meme piege que pour les barres d'onglets (v3.177.12). */
    main .tbl-fiches td { grid-column:1 / -1; display:flex; align-items:baseline;
        justify-content:space-between; gap:1rem; border:none; padding:0.12rem 0;
        text-align:left; white-space:normal; font-size:0.86rem; line-height:1.35;
        background:none; }
    main .tbl-fiches td::before { content:attr(data-l); flex:none; font-size:0.72rem;
        color:var(--encre-3); text-transform:uppercase; letter-spacing:0.04em; }

    /* La colonne qui NOMME l'enregistrement fait le titre — sans intitule. */
    main .tbl-fiches td.principal { grid-column:1; grid-row:1; display:block;
        font-size:0.98rem; font-weight:600; color:var(--bleu-fonce);
        margin-bottom:0.2rem; }
    main .tbl-fiches td.principal::before { content:none; }
    main .tbl-fiches td.principal a { color:inherit; text-decoration:none; }
    main .tbl-fiches td.principal a:hover { text-decoration:underline; }

    /* Le chiffre qui compte, en face du titre. */
    main .tbl-fiches td.montant { grid-column:2; grid-row:1; display:block;
        text-align:right; font-size:1.05rem; font-weight:700; white-space:nowrap; }
    main .tbl-fiches td.montant::before { content:none; }

    /* Ce qui ne merite pas une ligne sur un telephone. */
    main .tbl-fiches td.hors-mobile { display:none; }

    /* L'action ferme la fiche, alignee a droite. */
    main .tbl-fiches td.act { justify-content:flex-end; padding-top:0.45rem; }
    main .tbl-fiches td.act::before { content:none; }

    .tbl-fiches tfoot { display:block; }
    main .tbl-fiches tfoot tr { display:flex; justify-content:space-between;
        background:var(--accent); font-weight:700; }
    main .tbl-fiches tfoot td { display:block; padding:0; }
    .tbl-fiches tfoot td:empty { display:none; }
}

/* « Cet écran demande un ordinateur » (v3.180.1).
   Certains écrans sont des GRILLES DE SAISIE : la saisie des commissions
   aligne 709 champs. Aucune mise en page ne les rendra confortables sur 375 px,
   et les replier en colonne donnerait un ruban de plusieurs metres. Le dire
   coûte trois lignes et évite dix minutes perdues ; le maquiller coûterait
   plus cher et tromperait. Invisible sur un écran d'ordinateur. */
.ecran-poste { display:none; }
@media (max-width:820px) {
    .ecran-poste { display:block; background:var(--surface-2); border:1px solid var(--bord-ambre);
        border-left:3px solid #c98216; border-radius:10px; padding:0.8rem 1rem;
        margin-bottom:1rem; font-size:0.9rem; line-height:1.55; color:var(--encre-2); }
    .ecran-poste b { color:var(--encre); }
}

/* La marge de `main` coûte 48 px sur un écran de 375 — 13 % de la largeur
   utile pour du vide. Sous 640 px, 1 rem suffit. */
@media (max-width:640px) {
    main { margin:1rem auto; padding:0 1rem; }

    /* Les tuiles de modules passent en LIGNES. Carrees, avec leur grosse icone
       centree, elles font 100 px de haut a une par ligne : les seize modules
       d'un espace occupaient 1 760 px de defilement, pour de la navigation.
       En lignes de 48 px, les memes seize tiennent en un ecran et demi, et le
       nom se lit a gauche comme dans une liste. (v3.178.1) */
    .tiles-compactes { grid-template-columns:1fr; gap:0.4rem; }
    .tile-compacte { display:flex; align-items:center; gap:0.75rem; text-align:left;
        padding:0.55rem 0.85rem; min-height:48px; border-radius:10px; }
    .tile-compacte .ico { font-size:1.25rem; line-height:1; flex:none; width:1.7rem; text-align:center; }
    .tile-compacte .ico .mod-ico { width:22px; height:22px; margin:0; }
    .tile-compacte h3 { margin:0; font-size:0.93rem; }
    .tile-compacte .tile-badge { position:static; margin-left:auto; }
}

/* Le sélecteur de fichier a une largeur minimale imposée par le navigateur
   (le bouton « Choisir un fichier » et le nom à côté) : sans borne, il pousse
   sa colonne — donc la page — au-delà de l'écran d'un téléphone. */
input[type=file] { max-width:100%; }

/* ============================================================
   Au doigt — pointeur grossier (v3.177.11)
   Le portail est utilisé tous les jours sur iPad Pro 12,9" : 1024 px de large
   en portrait, 1366 en paysage. À ces largeurs, AUCUNE requête média du
   portail ne se déclenche — c'est la présentation d'un ordinateur servie à un
   écran tactile. Ce qui manque là n'est donc pas de la largeur, c'est du doigt.
   Mesuré le 22/08/2026 sur Flux financier à 1024 × 1366 : 99 champs sur 100
   sous 16 px, et 133 éléments cliquables sur 158 sous 44 px de haut.
   `any-pointer` et non `pointer` : un iPad muni d'un clavier Magic peut
   annoncer un pointeur FIN, alors que le doigt reste disponible et que c'est
   lui qui déclenche le zoom de Safari.
   ============================================================ */
@media (any-pointer: coarse) {

    /* Safari (iOS et iPadOS) AGRANDIT la page dès qu'on touche un champ dont la
       police fait moins de 16 px, et laisse l'écran zoomé : on tape une
       recherche, la page saute, et il faut repincer pour lire le résultat. Les
       champs du portail sont entre 12,8 et 14,4 px. 16 px n'est pas un choix de
       présentation : c'est le seuil exact au-dessus duquel Safari ne zoome plus.
       !important assumé — chaque module redéclare la taille de ses champs dans
       son propre <style>, chargé APRÈS cette feuille ; sans lui, la règle ne
       vaudrait que pour les écrans du socle. Ce qu'on écrase ici n'est pas une
       préférence de présentation, c'est un comportement du navigateur. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]),
    textarea { font-size:16px !important; }

    /* Les listes déroulantes, elles, restent à leur taille : Safari leur ouvre
       un sélecteur plein écran au lieu de zoomer la page, et les passer à 16 px
       élargissait le formulaire de ventilation au-delà de l'écran — mesuré sur
       Flux financier › Encaissements, 401 px dans une fenêtre de 375. Seule
       précaution : qu'aucune ne dépasse de son conteneur. */
    select { max-width:100%; }

    /* 44 px : la cible minimale d'un doigt (WCAG 2.5.5). On agrandit la ZONE,
       jamais le texte — seul le rembourrage vertical change, et rien ne bouge
       sur un écran d'ordinateur puisque la règle ne s'y applique pas. */
    .btn, .btn-sm, .gu-filtre, .outils-barre a,
    header.top nav a, header.top nav .dd-btn {
        min-height:44px; display:inline-flex; align-items:center;
    }
    .btn, .btn-sm { justify-content:center; }
    .checks label { min-height:36px; }

    /* Le survol n'existe pas au doigt : la tuile restait soulevée après l'appui,
       jusqu'à ce qu'on touche ailleurs. */
    .tile:hover, .kpi:hover, .gu-item:hover {
        transform:none; box-shadow:none;
    }
}

/* ============================================================
   Écrans étroits — le bandeau, les onglets, les actions (v3.177.12)
   Mesuré le 22/08/2026 à 375 px : la barre haute se repliait sur HUIT
   lignes et occupait 178 px avant le premier mot de contenu ; les cinq
   onglets de Flux financier en occupaient 171 de plus, sur cinq lignes.
   Le seuil de 900 px est celui qu'utilisait déjà .sc-duo : en dessous,
   on est sur un téléphone ou un iPad en portrait tenu à la main.
   ============================================================ */

/* La loupe et le bouton de menu vivent HORS du <nav> : le tiroir peut se
   refermer sans emporter la recherche, qui reste à une touche. */
.nav-burger { display:none; background:none; border:none; color:#fff;
    font-size:1.35rem; line-height:1; cursor:pointer; padding:0; }
header.top .nav-loupe { margin-left:auto; }

/* AU-DESSUS DU TIROIR, LA LOUPE SUIT LE MENU. Elle vit hors du <nav> pour rester
   accessible quand le tiroir se referme — mais au-dessus de 1100 px il n'y a pas
   de tiroir, et « margin-left:auto » la collait alors seule a droite, separee de
   tout, pendant que le menu passait a la ligne suivante. Elle reprend sa place a
   la fin du menu. (23/08/2026) */
@media (min-width:1101px) {
    header.top #nav-principal { margin-left:auto; }
    header.top .nav-loupe { margin-left:0; order:3; }
}

/* 1100 px et non 900 : le bandeau a besoin de 1 216 px pour tenir sur UNE ligne
   (976 px de menu + la marque + les marges, mesuré le 23/08/2026). A 1024 px —
   l'iPad Pro 12,9" en portrait, la machine de tous les jours ici — il se
   repliait encore sur QUATRE lignes et prenait 119 px avant le contenu. Le
   seuil est donc pose au-dessus de 1024 et en dessous de 1366 (le meme iPad en
   paysage), ou le menu deroule reste confortable. */
@media (max-width:1100px) {
    .nav-burger { display:inline-flex; align-items:center; justify-content:center;
        width:44px; height:44px; border-radius:8px; }
    .nav-burger[aria-expanded="true"] { background:rgba(255,255,255,.2); }
    header.top .nav-loupe { margin-left:auto; width:44px; height:44px;
        display:inline-flex; align-items:center; justify-content:center; }

    /* Le tiroir. Le menu n'est pas dupliqué : c'est le même <nav>, replié en
       colonne sur toute la largeur, sous la barre. Il POUSSE le contenu au lieu
       de le recouvrir — pas de verrou de défilement à tenir, pas de piège de
       focus à écrire, et la page reste lisible derrière. */
    header.top nav { display:none; }
    header.top.ouvert nav { display:flex; flex-direction:column; align-items:stretch;
        gap:0.15rem; flex-basis:100%; width:100%; margin-top:0.55rem;
        padding-top:0.55rem; border-top:1px solid rgba(255,255,255,.25); }
    header.top.ouvert nav > a, header.top.ouvert nav .dd-btn,
    header.top.ouvert nav .ver { min-height:44px; display:flex; align-items:center;
        padding:0 0.4rem; border-radius:8px; }
    header.top.ouvert nav > a:active, header.top.ouvert nav .dd-btn:active {
        background:rgba(255,255,255,.15); }
    header.top.ouvert nav .dd { width:100%; }
    header.top.ouvert nav .dd-btn { width:100%; text-align:left; }
    /* Les sous-menus s'ouvrent EN PLACE : en absolu ils sortaient du tiroir par
       la droite, et une partie des espaces devenait inatteignable. */
    header.top.ouvert nav .dd-menu { position:static; box-shadow:none; margin:0.15rem 0 0.3rem 0.9rem;
        min-width:0; border-color:rgba(0,0,0,.1); }
    header.top.ouvert nav #theme-sel, header.top.ouvert nav #viewas-sel { width:100%; min-height:38px; }

    /* Onglets : une bande qui défile, avec accroche. Les modules nomment leur
       conteneur « xx-tabs » (28) ou « xx-onglets » (8) — le suffixe suffit à les
       attraper tous, aucun module n'a à être repris. white-space:nowrap couvre
       les rares barres en inline-block, flex-wrap celles en flex. */
    /* `main` en tête n'est pas décoratif : sans lui la règle pèse le même poids
       que le `.xx-onglets { flex-wrap:wrap }` du module, qui est chargé APRÈS
       cette feuille (chaque module pose son <style> dans le corps de page) et
       l'emporterait donc à égalité. Mesuré : la barre restait sur 5 lignes. */
    main [class$="-tabs"], main [class*="-tabs "],
    main [class$="-onglets"], main [class*="-onglets "] {
        flex-wrap:nowrap; white-space:nowrap; overflow-x:auto; overflow-y:hidden;
        scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none;
    }
    main [class$="-tabs"]::-webkit-scrollbar, main [class*="-tabs "]::-webkit-scrollbar,
    main [class$="-onglets"]::-webkit-scrollbar, main [class*="-onglets "]::-webkit-scrollbar { display:none; }
    main [class$="-tabs"] > *, main [class*="-tabs "] > *,
    main [class$="-onglets"] > *, main [class*="-onglets "] > * { flex:none; scroll-snap-align:start; }
}

/* ============================================================
   Le clavier doit savoir ou il est (v3.178.0)
   Il n'existait AUCUNE regle :focus-visible dans tout le portail, et six
   modules supprimaient le contour du navigateur sans rien mettre a la place :
   on dependait
   entierement du contour par defaut du navigateur, la ou il n'avait pas ete
   supprime. Se deplacer au clavier revenait a chercher a l'aveugle.
   :focus-visible et non :focus — le navigateur ne montre alors la bague qu'a
   qui navigue au clavier, jamais au clic de souris. C'est ce qui permet de la
   poser partout sans rien changer a l'apparence courante.
   ============================================================ */
:focus-visible {
    outline:2px solid var(--bleu);
    outline-offset:2px;
    border-radius:3px;
}
/* Sur fond bleu (le bandeau), la bague bleue serait invisible. */
header.top :focus-visible { outline-color:#fff; }

/* La bordure d'un CHAMP est un element d'interface : WCAG 1.4.11 lui demande
   3:1, la ou --bord (decoratif, 1,29:1) suffit a une carte. Le selecteur porte
   deux :not() pour peser plus lourd que le `input[type=text]` que chaque module
   redeclare dans son propre <style>, charge apres cette feuille. */
input:not([type=checkbox]):not([type=radio]), select, textarea { border-color:var(--bord-fort); }

/* Lien d'evitement : au clavier, on traversait les douze entrees du bandeau sur
   CHAQUE page avant d'atteindre le contenu. Invisible tant qu'il n'a pas le
   focus — puis il se pose par-dessus le bandeau. */
.saut-contenu {
    position:absolute; left:0.75rem; top:-4rem; z-index:400;
    background:var(--surface); color:var(--bleu); font-weight:600; font-size:0.92rem;
    padding:0.6rem 1rem; border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.25);
    text-decoration:none; transition:top .12s;
}
.saut-contenu:focus { top:0.75rem; }
@media (prefers-reduced-motion: reduce) { .saut-contenu { transition:none; } }


/* ── UN LIBELLÉ POUR L'OREILLE, PAS POUR L'ŒIL ───────────────────────────────
   Un bouton qui ne porte qu'un pictogramme (✏️, ↪) n'a aucun nom pour un lecteur
   d'écran : il s'annonce « bouton », et c'est tout. Ce libellé le nomme sans
   l'afficher. Ne pas utiliser display:none — ce qui est caché ainsi n'est pas lu
   non plus, ce qui ferait exactement l'inverse de ce qu'on cherche. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}