/* ============================================================
   FlowAxis · Foundation CSS (brief 00)
   Palette, typographies, sidebar, composants partagés.
   Importé par tous les écrans FlowAxis.
   ============================================================ */

/* ============================================================
   PALIERS RESPONSIVE (source de vérité, brief M7 2026-07-23)
   Règle : le signal suit la responsabilité.
     Châssis (barre latérale, en-tête)  -> @media largeur de fenêtre
     Contenu (tables, panneaux, cartes) -> @container fx-content
   Une condition @container ne peut pas lire une var() en CSS vanilla :
   ces valeurs sont RÉÉCRITES littéralement dans chaque règle, jamais
   éparpillées au hasard. Les changer = les changer ici ET aux points
   d'usage, vérifié en revue.
     compact  : @container fx-content (max-width: 560px)
     tablette : @container fx-content (max-width: 820px)
     large    : au-delà (défaut, aucune règle)
     châssis  : @media (max-width: 1080px)  (en-tête), et la même valeur dans
                fx-shell.js (NARROW_QUERY), qui impose le rail de la barre latérale

   Où ils servent (calés à l'oeil sur la matrice 360 à 1920, puis figés) :
     compact  -> taches.html, empilement des deux volets
     tablette -> index.html, empilement des deux volets FlowNote
     châssis  -> foundation.css (rail d'icônes), admin.html (bandeau)

   EXCEPTIONS DÉCLARÉES (deux, chacune justifiée, aucune autre tolérée) :
     1040px, taches.html, colonnes de références : les 3 colonnes de 25ch sont
       exceptionnellement larges et ne tiennent qu'au-delà de ce seuil. Mesuré :
       elles débordaient de 270px à 860px de contenu.
     700px, admin.html, nom de marque du bandeau : dernier élément décoratif
       retiré pour garder « Quitter » et l'avatar atteignables sous 700px.
   ============================================================ */

:root {
  --fx-marine: #0F1B2D;
  --fx-terracotta: #C2410C;
  --fx-terracotta-dark: #A7380A;
  --fx-acier: #3B5A7A;
  --fx-creme: #FAF8F5;
  --fx-sable: #E8E4DD;
  --fx-ardoise: #4A5568;
  --fx-vert: #10B981;
  --fx-blanc: #FFFFFF;
  --fx-sidebar-hover: #152339;
  --fx-sidebar-active: #1A2B45;
  --fx-section-label: #8B9CB8;
  --fx-row-line: #F0EDE7;
  --fx-row-selected: #FFF5F0;
  --fx-font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --fx-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: var(--fx-font); font-size: 14px; line-height: 1.5; color: var(--fx-marine); background: var(--fx-creme); }

/* ============ LAYOUT ============ */
.fx-app { display: flex; min-height: 100vh; }
.fx-main { flex: 1; min-width: 0; background: var(--fx-creme); padding: 32px 40px; display: flex; flex-direction: column; container-type: inline-size; container-name: fx-content; }

/* ============ SIDEBAR ============ */
.fx-sidebar { width: 240px; flex-shrink: 0; background: var(--fx-marine); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.fx-brand { display: flex; align-items: center; gap: 11px; padding: 22px 20px 18px; }
.fx-brand-mark { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.fx-brand-mark img { width: 100%; height: 100%; display: block; }
.fx-brand-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-brand-name { font-size: 23px; font-weight: 800; color: var(--fx-blanc); letter-spacing: -0.02em; line-height: 1; }
.fx-brand-name .axis { color: var(--fx-terracotta); }
.fx-brand-client { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--fx-sable); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-brand-client .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fx-terracotta); flex-shrink: 0; }

.fx-nav { flex: 1; padding: 0 12px; display: flex; flex-direction: column; }
.fx-nav-spacer { flex: 1; min-height: 40px; }
.fx-nav-label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-section-label); padding: 24px 8px 8px; }
.fx-nav-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-radius: 6px; color: var(--fx-sable); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.fx-nav-item:hover { background: var(--fx-sidebar-hover); }
.fx-nav-item.active { background: var(--fx-sidebar-active); color: var(--fx-blanc); }
.fx-nav-item .fx-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--fx-sable); }
.fx-nav-item.active .fx-icon { stroke: var(--fx-terracotta); }
.fx-nav-item .fx-nav-text { flex: 1; }
/* Padlock of a surface the organisation's plan does not include (D-032). Its place is
   always reserved, hidden: the server's answer (fx-surfaces.js, data-fx-state)
   only makes it visible, it never moves the menu. */
.fx-nav-item .fx-nav-lock { display: inline-flex; width: 14px; height: 14px; flex-shrink: 0; visibility: hidden; }
.fx-nav-item .fx-nav-lock svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-nav-item[data-fx-state="verrouillee"] .fx-nav-lock { visibility: visible; }
.fx-count { background: var(--fx-acier); color: var(--fx-creme); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 8px; line-height: 1.3; }
.fx-nav-bottom { padding-bottom: 16px; }

/* ============ FLOWNOTE · PILIER HÉROS (nav) ============ */
.fx-hero { display: flex; align-items: center; gap: 12px; margin: 4px 4px 10px; padding: 16px 16px; border-radius: 12px; background: var(--fx-creme); color: var(--fx-marine); text-decoration: none; cursor: pointer; transition: background 0.15s ease; }
.fx-hero:hover { background: #FFFFFF; }
.fx-hero.active { box-shadow: inset 0 0 0 2px rgba(194, 65, 12, 0.30); }
.fx-hero-spark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.fx-hero-spark path { fill: var(--fx-terracotta); }
.fx-hero-name { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.fx-hero-name .n { color: var(--fx-terracotta); }
.fx-hero-spark .big { transform-origin: center; animation: fx-twinkle 2.6s ease-in-out infinite; }
.fx-hero-spark .s1 { transform-origin: center; animation: fx-twinkle 2.6s ease-in-out infinite 0.55s; }
.fx-hero-spark .s2 { transform-origin: center; animation: fx-twinkle 2.6s ease-in-out infinite 1.2s; }
@keyframes fx-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.78); } }
@media (prefers-reduced-motion: reduce) { .fx-hero-spark .big, .fx-hero-spark .s1, .fx-hero-spark .s2 { animation: none; } }

/* ============ PAGE HEADER ============ */
.fx-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; }
.fx-tenant { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fx-ardoise); margin-bottom: 4px; }
.fx-tenant:empty { display: none; }
.fx-page-title { font-size: 28px; font-weight: 700; color: var(--fx-marine); line-height: 1.2; }
.fx-head-tools { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.fx-search { display: flex; align-items: center; gap: 10px; width: 320px; height: 38px; background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 8px; padding: 0 14px; color: var(--fx-ardoise); font-size: 14px; }
.fx-search .fx-icon { width: 16px; height: 16px; stroke: var(--fx-ardoise); flex-shrink: 0; }
.fx-search input { border: none; outline: none; background: none; font-family: var(--fx-font); font-size: 14px; color: var(--fx-marine); width: 100%; }
.fx-search input::placeholder { color: var(--fx-ardoise); opacity: 0.7; }
.fx-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--fx-marine); color: var(--fx-creme); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }

/* ============ BOUTONS ============ */
.fx-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fx-font); font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; }
.fx-btn-primary { background: var(--fx-terracotta); color: var(--fx-blanc); }
.fx-btn-primary:hover { background: var(--fx-terracotta-dark); }
.fx-btn-primary:focus-visible { outline: 2px solid var(--fx-terracotta); outline-offset: 2px; }
.fx-btn-secondary { background: var(--fx-blanc); border: 1px solid var(--fx-sable); color: var(--fx-marine); }
.fx-btn-secondary:hover { background: var(--fx-creme); }
.fx-btn-tertiary { background: none; color: var(--fx-ardoise); font-weight: 500; }
.fx-btn-tertiary:hover { background: var(--fx-creme); }

/* ============ CARTES ============ */
.fx-card { background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 12px; padding: 20px; }
.fx-card + .fx-card { margin-top: 16px; }

/* ============ TABLEAUX ============ */
.fx-table { width: 100%; border-collapse: collapse; background: var(--fx-blanc); }
.fx-table th { background: var(--fx-creme); color: var(--fx-ardoise); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--fx-sable); }
.fx-table td { font-size: 14px; color: var(--fx-marine); padding: 12px 16px; border-bottom: 1px solid var(--fx-row-line); }
.fx-table tbody tr:hover { background: var(--fx-creme); }
.fx-table tbody tr.selected { background: var(--fx-row-selected); }

/* ============ INPUTS ============ */
.fx-input { background: var(--fx-blanc); border: 1px solid var(--fx-sable); border-radius: 8px; padding: 10px 14px; font-family: var(--fx-font); font-size: 14px; color: var(--fx-marine); width: 100%; }
.fx-input:focus { outline: none; border-color: var(--fx-terracotta); box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15); }
.fx-input.en-erreur { border-color: var(--fx-terracotta); }
.fx-date-err { margin-top: 4px; font-size: 12px; color: var(--fx-terracotta-dark); }
.fx-label { display: block; font-size: 13px; font-weight: 600; color: var(--fx-ardoise); margin-bottom: 6px; }

/* ============ DIVERS ============ */
.fx-mono { font-family: var(--fx-mono); font-size: 13px; }
.fx-check { color: var(--fx-vert); }
.fx-badge-info { display: inline-flex; align-items: center; background: var(--fx-acier); color: var(--fx-creme); font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; }

/* ============ MODALS & DRAWERS ============ */
/* z-index 8500 : les modals de création sont invoqués DEPUIS les panneaux (.op-ov, 8000)
   et doivent donc s'ouvrir PAR-DESSUS eux, jamais derrière (sinon invisibles/inutilisables). */
.fx-overlay { position: fixed; inset: 0; background: rgba(15, 27, 45, 0.4); z-index: 8500; display: none; align-items: center; justify-content: center; }
body.fx-modal-open .fx-overlay { display: flex; }
.fx-modal { background: var(--fx-blanc); border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 27, 45, 0.25); max-width: 600px; width: 92%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.fx-modal.wide { max-width: 800px; }
.fx-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw; background: var(--fx-blanc); border-left: 1px solid var(--fx-sable); z-index: 70; transform: translateX(102%); transition: transform 0.2s ease; display: flex; flex-direction: column; }
body.fx-drawer-open .fx-drawer { transform: translateX(0); }

/* ============ REPLI DE LA BARRE LATÉRALE : rail d'icônes ============ */
/* Un seul signal, la classe .fx-rail sur <html>, posée par fx-shell.js (D-016).
   Deux sources la posent : le choix de l'usager (bouton icône seule en haut de
   la barre, retenu d'une page à l'autre) et le palier châssis (fenêtre de 1080px
   ou moins, où le rail est imposé et le bouton caché, comme avant). Repliée, la
   barre devient un rail de 64px : icônes seules, libellé au survol (title posé
   par fx-shell.js). La tablette (768 à 1024px) est servie ici. */
.fx-rail-toggle { position: absolute; top: 19px; right: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 8px; background: none; color: var(--fx-sable); cursor: pointer; }
.fx-rail-toggle[hidden] { display: none; }
.fx-rail-toggle .fx-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fx-rail-toggle:hover { background: var(--fx-sidebar-hover); color: var(--fx-blanc); }
.fx-rail-toggle:focus-visible { outline: 2px solid var(--fx-terracotta); outline-offset: 2px; }
html.fx-rail .fx-sidebar { width: 64px; }
html.fx-rail .fx-brand { justify-content: center; padding: 22px 0 10px; }
html.fx-rail .fx-brand-txt { display: none; }
html.fx-rail .fx-rail-toggle { position: static; margin: 0 auto 10px; }
html.fx-rail .fx-nav { padding: 0 8px; }
html.fx-rail .fx-nav-label { display: none; }
html.fx-rail .fx-nav-item { justify-content: center; padding: 0; gap: 0; position: relative; }
/* In the rail the label leaves the screen, never the accessibility tree: a
   link is named by its content first, and with the label gone its counter
   ("3") or its padlock ("Module Connecté") would name it, or nothing would
   (FlowNote). Visually hidden, the label keeps naming every link (review A4). */
html.fx-rail .fx-nav-item .fx-nav-text,
html.fx-rail .fx-hero-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.fx-rail .fx-nav-item .fx-count { position: absolute; top: 2px; right: 6px; padding: 0 5px; }
html.fx-rail .fx-nav-item .fx-nav-lock { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; }
html.fx-rail .fx-nav-item .fx-nav-lock svg { width: 12px; height: 12px; }
html.fx-rail .fx-hero { justify-content: center; margin: 4px; padding: 12px; }

/* Palier châssis : le contenu de l'en-tête se resserre aussi. */
@media (max-width: 1080px) {
  /* L'en-tête ne force plus sa recherche à 320px : elle replie sous le titre. */
  .fx-page-head { flex-wrap: wrap; }
  .fx-search { width: 100%; max-width: 260px; }
}