/* ==========================================================================
   Cintra — theme.css (charte 3.7 « VAE » : chrome argenté bleu-vert)
   --------------------------------------------------------------------------
   Jetons et composants de base partagés par le tableau de bord, le popup et
   la page d'impression. Chaque page lie ce fichier AVANT sa feuille propre,
   qui ne fait que composer ces variables. Les pictogrammes sont dans
   icons.css ; le script de page (content.css) vit dans les pages Vinted et
   reprend les mêmes valeurs en dur.

   Demande de l'utilisateur (3 octobre 2026) : Cintra dans la même DA que son
   site d'accompagnement (youcef-sld.netlify.app), celui qu'il donne aux gens
   venus de ses vlogs. Ses principes, repris ici :
   - fond nuit graphite (#020507), métal liquide en WebGL derrière (fond.js),
     voile sombre et grain léger par-dessus ; halos aqua et cyan en repli
   - titres en Unbounded, en chrome argenté avec un reflet qui balaie ; le mot
     mis en avant en chrome aqua
   - cartes en verre fumé : dégradé translucide, liseré clair, reflet en haut
   - action principale : bouton aqua bombé, capitales espacées, reflet qui
     passe, lueur aqua dessous
   - accents aqua (#5ef2d6) et cyan (#39d5ff) ; texte #eef6f7
   La nuit est la DA par défaut (theme-boot.js) ; le jour en est la version
   claire « argent poli » (3.7.1), aussi base de la page d'impression.
   ========================================================================== */

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/unbounded-latin.woff2") format("woff2");
}

/* --- Jour : argent poli (version claire de la DA, base de l'impression) -----
   3.7.1 : le jour n'est plus un blanc teinté de menthe. C'est le même métal
   liquide que la nuit, en plein jour : argent blanc, plis acier, reflets
   aqua (fond.js), sous un voile blanc ; cartes en verre blanc au liseré net ;
   titres en chrome noir poli ; action principale en graphite « nuit » au
   liseré aqua (l'aqua bombé de la nuit sonnait jouet sur du blanc) ; l'aqua
   reste pour les repères (interrupteurs, points, graphiques, focus). */
:root {
  /* Fonds : argent clair sous le métal liquide, cartes en verre blanc */
  --bg: #eef2f4;
  --bg-raised: rgba(255, 255, 255, .78);
  --surface: rgba(255, 255, 255, .84);
  --surface-2: rgba(247, 250, 251, .92);
  --surface-3: rgba(12, 30, 36, .05);
  --surface-solid: #ffffff;
  --field: rgba(255, 255, 255, .95);

  /* Traits fins */
  --border: rgba(12, 30, 36, .1);
  --border-strong: rgba(12, 30, 36, .16);
  --border-hover: rgba(12, 30, 36, .3);
  --border-w: 1px;
  --line: var(--border-w) solid var(--border);
  --outline-w: 1px;
  --outline: var(--outline-w) solid var(--border-strong);

  /* Textes : graphite de la nuit */
  --ink: #071114;
  --text-2: #2a393d;
  --text-3: #56676b;
  --text-4: #8a979a;

  /* Aqua et cyan de la marque ; sur fond clair, un aqua plus soutenu pour le
     texte et les repères (contraste AA) */
  --aqua: #5ef2d6;
  --cyan: #39d5ff;
  --accent: #0b9c8a;
  --accent-hover: #08806f;
  --accent-ink: #f2fffc;
  --accent-text: #087a6c;
  --accent-soft: rgba(94, 242, 214, .16);
  --accent-line: rgba(11, 156, 138, .32);
  --accent-deep: #065c52;

  /* Matières : chrome argenté (pastilles, avatars), chrome noir poli (titres),
     chrome aqua profond (mot fort), graphite « nuit » (action), reflet */
  --chrome: linear-gradient(180deg, #ffffff 0%, #eaf4f6 18%, #a9bcc2 42%, #f6fcfd 52%, #7c9097 68%, #d9e6e9 86%, #ffffff 100%);
  --chrome-ink: #0b1416;
  --chrome-text: linear-gradient(180deg, #33454a 0%, #0c171a 40%, #5f7479 51%, #0f1b1e 60%, #020607 100%);
  --chrome-aqua: linear-gradient(180deg, #13a493 0%, #0a7770 40%, #34cdb9 51%, #087a71 60%, #034a46 100%);
  --chrome-accent: linear-gradient(180deg, #33444a 0%, #141f23 46%, #070d0f 54%, #172529 100%);
  --chrome-accent-hover: linear-gradient(180deg, #3d5056 0%, #19272b 46%, #0b1417 54%, #1c2c31 100%);
  --reflet: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 62%);
  --sweep: rgba(255, 255, 255, .26);
  --glow: linear-gradient(115deg, rgba(94, 242, 214, .24), rgba(57, 213, 255, .14));
  --glow-soft: linear-gradient(115deg, rgba(94, 242, 214, .13), rgba(255, 255, 255, 0) 72%);
  --icon-bg: linear-gradient(180deg, #ffffff 0%, #eef3f4 100%);
  --icon-ring: rgba(12, 30, 36, .1);
  --tabs-bg: rgba(12, 30, 36, .05);
  --btn-bg: rgba(255, 255, 255, .92);
  --btn-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(6, 20, 23, .08);
  --primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(94, 242, 214, .6), 0 10px 22px -10px rgba(4, 14, 17, .6), 0 0 0 1px rgba(4, 12, 14, .85);
  --primary-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1.5px 0 rgba(94, 242, 214, .55), 0 6px 14px -8px rgba(4, 14, 17, .55), 0 0 0 1px rgba(4, 12, 14, .85);
  --tab-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 12px -5px rgba(4, 14, 17, .55);
  --switch-on: linear-gradient(180deg, #8ff7e4 0%, #2fd6bf 55%, #13a59a 100%);
  --switch-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(11, 156, 138, .35);
  --voile: radial-gradient(ellipse 72% 58% at 50% 38%, rgba(255, 255, 255, .66), rgba(255, 255, 255, .34) 72%), linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .5));

  /* États */
  --success: #0f8a5f;
  --success-ink: #ffffff;
  --success-soft: #dcf6ec;
  --success-line: rgba(15, 138, 95, .26);
  --warning: #8a5300;
  --warning-ink: #061417;
  --warning-soft: #fff1d6;
  --warning-line: rgba(138, 83, 0, .24);
  --danger: #c42c4e;
  --danger-ink: #ffffff;
  --danger-soft: #ffe4ec;
  --danger-line: rgba(196, 44, 78, .24);

  /* Graphiques */
  --chart-line-start: #12b9a3;
  --chart-line-end: #1e9fd0;
  --chart-fill: #22c9b4;
  --chart-refund: #e2557a;

  /* Ombres : nettes et froides, comme un objet posé sur du métal */
  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(6, 20, 23, .07);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 1px 2px rgba(6, 20, 23, .05), 0 14px 32px -14px rgba(10, 34, 40, .26);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .95), 0 2px 6px rgba(6, 20, 23, .06), 0 30px 60px -18px rgba(10, 34, 40, .34);
  --glow-accent: 0 10px 22px -10px rgba(4, 14, 17, .6);
  --focus: 0 0 0 3px rgba(11, 156, 138, .3);

  /* Rayons (cartes : 22 px comme le site) */
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 9px;

  /* Typographie : titres en Unbounded (embarquée), texte en police système ;
     aucune police distante (CSP) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Unbounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Fond de page (sans WebGL, et popup) : argent, halos très légers, grain */
  --page-glow: radial-gradient(60% 50% at 12% 6%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(50% 45% at 92% 18%, rgba(57, 213, 255, .08), transparent 60%), radial-gradient(60% 50% at 20% 100%, rgba(94, 242, 214, .08), transparent 60%);
  --grain-opacity: .045;

  --overlay: rgba(6, 20, 23, .42);
  --surface-veil: rgba(255, 255, 255, .9);
  --topbar-bg: rgba(255, 255, 255, .62);
  --chrome-edge: rgba(255, 255, 255, .9);
  --chrome-shine: rgba(255, 255, 255, .9);
  --chrome-ring: rgba(12, 30, 36, .14);
  --switch-track: rgba(12, 30, 36, .14);
  --switch-knob: linear-gradient(180deg, #ffffff 0%, #f1f5f6 100%);
  --selection: rgba(94, 242, 214, .4);
  --success-hover: #ccefe1;
  --warning-hover: #ffe8bd;

  color-scheme: light;
}

/* --- Nuit : la DA du site, par défaut ---------------------------------------
   Graphite profond, verre fumé, chrome argent et aqua. theme-boot.js pose
   data-theme="dark" avant le premier affichage (sauf choix « jour »). */
:root[data-theme="dark"] {
  --bg: #020507;
  --bg-raised: rgba(3, 9, 11, .72);
  --surface: rgba(10, 22, 25, .84);
  --surface-2: rgba(16, 31, 35, .82);
  --surface-3: rgba(170, 220, 228, .07);
  --surface-solid: #0a1619;
  --field: rgba(2, 8, 10, .62);

  --border: rgba(190, 235, 240, .13);
  --border-strong: rgba(190, 235, 240, .2);
  --border-hover: rgba(190, 235, 240, .34);

  --ink: #eef6f7;
  --text-2: #c3d5d8;
  --text-3: #91a6aa;
  --text-4: #64787c;

  --accent: #5ef2d6;
  --accent-hover: #8ff7e4;
  --accent-ink: #021614;
  --accent-text: #5ef2d6;
  --accent-soft: rgba(94, 242, 214, .1);
  --accent-line: rgba(94, 242, 214, .34);
  --accent-deep: #9ff7e8;

  --chrome-text: linear-gradient(180deg, #ffffff 0%, #eaf4f6 18%, #a9bcc2 42%, #f6fcfd 52%, #7c9097 68%, #d9e6e9 86%, #ffffff 100%);
  --chrome-aqua: linear-gradient(180deg, #f2fffc 0%, #b6fbee 22%, #3fd9c1 46%, #e4fffa 54%, #1aa6b0 72%, #9bf2ff 100%);
  --chrome-accent: linear-gradient(180deg, #c9fff4 0%, #6ff3dc 30%, #22c9b4 70%, #129aa0 100%);
  --chrome-accent-hover: linear-gradient(180deg, #d9fff9 0%, #84f6e3 30%, #2bd3be 70%, #17a7ad 100%);
  --sweep: rgba(255, 255, 255, .8);
  --primary-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(0, 60, 60, .3), var(--glow-accent), 0 0 0 1px rgba(255, 255, 255, .22);
  --primary-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 4px rgba(0, 60, 60, .28), 0 4px 14px rgba(30, 220, 195, .22);
  --tab-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 4px 14px rgba(30, 220, 195, .22);
  --switch-on: var(--chrome-accent);
  --switch-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 14px rgba(94, 242, 214, .3);
  --switch-knob: var(--chrome);
  --voile: radial-gradient(ellipse 70% 55% at 50% 38%, rgba(2, 5, 7, .55), transparent 70%), linear-gradient(180deg, rgba(2, 5, 7, .4), rgba(2, 5, 7, .62) 70%, rgba(2, 5, 7, .82));
  --glow: linear-gradient(115deg, rgba(94, 242, 214, .3), rgba(57, 213, 255, .16));
  --glow-soft: linear-gradient(115deg, rgba(94, 242, 214, .14), rgba(57, 213, 255, .06));
  --icon-bg: linear-gradient(180deg, rgba(94, 242, 214, .2), rgba(57, 213, 255, .06));
  --icon-ring: rgba(94, 242, 214, .3);
  --tabs-bg: rgba(2, 8, 10, .45);
  --btn-bg: var(--surface-3);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);

  --success: #4ade9a;
  --success-ink: #021614;
  --success-soft: rgba(74, 222, 154, .12);
  --success-line: rgba(74, 222, 154, .3);
  --warning: #f5c35b;
  --warning-ink: #021614;
  --warning-soft: rgba(245, 195, 91, .12);
  --warning-line: rgba(245, 195, 91, .3);
  --danger: #ff6f8e;
  --danger-ink: #021614;
  --danger-soft: rgba(255, 111, 142, .12);
  --danger-line: rgba(255, 111, 142, .32);

  --chart-line-start: #5ef2d6;
  --chart-line-end: #39d5ff;
  --chart-fill: #5ef2d6;
  --chart-refund: #ff7a9a;

  --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 20px 50px rgba(0, 0, 0, .35);
  --shadow-lg: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 70px rgba(0, 0, 0, .5);
  --glow-accent: 0 10px 30px rgba(30, 220, 195, .3);
  --focus: 0 0 0 3px rgba(94, 242, 214, .32);

  --page-glow: radial-gradient(60% 50% at 20% 20%, rgba(94, 242, 214, .14), transparent 60%), radial-gradient(50% 45% at 85% 30%, rgba(57, 213, 255, .1), transparent 60%), radial-gradient(70% 60% at 50% 100%, rgba(170, 200, 210, .1), transparent 60%);
  --grain-opacity: .07;

  --overlay: rgba(1, 4, 5, .72);
  --surface-veil: rgba(7, 16, 19, .88);
  --topbar-bg: rgba(3, 9, 11, .62);
  --chrome-edge: rgba(255, 255, 255, .2);
  --chrome-shine: rgba(255, 255, 255, .55);
  --chrome-ring: rgba(190, 235, 240, .18);
  --switch-track: rgba(190, 235, 240, .16);
  --selection: rgba(94, 242, 214, .35);
  --success-hover: rgba(74, 222, 154, .2);
  --warning-hover: rgba(245, 195, 91, .2);

  color-scheme: dark;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--page-glow), var(--bg); background-attachment: fixed; font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }
a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
::selection { color: var(--ink); background: var(--selection); }
.is-hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Barres de défilement fines (Chrome). */
* { scrollbar-width: thin; scrollbar-color: var(--border-hover) transparent; }

/* Titres : police de la marque. */
.title, h1.title, h2.title, h3.title { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.eyebrow { margin: 0 0 2px; color: var(--text-3); font-size: 13px; font-weight: 600; }

/* --- Fond : métal liquide (fond.js), voile et grain ------------------------
   Jour et nuit (3.7.1) : argent poli sous un voile blanc le jour, métal du
   site sous un voile nuit ; sans WebGL, les halos de --page-glow restent
   seuls (comme le site). */
.fond, .voile, .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.fond { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.fond.is-ready { opacity: 1; }
.voile { background: var(--voile); }
.grain { inset: -10%; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("img/grain.png"); background-size: 180px 180px; }

/* --- Texte chrome : argent poli, reflet qui balaie (titres) ---------------- */
.chrome-text, .chrome-aqua {
  color: var(--ink);
  background-image: var(--reflet), var(--chrome-text);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reflet 5.5s cubic-bezier(.6, 0, .3, 1) infinite;
}
.chrome-aqua { background-image: var(--reflet), var(--chrome-aqua); }
@keyframes reflet { 0%, 35% { background-position: 160% 0, 0 0; } 75%, 100% { background-position: -60% 0, 0 0; } }
:root[data-theme="dark"] .chrome-text { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .55)); }
:root[data-theme="dark"] .chrome-aqua { filter: drop-shadow(0 0 22px rgba(94, 242, 214, .28)); }

/* Étiquette en capitales espacées (comme « Méthode VAE avec l'IA »). */
.etiquette { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; color: var(--text-3); background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; font: 600 11px/1.3 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }

/* Mot mis en avant (état « nouveau »…). */
.sticker { display: inline-block; padding: .04em .42em .08em; color: var(--accent-deep); background: var(--glow-soft); border: 1px solid var(--accent-line); border-radius: 999px; }

/* --- Fond de page : uni (anciennes pages) ---------------------------------- */
.bg-pattern { background: var(--bg); }

/* --- Marque : le « C » de Cintra, sombre sur tuile chrome (comme le « V » du
   site) ---------------------------------------------------------------------- */
.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--chrome-ink);
  background: var(--chrome);
  border-radius: 30%;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 4px rgba(0, 0, 0, .35), 0 0 18px rgba(94, 242, 214, .25);
  font: 800 17px/1 var(--font-display);
  user-select: none;
}
.brand-mark::before { content: "C"; transform: translateY(.02em); }
:root:not([data-theme="dark"]) .brand-mark { background: url("img/logo-mark.png") center / cover no-repeat, #050b0d; border-radius: 26%; box-shadow: 0 1px 1px rgba(4, 12, 14, .25), 0 8px 18px -8px rgba(4, 12, 14, .6); }
:root:not([data-theme="dark"]) .brand-mark::before { visibility: hidden; }
.brand-mark--sm { width: 24px; height: 24px; font-size: 13px; }

/* --- Cartes : verre fumé, liseré clair, reflet en haut ---------------------- */
.card {
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card--flat { box-shadow: none; }
.card--white { background: var(--surface); }
.card--dark { color: var(--ink); background: var(--surface-2); }

/* --- Boutons ----------------------------------------------------------------- */
.btn {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--btn-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 90ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease, filter 160ms ease;
}
.btn:hover { color: var(--ink); background: var(--glow-soft), var(--surface-3); border-color: var(--border-hover); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn.is-busy { cursor: progress; opacity: .7; }
/* Action principale : bouton aqua bombé, capitales espacées, reflet qui passe. */
.btn--primary {
  isolation: isolate;
  overflow: hidden;
  color: var(--accent-ink);
  background: var(--chrome-accent);
  border-color: transparent;
  box-shadow: var(--primary-shadow);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.btn--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, var(--sweep) 50%, transparent 65%); transform: translateX(-120%); animation: balaye 3.6s ease-in-out infinite; pointer-events: none; }
.btn--primary:hover { color: var(--accent-ink); background: var(--chrome-accent-hover); border-color: transparent; filter: brightness(1.04); }
.btn--primary:disabled::after, .btn--primary[aria-disabled="true"]::after { display: none; }
@keyframes balaye { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn--success { color: var(--success); background: var(--success-soft); border-color: var(--success-line); }
.btn--success:hover { color: var(--success); background: var(--success-hover); border-color: var(--success-line); }
.btn--warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-line); }
.btn--warning:hover { color: var(--warning); background: var(--warning-hover); border-color: var(--warning-line); }
.btn--danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.btn--danger:hover { color: var(--danger-ink); background: var(--danger); border-color: var(--danger); }
.btn--ghost { color: var(--text-2); background: transparent; border-color: transparent; box-shadow: none; }
.btn--ghost:hover { color: var(--ink); background: var(--surface-3); border-color: transparent; }
.btn--soft { background: var(--surface-3); box-shadow: none; }
.btn--soft:hover { background: var(--glow-soft), var(--surface-3); }
.btn--sm { min-height: 32px; gap: 6px; padding: 0 12px; font-size: 13.5px; border-radius: var(--radius-xs); }
.btn--sm.btn--primary { font-size: 11px; letter-spacing: .05em; box-shadow: var(--primary-shadow-sm); }
.btn--block { width: 100%; }
.btn--icon { width: 38px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }

/* --- Badges, pastilles, puces --------------------------------------------- */
.badge, .pill, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.badge { min-width: 20px; justify-content: center; padding: 0 6px; }
.chip { border-radius: var(--radius-xs); }
.badge--accent, .pill--accent, .chip--accent, .badge--soft-accent, .chip--soft-accent { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent-line); }
.badge--success, .pill--success, .chip--success, .badge--soft-success, .chip--soft-success { color: var(--success); background: var(--success-soft); border-color: var(--success-line); }
.badge--warning, .pill--warning, .chip--warning, .badge--soft-warning, .chip--soft-warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-line); }
.badge--danger, .pill--danger, .chip--danger, .badge--soft-danger, .chip--soft-danger { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }

/* Pastille de pictogramme : verre teinté d'aqua, pictogramme aqua (comme les
   étapes du site). */
.icon-sq {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  background: var(--icon-bg);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--icon-ring);
  font-size: 0;
  line-height: 1;
}
.icon-sq--sm { width: 26px; height: 26px; border-radius: var(--radius-xs); }
.icon-sq--sm[data-icon]::before { width: 15px; height: 15px; }
.icon-sq--accent, .icon-sq--mint { color: var(--accent); }
.icon-sq--success { color: var(--success); }
.icon-sq--warning, .icon-sq--mimosa { color: var(--warning); }
.icon-sq--danger, .icon-sq--coral { color: var(--danger); }

/* Coche (listes). */
.tick { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent-text); }

/* --- Carte statistique : libellé, valeur, précision ------------------------ */
.stat-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 108px;
  padding: 18px 20px;
  overflow: hidden;
  background: var(--surface);
  border: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* Les cartes statistiques se lisent sans pictogramme. */
.stat-card > .icon-sq { display: none; }
.stat-card > div { min-width: 0; }
.stat-card span, .stat-card small { display: block; }
.stat-card span { color: var(--text-3); font: 600 11.5px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-card small { margin-top: 6px; color: var(--text-3); font-size: 13.5px; }

/* --- Onglets / segments ---------------------------------------------------- */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--tabs-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.tabs__item {
  min-height: 28px;
  padding: 0 12px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active, .tabs__item[aria-selected="true"] { color: var(--accent-ink); background: var(--chrome-accent); border-color: transparent; box-shadow: var(--tab-active-shadow); }
.tabs__item:focus-visible { outline: none; box-shadow: var(--focus); }
/* Variante « segment » (filtres de période) : même rendu. */
.tabs--segment { background: var(--tabs-bg); }
.tabs--segment .tabs__item.is-active, .tabs--segment .tabs__item[aria-selected="true"] { color: var(--accent-ink); background: var(--chrome-accent); }

/* --- Tableaux -------------------------------------------------------------- */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.table th, .table td { padding: 11px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-3); font: 600 11px/1.4 var(--font-display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.table thead th { position: sticky; top: 0; background: var(--surface-solid); z-index: 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-3); }
.table td.is-num, .table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.table--compact th, .table--compact td { padding: 8px 12px; font-size: 13.5px; }
.table--compact th { font-size: 10.5px; }
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Champs ---------------------------------------------------------------- */
.input, .select, .textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-hover); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--text-4); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-3); }
.textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.select option { color: var(--ink); background: var(--surface-solid); }
.input--sm, .select--sm { min-height: 32px; padding: 4px 10px; font-size: 13.5px; border-radius: var(--radius-xs); }
/* Un petit sélecteur garde la place de sa flèche : le texte s'arrête avant. */
.select.select--sm { padding-right: 30px; background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; text-overflow: ellipsis; }
.input--inline { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

/* Cases à cocher et boutons radio natifs : aqua de la marque. */
input[type="checkbox"]:not(.switch), input[type="radio"] { accent-color: var(--accent); }

/* --- Interrupteur ---------------------------------------------------------- */
.switch {
  appearance: none;
  position: relative;
  width: 40px;
  height: 24px;
  flex: 0 0 40px;
  margin: 0;
  background: var(--switch-track);
  border: 0;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--switch-knob);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--chrome-ring), 0 2px 4px rgba(0, 0, 0, .3);
  transition: transform 160ms ease;
}
.switch:checked { background: var(--switch-on); box-shadow: var(--switch-on-shadow); }
.switch:checked::after { transform: translateX(16px); }
.switch:focus-visible { outline: none; box-shadow: var(--focus); }
.switch:disabled { opacity: .5; cursor: not-allowed; }
.switch--large { width: 46px; height: 28px; flex-basis: 46px; }
.switch--large::after { width: 22px; height: 22px; }
.switch--large:checked::after { transform: translateX(18px); }

/* --- Encadrés d'information ------------------------------------------------ */
.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.notice--info { background: var(--accent-soft); border-color: var(--accent-line); }
.notice--warn { background: var(--warning-soft); border-color: var(--warning-line); }
.notice--danger, .notice--error { background: var(--danger-soft); border-color: var(--danger-line); }
.notice--success { background: var(--success-soft); border-color: var(--success-line); }
.notice p { margin: 0; color: var(--text-2); }
.notice p + p { margin-top: 6px; }
.notice b, .notice strong { color: var(--ink); font-weight: 700; }

/* --- Jauge : argent, aqua, cyan (comme la barre de progression du site) ----- */
.meter { height: 8px; overflow: hidden; background: var(--surface-3); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border); }
.meter > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--aqua), var(--cyan)); border-radius: inherit; transition: width 240ms ease; }
.meter--warn > i { background: var(--warning); }
.meter--danger > i { background: var(--danger); }

/* --- Réduction des animations -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}