/* ═══════════════════════════════════════════════════════════════════════════
   LogiPilot — feuille de style
   Palette issue du logo : bleu nuit #001F5D, bleu #0082F5, bleu profond #0040D3,
   cyan #01A2FC. Police Inter, hébergée sur l'instance (aucun appel à Google).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }

:root {
  --nuit: #001F5D;
  --bleu: #0040D3;
  --bleu-vif: #0082F5;
  --cyan: #01A2FC;
  --bleu-pale: #EAF2FF;
  --bleu-bord: #CFE0FF;
  --fond: #F5F8FC;
  --blanc: #FFFFFF;
  --texte: #0F1F3D;
  --texte-2: #3D4A66;
  --discret: #5B6B8C;
  --bord: #E3E8F2;
  --bord-fort: #CFD8E8;
  --vert: #0B6B3A;  --vert-pale: #E6F7EE;
  --orange: #8A4B00; --orange-pale: #FFF4E0;
  --rouge: #B42318; --rouge-pale: #FDECEC;
  --rayon: 12px;
  --menu-w: 248px;
  --ombre: 0 1px 2px rgba(0, 31, 93, .04), 0 2px 8px rgba(0, 31, 93, .04);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; color: var(--texte); background: var(--fond); line-height: 1.45; }
a { color: var(--bleu); }
a:hover { color: var(--nuit); }
h1, h2, h3 { color: var(--nuit); margin: 0; line-height: 1.25; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.discret { color: var(--discret); }
.petit { font-size: 12px; }
.positif { color: var(--vert); }
.negatif { color: var(--rouge); }
.attention { color: var(--orange); }

/* ── Structure ───────────────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--menu-w); transition: margin-left .2s; }
.contenu { padding: 24px 28px 48px; display: flex; flex-direction: column; gap: 18px; }

.bandeau-support { background: var(--nuit); color: #fff; text-align: center; font-size: 13px; font-weight: 600; padding: 6px; position: sticky; top: 0; z-index: 300; }

/* ── Menu ────────────────────────────────────────────────────────────────── */

.menu { position: fixed; top: 0; bottom: 0; left: 0; width: var(--menu-w); background: var(--blanc); border-right: 1px solid var(--bord); padding: 18px 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; z-index: 100; transition: width .2s, transform .2s; }
.menu-logo img { width: 170px; height: auto; display: block; margin: 0 4px; }
.menu-logo-mini { display: none; }
.menu-logo-mini img { width: 36px; height: 36px; display: block; margin: 0 auto; }
.menu-outils { display: flex; gap: 6px; padding: 0 4px; }
.espace { flex: 1; }
.outil { width: 34px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--bord); border-radius: 8px; background: var(--blanc); color: var(--discret); cursor: pointer; }
.outil:hover { color: var(--nuit); background: var(--fond); }
.outil[aria-pressed="true"] { background: var(--bleu-pale); border-color: var(--bleu-bord); color: var(--bleu); }
.menu-section { display: flex; flex-direction: column; gap: 2px; }
.menu-titre { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); padding: 6px 10px; }
.menu-liens { display: flex; flex-direction: column; gap: 2px; }
.menu-lien { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--texte-2); text-decoration: none; font-size: 14px; }
.menu-lien:hover { background: var(--fond); color: var(--nuit); }
.menu-lien.actif { background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }
.menu-lien svg { flex-shrink: 0; }
.pastille { margin-left: auto; min-width: 20px; text-align: center; font-size: 11px; font-weight: 700; color: #fff; padding: 1px 7px; border-radius: 99px; }
.pastille-bleu { background: var(--bleu); }
.pastille-rouge { background: var(--rouge); }
.pastille-orange { background: var(--orange); }
.menu-pied { margin-top: auto; border-top: 1px solid var(--bord); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.menu-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: var(--texte); }
.menu-user:hover { background: var(--fond); }
.menu-user strong { display: block; font-size: 13px; font-weight: 600; color: var(--nuit); }
.menu-user small { display: block; font-size: 12px; color: var(--discret); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--nuit); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }

/* Menu en tuiles */
html[data-menu="tuiles"] { --menu-w: 280px; }
html[data-menu="tuiles"] .menu-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-menu="tuiles"] .menu-liens .menu-lien { position: relative; flex-direction: column; justify-content: center; gap: 6px; height: 78px; border: 1px solid var(--bord); text-align: center; font-size: 12px; padding: 6px; }
html[data-menu="tuiles"] .menu-liens .menu-lien.actif { border-color: var(--bleu); }
html[data-menu="tuiles"] .menu-liens .menu-lien svg { width: 22px; height: 22px; }
html[data-menu="tuiles"] .menu-liens .pastille { position: absolute; top: 6px; right: 6px; margin: 0; }

/* Menu replié */
html[data-rail="1"] { --menu-w: 72px; }
html[data-rail="1"] .menu { padding: 18px 10px; }
html[data-rail="1"] .menu-logo, html[data-rail="1"] .menu-txt, html[data-rail="1"] .menu-titre, html[data-rail="1"] [data-menu-vue], html[data-rail="1"] .menu-outils .espace { display: none; }
html[data-rail="1"] .menu-logo-mini { display: block; }
html[data-rail="1"] .menu-outils { justify-content: center; padding: 0; }
html[data-rail="1"] .menu-outils [data-menu-rail] svg { transform: rotate(180deg); }
html[data-rail="1"] .menu-liens { display: flex !important; }
html[data-rail="1"] .menu-liens .menu-lien { height: auto; border: none; justify-content: center; padding: 10px 0; position: relative; }
html[data-rail="1"] .menu-section { border-top: 1px solid var(--bord); padding-top: 6px; }
html[data-rail="1"] .pastille { position: absolute; top: 2px; right: 4px; padding: 0 5px; min-width: 16px; font-size: 10px; }
html[data-rail="1"] .menu-user { justify-content: center; padding: 6px 0; }

/* ── Barre du haut ───────────────────────────────────────────────────────── */

.barre { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 28px; background: var(--blanc); border-bottom: 1px solid var(--bord); }
.barre-titre { flex: 1 1 220px; font-size: 20px; font-weight: 700; }
.barre-burger { display: none; }
.barre-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contexte { display: flex; flex-wrap: wrap; gap: 10px; }
.contexte label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--discret); }
.contexte select { height: 38px; }

/* ── Composants ──────────────────────────────────────────────────────────── */

.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ombre); min-width: 0; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.carte-tete h2 { flex: 1 1 200px; }
.carte-ia { border-color: var(--bleu-bord); }
.carte-ia .ia-icone { width: 32px; height: 32px; border-radius: 8px; background: var(--bleu-pale); color: var(--bleu); display: grid; place-items: center; }
.ia-texte { white-space: pre-line; color: var(--texte-2); line-height: 1.6; }
.mention { font-size: 12px; color: var(--discret); border-top: 1px solid var(--bord); padding-top: 10px; }

.grille { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.ligne { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pile { display: flex; flex-direction: column; gap: 10px; }

.kpi { background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--ombre); min-width: 0; }
.kpi-lib { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.kpi-val { font-size: 26px; font-weight: 700; color: var(--nuit); }
.kpi-sub { font-size: 13px; color: var(--texte-2); }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }
.badge-neutre { background: #F1F4F9; color: var(--texte-2); }
.badge-bleu { background: var(--bleu-pale); color: var(--bleu); }
.badge-vert { background: var(--vert-pale); color: var(--vert); }
.badge-orange { background: var(--orange-pale); color: var(--orange); }
.badge-rouge { background: var(--rouge-pale); color: var(--rouge); }

.alerte { padding: 12px 16px; border-radius: 10px; border: 1px solid; font-size: 14px; line-height: 1.5; }
.alerte-succes { background: var(--vert-pale); border-color: #A9DFC0; color: var(--vert); }
.alerte-erreur { background: var(--rouge-pale); border-color: #F6C5C0; color: #7A1A12; }
.alerte-info { background: var(--bleu-pale); border-color: var(--bleu-bord); color: var(--nuit); }
.alerte-attention { background: var(--orange-pale); border-color: #F2D29B; color: #5E3300; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bord-fort); border-radius: 10px; background: var(--blanc); color: var(--nuit); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--fond); color: var(--nuit); }
.btn-primaire { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.btn-primaire:hover { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.btn-danger { color: var(--rouge); border-color: #F0B8B2; }
.btn-danger:hover { background: var(--rouge-pale); color: var(--rouge); }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn[disabled], .btn:disabled { opacity: .55; cursor: not-allowed; }
.lien-btn { background: none; border: none; padding: 0; color: var(--bleu); font: inherit; cursor: pointer; text-decoration: underline; }

.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border: 1px solid var(--bord-fort); border-radius: 99px; background: var(--blanc); color: var(--texte-2); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.puce.actif, .puce[aria-pressed="true"] { background: var(--bleu); border-color: var(--bleu); color: #fff; font-weight: 600; }

/* ── Formulaires ─────────────────────────────────────────────────────────── */

label.champ { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--nuit); }
label.champ small { font-weight: 400; color: var(--discret); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], input[type=file], select, textarea {
  font: inherit; font-size: 14px; color: var(--texte); background: var(--blanc); border: 1px solid var(--bord-fort); border-radius: 8px; padding: 0 10px; min-height: 40px; min-width: 0; width: 100%; }
input[type=file] { padding: 8px; }
textarea { padding: 10px; resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.contexte select { width: auto; }
input.montant { text-align: right; font-variant-numeric: tabular-nums; }
.case { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.case input { margin-top: 3px; }
.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

/* ── Tableaux ────────────────────────────────────────────────────────────── */

.tableau-boite { overflow-x: auto; border: 1px solid var(--bord); border-radius: 10px; }
table.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { background: #F7F9FC; color: var(--discret); font-size: 12px; font-weight: 600; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bord); white-space: nowrap; }
.tableau td { padding: 10px 12px; border-bottom: 1px solid #EEF2F8; vertical-align: middle; }
.tableau tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover td { background: #FAFCFF; }
.tableau .solde td { background: #F2F7FF; font-weight: 700; color: var(--nuit); }
.tableau .detail td:first-child { padding-left: 26px; color: var(--texte-2); }
.tableau .section td { background: var(--blanc); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--discret); padding-top: 14px; }
.vide { padding: 32px; text-align: center; color: var(--discret); }

/* ── Graphiques ──────────────────────────────────────────────────────────── */

.graphe { width: 100%; height: 300px; }
.graphe-haut { height: 360px; }

/* ── Grille budgétaire (Tabulator) ───────────────────────────────────────── */

.grille-budget { border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; }
.tabulator { font-family: inherit; font-size: 12px; border: none; background: var(--blanc); }
.tabulator .tabulator-header { background: #F7F9FC; border-bottom: 1px solid var(--bord); color: var(--nuit); }
.tabulator .tabulator-header .tabulator-col { background: #F7F9FC; border-right: 1px solid #EEF2F8; }
.tabulator .tabulator-col-title { font-weight: 600; }
.tabulator-row .tabulator-cell { border-right: 1px solid #F1F4F9; padding: 6px; }
.tabulator-row.ligne-solde { background: #EEF4FF !important; font-weight: 700; color: var(--nuit); }
.tabulator-row.ligne-section { background: var(--blanc) !important; color: var(--discret); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tabulator-cell.cell-n1 { color: var(--discret); }
.tabulator-cell.cell-edit { background: #F5F9FF; box-shadow: inset 0 0 0 1px var(--bleu-bord); color: var(--nuit); font-weight: 600; }
.tabulator-cell.cell-calc { background: #F1F4F9; color: var(--texte-2); }
.tabulator-cell.cell-fige { color: var(--discret); }
.tabulator-cell.tabulator-editing { box-shadow: inset 0 0 0 2px var(--bleu); }
.legende { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--discret); }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }

/* ── Étapes ──────────────────────────────────────────────────────────────── */

.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.etapes li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--discret); }
.etapes li span { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--bord-fort); display: grid; place-items: center; font-size: 13px; }
.etapes li.fait { color: var(--vert); font-weight: 600; }
.etapes li.fait span { background: var(--vert-pale); border-color: var(--vert-pale); }
.etapes li.encours { color: var(--bleu); font-weight: 700; }
.etapes li.encours span { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.choix-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.choix-mode label { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 2px solid var(--bord); border-radius: 14px; background: var(--blanc); cursor: pointer; }
.choix-mode input { position: absolute; opacity: 0; }
.choix-mode label:has(input:checked) { border-color: var(--bleu); box-shadow: 0 0 0 4px var(--bleu-pale); }
.choix-mode strong { font-size: 18px; color: var(--nuit); }

.controle-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 8px 12px; align-items: center; }
.controle-grille .entete { font-size: 12px; font-weight: 600; color: var(--discret); }

/* ── Pages simples ───────────────────────────────────────────────────────── */

.page-simple { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #F5F8FC 0%, #EAF2FF 100%); }
.carte-simple { width: 100%; max-width: 440px; background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 10px 40px rgba(0, 31, 93, .08); }
.carte-simple.large { max-width: 720px; }
.logo-simple { width: 200px; height: auto; margin: 0 auto 4px; }

.voile-menu { display: none; }

/* ── Petits écrans ───────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .g4, .g5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3 { grid-column: auto; }
}
@media (max-width: 900px) {
  :root, :root[data-menu="tuiles"], :root[data-rail="1"] { --menu-w: 0px; }
  .menu { width: 280px; transform: translateX(-100%); }
  html.menu-ouvert .menu { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  html.menu-ouvert .voile-menu { display: block; position: fixed; inset: 0; background: rgba(0, 31, 93, .3); z-index: 90; }
  html[data-rail="1"] .menu-txt, html[data-rail="1"] .menu-titre, html[data-rail="1"] .menu-logo { display: revert; }
  .barre-burger { display: grid; }
  .barre { padding: 10px 16px; }
  .contenu { padding: 16px; }
  .g2, .g4, .g5, .form-grille, .choix-mode, .etapes { grid-template-columns: minmax(0, 1fr); }
  .badge { white-space: normal; }
}

@media print {
  .menu, .barre, .voile-menu, .btn, .contexte { display: none !important; }
  .principal { margin: 0; }
}