/* ManaMind — feuille de style applicative
   Depend de tokens.css. Aucun framework : les composants sont ecrits pour
   cette interface et pour le ratio des cartes Magic. */

/* ═══ Reset ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent-glow); color: var(--text); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: var(--r-full);
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* ═══ Typographie ════════════════════════════════════════════════════════ */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: var(--leading-tight);
}

.h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.15; }
.h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; }
.h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.h4 { font-size: var(--text-base); font-weight: 600; }

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.muted   { color: var(--text-2); }
.dim     { color: var(--text-3); }
.small   { font-size: var(--text-sm); }
.xs      { font-size: var(--text-xs); }
.num     { font-variant-numeric: tabular-nums; }
.strong  { font-weight: 600; }
.accent  { color: var(--accent); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ Structure ══════════════════════════════════════════════════════════ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.content {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-8) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.content--flush { padding-top: 0; }

.section { display: flex; flex-direction: column; gap: var(--sp-4); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.section-head__title { display: flex; align-items: baseline; gap: var(--sp-3); }

/* ── Barre laterale (desktop) ─────────────────────────────────────────── */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border-right: 1px solid var(--line);
  z-index: var(--z-nav);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

.brand__mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--text-inverse);
  box-shadow: 0 2px 12px rgba(224, 169, 74, 0.28);
}

.brand__mark svg { width: 17px; height: 17px; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* La barre est haute de 100vh : sans min-height nulle, un element flex ne
     descend jamais sous la hauteur de son contenu. Une liste longue poussait
     donc le pied de barre — profil et deconnexion — sous le bord de l'ecran,
     hors d'atteinte puisque la barre est sticky. C'est la navigation qui
     defile, le pied reste visible. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.nav__group { margin-top: var(--sp-5); }
.nav__group:first-child { margin-top: 0; }

.nav__label {
  padding: 0 var(--sp-3) var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.nav__item:hover { background: var(--surface); color: var(--text); }

.nav__item[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent-bright);
  font-weight: 600;
}

.nav__item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }

/* La deconnexion est un bouton, pas un lien : contrairement a un <a>, il ne
   s'etire pas sur la largeur, et son fond survole serait plus etroit que
   celui des autres entrees. */
button.nav__item { width: 100%; }

.nav__count {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.sidebar__foot { margin-top: auto; padding-top: var(--sp-4); }

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}

.user-chip:hover { background: var(--surface); }

.avatar {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
}

.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.avatar--lg { width: 60px; height: 60px; font-size: var(--text-lg); }
.avatar--xl { width: 92px; height: 92px; font-size: var(--text-2xl); }

/* ── Barre superieure ─────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding: 0 var(--sp-8);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}


.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.topbar__burger { display: none; }

/* Numero de version, ancre en haut a droite de la fenetre. Discret par
   defaut, lisible au survol : il sert a verifier, pas a etre lu sans cesse. */
.version-tag {
  /* Au-dessus de tout : le numero doit rester lisible meme sur une modale,
     puisqu'il sert justement a verifier qu'on regarde la bonne version. */
  position: fixed; top: 6px; right: 10px;
  z-index: var(--z-toast);
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--overlay);
  border: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease);
}
.version-tag:hover { opacity: 1; color: var(--text-1); }

/* Deux pastilles partagent desormais le coin bas droit : l'appel a retour et
   le lien de soutien. Un conteneur les aligne, plutot que deux ancrages fixes
   calcules l'un par rapport a l'autre — ainsi l'une peut manquer (le lien de
   soutien est absent de l'accueil) sans deplacer l'autre. */
.dock {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-3);
}

/* Pastille du coin bas droit : elle suit le defilement sans jamais disputer le
   haut de page au titre ni au numero de version. */
.support-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-full);
  /* Fond opaque, et non le lavis dore d'avant : pose sur une grille de cartes,
     un fond translucide laissait passer les illustrations et le libelle
     devenait illisible. L'or reste sur le filet et sur le texte. */
  background: var(--bg-raised);
  border: 1px solid var(--line-accent);
  color: var(--accent-bright);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.support-tag:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}
.support-tag svg { width: 16px; height: 16px; }

/* Sous 860 px, la barre d'onglets occupe le bas de l'ecran : le lien se pose
   juste au-dessus, sinon il recouvrirait la navigation. */
@media (max-width: 860px) {
  .dock { bottom: calc(var(--bottombar-h) + var(--sp-3)); }
}

/* Sous 720 px, l'icone suffit : le libelle couvrirait une bonne part de la
   largeur, et donc du contenu. Le nom reste porte par aria-label. */
@media (max-width: 720px) {
  .support-tag span { display: none; }
  .support-tag { padding: 7px 9px; }
}

/* La barre du haut ne porte plus que le burger : sur grand ecran, ou la sidebar
   est deployee, elle n'a plus rien a montrer et disparait. Elle ne subsiste en
   dessous de 860 px que parce que son burger y est le seul acces au tiroir. */
@media (min-width: 861px) { .topbar { display: none; } }

/* Retour et actions d'ecran, en tete du contenu */
.page-head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.page-head:empty { display: none; }

/* ── Barre basse (mobile) ─────────────────────────────────────────────── */

.bottombar { display: none; }

/* ═══ Hero ═══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  isolation: isolate;
}

.hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 32%;
  opacity: 0.5;
  transform: scale(1.04);
}

/* Le degrade garantit la lisibilite du texte quelle que soit l'illustration.
   Sa moitie droite s'est densifiee le jour ou la courbe est venue s'y poser :
   les parts en petit gris se perdaient sur une illustration claire. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, var(--bg) 4%, color-mix(in srgb, var(--bg) 78%, transparent) 46%,
                    color-mix(in srgb, var(--bg) 46%, transparent) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 62%);
}

/* Le bandeau occupe toute la largeur et se fait le plus bas possible : le
   contenu s'etale au lieu d'etre empile dans une colonne de 720 px. */
.hero__body {
  position: relative;
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: none;
}

.hero--tall .hero__body { padding-block: var(--sp-8) var(--sp-6); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sp-4);
  align-items: baseline;
}

.hero__stat { display: flex; align-items: baseline; gap: var(--sp-2); }
.hero__stat b {
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Bandeau en deux colonnes : contenu a gauche, actions a droite. Etale le
   bandeau sur la largeur au lieu de l'allonger vers le bas. */
.hero__split { display: flex; gap: var(--sp-6); align-items: center; }
.hero__split > .grow { min-width: 0; }
.hero__split .hero__actions { flex-direction: column; align-items: stretch; flex-shrink: 0; }
@media (max-width: 860px) {
  .hero__split { flex-direction: column; }
  .hero__split .hero__actions { flex-direction: row; flex-wrap: wrap; }
}

.hero__credit {
  position: absolute;
  right: var(--sp-4); bottom: var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  opacity: 0.7;
}

/* ═══ Boutons ════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.btn--primary {
  background: linear-gradient(160deg, var(--accent-bright), var(--accent));
  border-color: transparent;
  color: var(--text-inverse);
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(224, 169, 74, 0.24);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(160deg, #F7D08F, var(--accent-bright));
}

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); }

.btn--outline { background: transparent; border-color: var(--line-accent); color: var(--accent); }
.btn--outline:hover:not(:disabled) { background: var(--accent-wash); }

.btn--danger { border-color: rgba(229, 105, 94, 0.35); color: var(--danger); background: transparent; }
.btn--danger:hover:not(:disabled) { background: var(--danger-wash); }

.btn--lg { padding: 12px 22px; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn--sm { padding: 5px 10px; font-size: var(--text-xs); border-radius: var(--r-sm); }

.btn--icon { padding: 8px; width: 34px; height: 34px; }
.btn--icon.btn--sm { width: 26px; height: 26px; padding: 4px; }

.btn--block { width: 100%; }

.btn-group { display: inline-flex; gap: 0; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.btn-group .btn[aria-pressed="true"] {
  background: var(--accent-wash);
  border-color: var(--line-accent);
  color: var(--accent-bright);
  z-index: 1;
}

/* ═══ Formulaires ════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: var(--sp-2); }

.label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.input, .select, .textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder, .textarea::placeholder { color: var(--text-3); }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--line-accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.textarea { resize: vertical; min-height: 120px; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; }

/* Le champ par defaut est en chasse fixe, parce qu'il recoit surtout des
   decklists alignees. Un message ecrit en prose s'y lit mal : cette variante
   lui rend la police du reste de l'interface. */
.textarea--prose { font-family: var(--font-ui); font-size: var(--text-base); }

.select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 8l3-3.5' stroke='%236B6862' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search svg {
  position: absolute;
  left: 11px;
  width: 15px; height: 15px;
  color: var(--text-3);
  pointer-events: none;
}

.search .input { padding-left: 34px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  font-size: var(--text-sm);
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch__track {
  width: 36px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--surface-3);
  border: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease);
}

.switch__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--text-2);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.switch input:checked + .switch__track { background: var(--accent-wash); border-color: var(--line-accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); background: var(--accent); }

/* ── Autocompletion ──────────────────────────────────────────────────── */

.autocomplete { position: relative; }

.autocomplete__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: var(--z-drawer);
  max-height: 320px;
  overflow-y: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-1);
}

.autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.autocomplete__item:hover,
.autocomplete__item[aria-selected="true"] { background: var(--surface-2); color: var(--text); }

.autocomplete__item img {
  width: 30px;
  aspect-ratio: var(--card-ratio);
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ═══ Panneaux ═══════════════════════════════════════════════════════════ */

.panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }

.panel--accent { border-color: var(--line-accent); background: var(--accent-wash); }

/* ═══ Statistiques ═══════════════════════════════════════════════════════ */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--sp-3);
}

/* Sans cela, une tuile au contenu large elargit toute la grille
   et fait deborder la page horizontalement. */
.stats > * { min-width: 0; }

.stat {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}

a.stat:hover { border-color: var(--line-strong); background: var(--surface-2); }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.stat__note { font-size: var(--text-xs); color: var(--text-2); }

/* ═══ Progression ════════════════════════════════════════════════════════ */

/* display:block explicite : la barre est parfois portee par un <span>,
   qui sans cela ignorerait hauteur et largeur. */
.progress {
  display: block;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
  transition: width var(--dur-slow) var(--ease-out);
}

.steps { display: flex; flex-direction: column; gap: var(--sp-2); }

.step {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease);
}

.step:hover { border-color: var(--line-strong); }
.step--done { opacity: 0.62; }

.step__mark {
  width: 24px; height: 24px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.step--done .step__mark {
  background: var(--ok-wash);
  border-color: rgba(107, 201, 138, 0.4);
  color: var(--ok);
}

.step__text { min-width: 0; flex: 1; }
.step__title { font-size: var(--text-sm); font-weight: 600; }
.step__detail { font-size: var(--text-xs); color: var(--text-3); }

/* ═══ Grille de cartes Magic ═════════════════════════════════════════════ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 158px), 1fr));
  gap: var(--sp-4);
}

/* Taille unique dans tout le projet, celle de « Ma collection ». */
.card-grid { --card-min: 232px; }
.card-grid--sm { --card-min: 116px; gap: var(--sp-3); }
.card-grid--lg { --card-min: 210px; }

.mtg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform var(--dur) var(--ease-out);
}

.mtg-card__frame {
  position: relative;
  aspect-ratio: var(--card-ratio);
  border-radius: 4.6% / 3.3%;
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.mtg-card__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.mtg-card:hover { transform: translateY(-4px); }
.mtg-card:hover .mtg-card__frame {
  border-color: var(--line-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line-accent);
}

.mtg-card--flat:hover { transform: none; }

/* Carte absente de la collection : grisee, l'ajout la revele */
.mtg-card--muted .mtg-card__frame img { filter: grayscale(1) brightness(0.5); }
.mtg-card--muted:hover .mtg-card__frame img { filter: grayscale(0.4) brightness(0.8); }

.mtg-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
  background: linear-gradient(160deg, var(--surface-2), var(--bg-sunken));
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* Comptes empiles a droite, sous le coin superieur : c'est la que la carte
   imprime son cout de mana, que la pastille masquait entierement. */
.mtg-card__counts {
  position: absolute;
  top: 15%; right: 6px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}

/* Quatre ecrans posent une pastille seule, hors du groupe : elle garde alors
   son positionnement absolu. Dans le groupe, c'est lui qui place l'ensemble. */
.mtg-card__frame > .mtg-card__qty {
  position: absolute;
  top: 15%; right: 6px;
}

.mtg-card__counts .mtg-card__qty { position: relative; top: auto; right: auto; }

.mtg-card__qty {
  position: absolute;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--overlay);
  border: 1px solid var(--line-strong);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

/* Exemplaires libres : distingues du total par la couleur d'accent. */
.mtg-card__qty--free {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-inverse);
}

.mtg-card__badges {
  position: absolute;
  top: 6px; left: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.mtg-card__foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}

.mtg-card__name {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mtg-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-3);
  /* Une note longue — deux noms de commandants, par exemple — poussait le prix
     hors de la vignette, et la page entiere debordait sur telephone. */
  min-width: 0;
}

.mtg-card__meta > :not(.mtg-card__price) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.mtg-card__price { margin-left: auto; flex-shrink: 0; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Vendre / acheter, sous la vignette */
.mtg-card__market { display: flex; gap: 4px; margin-top: 6px; }
.mtg-card__market .btn { flex: 1; padding: 5px 6px; justify-content: center; }

/* Actions au survol */
/* Ajouter et retirer un exemplaire, sous la carte. Ces boutons etaient poses
   sur l'illustration et n'apparaissaient qu'au survol : on ne savait pas
   qu'ils existaient, et ils masquaient l'art quand ils se montraient. */
.mtg-card__ops { display: flex; align-items: center; gap: var(--sp-1); margin-top: 4px; }

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: var(--overlay);
  overflow: hidden;
  backdrop-filter: blur(4px);
}

.stepper button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  color: var(--text-2);
  font-size: var(--text-base);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.stepper button:hover { background: var(--surface-2); color: var(--text); }
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }

.stepper__value {
  min-width: 26px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ═══ Listes ═════════════════════════════════════════════════════════════ */

.rows { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur-fast) var(--ease);
}

.row:last-child { border-bottom: none; }
.row:hover { background: var(--surface); }

.row__thumb {
  width: 38px;
  flex-shrink: 0;
  aspect-ratio: var(--card-ratio);
  border-radius: 3px;
  object-fit: cover;
  background: var(--surface-2);
}

.row__main { min-width: 0; flex: 1; }
.row__title { font-size: var(--text-sm); font-weight: 500; }
.row__sub { font-size: var(--text-xs); color: var(--text-3); }
.row__aside { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }

/* ═══ Badges et pastilles ════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.badge--foil {
  border-color: transparent;
  color: #1A1520;
  font-weight: 600;
  background: linear-gradient(110deg, #F0C4E8, #C4E4F0 30%, #F0E8C4 60%, #C8F0D8);
}

.badge--ok     { border-color: rgba(107, 201, 138, 0.35); background: var(--ok-wash); color: var(--ok); }
.badge--warn   { border-color: var(--line-accent); background: var(--warn-wash); color: var(--accent); }
.badge--danger { border-color: rgba(229, 105, 94, 0.35); background: var(--danger-wash); color: var(--danger); }
.badge--info   { border-color: rgba(123, 176, 232, 0.35); background: var(--info-wash); color: var(--info); }

.badge--common   { color: var(--rarity-common); }
.badge--uncommon { color: var(--rarity-uncommon); }
.badge--rare     { color: var(--rarity-rare);  border-color: rgba(217, 190, 114, 0.3); }
.badge--mythic   { color: var(--rarity-mythic); border-color: rgba(224, 138, 76, 0.3); }

/* Symboles de couleur */
.pips { display: inline-flex; gap: 3px; align-items: center; }

/* ── Fiche detaillee d'une carte ──────────────────────────────────────────── */

/* Le titre d'une carte ouvre sa fiche, partout ou il parait. */
.mtg-card__name:not([data-no-detail]),
.deck-line__name { cursor: pointer; }
.mtg-card__name:not([data-no-detail]):hover,
.deck-line__name:hover { text-decoration: underline; }

.card-detail { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.card-detail__art { width: 236px; flex: none; display: flex; flex-direction: column; gap: 4px; }
.card-detail__art img { width: 100%; border-radius: var(--r-md); display: block; }
.card-detail__info {
  flex: 1; min-width: 260px;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.card-detail__head { display: flex; align-items: center; gap: var(--sp-2); }
.card-detail__oracle {
  font-size: var(--text-sm); line-height: 1.55; color: var(--text-2);
  white-space: pre-line;
}
.card-detail__tags,
.card-detail__market { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.card-detail__mine {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: baseline;
  font-size: var(--text-sm);
}
.card-detail__mine a { color: var(--accent); }

.card-detail__editions { margin-top: var(--sp-5); }
/* Une carte peut compter plus de cent editions : la grille defile pour elle. */
.editions {
  margin-top: var(--sp-2);
  max-height: 62vh; overflow-y: auto;
  padding-right: var(--sp-2);
}
.editions .mtg-card__meta { justify-content: space-between; gap: var(--sp-2); }
/* L'edition la moins chere fixe le prix de reference : elle se repere. */
.editions .is-mine .mtg-card__frame {
  outline: 2px solid var(--ok); outline-offset: 2px; border-radius: var(--r-md);
}
.editions [data-pick] { cursor: pointer; }
.editions .is-cheapest .mtg-card__frame {
  outline: 2px solid var(--info); outline-offset: 2px; border-radius: var(--r-md);
}

/* Cout de mana, en jetons */
/* ── Courbe et repartition du mana, communes a tous les ecrans ───────────── */

/* La courbe et le cout moyen qui la commente ne se separent pas : c'est le
   bloc qui porte desormais la largeur, la courbe remplissant sa premiere
   ligne. */
.curve-block {
  display: flex; flex-direction: column; gap: 6px;
  /* Il prend la largeur qu'on lui laisse : dans un bandeau, une courbe de
     190 px se lisait mal a cote des chiffres. */
  flex: 1 1 260px; min-width: 240px; max-width: 460px;
}
.curve {
  display: flex; align-items: stretch; gap: 6px;
  height: var(--curve-h, 40px);
  width: 100%; min-width: 0;
}
.curve__bar {
  flex: 1; height: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; min-width: 0;
}
/* La piste occupe ce qui reste une fois la part et le cout poses ; la barre s'y
   dresse en proportion. Sans elle, la barre etait un element flex parmi les
   autres : elle se laissait comprimer et toutes finissaient a la meme hauteur. */
.curve__track {
  flex: 1; position: relative; min-height: 8px;
  border-bottom: 1px solid var(--line);
}
.curve__fill {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
/* Le repere de la courbe moyenne des decks du meme commandant : un trait pose
   a la hauteur de leur part, que la barre depasse ou non. Il flotte au-dessus
   du remplissage sans jamais le masquer. */
.curve__ref {
  position: absolute; left: -1px; right: -1px; height: 0;
  border-top: 2px dashed var(--text-3);
  opacity: 0.75; pointer-events: none;
}
/* La part et le cout se centrent sur leur barre : la colonne est etiree, sans
   quoi les deux se collaient a gauche. */
.curve__pct, .curve__label {
  font-size: 10px; color: var(--text-3); line-height: 1.1; text-align: center;
}
.curve__pct { min-height: 11px; }

/* Le cout moyen, sous la courbe : un chiffre, puis sa comparaison. */
.curve-avg {
  display: flex; align-items: baseline; gap: var(--sp-2, 8px);
  flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-3);
  min-width: 0;
}
.curve-avg__label { text-transform: uppercase; letter-spacing: 0.06em; }
.curve-avg__value { font-size: var(--text-sm); color: var(--text-1); }
.curve-avg__ref {
  /* Le nom d'un commandant — deux noms, pour une paire — ne doit pas pousser
     la courbe a s'elargir. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.curve-avg__ref b { color: var(--text-2); font-weight: 600; }
/* Le meme trait que sur les barres, en tete de la comparaison : il dit de quoi
   sont faits les pointilles de la courbe, sans legende a part. */
.curve-avg__key {
  display: inline-block; width: 14px; vertical-align: middle;
  border-top: 2px dashed var(--text-3); opacity: 0.75;
}
.curve-avg__delta { white-space: nowrap; }

.mana-block { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap; }

/* Bandeau en trois colonnes : ce qu'est le deck, sa courbe, ses couleurs. */
.hero__cols {
  /* Les colonnes s'etirent sur la hauteur de la ligne, et seule la courbe s'en
     sert : c'est cette hauteur qui porte toute son information. Le texte et
     les donnees restent centres, sinon ils flotteraient en haut d'un bandeau
     dont la courbe fixe desormais la hauteur. */
  display: grid; gap: var(--sp-5) var(--sp-8); align-items: stretch;
  /* La derniere colonne se limite a son contenu : etiree, elle laissait un
     grand vide a droite des symboles. Les deux colonnes de droite se centrent
     dans la place qui leur revient. */
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr) max-content;
}
/* La courbe s'etire sur sa colonne ; les couleurs, elles, tiennent leur
   largeur propre — centrer la courbe la ramenait a sa largeur minimale. */
.hero__cols > :nth-child(1) { align-self: center; }
.hero__cols > :nth-child(3) { justify-self: center; align-self: center; }
.hero__cols .mana-rows { margin-left: 0; }

/* La colonne de gauche empilait cinq elements sans respiration : l'accroche
   touchait le titre, et les boutons les chiffres. Un rythme vertical les
   separe, plus large la ou le regard change de nature d'information. */
.hero__cols > .grow {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--sp-1);
}
.hero__cols > .grow .hero__stats { margin-top: var(--sp-3); }
.hero__cols > .grow .hero__actions { margin-top: var(--sp-4); align-self: stretch; }

/* La colonne du milieu porte la courbe et rien d'autre : elle la laisse
   remplir la hauteur qu'on lui a donnee, et la largeur aussi — le plafond de
   460 px laissait un vide a sa droite sur grand ecran. */
.hero__cols > :nth-child(2) { display: flex; min-height: 0; }
.hero__cols .curve-block { flex: 1; max-width: none; justify-content: center; }
/* Dans un panneau, ces chiffres se posent sur une surface unie. Dans un
   bandeau, l'illustration passe dessous et une zone claire les effacait : une
   ombre d'un pixel leur rend un fond, sans les alourdir. */
.hero__cols .curve__pct, .hero__cols .curve__label {
  color: var(--text-2);
  text-shadow: 0 1px 2px var(--bg);
}
.hero__cols .curve {
  height: auto; flex: 1; min-height: var(--curve-h, 40px);
  /* Passe cette hauteur, la courbe ne dit rien de plus et se met a dominer le
     bandeau : au-dela elle se centre dans la place qui lui reste. */
  max-height: 240px;
}
/* Faute de largeur pour trois colonnes, les donnees se rangent sous le titre
   et la courbe garde sa colonne sur les deux lignes. Posees en travers du
   bandeau, elles laissaient un vide a gauche et ajoutaient leur hauteur a
   celle de la colonne de gauche. */
@media (max-width: 1200px) {
  .hero__cols { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); }
  /* Les places sont donnees explicitement : sans cela, la courbe etendue sur
     deux lignes prenait la premiere colonne et renvoyait le titre a droite. */
  .hero__cols > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .hero__cols > :nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
  .hero__cols > :nth-child(3) {
    grid-column: 1; grid-row: 2; justify-self: start; align-self: start;
  }
}
@media (max-width: 860px) {
  .hero__cols { grid-template-columns: 1fr; }
  .hero__cols > :nth-child(1),
  .hero__cols > :nth-child(2),
  .hero__cols > :nth-child(3) { grid-column: auto; grid-row: auto; }
  .hero__cols > :nth-child(3) { justify-self: start; }
}
.mana-rows {
  display: flex; flex-direction: column; gap: var(--sp-1, 4px);
  margin-left: var(--sp-4);   /* respire a cote de la courbe */
}
.mana-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.mana-row__label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); min-width: 82px;
}
.mana-count {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-base); font-weight: 600;
}
.mana-count .pip { width: 14px; height: 14px; }
.mana-count .dim { font-weight: 400; }

.mana-cost { display: inline-flex; gap: 2px; }
.mana-token {
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--mtg-c); color: #1b1b1b;
  font-size: 11px; font-weight: 700;
}
.mana-token--W { background: var(--mtg-w); }
.mana-token--U { background: var(--mtg-u); }
.mana-token--B { background: var(--mtg-b); color: #e8e8e8; }
.mana-token--R { background: var(--mtg-r); }
.mana-token--G { background: var(--mtg-g); }

/* ── Vignette unique : possession, reglage, marche ───────────────────────── */

.mtg-card__frame { cursor: pointer; }
.mtg-card__owned {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--text-2);
}
.mtg-card__ops { display: flex; align-items: center; gap: var(--sp-2); }
/* Les boutons tombent au bas de la vignette : d'une carte a l'autre, ils
   s'alignent alors sur une meme ligne, quelle que soit la longueur du titre. */
.mtg-card__foot { flex: 1; }
.mtg-card__bottom {
  margin-top: auto; padding-top: var(--sp-2);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.mtg-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.mtg-card__actions .btn,
.mtg-card__market .btn { flex: 1; justify-content: center; }
.mtg-card__actions .btn.is-done { border-color: var(--line-accent); color: var(--accent); }

@media (max-width: 860px) {
  .card-grid { --card-min: 152px; }
}

.pip {
  width: 13px; height: 13px;
  border-radius: var(--r-full);
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.pip--W { background: var(--mtg-w); }
.pip--U { background: var(--mtg-u); }
.pip--B { background: var(--mtg-b); }
.pip--R { background: var(--mtg-r); }
.pip--G { background: var(--mtg-g); }
.pip--C { background: var(--mtg-c); }

/* ═══ Filtres ════════════════════════════════════════════════════════════ */

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.toolbar__search { flex: 1 1 260px; min-width: 200px; }
.toolbar__spacer { flex: 1; }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px 11px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.chip:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
/* Un filtre sans aucune carte reste visible plutot que de disparaitre : la
   liste des familles ne bouge pas d'un ecran a l'autre, et l'infobulle dit
   pourquoi celle-ci est vide. */
.chip:disabled { opacity: 0.45; cursor: not-allowed; }

.chip[aria-pressed="true"] {
  background: var(--accent-wash);
  border-color: var(--line-accent);
  color: var(--accent-bright);
}

/* Une barre de filtres nommee : l'intitule dit sur quoi portent les chips,
   que des chiffres seuls laisseraient deviner. */
.toolbar--filter { align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filter-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); white-space: nowrap;
}

/* Filtres poses sur la ligne du titre : ils suivent le titre et laissent les
   actions a droite. Faute de largeur, ils passent a la ligne en bloc plutot
   que de comprimer les boutons. */
.panel__head--filters { flex-wrap: wrap; }
.panel__head--filters > .grow {
  display: flex; gap: var(--sp-3);
  /* Au plus haut : sur une ligne, l'alignement ne se voit pas ; des que les
     chips passent sur plusieurs lignes, l'intitule se retrouverait sinon
     centre au milieu d'elles. */
  align-items: flex-start;
  flex: 1 1 auto; min-width: 0;
}
.panel__head--filters .filter-label { line-height: 29px; }   /* hauteur d'un chip */
/* Faute de largeur, l'intitule prend sa propre ligne au-dessus des chips. */
@media (max-width: 720px) {
  .panel__head--filters > .grow { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .panel__head--filters .filter-label { line-height: 1.2; }
}

.chip__count { font-size: var(--text-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count { color: var(--accent); }

.chip--color { padding: 5px 9px; }

/* ═══ Modales et tiroirs ═════════════════════════════════════════════════ */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(3, 3, 6, 0.78);
  backdrop-filter: blur(6px);
  animation: fade var(--dur) var(--ease);
}

.modal__box {
  width: min(560px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  animation: rise var(--dur) var(--ease-out);
  overflow: hidden;
}

.modal__box--wide { width: min(920px, 100%); }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.modal__body { padding: var(--sp-5); overflow-y: auto; flex: 1; }

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ═══ Notifications ══════════════════════════════════════════════════════ */

.toasts {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  max-width: 380px;
  pointer-events: auto;
  animation: slide-in var(--dur) var(--ease-out);
}

.toast--ok     { border-color: rgba(107, 201, 138, 0.4); }
.toast--error  { border-color: rgba(229, 105, 94, 0.4); }
.toast__mark { width: 6px; height: 6px; border-radius: var(--r-full); flex-shrink: 0; background: var(--accent); }
.toast--ok .toast__mark { background: var(--ok); }
.toast--error .toast__mark { background: var(--danger); }
.toast--leaving { animation: slide-out var(--dur) var(--ease) forwards; }

@keyframes slide-in  { from { opacity: 0; transform: translateX(20px); } }
@keyframes slide-out { to   { opacity: 0; transform: translateX(20px); } }

/* ═══ Etats ══════════════════════════════════════════════════════════════ */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--text-2);
}

.empty__mark {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-3);
}

.empty__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text); }
.empty__text { max-width: 440px; font-size: var(--text-sm); }

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

.skeleton--card { aspect-ratio: var(--card-ratio); border-radius: 4.6% / 3.3%; }
.skeleton--text { height: 12px; }

@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}

.spinner--lg { width: 34px; height: 34px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Ecran de depart d'un outil ═════════════════════════════════════════ */
/* Les pages d'analyse s'ouvraient sur un titre, un menu deroulant et un vide.
   Ce bloc occupe l'attente : il explique la marche a suivre, ce que l'outil
   regarde, et propose de demarrer directement sur l'un des decks. */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.intro__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-5);
}

.intro__panel--soft { background: var(--surface); }

.intro__head { display: flex; gap: var(--sp-4); align-items: flex-start; }

.intro__mark {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid var(--line-accent);
}
.intro__mark svg { width: 20px; height: 20px; }

.intro__title { font-family: var(--font-display); font-size: var(--text-xl); }

/* Les trois temps de l'outil, numerotes. */
.walk { display: flex; flex-direction: column; gap: var(--sp-4); }

.walk__step { display: flex; gap: var(--sp-4); align-items: flex-start; }

.walk__index {
  width: 26px; height: 26px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--line-accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: var(--text-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.walk__title { font-size: var(--text-sm); font-weight: 600; }
.walk__text  { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-normal); }

/* Ce que l'outil prend en compte : une liste cochee, plus affirmative qu'une
   suite de puces. */
.checks { display: flex; flex-direction: column; gap: var(--sp-3); }

.checks__item { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checks__item svg {
  width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px;
  color: var(--accent);
}
.checks__item > span { font-size: var(--text-sm); color: var(--text-2); line-height: var(--leading-normal); }
.checks__item b { color: var(--text); font-weight: 600; }

/* Les limites de la lecture : dites une fois, a voix basse. */
.note {
  border-left: 2px solid var(--line-accent);
  padding-left: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-normal);
}
.note b { color: var(--text); font-weight: 600; }

/* Bande de decks : demarrer en un clic, sans passer par le menu deroulant. */
.deck-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--sp-3);
}

.deck-chip {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 108px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.deck-chip:hover { border-color: var(--line-accent); transform: translateY(-2px); }

.deck-chip__art {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center 26%;
  opacity: 0.42;
  transition: opacity var(--dur) var(--ease);
}
.deck-chip:hover .deck-chip__art { opacity: 0.58; }

.deck-chip::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, var(--bg-raised) 20%, rgba(14, 14, 21, 0.5) 100%);
}

.deck-chip__name { font-size: var(--text-sm); font-weight: 600; }
.deck-chip__meta { font-size: var(--text-xs); color: var(--text-3); }

/* Legende de lecture posee au-dessus d'une grille de resultats. */
.legend {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.legend__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--text-2); }
.legend__item b { color: var(--text); font-weight: 600; }
.legend__item svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

@media (max-width: 1080px) {
  .intro { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .intro__panel { padding: var(--sp-5) var(--sp-4); }
  .deck-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ═══ Utilitaires ════════════════════════════════════════════════════════ */

/* L'attribut hidden vient de la feuille du navigateur : n'importe quelle
   classe posant un display l'emporte sur lui. Sans cette regle, masquer un
   element .stack, .chips ou .modes ne produisait aucun effet. */
[hidden] { display: none !important; }

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }
.cluster { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cluster-2 { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.grow    { flex: 1; min-width: 0; }
.center  { display: grid; place-items: center; }
.hidden  { display: none !important; }
.scroll-x { overflow-x: auto; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }

.divider { height: 1px; background: var(--line); border: none; margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.fade-in { animation: fade var(--dur-slow) var(--ease); }

/* ═══ Responsive ═════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .content { padding: var(--sp-6) var(--sp-5) var(--sp-12); gap: var(--sp-6); }
  .topbar { padding: 0 var(--sp-5); }
  .hero__body { padding: var(--sp-8) var(--sp-6) var(--sp-6); }
  .hero__title { font-size: var(--text-3xl); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }

  /* La navigation laterale devient un tiroir */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 268px;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
    box-shadow: none;
  }

  .sidebar[data-open="true"] { transform: none; box-shadow: var(--shadow-lg); }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    background: rgba(3, 3, 6, 0.6);
    backdrop-filter: blur(2px);
    animation: fade var(--dur) var(--ease);
  }

  .topbar__burger { display: inline-flex; }

  .content { padding: var(--sp-5) var(--sp-4) calc(var(--bottombar-h) + var(--sp-10)); }

  /* Barre d'onglets, avec l'ajout de cartes sous le pouce */
  .bottombar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-nav);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    height: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-sunken) 94%, transparent);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }

  .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-3);
    transition: color var(--dur-fast) var(--ease);
  }

  .tab svg { width: 20px; height: 20px; }
  .tab[aria-current="page"] { color: var(--accent); }

  .tab--add { position: relative; }

  .tab--add span {
    position: absolute;
    top: -18px;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--r-full);
    background: linear-gradient(160deg, var(--accent-bright), var(--accent));
    color: var(--text-inverse);
    box-shadow: 0 6px 20px rgba(224, 169, 74, 0.4);
    border: 3px solid var(--bg);
  }

  .tab--add span svg { width: 22px; height: 22px; }
  .tab--add em { margin-top: 30px; font-style: normal; }

  .hero__title { font-size: var(--text-2xl); }
  .hero__body { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .card-grid { --card-min: 124px; gap: var(--sp-3); }
  .card-grid--sm { --card-min: 96px; }
  .toasts { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--bottombar-h) + var(--sp-4)); }
  .toast { max-width: none; }
  .modal { align-items: flex-end; padding: 0; }
  .modal__box { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .row { padding: var(--sp-3) var(--sp-4); }
  .panel__body { padding: var(--sp-4); }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .card-grid { --card-min: 108px; }
  .hero__title { font-size: var(--text-xl); }
}

@media print {
  .sidebar, .bottombar, .topbar, .toasts { display: none !important; }
  body { background: #fff; color: #000; }
}