/* LE KIT « JEU » DE L'ESPACE CLIENT (29/10/2026) : la SEULE autorité du style gamifié.
 *
 * Fondateur (29/10/2026) : « revoir l'apparence de toutes les pages de l'espace
 * utilisateur pour que ce soit dans ce style gamifié et surtout que tout soit
 * cohérent ». Repères : `docs/reperes/REPERES-style-gamifie.md` (à lire AVANT de
 * toucher une page). Références vivantes : `/user/succes`, `/user/nouveautes`,
 * `/user/arene`.
 *
 * ⚠️ Couleurs de base, polices, boutons : la charte (`charte.css`), jamais recopiées.
 * Ce fichier ne porte que les PIÈCES du jeu, préfixées `jeu-`. Une page n'écrit pas
 * sa propre version d'une pièce : si une pièce manque, on l'ajoute ICI (par la
 * conversation de coordination), une fois pour toutes les pages.
 * ⚠️ Toute animation respecte `prefers-reduced-motion` (fin du fichier).
 */

/* ── Les teintes du jeu (une par sens, jamais au hasard) ── */
:root {
  --jeu-violet: #8B7FE0;     /* la marque, ce qu'on construit */
  --jeu-rose: #F472B6;       /* la surprise, la révélation */
  --jeu-or: #FCD34D;         /* l'Arène, les trophées, les récompenses */
  --jeu-or-fonce: #F59E0B;
  --jeu-cyan: #67E8F9;       /* l'entraide, la communauté */
  --jeu-vert: #4ADE80;       /* fait, réussi, prêt */
  --jeu-ombre: 0 18px 50px rgba(0,0,0,.40);
}

/* ── La page : une colonne centrée, qui mesure sa place (menu ouvert ou non) ── */
.jeu-cadre { container-type: inline-size; width: 100%; }
.jeu-page { max-width: 960px; margin: 0 auto; width: 100%; display: grid; gap: 24px; }
.jeu-page--large { max-width: 1180px; }

/* ── L'en-tête de page : le « héros » de chaque écran ──
 * <header class="jeu-tete jeu-tete--violet|or|cyan|vert">
 *   <div class="jeu-tete-fond" aria-hidden="true"><i></i><i></i><i></i><i></i></div>
 *   <span class="jeu-surtitre">{{ icon(...) }} Le mot de la rubrique</span>
 *   <h1>Le titre</h1><p>Une phrase : à quoi sert l'écran pour le client.</p>
 *   <div class="jeu-tete-gestes">…boutons…</div>
 * </header> */
.jeu-tete { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 6px;
  padding: 20px 24px 18px; border-radius: var(--radius-xl); border: 1px solid rgba(180,168,255,.22);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(139,127,224,.30), transparent 55%),
    radial-gradient(80% 120% at 0% 110%, rgba(244,114,182,.10), transparent 60%),
    var(--card); }
.jeu-tete--or { border-color: rgba(252,211,77,.26);
  background: radial-gradient(110% 140% at 0% 0%, rgba(252,211,77,.18), transparent 55%),
              radial-gradient(100% 140% at 100% 100%, rgba(139,127,224,.24), transparent 60%), var(--card); }
.jeu-tete--cyan { border-color: rgba(103,232,249,.24);
  background: radial-gradient(120% 150% at 100% 0%, rgba(103,232,249,.18), transparent 55%),
              radial-gradient(80% 120% at 0% 110%, rgba(139,127,224,.14), transparent 60%), var(--card); }
.jeu-tete--vert { border-color: rgba(74,222,128,.24);
  background: radial-gradient(120% 150% at 100% 0%, rgba(74,222,128,.16), transparent 55%), var(--card); }
.jeu-tete h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 1.85rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.12; padding-bottom: 2px;
  background: linear-gradient(100deg, #fff 35%, var(--accent) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.jeu-tete--or h1 { background-image: linear-gradient(100deg, #fff 35%, var(--jeu-or)); }
.jeu-tete--cyan h1 { background-image: linear-gradient(100deg, #fff 35%, var(--jeu-cyan)); }
.jeu-tete--vert h1 { background-image: linear-gradient(100deg, #fff 35%, var(--jeu-vert)); }
.jeu-tete p { margin: 0; max-width: 620px; color: var(--muted-foreground); line-height: 1.6; }
.jeu-tete-gestes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.jeu-tete-gestes .btn { display: inline-flex; gap: 6px; align-items: center; }
.jeu-tete-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.jeu-tete-fond i { position: absolute; border-radius: 50%; background: var(--accent); opacity: .5;
  animation: jeu-flotte 7s ease-in-out infinite; }
.jeu-tete-fond i:nth-child(1) { width: 5px; height: 5px; right: 12%; top: 24%; }
.jeu-tete-fond i:nth-child(2) { width: 3px; height: 3px; right: 26%; top: 66%; animation-delay: -2s; background: var(--jeu-rose); }
.jeu-tete-fond i:nth-child(3) { width: 4px; height: 4px; right: 7%; top: 60%; animation-delay: -4s; background: var(--jeu-or); opacity: .35; }
.jeu-tete-fond i:nth-child(4) { width: 110px; height: 110px; right: -24px; top: -26px; opacity: .13; filter: blur(20px); animation-duration: 11s; }
@keyframes jeu-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ── Le surtitre : le petit mot capitale au-dessus d'un titre ── */
.jeu-surtitre { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono);
  font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent); }
.jeu-tete--or .jeu-surtitre { color: var(--jeu-or); }
.jeu-tete--cyan .jeu-surtitre { color: var(--jeu-cyan); }
.jeu-tete--vert .jeu-surtitre { color: var(--jeu-vert); }

/* ── Le titre d'une section ── */
.jeu-section-tete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; }
.jeu-section-tete h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-lg); font-weight: 600; }
.jeu-section-tete h2 svg { color: var(--accent); }
.jeu-section-tete > span { font-size: var(--text-sm); color: var(--muted-foreground); }
.jeu-section-tete .jeu-lien { margin-left: auto; }

/* ── La carte ── */
.jeu-carte { position: relative; display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--radius-xl);
  background: var(--card); border: 1px solid var(--border); transition: border-color .2s ease, transform .2s ease; }
a.jeu-carte { color: inherit; text-decoration: none; }
a.jeu-carte:hover, .jeu-carte--cliquable:hover { border-color: var(--accent-ring-strong); transform: translateY(-1px); }
.jeu-carte h3 { margin: 0; font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.jeu-carte p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.55; }
/* Une carte qui compte (à faire, nouveau) : la bordure qui tourne, comme une carte scellée. */
.jeu-carte--lueur { border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(120deg, var(--jeu-violet), var(--jeu-rose), var(--jeu-or), var(--jeu-violet)) border-box;
  background-size: 100% 100%, 300% 300%; animation: jeu-bordure 6s linear infinite;
  box-shadow: 0 10px 34px rgba(139,127,224,.16); }
@keyframes jeu-bordure { to { background-position: 0 0, 300% 0; } }
.jeu-carte--or { border-color: rgba(252,211,77,.30);
  background: radial-gradient(120% 140% at 0% 0%, rgba(252,211,77,.10), transparent 55%), var(--card); }
.jeu-carte--vert { border-color: rgba(74,222,128,.30);
  background: linear-gradient(120deg, rgba(74,222,128,.08), transparent 60%), var(--card); }
.jeu-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ── L'orbe : l'icône ronde d'une carte, d'un état vide, d'un succès ── */
.jeu-orbe { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  color: #fff; background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose));
  box-shadow: 0 8px 22px rgba(139,127,224,.35); }
.jeu-orbe--rond { border-radius: 50%; }
.jeu-orbe--grand { width: 72px; height: 72px; border-radius: 50%; }
.jeu-orbe--or { color: #2B2010; background: linear-gradient(140deg, #FDE68A, var(--jeu-or) 50%, var(--jeu-or-fonce));
  box-shadow: 0 8px 22px rgba(245,158,11,.30); }
.jeu-orbe--cyan { background: linear-gradient(140deg, #22D3EE, var(--jeu-violet)); }
.jeu-orbe--vert { background: linear-gradient(140deg, #22C55E, var(--jeu-vert)); box-shadow: 0 8px 22px rgba(34,197,94,.28); }
.jeu-orbe--calme { color: var(--muted-foreground); background: rgba(255,255,255,.05); box-shadow: none;
  border: 1px dashed var(--border-strong); }

/* ── La pastille (étiquette d'une sorte, d'un état) ── */
.jeu-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: calc(11px * var(--echelle-texte, 1)); font-weight: 600; letter-spacing: .02em;
  background: rgba(180,168,255,.14); color: var(--accent); white-space: nowrap; }
.jeu-chip--or { background: rgba(252,211,77,.13); color: var(--jeu-or); }
.jeu-chip--cyan { background: rgba(103,232,249,.12); color: var(--jeu-cyan); }
.jeu-chip--vert { background: rgba(74,222,128,.12); color: var(--jeu-vert); }
.jeu-chip--calme { background: rgba(255,255,255,.06); color: var(--muted-foreground); }

/* ── La progression : une barre, et son texte ── */
.jeu-progression { display: grid; gap: 6px; }
.jeu-progression-texte { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-xs);
  color: var(--muted-foreground); }
.jeu-progression-texte b { color: var(--foreground); }
.jeu-barre { height: 8px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.jeu-barre i { display: block; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--jeu-violet), var(--accent)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.jeu-barre--or i { background: linear-gradient(90deg, var(--jeu-or), var(--jeu-or-fonce)); }
.jeu-barre--vert i { background: linear-gradient(90deg, #22C55E, var(--jeu-vert)); }

/* ── L'état vide : jamais un écran mort ; il dit quoi faire, et le bouton y mène ── */
.jeu-vide { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 20px;
  border-radius: var(--radius-xl); border: 1px dashed var(--border-strong); background: rgba(255,255,255,.015); }
.jeu-vide h2, .jeu-vide h3 { margin: 4px 0 0; font-size: var(--text-lg); font-weight: 600; }
.jeu-vide p { margin: 0; max-width: 460px; color: var(--muted-foreground); line-height: 1.55; }

/* ── La tuile d'un chiffre (le client, sur SES données ; jamais fêter un gain) ── */
.jeu-tuiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.jeu-tuile { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--card);
  border: 1px solid var(--border); }
.jeu-tuile-libelle { font-size: var(--text-xs); color: var(--muted-foreground); }
.jeu-tuile-valeur { font-size: var(--text-xl, 1.3rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.jeu-tuile-detail { font-size: var(--text-xs); color: var(--muted-foreground); }

/* ── Les onglets d'une page, en pastilles ── */
.jeu-onglets { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.04); border: 1px solid var(--border); width: max-content; max-width: 100%; }
.jeu-onglets a, .jeu-onglets button { padding: 6px 14px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--muted-foreground); background: transparent; text-decoration: none; }
.jeu-onglets [aria-current="page"], .jeu-onglets [aria-selected="true"], .jeu-onglets .actif {
  color: var(--on-accent, #14161F); background: var(--accent); font-weight: 600; }
/* L'icône devant le libellé (demande de la catégorie B, onglets d'un trader). */
.jeu-onglets a, .jeu-onglets button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.jeu-onglets a > svg, .jeu-onglets button > svg { flex: none; }
/* Un compteur dans un onglet (« 3 actives », « aucun »), lisible aussi sur l'onglet allumé. */
.jeu-onglet-compte { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-pill);
  font-size: calc(10.5px * var(--echelle-texte, 1)); font-weight: 600; line-height: 1.5;
  background: rgba(255,255,255,.08); color: var(--muted-foreground); }
.jeu-onglets [aria-current="page"] .jeu-onglet-compte, .jeu-onglets [aria-selected="true"] .jeu-onglet-compte,
.jeu-onglets .actif .jeu-onglet-compte { background: rgba(20,22,31,.18); color: var(--on-accent, #14161F); }
/* Les onglets qui ne passent pas à la ligne : ils défilent sur le côté, sans barre visible. */
.jeu-onglets--defile { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.jeu-onglets--defile::-webkit-scrollbar { display: none; }
.jeu-onglets--defile > * { flex: none; scroll-snap-align: start; }

/* ── Les groupes de réglages en cartes (demande de la catégorie E, 29/10/2026) ──
 * On pose `jeu-reglages` sur l'ENVELOPPE d'une page de réglages : ses
 * `.reglage-groupe` (charte, partagés avec les réglages d'un trader, Démarrer, Mon
 * profil) deviennent des cartes, et leur numéro prend l'orbe du jeu. La charte ne
 * change pas : une page qui ne pose pas l'enveloppe garde son dessin. */
.jeu-reglages .reglage-groupe { margin: 0 0 16px; padding: 18px 20px; border-radius: var(--radius-xl);
  background: var(--card); border: 1px solid var(--border); }
.jeu-reglages .reglage-groupe:last-child { margin-bottom: 0; }
.jeu-reglages .reglage-groupe:has(+ .depli) { margin-bottom: 8px; }
.jeu-reglages .depli + .reglage-groupe { margin-top: 16px; }
.jeu-reglages .reglage-groupe > h2::before { border-radius: 10px; color: #fff;
  background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose));
  box-shadow: 0 6px 16px rgba(139,127,224,.30); }
.jeu-reglages .reglage-lignes { background: rgba(255,255,255,.02); }
.jeu-reglages .section-titre--tete { border: 0; padding-bottom: 0; margin-bottom: 14px; }
@media (max-width: 640px) {
  .jeu-reglages .reglage-groupe { padding: 16px 14px; margin-bottom: 14px; }
}

/* ── Un lien d'action discret ── */
.jeu-lien { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500;
  color: var(--accent); text-decoration: none; }
.jeu-lien:hover { text-decoration: underline; }

/* ── Petits écrans : on mesure la place de la page, pas l'écran ── */
@container (max-width: 640px) {
  .jeu-tete { padding: 16px 16px 14px; }
  .jeu-carte { padding: 16px; }
  .jeu-tete-gestes .btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .jeu-tete-fond i, .jeu-carte--lueur { animation: none; }
  .jeu-barre i, .jeu-carte { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   LE NOUVEAU FORMAT DE L'ESPACE CLIENT (29/10/2026, à valider par le fondateur) :
   boutons, filtres, barre du haut, menu de gauche. Posé sur `body.espace-client`
   SEULEMENT : l'espace de l'équipe garde la charte telle qu'elle est.
   ⚠️ 30/10/2026 (fondateur : « toutes les pages qui ne sont pas dans le nouveau
   thème ») : les boutons, les choix et les filtres valent AUSSI sur `body.espace-public`
   (connexion, inscription, parcours, rendez-vous ; leur décor : `public.css`).
   ⚠️ Les classes restent celles de la charte (`.btn-primary`, `.seg`, `.sidebar`…) :
   aucune page n'a rien à changer, le format suit partout d'un coup.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Les boutons : en pilule ── */
:is(body.espace-client, body.espace-public) .btn { border-radius: var(--radius-pill); font-weight: 600; height: 2.6em; padding: 0 1.25em; }
:is(body.espace-client, body.espace-public) .btn-sm { height: 2.3em; padding: 0 1em; }
/* ⚠️ Les boutons à ICÔNE SEULE gardent leur padding nul (défaut vu par la catégorie B :
   la pilule écrasait l'icône à 0 px, flèches et « Partager » de la séance), et
   deviennent ronds. Plus précis que la règle des pilules, pour l'emporter. */
:is(body.espace-client, body.espace-public) .btn.btn-icone-seule, :is(body.espace-client, body.espace-public) .btn.btn-icon,
:is(body.espace-client, body.espace-public) .btn-sm.btn-icone-seule { padding: 0; border-radius: 50%; }
:is(body.espace-client, body.espace-public) .btn-icon { border-radius: 50%; }
/* Le geste principal : le dégradé du jeu, qui brille un peu. */
:is(body.espace-client, body.espace-public) .btn-primary { color: #fff; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(100deg, #7C6FD8, #A78BFA 55%, #C084FC);
  box-shadow: 0 6px 18px rgba(139,127,224,.28), inset 0 1px 0 rgba(255,255,255,.18); }
:is(body.espace-client, body.espace-public) .btn-primary:hover:not(:disabled) { color: #fff; border-color: rgba(255,255,255,.24);
  filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(139,127,224,.38); }
:is(body.espace-client, body.espace-public) .btn-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
/* L'argent : un aplat clair, différent du geste principal, pour rester reconnaissable. */
:is(body.espace-client, body.espace-public) .btn-fort { border-radius: var(--radius-pill); box-shadow: 0 6px 18px rgba(180,168,255,.25); }
/* Le geste d'à côté : du verre, un liseré. */
:is(body.espace-client, body.espace-public) .btn-secondary { background: rgba(255,255,255,.04); color: var(--foreground);
  border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); }
:is(body.espace-client, body.espace-public) .btn-secondary:hover:not(:disabled) { background: rgba(180,168,255,.10);
  border-color: rgba(180,168,255,.45); }
:is(body.espace-client, body.espace-public) .btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.06); }

/* ── Les filtres : une seule forme de pastille ──
 * Les sélecteurs de la charte (`.seg`) et les onglets du kit (`.jeu-onglets`) se
 * ressemblent désormais : un rail sombre, le choix allumé en violet du jeu. Pour une
 * rangée de filtres libres (plusieurs choix, des cases), la pièce `jeu-filtres`. */
:is(body.espace-client, body.espace-public) .seg { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); padding: 4px; }
:is(body.espace-client, body.espace-public) .seg > * { font-size: var(--text-sm); font-weight: 500; }
:is(body.espace-client, body.espace-public) .seg > [aria-selected="true"], :is(body.espace-client, body.espace-public) .seg > [aria-current="page"],
.jeu-onglets [aria-current="page"], .jeu-onglets [aria-selected="true"], .jeu-onglets .actif {
  color: #fff; background: linear-gradient(100deg, #7C6FD8, #A78BFA); box-shadow: 0 4px 14px rgba(139,127,224,.30); }
:is(body.espace-client, body.espace-public) .seg > [aria-selected="true"] .n, :is(body.espace-client, body.espace-public) .seg > [aria-current="page"] .n { color: rgba(255,255,255,.85); }
.jeu-onglets [aria-current="page"] .jeu-onglet-compte, .jeu-onglets [aria-selected="true"] .jeu-onglet-compte,
.jeu-onglets .actif .jeu-onglet-compte { background: rgba(255,255,255,.22); color: #fff; }
.jeu-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.jeu-filtre { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill);
  font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-decoration: none;
  color: var(--muted-foreground); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
  transition: color .15s ease, background .15s ease, border-color .15s ease; }
.jeu-filtre:hover { color: var(--foreground); border-color: rgba(180,168,255,.40); }
.jeu-filtre[aria-pressed="true"], .jeu-filtre[aria-current="page"], .jeu-filtre.actif {
  color: #fff; border-color: transparent; background: linear-gradient(100deg, #7C6FD8, #A78BFA);
  box-shadow: 0 4px 14px rgba(139,127,224,.30); }
.jeu-filtre .n { font-size: var(--text-xs); opacity: .75; font-variant-numeric: tabular-nums; }
:is(body.espace-client, body.espace-public) .filter-chip { border-radius: var(--radius-pill); }

/* ── La barre du haut : du verre, et un liseré lumineux ── */
body.espace-client .topbar { background: rgba(15,15,26,.82);
  background-image: radial-gradient(90% 220% at 15% 0%, rgba(139,127,224,.14), transparent 55%);
  backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid transparent; }
body.espace-client .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,127,224,.70) 20%, rgba(244,114,182,.55) 55%,
              rgba(252,211,77,.45) 80%, transparent); pointer-events: none; }
body.espace-client .topbar-icon-btn { width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
body.espace-client .topbar-icon-btn:hover { background: rgba(180,168,255,.14); border-color: rgba(180,168,255,.45);
  box-shadow: 0 0 0 3px rgba(139,127,224,.12); }
body.espace-client .topbar-cta, body.espace-client .topbar-invite-btn { border-radius: var(--radius-pill); }

/* ── Le menu de gauche : l'entrée active s'allume ── */
body.espace-client .sidebar { background: linear-gradient(180deg, rgba(139,127,224,.06), transparent 180px), var(--card); }
body.espace-client .sidebar nav a, body.espace-client .sidebar-mobile nav a { position: relative; border-radius: 12px;
  padding: 9px 12px; }
body.espace-client .sidebar nav a svg, body.espace-client .sidebar-mobile nav a svg { transition: color .15s ease, transform .15s ease; }
body.espace-client .sidebar nav a:hover, body.espace-client .sidebar-mobile nav a:hover { background: rgba(255,255,255,.05); }
body.espace-client .sidebar nav a:hover svg, body.espace-client .sidebar-mobile nav a:hover svg { color: var(--accent); }
body.espace-client .sidebar nav a.active, body.espace-client .sidebar nav a[aria-current="page"],
body.espace-client .sidebar-mobile nav a.active, body.espace-client .sidebar-mobile nav a[aria-current="page"] {
  color: #fff; font-weight: 600; border-left: 0; padding-left: 16px;
  background: linear-gradient(100deg, rgba(139,127,224,.30), rgba(139,127,224,.06) 85%);
  box-shadow: inset 0 0 0 1px rgba(180,168,255,.22); }
body.espace-client .sidebar nav a.active::before, body.espace-client .sidebar nav a[aria-current="page"]::before,
body.espace-client .sidebar-mobile nav a.active::before, body.espace-client .sidebar-mobile nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 4px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--jeu-violet), var(--jeu-rose)); }
body.espace-client .sidebar nav a.active svg, body.espace-client .sidebar nav a[aria-current="page"] svg,
body.espace-client .sidebar-mobile nav a.active svg, body.espace-client .sidebar-mobile nav a[aria-current="page"] svg {
  color: #C9BEFF; }
body.espace-client .menu-pastille { background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose)); color: #fff;
  box-shadow: 0 2px 8px rgba(244,114,182,.30); }
body.espace-client .sidebar-section { color: var(--accent); border-top-color: rgba(255,255,255,.06); }
/* « Demander à l'IA » (bas du menu) : une pilule au liseré du jeu, l'étincelle colorée
   (retouche du fondateur, 29/10/2026 : « la forme n'est pas dans le thème »). */
body.espace-client .menu-ia-cote { border-radius: var(--radius-pill); padding: 9px 14px; color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(100deg, rgba(139,127,224,.26), rgba(244,114,182,.14)) padding-box,
              linear-gradient(100deg, rgba(180,168,255,.70), rgba(244,114,182,.55)) border-box;
  box-shadow: 0 6px 18px -6px rgba(139,127,224,.55); }
body.espace-client .menu-ia-cote svg { color: #F9A8D4; }
body.espace-client .menu-ia-cote:hover, body.espace-client .menu-ia--cote[open] > .menu-ia-cote {
  background: linear-gradient(100deg, rgba(139,127,224,.40), rgba(244,114,182,.24)) padding-box,
              linear-gradient(100deg, rgba(200,190,255,.90), rgba(244,114,182,.75)) border-box;
  border-color: transparent; }
body.espace-client .sidebar-profile-card { border-radius: 14px; }
body.espace-client .sidebar-profile-avatar { background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose)); }

@media (prefers-reduced-motion: reduce) {
  body.espace-client .btn-primary:hover:not(:disabled) { transform: none; }
}


/* ── LE CHAMP DE FICHIER (30/10/2026) ─────────────────────────────────────────
   Le bouton « Choisir un fichier » est dessiné par le navigateur (gris, carré) : il
   prend ici le format des boutons du thème (`.btn-secondary`, pilule de verre), pour
   TOUS les champs de fichier de l'espace client, une fois pour toutes. */
:is(body.espace-client, body.espace-public) input[type=file] { color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); }
:is(body.espace-client, body.espace-public) input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid rgba(180,168,255,.28); background: rgba(255,255,255,.05);
  color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500;
  cursor: pointer; transition: background .15s ease, border-color .15s ease; }
:is(body.espace-client, body.espace-public) input[type=file]::file-selector-button:hover {
  background: rgba(139,127,224,.16); border-color: rgba(180,168,255,.45); }

/* ── AUCUNE BARRE DE DÉFILEMENT VISIBLE (fondateur, 30/10/2026 : « partout ») ─────
   Dans tout l'espace client, page, panneaux, listes et le volet de la communauté.
   On défile toujours, à la molette, au doigt ou au clavier. */
html:has(body.espace-client), body.espace-client, body.espace-client * { scrollbar-width: none; }
body.espace-client ::-webkit-scrollbar, html:has(body.espace-client)::-webkit-scrollbar {
  display: none; width: 0; height: 0; }

/* ── LA BANDE DE MISE EN ROUTE, sur la page d'arrivée (31/10/2026,
   `partials/bandeau_mise_en_route.html`) : une ligne de verre, la progression, l'étape
   à faire et son bouton, toutes les étapes à un clic ; le rendez-vous pris dessous. ── */
.mer-bande { display: grid; gap: 10px; margin: 0 0 18px; padding: 12px 16px; border-radius: 18px;
  background: radial-gradient(120% 160% at 100% 0%, rgba(139,127,224,.18), transparent 60%), var(--card);
  border: 1px solid rgba(180,168,255,.22); }
.mer-bande-ligne { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.mer-bande-compte { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.mer-bande-compte span { color: var(--muted-foreground); font-weight: 500; }
.mer-bande-mots { flex: 1 1 220px; min-width: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.mer-bande-sur { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--accent); }
.mer-bande-etape { font-weight: 600; color: var(--foreground); }
.mer-bande-phrase { flex-basis: 100%; font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.45; }
.mer-bande-toutes { font-size: var(--text-sm); font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; }
.mer-bande-toutes:hover { text-decoration: underline; text-underline-offset: 3px; }
.mer-bande .mer-rdv { margin: 0; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.08); }

/* Le décompte de « Démarrer » : en clair, d'un seul tenant (un test le lit). */
.dm-compte-jeu { font-weight: 600; color: var(--foreground); font-variant-numeric: tabular-nums; }

/* ── LES MENUS DÉROULANTS (31/10/2026, fondateur en recette : « le menu déroulant n'est
   pas dans le thème de l'app ») : du verre sombre, des angles arrondis, un chevron
   violet, partout dans l'espace et sur les pages publiques. UNE règle pour tous les
   `select` ; une page qui en veut un plus petit garde sa hauteur et son rembourrage
   (seul le côté droit est réservé au chevron). ── */
:is(body.espace-client, body.espace-public) select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none; color: var(--foreground);
  border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding-right: 38px;
  background-color: rgba(255,255,255,.035);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4A8FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px 15px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
:is(body.espace-client, body.espace-public) select:not([multiple]):not([size]):hover { border-color: rgba(180,168,255,.40); }
:is(body.espace-client, body.espace-public) select:not([multiple]):not([size]):focus-visible {
  outline: none; border-color: rgba(180,168,255,.6); background-color: rgba(180,168,255,.06);
  box-shadow: 0 0 0 4px rgba(139,127,224,.18); }
:is(body.espace-client, body.espace-public) select option,
:is(body.espace-client, body.espace-public) select optgroup { background-color: #14151F; color: var(--foreground); }

/* ══ LES ÉCRANS DE RÉGLAGES AU THÈME (31/10/2026, fondateur en recette : « mettre les
   pages cadre d'un trader et stratégies dans le thème de la nouvelle app ») ══════════
   Une seule famille de pièces porte le cadre d'un trader, l'éditeur de ses étapes et la
   fiche d'une stratégie (`creation-guidee.css`, `strategies.css`) : on l'habille ICI,
   une fois, dans l'espace client. Les classes et les gestes ne changent pas. */

/* L'étape (le grand panneau d'un réglage, ou le récapitulatif du cadre) : du verre. */
body.espace-client .cg-etape {
  border-radius: var(--radius-xl); border-color: rgba(180,168,255,.20);
  background: radial-gradient(120% 90% at 100% 0%, rgba(139,127,224,.16), transparent 60%),
              radial-gradient(80% 70% at 0% 100%, rgba(244,114,182,.05), transparent 65%), var(--card);
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.85); }
body.espace-client .cg-titre { font-size: clamp(1.25rem, 2.4vw, 1.5rem); letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 40%, var(--accent) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Le cadre : chaque famille de réglages en carte de verre, son icône en orbe. */
body.espace-client .cadre-carte { margin-top: 18px; padding: 14px 16px 10px; border-radius: 18px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
body.espace-client .cadre-carte-titre > svg { box-sizing: content-box; padding: 7px; border-radius: 11px;
  color: #fff; background: linear-gradient(140deg, var(--jeu-violet), #A78BFA); box-shadow: 0 4px 14px rgba(139,127,224,.28); }
body.espace-client .cadre-carte--repliee > summary > svg { color: #fff; }
body.espace-client .cadre-carte--manque { border-color: rgba(251,191,36,.35); }
body.espace-client .cg-rg-liste { border-radius: 14px; overflow: hidden; border-color: rgba(255,255,255,.06);
  background: rgba(10,11,18,.35); }
body.espace-client .cg-rg { transition: background .15s ease; }
body.espace-client .cg-rg:hover { background: rgba(180,168,255,.06); }
body.espace-client .cg-rg-modifier { border-radius: var(--radius-pill); border-color: rgba(180,168,255,.30);
  color: var(--accent); background: rgba(180,168,255,.06); }
body.espace-client .cg-rg--cadre .cg-rg-modifier { border-radius: 50%; }
body.espace-client .cg-rg:hover .cg-rg-modifier, body.espace-client .cg-rg-modifier:hover {
  color: #fff; border-color: transparent; background: linear-gradient(100deg, #7C6FD8, #A78BFA); }

/* Les choix (cartes à cocher d'une étape) : du verre, le choix allumé brille. */
body.espace-client .cg-option { border-radius: 16px; background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.10); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
body.espace-client .cg-option:hover { border-color: rgba(180,168,255,.45); background: rgba(180,168,255,.05); }
body.espace-client .cg-option:has(input:checked) { border-color: rgba(180,168,255,.70);
  background: radial-gradient(120% 140% at 0% 0%, rgba(139,127,224,.22), transparent 60%), rgba(180,168,255,.06);
  box-shadow: 0 0 0 1px rgba(180,168,255,.35), 0 8px 22px -12px rgba(139,127,224,.6); }
body.espace-client .cg-option input { accent-color: #A78BFA; }

/* La fiche d'une stratégie : ses quatre parties en cartes, la partie ouverte s'allume. */
body.espace-client .st-repli { border-radius: 16px; border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025); transition: border-color .15s ease, background .15s ease; }
body.espace-client .st-repli:hover { border-color: rgba(180,168,255,.35); }
body.espace-client .st-repli[open] { border-color: rgba(180,168,255,.45);
  background: radial-gradient(120% 60% at 0% 0%, rgba(139,127,224,.12), transparent 60%), rgba(255,255,255,.025); }
body.espace-client .st-repli > summary::after { border-right-color: var(--accent); border-bottom-color: var(--accent); }
body.espace-client .st-repli-corps { border-top-color: rgba(255,255,255,.06); }

/* Les champs de saisie de l'espace : le verre des pages publiques. */
body.espace-client input[type=text], body.espace-client input[type=email], body.espace-client input[type=number],
body.espace-client input[type=tel], body.espace-client input[type=url], body.espace-client input[type=date],
body.espace-client input[type=time], body.espace-client input[type=password], body.espace-client input[type=search],
body.espace-client textarea {
  border-radius: 12px; border-color: rgba(255,255,255,.12); background-color: rgba(255,255,255,.035); }
body.espace-client input:not([type=checkbox]):not([type=radio]):not([type=range]):focus-visible,
body.espace-client textarea:focus-visible {
  outline: none; border-color: rgba(180,168,255,.6); box-shadow: 0 0 0 4px rgba(139,127,224,.18); }

/* La barre des étapes (le sommaire collant, et son bouton au téléphone) : du verre. */
body.espace-client .cg-pas-liste, body.espace-client .cg-pas-ouvrir {
  border-radius: 18px; border-color: rgba(180,168,255,.20);
  background: radial-gradient(120% 160% at 100% 0%, rgba(139,127,224,.14), transparent 60%), rgba(20,21,32,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.espace-client .cg-pas-lien { border-radius: 12px; }
body.espace-client .cg-pas-lien[aria-current] { color: #fff;
  background: linear-gradient(100deg, rgba(124,111,216,.35), rgba(167,139,250,.18)); }
body.espace-client .cg-pas-ouvrir-toutes { color: var(--accent); }

/* ── LES NOUVEAUTÉS ET LE PODIUM, À GAUCHE DU DÉFI (31/10/2026) : la carte du défi
   (`dj dj--integre`, posée en encart de verre dans l'en-tête par `user_traders.html`),
   teintée rose pour une nouveauté, or pour le podium. Toute la carte est le lien. ── */
.mt-annonce { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.mt-annonce:hover { transform: translateY(-1px); }
.mt-tete .jeu-tete-gestes .mt-annonce { border-color: rgba(244,114,182,.32);
  background: linear-gradient(120deg, rgba(244,114,182,.10), rgba(139,127,224,.06)); }
.mt-tete .jeu-tete-gestes .mt-annonce:hover { border-color: rgba(244,114,182,.55); }
.mt-annonce .dj-icone { color: #fff; background: linear-gradient(140deg, var(--jeu-rose), var(--jeu-violet));
  box-shadow: 0 6px 18px rgba(244,114,182,.30); }
.mt-annonce .dj-surtitre { color: #F9A8D4; }
.mt-annonce .dj-texte strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mt-tete .jeu-tete-gestes .mt-annonce--or { border-color: rgba(252,211,77,.34);
  background: linear-gradient(120deg, rgba(252,211,77,.10), rgba(139,127,224,.06)); }
.mt-annonce--or .dj-icone { color: #1a1406; background: linear-gradient(140deg, #FDE68A, var(--jeu-or-fonce));
  box-shadow: 0 6px 18px rgba(252,211,77,.28); }
.mt-annonce--or .dj-surtitre { color: var(--jeu-or); }
@media (prefers-reduced-motion: reduce) { .mt-annonce { transition: none; } }

/* ── LE BOUTON DE L'OFFRE, EN HAUT (31/10/2026, recette : « rendre l'en-tête harmonieux ») :
   une pilule de verre au liseré violet, plus un aplat clair qui pesait plus lourd que
   tout l'écran. ── */
body.espace-client .topbar-cta { border-radius: var(--radius-pill); color: var(--foreground);
  background: rgba(180,168,255,.10); border-color: rgba(180,168,255,.35); }
body.espace-client .topbar-cta svg { color: var(--accent); opacity: 1; }
body.espace-client .topbar-cta:hover { background: rgba(180,168,255,.18); border-color: rgba(180,168,255,.6); color: #fff; }