/* grille-suisse (Müller-Brockmann) — feuille partagée, SCOPÉE sous .spread.
   Géométrie inchangée (alignement prouvé à 0 px) ; palette « réchauffée » :
   encre ardoise, cartes sur fond teinté, coins arrondis, ombres douces, accent
   indigo + alerte rose, et DARK MODE auto (prefers-color-scheme, comme l'app). */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/inter-800.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-mono-400.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-mono-700.woff2") format("woff2");}

/* surface éditoriale : source unique de variables portée par .spread */
.spread{
  --cols:12; --bl:8px; --lh:24px; --gutter:24px; --margin:24px; --pad:48px; --maxw:none;
  /* --- palette claire (réchauffée) --- */
  --paper:#f4f5fb; --card:#ffffff; --line:#e5e7ef; --line-soft:#eef0f6;
  /* encre = bleu foncé de la famille de l'accent indigo (ni noir, ni trop sombre) */
  --ink:#312e81; --ink-soft:#5b6486;
  --accent:#4f46e5; --accent-soft:#eef2ff; --accent-tint:rgba(79,70,229,.10);
  --alert:#e11d48; --alert-soft:#fff1f4;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(20,24,40,.05), 0 2px 8px rgba(20,24,40,.06);
  --g-col:rgba(79,70,229,.075); --g-edge:rgba(79,70,229,.40);
  --g-base:rgba(0,150,140,.30); --g-base-min:rgba(0,150,140,.11);
  position:relative; width:100%;
  background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:var(--lh); -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme: dark){
  .spread{
    --paper:#0f1526; --card:#1b2237; --line:#2c3552; --line-soft:#232b44;
    --ink:#e6e9f2; --ink-soft:#98a1b8;
    --accent:#8b93ff; --accent-soft:#232a4d; --accent-tint:rgba(139,147,255,.14);
    --alert:#fb7185; --alert-soft:#3a1f2b;
    --shadow:0 1px 2px rgba(0,0,0,.30), 0 2px 10px rgba(0,0,0,.35);
    --g-base:rgba(56,189,178,.30); --g-base-min:rgba(56,189,178,.12);
  }
}
.spread *{box-sizing:border-box;}
.spread img{display:block;max-width:100%;}

/* scaffold */
.spread .wrap{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--pad) var(--margin);}
.spread .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);row-gap:var(--lh);}
.spread .band{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:var(--gutter);row-gap:var(--lh);align-items:start;}
@supports not (grid-template-columns:subgrid){ .spread .band{grid-template-columns:repeat(var(--cols),1fr);} }

/* overlay de contrôle (même boîte .wrap → colonnes = celles du contenu) */
.spread .guides{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .26s ease;}
body.grid-on .spread .guides{opacity:1;}
.spread .guides .cols{position:absolute;top:0;bottom:0;left:var(--margin);right:var(--margin);display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);}
.spread .guides .col{background:var(--g-col);box-shadow:inset 1px 0 0 var(--g-edge),inset -1px 0 0 var(--g-edge);position:relative;}
.spread .guides .col span{position:absolute;top:24px;left:0;right:0;text-align:center;font-family:"Space Mono",ui-monospace,monospace;font-size:10px;line-height:1;color:var(--accent);}
.spread .guides .rows{position:absolute;left:var(--margin);right:var(--margin);top:var(--pad);bottom:0;background-image:repeating-linear-gradient(to bottom,var(--g-base) 0 1px,transparent 1px var(--lh)),repeating-linear-gradient(to bottom,var(--g-base-min) 0 1px,transparent 1px var(--bl));}
.spread .guides .mline{position:absolute;top:0;bottom:0;width:1px;background:var(--g-edge);}
.spread .guides .mline.l{left:var(--margin);} .spread .guides .mline.r{right:var(--margin);}

/* éléments éditoriaux (rythme verrouillé sur --bl/--lh) */
.spread .kicker{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;line-height:var(--lh);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0;}
.spread .meta{font-family:"Space Mono",ui-monospace,monospace;font-size:12px;line-height:var(--lh);letter-spacing:.03em;color:var(--ink-soft);margin:0;}
.spread .masthead{font-weight:800;font-size:48px;line-height:56px;letter-spacing:-0.02em;margin:0;color:var(--ink);}
.spread .h2b{font-weight:700;font-size:22px;line-height:var(--lh);letter-spacing:-0.01em;margin:0;color:var(--ink);}
.spread .numeral{font-weight:800;font-size:44px;line-height:48px;letter-spacing:-0.02em;margin:0;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.spread .numeral.sm{font-size:30px;line-height:32px;}
.spread .cap{font-size:13px;line-height:var(--lh);color:var(--ink-soft);margin:0;}
.spread .accent{color:var(--accent);}

/* filet dans une bande de hauteur baseline (jamais flottant) */
.spread .rule{grid-column:1 / -1;height:var(--bl);border-top:1px solid var(--line);}
.spread .rule.soft{border-top-color:var(--line-soft);}

/* contrôles (bascules Livewire) — segmenté arrondi */
.spread .ctl{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card);}
.spread .ctl button{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;background:transparent;color:var(--ink-soft);border:0;border-left:1px solid var(--line);cursor:pointer;line-height:var(--bl);transition:background .12s,color .12s;}
.spread .ctl button:first-child{border-left:0;}
.spread .ctl button:hover{color:var(--ink);}
.spread .ctl button.on,.spread .ctl.accent button.on{background:var(--accent);color:#fff;}
.spread .btn{display:inline-block;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s;}
.spread .btn:hover{border-color:var(--accent);color:var(--accent);}
.spread .btn.on,.spread .btn.go{background:var(--accent);color:#fff;border-color:var(--accent);}
.spread .btn.on:hover,.spread .btn.go:hover{color:#fff;filter:brightness(1.06);}
.spread .controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;justify-content:flex-end;}

/* champs de formulaire (filtres, saisie) */
.spread select,.spread input[type=text],.spread input[type=date],.spread input[type=number],.spread input[type=search],.spread input[type=password],.spread input[type=email],.spread textarea{font-family:"Space Mono",ui-monospace,monospace;font-size:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:5px 8px;line-height:var(--lh);border-radius:var(--radius-sm);}
.spread select:focus,.spread input:focus,.spread textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint);}
/* options natives des <select> : pas de texte noir par défaut du navigateur */
.spread select option,.spread select optgroup{background:var(--card);color:var(--ink);}
.spread input[type=checkbox]{accent-color:var(--accent);}
/* sélecteur d'arborescence catégorie (partial Tailwind) : pas de gris ardoise sombre */
.spread .cat-node button{color:var(--ink);}
.spread .cat-node .text-slate-400,.spread .cat-node .text-slate-500{color:var(--ink-soft);}
.spread .bar i.alt{background:var(--ink-soft);}
.spread .catrow{display:flex;align-items:center;gap:8px;padding:3px 6px;cursor:pointer;font-size:13px;border-radius:6px;}
.spread .catrow:hover{background:var(--accent-soft);}
.spread .catrow input:checked + span{color:var(--accent);font-weight:700;}
.spread .swatch{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);}
.spread .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:2px 8px 2px 5px;font-size:12px;background:var(--card);}
.spread .fld{display:inline-flex;flex-direction:column;gap:2px;}
.spread .fld .lbl,.spread .flbl{font-family:"Space Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}

/* tag / statut — neutre par défaut, « hot » = alerte (rose) */
.spread .tag{display:inline-block;font-family:"Space Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);background:var(--card);}
.spread .tag.hot{background:var(--alert-soft);color:var(--alert);border-color:transparent;font-weight:700;}
.spread .note{grid-column:1 / -1;font-size:12px;line-height:var(--lh);color:var(--ink-soft);border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:8px 12px;}
.spread .hot{color:var(--alert);}
.spread .big{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;}

/* barres, curseurs, listes clé/valeur, blocs */
.spread input[type=range]{width:100%;accent-color:var(--accent);}
.spread .bar{height:7px;background:var(--accent-soft);border-radius:999px;overflow:hidden;}
.spread .bar i{display:block;height:100%;background:var(--accent);border-radius:999px;}
.spread .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:var(--lh);}
.spread .kv .k{color:var(--ink-soft);}
.spread .kv .v{font-variant-numeric:tabular-nums;font-weight:600;}
.spread .kv.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;font-weight:800;}
.spread details{font-size:13px;color:var(--ink-soft);}
.spread details summary{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:4px 0;}
.spread .sliders{display:flex;flex-wrap:wrap;gap:16px;}
.spread .sliders .fld{flex:1 1 150px;}
.spread .pill{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:8px 10px;}
.spread .frame{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:16px;}
.spread .frame.accent{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-tint),var(--shadow);}

/* .figure : chiffre dans une carte/cadre (NON aligné colonne, contrairement à .numeral) */
.spread .figure{font-weight:800;font-size:44px;line-height:48px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0;color:var(--ink);white-space:nowrap;}
.spread .figure.sm{font-size:30px;line-height:32px;}
.spread .figure.accent{color:var(--accent);}

/* carte KPI cliquable */
.spread .kcard{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);color:inherit;font:inherit;cursor:pointer;padding:10px 12px;transition:border-color .12s,box-shadow .12s;}
.spread .kcard:hover{border-color:var(--accent);}
.spread .kcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-tint),var(--shadow);}
.spread .kcard .d{font-family:"Space Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:var(--ink-soft);}

/* liste de sélection (boutons en lignes) */
.spread .rowbtn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line-soft);color:var(--ink);font:inherit;padding:8px 12px;cursor:pointer;}
.spread .rowbtn:last-child{border-bottom:0;}
.spread .rowbtn:hover{background:var(--accent-soft);}

/* légende de graphique + conteneur canvas */
.spread .legend{display:flex;flex-wrap:wrap;gap:14px;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);}
.spread .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.spread .chart{position:relative;}

/* onglets de section */
.spread .tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);}
.spread .tabs a{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:6px 12px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s;}
.spread .tabs a:hover{color:var(--ink);}
.spread .tabs a.on{color:var(--accent);border-bottom-color:var(--accent);}

/* pivot : conteneur en carte, table qui défile dedans */
.spread .tablewrap{grid-column:1 / -1;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);}
.spread .pivot{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px;}
.spread .pivot th,.spread .pivot td{padding:0 12px;height:var(--lh);line-height:var(--lh);border-bottom:1px solid var(--line-soft);white-space:nowrap;}
.spread .pivot thead th{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);text-align:right;}
.spread .pivot thead th.l,.spread .pivot td.l{text-align:left;}
.spread .pivot td{text-align:right;color:var(--ink);}
.spread .pivot td.l{font-weight:600;color:var(--ink);}
.spread .pivot td.tot,.spread .pivot th.tot{font-weight:700;color:var(--ink);}
.spread .pivot tbody tr{cursor:pointer;}
.spread .pivot tbody tr:hover td{background:var(--accent-soft);}
.spread .pivot tbody tr.sel td{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent);}
.spread .pivot tbody tr.sub td{background:var(--line-soft);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);cursor:default;}
.spread .pivot tbody tr.sub:hover td{background:var(--line-soft);}
.spread .pivot td.pl{padding-left:28px;}
.spread .pivot tfoot td{height:calc(var(--lh) + var(--bl));line-height:calc(var(--lh) + var(--bl));border-top:2px solid var(--line);border-bottom:none;font-weight:800;}
.spread .pivot tfoot td.gt{color:var(--accent);}
.spread .zero{color:var(--ink-soft);opacity:.55;}
.spread .mrg{display:block;font-size:10px;font-weight:600;line-height:12px;color:var(--ink-soft);}
.spread .mrg.neg{color:var(--alert);}

/* toggle overlay (global, fixe) — visible UNIQUEMENT sur les pages ayant une .spread */
.mb-toggle{display:none;position:fixed;bottom:18px;right:18px;z-index:60;align-items:center;gap:8px;background:#312e81;color:#fff;border:none;border-radius:999px;cursor:pointer;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:9px 14px;box-shadow:0 4px 14px rgba(20,24,40,.25);}
body:has(.spread) .mb-toggle{display:flex;}
.mb-toggle .dot{width:8px;height:8px;border-radius:50%;background:#8b93ff;}
body.grid-on .mb-toggle{background:#4f46e5;} body.grid-on .mb-toggle .dot{background:#fff;}

/* En-tête applicatif (Tailwind, hors .spread) : en mode CLAIR, remplacer le gris
   ardoise foncé (≈ noir) — dont le sélecteur de boutique — par l'indigo cohérent.
   En mode sombre on ne touche à rien : les variantes dark: de Tailwind agissent. */
@media (prefers-color-scheme: light){
  header .text-slate-700,
  header .text-slate-800,
  header .text-slate-900{ color:#312e81; }
}