/* Socle Forge16 — interface des dashboards (UX_GUIDE.md, contrat d'interface).
   80 % neutre, 4 couleurs d'état (rouge = en retard, vert = payé, orange = à faire, bleu = en cours), gris = brouillon.
   Delight seulement, 5 tailles (17 titre, 24 chiffre clé, 14 texte, 13 secondaire, 12 petit ; 16 pour les champs du
   téléphone), grille de 8 px, cartes à filet 1 px et coins 10 px, sans ombre ni dégradé.
   Composants f-* et macros : README.md « Composants d'interface », UX_GUIDE.md § 17. Aucun style en ligne (CSP). */
:root {
  --fond: #0a0a0a; --fond-lateral: #0f0f0f; --survol: #141414; --surface: #171717; --survol-fort: #1c1c1c;
  --actif: #262626; --filet-leger: #1f1f1f; --filet: #262626; --filet-fort: #2e2e2e; --filet-tres-fort: #464646;
  --texte: #fafafa; --texte-2: #d4d4d4; --texte-3: #8a8a8a; --sur-clair: #0a0a0a;
  --rouge: #f87171; --vert: #4ade80; --orange: #fb923c; --bleu: #60a5fa; --gris: #d4d4d4;
  --rouge-fond: rgba(127,29,29,.25); --rouge-filet: rgba(153,27,27,.45);
  --vert-fond: rgba(20,83,45,.25); --vert-filet: rgba(22,101,52,.45);
  --orange-fond: rgba(124,45,18,.25); --orange-filet: rgba(154,52,18,.45);
  --bleu-fond: rgba(30,58,138,.25); --bleu-filet: rgba(30,64,175,.45);
  --gris-fond: rgba(64,64,64,.2); --gris-filet: #333333;
  --t-titre: 17px; --t-chiffre: 24px; --t-texte: 14px; --t-second: 13px; --t-petit: 12px;
  --rayon: 10px; --rayon-champ: 8px; --rayon-bouton: 6px; --rayon-feuille: 14px;
  --police: "Delight", ui-sans-serif, -apple-system, sans-serif;
  --largeur-menu: 248px; --largeur-contenu: 1280px; --largeur-detail: 400px;
  --hauteur-haut: 60px; --hauteur-bas: 84px;
  /* anciens noms (modules écrits avant 0.16) */
  --bord: var(--filet); --bord-fort: var(--filet-tres-fort); --noir: var(--surface); --pale: var(--texte);
  --lien: var(--texte); --ok: var(--vert); --attention: var(--orange); --erreur: var(--rouge); --info: var(--bleu);
  --espace: 16px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte); font: 400 var(--t-texte)/1.5 var(--police);
  font-feature-settings: "clig" 0, "liga" 0; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none;
}
a { color: var(--texte); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--texte-3); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-size: var(--t-titre); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0 0 8px; }
.f-titre { font-size: var(--t-titre); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.f-sous-titre { font-size: var(--t-texte); font-weight: 600; line-height: 1.4; }
.f-discret { color: var(--texte-3); }
.f-petit { font-size: var(--t-second); color: var(--texte-3); }
.f-tres-petit { font-size: var(--t-petit); color: var(--texte-3); }
.f-chiffre-cle { font-size: var(--t-chiffre); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; }
.f-montant { white-space: nowrap; font-variant-numeric: tabular-nums; }
.f-coupe-ligne { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[x-cloak] { display: none !important; }
svg { flex: none; }

/* --- Mise en page : menu à gauche + barre du haut (ordinateur), barre du bas (téléphone) --------------- */
.f-app { display: grid; grid-template-columns: var(--largeur-menu) minmax(0, 1fr); min-height: 100dvh; }
.f-menu-replie .f-app { grid-template-columns: minmax(0, 1fr); }
.f-menu-replie .f-lateral { display: none; }
.f-lateral {
  position: sticky; top: 0; height: 100dvh; overflow-y: auto; background: var(--fond-lateral);
  border-right: 1px solid var(--filet-leger); padding: 8px; display: flex; flex-direction: column; gap: 16px;
}
.f-marque { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 8px; font-weight: 600; }
.f-marque small { display: block; font-weight: 400; color: var(--texte-3); font-size: var(--t-petit); }
.f-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--texte); color: var(--sur-clair);
  display: grid; place-items: center; font-weight: 600; font-size: var(--t-second); }
.f-logo-image { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.f-marque-logotype { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.f-marque-logotype span { font-weight: 500; font-size: var(--t-petit); color: var(--texte-3); }
.f-logotype { height: 18px; width: auto; max-width: 180px; object-fit: contain; object-position: left; }
.f-nav { display: flex; flex-direction: column; gap: 2px; }
.f-groupe { display: flex; flex-direction: column; gap: 2px; }
.f-nav-titre { font-size: var(--t-petit); font-weight: 500; color: var(--texte-3); height: 32px; padding: 0 8px;
  display: flex; align-items: center; }
.f-nav a { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 8px; border-radius: var(--rayon-bouton);
  color: var(--texte-2); font-size: var(--t-texte); font-weight: 500; white-space: nowrap; }
.f-nav a > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.f-nav a:hover { background: var(--survol-fort); color: var(--texte); text-decoration: none; }
.f-nav a[aria-current="page"] { background: var(--actif); color: var(--texte); }
.f-nav svg { width: 16px; height: 16px; }
.f-lateral-pied { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.f-personne { display: flex; align-items: center; gap: 8px; padding: 8px; min-width: 0; }
.f-personne > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.f-personne strong { font-size: var(--t-second); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-personne small { font-size: var(--t-petit); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.f-principal { display: flex; flex-direction: column; min-width: 0; }
.f-haut {
  position: sticky; top: 0; z-index: 20; height: var(--hauteur-haut); display: flex; align-items: center; gap: 8px;
  padding: 0 24px; background: var(--fond); border-bottom: 1px solid var(--filet-leger);
}
.f-haut h1 { font-size: var(--t-titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.f-haut .f-contexte { font-size: var(--t-second); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-haut .f-espace { flex: 1; }
.f-contenu { min-width: 0; width: 100%; max-width: var(--largeur-contenu); padding: 24px; }
.f-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.f-entete:empty { display: none; }
.f-barre-mobile, .f-onglets, .f-creer-mobile { display: none; }

/* Bouton icône seule (Rechercher, Notifications, Fermer, •••, menu : UX_GUIDE § 14), toujours avec aria-label. */
.f-bouton-icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: var(--rayon-bouton); background: transparent; color: var(--texte-2); cursor: pointer; }
.f-bouton-icone:hover { background: var(--survol-fort); color: var(--texte); text-decoration: none; }
.f-bouton-icone svg { width: 16px; height: 16px; }
.f-point { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.f-point-rouge { background: var(--rouge); }

/* --- Menus déroulants (<details>) : Nouveau, Notifications, ••• ; feuille du bas sur téléphone ------------------ */
.f-deroulant { position: relative; }
.f-deroulant > summary { list-style: none; cursor: pointer; }
.f-deroulant > summary::-webkit-details-marker { display: none; }
.f-deroulant-contenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 280px; max-width: 360px;
  background: var(--fond-lateral); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.f-deroulant-contenu h2 { font-size: var(--t-texte); padding: 8px 8px 4px; }
.f-deroulant-contenu .f-voile, .f-feuille-poignee { display: none; }
.f-choix { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--rayon-bouton);
  color: var(--texte); min-height: 44px; justify-content: center; border: 0; background: none; text-align: left;
  font-size: var(--t-texte); cursor: pointer; width: 100%; }
.f-choix:hover { background: var(--survol-fort); text-decoration: none; }
.f-choix small { font-size: var(--t-second); color: var(--texte-3); }
.f-choix-separe { border-top: 1px solid var(--filet); margin-top: 4px; padding-top: 12px; border-radius: 0; }
.f-deroulant-contenu form { margin: 0; }

/* --- Boutons ------------------------------------------------------------------------------------------- */
.f-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px;
  border-radius: var(--rayon-bouton); border: 1px solid var(--filet-fort); background: transparent; color: var(--texte);
  font-size: var(--t-second); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.f-bouton:hover { background: var(--survol-fort); text-decoration: none; }
.f-bouton:active { transform: scale(.98); }
.f-bouton svg { width: 16px; height: 16px; }
.f-bouton-principal { background: var(--texte); color: var(--sur-clair); border-color: var(--texte); font-weight: 600; }
.f-bouton-principal:hover { background: #ffffff; }
.f-bouton-grand { height: 40px; padding: 0 16px; font-size: var(--t-texte); }
.f-bouton-danger { color: var(--texte); }   /* plus de rouge pour retirer (UX_GUIDE § 5) : confirmation à la place */
.f-bouton-lien { background: none; border: 0; padding: 0; height: auto; color: var(--texte); text-decoration: underline; }
.f-bouton[disabled], .htmx-request.f-bouton { opacity: .6; pointer-events: none; }
.f-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.f-actions-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 40px; gap: 8px; }
.f-actions-detail .f-bouton { height: 36px; }
.f-actions-detail .f-plus > summary { width: 40px; height: 36px; border: 1px solid var(--filet-fort); }
.f-plus > summary { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--filet-fort); border-radius: var(--rayon-bouton); color: var(--texte-2); }
.f-plus > summary:hover { background: var(--survol-fort); }

/* --- Cartes, piles, grilles ---------------------------------------------------------------------------- */
.f-pile { display: flex; flex-direction: column; gap: 16px; }
.f-pile-large { display: flex; flex-direction: column; gap: 24px; }
.f-rangee { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.f-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.f-deux { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f-carte { background: var(--fond); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; min-width: 0; }
.f-carte > h2, .f-carte > header h2 { font-size: var(--t-texte); font-weight: 600; }
.f-carte > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.f-carte > header p { margin: 4px 0 0; font-size: var(--t-second); color: var(--texte-3); }
.f-carte-large { padding: 24px; }
.f-carte-surface { background: var(--fond-lateral); }
.f-carte-table { padding: 0; overflow: hidden; }

/* --- Accueil « Aujourd'hui » : chiffres clés, courbe, À traiter, Activité ------------------------------- */
.f-chiffres { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f-chiffre { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-chiffre-libelle { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: var(--t-second); font-weight: 500; color: var(--texte-2); }
.f-chiffre-libelle svg { width: 16px; height: 16px; color: var(--texte-3); }
.f-chiffre-valeur { font-size: var(--t-chiffre); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.f-chiffre-explication { font-size: var(--t-petit); color: var(--texte-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-courbe svg { display: block; width: 100%; height: 216px; }
.f-courbe-grille { stroke: var(--filet-leger); stroke-dasharray: 3 3; }
.f-courbe-serie { fill: none; stroke: var(--texte); stroke-width: 2; vector-effect: non-scaling-stroke; }
.f-courbe-serie-2 { stroke: var(--texte-3); stroke-dasharray: 6 6; }
.f-courbe-aire { fill: var(--texte); fill-opacity: .06; stroke: none; }
.f-courbe-axe { display: flex; justify-content: space-between; padding-top: 8px; font-size: var(--t-petit); color: var(--texte-3); }
.f-legende { display: flex; justify-content: center; gap: 24px; padding-top: 16px; font-size: var(--t-petit); color: var(--texte-2); }
.f-legende span { display: inline-flex; align-items: center; gap: 8px; }
.f-legende i { width: 16px; border-top: 2px solid var(--texte); }
.f-legende i.f-legende-2 { border-top: 2px dashed var(--texte-3); }
.f-a-traiter { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--filet-leger); }
.f-a-traiter:first-child { border-top: 0; padding-top: 0; }
.f-a-traiter:last-child { padding-bottom: 0; }
.f-a-traiter > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-width: 0; }
.f-a-traiter-sujet { font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-a-traiter-contexte { font-size: var(--t-petit); color: var(--texte-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-activite { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.f-activite li { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.f-activite p { margin: 0; }
.f-activite .f-tres-petit { margin-top: 4px; }
.f-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--actif); color: var(--texte); flex: none;
  display: grid; place-items: center; font-size: var(--t-petit); font-weight: 600; }
.f-avatar-vert { background: rgba(74,222,128,.14); color: var(--vert); }
.f-avatar-orange { background: rgba(251,146,60,.14); color: var(--orange); }
.f-avatar-rouge { background: rgba(248,113,113,.14); color: var(--rouge); }
.f-avatar-bleu { background: rgba(96,165,250,.14); color: var(--bleu); }

/* --- Étiquettes (UX_GUIDE § 12) ----------------------------------------------------------------------- */
.f-etiquette { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 8px;
  border: 1px solid var(--gris-filet); background: var(--gris-fond); color: var(--gris); font-size: var(--t-petit);
  font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; flex: none; line-height: 1; }
.f-etiquette-rouge { background: var(--rouge-fond); color: var(--rouge); border-color: var(--rouge-filet); }
.f-etiquette-vert { background: var(--vert-fond); color: var(--vert); border-color: var(--vert-filet); }
.f-etiquette-orange { background: var(--orange-fond); color: var(--orange); border-color: var(--orange-filet); }
.f-etiquette-bleu { background: var(--bleu-fond); color: var(--bleu); border-color: var(--bleu-filet); }
.f-etat-rouge { color: var(--rouge); } .f-etat-vert { color: var(--vert); }
.f-etat-orange { color: var(--orange); } .f-etat-bleu { color: var(--bleu); }
/* ancien badge (avant 0.16) : rendu comme une étiquette */
.f-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--gris-filet);
  background: var(--gris-fond); color: var(--gris); font-size: var(--t-petit); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; line-height: 1; }
.f-badge-ok { background: var(--vert-fond); color: var(--vert); border-color: var(--vert-filet); }
.f-badge-attention { background: var(--orange-fond); color: var(--orange); border-color: var(--orange-filet); }
.f-badge-erreur { background: var(--rouge-fond); color: var(--rouge); border-color: var(--rouge-filet); }
.f-badge-info { background: var(--bleu-fond); color: var(--bleu); border-color: var(--bleu-filet); }
.f-compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange);
  color: var(--sur-clair); font-size: var(--t-petit); font-weight: 600; display: inline-grid; place-items: center; flex: none; }
.f-compteur-rouge { background: var(--rouge); }

/* --- Listes filtrables, tableaux, détail ---------------------------------------------------------------- */
.f-filtres-barre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.f-filtres { display: flex; gap: 8px; flex-wrap: wrap; }
.f-filtre { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--filet);
  border-radius: 9999px; color: var(--texte); font-size: var(--t-second); font-weight: 500; white-space: nowrap; }
.f-filtre:hover { background: var(--survol-fort); text-decoration: none; }
.f-filtre > small { font-size: var(--t-second); color: var(--texte-3); }
.f-filtre[aria-current="true"] { background: var(--texte); color: var(--sur-clair); border-color: var(--texte); }
.f-filtre[aria-current="true"] > small { color: var(--sur-clair); }
.f-filtre .f-etiquette { height: 18px; padding: 0 4px; }
.f-recherche { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--filet);
  border-radius: var(--rayon-champ); background: var(--surface); color: var(--texte-3); width: 240px; max-width: 100%; }
.f-recherche svg { width: 16px; height: 16px; }
.f-recherche input[type=search] { border: 0; background: transparent; padding: 0; min-height: 0; height: 32px; color: var(--texte); }
.f-recherche input[type=search]:focus { border: 0; }
.f-table { width: 100%; border-collapse: collapse; font-size: var(--t-texte); }
.f-table th { text-align: left; font-weight: 500; color: var(--texte-3); font-size: var(--t-second); padding: 12px 16px;
  border-bottom: 1px solid var(--filet-leger); white-space: nowrap; }
.f-table td { padding: 12px 16px; border-bottom: 1px solid var(--filet-leger); vertical-align: middle; }
.f-table tr:last-child td { border-bottom: 0; }
.f-table .f-droite, .f-table th.f-droite { text-align: right; }
.f-table tbody tr.f-ligne-lien { cursor: pointer; }
.f-table tbody tr.f-ligne-lien:hover, .f-table tbody tr[aria-selected="true"] { background: var(--survol); }
.f-table tbody tr[aria-selected="true"] { outline: 1px solid var(--filet-tres-fort); outline-offset: -1px; }
.f-table td a { color: inherit; }
.f-tableau { border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.f-pied-liste { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; color: var(--texte-3); }
.f-pied-liste strong { color: var(--texte); font-weight: 600; }
.f-liste-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.f-detail { display: none; }
.f-avec-detail { grid-template-columns: minmax(0, 1fr) var(--largeur-detail); margin: -24px -24px -24px 0; }
.f-avec-detail > .f-liste { padding: 24px 24px 24px 0; min-width: 0; }
.f-avec-detail > .f-detail {
  display: flex; flex-direction: column; gap: 24px; background: var(--fond-lateral); border-left: 1px solid var(--filet-leger);
  padding: 24px 24px 40px; min-height: calc(100dvh - var(--hauteur-haut));
}
.f-detail-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.f-detail-nature { font-size: var(--t-petit); font-weight: 500; color: var(--texte-3); }
.f-detail-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.f-detail-section > * { max-width: 100%; }
.f-detail-lignes > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--filet); }
.f-historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.f-historique li { display: flex; gap: 16px; align-items: flex-start; }
.f-historique li > span:nth-child(2) { flex: 1; min-width: 0; color: var(--texte-2); }
.f-historique li > span:last-child { color: var(--texte-3); white-space: nowrap; }
.f-historique .f-puce { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--filet-tres-fort); flex: none; }
.f-puce-orange { background: var(--orange) !important; } .f-puce-rouge { background: var(--rouge) !important; }
.f-puce-vert { background: var(--vert) !important; } .f-puce-bleu { background: var(--bleu) !important; }
.f-phrase-agent { font-size: var(--t-second); color: var(--orange); }
@media (max-width: 1199px) and (min-width: 861px) {
  .f-avec-detail { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .f-avec-detail > .f-liste { padding: 0; }
  .f-avec-detail > .f-detail { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: var(--largeur-detail);
    overflow-y: auto; min-height: 0; }
}

/* --- Formulaires ----------------------------------------------------------------------------------------- */
.f-champ { display: flex; flex-direction: column; gap: 8px; }
.f-champ label, .f-etiquette-champ { font-size: var(--t-second); font-weight: 500; color: var(--texte-2); }
.f-champ .f-aide, .f-aide { font-size: var(--t-petit); color: var(--texte-3); }
.f-champ .f-erreur { font-size: var(--t-petit); color: var(--rouge); }
.f-requis::after { content: " *"; color: var(--texte-3); }
input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], select, textarea {
  width: 100%; min-height: 36px; padding: 8px 12px; font-size: var(--t-texte); background: var(--surface);
  border: 1px solid var(--filet); border-radius: var(--rayon-champ); transition: border-color .15s;
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--filet-tres-fort); }
.f-champ-invalide input, .f-champ-invalide select, .f-champ-invalide textarea { border-color: var(--rouge); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--texte); }
input[type=color] { width: 56px; height: 40px; border: 1px solid var(--filet); border-radius: var(--rayon-bouton); background: none; }
fieldset { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px; margin: 0; }
legend { padding: 0 8px; font-size: var(--t-texte); font-weight: 600; }

/* --- Messages, états vides, chargement --------------------------------------------------------------- */
.f-alerte { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 12px 16px; font-size: var(--t-texte); background: var(--fond-lateral); }
.f-alerte-ok { border-color: var(--vert-filet); color: var(--vert); background: var(--vert-fond); }
.f-alerte-attention { border-color: var(--orange-filet); color: var(--orange); background: var(--orange-fond); }
.f-alerte-erreur { border-color: var(--rouge-filet); color: var(--rouge); background: var(--rouge-fond); }
.f-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 48px 16px;
  color: var(--texte-3); border: 1px dashed var(--filet); border-radius: var(--rayon); }
.f-vide strong { color: var(--texte); font-size: var(--t-texte); font-weight: 600; }
.f-vide p { margin: 0; max-width: 480px; }
.f-vide .f-bouton { margin-top: 8px; }
.f-squelette { height: 80px; border-radius: var(--rayon); background: var(--surface); animation: f-pulsation 1.4s ease-in-out infinite; }
.f-squelette-ligne { height: 24px; }
@keyframes f-pulsation { 50% { opacity: .5 } }
.f-apparition { animation: f-apparaitre .2s ease-out; }
@keyframes f-apparaitre { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* --- Divers (pages du socle) --------------------------------------------------------------------------- */
.f-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--t-petit); color: var(--texte-2);
  background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-bouton); padding: 0 4px; overflow-wrap: anywhere; }
.f-donnee { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-petit); color: var(--texte-2); background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-champ);
  padding: 8px; max-height: 264px; overflow: auto; margin: 0; }
.f-etape { border-left: 2px solid var(--filet); padding: 0 0 0 16px; }
.f-etape-agent { border-left-color: var(--texte-2); }
.f-etape-outil { border-left-color: var(--bleu); }
details > summary { cursor: pointer; color: var(--texte-2); font-size: var(--t-second); }
details > summary.f-bouton { list-style: none; display: inline-flex; font-size: var(--t-second); }
details > summary.f-bouton::-webkit-details-marker { display: none; }
.f-liste-def { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 16px; }
.f-liste-def dt { color: var(--texte-3); }
.f-liste-def dd { margin: 0; overflow-wrap: anywhere; }
.f-jauge { height: 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--filet); overflow: hidden; }
.f-jauge > span { display: block; height: 100%; background: var(--texte-2); }
progress.f-jauge { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 8px;
  background: var(--surface); overflow: hidden; }
progress.f-jauge::-webkit-progress-bar { background: var(--surface); border-radius: 8px; }
progress.f-jauge::-webkit-progress-value { background: var(--texte-2); border-radius: 8px; }
progress.f-jauge::-moz-progress-bar { background: var(--texte-2); border-radius: 8px; }
progress.f-jauge-attention::-webkit-progress-value { background: var(--orange); }
progress.f-jauge-attention::-moz-progress-bar { background: var(--orange); }
progress.f-jauge-erreur::-webkit-progress-value { background: var(--rouge); }
progress.f-jauge-erreur::-moz-progress-bar { background: var(--rouge); }
.f-jauge-attention > span { background: var(--orange); } .f-jauge-erreur > span { background: var(--rouge); }
.f-reglages { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.f-reglage { display: flex; gap: 16px; align-items: flex-start; color: var(--texte); }
.f-reglage:hover { background: var(--survol); text-decoration: none; }
.f-reglage svg { width: 16px; height: 16px; margin-top: 2px; color: var(--texte-3); }
.f-reglage p { margin: 4px 0 0; font-size: var(--t-second); color: var(--texte-3); }

/* --- Utilitaires (aucun style en ligne : CSP sans exception) ----------------------------------------- */
.f-desc { margin: 4px 0 0; color: var(--texte-3); font-size: var(--t-second); }
.f-m0 { margin: 0; } .f-mt8 { margin-top: 8px; } .f-mt12 { margin-top: 16px; } .f-mt16 { margin-top: 16px; } .f-mt24 { margin-top: 24px; }
.f-mb4 { margin-bottom: 4px; } .f-mb8 { margin-bottom: 8px; } .f-mb12 { margin-bottom: 16px; } .f-mb16 { margin-bottom: 16px; }
.f-p0 { padding: 0; }
.f-auto { width: auto; } .f-plein { width: 100%; }
.f-etroit { max-width: 560px; } .f-moyen { max-width: 720px; }
.f-nowrap { white-space: nowrap; } .f-centre { text-align: center; } .f-coupe { overflow-wrap: anywhere; }
.f-entre { justify-content: space-between; } .f-serre { gap: 8px; } .f-droite { text-align: right; }
.f-tertiaire { color: var(--texte-3); } .f-sans-bord { border: 0; }

/* --- Page de connexion -------------------------------------------------------------------------------- */
.f-connexion { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.f-connexion form { width: min(100%, 384px); }

/* --- Mode simulation ------------------------------------------------------------------------------------ */
.f-bandeau-simulation { padding: 8px 16px; font-size: var(--t-second); text-align: center;
  background: var(--orange-fond); color: var(--orange); border-bottom: 1px solid var(--orange-filet); }

/* --- Téléphone (≤ 860 px) : barre du bas, feuilles, cartes ------------------------------------------- */
@media (max-width: 860px) {
  .f-app, .f-menu-replie .f-app { grid-template-columns: minmax(0, 1fr); }
  .f-lateral, .f-haut-ordinateur, .f-ordinateur-seul { display: none !important; }
  .f-haut { padding: calc(8px + env(safe-area-inset-top)) 16px 8px; height: auto; min-height: var(--hauteur-haut); border-bottom: 0; }
  .f-haut .f-contexte { display: none; }
  .f-haut .f-bouton-icone { width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 50%; }
  .f-contenu { padding: 8px 16px calc(var(--hauteur-bas) + 32px + env(safe-area-inset-bottom)); }
  .f-entete { margin-bottom: 16px; }
  input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], input[type=date],
  input[type=time], input[type=search], select, textarea { font-size: 16px; min-height: 48px; border-radius: var(--rayon); }
  .f-recherche { width: 100%; height: 48px; }
  .f-recherche input[type=search] { height: 46px; min-height: 0; }
  .f-actions-detail { grid-template-columns: repeat(2, minmax(0, 1fr)) 44px; }
  .f-actions-detail .f-bouton { height: 44px; }
  .f-actions-detail .f-plus > summary { width: 44px; height: 44px; }
  .f-bouton { height: 44px; padding: 0 16px; font-size: var(--t-texte); border-radius: var(--rayon); }
  .f-plus > summary { width: 44px; height: 44px; }
  .f-bouton-icone { width: 44px; height: 44px; }
  .f-filtre { height: 44px; }
  .f-nav a { min-height: 44px; }
  .f-choix { min-height: 48px; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  .f-deux { grid-template-columns: minmax(0, 1fr); }

  /* chiffres clés : les 2 déclarés pour le téléphone, en lignes compactes (libellé à gauche, montant à droite) */
  .f-chiffres { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--filet); border-radius: var(--rayon); }
  .f-chiffres > .f-carte { border: 0; border-top: 1px solid var(--filet-leger); border-radius: 0; padding: 12px 16px; }
  .f-chiffres > .f-carte:first-child { border-top: 0; }
  .f-chiffres .f-chiffre { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .f-chiffres .f-chiffre-libelle svg, .f-chiffres .f-chiffre-explication { display: none; }
  .f-chiffres .f-chiffre-valeur { font-size: var(--t-chiffre); }
  .f-chiffres > .f-telephone-non { display: none; }

  /* À traiter : chaque ligne est une carte, boutons pleine largeur */
  .f-carte.f-a-traiter-liste { border: 0; padding: 0; background: none; }
  .f-a-traiter { border: 1px solid var(--filet); border-radius: var(--rayon); padding: 16px !important; margin-bottom: 8px; }
  .f-a-traiter:first-child { border-top: 1px solid var(--filet); }
  .f-a-traiter > div:last-child { flex-direction: column; align-items: stretch; gap: 8px; }
  .f-a-traiter .f-bouton { width: 100%; }

  /* tableau → cartes */
  .f-table-cartes thead { display: none; }
  .f-table-cartes, .f-table-cartes tbody { display: block; }
  .f-table-cartes tr { display: block; border: 1px solid var(--filet); border-radius: var(--rayon); padding: 8px 16px; margin-bottom: 8px; }
  .f-table-cartes td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; text-align: right; }
  .f-table-cartes td::before { content: attr(data-libelle); color: var(--texte-3); font-size: var(--t-second); text-align: left; flex: none; white-space: nowrap; }
  .f-table-cartes td > * { min-width: 0; }
  .f-carte:has(> .f-table-cartes), .f-carte:has(> .f-tableau) { border: 0; padding: 0; background: none; }
  .f-tableau { border: 0; border-radius: 0; overflow: visible; }

  /* détail → feuille du bas */
  .f-avec-detail { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .f-avec-detail > .f-liste { padding: 0; }
  .f-avec-detail::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0,0,0,.6); }
  .f-avec-detail > .f-detail { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; max-height: 88dvh; overflow-y: auto;
    min-height: 0; border-left: 0; border-top: 1px solid var(--filet); border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0;
    padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); }
  .f-avec-detail > .f-detail::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: var(--filet-tres-fort);
    align-self: center; flex: none; }

  /* menus déroulants → feuilles du bas */
  .f-deroulant[open] > .f-deroulant-contenu, .f-feuille {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-width: none; min-width: 0; max-height: 88dvh;
    overflow-y: auto; border: 0; border-top: 1px solid var(--filet); border-radius: var(--rayon-feuille) var(--rayon-feuille) 0 0;
    padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); gap: 4px;
  }
  .f-deroulant[open]::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.6); }
  .f-deroulant-contenu .f-feuille-poignee { display: block; width: 40px; height: 4px; border-radius: 4px; background: var(--filet-tres-fort);
    margin: 0 auto 8px; flex: none; }
  .f-deroulant-contenu h2 { font-size: var(--t-titre); padding: 8px 4px; }

  /* barre du bas : 5 destinations au plus, bouton + central */
  .f-onglets {
    display: flex; justify-content: space-around; align-items: flex-start; position: fixed; inset: auto 0 0 0; z-index: 30;
    height: calc(var(--hauteur-bas) - 24px + env(safe-area-inset-bottom)); padding: 8px 8px env(safe-area-inset-bottom);
    background: var(--fond); border-top: 1px solid var(--filet);
  }
  .f-onglet, .f-onglets .f-deroulant > summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 56px; min-height: 48px;
    padding: 0 4px; color: var(--texte-3); font-size: var(--t-petit); font-weight: 500; -webkit-user-select: none; user-select: none;
  }
  .f-onglet svg, .f-onglets .f-deroulant > summary svg { width: 22px; height: 22px; }
  .f-onglet:hover { text-decoration: none; }
  .f-onglet[aria-current="page"] { color: var(--texte); }
  .f-onglets .f-creer > summary { min-width: 56px; width: 56px; height: 56px; margin-top: -24px; border-radius: 50%;
    background: var(--texte); color: var(--sur-clair); }
  .f-onglets .f-creer > summary svg { width: 24px; height: 24px; }
  .f-bandeau-simulation { position: static; }
}
@media (min-width: 861px) { .f-telephone-seul { display: none !important; } }