/* style.css — le portail Shinkiro.
 *
 * Dense et technique : c'est un wiki, pas une plaquette. Aucune fonte externe —
 * le portail tourne sur un VPS derrière Coolify, et une fonte qui ne charge pas
 * casse la mise en page au moment où on la montre.
 */

:root {
  --fond: #0e1014;
  --fond-2: #15181e;
  --fond-3: #1c2027;
  --bord: #272c35;
  --bord-vif: #3a414d;
  --texte: #d8dce3;
  --texte-2: #939aa7;
  --texte-3: #6b7280;
  --accent: #7dd3a0;
  --accent-sourd: #2f6f4e;
  --alerte: #e8a87c;
  --rouge: #e07a6b;
  --bleu: #7fb3d5;
  --violet: #b39ddb;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --largeur: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── ossature ───────────────────────────────────────────────────────── */

.bandeau {
  position: sticky; top: 0; z-index: 20;
  background: rgba(14, 16, 20, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.bandeau-int {
  max-width: var(--largeur); margin: 0 auto;
  padding: .7rem 1.5rem;
  display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap;
}
.marque {
  font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem;
  color: var(--texte); text-decoration: none; white-space: nowrap;
}
.marque span { color: var(--accent); }
.nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .855rem; }
.nav a { color: var(--texte-2); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--texte); }
.nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent-sourd); }

main { max-width: var(--largeur); margin: 0 auto; padding: 2.4rem 1.5rem 5rem; }

.pied {
  max-width: var(--largeur); margin: 0 auto;
  padding: 1.6rem 1.5rem 3rem; border-top: 1px solid var(--bord);
  color: var(--texte-3); font-size: .8rem;
}
.pied code { font-size: .78rem; }

/* ── texte ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -.018em; margin: 2.2rem 0 .8rem; }
h1 { font-size: 1.85rem; margin-top: 0; }
h2 { font-size: 1.28rem; padding-top: .6rem; border-top: 1px solid var(--bord); }
h3 { font-size: 1.04rem; color: var(--texte); }
h4 { font-size: .92rem; color: var(--texte-2); text-transform: uppercase; letter-spacing: .06em; }
p { margin: .7rem 0; }
a { color: var(--bleu); text-decoration-color: rgba(127, 179, 213, .35); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
strong { color: #fff; font-weight: 620; }
em { color: var(--texte-2); }
del { color: var(--texte-3); }
hr { border: 0; border-top: 1px solid var(--bord); margin: 2rem 0; }

code {
  font: .875em var(--mono);
  background: var(--fond-3); border: 1px solid var(--bord);
  padding: .08em .36em; border-radius: 4px; color: var(--accent);
}
pre.code {
  background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 8px; padding: .85rem 1rem; overflow-x: auto; margin: 1rem 0;
  font: .82rem/1.55 var(--mono);
}
pre.code code { background: none; border: 0; padding: 0; color: var(--texte); }

blockquote {
  margin: 1.1rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--accent-sourd); color: var(--texte-2);
}
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }

ul, ol { margin: .7rem 0; padding-left: 1.3rem; }
li { margin: .3rem 0; }

/* ── tableaux ───────────────────────────────────────────────────────── */

.table-enveloppe { overflow-x: auto; margin: 1.1rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .875rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--texte-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
tbody tr:hover { background: var(--fond-2); }
/* Les colonnes chiffrées ne se coupent pas : « 683 Ko » sur deux lignes rend
   une table de comparaison illisible. */
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── étiquettes ─────────────────────────────────────────────────────── */

.et {
  display: inline-block; font: 600 .7rem/1.5 var(--mono);
  padding: .1rem .45rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid var(--bord-vif); color: var(--texte-2); background: var(--fond-3);
}
.et-produit   { color: var(--accent);  border-color: var(--accent-sourd); }
.et-utilisable{ color: var(--bleu);    border-color: #35566b; }
.et-partiel   { color: var(--alerte);  border-color: #6b5136; }
.et-a-qualifier { color: var(--rouge); border-color: #6b3d36; }
.et-gele      { color: var(--texte-3); }
.et-actif     { color: var(--accent);  border-color: var(--accent-sourd); }
.et-fige      { color: var(--texte-3); }
.et-relance-prioritaire { color: var(--rouge); border-color: #6b3d36; }
.et-reference { color: var(--violet);  border-color: #4a3f66; }
.et-verse     { color: var(--texte-2); }

/* ── grilles et cartes ──────────────────────────────────────────────── */

.grille { display: grid; gap: .9rem; margin: 1.2rem 0; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .grille-4 { grid-template-columns: repeat(2, 1fr); } }

.carte {
  background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 10px; padding: 1rem 1.1rem;
  display: block; color: inherit; text-decoration: none;
}
a.carte:hover { border-color: var(--bord-vif); background: var(--fond-3); }
.carte h3 { margin: 0 0 .3rem; font-size: .98rem; }
.carte h3 a { text-decoration: none; }
.carte .sous { color: var(--texte-2); font-size: .83rem; margin: 0 0 .6rem; }
.carte .ets { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .6rem; }

.chiffre { font: 700 1.6rem/1.1 var(--sans); color: var(--texte); letter-spacing: -.03em; }
.chiffre-lib { color: var(--texte-3); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }

/* ── encarts ────────────────────────────────────────────────────────── */

.encart {
  border-left: 3px solid var(--bord-vif); background: var(--fond-2);
  padding: .8rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .9rem;
}
.encart-titre { font: 600 .74rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texte-3); margin-bottom: .25rem; }
.encart-attention { border-left-color: var(--alerte); }
.encart-attention .encart-titre { color: var(--alerte); }
.encart-manque { border-left-color: var(--rouge); }
.encart-manque .encart-titre { color: var(--rouge); }
.encart-pepite { border-left-color: var(--accent); }
.encart-pepite .encart-titre { color: var(--accent); }

/* La source d'une affirmation. Rien n'est affirmé sans elle. */
.source {
  display: inline-block; font: .72rem/1.5 var(--mono);
  color: var(--texte-3); background: var(--fond-3);
  border: 1px solid var(--bord); border-radius: 4px; padding: .05rem .4rem;
}
.source::before { content: "↳ "; color: var(--bord-vif); }
.infere { color: var(--alerte); border-color: #6b5136; }
.infere::before { content: "≈ "; }

/* ── filtre ─────────────────────────────────────────────────────────── */

.filtres { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; }
.filtre {
  font: 600 .76rem/1.6 var(--sans); cursor: pointer;
  background: var(--fond-2); color: var(--texte-2);
  border: 1px solid var(--bord); border-radius: 6px; padding: .22rem .6rem;
}
.filtre:hover { color: var(--texte); border-color: var(--bord-vif); }
.filtre[aria-pressed="true"] { background: var(--accent-sourd); border-color: var(--accent-sourd); color: #eafff3; }
[hidden] { display: none !important; }

/* ── fil d'ariane ───────────────────────────────────────────────────── */

.fil { font-size: .8rem; color: var(--texte-3); margin-bottom: 1rem; }
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--texte); }

.intro { font-size: 1.02rem; color: var(--texte-2); max-width: 70ch; }

/* ── échelle du catalogue ───────────────────────────────────────────── */

.echelle { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1.4rem 0; }
.echelon {
  flex: 1 1 130px; background: var(--fond-2); border: 1px solid var(--bord);
  border-radius: 8px; padding: .7rem .8rem; text-decoration: none; color: inherit;
}
.echelon:hover { border-color: var(--bord-vif); background: var(--fond-3); }
.echelon .num { font: 700 .72rem var(--mono); color: var(--accent); }
.echelon .nom { display: block; font-weight: 620; font-size: .88rem; margin-top: .15rem; }
.echelon .prix { display: block; color: var(--texte-3); font-size: .76rem; margin-top: .3rem; }

@media (max-width: 720px) {
  main { padding: 1.6rem 1rem 3rem; }
  .bandeau-int { padding: .6rem 1rem; gap: .8rem; }
  h1 { font-size: 1.5rem; }
}