/* ══════════════════════════════════════════════════════════════════════════
   TALLY — feuille de style unique.

   Les couleurs viennent de l'icône du Mac : son fond aubergine (#1D192B) est
   celui des cartes, son violet (#B69DF8) est la voix de la marque. L'app et son
   icône sont un seul objet.

   Quatre couleurs, quatre métiers, et aucune n'en fait deux :
     · violet — c'est Tally qui parle (boutons, focus, onglet actif, logo) ;
     · rouge  — ça tourne, c'est prioritaire, ou c'est en retard ;
     · or     — ce que tu as gagné (série, badges) ;
     · vert   — c'est livré.
   Rien d'autre n'a le droit d'être coloré.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── La police ────────────────────────────────────────────────────────────
   Rubik, en variable : une seule requête de 45 Ko couvre toutes les graisses de
   300 à 900. Réduite au latin — Rubik traîne du cyrillique, de l'hébreu et de
   l'arabe dont le français n'a rien à faire, et une créatrice en 4G les paierait
   au chargement.

   Les colonnes de chiffres gardent une mono : les chiffres proportionnels ne
   s'alignent pas, et une colonne qui ne s'aligne pas ne se compare plus d'un
   coup d'œil. */
@font-face {
  font-family: Rubik;
  font-style: normal;
  font-weight: 300 900;                 /* variable : tout est dans un seul fichier */
  font-display: swap;
  src: url("fonts/rubik.woff2") format("woff2");
}

:root {
  /* Encre — reprise de l'icône, au pixel près. */
  --ink:      #16121F;   /* le fond de la page — un cran sous l'icône */
  --ink-2:    #1D192B;   /* la couleur de l'icône : les surfaces posées dessus */
  --ink-3:    #262133;   /* la même, survolée */
  --ink-4:    #302A45;   /* la même, enfoncée (elle aussi vient de l'icône) */
  --line:     #3A3350;
  --line-2:   #4F378B;   /* le violet d'ombre de l'icône */

  /* Craie */
  --chalk:    #F2ECFA;
  --dim:      #9C90AD;
  --dim-2:    #6E6480;

  /* La marque — le violet du « T » de l'icône. */
  --brand:      #B69DF8;
  --brand-2:    #C9B4FF;
  --brand-soft: rgba(182, 157, 248, .14);

  /* Les trois signaux. */
  --tally:    #F5455C;   /* ça tourne · prioritaire · en retard */
  --gold:     #FFC24B;   /* ce que tu as gagné */
  --go:       #3ED598;   /* c'est livré */

  --tally-soft: rgba(245, 69, 92, .14);
  --gold-soft:  rgba(255, 194, 75, .14);
  --go-soft:    rgba(62, 213, 152, .14);

  --r-card: 16px;
  --r-btn:  11px;
  --r-pill: 999px;

  --shadow:   0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 18px 40px -16px rgba(0,0,0,.6);

  /* Mouvement. Une seule famille de courbes, tenue partout. */
  --ease:     cubic-bezier(.2, 0, 0, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --pop:      cubic-bezier(.34, 1.56, .64, 1);   /* la seule courbe qui rebondit,
                                                    réservée aux récompenses */
  --fast: 120ms;
  --med:  220ms;
  --slow: 420ms;

  --font: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  min-height: 100dvh;
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: manipulation;               /* pas de délai de 300 ms au tap */
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 520px at 50% -12%, rgba(182,157,248,.07), transparent 70%),
    radial-gradient(760px 420px at 88% 6%, rgba(245,69,92,.04), transparent 70%);
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
  text-wrap: balance; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Aucun soulignement, nulle part. Un lien se reconnaît à sa couleur, à sa forme
   et à ce qu'il fait sous le curseur — pas à un trait qui coupe les jambages. */
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

/* Focus : visible, toujours, et jamais retiré sans remplaçant. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--brand-soft); color: var(--chalk); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px;
  border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* ── La barre de défilement de la page, toujours là ────────────────────────
   Sur une page qui tient dans l'écran, la barre disparaît et rend ses 10 px à
   la fenêtre. Le contenu étant centré (.main a un `margin: 0 auto`), tout
   glisse alors de 5 px : passer de Production à Médias fait sauter les
   colonnes et l'en-tête. `scroll` la garde toujours — sillon compris, à la
   même largeur : sur une page courte on voit une barre sans curseur, pas un
   vide qui n'appartient à rien.

   Sur `body`, et surtout PAS sur `html` — mesuré, pas supposé : `html` en
   `overflow-y: scroll` devient lui-même conteneur de défilement, le
   `overflow-x: hidden` du body cesse alors de se propager à la fenêtre, body
   devient conteneur à son tour, et l'en-tête collant s'accroche à un scrollport
   qui ne défile jamais — il repart vers le haut au premier coup de molette.
   (`scrollbar-gutter: stable` serait le bon outil ; il ne fait rien ici.) */
body { overflow-y: scroll; }
body::-webkit-scrollbar-track { background: var(--ink-2); }
/* Le curseur se détache du sillon par une marge de 3 px, faite d'une bordure de
   la couleur du fond. Ce fond n'est plus celui de la page ici : sans ça, le
   curseur traînerait un halo sombre au milieu du sillon. */
body::-webkit-scrollbar-thumb { border-color: var(--ink-2); }

/* ══════════════════════════════════════════════════════════════════════════
   LES ICÔNES — et leur alignement.

   Une icône est une image en ligne : par défaut elle s'assied sur la ligne de
   base, comme une lettre, et elle dépasse donc sous le texte d'un ou deux
   pixels. C'est le décalage qu'on voit partout et qu'on n'arrive jamais à
   nommer. Deux règles le suppriment définitivement :
     · le SVG devient un bloc (plus de ligne de base à respecter) ;
     · le conteneur qui le porte devient une boîte flex centrée verticalement.
   Résultat : une icône est toujours centrée sur la hauteur de son texte, quel
   que soit l'endroit où on la met.
   ══════════════════════════════════════════════════════════════════════════ */
.ico {
  width: 20px; height: 20px;
  flex: none;
  display: block;
  fill: currentColor;
  vertical-align: middle;                 /* filet de sécurité hors contexte flex */
  transition: transform var(--med) var(--ease-out);
}
:where(span, a, button, div, li, td, th):has(> .ico) {
  display: inline-flex;
  align-items: center;
}
/* Les conteneurs qui doivent rester des blocs, eux, gardent leur affichage. */
.btn:has(> .ico), .nav-item:has(> .ico) { display: inline-flex; }
.tile:has(.ico), .card:has(.ico), .empty:has(.ico), .task:has(.ico),
.day-cell:has(.ico), .lib-day:has(.ico) { display: revert; }

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

.skip {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--brand); color: #1D192B; font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--med) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════════════
   MOUVEMENT
   On n'anime que transform et opacity. Jamais top/left/width — ça repeint la
   page et ça saccade sur un téléphone. Jamais `transition: all` : on nomme ce
   qui bouge.
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes rise     { from { opacity: 0; transform: translateY(14px); }
                      to   { opacity: 1; transform: none; } }
@keyframes rise-sm  { from { opacity: 0; transform: translateY(7px); }
                      to   { opacity: 1; transform: none; } }
@keyframes pop-in   { from { opacity: 0; transform: scale(.9); }
                      to   { opacity: 1; transform: scale(1); } }
@keyframes fade     { from { opacity: 0; } to { opacity: 1; } }

/* La lampe rouge. Elle respire — c'est ce qui la fait voir du coin de l'œil. */
@keyframes breathe {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .5; transform: scale(.86); }
}
@keyframes ring {
  from { opacity: .5; transform: scale(1); }
  to   { opacity: 0;  transform: scale(2.6); }
}
/* La récompense : la seule chose qui a le droit de rebondir. */
@keyframes reward {
  0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes shimmer {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%)  skewX(-18deg); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Entrée d'écran : les enfants montent l'un après l'autre. Le décalage vient
   d'une variable, pas de dix keyframes dupliquées. */
.stagger > * {
  animation: rise var(--slow) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* Quelqu'un qui a demandé moins de mouvement en a moins. Ce n'est pas une
   option : le vertige, ça se respecte. Les états (survol, focus) restent — ce
   sont des informations, pas des effets. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOUTONS — tous réagissent au survol, au doigt et au clavier.
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-btn);
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--chalk);
  font-weight: 600; font-size: 14px;
  white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out),
              opacity var(--med) var(--ease-out);
}
.btn:hover { background: var(--ink-4); border-color: var(--line-2);
  transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:hover .ico { transform: scale(1.1); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: 60ms; }
.btn:disabled { opacity: .4; pointer-events: none; }

/* Le lustre qui traverse le bouton au survol. On doit le sentir plus que le voir. */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: shimmer 720ms var(--ease-out); }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #1D192B;
  font-weight: 700; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2);
  box-shadow: 0 8px 26px -8px rgba(182,157,248,.55); }

.btn-go { background: var(--go); border-color: var(--go); color: #04301F; font-weight: 700; }
.btn-go:hover { background: #5FE3AC; border-color: #5FE3AC;
  box-shadow: 0 8px 26px -8px rgba(62,213,152,.5); }

.btn-danger:hover { background: var(--tally-soft); border-color: var(--tally);
  color: #FF8A9B; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn-ghost:hover { background: var(--ink-3); color: var(--chalk); border-color: var(--line); }

.btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 13px; }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; }

/* Bouton icône seul. Il porte toujours un aria-label : sans texte, un lecteur
   d'écran n'a rien à lire. */
.btn-ico {
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  background: transparent; border: 1px solid transparent; color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              color var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out);
}
.btn-ico:hover { background: var(--ink-3); color: var(--chalk);
  border-color: var(--line); transform: translateY(-1px); }
.btn-ico:hover .ico { transform: scale(1.14); }
.btn-ico:active { transform: scale(.92); }
.btn-ico:disabled { opacity: .3; pointer-events: none; }
.btn-ico.danger:hover { background: var(--tally-soft); color: #FF8A9B;
  border-color: var(--tally); }

/* ══════════════════════════════════════════════════════════════════════════
   CHAMPS
   ══════════════════════════════════════════════════════════════════════════ */
.field { display: block; margin-bottom: 16px; }
.field > label, .lbl {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2);
  transition: color var(--med) var(--ease-out);
}
.field:focus-within > label { color: var(--brand); }

.input, .select, .area {
  width: 100%;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  color: var(--chalk);
  font-size: 15px;
  transition: border-color var(--med) var(--ease-out),
              background-color var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out);
}
.input:hover, .select:hover, .area:hover { border-color: var(--line-2); background: var(--ink-3); }
.input:focus, .select:focus, .area:focus {
  outline: none; border-color: var(--brand); background: var(--ink-3);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input::placeholder, .area::placeholder { color: var(--dim-2); }
.area { resize: vertical; min-height: 120px; font-family: var(--mono); font-size: 13px;
  line-height: 1.7; }
/* Windows en mode sombre repeint les <select> en blanc si on ne fixe pas les
   deux couleurs à la main. */
.select { background-color: var(--ink-2); color: var(--chalk); cursor: pointer;
  appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%239C90AD'%3E%3Cpath d='M480-345 240-585l43-43 197 198 197-197 43 43-240 239Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  background-size: 20px; }
.select option { background: var(--ink-2); color: var(--chalk); }

.hint { margin-top: 6px; font-size: 12.5px; color: var(--dim-2); line-height: 1.5; }
.err  { margin-top: 6px; font-size: 12.5px; color: #FF8A9B;
  animation: rise-sm var(--med) var(--ease) both; }

/* ══════════════════════════════════════════════════════════════════════════
   SURFACES
   ══════════════════════════════════════════════════════════════════════════ */
.card {
  background: var(--ink-2);
  border-radius: var(--r-card);
  padding: 20px;
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--ink-3); border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              color var(--med) var(--ease-out);
}
.pill .ico { width: 14px; height: 14px; }
.pill-tally { background: var(--tally-soft); border-color: rgba(245,69,92,.4); color: #FF8A9B; }
.pill-gold  { background: var(--gold-soft);  border-color: rgba(255,194,75,.4); color: var(--gold); }
.pill-go    { background: var(--go-soft);    border-color: rgba(62,213,152,.4); color: var(--go); }
.pill-warn  { background: rgba(158,148,178,.12); border-color: var(--line-2); color: var(--dim); }

.empty {
  padding: 56px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-card);
  animation: fade var(--slow) var(--ease) both;
}
.empty .ico { width: 34px; height: 34px; color: var(--dim-2); margin: 0 auto 12px; }
.empty h3 { font-size: 17px; margin-bottom: 6px; }
.empty p { color: var(--dim); font-size: 14px; max-width: 42ch; margin: 0 auto 18px; }

/* La lampe rouge — « ça tourne ». */
.light {
  position: relative; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--tally);
  box-shadow: 0 0 10px rgba(245,69,92,.85);
  animation: breathe 2s var(--ease-out) infinite;
}
.light::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--tally);
  animation: ring 2s var(--ease-out) infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   CHÂSSIS
   ══════════════════════════════════════════════════════════════════════════ */
.app { position: relative; z-index: 1; min-height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(22, 18, 31, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}

/* Les deux commandes du manager, à gauche de son rôle. Elles tiennent dans la
   barre de titre — leurs listes, elles, s'ouvrent sur <body> (voir .pop) :
   .topbar a un backdrop-filter, qui enfermerait dedans tout enfant en
   position: fixed. */
.hdr-tools { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }

/* Le logotype : le « T » de l'icône, et le mot. */
.logo { display: flex; align-items: center; gap: 9px; flex: none;
  font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.logo svg { width: 22px; height: 22px; display: block; fill: var(--brand);
  transition: transform var(--med) var(--pop); }
.logo:hover svg { transform: scale(1.1) rotate(-4deg); }

.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px;
  color: var(--dim); font-weight: 600; font-size: 14px;
  position: relative;
  transition: color var(--med) var(--ease-out),
              background-color var(--med) var(--ease-out),
              transform var(--fast) var(--ease-out);
}
.nav-item:hover { color: var(--chalk); background: var(--ink-2); transform: translateY(-1px); }
.nav-item:hover .ico { transform: scale(1.12); }
/* Le fond, la couleur du texte et le relief disent où l'on est. Pas de barre
   sous l'onglet : ce serait un soulignement, et il n'y en a nulle part
   ailleurs dans Tally. */
.nav-item[aria-current="page"] {
  color: var(--ink); background: var(--brand); font-weight: 600;
  animation: pop-in var(--med) var(--pop) both;
}
.nav-item[aria-current="page"]:hover { color: var(--ink); background: var(--brand); }
/* La pastille de nouveauté, sur l'onglet Production — verte : du nouveau
   contenu à produire. Le retard, lui, se lit déjà sur l'Accueil ; il n'a pas
   besoin de la relancer une deuxième fois ici. */
.nav-dot {
  position: absolute; top: 5px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tally); box-shadow: 0 0 8px rgba(245,69,92,.8);
}
.nav-dot.new { background: var(--go); box-shadow: 0 0 8px rgba(62,213,152,.8); }

.spacer { flex: 1; }

/* Le moteur est en retard sur les fichiers. Rouge, en travers, sous l'en-tête :
   ce n'est pas une information, c'est un obstacle — tant qu'il est là, une
   partie de l'app ment sur ce qu'elle sait faire. */
.stale {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0; padding: 14px 20px;
  background: var(--tally-soft); border-bottom: 1px solid rgba(245, 69, 92, .4);
  color: #FF8A9B; font-size: 13.5px; line-height: 1.5;
}
.stale .ico { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.stale strong { display: block; color: var(--chalk); font-weight: 600; }

.main { padding: 24px 20px 90px; max-width: 1400px; margin: 0 auto; }
.head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px; }
.head h1 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; }
.head p { color: var(--dim); font-size: 14px; margin-top: 3px; }

/* Le titre d'une section et son bouton de création, sur la même ligne. */
.sec-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; }
.sec-h.first { margin-top: 0; }
.sec-h .eyebrow { margin: 0; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2);
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════════════════
   L'ACCUEIL — ce qu'elle voit en arrivant, et le bouton qui l'emmène travailler.
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  border: 1px solid var(--line); border-radius: 20px;
  background:
    radial-gradient(900px 340px at 12% -30%, rgba(182,157,248,.12), transparent 70%),
    var(--ink-2);
  padding: 34px;
  margin-bottom: 22px;
  animation: rise var(--slow) var(--ease) both;
}
.hero-n {
  font-size: clamp(38px, 7vw, 58px); font-weight: 700; line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.hero-n.go { color: var(--go); }
.hero-sub { color: var(--dim); font-size: 15px; margin-bottom: 24px; max-width: 52ch; }
.hero-sub b { color: var(--chalk); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ══════════════════════════════════════════════════════════════════════════
   COMPTEURS
   ══════════════════════════════════════════════════════════════════════════ */
.tiles { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 24px; }

.tile {
  background: var(--ink-2);
  border-radius: var(--r-card); padding: 18px;
  position: relative; overflow: hidden;
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tile:hover .tile-ico { transform: scale(1.12) rotate(-6deg); color: var(--chalk); }
.tile-ico { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px;
  color: var(--dim-2);
  transition: transform var(--med) var(--pop), color var(--med) var(--ease-out); }
.tile-k { font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2);
  margin-bottom: 8px; }
.tile-v { font-weight: 700; font-size: 32px; line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.tile-s { margin-top: 7px; font-size: 12.5px; color: var(--dim); }
.tile-gold  .tile-v, .tile-gold .tile-ico  { color: var(--gold); }
.tile-go    .tile-v { color: var(--go); }
.tile-tally .tile-v { color: var(--tally); }

.chart rect { transition: opacity var(--med) var(--ease-out); }
.chart:hover rect { opacity: .45; }
.chart rect:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   LA BARRE DE JOUR — flèche gauche, la date, flèche droite, le calendrier.
   Elle est le cœur de la navigation : la créatrice remonte le temps avec elle.
   ══════════════════════════════════════════════════════════════════════════ */
/* La barre de période : deux flèches, ce qu'on regarde, et où ça en est. Pleine
   largeur, au-dessus de la file : les flèches se retrouvent aux deux bords, là
   où le pouce les cherche, et la date reste au milieu de l'écran. */
.daybar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; margin-bottom: 18px;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 14px;
  position: relative;
  transition: border-color var(--med) var(--ease-out), background-color var(--med) var(--ease-out);
}
/* Le seul repère "suis-je sur aujourd'hui ou dans le passé" : le même accent
   violet que .day-cell.today dans le calendrier — pas une couleur de plus. */
.daybar.is-today { border-color: var(--brand); background: var(--brand-soft); }
.daybar-d { flex: 1; min-width: 0; text-align: center; }
/* La première lettre, pas chaque mot : `capitalize` servait à relever le « a »
   d'« aujourd'hui », mais il écrivait « 30 Jours » dès que la barre s'est mise
   à afficher le nom d'une période. */
.daybar-d strong { display: block; font-weight: 600; font-size: 15px; }
.daybar-d strong::first-letter { text-transform: uppercase; }
.daybar-d span { font-family: var(--mono); font-size: 11px; color: var(--dim-2);
  letter-spacing: .06em; text-transform: uppercase; }
.daybar .btn-ico { width: 40px; height: 40px; }
/* Le jour d'après n'existe pas encore : on ne va pas dans le futur. */
.daybar .btn-ico:disabled { opacity: .25; }

/* Le calendrier, en surplomb. */
.cal {
  position: absolute; top: calc(100% + 8px); right: 8px; z-index: 50;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 16px; box-shadow: var(--shadow-2);
  animation: pop-in var(--med) var(--pop) both;
}
.cal-h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal-h strong { flex: 1; text-align: center; font-weight: 600; font-size: 14px;
  text-transform: capitalize; }
.cal-h .btn-ico { width: 30px; height: 30px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow {
  text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--dim-2); text-transform: uppercase; padding-bottom: 6px;
}
.day-cell {
  aspect-ratio: 1; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-size: 13px; font-weight: 500; color: var(--dim);
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              color var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out);
}
.day-cell:hover { background: var(--ink-4); color: var(--chalk); transform: scale(1.07); }
.day-cell:disabled { opacity: .25; pointer-events: none; }
.day-cell.sel { background: var(--brand); color: #1D192B; font-weight: 700; }
.day-cell.today { border-color: var(--brand); color: var(--chalk); }
.day-cell.sel.today { border-color: var(--brand); }
/* La pastille sous le chiffre dit ce qu'a été la journée, sans un mot. */
.cal-dot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }
.cal-dot.done { background: var(--go); }
.cal-dot.late { background: var(--tally); }
.day-cell.sel .cal-dot { background: #1D192B; }
.cal-legend { display: flex; gap: 12px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line); flex-wrap: wrap; }
.cal-legend span { display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--dim-2); }

/* ══════════════════════════════════════════════════════════════════════════
   LA FILE
   ══════════════════════════════════════════════════════════════════════════ */
.queue { display: flex; flex-direction: column; gap: 8px; }

.task {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--ink-2);
  border: 1px solid transparent;
  border-radius: 13px;
  cursor: pointer; text-align: left; width: 100%;
  position: relative;
  animation: rise-sm var(--med) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 28ms);
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out),
              opacity var(--med) var(--ease-out);
}
.task:hover { background: var(--ink-3); transform: translateX(3px); box-shadow: var(--shadow); }
.task:active { transform: translateX(1px) scale(.995); }
.task[aria-current="true"] { border-color: var(--brand); background: var(--ink-3); }
.task[aria-current="true"]::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 3px; background: var(--brand);
}
.task.done { opacity: .55; }
.task.done:hover { opacity: .9; }
.task.refused { opacity: .4; }
.task.refused .task-t { text-decoration: line-through;
  text-decoration-color: var(--dim-2); }
/* Le retard reste marqué par une bordure : c'est un signal, pas une surface. */
.task.late { border-color: rgba(245,69,92,.45); }

/* La vignette : un 9:16, parce que c'est la forme de ce qu'on produit. */
.thumb {
  width: 34px; height: 56px; flex: none; border-radius: 7px;
  background: var(--ink-4);
  display: grid; place-items: center; color: var(--dim-2);
  overflow: hidden; position: relative;
  transition: transform var(--med) var(--ease-out);
}
.thumb .ico { width: 16px; height: 16px; }
.task:hover .thumb { transform: scale(1.06); }

.task-b { flex: 1; min-width: 0; }
.task-t { font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-m { display: flex; align-items: center; gap: 7px; margin-top: 3px;
  font-family: var(--mono); font-size: 11px; color: var(--dim-2); }
.task-n { font-family: var(--mono); font-size: 11px; color: var(--dim-2);
  width: 22px; text-align: right; flex: none; font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════
   LE POSTE DE TRAVAIL

   Il n'y a plus de checklist. Elle regarde, elle refait, elle importe. L'import
   termine la tâche — c'est le seul geste qui prouve quelque chose.
   ══════════════════════════════════════════════════════════════════════════ */
.stage { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .stage { grid-template-columns: 1fr; } }

/* La station : le lecteur à gauche, ce qu'elle a à faire à droite. Sur un
   téléphone, l'un sous l'autre — le lecteur d'abord, on regarde avant de
   refaire. */
.station { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .station { grid-template-columns: 1fr; } }

/* Les grilles, toutes ici. Écrites dans le JS en style inline, elles gagnaient
   contre les media queries et ne se repliaient plus sur un téléphone. */
.grid { display: grid; gap: 16px; }
.grid-320 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-340 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid-2   { grid-template-columns: 1fr 1fr; gap: 14px; }
.tiles-3  { grid-template-columns: repeat(3, 1fr); }
.tiles-4  { grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 720px) {
  .grid-2, .tiles-3, .tiles-4 { grid-template-columns: repeat(2, 1fr); }
}

.player {
  aspect-ratio: 9 / 16; width: 100%; max-width: 300px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  background: #000;
  position: relative;
  transition: box-shadow var(--med) var(--ease-out);
}
/* Pas de bordure : le noir pur du lecteur contraste déjà, à lui seul, contre
   n'importe quelle autre surface de l'app. */
.player:hover { box-shadow: var(--shadow-2); }
.player iframe, .player video { width: 100%; height: 100%; border: 0; display: block; }
.player-off { width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--dim-2); text-align: center; padding: 20px; }

/* La zone d'import : le geste central de toute l'app. */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: 16px;
  padding: 30px 20px; text-align: center; cursor: pointer; width: 100%;
  color: var(--dim);
  transition: transform var(--fast) var(--ease-out),
              background-color var(--med) var(--ease-out),
              border-color var(--med) var(--ease-out),
              color var(--med) var(--ease-out);
}
.drop:hover, .drop.over { background: var(--brand-soft); border-color: var(--brand);
  color: var(--chalk); transform: translateY(-2px); }
.drop .ico { width: 30px; height: 30px; margin: 0 auto 10px; }
.drop:hover .ico, .drop.over .ico { transform: translateY(-3px) scale(1.1);
  color: var(--brand); }
.drop strong { display: block; font-size: 16px; font-weight: 600; }
.drop small { color: var(--dim-2); font-size: 12.5px; }

/* La dropzone active : elle reste l'endroit unique à regarder pendant et juste
   après l'envoi — nom, poids, durée, lecteur, avancement, tout au même endroit. */
.drop.drop-active {
  cursor: default; text-align: left; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.drop.drop-active:hover { transform: none; background: var(--ink-2); border-color: var(--line-2); }
.drop-preview { width: 100%; max-height: 220px; border-radius: 10px; background: #000;
  display: block; object-fit: contain; }
.drop-info { display: flex; flex-direction: column; gap: 2px; }
.drop-name { font-size: 14px; font-weight: 600; color: var(--chalk); }
.drop-meta { font-family: var(--mono); font-size: 11px; color: var(--dim-2); }
.drop-pct { font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; }
.drop-ok { display: flex; align-items: center; gap: 6px; color: var(--go);
  font-weight: 600; font-size: 13px; }
.drop-ok .ico { width: 16px; height: 16px; }

/* La barre d'envoi : la seule barre qui se remplit, parce qu'elle mesure
   vraiment quelque chose — des octets, pas un moral. */
.bar { height: 6px; border-radius: 999px; background: var(--ink-4); overflow: hidden; }
.bar-f { height: 100%; border-radius: 999px; background: var(--brand);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 180ms linear; }
.bar-f.go { background: var(--go); }

/* ══════════════════════════════════════════════════════════════════════════
   LA LIBRAIRIE — tout ce qu'elle a livré, par jour.
   ══════════════════════════════════════════════════════════════════════════ */
.lib-day { margin-bottom: 28px; }
.lib-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.lib-h h2 { font-size: 17px; font-weight: 600; text-transform: capitalize; }
.lib-h span { font-family: var(--mono); font-size: 11px; color: var(--dim-2);
  letter-spacing: .06em; text-transform: uppercase; }

.lib-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.lib-card {
  border-radius: 14px; overflow: hidden; background: var(--ink-2);
  position: relative;
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
  animation: rise-sm var(--med) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.lib-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.lib-card-hit { display: block; width: 100%; cursor: pointer; text-align: left; }
.lib-thumb {
  aspect-ratio: 9 / 16; background: #000; position: relative;
  display: grid; place-items: center; color: var(--dim-2);
}
.lib-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(22,18,31,.35);
  opacity: 0;
  transition: opacity var(--med) var(--ease-out);
}
.lib-card:hover .lib-play { opacity: 1; }
.lib-play .ico { width: 38px; height: 38px; color: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.lib-meta { padding: 9px 11px; }
.lib-meta div { font-size: 12.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lib-meta small { font-family: var(--mono); font-size: 10.5px; color: var(--dim-2); }
/* Le téléchargement : un geste à part, qui ne doit pas ouvrir la modale. */
.lib-dl {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  background: rgba(22,18,31,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; border-color: transparent;
}
.lib-dl:hover { background: rgba(22,18,31,.85); color: var(--chalk); }

/* ══════════════════════════════════════════════════════════════════════════
   RÉCOMPENSES
   ══════════════════════════════════════════════════════════════════════════ */

.wrap-card { text-align: center; padding: 34px 26px;
  animation: reward 620ms var(--pop) both; }
.wrap-card .ico-big { width: 48px; height: 48px; color: var(--gold); margin: 0 auto 14px;
  animation: reward 700ms var(--pop) both; animation-delay: 90ms; }
.wrap-card h2 { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.wrap-card p { color: var(--dim); margin-bottom: 22px; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLE (côté manager)
   ══════════════════════════════════════════════════════════════════════════ */
.tw { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--ink-2); }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th {
  padding: 12px 14px; text-align: left; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim-2);
  border-bottom: 1px solid var(--line);
}
/* Les lignes se distinguent par un léger zébrage plutôt qu'un filet sous
   chacune : plus doux, et ça allège un tableau qui, dans cette refonte, porte
   davantage de pages qu'avant. */
td { padding: 12px 14px; font-size: 14px; vertical-align: middle; }
tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
tbody tr { transition: background-color var(--med) var(--ease-out); }
tbody tr:hover { background: var(--ink-3); }
tbody tr:hover .row-act { opacity: 1; transform: translateX(0); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.row-act { display: flex; gap: 2px; justify-content: flex-end;
  opacity: 0; transform: translateX(6px);
  transition: opacity var(--med) var(--ease-out), transform var(--med) var(--ease-out); }
/* Au doigt, il n'y a pas de survol : les actions restent visibles. */
@media (hover: none) { .row-act { opacity: 1; transform: none; } }

/* Couper une ligne trop longue, avec des points de suite.

   Elle valait « max-width: 0; width: 100% » — l'astuce des CELLULES DE TABLEAU,
   où la mise en page du tableau redonne ensuite sa part à la cellule. Hors d'un
   tableau, rien ne la redonne : la largeur reste à zéro, et le texte disparaît
   entièrement. Mesuré au navigateur : 0 px dans une boîte flex de 300 px.
   Elle n'était employée que hors tableau — dans les cartes de Médias, dans la
   ligne « Terminée. » d'une tâche, et dans la liste des refus : ces trois
   textes-là ne s'affichaient pas du tout.

   `min-width: 0` est l'équivalent qui marche pour un enfant de flex (sans lui,
   un enfant refuse de descendre sous la largeur de son contenu et déborde), et
   `max-width: 100%` borne le cas du bloc ordinaire. Un `td` qui en aurait
   besoin garde l'ancienne astuce, à part. */
.trunc { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
td.trunc { max-width: 0; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   MODALE
   ══════════════════════════════════════════════════════════════════════════ */
.veil {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 7, 14, .74);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  animation: fade var(--med) var(--ease) both;
  overscroll-behavior: contain;
}
.modal {
  width: 100%; max-width: 540px; max-height: 86dvh; overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 24px;
  box-shadow: var(--shadow-2);
  animation: pop-in var(--med) var(--pop) both;
}
.modal-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.modal-h h2 { font-size: 19px; flex: 1; }
.modal-wide { max-width: 380px; }

/* ══════════════════════════════════════════════════════════════════════════
   TOASTS — annoncés aux lecteurs d'écran, pas seulement affichés.
   ══════════════════════════════════════════════════════════════════════════ */
.toasts {
  position: fixed; z-index: 80; left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: min(440px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: var(--ink-3); border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2); font-size: 14px; font-weight: 500;
  animation: toast-in var(--med) var(--pop) both;
}
.toast .ico { width: 18px; height: 18px; }
.toast.ok  { border-color: rgba(62,213,152,.45); }
.toast.ok  .ico { color: var(--go); }
.toast.bad { border-color: rgba(245,69,92,.45); }
.toast.bad .ico { color: var(--tally); }

/* ══════════════════════════════════════════════════════════════════════════
   ACCUEIL CRÉATRICE — le retard et la série, avant le compte de ce qui reste.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTION — le compteur toujours visible, la navigation dans la station.
   ══════════════════════════════════════════════════════════════════════════ */
.queue-count { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.queue-count strong {
  font-family: var(--font); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; text-transform: none; color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.station-nav { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.prod-alt { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   ÉDITEUR ENRICHI ET ANNOTATIONS
   ══════════════════════════════════════════════════════════════════════════ */
.rich { border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden;
  background: var(--ink-2); }
.rich-bar { display: flex; gap: 2px; padding: 6px; background: var(--ink-3);
  border-bottom: 1px solid var(--line); }
.rich-bar .btn-ico { width: 32px; height: 32px; }
.rich-edit { min-height: 90px; padding: 12px 14px; font-size: 14px; line-height: 1.6; outline: none; }
.rich-view { font-size: 14px; line-height: 1.6; color: var(--dim); }
.rich-view ul, .rich-view ol { padding-left: 20px; margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   BASCULE À DEUX MODES — « coller plusieurs liens » vs « ajouter en détail ».
   ══════════════════════════════════════════════════════════════════════════ */
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px;
  background: var(--ink-3); margin-bottom: 16px; }
.seg-btn { flex: 1; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 600;
  color: var(--dim); text-align: center;
  transition: background-color var(--med) var(--ease-out), color var(--med) var(--ease-out); }
.seg-btn.active { background: var(--ink-2); color: var(--chalk); box-shadow: var(--shadow); }
.seg-btn:hover:not(.active) { color: var(--chalk); }

/* ══════════════════════════════════════════════════════════════════════════
   VIDÉOS REFUSÉES (côté manager)
   ══════════════════════════════════════════════════════════════════════════ */
.refused-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.refused-row { display: flex; align-items: flex-start; gap: 10px; padding-top: 12px;
  border-top: 1px solid var(--line); }
.refused-row:first-child { padding-top: 0; border-top: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE PÉRIODE — pastilles + calendrier deux mois.
   ══════════════════════════════════════════════════════════════════════════ */
/* Réutilise .seg/.seg-btn (bascule lot/détail) : même pilule, mais un nombre
   variable d'options qui doivent garder leur largeur naturelle et défiler
   plutôt que s'étirer à parts égales. */
/* ══════════════════════════════════════════════════════════════════════════
   LISTES DÉROULANTES — les nôtres. Le bouton, et la boîte qu'il ouvre.
   ══════════════════════════════════════════════════════════════════════════ */
/* Le bouton : icône, valeur, chevron — sur une seule ligne. */
.dd {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: none;
  padding: 8px 10px; border-radius: var(--r-btn);
  background: var(--ink-2); border: 1px solid var(--line);
  color: var(--chalk); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color var(--med) var(--ease-out), background-color var(--med) var(--ease-out);
}
.dd:hover { border-color: var(--line-2); background: var(--ink-3); }
.dd[aria-expanded="true"] { border-color: var(--brand); background: var(--ink-3); }
.dd-i { display: inline-flex; flex: none; color: var(--dim); }
.dd-i .ico { width: 17px; height: 17px; }
.dd[aria-expanded="true"] .dd-i, .dd:hover .dd-i { color: var(--brand); }
.dd-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-c { display: inline-flex; flex: none; color: var(--dim-2); margin-left: 2px;
  transition: transform var(--med) var(--ease-out); }
.dd-c .ico { width: 16px; height: 16px; }
.dd[aria-expanded="true"] .dd-c { transform: rotate(180deg); }
.dd-block { display: flex; width: 100%; }
.dd-block .dd-v { flex: 1; text-align: left; }

/* La boîte, posée sur <body> : au-dessus des modales (60), sous les toasts (80).
   Le max-width n'est pas une ceinture de sécurité, il est structurel : en
   position: fixed sans largeur, une boîte prend la largeur de son contenu. La
   rangée de périodes faisait alors 403 px sur un écran de 390, et son
   overflow-x ne se déclenchait jamais — rien ne la contraignait. */
.pop {
  position: fixed; z-index: 70;
  max-width: calc(100vw - 16px);
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow-2);
  overflow: auto; overscroll-behavior: contain;
  animation: pop-in var(--fast) var(--pop) both;
}

.dd-list { padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-width: min(320px, calc(100vw - 24px)); }
.dd-o {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border-radius: 9px;
  color: var(--chalk); font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background-color var(--fast) var(--ease-out);
}
.dd-o:hover, .dd-o:focus-visible { background: var(--ink-3); }
.dd-o.on { color: var(--brand); }
.dd-o.on .dd-i { color: var(--brand); }
.dd-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-k { display: inline-flex; flex: none; color: var(--brand); }
.dd-k .ico { width: 15px; height: 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   BOÎTE DE PÉRIODE — les périodes toutes faites, et le calendrier.
   ══════════════════════════════════════════════════════════════════════════ */
.periodbox { display: flex; align-items: stretch; }
.pb-presets {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 10px;
  border-right: 1px solid var(--line); flex: none; min-width: 158px;
}
.pb-p {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border-radius: 9px;
  color: var(--chalk); font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background-color var(--fast) var(--ease-out);
}
.pb-p:hover, .pb-p:focus-visible { background: var(--ink-3); }
.pb-p.on { color: var(--brand); }
.pb-cal { padding: 12px 14px; min-width: 0; }

/* Au téléphone, les périodes toutes faites passent au-dessus, en rangée qui
   défile : côte à côte, elles coûteraient la moitié de la largeur au
   calendrier. */
/* Pas de max-width ici : cette boîte porte AUSSI la classe .pop (popover() la
   lui ajoute), et un `max-width: 100%` posé plus bas dans ce fichier écraserait
   le sien à spécificité égale. Or 100% d'un élément en position: fixed, c'est
   la largeur de l'écran — donc plus aucune marge, et la boîte dépassait. */
@media (max-width: 620px) {
  .periodbox { flex-direction: column; }
  .pb-presets {
    flex-direction: row; overflow-x: auto; border-right: 0;
    border-bottom: 1px solid var(--line); padding: 8px 10px;
    min-width: 0; max-width: 100%;      /* sans ça, l'overflow-x ne mord pas */
  }
  .pb-p { flex: none; white-space: nowrap; }
  .pb-p .dd-k { display: none; }
}

.rp-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.rp-title { flex: 1; text-align: center; font-weight: 600; font-size: 13px;
  text-transform: capitalize; }
/* La croix se détache des chevrons : sortir et changer de mois ne sont pas le
   même geste. Un filet sur les quatre côtés — .btn-ico porte déjà une bordure
   transparente, il n'y a qu'à la teindre — et aucun padding d'un seul côté :
   dans un carré centré en flex, il décalait l'icône hors de son milieu. */
.rp-x { margin-left: 6px; border-color: var(--line); }
.rp-x:hover { border-color: var(--tally); color: var(--tally); }
.rp-mos { display: flex; gap: 20px; }
/* Largeur posée, pas déduite : la boîte n'impose plus la sienne (elle s'ancre
   sur un bouton, sa taille vient de son contenu), et deux grilles en flex:1
   sans largeur propre s'écraseraient jusqu'à rendre les jours illisibles.
   Cette règle vient AVANT sa media query : à spécificité égale, c'est l'ordre
   qui tranche, et posée après elle gagnait aussi sur les téléphones. */
.rp-mo { flex: none; width: 196px; min-width: 0; }
@media (max-width: 480px) {
  .rp-mos { flex-direction: column; gap: 10px; }
  .rp-mo { width: 100%; }          /* empilés : chacun prend toute la largeur */
}
.rp-mo-h { text-align: center; font-weight: 600; font-size: 13px; margin-bottom: 8px;
  text-transform: capitalize; }
.rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rp-dow { text-align: center; font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--dim-2); text-transform: uppercase; padding-bottom: 4px; }
.rp-d {
  aspect-ratio: 1; border-radius: 7px; font-size: 12px; color: var(--chalk);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--fast) var(--ease-out);
}
.rp-d:hover { background: var(--ink-4); }
.rp-d.void { visibility: hidden; pointer-events: none; }
.rp-d.today { color: var(--brand); font-weight: 700; }
.rp-d.inr { background: var(--brand-soft); border-radius: 0; }
.rp-d.bnd { background: var(--brand); color: #1D192B; font-weight: 700; }
.rp-d.bnd.a { border-radius: 7px 0 0 7px; }
.rp-d.bnd.b { border-radius: 0 7px 7px 0; }
.rp-d.bnd.solo { border-radius: 7px; }
.rp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 14px; flex-wrap: wrap; }

/* Le sélecteur de créatrice borne sa largeur : un prénom court ne doit pas
   faire un bouton minuscule, un prénom long ne doit pas pousser le rôle hors
   de la barre. */
.creator-dd .dd-v { min-width: 96px; max-width: 170px; }

/* Un nombre sur lequel on peut cliquer. Il doit se voir comme tel sans devenir
   un bouton : dans une colonne de chiffres, un bouton ferait du bruit. */
.num-link {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--brand); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2);
  transition: text-decoration-color var(--med) var(--ease-out);
}
.num-link:hover { text-decoration-color: var(--brand); }

/* ══════════════════════════════════════════════════════════════════════════
   PUSH MULTI-CRÉATRICES — liste de cases à cocher, tactile.
   ══════════════════════════════════════════════════════════════════════════ */
.check-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--line);
  border-radius: var(--r-btn); padding: 4px 10px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; cursor: pointer; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS D'ATTRIBUTION — quelles créatrices appartiennent à ce manager,
   façon pastilles à bascule (plus tactile qu'un <select multiple>).
   ══════════════════════════════════════════════════════════════════════════ */
.chips { display: flex; flex-wrap: wrap; gap: 7px; max-height: 220px; overflow-y: auto;
  padding: 2px; }
/* Deux barres de défilement imbriquées — celle de la modale et celle de la
   liste — donnent une rangée coupée en deux qui se lit comme un bogue. Une
   liste close (les catégories) se déroule donc en entier, et c'est la modale
   qui défile, une fois. */
.chips-tout { max-height: none; overflow: visible; }
.chip-s { padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: var(--ink-3); color: var(--dim);
  cursor: pointer; transition: background-color var(--fast) var(--ease-out),
  border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out); }
.chip-s:hover { border-color: var(--brand); }
.chip-s.on { background: var(--brand); border-color: var(--brand); color: #1D192B; }
/* Pas d'opacité en plus ici : --dim assure déjà la mise en retrait, l'empiler
   avec une opacité rendrait "chez X" difficile à lire — pourtant l'info sert
   à ne pas reprendre une créatrice par erreur. */
.chip-s .chip-else { font-weight: 400; }

/* ══════════════════════════════════════════════════════════════════════════
   PRÉSENCE — un simple point vert, "en ligne maintenant".
   ══════════════════════════════════════════════════════════════════════════ */
/* Le rond « en ligne ». `flex: none` n'est pas décoratif : posé dans une boîte
   flex, un carré de 8 px se laisse écraser par défaut (flex-shrink vaut 1) et
   devient un ovale. Il ne doit jamais non plus se retrouver seul dans une
   .pill : le padding de la pastille en refait une capsule. */
.dot-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--go);
  box-shadow: 0 0 6px rgba(62,213,152,.7); }

/* ══════════════════════════════════════════════════════════════════════════
   ÉCRAN D'ENTRÉE
   ══════════════════════════════════════════════════════════════════════════ */
.gate { min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  position: relative; z-index: 1; }
.gate-c { width: 100%; max-width: 400px; animation: rise var(--slow) var(--ease) both; }
.gate-logo { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 8px; font-weight: 700; font-size: 30px; letter-spacing: -.03em; }
.gate-logo svg { width: 36px; height: 36px; display: block; fill: var(--brand);
  animation: pop-in 500ms var(--pop) both; }
.gate-sub { text-align: center; color: var(--dim); margin-bottom: 26px; font-size: 14px; }

.code-in { font-family: var(--mono); font-size: 22px; letter-spacing: .3em;
  text-align: center; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════════════
   TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .main { padding: 18px 14px 100px; }
  /* La barre de titre passe sur deux lignes plutôt que d'écraser ses commandes.
     Logo, onglets, rôle et déconnexion occupent déjà les 390 px d'un téléphone :
     période et créatrice prennent leur propre rangée, dessous, et toute la
     largeur. Elles restent dans l'en-tête, elles ne sont plus à l'étroit. */
  .topbar { padding-left: 14px; padding-right: 14px; gap: 6px; flex-wrap: wrap; }
  .hdr-tools { order: 10; width: 100%; flex: 1 1 100%; gap: 6px; }
  .hdr-tools > .dd { flex: 1 1 0; min-width: 0; }
  .creator-dd .dd-v { min-width: 0; max-width: none; }
  .nav { margin-left: 2px; gap: 2px; }
  .nav-l { display: none; }                  /* l'icône suffit, le pouce est large */
  .nav-item { padding: 9px 11px; }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { padding: 14px; }
  .tile-v { font-size: 26px; }
  .hero { padding: 24px 20px; }
  /* Sur le téléphone, la station passe devant la file. Elle ouvre Tally pour
     refaire une vidéo, pas pour lire une liste — la vidéo du moment et le
     bouton d'import doivent être là, tout de suite, sans défiler. */
  .stage > .station { order: 1; }
  .stage > .queue-w { order: 2; }

  /* Le lecteur reste vertical (9/16). Pleine largeur, il ferait une fois et
     demie la hauteur de l'écran et chasserait le bouton d'import hors de vue :
     on le borne à la hauteur, pas à la largeur. */
  .player { max-width: min(100%, 42vh); }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .cal { right: 50%; transform: translateX(50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHAMP À ÉTIQUETTES — on tape, on valide, ça devient une pastille.

   Il ressemble à un .input et se comporte comme lui (même bordure, même
   anneau au focus), mais le focus vient d'un enfant : c'est :focus-within qui
   l'allume, pas :focus. Sans ça, la boîte resterait éteinte pendant qu'on
   écrit dedans.
   ══════════════════════════════════════════════════════════════════════════ */
.tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  width: 100%; min-height: 48px; padding: 7px 9px; cursor: text;
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-btn);
  transition: border-color var(--med) var(--ease-out),
              background-color var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out);
}
.tags:hover { border-color: var(--line-2); background: var(--ink-3); }
.tags:focus-within {
  border-color: var(--brand); background: var(--ink-3);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.tag {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 4px 4px 11px; border-radius: 999px;
  background: var(--ink-4); color: var(--chalk);
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
/* Le × d'une étiquette n'est pas un .btn-ico : à 34 px il ferait deux fois la
   hauteur de la pastille qui le porte. */
.tag-x {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; color: var(--dim);
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.tag-x:hover { background: var(--tally-soft); color: var(--tally); }
.tag-x .ico { width: 14px; height: 14px; }
/* Le champ est nu : la bordure, c'est celle de la boîte autour. */
.tags-in {
  flex: 1 1 90px; min-width: 90px; padding: 5px 3px;
  background: none; border: 0; outline: none; color: var(--chalk); font-size: 15px;
}
.tags-in::placeholder { color: var(--dim-2); }

/* Trois seuils côte à côte tant qu'ils tiennent. Sur un téléphone, « Commentaires »
   en capitales espacées est déjà plus large qu'un tiers de la modale : ils
   s'empilent au lieu de se couper. Règle de base avant sa media query. */
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 620px) { .grid-3 { grid-template-columns: 1fr; } }

/* Le rappel de ce qu'on pousse, en tête de la modale de push : on doit pouvoir
   vérifier ce qu'on envoie sans revenir en arrière. */
.push-list {
  max-height: 168px; overflow-y: auto; margin-bottom: 16px;
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 6px 10px;
}
.push-row { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 13.5px; }
.push-row .ico { width: 17px; height: 17px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TENDANCES — ce qui performe ailleurs.

   Aucune couleur nouvelle : le violet dit « Tally a retenu celle-ci » (la
   sélection, la barre de rang), et tout le reste est de la craie sur de
   l'encre. Une plateforme éteinte n'est pas une alerte — elle ne prend donc
   pas le rouge, qui veut dire « en retard » partout ailleurs dans l'app.
   ══════════════════════════════════════════════════════════════════════════ */
.tr-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
/* .seg porte sa propre marge basse (elle sert d'onglets ailleurs) : ici elle
   est dans une rangée, c'est la rangée qui espace. */
.tr-bar .seg { margin-bottom: 0; flex: 0 1 auto; max-width: 100%; overflow-x: auto; }
.tr-bar .seg-btn { flex: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; }
.tr-bar .seg-btn .ico { width: 16px; height: 16px; }

.tr-notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.tr-note {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-btn);
  background: var(--ink-2); border: 1px solid var(--line);
  font-size: 13px;
}
.tr-note .ico { width: 17px; height: 17px; flex: none; color: var(--dim-2); }

.tr-grid { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
@media (max-width: 720px) { .tr-grid { grid-template-columns: repeat(2, 1fr); } }

.tr-card {
  position: relative; border-radius: 14px; overflow: hidden;
  background: var(--ink-2);
  box-shadow: inset 0 0 0 1px transparent;
  transition: transform var(--med) var(--ease-out),
              box-shadow var(--med) var(--ease-out);
  animation: rise-sm var(--med) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.tr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* Retenue : l'anneau fait le tour de la carte entière. Un simple check dans un
   coin se perd dans une grille de vingt vignettes. */
.tr-card.on { box-shadow: inset 0 0 0 2px var(--brand); }
.tr-card.on:hover { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-2); }

/* Toute la carte est la cible : choisir une vidéo, c'est le geste qu'on fait
   vingt fois de suite. Le lien « ouvrir » reste au-dessus, à part. */
.tr-hit { display: block; width: 100%; text-align: left; }
.tr-hit:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.tr-thumb {
  aspect-ratio: 9 / 16; background: #000; position: relative;
  display: grid; place-items: center; color: var(--dim-2);
}
/* La marque de la plateforme est en dessous, dans la même cellule de grille :
   l'image la recouvre quand elle arrive, et la découvre quand elle échoue. */
.tr-thumb > * { grid-area: 1 / 1; }
.tr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-noimg { display: grid; place-items: center; width: 100%; height: 100%; }
.tr-noimg .ico { width: 34px; height: 34px; }

.tr-plat {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  background: rgba(22,18,31,.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 600;
}
.tr-plat .ico { width: 13px; height: 13px; }

/* L'anneau de sélection est toujours visible, même éteint : au doigt, il n'y a
   pas de survol pour révéler qu'une carte se coche. */
.tr-check {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; border: 1.5px solid rgba(242,236,250,.55);
  background: rgba(22,18,31,.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: transparent;
  transition: background-color var(--fast) var(--ease-out),
              border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}
.tr-check .ico { width: 15px; height: 15px; }
.tr-card.on .tr-check { background: var(--brand); border-color: var(--brand); color: #1D192B; }

/* Le pied : qui l'a faite, ce qu'elle vaut sur les autres mesures, et la porte
   vers la plateforme. En flux, pas en flottant — posé par-dessus la carte, ce
   bouton rognait la ligne d'auteur jusqu'à la faire disparaître. */
.tr-foot { display: flex; align-items: center; gap: 6px; padding: 0 8px 8px 11px; }
.tr-open { flex: none; }

.tr-body { padding: 10px 11px 6px; }
/* La mesure du tri, en gros. Les deux autres passent en note plus bas : la
   carte répond à la question qu'on vient de poser, elle n'en pose pas trois. */
.tr-metric { display: flex; align-items: baseline; gap: 5px; }
.tr-n { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.tr-u { font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim-2); }

/* Où celle-ci se situe parmi celles qui sont à l'écran — pas une note absolue.
   Rapportée à un maximum fixe, la barre serait plate sur toutes les cartes. */
.tr-rank { display: block; height: 3px; margin: 8px 0 9px; border-radius: 999px;
  background: var(--line); overflow: hidden; }
.tr-rank-f { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

.tr-title { font-size: 12.5px; font-weight: 500; line-height: 1.3; }
/* Deux lignes plutôt qu'une : sur 178 px, l'auteur et deux mesures ne tiennent
   pas côte à côte, et ce qui ne tient pas se fait couper — en commençant par
   l'auteur, qu'on cherchait justement à lire. */
/* Sa couleur est posée ici, pas empruntée à .task-m : cette classe-là est un
   CONTENEUR FLEX (elle sert de ligne de méta dans une tâche), et l'emprunter
   pour sa seule teinte mettait les deux lignes côte à côte, chacune rognée à
   quatre lettres. Une classe se prend pour ce qu'elle fait, pas pour sa couleur. */
.tr-sub { flex: 1; min-width: 0; color: var(--dim-2);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.55; }
/* Coupe ici, pas avec .trunc : cette classe-là vaut pour un enfant de flex ou
   de tableau (elle s'appuie sur max-width: 0), et posée sur un bloc elle le
   réduit à rien — la ligne d'auteur avait purement disparu. */
.tr-sub > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Les deux mesures secondaires, en icône. Ce conteneur-ci est bien un flex —
   déclaré ici, pour lui, et pas emprunté à une classe qui sert ailleurs. */
.tr-mini { display: flex; align-items: center; gap: 10px; }
.tr-mini-i { display: inline-flex; align-items: center; gap: 3px; }
.tr-mini-i .ico { width: 12px; height: 12px; }

/* Deux lignes, hauteur fixe : sans elle, un titre court et un titre long
   décalent les cartes voisines d'une ligne entière. */
.trunc2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; height: 2.6em;
}

/* La barre des retenues suit le défilement : on coche en descendant, et le
   bouton qui les envoie ne doit pas être resté en haut. */
.tr-sel {
  position: sticky; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding: 12px 14px;
  border-radius: var(--r-card); border: 1px solid var(--line-2);
  background: rgba(29,25,43,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
  animation: rise-sm var(--med) var(--ease) both;
}
.tr-sel .ico { width: 19px; height: 19px; flex: none; }
.tr-sel-n { font-weight: 600; }
/* Au téléphone, la rangée se replie : sans cette règle, « Tout décocher »
   restait sur la première ligne avec le compte et « Pousser à… » tombait seul
   en dessous — l'action secondaire au-dessus de la principale. Le compte prend
   sa ligne, les deux boutons partagent la suivante. */
@media (max-width: 620px) {
  .tr-sel-n { flex: 1 1 100%; }
  .tr-sel .spacer { display: none; }
  .tr-sel .btn-primary { flex: 1; justify-content: center; }
}