/* ══ Régie des cartes de l'accueil ══════════════════════════════════════════
   Trois surfaces : la carte masquée, la carte déclenchée par une règle (le
   joueur VOIT pourquoi — liseré doré + motif, arbitrage produit n° 4), et la
   feuille « Personnaliser l'accueil ». Tout suit les jetons vNext ; en sombre,
   le texte passe par --qz-text / --qz-muted, jamais une encre constante. */

.qzr-carte-masquee { display: none !important; }

/* Une carte placée là par une règle, pas par l'ordre de base. Le liseré est
   volontairement discret : il signale, il ne crie pas. */
.qzr-carte-declenchee {
  position: relative;
  box-shadow: 0 0 0 2px var(--qz-warning, #f5c542),
              0 0 0 5px color-mix(in srgb, var(--qz-warning, #f5c542) 22%, transparent);
}
.qzr-carte-motif {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qz-warning-ink, #B87A00);
  background: color-mix(in srgb, var(--qz-warning, #f5c542) 16%, var(--qz-surface, #fff));
  border-radius: var(--qz-r-pill, 999px);
  padding: 3px 10px;
}

/* ── La feuille de personnalisation ─────────────────────────────────────── */
#qzr-regie-sheet { display: none; }
#qzr-regie-sheet.est-ouverte { display: block; }
.qzr-regie-sheet__fond {
  position: fixed; inset: 0; z-index: 1450;
  background: rgba(6, 52, 42, .48);
  border: 0; cursor: pointer;
}
.qzr-regie-sheet__panneau {
  position: fixed; z-index: 1451;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 24px));
  max-height: min(640px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  background: var(--qz-surface, #fff);
  border: 1px solid var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-screen, 22px);
  box-shadow: 0 18px 44px rgba(6, 52, 42, .26);
  overflow: hidden;
}
@media (max-width: 767.98px) {
  .qzr-regie-sheet__panneau {
    left: 0; right: 0; top: auto; bottom: 0; transform: none;
    width: 100%; max-height: calc(100vh - 56px);
    border-radius: var(--qz-r-screen, 22px) var(--qz-r-screen, 22px) 0 0;
  }
}
.qzr-regie-sheet__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 6px;
}
.qzr-regie-sheet__tete h3 {
  margin: 0; font-size: 17px; font-weight: 800; color: var(--qz-text, #06342A);
}
.qzr-regie-sheet__croix {
  border: 0; width: 30px; height: 30px; border-radius: 10px; cursor: pointer;
  background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40);
}
.qzr-regie-sheet__aide {
  margin: 0; padding: 0 18px 10px;
  font-size: 12.5px; color: var(--qz-muted, #5E8A7C);
}
.qzr-regie-sheet__liste { overflow-y: auto; padding: 4px 14px 8px; flex: 1 1 auto; }
.qzr-regie-zone {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--qz-accent-ink, #0A4F40); margin: 12px 4px 6px;
}
.qzr-regie-pli {
  text-align: center; font-size: 11px; color: var(--qz-muted, #5E8A7C);
  border: 1.5px dashed var(--qz-line, #DCEFE8); border-radius: 10px;
  padding: 5px; margin: 6px 0;
}
.qzr-regie-ligne {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--qz-line, #DCEFE8); border-radius: 12px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--qz-surface, #fff);
}
.qzr-regie-ligne.est-verrou { opacity: .6; }
.qzr-regie-ligne.est-masquee .qzr-regie-nom { opacity: .45; text-decoration: line-through; }
.qzr-regie-nom {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600;
  color: var(--qz-text, #06342A);
}
.qzr-regie-nom .fa-lock { font-size: 11px; color: var(--qz-muted, #5E8A7C); margin-left: 4px; }
.qzr-regie-mini {
  flex: none; border: 1px solid var(--qz-line, #DCEFE8); border-radius: 8px;
  background: var(--qz-surface, #fff); color: var(--qz-text, #06342A);
  width: 28px; height: 26px; font-size: 11px; line-height: 1; cursor: pointer;
}
.qzr-regie-mini:hover { background: var(--qz-accent-soft, #E8F8F1); }
.qzr-regie-mini--zone { width: auto; padding: 0 8px; font-size: 10.5px; font-weight: 700; }
.qzr-regie-sheet__pied {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--qz-line, #DCEFE8);
}
.qzr-regie-btn {
  border: 0; border-radius: var(--qz-r-pill, 999px); cursor: pointer;
  padding: 10px 20px; font-size: 13.5px; font-weight: 800;
  background: var(--qz-accent, #16A87A); color: #fff;
  transition: transform var(--qz-dur-press, 80ms) var(--qz-ease, ease);
}
.qzr-regie-btn:active { transform: scale(var(--qz-press-scale, .97)); }
.qzr-regie-btn--ghost { background: var(--qz-accent-soft, #E8F8F1); color: var(--qz-accent-ink, #0A4F40); }

/* ── Le point d'entrée sur le tableau de bord ────────────────────────────
   Posé juste au-dessus du bouton « Afficher plus » : là où la question se
   pose, puisqu'on voit le pli et donc qu'il y a des cartes rangées.

   DANS le corps replié et EN TÊTE : il n'apparaît qu'une fois déplié —
   l'accueil ne porte donc aucune ligne de plus tant que rien n'est demandé —
   mais il est alors vu tout de suite, avant les cartes qu'il sert à ranger.

   VOLONTAIREMENT DISCRET — pointillés, pas de fond, texte en gris : c'est
   un réglage, pas un contenu. Une carte pleine de plus rivaliserait avec les
   cartes de jeu qui l'entourent. */
.qzr-regie-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 2px 0 10px;  /* ouvre la liste du pli, sans doubler son interligne */
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed var(--qz-line, #DCEFE8);
  border-radius: var(--qz-r-card, 16px);
  color: var(--qz-muted, #5E8A7C);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--qz-dur-ui, 150ms) var(--qz-ease, ease),
              border-color var(--qz-dur-ui, 150ms) var(--qz-ease, ease),
              background var(--qz-dur-ui, 150ms) var(--qz-ease, ease),
              transform var(--qz-dur-press, 80ms) var(--qz-ease, ease);
}
.qzr-regie-cta:hover,
.qzr-regie-cta:focus-visible {
  color: var(--qz-accent-ink, #0A4F40);
  border-color: var(--qz-accent-mid, #5DCAA5);
  background: var(--qz-accent-soft, #E8F8F1);
}
.qzr-regie-cta:active { transform: scale(var(--qz-press-scale, .97)); }
.qzr-regie-cta i { font-size: 12px; }

/* ── La rangée des deux réglages ─────────────────────────────────────────
   « Organiser mes cartes » prend la largeur, « Rafraîchir » se contente d'un
   carré : le premier est une destination, le second un geste. Leur donner le
   même poids visuel ferait hésiter entre deux actions de nature différente. */
.qzr-regie-barre {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 2px 0 10px;
}
.qzr-regie-barre .qzr-regie-cta { margin: 0; }
.qzr-regie-cta--icone {
  flex: none;
  width: 42px;
  padding: 0;
  gap: 0;
}
.qzr-regie-cta--icone i { font-size: 13px; }
/* La rotation dit que le clic a été reçu — les trois sources peuvent revenir
   identiques, sans elle on ne saurait pas s'il s'est passé quelque chose. */
.qzr-regie-cta--icone.est-en-cours i { animation: qzrRegieTourne .6s linear infinite; }
@keyframes qzrRegieTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Sans rotation, le retour visuel passe par la couleur : il en faut un. */
  .qzr-regie-cta--icone.est-en-cours i { animation: none; }
  .qzr-regie-cta--icone.est-en-cours {
    color: var(--qz-accent-ink, #0A4F40);
    border-color: var(--qz-accent-mid, #5DCAA5);
    background: var(--qz-accent-soft, #E8F8F1);
  }
}