/* tokens/colors.css */
:root {
  /* — Base — tirées du logo */
  --ink: #1E241C;            /* texte principal, encre du logo */
  --paper: #FFFFFF;          /* fond */
  --cream: #FBF6E9;          /* texte du logo "clair" — utilisé en mode sombre */

  --green-900: #22371F;      /* pressé */
  --green-700: #2E4A2C;      /* anneau du symbole — vert épinard interactif */
  --green-500: #44703A;      /* fond du symbole — survol, accents */
  --green-300: #8FB983;      /* liens en mode sombre */
  --green-100: #E7EFE4;      /* fond pastille "Gardé" */

  --butter-700: #946510;     /* texte jaune lisible (AA sur blanc : 4.9:1) */
  --butter-500: #F2B544;     /* goutte du logo — accent fort */
  --butter-300: #F8D868;     /* motte du logo — fond pastille "En test", surlignage */
  --butter-100: #FCF3D3;     /* fond léger */

  --gray-900: #3A3F38;
  --gray-700: #5B615A;       /* texte secondaire (AA : 6.2:1) */
  --gray-500: #737872;       /* texte discret (AA sur blanc : 4.6:1) */
  --gray-300: #C9CCC7;       /* bordure forte */
  --gray-200: #E4E6E2;       /* bordure */
  --gray-100: #F3F4F1;       /* fond de ligne alternée, fond pastille "Arrêté" */

  /* — Rôles — */
  --bg: var(--paper);
  --bg-subtle: var(--gray-100);
  --fg: var(--ink);
  --fg-muted: var(--gray-700);
  --fg-faint: var(--gray-500);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);

  --accent: var(--green-700);          /* boutons, liens, chiffres clés */
  --accent-hover: var(--green-500);
  --accent-active: var(--green-900);
  --on-accent: var(--paper);
  --accent-edge: var(--green-900);     /* contour + tranche du bouton secondaire vert */
  --butter-hover: #FBE07E;             /* face du bouton primaire au survol */
  --butter-edge: #B77D10;              /* contour + tranche du bouton primaire beurre */
  --accent-2: var(--butter-500);       /* deuxième accent : surlignage, "En test" */
  --accent-2-text: var(--butter-700);

  --link: var(--green-700);
  --link-hover: var(--green-500);
  --focus-ring: var(--green-700);        /* 9,9:1 sur blanc ; le beurre ne faisait que 1,8:1 */

  /* Statuts produit */
  --status-test-bg: var(--butter-300);   --status-test-fg: var(--ink);
  --status-kept-bg: var(--green-700);    --status-kept-fg: var(--paper);
  --status-stopped-bg: var(--gray-100);  --status-stopped-fg: var(--gray-700);

  /* Chiffres */
  --num-up: var(--green-700);
  --num-down: #9A3B2E;                   /* rouge sobre, AA 6.4:1 */
  --num-flat: var(--gray-700);

  /* Statuts du hub — cycle de vie d'un produit (champ statut de produits.yaml).
     Le site public n'en montre que trois : En test, Gardé, Arrêté. */
  --st-reserve-bg: var(--gray-100);      --st-reserve-fg: var(--gray-700);    --st-reserve-bd: var(--gray-100);
  --st-build-bg: var(--paper);           --st-build-fg: var(--gray-700);      --st-build-bd: var(--gray-300);
  --st-test-bg: var(--butter-300);       --st-test-fg: var(--ink);            --st-test-bd: var(--butter-300);
  --st-kept-bg: var(--green-700);        --st-kept-fg: var(--paper);          --st-kept-bd: var(--green-700);
  --st-fix-bg: var(--butter-100);        --st-fix-fg: var(--butter-700);      --st-fix-bd: var(--butter-500);
  --st-cut-bg: var(--gray-100);          --st-cut-fg: var(--gray-500);        --st-cut-bd: var(--gray-100);
  --st-sold-bg: var(--green-100);        --st-sold-fg: var(--green-900);      --st-sold-bd: var(--green-100);
  /* Verdict à 14 jours : ce que disent les chiffres (couper est la seule alerte rouge). */
  --vd-keep-bg: var(--green-700);        --vd-keep-fg: var(--paper);
  --vd-fix-bg: var(--butter-500);        --vd-fix-fg: var(--ink);
  --vd-cut-bg: #9A3B2E;                  --vd-cut-fg: var(--paper);
  --vd-early-bg: var(--butter-300);      --vd-early-fg: var(--ink);
  --vd-none-bg: var(--gray-100);         --vd-none-fg: var(--gray-700);

  /* Messages */
  --danger: #9A3B2E;   --danger-bg: #F7EAE7;
  --warning: var(--butter-700);  --warning-bg: var(--butter-100);
  --success: var(--green-700);   --success-bg: var(--green-100);

  /* Graphiques */
  --chart-1: var(--green-700);
  --chart-2: var(--butter-500);
  --chart-grid: var(--gray-200);
  --chart-target: var(--ink);
}

/* Version sombre : encre du logo comme fond, crème comme texte.
   Suit le réglage de l'ordinateur, sauf choix explicite data-theme="light" ou "dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink);
    --bg-subtle: #262C24;
    --fg: var(--cream);
    --fg-muted: #B9BFB3;
    --fg-faint: #979C96;
    --border: #363C34;
    --border-strong: #4A5048;
  
    --accent: var(--green-300);
    --accent-hover: #A9CC9E;
    --accent-active: #7AA56F;
    --on-accent: var(--ink);
    --accent-edge: #5E8A55;
    --butter-hover: #FBE07E;
    --butter-edge: #B77D10;
    --accent-2: var(--butter-300);
    --accent-2-text: var(--butter-300);
  
    --link: var(--green-300);
    --link-hover: #A9CC9E;
    --focus-ring: var(--butter-300);
  
    --status-test-bg: var(--butter-300);   --status-test-fg: var(--ink);
    --status-kept-bg: var(--green-300);    --status-kept-fg: var(--ink);
    --status-stopped-bg: #363C34;          --status-stopped-fg: #B9BFB3;
  
    --num-up: var(--green-300);
    --num-down: #E08A7C;
    --num-flat: #B9BFB3;
  
    --st-reserve-bg: #2C322A;   --st-reserve-fg: #B9BFB3;  --st-reserve-bd: #2C322A;
    --st-build-bg: transparent; --st-build-fg: #B9BFB3;    --st-build-bd: #4A5048;
    --st-test-bg: var(--butter-300); --st-test-fg: var(--ink); --st-test-bd: var(--butter-300);
    --st-kept-bg: var(--green-300);  --st-kept-fg: var(--ink); --st-kept-bd: var(--green-300);
    --st-fix-bg: #3A3320;       --st-fix-fg: var(--butter-300); --st-fix-bd: #8A6A22;
    --st-cut-bg: #2C322A;       --st-cut-fg: #979C96;      --st-cut-bd: #2C322A;
    --st-sold-bg: #2E3F2B;      --st-sold-fg: var(--green-300); --st-sold-bd: #2E3F2B;
    --vd-keep-bg: var(--green-300);  --vd-keep-fg: var(--ink);
    --vd-fix-bg: var(--butter-500);  --vd-fix-fg: var(--ink);
    --vd-cut-bg: #E08A7C;            --vd-cut-fg: var(--ink);
    --vd-early-bg: var(--butter-300); --vd-early-fg: var(--ink);
    --vd-none-bg: #2C322A;           --vd-none-fg: #B9BFB3;
    --danger: #E08A7C;  --danger-bg: #3A2622;
    --warning: var(--butter-300); --warning-bg: #3A3320;
    --success: var(--green-300);  --success-bg: #2E3F2B;
    --chart-1: var(--green-300);
    --chart-2: var(--butter-300);
    --chart-grid: #363C34;
    --chart-target: var(--cream);
  
  }
}
[data-theme="dark"] {
  --bg: var(--ink);
  --bg-subtle: #262C24;
  --fg: var(--cream);
  --fg-muted: #B9BFB3;
  --fg-faint: #979C96;
  --border: #363C34;
  --border-strong: #4A5048;

  --accent: var(--green-300);
  --accent-hover: #A9CC9E;
  --accent-active: #7AA56F;
  --on-accent: var(--ink);
  --accent-edge: #5E8A55;
  --butter-hover: #FBE07E;
  --butter-edge: #B77D10;
  --accent-2: var(--butter-300);
  --accent-2-text: var(--butter-300);

  --link: var(--green-300);
  --link-hover: #A9CC9E;
  --focus-ring: var(--butter-300);

  --status-test-bg: var(--butter-300);   --status-test-fg: var(--ink);
  --status-kept-bg: var(--green-300);    --status-kept-fg: var(--ink);
  --status-stopped-bg: #363C34;          --status-stopped-fg: #B9BFB3;

  --num-up: var(--green-300);
  --num-down: #E08A7C;
  --num-flat: #B9BFB3;

  --st-reserve-bg: #2C322A;   --st-reserve-fg: #B9BFB3;  --st-reserve-bd: #2C322A;
  --st-build-bg: transparent; --st-build-fg: #B9BFB3;    --st-build-bd: #4A5048;
  --st-test-bg: var(--butter-300); --st-test-fg: var(--ink); --st-test-bd: var(--butter-300);
  --st-kept-bg: var(--green-300);  --st-kept-fg: var(--ink); --st-kept-bd: var(--green-300);
  --st-fix-bg: #3A3320;       --st-fix-fg: var(--butter-300); --st-fix-bd: #8A6A22;
  --st-cut-bg: #2C322A;       --st-cut-fg: #979C96;      --st-cut-bd: #2C322A;
  --st-sold-bg: #2E3F2B;      --st-sold-fg: var(--green-300); --st-sold-bd: #2E3F2B;
  --vd-keep-bg: var(--green-300);  --vd-keep-fg: var(--ink);
  --vd-fix-bg: var(--butter-500);  --vd-fix-fg: var(--ink);
  --vd-cut-bg: #E08A7C;            --vd-cut-fg: var(--ink);
  --vd-early-bg: var(--butter-300); --vd-early-fg: var(--ink);
  --vd-none-bg: #2C322A;           --vd-none-fg: #B9BFB3;
  --danger: #E08A7C;  --danger-bg: #3A2622;
  --warning: var(--butter-300); --warning-bg: #3A3320;
  --success: var(--green-300);  --success-bg: #2E3F2B;
  --chart-1: var(--green-300);
  --chart-2: var(--butter-300);
  --chart-grid: #363C34;
  --chart-target: var(--cream);

}

/* tokens/typography.css */
:root {
  --font-display: "Nunito", system-ui, sans-serif;    /* titres — sans grasse à terminaisons arrondies ; Fraunces reste au logo */
  --font-sans: "Nunito Sans", system-ui, sans-serif;    /* texte courant — sans ronde, très lisible */
  --font-mono: "DM Mono", ui-monospace, monospace;      /* chiffres, étiquettes */

  /* Échelle (px) — ratio ~1.25, base 16 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  --leading-tight: 1.0;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-label: 0.08em;   /* étiquettes mono en majuscules */
  --tracking-display: -0.025em;

  /* Nunito : graisse 900 partout, interlettrage serré */
  --display-weight: 900;
  --display-weight-strong: 900;
  --display-variation: normal;

  /* Alias par rôle */
  --type-h1: var(--display-weight) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2: var(--display-weight) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h3: var(--display-weight) var(--text-lg)/var(--leading-snug) var(--font-display);
  --type-body: 400 var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-body-sm: 400 var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label: 500 var(--text-xs)/1 var(--font-mono);
  --type-num: 400 var(--text-base)/1 var(--font-mono);
  --type-num-key: 400 var(--text-2xl)/1 var(--font-mono);
}

/* tokens/spacing.css */
:root {
  /* Base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --measure: 64ch;          /* largeur de lecture max */
  --container: 1080px;      /* largeur du site */
  --container-narrow: 720px;
  --gutter: var(--space-5);
  --gutter-mobile: var(--space-4);
  --section-gap: var(--space-8);
  --header-height: 64px;
}

/* tokens/radius.css */
:root {
  --radius-xs: 2px;     /* pastilles de statut, surlignage */
  --radius-sm: 4px;     /* champs */
  --radius-md: 8px;     /* boutons, cartes */
  --radius-full: 999px; /* jamais pour les boutons ; réservé aux points de statut */
}

/* tokens/shadows.css */
:root {
  /* Ombres minimales : les bordures structurent, l'ombre n'apparaît qu'au survol ou en flottant. */
  --shadow-none: none;
  --shadow-1: 0 1px 2px rgba(30, 36, 28, 0.06);
  --shadow-2: 0 2px 8px rgba(30, 36, 28, 0.08);
  --focus-shadow: 0 0 0 3px var(--focus-ring);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}
[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* tokens/density.css */
/* Densité « outil » pour le hub de pilotage (tableaux de bord, listes, réglages).
   Le site public garde la densité de lecture par défaut. À poser sur <body class="sb-outil">. */
:root {
  --row-height: 48px;
}
.sb-outil {
  --text-base: 14px;
  --leading-relaxed: 1.45;
  --type-body: 400 14px/1.45 var(--font-sans);
  --type-body-sm: 400 12px/1.4 var(--font-sans);
  --type-num: 400 14px/1 var(--font-mono);
  --type-num-key: 400 28px/1 var(--font-mono);
  --container: 1440px;
  --gutter: var(--space-5);
  --section-gap: var(--space-6);
  --row-height: 40px;
  --header-height: 56px;
  --sidebar-width: 220px;
}

/* tokens/base.css */
/* Resets minimaux — les composants sont stylés par variables. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--type-body);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-shadow); border-radius: var(--radius-xs); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); font-variation-settings: var(--display-variation); text-wrap: balance; }
h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
code, kbd, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* components/pilotage/pilotage.css */
/* Composants du hub de pilotage — CSS pur, sans dépendance, stylé par les tokens.
   Utilisés tels quels par les pages générées côté serveur (tableau de verdict).
   Préfixe sb- ; poser class="sb-outil" sur <body> pour la densité outil. */

/* — Mise en page ————————————————————————————————————————————————— */
.sb-app { display: grid; grid-template-columns: var(--sidebar-width, 220px) minmax(0, 1fr); min-height: 100vh; }
.sb-sidebar { border-right: 1px solid var(--border); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-5); }
.sb-sidebar .sb-logo img { height: 28px; width: auto; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-nav a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 7px var(--space-3); border-radius: var(--radius-sm); color: var(--fg-muted); text-decoration: none; font: 600 var(--text-sm)/1.2 var(--font-sans); }
.sb-nav a:hover { background: var(--bg-subtle); color: var(--fg); }
.sb-nav a[aria-current="page"] { background: var(--bg-subtle); color: var(--fg); box-shadow: inset 2px 0 0 var(--butter-500); }
.sb-nav .sb-count { font: var(--type-label); color: var(--fg-faint); }
.sb-main { min-width: 0; }

.sb-topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); }
.sb-topbar-in { max-width: var(--container); margin: 0 auto; min-height: var(--header-height); padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sb-topbar .sb-logo { display: flex; align-items: center; }
.sb-topbar .sb-logo img { height: 30px; width: auto; }
.sb-logo img { display: block; }
.sb-logo img.clair { display: none; }
.sb-topbar-titre { font: var(--display-weight) var(--text-md)/1.1 var(--font-display); letter-spacing: var(--tracking-display); padding-left: var(--space-4); border-left: 1px solid var(--border); }
.sb-topbar-meta { margin-left: auto; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }

.sb-page { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); padding-block: var(--space-5) var(--space-8); display: flex; flex-direction: column; gap: var(--section-gap); }

/* En-tête de section : titre + compte + filet encre, comme dans le kit. */
.sb-section { display: flex; flex-direction: column; gap: var(--space-4); }
.sb-section-tete { display: flex; align-items: baseline; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--fg); }
.sb-section-tete h2 { font-size: var(--text-lg); }
.sb-section-tete .sb-count { font: var(--type-label); color: var(--fg-faint); }
.sb-section-tete .sb-aside { margin-left: auto; font: var(--type-body-sm); color: var(--fg-muted); }

/* — Chiffres clés ———————————————————————————————————————————————— */
.sb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.sb-kpi { border-top: 1px solid var(--border-strong); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sb-kpi-label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.sb-kpi-valeur { font: var(--type-num-key); font-variant-numeric: tabular-nums; color: var(--fg); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.sb-kpi-valeur.accent { color: var(--accent); }
.sb-kpi-note { font: var(--type-body-sm); color: var(--fg-muted); }
.sb-delta { font: 500 var(--text-xs)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.sb-delta.up { color: var(--num-up); }
.sb-delta.down { color: var(--num-down); }
.sb-delta.flat { color: var(--num-flat); }
.sb-kpi-valeur .sb-delta { font: inherit; }
.sb-spark { display: block; width: 100%; max-width: 160px; height: 28px; overflow: visible; }
.sb-spark .ligne { fill: none; stroke: var(--chart-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sb-spark .aire { fill: var(--chart-1); opacity: .08; }
.sb-spark .fin { fill: var(--chart-1); }

/* — Pastilles de statut ————————————————————————————————————————— */
.sb-badge { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; padding: 4px 7px; border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap; }
.sb-badge.st-reserve { background: var(--st-reserve-bg); color: var(--st-reserve-fg); border-color: var(--st-reserve-bd); }
.sb-badge.st-build   { background: var(--st-build-bg);   color: var(--st-build-fg);   border-color: var(--st-build-bd); border-style: dashed; }
.sb-badge.st-test    { background: var(--st-test-bg);    color: var(--st-test-fg);    border-color: var(--st-test-bd); }
.sb-badge.st-kept    { background: var(--st-kept-bg);    color: var(--st-kept-fg);    border-color: var(--st-kept-bd); }
.sb-badge.st-fix     { background: var(--st-fix-bg);     color: var(--st-fix-fg);     border-color: var(--st-fix-bd); }
.sb-badge.st-cut     { background: var(--st-cut-bg);     color: var(--st-cut-fg);     border-color: var(--st-cut-bd); text-decoration: line-through; }
.sb-badge.st-sold    { background: var(--st-sold-bg);    color: var(--st-sold-fg);    border-color: var(--st-sold-bd); }
.sb-badge.vd-keep  { background: var(--vd-keep-bg);  color: var(--vd-keep-fg); }
.sb-badge.vd-fix   { background: var(--vd-fix-bg);   color: var(--vd-fix-fg); }
.sb-badge.vd-cut   { background: var(--vd-cut-bg);   color: var(--vd-cut-fg); }
.sb-badge.vd-early { background: var(--vd-early-bg); color: var(--vd-early-fg); }
.sb-badge.vd-none  { background: var(--vd-none-bg);  color: var(--vd-none-fg); }
/* Tendance avant J14 : même couleur que le verdict, en contour seulement. */
.sb-badge.tendance { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.sb-badge.tendance::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: currentColor; }
.sb-badge.tendance.vd-keep::before { background: var(--vd-keep-bg); }
.sb-badge.tendance.vd-fix::before { background: var(--vd-fix-bg); }
.sb-badge.tendance.vd-cut::before { background: var(--vd-cut-bg); }

/* — Tableau dense ——————————————————————————————————————————————— */
.sb-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sb-table { width: 100%; border-collapse: collapse; font: var(--type-body); font-variant-numeric: tabular-nums; }
.sb-table th { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); text-align: left; padding: 10px var(--space-3); border-bottom: 1px solid var(--fg); white-space: nowrap; background: var(--bg); }
.sb-table td { height: var(--row-height); padding: 0 var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap; }
.sb-table tr:last-child td { border-bottom: 0; }
.sb-table tbody tr:hover td { background: var(--bg-subtle); }
.sb-table .num { text-align: right; font-family: var(--font-mono); }
.sb-table th.num { text-align: right; }
.sb-table .nom { font-weight: 600; color: var(--fg); }
.sb-table .sous { display: block; font: var(--type-body-sm); color: var(--fg-faint); }
.sb-table tr.is-muted td { color: var(--fg-faint); }
.sb-table tr.is-muted .nom { color: var(--fg-muted); font-weight: 400; }
.sb-table .vide { color: var(--fg-faint); }
.sb-table-note { font: var(--type-label); color: var(--fg-faint); margin-top: var(--space-2); line-height: 1.5; }

/* — Carte de verdict ———————————————————————————————————————————— */
.sb-verdicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.sb-verdict { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); background: var(--bg); min-width: 0; }
.sb-verdict.a-trancher { border-color: var(--fg); }
.sb-verdict-tete { display: flex; align-items: flex-start; gap: var(--space-3); }
.sb-verdict-tete h3 { flex: 1 1 auto; min-width: 0; font-size: var(--text-lg); }
.sb-verdict-tete .sb-sous { display: block; margin-top: 4px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-verdict-texte { margin: 0; color: var(--fg-muted); font: var(--type-body); }
.sb-verdict-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.sb-verdict-chiffres dt { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-verdict-chiffres dd { margin: 4px 0 0; font: 400 var(--text-md)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.sb-verdict-decision { border-top: 1px solid var(--border); padding-top: var(--space-3); font: var(--type-body-sm); color: var(--fg-muted); }
.sb-verdict-decision b { color: var(--fg); }

/* Avancement du test : J sur 14. */
.sb-progress { display: flex; flex-direction: column; gap: 6px; }
.sb-progress-tete { display: flex; justify-content: space-between; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.sb-progress-barre { height: 6px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.sb-progress-barre > span { display: block; height: 100%; background: var(--fg); border-radius: inherit; }

/* Jauge coût d'un client : seuil et double du seuil marqués, point = coût mesuré. */
.sb-jauge { display: flex; flex-direction: column; gap: 6px; }
.sb-jauge-piste { position: relative; height: 10px; border-radius: var(--radius-full); background: linear-gradient(to right, var(--success-bg) 0 33.33%, var(--warning-bg) 33.33% 66.66%, var(--danger-bg) 66.66%); }
.sb-jauge-repere { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--chart-target); }
.sb-jauge-point { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: var(--radius-full); background: var(--fg); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--fg); }
.sb-jauge-point.vd-keep { background: var(--vd-keep-bg); box-shadow: 0 0 0 1px var(--vd-keep-bg); }
.sb-jauge-point.vd-fix { background: var(--vd-fix-bg); box-shadow: 0 0 0 1px var(--butter-700); }
.sb-jauge-point.vd-cut { background: var(--vd-cut-bg); box-shadow: 0 0 0 1px var(--vd-cut-bg); }
.sb-jauge-echelle { position: relative; height: 14px; font: 500 11px/1 var(--font-mono); color: var(--fg-faint); }
.sb-jauge-echelle span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.sb-jauge-echelle span:first-child { transform: none; }

/* Tunnel : de la visite à l'achat. */
.sb-tunnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sb-tunnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; font: var(--type-body-sm); color: var(--fg-muted); }
.sb-tunnel .barre { grid-column: 1 / -1; height: 3px; background: var(--bg-subtle); border-radius: var(--radius-full); }
.sb-tunnel .barre > span { display: block; height: 100%; background: var(--chart-1); border-radius: inherit; }
.sb-tunnel b { font: 500 var(--text-sm)/1 var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; }

/* — Actions et formulaires ——————————————————————————————————————— */
.sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 700 var(--text-sm)/1 var(--font-sans); padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--butter-edge); background: var(--butter-300); color: var(--ink); box-shadow: 0 4px 0 var(--butter-edge); transform: translateY(0); cursor: pointer; text-decoration: none; transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; margin-bottom: 4px; }
.sb-btn:hover { background: var(--butter-hover); }
.sb-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--butter-edge); background: var(--butter-500); }
.sb-btn.secondaire { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); box-shadow: 0 4px 0 var(--accent-edge); }
.sb-btn.secondaire:hover { background: var(--accent-hover); }
.sb-btn.secondaire:active { background: var(--accent-active); box-shadow: 0 0 0 var(--accent-edge); }
.sb-btn.discret { background: transparent; color: var(--fg); border-color: var(--border-strong); box-shadow: none; margin-bottom: 0; }
.sb-btn.discret:hover { background: var(--bg-subtle); }
.sb-btn.danger { background: var(--danger); color: var(--paper); border-color: var(--danger); box-shadow: none; margin-bottom: 0; }
.sb-btn[disabled] { opacity: .45; cursor: not-allowed; }

.sb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-field label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.sb-input, .sb-select { font: var(--type-body); color: var(--fg); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 36px; width: 100%; }
.sb-input:hover, .sb-select:hover { border-color: var(--fg-faint); }
.sb-input[aria-invalid="true"] { border-color: var(--danger); }
.sb-aide { font: var(--type-body-sm); color: var(--fg-faint); }
.sb-aide.erreur { color: var(--danger); }
.sb-filtres { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }

/* — Messages et états —————————————————————————————————————————— */
.sb-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border-left: 3px solid var(--border-strong); background: var(--bg-subtle); font: var(--type-body); }
.sb-alert b { font-weight: 700; }
.sb-alert.danger { border-left-color: var(--danger); background: var(--danger-bg); }
.sb-alert.attention { border-left-color: var(--butter-500); background: var(--warning-bg); }
.sb-alert.ok { border-left-color: var(--success); background: var(--success-bg); }

.sb-dialog { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); max-width: min(440px, calc(100vw - 32px)); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-2); }
.sb-dialog::backdrop { background: rgba(30, 36, 28, .35); }
.sb-dialog h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.sb-dialog p { color: var(--fg-muted); }
.sb-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }

.sb-vide { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); text-align: center; color: var(--fg-muted); display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.sb-vide strong { font: var(--display-weight) var(--text-md)/1.2 var(--font-display); color: var(--fg); }
.sb-chargement { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--border) 50%, var(--bg-subtle) 100%); background-size: 200% 100%; animation: sb-charge 1.4s ease-in-out infinite; min-height: 14px; }
@keyframes sb-charge { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .sb-chargement { animation: none; } .sb-btn { transition: none; } }

.sb-pied { font: var(--type-body-sm); color: var(--fg-faint); border-top: 1px solid var(--border); padding-top: var(--space-4); max-width: 80ch; }

/* — Mode sombre : logo clair ————————————————————————————————————— */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sb-logo img.sombre { display: none; }
  :root:not([data-theme="light"]) .sb-logo img.clair { display: block; }
}
:root[data-theme="dark"] .sb-logo img.sombre { display: none; }
:root[data-theme="dark"] .sb-logo img.clair { display: block; }

/* — Téléphone ————————————————————————————————————————————————— */
@media (max-width: 720px) {
  .sb-app { grid-template-columns: minmax(0, 1fr); }
  .sb-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .sb-nav { flex-direction: row; overflow-x: auto; }
  .sb-topbar-in { padding-inline: var(--gutter-mobile); gap: var(--space-3); }
  .sb-topbar-titre { padding-left: var(--space-3); }
  .sb-page { padding-inline: var(--gutter-mobile); }
  .sb-verdicts { grid-template-columns: minmax(0, 1fr); }
  .sb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* components/pilotage/croissance.css */
/* Composants « croissance » du hub : ce qui rend la performance des apps visible
   d'un coup d'œil. CSS pur, stylé par les tokens, sans script : les bulles des
   graphiques s'ouvrent au survol et au clavier. Complète pilotage.css. */

/* — Navigation latérale ————————————————————————————————————————— */
.sb-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.sb-sidebar .sb-logo { padding: var(--space-2) var(--space-3) 0; }
.sb-nav-groupe { display: flex; flex-direction: column; gap: var(--space-2); }
.sb-nav-titre { padding-inline: var(--space-3); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-nav-vide { padding: 0 var(--space-3); font: var(--type-body-sm); color: var(--fg-faint); }
.sb-nav .sb-count.alerte { background: var(--butter-300); color: var(--ink); padding: 3px 6px; border-radius: var(--radius-xs); }
.sb-point { flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--border-strong); }
.sb-point.st-test { background: var(--butter-500); }
.sb-point.st-kept { background: var(--st-kept-bg); }
.sb-point.st-fix { background: var(--butter-700); }
.sb-point.st-build { background: transparent; border: 1px dashed var(--fg-faint); }
.sb-sidebar-pied { margin-top: auto; padding: var(--space-3); }
.sb-sidebar-pied .sb-btn { width: 100%; }
.sb-topbar-titre.sans-filet { padding-left: 0; border-left: 0; margin: 0; }
.sb-kpi-valeur .accent { color: var(--accent); }
/* Écart face à la période précédente : petit, à côté du chiffre. */
.sb-kpi-valeur .sb-delta.sb-ecart, .sb-ecart { font: 500 var(--text-xs)/1 var(--font-mono); }
.sb-sidebar .sb-logo img { height: 36px; }

/* Période : bascule 7 / 30 / 90 jours. */
.sb-periode { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sb-periode a { padding: 6px 12px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); text-decoration: none; border-left: 1px solid var(--border-strong); }
.sb-periode a:first-child { border-left: 0; }
.sb-periode a:hover { background: var(--bg-subtle); color: var(--fg); }
.sb-periode a[aria-current="true"] { background: var(--fg); color: var(--bg); }

/* Deux blocs côte à côte, le premier plus large. */
.sb-duo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--section-gap) var(--space-6); align-items: start; }

/* — Courbes miniatures ——————————————————————————————————————————— */
.sb-spark.beurre .ligne { stroke: var(--butter-700); }
.sb-spark.beurre .aire, .sb-spark.beurre .fin { fill: var(--chart-2); }
.sb-spark.beurre .aire { opacity: .18; }
.sb-spark.large { max-width: none; height: 44px; }

/* — Graphique par jour : deux barres par colonne ————————————————————— */
.sb-graph { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.sb-graph-legende { display: flex; flex-wrap: wrap; gap: var(--space-4); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); }
.sb-graph-legende span { display: inline-flex; align-items: center; gap: 6px; }
.sb-graph-legende .note { margin-left: auto; color: var(--fg-faint); }
.sb-graph i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); }
.sb-graph i.a, .sb-graph .barre.a { background: var(--chart-1); }
.sb-graph i.b, .sb-graph .barre.b { background: var(--chart-2); }
.sb-graph-zone { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); --hauteur: 240px; }
.sb-graph-axe { height: var(--hauteur); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font: 500 11px/1 var(--font-mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.sb-graph-axe span { transform: translateY(-50%); }
.sb-graph-axe span:last-child { transform: translateY(50%); }
.sb-graph-colonnes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: calc(var(--hauteur) + 22px);
  /* Grille : plafond, moitié, zéro. */
  background: linear-gradient(var(--chart-grid), var(--chart-grid)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--chart-grid), var(--chart-grid)) 0 calc(var(--hauteur) / 2) / 100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) 0 var(--hauteur) / 100% 1px no-repeat; }
.sb-graph-colonnes li { position: relative; display: flex; flex-direction: column; min-width: 0; outline: none; }
.sb-graph-colonnes .barres { height: var(--hauteur); display: flex; align-items: flex-end; justify-content: center; gap: 1px; padding-inline: 12%; }
.sb-graph-colonnes .barre { flex: 1 1 0; max-width: 14px; min-height: 0; border-radius: var(--radius-xs) var(--radius-xs) 0 0; transition: opacity 120ms ease; }
.sb-graph-colonnes .barre.a { height: var(--a); }
.sb-graph-colonnes .barre.b { height: var(--b); }
.sb-graph-colonnes .etiquette { height: 22px; padding-top: 8px; font: 500 11px/1 var(--font-mono); color: var(--fg-faint); text-align: center; white-space: nowrap; overflow: visible; }
.sb-graph-colonnes:hover .barre, .sb-graph-colonnes:focus-within .barre { opacity: .35; }
.sb-graph-colonnes li:hover .barre, .sb-graph-colonnes li:focus .barre { opacity: 1; }
.sb-graph-colonnes li:hover, .sb-graph-colonnes li:focus { background: var(--bg-subtle); }
.sb-graph-bulle { display: none; position: absolute; z-index: 4; top: 0; left: calc(100% + 6px); min-width: 176px; padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-2); font: var(--type-body-sm); color: var(--fg-muted); flex-direction: column; gap: 5px; pointer-events: none; }
.sb-graph-colonnes li.droite .sb-graph-bulle { left: auto; right: calc(100% + 6px); }
.sb-graph-colonnes li:hover .sb-graph-bulle, .sb-graph-colonnes li:focus .sb-graph-bulle { display: flex; }
.sb-graph-bulle b { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.sb-graph-bulle span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sb-graph-bulle em { margin-left: auto; padding-left: var(--space-4); font: 500 var(--text-xs)/1 var(--font-mono); font-style: normal; color: var(--fg); font-variant-numeric: tabular-nums; }
.sb-graph.vide .sb-graph-colonnes li { pointer-events: none; }
.sb-graph-vide { position: absolute; inset: 0 0 22px 0; display: grid; place-items: center; margin: 0; padding: var(--space-5); text-align: center; color: var(--fg-muted); font: var(--type-body); }

/* — Cartes d'apps ———————————————————————————————————————————————— */
.sb-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.sb-app-carte { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--fg); text-decoration: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
.sb-app-carte:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); color: var(--fg); }
.sb-app-carte.attente { border-style: dashed; }
.sb-app-carte header { display: flex; align-items: flex-start; gap: var(--space-3); }
.sb-app-carte h3 { flex: 1 1 auto; min-width: 0; font-size: var(--text-lg); }
.sb-app-carte .sb-sous { display: block; margin-top: 4px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-app-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.sb-app-chiffres dt { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-app-chiffres dd { margin: 4px 0 0; font: 400 var(--text-md)/1.2 var(--font-mono); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.sb-app-chiffres dd.bon { color: var(--num-up); }
.sb-app-chiffres dd.moyen { color: var(--accent-2-text); }
.sb-app-chiffres dd.mauvais { color: var(--num-down); }
.sb-app-attente { margin: 0; color: var(--fg-muted); font: var(--type-body); }
.sb-verdict-tete h3 a, .sb-table a.nom { color: inherit; text-decoration: none; }
.sb-verdict-tete h3 a:hover, .sb-table a.nom:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sb-verdicts.seul { grid-template-columns: minmax(0, 1fr); }

/* — Entonnoir : de la visite à l'achat ——————————————————————————————— */
.sb-entonnoir { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-entonnoir li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.sb-entonnoir .passage { font: 500 var(--text-xs)/1 var(--font-mono); color: var(--fg-faint); text-align: right; font-variant-numeric: tabular-nums; }
.sb-entonnoir .piste { position: relative; height: 32px; border-radius: var(--radius-sm); background: var(--bg-subtle); overflow: hidden; display: flex; align-items: center; }
.sb-entonnoir .plein { position: absolute; inset: 0 auto 0 0; min-width: 3px; background: color-mix(in srgb, var(--chart-1) 26%, transparent); }
.sb-entonnoir li:last-child .plein { background: var(--chart-2); }
.sb-entonnoir .nom { position: relative; padding-inline: var(--space-3); font: 600 var(--text-sm)/1 var(--font-sans); color: var(--fg); white-space: nowrap; }
.sb-entonnoir b { min-width: 5ch; text-align: right; font: 500 var(--text-base)/1 var(--font-mono); font-variant-numeric: tabular-nums; }

/* Barre de part, dans une cellule de tableau. */
.sb-table td.barre { width: 96px; padding-left: 0; }
.sb-part { display: block; width: 84px; height: 6px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
.sb-part > span { display: block; height: 100%; border-radius: inherit; background: var(--chart-1); }
.sb-part.gris > span { background: var(--fg-faint); }

/* — Fil d'activité et réserve ———————————————————————————————————— */
.sb-fil, .sb-reserve { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
.sb-fil li, .sb-reserve li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--row-height); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); }
.sb-fil li:last-child, .sb-reserve li:last-child { border-bottom: 0; }
.sb-fil time { flex: none; font: 500 var(--text-xs)/1 var(--font-mono); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.sb-fil .quoi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-muted); }
.sb-fil .quoi b { color: var(--fg); font-weight: 600; }
.sb-fil .source { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-reserve li { justify-content: space-between; }
.sb-reserve a { color: var(--fg); font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-reserve a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sb-reserve span { flex: none; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }

/* — Fiche d'une app ———————————————————————————————————————————— */
.sb-fiche { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.sb-fiche-nom { color: var(--fg-muted); margin-bottom: var(--space-3); }
.sb-fiche dl { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.sb-fiche dt { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-fiche dd { margin: 6px 0 0; font: var(--type-body); }

/* — Studio de créas ———————————————————————————————————————————— */
.sb-studio { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.sb-studio-form { position: sticky; top: calc(var(--header-height) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sb-studio-form textarea.sb-input { min-height: 132px; resize: vertical; line-height: 1.45; }
.sb-studio-form .rang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sb-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.sb-choix label { position: relative; display: block; text-align: center; padding: 9px; font: 600 var(--text-sm)/1 var(--font-sans); color: var(--fg-muted); cursor: pointer; letter-spacing: 0; text-transform: none; }
.sb-choix label + label { border-left: 1px solid var(--border-strong); }
.sb-choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sb-choix label:has(input:checked) { background: var(--fg); color: var(--bg); }
.sb-choix label:has(input:focus-visible) { box-shadow: var(--focus-shadow); }
.sb-creas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.sb-crea { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); }
.sb-crea-media { position: relative; aspect-ratio: 1; background: var(--bg-subtle); display: grid; place-items: center; }
.sb-crea-media img, .sb-crea-media video { width: 100%; height: 100%; object-fit: contain; }
.sb-crea-media .attente { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-4); text-align: center; color: var(--fg-muted); font: var(--type-body-sm); }
.sb-crea-media .attente .sb-chargement { width: 120px; height: 6px; min-height: 6px; border-radius: var(--radius-full); }
.sb-crea-corps { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
.sb-crea-corps p { margin: 0; font: var(--type-body-sm); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sb-crea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); }
.sb-crea-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-1); }
.sb-crea-actions a, .sb-crea-actions button { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.sb-crea-actions button { color: var(--fg-faint); margin-left: auto; }
.sb-crea-actions a:hover, .sb-crea-actions button:hover { color: var(--link-hover); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .sb-graph-colonnes .barre, .sb-app-carte { transition: none; } }

/* — Téléphone ————————————————————————————————————————————————— */
@media (max-width: 960px) {
  .sb-duo, .sb-studio { grid-template-columns: minmax(0, 1fr); }
  .sb-studio-form { position: static; }
}
@media (max-width: 720px) {
  .sb-sidebar { position: static; height: auto; gap: var(--space-3); padding: var(--space-3) var(--gutter-mobile); }
  .sb-sidebar .sb-logo { padding: 0; }
  .sb-nav-groupe { flex-direction: row; align-items: center; min-width: 0; }
  .sb-nav-titre { padding: 0; flex: none; }
  .sb-nav { gap: 4px; }
  .sb-nav a { flex: none; white-space: nowrap; }
  .sb-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--butter-500); }
  .sb-sidebar-pied { display: none; }
  .sb-topbar { top: 0; }
  .sb-graph-zone { --hauteur: 180px; }
  .sb-graph-colonnes .barres { padding-inline: 6%; }
  .sb-apps { grid-template-columns: minmax(0, 1fr); }
  .sb-entonnoir li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--space-2); }
  .sb-table td.barre { display: none; }
  .sb-table th:empty { display: none; }
}

/* Champ fichier : le bouton du navigateur prend l'allure du bouton discret. */
.sb-input[type="file"] { padding: 6px; color: var(--fg-muted); font: var(--type-body-sm); }
.sb-input[type="file"]::file-selector-button { margin-right: var(--space-3); padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font: 600 var(--text-sm)/1 var(--font-sans); cursor: pointer; }
.sb-input[type="file"]::file-selector-button:hover { background: var(--bg-subtle); }

/* components/pilotage/connexion.css */
/* Page de connexion du hub. Le logo y est composé en grand, comme dans
   brand/source/logo.html : l'assiette, puis le nom en Fraunces 900 (SOFT 100).
   C'est la seule page animée du système : l'assiette arrive en tournant et se
   pose, le beurre fait un halo, le nom monte lettre à lettre, le formulaire suit.
   Tout s'efface avec « réduire les animations ». */

.sb-connexion { min-height: 100vh; min-height: 100dvh; display: grid; }
.sb-connexion-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-7) var(--gutter-mobile) var(--space-6); text-align: center; }

.sb-connexion-logo { position: relative; width: clamp(200px, 34vh, 340px); aspect-ratio: 1; margin-bottom: var(--space-2); }
.sb-connexion-logo .assiette { position: relative; width: 100%; height: 100%; animation: sb-assiette-pose 1200ms cubic-bezier(.2, .9, .25, 1.08) both, sb-assiette-repos 9s ease-in-out 1400ms infinite; transform-origin: 50% 50%; }
.sb-connexion-logo .halo { position: absolute; inset: 4%; border-radius: var(--radius-full); background: var(--butter-300); animation: sb-halo 1500ms cubic-bezier(.2, .7, .2, 1) 500ms both; }

.sb-connexion-nom { font-family: "Fraunces", Georgia, serif; font-weight: 900; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; font-size: clamp(44px, 9vw, 92px); line-height: 1; letter-spacing: -0.01em; color: var(--fg); margin: 0; }
.sb-connexion-nom .mot { display: inline-block; white-space: nowrap; position: relative; }
.sb-connexion-nom .mot span { display: inline-block; animation: sb-lettre 620ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(650ms + var(--i) * 38ms); }
/* Le trait beurre de la page active, tiré sous « Butter ». */
.sb-connexion-nom .beurre::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -0.06em; height: 0.07em; border-radius: var(--radius-full); background: var(--butter-500); transform-origin: left center; animation: sb-trait 700ms cubic-bezier(.3, .8, .2, 1) 1250ms both; }

.sb-connexion-role { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-muted); animation: sb-monte 500ms ease-out 1350ms both; }
.sb-connexion-form { width: min(340px, 100%); margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); text-align: left; animation: sb-monte 600ms cubic-bezier(.2, .8, .2, 1) 1450ms both; }
.sb-connexion-form .sb-input { min-height: 44px; font-size: 16px; } /* 16px : pas de zoom à la saisie sur iPhone */
.sb-connexion-form .sb-btn { width: 100%; padding-block: 14px; font-size: var(--text-base); }
.sb-connexion-form .sb-alert { margin: 0; }
.sb-connexion.refus .sb-connexion-form { animation: sb-monte 1ms both, sb-refus 420ms ease-in-out 80ms; }
/* Après un refus, on ne rejoue pas l'entrée : on est déjà là. */
.sb-connexion.refus .assiette { animation: sb-assiette-repos 9s ease-in-out infinite; }
.sb-connexion.refus .halo, .sb-connexion.refus .sb-connexion-nom .mot span, .sb-connexion.refus .sb-connexion-nom .beurre::after, .sb-connexion.refus .sb-connexion-role { animation-duration: 1ms; animation-delay: 0ms; }
.sb-connexion-pied { margin-top: var(--space-5); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); animation: sb-monte 500ms ease-out 1650ms both; }

@keyframes sb-assiette-pose {
  0%   { opacity: 0; transform: translateY(-18%) rotate(-210deg) scale(.55); }
  55%  { opacity: 1; }
  78%  { transform: translateY(0) rotate(7deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes sb-assiette-repos { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
@keyframes sb-halo { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .55; } 100% { opacity: 0; transform: scale(1.28); } }
@keyframes sb-lettre { from { opacity: 0; transform: translateY(.45em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes sb-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sb-monte { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sb-refus { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

@media (prefers-reduced-motion: reduce) {
  .sb-connexion *, .sb-connexion *::after { animation: none !important; }
  .sb-connexion-logo .halo { display: none; }
}
@media (max-height: 640px) {
  .sb-connexion-logo { width: clamp(120px, 26vh, 200px); }
  .sb-connexion-scene { padding-block: var(--space-5); gap: var(--space-3); }
  .sb-connexion-form { margin-top: var(--space-3); }
}