/* ============================================================
   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)  (repli 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; }
.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-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-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 DU CHÂSSIS : rail d'icônes ============ */
/* Seuil de fenêtre (le châssis réagit à la fenêtre, brief M7). Sous ce seuil,
   la barre latérale devient un rail de 64px : icônes seules, texte au survol
   (title posé par fx-shell.js). La tablette (768 à 1024px) est servie ici. */
@media (max-width: 1080px) {
  .fx-sidebar { width: 64px; }
  .fx-brand { justify-content: center; padding: 22px 0 18px; }
  .fx-brand-txt { display: none; }
  .fx-nav { padding: 0 8px; }
  .fx-nav-label { display: none; }
  .fx-nav-item { justify-content: center; padding: 0; gap: 0; position: relative; }
  .fx-nav-item .fx-nav-text { display: none; }
  .fx-nav-item .fx-count { position: absolute; top: 2px; right: 6px; padding: 0 5px; }
  .fx-hero { justify-content: center; margin: 4px; padding: 12px; }
  .fx-hero-name { display: none; }
  /* 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; }
}