/* ==========================================================================================================
   ESPACE CLIENT — DIRECTION ARTISTIQUE « VISEUR » DU COCKPIT (23/10/2026)

   Franck : « Grand changement sur Delmak côté client : Le design. On reprend le même design que le cockpit,
   mêmes typos, couleurs, etc. Mais la version admin reste SF. »

   Source des valeurs : module admincockpit, views/css/ac-tokens.css (jetons --ac-* de #admin-cockpit) et
   views/css/barre.css (barres sombres, onglets, modale, champs, boutons). Police Archivo, fond gris chaud
   #f3f2f2, encre #201e1d, accent unique #ec3013, AUCUN arrondi, structure lue par des filets (2 px pour les
   séparations majeures, 1 px à l'intérieur), micro-libellés en capitales espacées, chiffres à chasse fixe.

   POURQUOI CETTE COUCHE ET PAS LE RETRAIT D'app.css (choix du 23/10/2026)
   L'espace charge app.css, la feuille SF de l'admin. On la GARDE et on la recouvre, pour trois raisons :
     1. six feuilles de l'admin sont aussi chargées par des pages de l'espace (tickets.css, espace-tickets.css,
        trafic.css, visibilite.css, journal.css, contrat-tma.css) et lisent les variables d'app.css (--bg,
        --card, --accent, --border…) : redéfinir ces variables sur <body class="espace"> les fait basculer
        d'un coup, SANS toucher à un seul fichier de l'admin ;
     2. app.css porte la mise en page partagée (grilles, formulaires en rangées, tableaux, utilitaires
        .kl-sr, .num…) dont dépendent une quarantaine de gabarits de l'espace : la retirer, c'était les
        réécrire tous, au risque d'en oublier ;
     3. l'admin ne peut PAS être touché : rien ici n'est global. Les jetons vivent sur body.espace (jamais
        sur :root), chaque règle est préfixée par :where(body.espace), et aucune page de l'admin ne porte la
        classe « espace » ni ne charge cette feuille (vérifié par le banc : styles calculés de /dashboard
        identiques avant et après).
   :where() garde la spécificité d'origine : `:where(body.espace) .card` pèse autant que `.card` d'app.css et
   l'emporte parce que cette feuille est chargée APRÈS ; les feuilles des onglets, chargées plus tard encore,
   gardent donc la main sur leurs propres composants.

   Mode d'emploi pour les autres lots : bancs-delmak/2026-10-23-espace/GUIDE-DESIGN.md.
   ========================================================================================================== */

/* ---------- Police : Archivo, servie par le site ----------
   La CSP de l'espace (EspaceHeadersSubscriber) n'autorise que 'self' pour les polices et les feuilles : le
   lien Google Fonts du cockpit y serait refusé. Mêmes fichiers que klorel.fr (police variable 100-900,
   découpée latin / latin étendu comme Google le fait) : public/espace/fonts/. @font-face ne peut pas être
   restreinte à un sélecteur, mais seule cette feuille la déclare et seul l'espace la charge. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../espace/fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../espace/fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================================================
   1. JETONS --esp-*  (miroir des --ac-* du cockpit, sous la racine de l'espace)
   ========================================================================================================== */
body.espace {
  /* Fonds et encre */
  --esp-bg: #f3f2f2;              /* --ac-bg : fond de page */
  --esp-surface: #eae9e9;         /* --ac-surface : creux, colonnes, cellules */
  --esp-panel: #faf9f9;           /* panneau posé sur le fond (cartes) */
  --esp-champ: #fff;              /* champs de saisie (barre.css : .acb-input) */
  --esp-ink: #201e1d;             /* --ac-ink */
  --esp-divider: rgba(32, 30, 29, .4);
  /* Accent unique */
  --esp-accent: #ec3013;          /* filets, diodes, soulignés, anneau de focus */
  --esp-accent-face: #dd2b0f;     /* FOND sous un texte blanc (boutons, P1) : 4,7:1. Le #ec3013 du cockpit n'y donne que 4,2:1. */
  --esp-accent-hover: #ae1800;    /* survol d'un bouton plein */
  --esp-accent-press: #7c1405;
  --esp-accent-text: #ae1800;     /* --ac-accent-text : accent LISIBLE sur fond clair (6,4:1) */
  --esp-accent-on-dark: #ff9783;  /* --ac-accent-on-dark : accent sur les barres sombres */
  /* Gris chauds (--ac-n*) */
  --esp-n100: #f8f4f4; --esp-n200: #eae7e7; --esp-n300: #d7d3d3; --esp-n400: #bab6b6; --esp-n500: #9b9797;
  --esp-n600: #7d7979; --esp-n700: #605d5d; --esp-n800: #444141; --esp-n900: #2d2b2b;
  /* Rampe d'accent (--ac-a*) */
  --esp-a100: #fff2ef; --esp-a200: #ffe0d9; --esp-a300: #ffc4b8; --esp-a400: #ff9783; --esp-a500: #ff563c;
  --esp-a600: #dd2b0f; --esp-a700: #ae1800; --esp-a800: #7c1405; --esp-a900: #4d170e;
  /* Texte secondaire : n700 (5,8:1 sur le fond). Le n600 des micro-libellés du cockpit tombe à 3,7:1,
     trop peu pour un marchand qui lit son téléphone au comptoir. */
  --esp-muted: #605d5d;
  /* États — mono-accent du cockpit : PAS de vert ni d'ambre. « Ça va » est de l'encre neutre, ce qui
     cloche passe au rouge ; l'alerte (à surveiller) prend l'accent clair, la panne l'accent plein. Le
     libellé écrit nomme toujours l'état (WCAG 1.4.1). */
  --esp-ok: #444141;              /* texte d'un état sain (n800) */
  --esp-ok-vif: #7d7979;          /* aplat d'un état sain : barres, jauges (n600) */
  --esp-alerte: #7c1405;          /* texte « à surveiller » (a800, comme --kl-warn du cockpit) */
  --esp-alerte-vif: #ff9783;      /* aplat « à surveiller » (a400) */
  --esp-alerte-fond: #fff2ef;     /* a100 */
  --esp-danger: #ae1800;          /* texte « en panne / échu » (a700) */
  --esp-danger-vif: #ec3013;      /* aplat « en panne » */
  --esp-danger-fond: #ffe0d9;     /* a200 */
  /* Priorités des tickets (Franck, 23/10/2026 : « Priorité 1 (anciennement URGENT). Priorité 2 (anciennement
     rapide), Priorité 3 ») — voir .esp-prio plus bas. */
  --esp-p1: #dd2b0f;
  --esp-p2: #ff9783;
  --esp-p3: #9b9797;
  /* Typographie */
  --esp-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --esp-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Ombres : réservées aux surfaces FLOTTANTES (menus, fenêtres, carte qu'on glisse), comme au cockpit. */
  --esp-shadow-sm: 0 1px 2px rgba(45, 43, 43, .14);
  --esp-shadow-md: 0 3px 10px rgba(45, 43, 43, .16);
  --esp-shadow-lg: 0 12px 32px rgba(45, 43, 43, .22);
  --esp-shadow-xl: 0 40px 80px -24px rgba(32, 30, 29, .45), 0 8px 24px -10px rgba(32, 30, 29, .30);
  --esp-scrim: rgba(32, 30, 29, .55);
  /* Barres sombres (« Double barre » du cockpit) : en-tête, onglets, barre du bas du téléphone. */
  --esp-barre: #2d2b2b;           /* --acb-top (n900) : barre des onglets */
  --esp-barre-fonce: #201e1d;     /* --acb-low (encre) : en-tête, onglet actif */
  --esp-barre-encre: #d7d3d3;     /* libellés au repos (n300) */
  --esp-barre-sep: rgba(248, 244, 244, .1);
  --esp-barre-bd: rgba(248, 244, 244, .16);
  --esp-barre-survol: rgba(248, 244, 244, .07);
  --esp-regle: repeating-linear-gradient(90deg, rgba(248, 244, 244, .2) 0 1px, transparent 1px 8px); /* règle graduée */
  /* Mise en page : « Augmente la largeur pour prendre plus de place » (Franck, 23/10/2026). */
  --esp-cadre: 1760px;            /* largeur maximale du contenu, marges comprises */
  --esp-gouttiere: 16px;          /* marge latérale : 16 → 24 → 40 → 48 px */
  --esp-lecture: 75ch;            /* longueur maximale d'une ligne de texte courant */

  /* ---------- PONT : les variables d'app.css prennent les valeurs du cockpit ----------
     Toute règle d'app.css ou d'une feuille de l'admin chargée par une page de l'espace (tickets.css,
     trafic.css, visibilite.css…) suit la DA sans être modifiée. */
  --bg: var(--esp-bg);
  --bg-2: var(--esp-surface);
  --card: var(--esp-panel);
  --card-2: var(--esp-panel);
  --border: var(--esp-n300);
  --border-lit: var(--esp-n400);
  --fg: var(--esp-ink);
  --muted: var(--esp-muted);
  /* --dim : n700 et non n600 (passe finale du 23/10/2026) — les feuilles de l'admin s'en servent pour du TEXTE
     (25 « color: var(--dim) » sur 27) ; n600 donnait 3,6 à 4,1:1 sur les fonds clairs, sous le seuil WCAG AA. */
  --dim: var(--esp-n700);
  --accent: var(--esp-accent-text);  /* app.css s'en sert surtout pour du TEXTE (liens, états) : version lisible */
  --accent-2: var(--esp-n700);        /* le violet « commande » du SF n'existe pas au cockpit : gris secondaire */
  --accent-soft: var(--esp-a100);
  --success: var(--esp-ok);
  --danger: var(--esp-danger);
  --warn: var(--esp-alerte);
  --orange: var(--esp-a500);
  --radius: 0;
  --radius-sm: 0;
  --font: var(--esp-font);
  --font-brand: var(--esp-font);
  --font-num: var(--esp-font);        /* chiffres en Archivo à chasse fixe (tabular-nums), comme au cockpit */
  --glow: none;
  --lift: none;

  color-scheme: light;
}
@media (min-width: 640px) { body.espace { --esp-gouttiere: 24px; } }
@media (min-width: 1200px) { body.espace { --esp-gouttiere: 40px; } }
@media (min-width: 1600px) { body.espace { --esp-gouttiere: 48px; } }

/* ==========================================================================================================
   2. SOCLE
   ========================================================================================================== */
body.espace {
  background: var(--esp-bg);
  background-image: none;         /* ni halos ni grille d'instrument du SF */
  color: var(--esp-ink);
  font-family: var(--esp-font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* PRINCIPE DU COCKPIT : aucun arrondi (ac-tokens.css, #admin-cockpit *). Une seule règle neutralise les
   border-radius d'app.css et des feuilles partagées. */
body.espace *,
body.espace *::before,
body.espace *::after { border-radius: 0 !important; }
/* Seule exception : la diode « en ligne » reste RONDE. Dans l'espace, la FORME de la diode code l'état
   (rond = en ligne, carré = hors ligne, losange = surveillance indisponible) pour qui ne distingue pas les
   teintes (WCAG 1.4.1) : l'arrondi y porte une information. */
body.espace .dot.up { border-radius: 50% !important; }

:where(body.espace) :focus { outline: none; }
/* Jamais l'anneau bleu natif : liseré d'accent, comme au cockpit. */
:where(body.espace) :focus-visible { outline: 2px solid var(--esp-accent); outline-offset: 2px; }
:where(body.espace) ::selection { background: rgba(236, 48, 19, .25); color: inherit; }
:where(body.espace) button { font-family: inherit; }
:where(body.espace) hr { border: 0; height: 1px; background: var(--esp-n300); margin: 24px 0; }
:where(body.espace) code,
:where(body.espace) .mono { font-family: var(--esp-mono); font-size: max(12px, .9em); }
:where(body.espace) kbd {
  border: 1px solid var(--esp-n400); background: var(--esp-champ); color: var(--esp-ink);
  font: 700 12px/1.4 var(--esp-font); padding: 1px 6px; box-shadow: inset 0 -1px 0 var(--esp-n400);
}
/* Toute valeur susceptible de changer est en chiffres à chasse fixe : pas de saut de largeur. */
:where(body.espace) .num,
:where(body.espace) td.num,
:where(body.espace) th.num { font-family: var(--esp-font); font-variant-numeric: tabular-nums; }
:where(body.espace) ::-webkit-scrollbar-thumb { background: var(--esp-n400); }
:where(body.espace) ::-webkit-scrollbar-thumb:hover { background: var(--esp-n600); }
:where(body.espace) ::-webkit-scrollbar-track { background: transparent; }

/* ---------- Titres ---------- */
:where(body.espace) h1 {
  margin: 0 0 6px; font-family: var(--esp-font); font-weight: 800; font-size: 28px; line-height: 1.12;
  letter-spacing: -.015em; color: var(--esp-ink); overflow-wrap: anywhere;
}
@media (min-width: 900px) { :where(body.espace) h1 { font-size: 34px; } }
/* h2 = titre de section : capitales espacées, carré d'accent (la marque du bandeau du cockpit). */
:where(body.espace) h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--esp-font); font-size: 13px; font-weight: 800; line-height: 1.3;
  letter-spacing: .16em; text-transform: uppercase; color: var(--esp-ink);
}
:where(body.espace) h2::before {
  content: ''; flex: none; width: 9px; height: 9px; background: var(--esp-accent); box-shadow: none;
}
:where(body.espace) h3 {
  margin: 0 0 8px; font-family: var(--esp-font); font-size: 12px; font-weight: 800; line-height: 1.35;
  letter-spacing: .12em; text-transform: uppercase; color: var(--esp-muted);
}
:where(body.espace) .page-sub { margin: 0 0 22px; color: var(--esp-muted); font-size: 15px; max-width: var(--esp-lecture); }

/* ---------- Texte courant : lignes bornées ----------
   Le contenu s'étale désormais sur 1 300 px et plus : sans borne, une phrase ferait 150 caractères et l'œil
   perdrait la ligne suivante. Seuls les paragraphes SANS classe (le texte courant) et les classes de prose
   listées ici sont bornés : un <p class="…"> sert souvent de rangée de mise en page (axe d'une courbe,
   ligne de liens, pied de carte) et ne doit pas rétrécir. Une page borne sa propre prose avec .esp-lecture.
   Une boîte vide centrée garde son centrage. */
:where(body.espace) main :where(p, dd):not([class]),
:where(body.espace) main p:where(.small, .muted, [class*="-intro"], [class*="-aide"], [class*="-note"]),
:where(body.espace) :where(.help, .ns-intro, .ns-aide, .tf-note, .esp-tr-aide p, .esp-pf-aide p, .esp-fa-intro) { max-width: var(--esp-lecture); }
:where(body.espace) main :where(.empty, .esp-vide, .tf-vide, .dc-vide) p { margin-left: auto; margin-right: auto; }

/* ---------- Liens ----------
   Accent LISIBLE (#ae1800) ; souligné au survol. Pris dans une phrase, le lien est souligné d'office : sa
   teinte seule ne se distingue pas assez du texte (2,3:1, il faut 3:1 — WCAG 1.4.1). */
:where(body.espace) a { color: var(--esp-accent-text); text-decoration: none; }
:where(body.espace) a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* Spécificité nulle hors de `a` : une rangée de liens (.esp-site-liens…) les désoulignent d'une seule règle. */
:where(body.espace) :where(p, li, dd, .help, .flash) > a:where(:not([class])) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

/* ==========================================================================================================
   3. COMPOSANTS D'app.css REMIS À LA DA
   ========================================================================================================== */

/* ---------- Panneau (carte) ----------
   Comme la fenêtre du cockpit : panneau clair, filet de 1 px, arête haute de 2 px à l'encre. Pas d'ombre :
   la carte est posée, elle ne flotte pas. */
:where(body.espace) .card {
  background: var(--esp-panel);
  border: 1px solid var(--esp-n300);
  border-top: 2px solid var(--esp-ink);
  box-shadow: none;
  padding: 20px;
  margin-bottom: 16px;
}
:where(body.espace) .card::before { content: none; }
:where(body.espace) .card.pad-sm { padding: 12px 14px; }
:where(body.espace) a.card { color: inherit; transition: background .12s, border-color .12s; }
:where(body.espace) a.card:hover { text-decoration: none; background: var(--esp-champ); border-color: var(--esp-n400); border-top-color: var(--esp-accent); }
@media (min-width: 900px) { :where(body.espace) .card { padding: 22px 24px; } }

/* ---------- Grilles : plus de place, plus de colonnes ---------- */
:where(body.espace) .grid { gap: 16px; }
@media (min-width: 1500px) {
  :where(body.espace) .grid-2 { gap: 20px; }
  :where(body.espace) .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Indicateurs (KPI) ----------
   Gros chiffre en 800, micro-libellé en capitales au-dessus : la rangée d'indicateurs du cockpit. L'état se
   lit à l'arête haute du panneau (encre : neutre ; accent clair : à surveiller ; accent : à traiter) ET à la
   couleur du chiffre ; la note dessous le dit en toutes lettres. */
:where(body.espace) .kpi { overflow: hidden; }
:where(body.espace) .kpi::after { content: none; }
:where(body.espace) .kpi .kpi-label {
  color: var(--esp-muted); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
:where(body.espace) .kpi .kpi-value {
  margin-top: 6px; font-family: var(--esp-font); font-size: 34px; font-weight: 800; line-height: 1.05;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--esp-ink);
}
:where(body.espace) .kpi .kpi-value small { font-family: var(--esp-font); font-size: 14px; color: var(--esp-muted); font-weight: 600; }
:where(body.espace) .kpi.good .kpi-value { color: var(--esp-ink); }
:where(body.espace) .kpi.warn { border-top-color: var(--esp-alerte-vif); }
:where(body.espace) .kpi.warn .kpi-value { color: var(--esp-alerte); }
:where(body.espace) .kpi.bad { border-top-color: var(--esp-danger-vif); }
:where(body.espace) .kpi.bad .kpi-value { color: var(--esp-danger); }
:where(body.espace) .kpi.good::after,
:where(body.espace) .kpi.warn::after,
:where(body.espace) .kpi.bad::after { content: none; }

/* ---------- Boutons ----------
   Bouton principal : aplat d'accent, libellé blanc en capitales 800 (.acb-mbtn--primary). Secondaire :
   cadre d'encre (.acb-mbtn). Danger : cadre d'accent qui se remplit au survol (.ac-btn-compact). Ni biseau,
   ni dégradé, ni lueur. Libellé fer à gauche dans un bouton pleine largeur (règle du cockpit). */
:where(body.espace) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--esp-accent-face);
  clip-path: none; filter: none; box-shadow: none;
  background: var(--esp-accent-face); color: #fff;
  font: 800 13px/1.2 var(--esp-font); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
:where(body.espace) .btn:hover { background: var(--esp-accent-hover); border-color: var(--esp-accent-hover); color: #fff; filter: none; box-shadow: none; text-decoration: none; }
:where(body.espace) .btn:active { background: var(--esp-accent-press); border-color: var(--esp-accent-press); transform: none; box-shadow: none; }
:where(body.espace) .btn:focus-visible { outline: 2px solid var(--esp-accent); outline-offset: 2px; }
:where(body.espace) .btn.btn-ghost { background: transparent; border-color: var(--esp-ink); color: var(--esp-ink); box-shadow: none; }
:where(body.espace) .btn.btn-ghost:hover { background: var(--esp-n200); border-color: var(--esp-ink); color: var(--esp-ink); box-shadow: none; }
:where(body.espace) .btn.btn-danger { background: transparent; border-color: var(--esp-accent-face); color: var(--esp-accent-text); box-shadow: none; }
:where(body.espace) .btn.btn-danger:hover { background: var(--esp-accent-face); color: #fff; box-shadow: none; }
:where(body.espace) .btn.btn-sm { min-height: 36px; padding: 0 12px; font-size: 12px; letter-spacing: .08em; clip-path: none; }
:where(body.espace) .btn[disabled],
:where(body.espace) .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; }
@media (pointer: coarse) { :where(body.espace) .btn.btn-sm { min-height: 44px; } }

/* ---------- Champs ----------
   Champ blanc, filet gris, encre au focus et soulignement d'accent (.acb-input). 16 px : iOS ne zoome pas. */
:where(body.espace) label {
  margin: 0 0 6px; color: var(--esp-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
:where(body.espace) input[type=text], :where(body.espace) input[type=email], :where(body.espace) input[type=password],
:where(body.espace) input[type=url], :where(body.espace) input[type=number], :where(body.espace) input[type=date],
:where(body.espace) input[type=search], :where(body.espace) input[type=tel], :where(body.espace) input[type=time],
:where(body.espace) input[type=datetime-local], :where(body.espace) select, :where(body.espace) textarea {
  background-color: var(--esp-champ); color: var(--esp-ink);
  border: 1px solid var(--esp-n400);
  padding: 10px 12px; font: 400 16px/1.45 var(--esp-font);
  box-shadow: none; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
/* La flèche dessinée par app.css (dégradés à droite) garde sa place : le texte ne passe pas dessous. */
:where(body.espace) select { padding-right: 36px; }
:where(body.espace) input:focus, :where(body.espace) select:focus, :where(body.espace) textarea:focus {
  border-color: var(--esp-ink); box-shadow: inset 0 -2px 0 var(--esp-accent);
}
:where(body.espace) input::placeholder, :where(body.espace) textarea::placeholder { color: var(--esp-muted); opacity: 1; }
:where(body.espace) input[type=checkbox], :where(body.espace) input[type=radio] { accent-color: var(--esp-accent-face); }
:where(body.espace) input[type=file] { font: 400 14px var(--esp-font); color: var(--esp-muted); }
:where(body.espace) input[type=file]::file-selector-button {
  min-height: 40px; margin-right: 12px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--esp-ink); background: transparent; color: var(--esp-ink);
  font: 800 12px var(--esp-font); letter-spacing: .1em; text-transform: uppercase;
}
:where(body.espace) input[type=file]::file-selector-button:hover { background: var(--esp-n200); }
:where(body.espace) input:-webkit-autofill,
:where(body.espace) textarea:-webkit-autofill,
:where(body.espace) select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--esp-champ) inset; -webkit-text-fill-color: var(--esp-ink); caret-color: var(--esp-ink);
}
:where(body.espace) .field { margin-bottom: 16px; }
:where(body.espace) .help { margin-top: 5px; color: var(--esp-muted); font-size: 13px; }

/* ---------- Tableaux ----------
   En-têtes en micro-libellés, filet de 2 px à l'encre dessous, lignes séparées par un filet de 1 px
   (.ac-thead / .ac-row). La ligne survolée s'allume par la gauche (liseré d'accent). */
:where(body.espace) .table-wrap { border: 0; background: transparent; }
:where(body.espace) table { font-size: 14px; }
:where(body.espace) th {
  padding: 10px 14px 8px; background: transparent; color: var(--esp-muted);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid var(--esp-ink);
}
:where(body.espace) td { padding: 12px 14px; border-top: 0; border-bottom: 1px solid var(--esp-n300); }
/* En-tête de LIGNE (<th scope="row">, numéro de facture…) : une cellule comme les autres, pas un en-tête de colonne. */
:where(body.espace) tbody th,
:where(body.espace) tfoot th {
  padding: 12px 14px; border-bottom: 1px solid var(--esp-n300); color: var(--esp-ink);
  font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: none;
}
:where(body.espace) tr.rowlink:hover td { background: var(--esp-n200); }
:where(body.espace) tr.rowlink:hover td:first-child { box-shadow: inset 3px 0 0 var(--esp-accent); }

/* ---------- Étiquettes (badges) ----------
   Puce cadrée en capitales (« INVITÉ » du cockpit). Neutre par défaut ; « bad » est PLEINE (on doit la voir
   d'un coup d'œil), « warn » est cadrée d'accent clair, « ok » reste à l'encre. */
:where(body.espace) .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--esp-n400); background: transparent; color: var(--esp-muted); box-shadow: none;
  font: 700 12px/1.3 var(--esp-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
:where(body.espace) .badge.ok { color: var(--esp-ink); border-color: var(--esp-n500); background: transparent; box-shadow: none; }
:where(body.espace) .badge.warn { color: var(--esp-alerte); border-color: var(--esp-alerte-vif); background: var(--esp-alerte-fond); box-shadow: none; }
:where(body.espace) .badge.bad,
:where(body.espace) .badge.danger { color: #fff; border-color: var(--esp-accent-face); background: var(--esp-accent-face); box-shadow: none; }
:where(body.espace) .badge.accent { color: var(--esp-accent-text); border-color: var(--esp-accent); background: transparent; box-shadow: none; }

/* ---------- Diodes ----------
   Carrées comme au cockpit (le point « live » est un carré de 7 px), sauf « en ligne » (ronde, voir §2).
   Plus de halo. La panne clignote toujours (neutralisé par « réduire les animations »). */
:where(body.espace) .dot { width: 9px; height: 9px; box-shadow: none; }
:where(body.espace) .dot.up { background: var(--esp-ink); box-shadow: none; }
:where(body.espace) .dot.down { background: var(--esp-danger-vif); box-shadow: none; }
:where(body.espace) .dot.unknown { background: var(--esp-n500); }
:where(body.espace) .dot.p3 { background: var(--esp-p1); box-shadow: none; }
:where(body.espace) .dot.p2 { background: var(--esp-p2); box-shadow: none; }
:where(body.espace) .dot.p1 { background: var(--esp-p3); box-shadow: none; }
:where(body.espace) .dot:is(.unknown, .p2) { transform: rotate(45deg) scale(.85); }

/* ---------- Messages (flash) ----------
   Barre d'état à liseré gauche de 3 px, fond du panneau, texte à l'encre : lisible, la teinte n'est que le
   signal. */
:where(body.espace) .flash {
  padding: 12px 16px 12px 16px; border: 1px solid var(--esp-n300); border-left: 3px solid var(--esp-ink);
  background: var(--esp-panel); color: var(--esp-ink); font-size: 14px;
}
:where(body.espace) .flash::before { content: none; }
:where(body.espace) .flash.success { background: var(--esp-panel); border-color: var(--esp-n300); border-left-color: var(--esp-ink); color: var(--esp-ink); }
:where(body.espace) .flash.error { background: var(--esp-danger-fond); border-color: var(--esp-a300); border-left-color: var(--esp-accent); color: var(--esp-a900); }
:where(body.espace) .flash.info { background: var(--esp-n100); border-color: var(--esp-n300); border-left-color: var(--esp-n700); color: var(--esp-ink); }
:where(body.espace) .flash.warn { background: var(--esp-alerte-fond); border-color: var(--esp-a300); border-left-color: var(--esp-alerte-vif); color: var(--esp-a900); }

/* ---------- Sélecteurs segmentés (.ac-seg du cockpit) ----------
   Groupe cadré, options en capitales. L'option courante est À L'ENCRE pour un filtre neutre (période, vue) —
   l'accent est réservé à ce qui alerte — et à l'accent quand la page le demande (.seg.on.accent). */
:where(body.espace) .segmented { border: 1px solid var(--esp-divider); background: transparent; }
:where(body.espace) .seg {
  min-height: 40px; padding: 0 14px; border-right: 1px solid var(--esp-divider);
  color: var(--esp-muted); font: 700 12px var(--esp-font); letter-spacing: .08em; text-transform: uppercase;
}
:where(body.espace) .seg:hover { background: var(--esp-n200); color: var(--esp-ink); text-decoration: none; }
:where(body.espace) .seg.on { background: var(--esp-ink); color: #fff; font-weight: 800; box-shadow: none; }
:where(body.espace) .seg.on.accent { background: var(--esp-accent-face); color: #fff; box-shadow: none; }
:where(body.espace) .seg.on.ok { background: var(--esp-ink); color: #fff; box-shadow: none; }
:where(body.espace) .seg.on:not(.accent):not(.ok) { box-shadow: none; }
@media (pointer: coarse) { :where(body.espace) .seg { min-height: 44px; } }

/* ---------- Pastilles et divers ---------- */
:where(body.espace) .pill {
  border: 1px solid var(--esp-n400); background: transparent; color: var(--esp-ink); box-shadow: none;
  font: 700 12px/1.4 var(--esp-font); letter-spacing: .06em; text-transform: uppercase;
}
:where(body.espace) .pill:hover { border-color: var(--esp-ink); color: var(--esp-ink); box-shadow: none; }
:where(body.espace) .section-pill { border-color: var(--esp-n400); background: transparent; color: var(--esp-muted); font-size: 12px; }
:where(body.espace) .nav-badge { background: var(--esp-accent-face); color: #fff; box-shadow: none; }
:where(body.espace) .muted { color: var(--esp-muted); }
:where(body.espace) .small { font-size: 13px; }
:where(body.espace) .empty { color: var(--esp-muted); }
:where(body.espace) .empty .big { filter: none; }
:where(body.espace) .token-box { background: var(--esp-champ); border: 1px dashed var(--esp-n400); }
:where(body.espace) .toolbar { gap: 10px; }
/* Chiffres de site (aperçu) : la rangée d'indicateurs du cockpit, filet de 2 px à gauche de chaque valeur. */
:where(body.espace) .site-metrics { gap: 8px; }
:where(body.espace) .site-metrics .m { background: transparent; border: 0; border-left: 2px solid var(--esp-divider); padding: 2px 10px; }
:where(body.espace) .site-metrics .m b { font-family: var(--esp-font); font-size: 24px; font-weight: 800; line-height: 1.15; }
:where(body.espace) .site-metrics .m span { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--esp-muted); }
:where(body.espace) .site-metrics .m.warn { border-left-color: var(--esp-alerte-vif); }
:where(body.espace) .site-metrics .m.warn b { color: var(--esp-alerte); }
:where(body.espace) .site-metrics .m.bad { border-left-color: var(--esp-danger-vif); }
:where(body.espace) .site-metrics .m.bad b { color: var(--esp-danger); }
/* Barre réseau / application (performances). */
:where(body.espace) .perf-bar { height: 10px; background: var(--esp-n200); border: 0; }
:where(body.espace) .perf-bar > span.reseau { background: var(--esp-n500); }
:where(body.espace) .perf-bar > span.appli { background: var(--esp-accent); box-shadow: none; }
:where(body.espace) .perf-legend i.reseau { background: var(--esp-n500); }
:where(body.espace) .perf-legend i.appli { background: var(--esp-accent); }
/* Jauge circulaire (si une page en affiche une). */
:where(body.espace) .health-ring { --ring: var(--esp-ink); filter: none; background: conic-gradient(var(--ring) calc(var(--p) * 1%), var(--esp-n200) 0); }
:where(body.espace) .health-ring::before { background: var(--esp-panel); border-color: var(--esp-n300); }
:where(body.espace) .health-ring::after { content: none; }
:where(body.espace) .health-ring.warn { --ring: var(--esp-alerte-vif); }
:where(body.espace) .health-ring.bad { --ring: var(--esp-danger-vif); }
:where(body.espace) .health-ring.na { --ring: var(--esp-n200); }
/* Commentaires et description de ticket (repris d'app.css, rendus clairs ; la page des tickets les affine). */
:where(body.espace) .comment { background: var(--esp-panel); border: 1px solid var(--esp-n300); }
:where(body.espace) .comment.hub { background: var(--esp-n100); border-color: var(--esp-n400); }
:where(body.espace) .ticket-desc { background: var(--esp-champ); border: 1px solid var(--esp-n300); }
:where(body.espace) .pager-etat { color: var(--esp-muted); font-size: 13px; }
/* Note secrète (encart de l'aperçu, page /espace/note-secrete) : champ blanc, et la CHASSE FIXE est gardée —
   on y écrit des mots de passe, un l et un 1 doivent se distinguer avant l'envoi (app.css le faisait par
   --font-num, devenue Archivo dans l'espace). */
:where(body.espace) .ns-zone { background: var(--esp-champ); border-color: var(--esp-n400); font-family: var(--esp-mono); }
:where(body.espace) .ns-zone:focus { border-color: var(--esp-ink); box-shadow: inset 0 -2px 0 var(--esp-accent); }
:where(body.espace) .ns-lien { border-color: var(--esp-accent); background: var(--esp-a100); }
:where(body.espace) .ns-lien-titre { color: var(--esp-accent-text); }
:where(body.espace) .ns-lien-champ,
:where(body.espace) .ns-secret { font-family: var(--esp-mono); background: var(--esp-champ); }
/* Journaux de la boutique (journal.css, feuille de l'admin chargée APRÈS celle-ci par la page Journaux) :
   sélecteurs plus forts que les siens. Familles d'erreurs du cockpit : gris pour le bruit, accent pour le grave. */
body.espace .jr-fam-php { --jr: #605d5d; }
body.espace .jr-fam-404 { --jr: #9b9797; }
body.espace .jr-fam-js { --jr: #2d2b2b; }
body.espace .jr-fam-fichiers { --jr: #ff9783; }
body.espace .jr-fam-malware { --jr: #ec3013; }
body.espace .jr-fam { background: var(--esp-panel); }
body.espace .jr-message { background: var(--esp-champ); font-family: var(--esp-mono); }
/* Passe finale du 23/10/2026 (Franck : « Augmente la largeur pour prendre plus de place ») : app.css met tout champ
   à width: 100% ; dans la barre de filtres en flex, chaque liste prenait une ligne entière, même à 1 440 px.
   Recherche souple, listes et bouton à leur largeur ; une colonne au téléphone (comme journal.css), 44 px au doigt. */
body.espace .jr-filtres { align-items: stretch; }
body.espace .jr-filtres input[type="search"] { flex: 1 1 280px; width: auto; min-height: 44px; }
body.espace .jr-filtres select { flex: 0 1 220px; width: auto; min-height: 44px; }
body.espace .jr-filtres .btn { flex: none; min-height: 44px; }
@media (max-width: 760px) {
  body.espace .jr-filtres select, body.espace .jr-filtres .btn { flex: 1 1 100%; }
}
body.espace .jr-table th { font-size: 12px; }   /* plancher de 12 px (journal.css : 11 px) */
body.espace .jr-pages .btn { min-height: 44px; }
/* Famille sans erreur : plus d'opacité .55 (textes à 2,4:1) ; le vide se dit par un cadre en tirets et le chiffre gris. */
body.espace .jr-fam.vide { opacity: 1; background: transparent; border-style: dashed; border-color: var(--esp-n400); }
body.espace .jr-fam.vide strong { color: var(--esp-muted); }
/* Détails repliables (<details>) : le triangle natif garde la couleur du texte. */
:where(body.espace) summary { cursor: pointer; }

/* ==========================================================================================================
   4. COMPOSANTS NEUFS DE L'ESPACE (à l'usage des onglets — voir GUIDE-DESIGN.md)
   ========================================================================================================== */

/* Micro-titre d'accent au-dessus d'un titre (« 02 / TICKETS » du cockpit) et micro-libellé neutre. */
:where(body.espace) .esp-kicker {
  margin: 0 0 6px; color: var(--esp-accent-text);
  font: 800 12px/1.3 var(--esp-font); letter-spacing: .2em; text-transform: uppercase;
}
:where(body.espace) .esp-microlabel {
  color: var(--esp-muted); font: 800 12px/1.3 var(--esp-font); letter-spacing: .12em; text-transform: uppercase;
}
/* Paragraphe borné à la longueur de lecture, où qu'il soit. */
:where(body.espace) .esp-lecture { max-width: var(--esp-lecture); }

/* En-tête de panneau : micro-titre + titre + actions, filet de 2 px dessous (tête de la fenêtre du cockpit). */
:where(body.espace) .esp-panneau-tete {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px;
  margin: -2px 0 18px; padding-bottom: 14px; border-bottom: 2px solid var(--esp-divider);
}
:where(body.espace) .esp-panneau-tete > :first-child { flex: 1 1 260px; min-width: 0; }
:where(body.espace) .esp-panneau-titre { margin: 0; font: 800 22px/1.15 var(--esp-font); letter-spacing: -.01em; color: var(--esp-ink); }

/* Cadre de visée : quatre équerres d'encre aux coins (fenêtre du cockpit, .acb-corner). Purement décoratif,
   dessiné en arrière-plan d'un pseudo-élément : aucun balisage à ajouter, rien d'intercepté. */
:where(body.espace) .esp-coins { position: relative; }
:where(body.espace) .esp-coins::after {
  content: ''; position: absolute; inset: -9px; pointer-events: none;
  background:
    linear-gradient(var(--esp-ink), var(--esp-ink)) top left / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top left / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top right / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) top right / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--esp-ink), var(--esp-ink)) bottom right / 2px 16px no-repeat;
}

/* Bouton icône carré de 44 px (fermer, déplacer, ouvrir un menu). */
:where(body.espace) .esp-btn-icone {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--esp-divider); background: transparent; color: var(--esp-ink);
  transition: background .12s, color .12s, border-color .12s;
}
:where(body.espace) .esp-btn-icone:hover { background: var(--esp-accent-face); border-color: var(--esp-accent-face); color: #fff; }

/* ---------- Pastilles de priorité des tickets ----------
   Franck, 23/10/2026 : « Priorité 1 (anciennement URGENT). Priorité 2 (anciennement rapide), Priorité 3 ».
   Le numéro AFFICHÉ est l'inverse de la valeur en base (Ticket::$priority : 3 = urgent) :
     classe = esp-prio-{{ 4 - t.priority }}  →  base 3 = P1, base 2 = P2, base 1 = P3.
   P1 : aplat d'accent, libellé blanc (4,7:1). P2 : cadre d'accent clair sur fond rosé. P3 : cadre gris.
   Le libellé « P1 / P2 / P3 » est TOUJOURS écrit : la teinte n'est jamais le seul signe (WCAG 1.4.1). */
:where(body.espace) .esp-prio {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--esp-n400); background: transparent; color: var(--esp-muted);
  font: 800 12px/1.2 var(--esp-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
:where(body.espace) .esp-prio-1 { background: var(--esp-p1); border-color: var(--esp-p1); color: #fff; }
:where(body.espace) .esp-prio-2 { background: var(--esp-a100); border-color: var(--esp-p2); color: var(--esp-a800); }
:where(body.espace) .esp-prio-3 { background: transparent; border-color: var(--esp-n400); color: var(--esp-muted); }
/* Liseré de priorité d'une carte (3 px à gauche, comme .ac-row-alert). */
:where(body.espace) .esp-liseret-1 { box-shadow: inset 3px 0 0 var(--esp-p1); }
:where(body.espace) .esp-liseret-2 { box-shadow: inset 3px 0 0 var(--esp-p2); }
:where(body.espace) .esp-liseret-3 { box-shadow: inset 3px 0 0 var(--esp-p3); }

/* ---------- Étiquettes de statut des tickets (sections de l'admin : Ticket::SECTIONS) ----------
   « Pour les status on homogénéise avec la version admin » : backlog = Planifié, todo = À faire / En cours,
   validate = À valider, archive = Terminé. Forme ET teinte différentes pour chacun. */
:where(body.espace) .esp-statut {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--esp-n400); background: transparent; color: var(--esp-muted);
  font: 700 12px/1.2 var(--esp-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
:where(body.espace) .esp-statut::before { content: ''; width: 6px; height: 6px; flex: none; background: currentColor; }
:where(body.espace) .esp-statut-backlog { border-style: dashed; }
:where(body.espace) .esp-statut-todo { border-color: var(--esp-ink); color: var(--esp-ink); }
:where(body.espace) .esp-statut-validate { border-color: var(--esp-accent); color: var(--esp-accent-text); background: var(--esp-a100); }
:where(body.espace) .esp-statut-archive { border-color: var(--esp-n300); background: var(--esp-n200); color: var(--esp-muted); }
:where(body.espace) .esp-statut-archive::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- Colonnes (tableau à glisser-déposer) ----------
   Une colonne = un creux gris à arête d'encre, en-tête micro-libellé + compteur. Au téléphone, les colonnes
   défilent de côté (une colonne et demie visible : on comprend qu'il y en a d'autres). */
:where(body.espace) .esp-colonnes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 86%); gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 6px;
}
@media (min-width: 900px) {
  :where(body.espace) .esp-colonnes { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); overflow: visible; }
}
:where(body.espace) .esp-colonne {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 120px; padding: 0 10px 12px;
  scroll-snap-align: start; background: var(--esp-surface); border-top: 2px solid var(--esp-ink);
}
:where(body.espace) .esp-colonne-tete {
  display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 -10px; padding: 0 12px;
  border-bottom: 1px solid var(--esp-n300);
  font: 800 12px/1.2 var(--esp-font); letter-spacing: .14em; text-transform: uppercase; color: var(--esp-ink);
}
:where(body.espace) .esp-colonne-nb { margin-left: auto; color: var(--esp-muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* Zone de dépôt survolée pendant un glisser. */
:where(body.espace) .esp-depot-survol { outline: 2px dashed var(--esp-accent); outline-offset: -2px; background: var(--esp-a100); }
/* Carte en cours de glisser (l'original reste en place, estompé) et poignée tactile. */
:where(body.espace) .esp-glisse { opacity: .45; }
:where(body.espace) .esp-flotte { box-shadow: var(--esp-shadow-lg); background: var(--esp-champ); }
:where(body.espace) .esp-poignee {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  margin: -10px -6px -10px 0; color: var(--esp-muted); cursor: grab; touch-action: none;   /* muted (6:1) : n600 restait à 4,1:1 (23/10/2026) */
}
:where(body.espace) .esp-poignee:hover { color: var(--esp-ink); }

/* ---------- Volet d'aide « Comment lire ces chiffres ? » (Performances, Trafic & Positionnement) ----------
   Passe finale du 23/10/2026 : trois façons d'ouvrir un volet coexistaient (petit ▾ à droite sur Performances, aucun
   repère sur Trafic, chevron du cockpit à gauche sur Sécurité). Un seul repère : le chevron de la Sécurité (▸ fermé,
   ▾ ouvert, en CSS), titre à l'encre, 44 px au doigt. */
body.espace :is(.esp-pf-aide-tete, .esp-tr-aide-tete) {
  display: flex; align-items: center; gap: 12px; min-height: 44px; list-style: none;
  font-size: 15px; font-weight: 700; color: var(--esp-ink);
}
body.espace :is(.esp-pf-aide-tete, .esp-tr-aide-tete)::-webkit-details-marker { display: none; }
body.espace .esp-pf-aide-tete::after { content: none; }
body.espace :is(.esp-pf-aide-tete, .esp-tr-aide-tete)::before {
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 3px;
  border-right: 2px solid var(--esp-n700); border-bottom: 2px solid var(--esp-n700); transform: rotate(-45deg); transition: transform .15s;
}
body.espace details[open] > :is(.esp-pf-aide-tete, .esp-tr-aide-tete)::before { transform: rotate(45deg); }

/* ---------- Grille automatique de panneaux ---------- */
:where(body.espace) .esp-grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

@media (prefers-reduced-motion: reduce) {
  :where(body.espace) * { transition-duration: .001ms !important; }
}