/* 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%; }
/* ⚠️ TOUTE LA LARGEUR (fondateur, 04/11/2026 : « que toutes les pages fassent la même
dimension », au choix proposé, « toute la largeur », comme Mes traders) : plus de
colonne de 960 ni de 1180 ; le plafond commun reste celui de `.wrap` (`--cadre`). */
.jeu-page { max-width: none; margin: 0 auto; width: 100%; display: grid; gap: 24px; }
.jeu-page--large { max-width: none; }
/* ── L'en-tête de page : le « héros » de chaque écran ──
* */
.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; }
/* Le décor se coupe LUI-MÊME au bord de l'en-tête : l'en-tête peut ainsi laisser passer
un menu ouvert (ci-dessous) sans que le flou déborde. */
.jeu-tete-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none;
overflow: hidden; border-radius: inherit; }
/* Un menu ouvert dans l'en-tête (les trois points d'un trader, une liste repliée) passe
par-dessus son bord au lieu d'y être tronqué (fondateur, 05/11/2026). */
.jeu-tete:has(details[open]) { overflow: visible; z-index: 30; }
.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%; }
/* La PETITE orbe (31/10/2026, demande de Contacts) : les initiales d'une personne dans
une liste de l'équipe, 32 px, ronde, ombre discrète (une liste en aligne des dizaines).
⚠️ Une seule pastille d'initiales pour toutes les listes : `ct-av`, `fc-av`, `bp-av`…
s'y rangent quand leur rubrique passe au style. */
.jeu-orbe--petit { width: 32px; height: 32px; border-radius: 50%; font-size: var(--text-xs); font-weight: 600;
letter-spacing: .02em; box-shadow: 0 3px 10px rgba(139,127,224,.25); }
.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); }
/* Rouge (31/10/2026, demande de Pilotage) : le rouge de la CHARTE, réservé à ce qu'il
dit déjà ailleurs (une erreur, un échec, un retard qui coûte), jamais pour animer. */
.jeu-chip--rouge { background: rgba(248,113,113,.12); color: var(--error); }
/* ── 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; }
.jeu-vide-gestes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* ── 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,
.jeu-reglages .reglage-groupe > summary > 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`.
⚠️ 30/10/2026 (fondateur : « reprendre l'espace collaborateur dans le même style ») :
tout ce format vaut AUSSI sur `body.espace-equipe`, SAUF le masquage des barres de
défilement (les grands tableaux du CRM défilent de côté : la barre y sert).
⚠️ 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, body.espace-equipe) .btn { border-radius: var(--radius-pill); font-weight: 600; height: 2.6em; padding: 0 1.25em; }
:is(body.espace-client, body.espace-public, body.espace-equipe) .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, body.espace-equipe) .btn.btn-icone-seule, :is(body.espace-client, body.espace-public, body.espace-equipe) .btn.btn-icon,
:is(body.espace-client, body.espace-public, body.espace-equipe) .btn-sm.btn-icone-seule { padding: 0; border-radius: 50%; }
:is(body.espace-client, body.espace-public, body.espace-equipe) .btn-icon { border-radius: 50%; }
/* Le geste principal : le dégradé du jeu, qui brille un peu. */
:is(body.espace-client, body.espace-public, body.espace-equipe) .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, body.espace-equipe) .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, body.espace-equipe) .btn-primary:active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
/* L'argent : le dégradé du geste principal, un peu plus haut (fondateur, recette du
02/11/2026 : « les boutons ne sont pas comme les boutons principaux »). Il était un
aplat lavande, pâle à côté des autres. Toujours un seul par écran (charte). */
:is(body.espace-client, body.espace-public, body.espace-equipe) .btn-fort { border-radius: var(--radius-pill); color: #fff;
border: 1px solid rgba(255,255,255,.14); min-height: 48px; font-size: var(--text-base);
background: linear-gradient(100deg, #7C6FD8, #A78BFA 55%, #C084FC);
box-shadow: 0 8px 22px rgba(139,127,224,.32), inset 0 1px 0 rgba(255,255,255,.18); }
:is(body.espace-client, body.espace-public, body.espace-equipe) .btn-fort:hover:not(:disabled) { color: #fff;
background: linear-gradient(100deg, #7C6FD8, #A78BFA 55%, #C084FC);
border-color: rgba(255,255,255,.24); filter: brightness(1.08); transform: translateY(-1px); }
:is(body.espace-client, body.espace-public, body.espace-equipe) .btn-fort:active:not(:disabled) { transform: translateY(0); filter: brightness(.96); }
/* Le geste d'à côté : du verre, un liseré. */
:is(body.espace-client, body.espace-public, body.espace-equipe) .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, body.espace-equipe) .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, body.espace-equipe) .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, body.espace-equipe) .seg { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); padding: 4px; }
:is(body.espace-client, body.espace-public, body.espace-equipe) .seg > * { font-size: var(--text-sm); font-weight: 500; }
:is(body.espace-client, body.espace-public, body.espace-equipe) .seg > [aria-selected="true"], :is(body.espace-client, body.espace-public, body.espace-equipe) .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, body.espace-equipe) .seg > [aria-selected="true"] .n, :is(body.espace-client, body.espace-public, body.espace-equipe) .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, body.espace-equipe) .filter-chip { border-radius: var(--radius-pill); }
/* ── La barre du haut : du verre, et un liseré lumineux ──
⚠️ Le flou vit sur `::before`, PAS sur la barre : un `backdrop-filter` posé sur elle
en ferait le cadre de tout ce qui est en `position: fixed` à l'intérieur (le bouton
rond de la bulle de l'équipe se retrouvait collé en haut au lieu d'en bas à droite). */
:is(body.espace-client, body.espace-equipe) .topbar { background: transparent; border-bottom: 1px solid transparent; }
:is(body.espace-client, body.espace-equipe) .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1;
pointer-events: none; background: rgba(15,15,26,.82);
background-image: radial-gradient(90% 220% at 15% 0%, rgba(139,127,224,.14), transparent 55%);
-webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
:is(body.espace-client, body.espace-equipe) .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; }
:is(body.espace-client, body.espace-equipe) .topbar-icon-btn { width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .topbar-cta, :is(body.espace-client, body.espace-equipe) .topbar-invite-btn { border-radius: var(--radius-pill); }
/* ── UNE ICÔNE QUI A DU NEUF BOUGE (fondateur, 02/11/2026 : « bien mettre en évidence
dès qu'il y a un nouvel élément dans les différentes icônes, et les faire bouger pour
que ça saute aux yeux et qu'on ait juste envie de cliquer ») ── UNE règle pour toutes :
une icône qui porte une pastille (succès, nouveautés, communauté) ou un compteur
visible (la cloche) s'allume, se balance toutes les quelques secondes, et sa pastille
respire. Au survol, elle se calme ; immobile sous `prefers-reduced-motion`. */
body.espace-client .topbar-icon-btn:has(.topbar-pastille, .topbar-compte, .cloche-compteur:not([hidden])) {
color: #fff; border-color: rgba(180,168,255,.55);
background: radial-gradient(circle at 50% 35%, rgba(180,168,255,.30), rgba(139,127,224,.10));
box-shadow: 0 0 14px -2px rgba(139,127,224,.65); }
body.espace-client .topbar-icon-btn:has(.topbar-pastille, .topbar-compte, .cloche-compteur:not([hidden])) > svg:not(.topbar-anneau) {
transform-origin: 50% 15%; animation: tb-balance 4.2s ease-in-out infinite; }
body.espace-client .topbar-icon-btn :is(.topbar-pastille, .topbar-compte, .cloche-compteur) {
animation: tb-respire 2.1s ease-out infinite; }
body.espace-client .topbar-icon-btn:hover > svg:not(.topbar-anneau),
body.espace-client .topbar-icon-btn:hover :is(.topbar-pastille, .topbar-compte, .cloche-compteur) { animation: none; }
@keyframes tb-balance {
0%, 70%, 100% { transform: rotate(0); }
74% { transform: rotate(-16deg) scale(1.12); } 78% { transform: rotate(13deg) scale(1.12); }
82% { transform: rotate(-9deg) scale(1.08); } 86% { transform: rotate(5deg); } 90% { transform: rotate(-2deg); } }
@keyframes tb-respire {
0% { box-shadow: 0 0 0 2px #0F0F1A, 0 0 0 2px rgba(244,114,182,.75); }
80%, 100% { box-shadow: 0 0 0 2px #0F0F1A, 0 0 0 9px rgba(244,114,182,0); } }
/* LA MISE EN ROUTE (02/11/2026, `topbar-mer`) : l'anneau autour de la fusée se remplit
d'une étape à l'autre, aux couleurs du liseré des cartes. */
body.espace-client .topbar-mer .topbar-anneau { position: absolute; inset: -4px; width: calc(100% + 8px);
height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
body.espace-client .topbar-mer .topbar-anneau circle { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 2.5; }
body.espace-client .topbar-mer .topbar-anneau circle.plein { stroke: var(--jeu-rose, #F472B6);
stroke-linecap: round; }
body.espace-client .topbar-mer .topbar-compte { min-width: 24px; }
@media (prefers-reduced-motion: reduce) {
body.espace-client .topbar-icon-btn > svg,
body.espace-client .topbar-icon-btn :is(.topbar-pastille, .topbar-compte, .cloche-compteur) { animation: none; } }
/* ── Le menu de gauche : l'entrée active s'allume ── */
:is(body.espace-client, body.espace-equipe) .sidebar { background: linear-gradient(180deg, rgba(139,127,224,.06), transparent 180px), var(--card); }
:is(body.espace-client, body.espace-equipe) .sidebar nav a, :is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a { position: relative; border-radius: 12px;
padding: 9px 12px; }
:is(body.espace-client, body.espace-equipe) .sidebar nav a svg, :is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a svg { transition: color .15s ease, transform .15s ease; }
:is(body.espace-client, body.espace-equipe) .sidebar nav a:hover, :is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a:hover { background: rgba(255,255,255,.05); }
:is(body.espace-client, body.espace-equipe) .sidebar nav a:hover svg, :is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a:hover svg { color: var(--accent); }
:is(body.espace-client, body.espace-equipe) .sidebar nav a.active, :is(body.espace-client, body.espace-equipe) .sidebar nav a[aria-current="page"],
:is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a.active, :is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .sidebar nav a.active::before, :is(body.espace-client, body.espace-equipe) .sidebar nav a[aria-current="page"]::before,
:is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a.active::before, :is(body.espace-client, body.espace-equipe) .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)); }
:is(body.espace-client, body.espace-equipe) .sidebar nav a.active svg, :is(body.espace-client, body.espace-equipe) .sidebar nav a[aria-current="page"] svg,
:is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a.active svg, :is(body.espace-client, body.espace-equipe) .sidebar-mobile nav a[aria-current="page"] svg {
color: #C9BEFF; }
:is(body.espace-client, body.espace-equipe) .menu-pastille { background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose)); color: #fff;
box-shadow: 0 2px 8px rgba(244,114,182,.30); }
:is(body.espace-client, body.espace-equipe) .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 »). */
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .menu-ia-cote svg { color: #F9A8D4; }
:is(body.espace-client, body.espace-equipe) .menu-ia-cote:hover, :is(body.espace-client, body.espace-equipe) .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; }
:is(body.espace-client, body.espace-equipe) .sidebar-profile-card { border-radius: 14px; }
:is(body.espace-client, body.espace-equipe) .sidebar-profile-avatar { background: linear-gradient(140deg, var(--jeu-violet), var(--jeu-rose)); }
@media (prefers-reduced-motion: reduce) {
:is(body.espace-client, body.espace-equipe) .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, body.espace-equipe) input[type=file] { color: var(--muted-foreground); font: inherit; font-size: var(--text-sm); }
:is(body.espace-client, body.espace-public, body.espace-equipe) 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, body.espace-equipe) 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 (31/10/2026) : ⚠️ PARTIE le 02/11/2026 (icône fusée de la
barre du haut, `admin_base.html`). Seul `.mer-rdv` sert encore (le rendez-vous pris, sur
« Démarrer ») ; le reste est à purger (`NOTES-positions-en-ligne.md`). ── */
.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, body.espace-equipe) 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, body.espace-equipe) select:not([multiple]):not([size]):hover { border-color: rgba(180,168,255,.40); }
:is(body.espace-client, body.espace-public, body.espace-equipe) 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, body.espace-equipe) select option,
:is(body.espace-client, body.espace-public, body.espace-equipe) 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. */
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .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. */
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .cadre-carte--repliee > summary > svg { color: #fff; }
:is(body.espace-client, body.espace-equipe) .cadre-carte--manque { border-color: rgba(251,191,36,.35); }
:is(body.espace-client, body.espace-equipe) .cg-rg-liste { border-radius: 14px; overflow: hidden; border-color: rgba(255,255,255,.06);
background: rgba(10,11,18,.35); }
:is(body.espace-client, body.espace-equipe) .cg-rg { transition: background .15s ease; }
:is(body.espace-client, body.espace-equipe) .cg-rg:hover { background: rgba(180,168,255,.06); }
:is(body.espace-client, body.espace-equipe) .cg-rg-modifier { border-radius: var(--radius-pill); border-color: rgba(180,168,255,.30);
color: var(--accent); background: rgba(180,168,255,.06); }
:is(body.espace-client, body.espace-equipe) .cg-rg--cadre .cg-rg-modifier { border-radius: 50%; }
:is(body.espace-client, body.espace-equipe) .cg-rg:hover .cg-rg-modifier, :is(body.espace-client, body.espace-equipe) .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. */
:is(body.espace-client, body.espace-equipe) .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; }
:is(body.espace-client, body.espace-equipe) .cg-option:hover { border-color: rgba(180,168,255,.45); background: rgba(180,168,255,.05); }
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .cg-option input { accent-color: #A78BFA; }
/* La fiche d'une stratégie : ses quatre parties en cartes, la partie ouverte s'allume. */
:is(body.espace-client, body.espace-equipe) .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; }
:is(body.espace-client, body.espace-equipe) .st-repli:hover { border-color: rgba(180,168,255,.35); }
:is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .st-repli > summary::after { border-right-color: var(--accent); border-bottom-color: var(--accent); }
:is(body.espace-client, body.espace-equipe) .st-repli-corps { border-top-color: rgba(255,255,255,.06); }
/* Les champs de saisie de l'espace : le verre des pages publiques.
⚠️ Poids d'UNE classe (`:where()` partout sauf la classe d'espace) : c'est un format
PAR DÉFAUT. Il l'emporte sur `.input` de la charte (chargée avant), pas sur une page
qui nomme son champ (`.ct-recherche input`, même chargée avant). Un champ qu'une page
dessine elle-même (la recherche des contacts, sans bord dans sa propre boîte) garde
le sien, au lieu de recevoir une seconde boîte dans la boîte. */
:where(body):is(.espace-client, .espace-equipe) :where(input[type=text], input[type=email], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=time], input[type=password], input[type=search],
textarea) {
border-radius: 12px; border-color: rgba(255,255,255,.12); background-color: rgba(255,255,255,.035); }
/* ⚠️ L'ANNEAU DU CURSEUR, MÊME POIDS LÉGER (04/11/2026, fondateur : « double cadre »).
Il pesait cinq classes : il passait devant tout champ qu'une page dessine elle-même
(la recherche de la communauté, dont la boîte entière s'allume), et y posait un
second cadre dans le cadre. Une classe et l'état, comme le format ci-dessus. */
:where(body):is(.espace-client, .espace-equipe) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea):focus-visible {
outline: none; border-color: rgba(180,168,255,.6); box-shadow: 0 0 0 4px rgba(139,127,224,.18); }
/* ⚠️ LES CHAMPS QUE LEUR BOÎTE DESSINE, NI VOILE NI ANNEAU (05/11/2026, fondateur :
« je ne veux pas de double cadre violet dans les zones où on tape »). Ces champs
sont nus, posés dans une boîte qui s'allume elle-même au curseur : l'anneau
ci-dessus ne pèse qu'une classe, mais aucune de ces pages ne déclare d'ombre,
donc il passait quand même et dessinait un second cadre violet dans le premier
(zone d'écriture de la communauté, bulle de messagerie, recherches…).
Même poids, posée APRÈS : elle l'emporte sur l'anneau et sur le voile, et
perd devant une page qui dessine son propre état (`.av-echange`, `.bp-zone`).
Un nouveau champ nu dans une boîte qui s'allume s'ajoute ICI, et nulle part ailleurs. */
:where(body):is(.espace-client, .espace-equipe) :where(
.cm-zone, .cm-quete-champ input, .chat-composeur textarea, .kb-cs-boite textarea,
.av-outils-recherche input, .bm-cherche input, .mj3-cherche input, .bp-note textarea,
.bp-props-cherche input, .ct-recherche input, .recherche-champ input, .topbar-search input,
.os-search-wrapper input, .filter-toolbar input[name="q"], .toolbar .searchbox input,
.prop-search input, .combobox-input, .aud-search-wrapper input, .sdc-chercher input) {
background-color: transparent; box-shadow: none; }
/* ⚠️ ET AU CURSEUR (08/11/2026, fondateur : « un encadré violet qui ne prend pas toute la
zone de texte, juste la première ligne »). La règle ci-dessus pèse une classe, l'anneau
en pèse DEUX au curseur (la classe ET `:focus-visible`) : il revenait dès qu'on cliquait.
Même liste, même état, posée après : la boîte seule s'allume. */
:where(body):is(.espace-client, .espace-equipe) :where(
.cm-zone, .cm-quete-champ input, .chat-composeur textarea, .kb-cs-boite textarea,
.av-outils-recherche input, .bm-cherche input, .mj3-cherche input, .bp-note textarea,
.bp-props-cherche input, .ct-recherche input, .recherche-champ input, .topbar-search input,
.os-search-wrapper input, .filter-toolbar input[name="q"], .toolbar .searchbox input,
.prop-search input, .combobox-input, .aud-search-wrapper input, .sdc-chercher input):focus-visible {
background-color: transparent; box-shadow: none; }
/* La barre des étapes (le sommaire collant, et son bouton au téléphone) : du verre. */
:is(body.espace-client, body.espace-equipe) .cg-pas-liste, :is(body.espace-client, body.espace-equipe) .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); }
:is(body.espace-client, body.espace-equipe) .cg-pas-lien { border-radius: 12px; }
:is(body.espace-client, body.espace-equipe) .cg-pas-lien[aria-current] { color: #fff;
background: linear-gradient(100deg, rgba(124,111,216,.35), rgba(167,139,250,.18)); }
:is(body.espace-client, body.espace-equipe) .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. ── */
:is(body.espace-client, body.espace-equipe) .topbar-cta { border-radius: var(--radius-pill); color: var(--foreground);
background: rgba(180,168,255,.10); border-color: rgba(180,168,255,.35); }
:is(body.espace-client, body.espace-equipe) .topbar-cta svg { color: var(--accent); opacity: 1; }
:is(body.espace-client, body.espace-equipe) .topbar-cta:hover { background: rgba(180,168,255,.18); border-color: rgba(180,168,255,.6); color: #fff; }
/* ── L'EN-TÊTE D'UNE RUBRIQUE DE L'ÉQUIPE (30/10/2026) : `partials/entree_tete.html`
pose le `jeu-tete` du kit sur les quarante écrans de l'équipe. Ici, sa seule
différence : les gestes (« + Nouveau contact », « Exporter ») se tiennent à DROITE
du titre sur grand écran, à leur place fixe d'un écran à l'autre, et passent dessous
au téléphone. La rangée des onglets, dessous, ne change pas (`quotidien.css`). ── */
.jeu-tete.et-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
gap: 10px 20px; margin: 4px 0 14px; }
.jeu-tete.et-tete .et-titre { display: grid; gap: 6px; min-width: 0; }
.jeu-tete.et-tete .jeu-surtitre { font-size: var(--text-eyebrow); }
.jeu-tete.et-tete > .et-outils { margin: 0; justify-content: flex-end; }
@media (max-width: 560px) {
/* Les outils posés à droite des onglets (un filtre d'équipe en .seg) débordaient au
téléphone : ils prennent la ligne entière, et leur pilule défile au lieu de pousser
la page (demande de Pilotage, 31/10/2026 ; remplace sa rustine locale). */
.et-rangee > .et-outils { flex: 1 1 100%; min-width: 0; margin-left: 0; }
.et-rangee > .et-outils .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.jeu-tete.et-tete { grid-template-columns: minmax(0, 1fr); }
.jeu-tete.et-tete > .et-outils { justify-content: flex-start; }
}
/* ── L'EN-TÊTE D'UNE FICHE DE L'ÉQUIPE (30/10/2026) : `partials/fiche_objet.html`
(achat, paiement, commission, retrait, compte). Le `jeu-tete`, plus serré ; le fil
« Argent / Paiements / … » en surtitre ; le titre en blanc plein, parce qu'il porte
la pastille d'état. ── */
.jeu-tete--fiche { padding: 16px 20px 14px; gap: 0; }
.jeu-tete--fiche .sec-body { position: relative; }
.jeu-tete--fiche .admin-bcr { font-family: var(--font-mono); font-size: var(--text-eyebrow);
letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--accent); }
.jeu-tete--fiche .admin-bcr b { color: var(--accent); font-weight: 600; }
.jeu-tete--fiche h1 { background: none; color: var(--foreground); -webkit-background-clip: border-box;
background-clip: border-box; font-size: clamp(1.3rem, 2.6vw, 1.6rem); font-weight: 600; margin: 4px 0 6px; }
.jeu-tete--fiche .lede { color: var(--muted-foreground); font-weight: 400; font-size: var(--text-body-sm); }
/* ── LA RANGÉE DE CHIFFRES DES LISTES DE L'ÉQUIPE (30/10/2026) : `.kpi-strip--hero4/5`
(Argent, Campagnes, Événements). Les cartes prennent la forme de la `jeu-tuile` du
kit ; leur couleur (vert, orange, rouge, violet) garde son sens, en liseré à gauche
qui suit l'arrondi. Aucune page n'a rien à changer. ── */
body.espace-equipe :is(.kpi-card--hero, .kpi-card--accent) {
border-radius: 16px; border: 1px solid var(--border); padding: 14px 16px;
box-shadow: inset 3px 0 0 var(--kpi-teinte, var(--accent)); }
body.espace-equipe .kpi-card--accent.green { --kpi-teinte: var(--success); }
body.espace-equipe .kpi-card--accent.amber { --kpi-teinte: var(--warning); }
body.espace-equipe .kpi-card--accent.red { --kpi-teinte: var(--error); }
body.espace-equipe .kpi-card--accent.slate { --kpi-teinte: var(--muted-foreground); }
body.espace-equipe :is(.kpi-card--hero, .kpi-card--accent):hover { border-color: rgba(180,168,255,.40); }
body.espace-equipe .kpi-card--accent .ka-lbl { font-family: var(--font-mono); letter-spacing: var(--tracking-eyebrow);
font-size: var(--text-eyebrow); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
body.espace-equipe :is(.kpi-card--hero, .kpi-card--accent):hover { transform: none; }
}
/* Le lien de retour en surtitre (`entree_tete(retour=…)`, 31/10/2026). */
.jeu-tete .et-retour { color: inherit; text-decoration: none; }
.jeu-tete .et-retour:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* ── UNE VALEUR EN LECTURE SEULE, DANS UNE FICHE DE L'ÉQUIPE (31/10/2026, demande
d'Argent) : `.field-tight .fi--lecture` avait le fond et le cadre d'un champ à
remplir, et le comptable croyait pouvoir la modifier. C'est du TEXTE : sur le fond de
la carte, sans cadre, son libellé au-dessus. ── */
body.espace-equipe .field-tight .fi--lecture { background: transparent; border-color: transparent;
box-shadow: none; padding-left: 0; padding-right: 0; color: var(--foreground); cursor: default;
height: auto; min-height: 0; flex-wrap: wrap; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
/* Au téléphone, une valeur de deux lignes (« Entrepreneur individuel », une adresse)
chevauchait le libellé suivant : la hauteur suit le texte (ci-dessus), et les fiches
de l'équipe passent leurs couples de champs sur UNE colonne. */
@media (max-width: 480px) { body.espace-equipe .grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* ══ LE VOLET (31/10/2026) : la carte flottante à droite, sous la barre du haut, qui
reste ouverte d'une page à l'autre. Né du volet de la communauté (côté client), partagé
avec la barre du contact de l'équipe : UNE pièce, deux usages.
*
* Ouvert, la page porte `body.jeu-volet-ouvert` (la communauté : `body.cv-ouvert`) ; au clic
* qui l'ouvre, `body.jeu-volet-anime` (`cv-anime`) le fait glisser. Grand écran (≥ 1 280) :
* la page se pousse, le volet ne cache rien ; en dessous, il passe par-dessus ;
* au téléphone, plein écran sous la barre.
* ⚠️ `jeu-volet-ouvert`, PAS `volet-ouvert` : ce nom-là est celui de la FENÊTRE DU
* CENTRE (`volet.js`, voile sombre de `journee-rc.css`, Échap de la bulle). ══ */
body { --volet-large: 420px; --volet-air: 12px; }
.jeu-volet { position: fixed; z-index: 140;
top: calc(var(--volet-haut, var(--cv-haut, 56px)) + var(--volet-air)); right: var(--volet-air); bottom: var(--volet-air);
width: var(--volet-large); max-width: calc(100vw - 2 * var(--volet-air));
display: flex; flex-direction: column; overflow: hidden; background: var(--card);
border: 1px solid var(--volet-liseré, rgba(180, 168, 255, .22)); border-radius: var(--radius-xl);
box-shadow: 0 24px 60px -12px rgba(5, 6, 10, .75), 0 0 0 1px var(--volet-lueur, rgba(180, 168, 255, .03)); }
.jeu-volet[hidden] { display: none; }
.jeu-volet--cyan { --volet-liseré: rgba(103, 232, 249, .22); --volet-lueur: rgba(103, 232, 249, .03); }
:is(body.jeu-volet-anime, body.cv-anime) .jeu-volet { animation: jeu-volet-entre .22s var(--ease-out, ease-out); }
@keyframes jeu-volet-entre { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1280px) {
body:is(.jeu-volet-ouvert, .cv-ouvert):not(.cv-grand) .main { margin-right: calc(var(--volet-large) + var(--volet-air)); }
}
@media (max-width: 640px) {
.jeu-volet { top: var(--volet-haut, var(--cv-haut, 56px)); right: 0; bottom: 0; left: 0; width: 100vw; max-width: none;
border: 0; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { :is(body.jeu-volet-anime, body.cv-anime) .jeu-volet { animation: none; } }
/* Le surtitre d'une rubrique (`entree_tete`) : retour et sujet passent à la ligne d'un
bloc, jamais au milieu d'un mot (31/10/2026, vu par Réglages au téléphone). */
.jeu-tete .et-surtitre { flex-wrap: wrap; column-gap: 6px; row-gap: 2px; }
.jeu-tete .et-surtitre > * { white-space: nowrap; }
/* ── LES ONGLETS REPLIÉS (`entree_tete(onglets='replie')`, 31/10/2026, Réglages) : un
bouton à droite du titre ; ouvert, la liste des écrans de la rubrique, verticale,
défilante, l'écran ouvert allumé. Les liens sont ceux de la bande, rien d'autre. ── */
.et-replie { position: relative; }
.et-replie > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.et-replie > summary::-webkit-details-marker { display: none; }
.et-replie-chevron { transition: transform .15s ease; color: var(--accent); }
.et-replie[open] .et-replie-chevron { transform: rotate(180deg); }
.et-replie-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(320px, calc(100vw - 32px));
max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; border-radius: 16px;
background: var(--card); border: 1px solid rgba(180,168,255,.22); box-shadow: 0 24px 60px -12px rgba(5,6,10,.75); }
.et-replie-liste .seg--onglets { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
width: 100%; max-width: none; border: 0; background: transparent; padding: 0; gap: 2px; overflow: visible; mask-image: none; }
.et-replie-liste .seg--onglets > a { justify-content: space-between; border-radius: 10px; padding: 8px 12px; white-space: normal; }
@media (max-width: 560px) {
.et-replie, .et-replie > summary { width: 100%; justify-content: center; }
.et-replie-liste { left: 0; right: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .et-replie-chevron { transition: none; } }
/* ── LE CHAT D'ASSISTANCE, COMME SUR LE SITE (fondateur, 02/11/2026 : « revois
l'esthétique du chat d'assistant pour qu'il soit comme sur le site ») ──────────────
La vitrine a reçu le thème du jeu le 30/10 (`landing/chat.css`, « LE THÈME DU JEU ») ;
la bulle de l'espace (`chat.css`) l'avait gardée sobre. Mêmes valeurs ici : le rond au
dégradé violet vers rose et au liseré lumineux, le panneau de verre, l'en-tête teinté
et son filet violet, rose, or, le médaillon en dégradé, mes messages teintés. Le
bouton « Envoyer » est déjà un `.btn-primary` du jeu. Ouverte, la bulle n'appelle
plus : elle repasse en gris, comme sur le site. */
body.espace-client .chat-lanceur { color: #fff; border: 1px solid transparent;
background: linear-gradient(140deg, rgba(139,127,224,.55), rgba(244,114,182,.30)) padding-box,
linear-gradient(140deg, rgba(200,190,255,.85), rgba(244,114,182,.70)) border-box;
box-shadow: 0 12px 32px -10px rgba(139,127,224,.75), 0 2px 8px rgba(0,0,0,.35); }
body.espace-client .chat-lanceur:hover { color: #fff; border-color: transparent;
background: linear-gradient(140deg, rgba(139,127,224,.75), rgba(244,114,182,.42)) padding-box,
linear-gradient(140deg, rgba(220,212,255,.95), rgba(244,114,182,.85)) border-box;
box-shadow: 0 16px 36px -10px rgba(139,127,224,.85), 0 2px 8px rgba(0,0,0,.35); }
body.espace-client .chat-ouvert .chat-lanceur, body.espace-client .chat-ouvert .chat-lanceur:hover {
background: var(--muted); border-color: var(--border-strong); color: var(--muted-foreground);
box-shadow: 0 4px 14px rgba(0,0,0,.35); }
body.espace-client .chat-panneau { border-color: rgba(180,168,255,.24); border-radius: 22px;
background: radial-gradient(120% 60% at 100% 0%, rgba(139,127,224,.10), transparent 60%), var(--card);
box-shadow: 0 28px 70px -14px rgba(0,0,0,.62), 0 0 0 1px rgba(139,127,224,.06),
0 20px 60px -30px rgba(139,127,224,.45); }
body.espace-client .chat-entete {
background: linear-gradient(158deg, rgba(139,127,224,.20) 0%, rgba(244,114,182,.05) 55%, rgba(255,255,255,.01) 80%); }
body.espace-client .chat-entete::before {
background: linear-gradient(90deg, rgba(139,127,224,.70), rgba(244,114,182,.50) 55%, rgba(252,211,77,.35) 80%, transparent); }
body.espace-client .chat-marque { color: #fff; border-color: rgba(255,255,255,.14);
background: linear-gradient(140deg, #8B7FE0, #F472B6); box-shadow: 0 6px 16px rgba(139,127,224,.35); }
body.espace-client .chat-mien .chat-bulle-msg {
background: linear-gradient(120deg, rgba(139,127,224,.30), rgba(167,139,250,.18));
border-color: rgba(180,168,255,.38); }
/* Les questions toutes prêtes : des pilules teintées de violet, comme sur le site. */
body.espace-client .chat-suggestion { border-radius: 999px; padding: 8px 14px; color: #CFC8FF;
background: rgba(139,127,224,.12); border-color: rgba(180,168,255,.24); }
body.espace-client .chat-suggestion:hover { color: #fff; background: rgba(139,127,224,.24);
border-color: rgba(180,168,255,.55); }
/* LE POINT D'ÉTAT d'une icône (02/11/2026, « Ma machine ») : vert quand c'est prêt,
orange quand c'est en cours. Un ÉTAT, pas « du neuf » : il ne pulse pas, l'icône ne
se balance pas (la règle d'au-dessus ne vise que `.topbar-pastille` et `.topbar-compte`). */
body.espace-client .topbar-etat { position: absolute; top: 1px; right: 1px; width: 9px; height: 9px;
border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px #0F0F1A, 0 0 8px rgba(74,222,128,.6); }
body.espace-client .topbar-etat--attente { background: var(--warning); box-shadow: 0 0 0 2px #0F0F1A, 0 0 8px rgba(251,191,36,.6); }
/* ── LA RECHERCHE DE LA BARRE DU HAUT, CLIENT ET ÉQUIPE (refaite le 07/11/2026,
fondateur : « pas du tout esthétique, et sur le téléphone elle s'affiche mal ») ──
UNE pilule de verre, la même dans les deux espaces (l'équipe gardait l'ancien
rectangle gris) : la loupe teintée de l'accent, un libellé court qui ne se coupe
plus, le raccourci en petite pastille (« Ctrl K » ou « ⌘K » selon le clavier,
`global-search.js`) qui s'efface quand on tape. Elle s'élargit au curseur. Ses
résultats : un panneau sombre, groupés (ses traders, les pages, une analyse, les
nouveautés, puis « Aller plus loin » : la communauté et l'assistant). */
:is(body.espace-client, body.espace-equipe) .topbar-search { width: auto; flex: 0 1 22em; min-width: 14em;
margin: 0 12px 0 auto; height: 34px; gap: 10px; padding: 0 4px 0 14px; cursor: text;
border-radius: var(--radius-pill); border: 1px solid rgba(180,168,255,.16);
background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
transition: flex-basis .22s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
:is(body.espace-client, body.espace-equipe) .topbar-search:hover { border-color: rgba(180,168,255,.32);
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); }
:is(body.espace-client, body.espace-equipe) .topbar-search:focus-within { flex-basis: 30em;
border-color: rgba(180,168,255,.55); background: rgba(139,127,224,.10);
box-shadow: 0 0 0 4px rgba(139,127,224,.14), 0 8px 24px -10px rgba(139,127,224,.45); }
:is(body.espace-client, body.espace-equipe) .topbar-search svg { color: #B4A8FF; opacity: .8; transition: opacity .15s ease; }
:is(body.espace-client, body.espace-equipe) .topbar-search:focus-within svg { opacity: 1; }
:is(body.espace-client, body.espace-equipe) .topbar-search input { min-width: 0; color: #fff; letter-spacing: .005em; }
:is(body.espace-client, body.espace-equipe) .topbar-search input::placeholder { color: rgba(255,255,255,.46);
text-overflow: ellipsis; }
:is(body.espace-client, body.espace-equipe) .topbar-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); cursor: pointer; }
:is(body.espace-client, body.espace-equipe) .topbar-search .kbd { flex: none; display: inline-flex; align-items: center;
height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-family: var(--font-sans);
font-size: var(--text-2xs); font-weight: 500; letter-spacing: .02em; white-space: nowrap;
color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
transition: opacity .15s ease; }
:is(body.espace-client, body.espace-equipe) .topbar-search:focus-within .kbd { opacity: 0; }
/* Le champ DANS la pilule n'a ni fond ni cadre à lui (02/11/2026, fondateur : « je n'aime
pas le double cadre ») : le style général des champs de recherche l'habillait aussi. */
:is(body.espace-client, body.espace-equipe) .topbar-search input[type="search"],
:is(body.espace-client, body.espace-equipe) .topbar-search input[type="search"]:focus {
background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none;
height: auto; min-height: 0; padding: 0; }
body.espace-client .global-search-popover { z-index: 230; background: #14161F; border-color: rgba(180,168,255,.24);
border-radius: 16px; padding: 8px; box-shadow: 0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(139,127,224,.06); }
body.espace-client .global-search-popover .gs-item { border-radius: 10px; }
body.espace-client .global-search-popover .gs-item:hover,
body.espace-client .global-search-popover .gs-item.active { background: rgba(139,127,224,.14); }
body.espace-client .global-search-popover .gs-icon { border-radius: 8px; background: rgba(139,127,224,.16); color: #CFC8FF; }
body.espace-client .global-search-popover .gs-item--action .gs-icon { color: #fff;
background: linear-gradient(140deg, #8B7FE0, #F472B6); }
body.espace-client .global-search-popover mark { background: rgba(244,114,182,.22); color: #fff; }
body.espace-client .global-search-popover .gs-group-label { color: var(--accent); }
/* Le menu passe en tiroir sous 1024 points, et la feuille de l'équipe y cache sa barre :
celle du client reste ENTIÈRE tant qu'elle a la place (fondateur, 02/11/2026 :
« regarde la barre de recherche » : réduite à une loupe sur un écran large, elle
s'affichait mal). */
@media (max-width: 1023px) and (min-width: 700px) {
body.espace-client .topbar-search--client { display: flex; }
}
/* Au téléphone (sous 700 points) : une LOUPE ronde, la jumelle des icônes voisines
(`.topbar-icon-btn`). Touchée, la barre du haut DEVIENT la recherche : la pilule
prend toute la largeur, le reste de la barre s'efface, « Annuler » la referme. */
@media (max-width: 699px) {
body.espace-client .topbar-search--client { display: flex; flex: none; width: 34px; min-width: 0; height: 34px;
margin: 0 6px 0 auto; padding: 0; gap: 0; justify-content: center; cursor: pointer;
position: relative; z-index: 1; /* au-dessus de l'anneau du rond voisin, qui le rognait */
border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.05); box-shadow: none; }
body.espace-client .topbar-search--client svg { color: rgba(255,255,255,.85); opacity: 1; }
body.espace-client .topbar-search--client input,
body.espace-client .topbar-search--client .kbd { width: 0; padding: 0; border: 0; opacity: 0; }
body.espace-client .topbar-search--client .kbd { display: none; }
body.espace-client .topbar-search--client:focus-within { position: fixed; z-index: 210;
top: 9px; left: 12px; right: 86px; width: auto; height: 38px;
padding: 0 12px 0 14px; gap: 10px; justify-content: flex-start; cursor: text;
background: #191A28; border-color: rgba(180,168,255,.55);
box-shadow: 0 0 0 4px rgba(139,127,224,.14); }
body.espace-client .topbar-search--client:focus-within svg { color: #B4A8FF; }
body.espace-client .topbar-search--client:focus-within input { width: auto; flex: 1; opacity: 1;
font-size: 16px; /* 16 : sous ce corps, iPhone zoome toute la page au toucher */ }
body.espace-client .topbar-search--client:focus-within .topbar-search-fermer {
display: inline-flex; align-items: center; position: absolute; right: -78px; top: 0; height: 38px;
padding: 0 4px; background: none; border: 0; color: #CFC8FF; font: inherit;
font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
body.espace-client .topbar-inner:has(.topbar-search--client:focus-within) > :not(.topbar-search) { visibility: hidden; }
}
/* ── LA PRÉSENTATION DE L'OFFRE, UNE SEULE (02/11/2026, fondateur : « une seule
présentation de l'offre, aux deux endroits ») : l'écran de l'offre du nouveau venu
(`bienvenue_offre.html`) et la page de paiement (`abonnement.html`) lisent ces pièces
et le partiel `partials/offre_pieces.html`. Dessin repris de la page de paiement
(chantier offre-unique). Le choix au mois ou à l'année se fait sans script : des
radios `#pa-mois` / `#pa-an` et `:has`. ── */
.pa-carte { padding: clamp(22px, 3vw, 30px); display: grid; gap: 0; }
.pa-segment { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 0 0 22px;
border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--border-strong); }
.pa-segment input { position: absolute; opacity: 0; pointer-events: none; }
/* Le libellé à la taille du texte courant, l'économie en pastille SUR la même ligne :
les deux boutons ont la même hauteur, et le mot remplit le bouton. */
.pa-segment label { display: flex; align-items: center; justify-content: center; gap: 8px;
flex-wrap: wrap; min-height: 46px; padding: 6px 10px; border-radius: 999px; cursor: pointer;
font-size: var(--text-base); font-weight: 500; color: var(--muted-foreground); }
.pa-segment label small { font-size: var(--text-xs); font-weight: 600; color: var(--success);
padding: 2px 8px; border-radius: 999px; background: rgba(74,222,128,.12); }
.pa-segment input:checked + label { background: linear-gradient(100deg, #7C6FD8, #A78BFA);
color: #fff; font-weight: 600; }
.pa-segment input:checked + label small { color: #fff; background: rgba(255,255,255,.18); }
.pa-segment input:focus-visible + label { outline: 2px solid var(--ring); outline-offset: 2px; }
.pa-carte .pa-si-an { display: none; }
.pa-carte:has(#pa-an:checked) .pa-si-an { display: block; }
.pa-carte:has(#pa-an:checked) .pa-si-mois { display: none; }
.pa-carte:has(#pa-an:checked) div.pa-prix.pa-si-an { display: flex; }
.pa-nom { margin: 0; font-size: var(--text-sm); letter-spacing: .12em; text-transform: uppercase;
color: var(--accent); font-weight: 500; }
.pa-prix { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 8px 0 0; }
.pa-montant { font-size: calc(clamp(40px, 6vw, 52px) * var(--echelle-texte, 1)); font-weight: 600;
letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.pa-unite { font-size: var(--text-base); color: var(--muted-foreground); }
.pa-carte .pa-sous { margin: 8px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.pa-inclus { list-style: none; margin: 20px 0 0; padding: 18px 0 0; display: grid; gap: 9px;
border-top: 1px solid var(--border); }
.pa-inclus li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm);
line-height: 1.45; color: var(--muted-foreground); }
.pa-inclus li b { color: var(--foreground); font-weight: 500; }
.pa-inclus svg { flex: 0 0 auto; margin-top: 1px; color: var(--success); }
.pa-calendrier { list-style: none; margin: 20px 0 0; padding: 14px 16px; display: grid; gap: 8px;
border-radius: 14px; background: var(--background); border: 1px solid var(--border-strong); }
.pa-calendrier li { display: flex; justify-content: space-between; gap: 12px;
font-size: var(--text-sm); color: var(--muted-foreground); }
.pa-calendrier li b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums;
white-space: nowrap; }
.pa-calendrier li.pa-auj, .pa-calendrier li.pa-auj b { color: var(--success); font-weight: 600; }