/* Polices de la charte « Fiche d'inventaire » (refonte, 2026-10-11), AUTO-HÉBERGÉES :
   paquets @fontsource (npm, versions exactes), sous-ensemble latin uniquement. Vite les
   publie sous /assets avec une empreinte et le service worker les précache : plus de
   Google Fonts (CSP resserrée) et les polices restent disponibles hors ligne. *//* ibm-plex-sans-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/ibm-plex-sans-latin-400-normal-CDDApCn2.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-400-normal-CYLoc0-x.woff) format('woff');
}
/* ibm-plex-sans-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-sans-latin-500-normal-6ng42L7E.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-500-normal-BgVn5rGT.woff) format('woff');
}
/* ibm-plex-sans-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-sans-latin-600-normal-CuJfVYMP.woff2) format('woff2'), url(/assets/ibm-plex-sans-latin-600-normal-Cu4Hd6ag.woff) format('woff');
}
/* ibm-plex-mono-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-500-normal-CB9ihrfo.woff) format('woff');
}
/* ibm-plex-mono-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2) format('woff2'), url(/assets/ibm-plex-mono-latin-600-normal-DWFSQ4vo.woff) format('woff');
}
/* Bricolage Grotesque : police VARIABLE (graisses 200 à 800, axe de taille optique),
   fichier latin seul — les sous-ensembles vietnamien et latin étendu du paquet ne servent
   pas et seraient précachés pour rien. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/bricolage-grotesque-latin-opsz-normal-Cre6nC2_.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Charte « Fiche d'inventaire » — tokens et composants partagés (préfixe --rp- / .rp-).
   Source : replay-tokens.css fourni avec la charte (2026-10-07), repris tel quel SAUF :
   l'@import Google Fonts (polices auto-hébergées, voir fonts.css) et les règles de base
   sur body/h1-h3/a/:focus-visible (appliquées écran par écran pendant la refonte). */

:root {
  /* ---- Couleurs : fonds et surfaces ---- */
  --rp-bg: #EDEEF0;            /* fond de page */
  --rp-surface: #FFFFFF;       /* cartes, panneaux, header */
  --rp-surface-2: #F4F5F6;     /* zones internes, champs de recherche mobiles */
  --rp-surface-3: #E4E6EA;     /* avatar, segment sélectionné discret, piste */
  --rp-inverse: #15171C;       /* bandeaux sombres, boutons sombres */

  /* ---- Couleurs : bordures ---- */
  --rp-border: #DDE0E4;        /* bordure des cartes et panneaux */
  --rp-border-strong: #D5D8DD; /* champs, chips, séparateurs de liste */
  --rp-border-tag: #C9CDD3;    /* étiquettes, pointillés d'état vide */

  /* ---- Couleurs : texte ---- */
  --rp-ink: #15171C;           /* texte principal — 17.9:1 sur blanc */
  --rp-ink-2: #3D424B;         /* texte courant secondaire — 8.7:1 sur --rp-bg */
  --rp-muted: #5A5F6A;         /* méta, légendes — 6.4:1 blanc / 5.5:1 --rp-bg */
  --rp-faint: #6B707A;         /* UNIQUEMENT texte ≥ 19px gras (onglets inactifs) — 4.3:1 */
  --rp-on-inverse: #EDEEF0;
  --rp-on-inverse-muted: #C2C7CD; /* 10.5:1 sur --rp-inverse */

  /* ---- Accent (orange brûlé) ---- */
  --rp-accent: #C2410C;        /* boutons primaires, onglet actif, valeur €  — 5.2:1 sur blanc */
  --rp-accent-hover: #9A3412;
  --rp-accent-on-dark: #F0A27A;/* accent sur --rp-inverse — 8.7:1 */
  /* Attention : --rp-accent sur --rp-bg = 4.46:1 → réservé au texte ≥ 19px gras.
     Petit texte orange : uniquement sur --rp-surface (blanc). */

  /* ---- Rampe de gris pour les graphiques (du plus foncé au plus clair) ---- */
  --rp-chart-1: #15171C;
  --rp-chart-2: #3D424B;
  --rp-chart-3: #4A505A;       /* barres par défaut */
  --rp-chart-4: #5A5F6A;
  --rp-chart-5: #767C87;
  --rp-chart-6: #9097A1;
  --rp-chart-7: #AAB0B8;
  --rp-chart-8: #C2C7CD;
  --rp-chart-9: #D9DCE0;

  /* ---- Bandeaux de plateforme (sur les jaquettes) ---- */
  --rp-pf-ps1: #1E1E20;   --rp-pf-ps2: #1F2A44;   --rp-pf-ps3: #1E1E20;
  --rp-pf-ps4: #1F3A6E;   --rp-pf-ps5: #E9EBEE;   --rp-pf-psp: #1E1E20;
  --rp-pf-xbox: #2F5F2A;  --rp-pf-x360: #4E7A2A;  --rp-pf-xone: #3A6B35;  --rp-pf-xsx: #1E1E20;
  --rp-pf-switch: #B3262E;--rp-pf-wii: #E9EBEE;   --rp-pf-wiiu: #2B6F8E;  --rp-pf-gc: #4B3F72;
  --rp-pf-n64: #3A3A3A;   --rp-pf-snes: #8C8C8C;  --rp-pf-nes: #8C8C8C;
  --rp-pf-ds: #E4E4E4;    --rp-pf-3ds: #B3262E;   --rp-pf-gb: #8C8C8C;    --rp-pf-gba: #3E3C7A;
  --rp-pf-md: #141414;    --rp-pf-ms: #141414;    --rp-pf-saturn: #1E1E20;--rp-pf-dc: #E9EBEE;
  --rp-pf-default: #3D424B;
  /* Bandeaux clairs (ps5, wii, ds, dc) → texte --rp-ink ; les autres → blanc. */

  /* ---- Typographie ---- */
  --rp-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --rp-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --rp-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --rp-text-xs: 0.6875rem;  /* 11px — étiquettes mono */
  --rp-text-sm: 0.8125rem;  /* 13px — méta */
  --rp-text-md: 0.9375rem;  /* 15px — texte courant, boutons */
  --rp-text-lg: 1.0625rem;  /* 17px — chapeaux mobile */
  --rp-text-xl: 1.25rem;    /* 20px — titres de panneau, chapeau landing */
  --rp-h3: 1.375rem;        /* 22px — onglets, titres de carte */
  --rp-h2: 3rem;            /* 48px — sections landing (mobile : 2.125rem) */
  --rp-h1: 2.5rem;          /* 40px — titre d'écran appli */
  --rp-stat: 3.5rem;        /* 56px — gros chiffres */
  --rp-hero: 5.125rem;      /* 82px — titre landing (mobile : 2.875rem) */

  /* ---- Espacements (base 4) ---- */
  --rp-space-1: 4px;  --rp-space-2: 8px;  --rp-space-3: 12px; --rp-space-4: 16px;
  --rp-space-5: 20px; --rp-space-6: 24px; --rp-space-8: 32px; --rp-space-10: 40px;
  --rp-space-14: 56px; --rp-space-22: 88px;

  /* ---- Rayons ---- */
  --rp-radius-xs: 3px;    /* étiquettes, jaquettes */
  --rp-radius-sm: 8px;    /* boutons, champs, cartes de jeu */
  --rp-radius-md: 12px;   /* panneaux */
  --rp-radius-lg: 16px;   /* grandes cartes (landing, feuilles mobiles) */
  --rp-radius-pill: 999px;/* chips de filtre */

  /* ---- Ombres (rares : seulement ce qui « flotte ») ---- */
  --rp-shadow-float: 0 18px 36px -18px rgba(21, 23, 28, .35); /* fiches landing, aperçus */
  --rp-shadow-fab: 0 6px 16px rgba(21, 23, 28, .25);

  /* ---- Mise en page ---- */
  --rp-container-app: 1360px;
  --rp-container-site: 1240px;
  --rp-gutter: 32px;            /* < 768px : 16px (appli) / 20px (landing) */
  --rp-header-h: 72px;
  --rp-tabbar-h: 72px;

  /* ---- Mouvement ---- */
  --rp-ease: cubic-bezier(.2, .7, .2, 1);
  --rp-dur-fast: 150ms;
  --rp-dur: 250ms;
}

@media (max-width: 767px) {
  :root { --rp-gutter: 16px; --rp-h2: 2.125rem; --rp-hero: 2.875rem; --rp-stat: 2.75rem; --rp-h1: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rp-dur-fast: 0ms; --rp-dur: 0ms; }
}

/* ==========================================================================
   Composants
   ========================================================================== */

/* -- Étiquette mono (complétude, état, édition, sur-titres) -- */
.rp-mono { font: 600 var(--rp-text-xs) var(--rp-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.rp-tag {
  font: 600 10.5px var(--rp-font-mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rp-ink-2); border: 1px solid var(--rp-border-tag); border-radius: var(--rp-radius-xs);
  padding: 3px 6px; white-space: nowrap; display: inline-block;
}
.rp-tag--accent { color: var(--rp-accent); border-color: var(--rp-accent); } /* éditions spéciales, priorité haute */

/* -- Boutons -- */
.rp-btn {
  height: 44px; padding: 0 18px; border-radius: var(--rp-radius-sm); border: 1px solid transparent;
  font: 600 var(--rp-text-md) var(--rp-font-body); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none; transition: background var(--rp-dur-fast), border-color var(--rp-dur-fast);
}
.rp-btn--primary { background: var(--rp-accent); color: #fff; }
.rp-btn--primary:hover { background: var(--rp-accent-hover); color: #fff; }
.rp-btn--dark { background: var(--rp-inverse); color: #fff; }
.rp-btn--dark:hover { background: #2A2D35; color: #fff; }
.rp-btn--outline { background: var(--rp-surface); color: var(--rp-ink); border-color: var(--rp-border-strong); }
.rp-btn--outline:hover { border-color: var(--rp-ink); color: var(--rp-ink); }
.rp-btn--lg { height: 54px; padding: 0 26px; font-size: 1rem; }
.rp-btn:disabled, .rp-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rp-icon-btn { width: 44px; height: 44px; padding: 0; border-radius: var(--rp-radius-sm); border: 1px solid var(--rp-border-strong); background: var(--rp-surface); display: inline-grid; place-items: center; cursor: pointer; }

/* -- Chip de filtre -- */
.rp-chip {
  height: 40px; padding: 0 14px; border-radius: var(--rp-radius-pill); border: 1px solid var(--rp-border-strong);
  background: var(--rp-surface); color: var(--rp-ink); font: 500 0.875rem var(--rp-font-body);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
}
.rp-chip:hover { border-color: var(--rp-ink); }
.rp-chip[aria-pressed="true"], .rp-chip.is-active { background: var(--rp-ink); color: #fff; border-color: var(--rp-ink); }

/* -- Champ de recherche / champ texte -- */
.rp-input {
  height: 44px; box-sizing: border-box; width: 100%; padding: 0 12px; border-radius: var(--rp-radius-sm);
  border: 1px solid var(--rp-border-strong); background: var(--rp-surface); font: 400 var(--rp-text-md) var(--rp-font-body); color: var(--rp-ink);
}
.rp-input:focus { outline: 2px solid var(--rp-accent); outline-offset: 0; border-color: transparent; }

/* -- Onglets « type d'objet » (Jeux / Consoles / Accessoires / Figurines) -- */
.rp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--rp-border-strong); overflow-x: auto; }
.rp-tab {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 0 0 12px; cursor: pointer; flex: none;
  font: 600 var(--rp-h3) var(--rp-font-display); color: var(--rp-faint);
}
.rp-tab[aria-selected="true"] { color: var(--rp-ink); border-bottom-color: var(--rp-ink); font-weight: 700; }
.rp-tab__count { font: 500 var(--rp-text-sm) var(--rp-font-mono); color: var(--rp-muted); margin-left: 4px; }

/* -- Navigation principale (header bureau) -- */
.rp-nav a { text-decoration: none; font: 500 var(--rp-text-md) var(--rp-font-body); color: var(--rp-muted); padding: 10px 2px; border-bottom: 2px solid transparent; }
.rp-nav a:hover { color: var(--rp-ink); }
.rp-nav a[aria-current="page"] { color: var(--rp-ink); border-bottom-color: var(--rp-accent); }

/* -- Panneau -- */
.rp-panel { background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-md); padding: 24px 28px; }

/* -- Carte de jeu (grille bibliothèque) -- */
.rp-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 20px; }
@media (max-width: 767px) { .rp-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; } }
.rp-game-card {
  background: var(--rp-surface); border: 1px solid var(--rp-border); border-radius: var(--rp-radius-sm);
  padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--rp-ink);
  transition: transform var(--rp-dur-fast) var(--rp-ease), border-color var(--rp-dur-fast);
}
.rp-game-card:hover { transform: translateY(-2px); border-color: var(--rp-ink); color: var(--rp-ink); }
.rp-game-card__title { font-weight: 600; font-size: var(--rp-text-md); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rp-game-card__meta { font-size: var(--rp-text-sm); color: var(--rp-muted); }
.rp-game-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Mobile : pas de cadre blanc autour de la carte, juste jaquette + titre + 1 étiquette */
@media (max-width: 767px) {
  .rp-game-card { background: none; border: 0; padding: 0; gap: 6px; }
  .rp-game-card__title { font-size: 12.5px; }
  .rp-game-card__meta { display: none; }
}

/* -- Jaquette -- */
.rp-cover { position: relative; aspect-ratio: 5 / 7; border-radius: var(--rp-radius-xs); overflow: hidden; background: var(--rp-surface-3); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.rp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-cover__band {
  position: absolute; top: 0; left: 0; right: 0; padding: 5px 8px;
  font: 600 10px var(--rp-font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--band, var(--rp-pf-default)); color: var(--band-ink, #fff);
}
/* Jaquette manquante : bloc teinté + titre en Bricolage (voir maquettes) */
.rp-cover--empty { display: flex; align-items: flex-end; padding: 32px 12px 12px; box-sizing: border-box; font: 700 17px/1.05 var(--rp-font-display); color: #F1F1EE; }
.rp-tone-1 { background: #3E4A5C; } .rp-tone-2 { background: #A4532E; } .rp-tone-3 { background: #6E7547; }
.rp-tone-4 { background: #5B3F55; } .rp-tone-5 { background: #C9B48A; color: #2A2416; } .rp-tone-6 { background: #22303A; }

/* -- Chiffre clé -- */
.rp-stat { display: flex; flex-direction: column; gap: 4px; }
.rp-stat__value { font: 700 var(--rp-stat)/1 var(--rp-font-display); letter-spacing: -0.03em; }
.rp-stat__label { font-size: 0.875rem; color: var(--rp-muted); }

/* -- Barre horizontale (statistiques) -- */
.rp-bar-row { display: grid; grid-template-columns: 130px 1fr 40px; align-items: center; gap: 12px; font-size: 0.875rem; padding: 3px 0; border-radius: 4px; }
.rp-bar-row:hover { background: var(--rp-surface-2); }
.rp-bar-row__fill { display: block; height: 12px; background: var(--rp-chart-3); border-radius: 0 4px 4px 0; min-width: 3px; }
.rp-bar-row:hover .rp-bar-row__fill { background: var(--rp-ink); }
.rp-bar-row__value { text-align: right; font: 600 var(--rp-text-sm) var(--rp-font-mono); }

/* -- Contrôle segmenté (complétude, état, Prêts en cours/rendus) -- */
.rp-seg { display: flex; gap: 4px; background: var(--rp-surface-2); padding: 4px; border-radius: var(--rp-radius-sm); }
.rp-seg > button { flex: 1; height: 40px; border: 0; border-radius: 6px; background: transparent; font: 600 0.875rem var(--rp-font-body); color: var(--rp-muted); cursor: pointer; }
.rp-seg > button[aria-checked="true"], .rp-seg > button[aria-selected="true"] { background: var(--rp-surface); color: var(--rp-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* -- État vide -- */
.rp-empty { border: 1.5px dashed var(--rp-border-tag); border-radius: 10px; padding: 28px 16px; text-align: center; color: var(--rp-muted); font-size: 0.875rem; line-height: 1.45; }

/* -- Barre d'onglets mobile -- */
.rp-tabbar { position: sticky; bottom: 0; height: var(--rp-tabbar-h); padding-bottom: env(safe-area-inset-bottom); background: var(--rp-surface); border-top: 1px solid var(--rp-border); display: flex; justify-content: space-around; align-items: flex-start; z-index: 10; }
.rp-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; padding-top: 8px; text-decoration: none; font: 500 11px var(--rp-font-body); color: var(--rp-muted); }
.rp-tabbar a[aria-current="page"] { color: var(--rp-ink); }
@media (min-width: 768px) { .rp-tabbar { display: none; } }

/* -- Bouton flottant « Ajouter » (mobile) -- */
.rp-fab { position: fixed; right: 16px; bottom: calc(var(--rp-tabbar-h) + 16px + env(safe-area-inset-bottom)); width: 56px; height: 56px; border-radius: 16px; border: 0; background: var(--rp-accent); color: #fff; display: grid; place-items: center; box-shadow: var(--rp-shadow-fab); cursor: pointer; }
@media (min-width: 768px) { .rp-fab { display: none; } }

/* -- Landing : fiche cartonnée + tampon -- */
.rp-index-card {
  width: 310px; box-sizing: border-box; background: #fff; border: 1px solid var(--rp-border-strong); border-radius: 6px;
  padding: 16px 18px 18px; box-shadow: var(--rp-shadow-float);
  background-image: repeating-linear-gradient(#fff 0 27px, #E9ECEF 27px 28px); background-position: 0 58px;
  transition: transform var(--rp-dur) var(--rp-ease);
}
.rp-index-card:hover { transform: rotate(0) translateY(-6px) !important; }
.rp-stamp { position: absolute; right: 14px; bottom: 16px; transform: rotate(-9deg); border: 2px solid currentColor; border-radius: 4px; padding: 3px 8px; font: 600 13px var(--rp-font-mono); letter-spacing: .12em; background: rgba(255,255,255,.85); }