/* Stratoryx — shell partagé, direction « console desk » (04/07).
   Chargé en dernier par shell.js → ses règles body/fond/police priment.
   Typo : IBM Plex Sans (interface) + IBM Plex Mono (chiffres/tickers/labels techniques),
   auto-hébergées (assets/fonts, zéro dépendance réseau). Couleur = signal :
   vert/rouge réservés au directionnel, UN accent bleu acier, à plat. */

@font-face{font-family:"IBM Plex Sans";src:url("/static/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/static/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/static/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/static/assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/static/assets/fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600 900;font-display:swap}

:root{
  --bg:#0a0d12; --panel:#0f141b; --panel-2:#131a23; --panel-3:#0b0f15; --border:#1c2430; --line-strong:#2a3547;
  --text:#e8ecf2; --muted:#8b96a5; --silver:#c5cedb; --silver-bright:#fff;
  --dim:#7d8896;   /* micro-labels : 5.1:1 sur --panel (AA) — audit 18/07, ne pas rabaisser */
  --blue:#3d9ee0; --blue-deep:#2b7cb8; --green:#2fbf71; --red:#e5484d; --orange:#f97316; --gold:#d6a84f;
  --shadow:0 28px 90px rgba(0,0,0,.58);
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px;
}
html{color-scheme:dark}
/* a11y (audit 10/06) : focus clavier visible et cohérent sur toutes les pages du shell */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
/* Mobile (audit 04/07) : garde-fou anti-débordement — un select/input/img à contenu long
   ne dépasse jamais son conteneur (cause du seul offender restant à 375 px). */
.sx-content select,.sx-content input,.sx-content img{max-width:100%}
body{
  margin:0 !important; min-height:100vh; color:var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(61,158,224,.10), transparent 34%),
    linear-gradient(rgba(197,206,219,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,206,219,.025) 1px, transparent 1px),
    #05070a !important;
  background-size:auto,34px 34px,34px 34px,auto !important;
  background-attachment:fixed !important;
  font-family:var(--sans) !important;
}
.sx-shell a{color:inherit;text-decoration:none}

/* ── « Aller au contenu » ──
   Le rail compte ~25 liens : sans ce raccourci, un utilisateur clavier les
   traverse TOUS sur chaque page avant d'atteindre le contenu. Invisible tant
   qu'il n'a pas le focus — zéro impact visuel à la souris. */
.sx-skip{
  position:absolute; left:14px; top:-64px; z-index:400;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--blue); border-radius:7px;
  padding:11px 16px; font-family:var(--sans); font-size:13px; font-weight:600;
  text-decoration:none;
}
.sx-skip:focus{top:14px}
@media (prefers-reduced-motion:no-preference){ .sx-skip{transition:top .12s ease} }
.sx-content:focus{outline:none}          /* cible de saut : pas de halo parasite */

/* ── frame ── */
.sx-shell{position:relative;width:min(100% - 28px,1500px);margin:16px auto 34px}
.sx-app{
  min-height:calc(100vh - 50px);
  display:grid; grid-template-columns:248px minmax(0,1fr);
  border:1px solid var(--line-strong); border-radius:8px;
  background:linear-gradient(180deg,rgba(15,20,27,.97),rgba(10,13,18,.98));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03); overflow:hidden;
}

/* ── rail ── */
.sx-rail{display:flex;flex-direction:column;border-right:1px solid var(--border);background:rgba(15,20,27,.96)}
.sx-brand{height:76px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--border)}
.sx-mark{width:42px;height:42px;object-fit:contain;border-radius:6px;padding:4px;background:#050505}
.sx-brand b{display:block;font-size:15px;letter-spacing:.18em;background:linear-gradient(180deg,var(--silver-bright),var(--silver));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sx-brand span{color:var(--blue);-webkit-text-fill-color:var(--blue)}
.sx-brand small{display:block;margin-top:3px;color:var(--muted);font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sx-nav{padding:8px 12px 16px;display:grid;gap:3px}
/* Intitulés de section du rail (Piloter / Comprendre / Système) */
.sx-navsec{display:flex;align-items:center;gap:8px;margin:14px 8px 4px;color:#a9b4c3;font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.16em}
.sx-navsec::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line-strong),transparent)}
.sx-navsec:first-child{margin-top:6px}
.sx-nav a{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:36px;padding:6px 9px;border:1px solid transparent;border-radius:5px;color:var(--muted);font-size:13px;font-weight:600;transition:color .12s ease,background-color .12s ease,border-color .12s ease,transform .12s ease}
.sx-nav a:hover{color:var(--text);background:rgba(197,206,219,.055);border-color:rgba(197,206,219,.07);transform:translateX(2px)}
.sx-nav a.active{color:#fff;background:linear-gradient(90deg,var(--blue-deep),var(--blue));border-color:rgba(255,255,255,.12);box-shadow:0 5px 18px rgba(43,124,184,.22)}
.sx-nav a.is-locked{opacity:.55}
.sx-nav a.is-locked:hover{opacity:.78}
.sx-nav i{font-style:normal;text-align:center;font:500 10.5px var(--mono);opacity:.75}
.sx-nav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-nav em{font-style:normal;font:400 10px var(--mono);opacity:.7;letter-spacing:.04em}
.sx-railcard{margin:10px 14px 0;padding:13px;border:1px solid var(--border);border-radius:var(--r);background:rgba(19,26,35,.72)}
.sx-railcard.dark{margin-bottom:14px;background:var(--panel-3);border-color:rgba(61,158,224,.32)}
.sx-label{color:var(--muted);font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.16em}
.sx-railbig{margin-top:8px;font:600 17px var(--mono);line-height:1.2;color:var(--silver-bright);font-variant-numeric:tabular-nums}
.sx-railcopy{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums}
/* Noyau de risque — carte rail + bouton STOP D'URGENCE (P0 contrôle). */
.sx-killbtn{margin-top:11px;width:100%;padding:9px 10px;border-radius:5px;border:1px solid var(--red);background:rgba(229,72,77,.10);color:#f5b5b7;font-family:inherit;font-weight:700;font-size:12px;letter-spacing:.03em;cursor:pointer;transition:background .12s}
.sx-killbtn:hover{background:rgba(229,72,77,.2)}
.sx-killbtn.armed{border-color:var(--green);background:rgba(47,191,113,.1);color:#a7e6c6}
.sx-killbtn.armed:hover{background:rgba(47,191,113,.2)}
@media(max-width:880px){ .sx-rail .sx-riskcard{display:block;flex:1 1 100%;margin:6px 0 0;padding:9px 11px} }

/* ── main ── */
.sx-main{min-width:0;display:flex;flex-direction:column}
.sx-content{padding:18px 22px 26px;min-width:0}

/* Titres de page : une même hiérarchie sur tout l'admin, avec une variante
   légèrement plus compacte dans l'espace client. */
.sx-content h1{
  margin-top:0;
  font-family:var(--sans);
  font-size:clamp(28px,2.2vw,32px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.45px;
  text-wrap:balance;
}
.sx-client-page .sx-content h1{font-size:clamp(26px,2vw,28px)}

/* ── Barre de statut desk (signature console, injectée par shell.js) ── */
.sx-desk{display:flex;align-items:stretch;overflow-x:auto;flex:none;
  border-bottom:1px solid var(--border);background:rgba(11,15,21,.9);
  font:500 10.5px var(--mono);color:var(--muted);scrollbar-width:none}
.sx-desk::-webkit-scrollbar{display:none}
.sx-desk .c{display:flex;align-items:center;gap:6px;padding:8px 13px;border-right:1px solid var(--border);white-space:nowrap;letter-spacing:.06em}
.sx-desk .c:last-child{border-right:0}
.sx-desk b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.sx-desk .up{color:var(--green)} .sx-desk .down{color:var(--red)} .sx-desk .warn{color:var(--gold)}
.sx-desk .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(47,191,113,.7);flex:none}
.sx-desk .dot.off{background:var(--red);box-shadow:0 0 5px rgba(229,72,77,.7)}
@media(max-width:880px){ .sx-desk{font-size:10px} .sx-desk .c{padding:7px 10px} }

/* ── Tags console partagés (badges verdict/preuve/état — verdict_ui.js) ── */
.sx-tag{display:inline-flex;align-items:center;gap:5px;font:500 9.5px var(--mono);
  letter-spacing:.07em;text-transform:uppercase;padding:3px 7px;border-radius:3px;
  border:1px solid var(--line-strong);border-left-width:2px;background:var(--panel-2);color:var(--text)}
.sx-tag.g{border-left-color:var(--green)} .sx-tag.b{border-left-color:var(--blue)}
.sx-tag.y{border-left-color:var(--gold)} .sx-tag.r{border-left-color:var(--red)}
.sx-tag.n{border-left-color:var(--line-strong);color:var(--muted)}

@media(max-width:880px){
  /* Mobile (audit 11/06) : rail → barre horizontale, nav en chips scrollables. */
  .sx-shell{width:min(100% - 12px,1500px);margin:8px auto 24px}
  .sx-app{grid-template-columns:minmax(0,1fr)}
  .sx-rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;border-right:0;border-bottom:1px solid var(--border);padding:8px 10px;min-width:0}
  .sx-brand{height:auto;border-bottom:none;padding:4px 6px;flex:0 0 auto}
  .sx-brand small{display:none}
  .sx-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:2px 0;flex:1 1 100%;min-width:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sx-nav::-webkit-scrollbar{display:none}
  .sx-nav a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:36px;padding:6px 11px;gap:7px;white-space:nowrap}
  .sx-nav a i{display:none}
  .sx-nav a em{display:none}
  .sx-navsec{display:none}
  .sx-railcard{display:none}
  .sx-content{padding:14px}
}

/* ── Cibles tactiles (audits 26/07, mineur 4 puis P2) ────────────────────────
   Sur mobile (390 px), des liens de navigation, de pied de page et de prose
   n'offraient que 15 à 35 px de hauteur cliquable — et la 1ʳᵉ passe en
   pseudo-éléments ne couvrait pas les structures réelles de /access et /legal
   (.bar, .foot, liens de formulaire, prose).

   Technique : PADDING + MARGE NÉGATIVE équivalente. La zone de clic devient la
   boîte de padding (≈ 44 px de haut) sans AUCUN décalage visuel :
   – élément inline (prose) : le padding vertical n'affecte pas la ligne, il ne
     fait qu'étendre la surface cliquable ; les marges verticales y sont sans
     effet, l'horizontale annule le padding horizontal ;
   – élément « blockifié » (flex : .bar, .foot, footer) : la marge négative
     annule exactement le padding → mise en page inchangée au pixel.
   Le focus clavier reste visible (outline sur la boîte agrandie).
   Limité aux pointeurs grossiers OU aux écrans étroits (vérifiable en
   émulation, cf. audit : pointer:coarse seul n'est pas testable au resize). */
/* Borne à 834 px = largeur d'un iPad Pro en portrait. On ne se repose pas
   uniquement sur `pointer: coarse` : certains navigateurs et tous les outils
   d'émulation annoncent un pointeur fin sur une largeur de tablette, et la
   règle ne s'appliquerait alors nulle part où on peut la vérifier. */
@media (prefers-reduced-motion:reduce){
  .sx-nav a{transition:none}
  .sx-nav a:hover{transform:none}
}

@media (pointer: coarse), (max-width: 834px) {
  /* Liens ISOLÉS (navigation, pieds de page, rangées de réassurance) : cible
     pleine de 44 px. 15 px de part et d'autre → même un texte de 12 px y arrive. */
  footer a, .foot a, .bar a, .prooffoot a, .legalnav a, .flinks a, .subfoot a,
  form a, .hint a, .sub a {
    /* Vertical uniquement : mesuré à 320 px, 6 px de padding latéral dépassaient
       la largeur du séparateur « · » et faisaient se recouvrir deux liens
       voisins de 3 px. La largeur n'a jamais été le manque ici. */
    padding: 15px 0;
    margin: -15px 0;
  }
  /* Corollaire mesuré à 320 px : quand ces rangées de liens passent à la ligne,
     deux cibles de 44 px empilées sur des lignes de ~18 px SE CHEVAUCHENT — on
     déplacerait le défaut au lieu de le corriger. On aère donc l'interligne de
     ces conteneurs (mobile uniquement) pour que chaque cible reste distincte. */
  .foot, .prooffoot, .legalnav, .flinks, .subfoot {
    line-height: 46px;
  }
  /* NB : `.bar` et `footer` sont exclus — ce sont des barres flex d'une seule
     ligne (mesuré : l'interligne y gonflait l'en-tête de 14 px sans rien
     résoudre, leurs liens ne passent jamais à la ligne). */
  /* Liens DANS LA PROSE (p/li) : PAS d'extension verticale. Mesuré sur /legal :
     deux liens consécutifs d'une même phrase tombent sur des lignes espacées de
     ~21 px — toute extension verticale fait se chevaucher leurs cibles, et un
     chevauchement de zones interactives est pire qu'une cible de prose réduite.
     C'est l'exception explicite des liens en ligne (WCAG 2.5.8, « inline »).
     On n'élargit qu'horizontalement (sans chevauchement possible : le texte
     sépare les liens sur une même ligne). */
  main p a, main li a, .wrap p a, .wrap li a {
    padding: 0 4px;
    margin: 0 -4px;
  }
  /* Boutons des cartes du rail (retour utilisateur, « Fermer toutes mes
     sessions ») : mesurés à 31 px de haut. Ce sont des blocs pleine largeur
     EMPILÉS et séparés — aucun risque de chevauchement, contrairement aux liens
     de prose ci-dessus. On peut donc leur donner la cible pleine. */
  .sx-railcard button {
    min-height: 44px;
  }
}