/* ============================================================
   OPTERIA : démo interactive /demo (14/10/2026, demande Axel). Préfixe dx-.
   Écran de chargement façon jeu vidéo, bureau simulé (conversation + outils), gamification.
   Référence : fenêtres d'application de gleap.ai posées sur nos peintures. Filets 1 px, AUCUNE ombre portée ni halo.
   Animations : transform et opacity uniquement ; prefers-reduced-motion respecté en bas de fichier.
   ============================================================ */

/* ---------- Écran de chargement ---------- */
.dx-charge { display: none; }
html:is(.dx-chargement, .dx-ecran-titre) .dx-charge { display: flex; }
html:is(.dx-chargement, .dx-ecran-titre) body { overflow: hidden; }
html:is(.dx-chargement, .dx-ecran-titre) :is(.mesure, .bw-lanceur, .bw-pop) { visibility: hidden; }
.dx-charge { position: fixed; inset: 0; z-index: 1000; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: #fff; color: #0d0f14; text-align: center;
  animation: dx-secours .4s ease 10.5s forwards; /* si le script ne se charge pas : l'écran s'efface seul */ }
html[data-theme="nuit"] .dx-charge { background: #0e0e0e; color: #f4f4f2; }
@keyframes dx-secours { to { opacity: 0; visibility: hidden; } }
html.dx-ecran-titre .dx-charge { animation: none; } /* script chargé : le menu reste affiché jusqu'au clic du visiteur, jamais de sortie à la minute */
.dx-charge.est-sorti { opacity: 0; visibility: hidden; transition: opacity .7s cubic-bezier(.22,1,.36,1), visibility 0s linear .7s; }
.dx-charge.est-sorti .dx-charge__scene { transform: translateY(-10px) scale(.97); transition: transform .7s cubic-bezier(.22,1,.36,1); }
.dx-charge__scene { display: flex; flex-direction: column; align-items: center; }
.dx-charge__bobby { position: relative; translate: 16.3% 0; /* Bobby centré, le bureau dépasse à droite (Axel, 15/10/2026) */ width: clamp(150px, 19vw, 210px); aspect-ratio: 465 / 640; transform-origin: 50% 100%; animation: dx-balance 4.2s ease-in-out infinite; }
.dx-charge__bobby img { display: block; width: 100%; height: 100%; animation: dx-respire 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.dx-charge__antenne { position: absolute; left: calc(33.4% - 3.4%); top: calc(2.2% - 2.4%); width: 6.8%; aspect-ratio: 1; border-radius: 50%; background: #FF7B4F; opacity: 0; animation: dx-clignote 1.6s ease-in-out infinite; }
.dx-charge__eclats { position: absolute; left: 55%; top: 0; width: 24%; height: 17%; overflow: visible; }
.dx-charge__eclats path { stroke: #FB4D17; stroke-width: 5; stroke-linecap: round; fill: none; transform-box: fill-box; transform-origin: 0% 100%; animation: dx-eclat 1.8s ease-in-out infinite; }
.dx-charge__eclats path:nth-child(2) { animation-delay: .18s; } .dx-charge__eclats path:nth-child(3) { animation-delay: .36s; }
@keyframes dx-balance { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes dx-respire { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
@keyframes dx-clignote { 0%, 55%, 100% { opacity: 0; } 70%, 85% { opacity: .9; } }
@keyframes dx-eclat { 0%, 100% { opacity: .25; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.08); } }
/* Bobby 3D en temps réel (bobby-3d.js) : carré de 320 px (220 px sur téléphone), l'image fixe reste en repli */
html.dx-3d .dx-charge__bobby { width: 320px; aspect-ratio: 1; animation: none; }
html.dx-3d .dx-charge__bobby > :is(.dx-charge__antenne, .dx-charge__eclats) { display: none; }
html.dx-3d .dx-charge__bobby > img { width: auto; height: 100%; margin: 0 auto; transition: opacity .5s ease; }
html.dx-3d:not(.dx-3d-pret) .dx-charge__bobby > img { opacity: 0; animation: dx-fondu .4s ease .9s forwards; } /* image d'attente seulement si le 3D tarde */
html.dx-3d.dx-3d-pret .dx-charge__bobby > img { opacity: 0; animation: none; }
.dx-charge__3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(.97); transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.dx-charge__3d.est-pret { opacity: 1; transform: none; }
html:not(.dx-3d) .dx-charge__3d { display: none; }
html.dx-3d .dx-charge__3d.est-pret { animation: dx-fondu .6s ease both; }
html.dx-3d .dx-charge__phrase { margin-top: 18px; }
@media (max-width: 760px) { html.dx-3d .dx-charge__bobby { width: 220px; } }
.dx-charge__phrase { text-wrap: balance; margin: 34px 0 0; font-family: var(--font); font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.dx-charge__phrase span { color: #FB4D17; }
.dx-charge__astuce { position: relative; height: 20px; margin: 14px 0 0; overflow: hidden; font-family: var(--mono); font-size: 13px; letter-spacing: .01em; color: #8a8a8f; min-width: 280px; }
.dx-charge__astuce span { position: absolute; inset: 0; transition: opacity .35s ease, transform .35s ease; }
.dx-charge__astuce span.est-sortant { opacity: 0; transform: translateY(-8px); }
.dx-charge__astuce span.est-entrant { opacity: 0; transform: translateY(8px); }
.dx-charge__barre { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.dx-charge__piste { position: relative; width: clamp(180px, 22vw, 260px); height: 2px; border-radius: 2px; background: rgba(13,15,20,.08); overflow: hidden; }
html[data-theme="nuit"] .dx-charge__piste { background: rgba(255,255,255,.12); }
.dx-charge__piste i { position: absolute; inset: 0; background: #FB4D17; transform-origin: 0 50%; transform: scaleX(0); }
.dx-charge__pct { width: 36px; font-family: var(--mono); font-size: 12px; color: #8a8a8f; text-align: left; font-variant-numeric: tabular-nums; }
.dx-charge__passer { position: absolute; right: 24px; bottom: 22px; padding: 8px 12px; border: 0; border-radius: 999px; background: none; font: 500 13px var(--font); color: #8a8a8f; cursor: pointer; }
.dx-charge__passer:hover { color: #0d0f14; } html[data-theme="nuit"] .dx-charge__passer:hover { color: #fff; }
.dx-charge__passer:focus-visible { outline: 2px solid #FB4D17; outline-offset: 2px; }
.dx-charge__marque { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #b4b4b8; }
html[data-theme="nuit"] .dx-charge__marque { color: #5a5a5d; }

/* ---------- En-tête de page ---------- */
.dx-hero { padding: 72px 0 28px; text-align: center; background: var(--paper); }
.dx-hero .cv-hero__sous { margin-top: 20px; }
.dx-bref { max-width: 860px; margin: 30px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14.5px; color: var(--muet, var(--ink-2)); }
.dx-bref li { display: flex; align-items: center; gap: 8px; }
.dx-bref li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #FB4D17; flex: none; }
.dx-bref__titre { flex-basis: 100%; justify-content: center; margin: 0 0 2px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.dx-bref__titre::before { display: none; }

/* ---------- Scène : la fenêtre posée sur une peinture ---------- */
.dx-sec { padding: 20px 0 84px; background: var(--paper); }
.dx-scene { position: relative; isolation: isolate; max-width: 1320px; margin: 0 auto; padding: 32px; border-radius: 20px; overflow: hidden; scroll-margin-top: 78px; }
.page-demo-xp .bw-pop { display: none !important; } /* pas de pop-up du chat par-dessus la démo */
.dx-scene .cv-peinture { transform: scale(1.03); }
.dx-note { max-width: 760px; margin: 18px auto 0; font-size: 13px; color: var(--ink-3); text-align: center; }
.dx-sansjs { padding: 60px 24px; text-align: center; }
html.js .dx-sansjs { display: none; }

/* ---------- La fenêtre ---------- */
.dx { --dx-fond: #fff; --dx-fond-2: #f7f7f5; --dx-fond-3: #efefec; --dx-ligne: #e8e8e4; --dx-ligne-2: #dcdcd6; --dx-encre: #0d0f14; --dx-texte: #2c2c30; --dx-muet: #6b6b70; --dx-pale: #9a9a9f;
  --dx-or: #FB4D17; --dx-or-texte: #d63c0c; --dx-or-pale: #fff1eb; --dx-vert: #2f9e55; --dx-vert-pale: #e9f6ee; --dx-ambre: #b7791f; --dx-ambre-pale: #fdf4e3; --dx-bleu: #3a6fd8; --dx-bleu-pale: #edf2fd;
  position: relative; display: flex; flex-direction: column; height: clamp(560px, calc(100svh - 160px), 760px); border-radius: 16px; background: var(--dx-fond); color: var(--dx-texte); border: 1px solid rgba(13,15,20,.08);
  font-family: var(--font); font-size: 14px; line-height: 1.45; overflow: hidden; color-scheme: light; text-align: left; }
html[data-theme="nuit"] .dx { --dx-fond: #181818; --dx-fond-2: #1f1f1f; --dx-fond-3: #282828; --dx-ligne: #2c2c2c; --dx-ligne-2: #3a3a3a; --dx-encre: #f6f6f4; --dx-texte: #e4e4e1; --dx-muet: #a3a3a0; --dx-pale: #77777a;
  --dx-or-texte: #ff8a5c; --dx-or-pale: rgba(251,77,23,.16); --dx-vert: #4cc276; --dx-vert-pale: rgba(76,194,118,.14); --dx-ambre: #e6b35c; --dx-ambre-pale: rgba(230,179,92,.14); --dx-bleu: #8fb0ff; --dx-bleu-pale: rgba(143,176,255,.14);
  border-color: rgba(255,255,255,.1); color-scheme: dark; }
.dx :is(p, ul, ol, h2, h3, h4, figure) { margin: 0; }
.dx ul, .dx ol { list-style: none; padding: 0; }
.dx button { font: inherit; color: inherit; }
.dx :is(button, a, input, [tabindex]):focus-visible { outline: 2px solid var(--dx-or); outline-offset: 2px; }
.dx [hidden] { display: none !important; }

/* barre de titre + tableau de bord du joueur */
.dx-barre { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 14px 8px 18px; border-bottom: 1px solid var(--dx-ligne); flex: none; }
.dx-barre__points { display: flex; gap: 6px; flex: none; } .dx-barre__points i { width: 10px; height: 10px; border-radius: 50%; background: var(--dx-fond-3); }
.dx-barre__titre { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--dx-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-barre__fictif { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--dx-fond-2); border: 1px solid var(--dx-ligne); font-size: 11.5px; font-weight: 500; color: var(--dx-muet); }
.dx-hud { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.dx-niveau { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; }
.dx-niveau__pastille { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--dx-or); color: #fff; font: 600 12px var(--mono); }
.dx-niveau__txt { display: flex; flex-direction: column; gap: 3px; min-width: 128px; }
.dx-niveau__nom { font-size: 12.5px; font-weight: 600; color: var(--dx-encre); line-height: 1; white-space: nowrap; }
.dx-niveau__xp { position: relative; height: 4px; border-radius: 4px; background: var(--dx-fond-3); overflow: hidden; }
.dx-niveau__xp i { position: absolute; inset: 0; background: var(--dx-or); transform-origin: 0 50%; transform: scaleX(0); transition: transform .9s cubic-bezier(.22,1,.36,1); }
.dx-niveau__pts { font: 500 11px var(--mono); color: var(--dx-muet); white-space: nowrap; }
.dx-niveau.est-monte .dx-niveau__pastille { animation: dx-pop .6s cubic-bezier(.3,1.6,.5,1); }
.dx-compteur { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--dx-fond-2); border: 1px solid var(--dx-ligne); white-space: nowrap; }
.dx-compteur__n { display: inline-block; min-width: 1.4em; font: 600 14px var(--mono); color: var(--dx-encre); text-align: right; font-variant-numeric: tabular-nums; }
.dx-compteur__n.est-plus { animation: dx-pop .45s cubic-bezier(.3,1.6,.5,1); color: var(--dx-or-texte); }
.dx-compteur__lab { font-size: 12.5px; color: var(--dx-muet); }
.dx-ico-btn { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--dx-ligne); border-radius: 999px; background: var(--dx-fond); cursor: pointer; color: var(--dx-muet); transition: color .15s, background .15s, border-color .15s; }
.dx-ico-btn:hover { color: var(--dx-encre); background: var(--dx-fond-2); }
.dx-ico-btn svg { width: 16px; height: 16px; }
.dx-ico-btn[aria-pressed="true"] { color: var(--dx-or-texte); border-color: var(--dx-or); background: var(--dx-or-pale); }
.dx-ico-btn__n { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--dx-encre); color: var(--dx-fond); font: 600 10px/17px var(--mono); text-align: center; }
.dx-ico-btn--texte { width: auto; padding: 0 11px; font: 600 12px var(--mono); }
.dx-ico-btn.est-confirme { width: auto; padding: 0 11px; color: var(--dx-or-texte); border-color: var(--dx-or); font-size: 12px; font-weight: 600; }

/* écrans */
.dx-ecran { position: relative; flex: 1; min-height: 0; }

/* -- choix du métier -- */
.dx-choix { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 32px; text-align: center; overflow-y: auto; }
.dx-choix__tete { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 560px; }
.dx-choix__tete img { width: 92px; height: auto; }
.dx-choix__titre { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--dx-encre); }
.dx-choix__sous { color: var(--dx-muet); font-size: 15px; }
.dx-choix__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 16px; }
.dx-carte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 20px 18px; border: 1px solid var(--dx-ligne); border-radius: 16px; background: var(--dx-fond); text-align: left; cursor: pointer; transition: border-color .2s, transform .35s cubic-bezier(.22,1,.36,1), background .2s; }
.dx-carte:hover { border-color: var(--dx-or); transform: translateY(-3px); }
.dx-carte__img { position: absolute; right: 12px; top: 10px; width: 76px; height: 76px; object-fit: contain; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.dx-carte:hover .dx-carte__img { transform: rotate(-6deg) scale(1.06); }
.dx-carte__eyebrow { font: 500 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-or-texte); }
.dx-carte__nom { margin-top: 40px; font-size: 19px; font-weight: 600; color: var(--dx-encre); letter-spacing: -.01em; }
.dx-carte__sous { color: var(--dx-muet); font-size: 13.5px; }
.dx-carte__pied { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--dx-encre); }
.dx-carte__pied svg { width: 14px; height: 14px; transition: transform .25s; } .dx-carte:hover .dx-carte__pied svg { transform: translateX(3px); }
.dx-carte__prog { position: absolute; left: 20px; right: 20px; top: 20px; display: none; }
.dx-choix__bientot { font-size: 13px; color: var(--dx-pale); }

/* -- bureau -- */
.dx-bureau { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: 100%; }
.dx-chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--dx-ligne); background: var(--dx-fond); }
.dx-chat__tete { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--dx-ligne); flex: none; }
.dx-avatar { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--dx-or-pale); overflow: hidden; }
/* vignette carrée centrée sur la tête de Bobby (bobby-<pose>-tete.webp, Axel 15/10/2026) */
.dx-avatar img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .4s cubic-bezier(.3,1.5,.5,1); }
.dx-avatar img.est-cache { opacity: 0; transform: translateY(6px) scale(.9); }
.dx-avatar.est-bravo img { animation: dx-saute-av .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes dx-saute-av { 0%, 100% { transform: none; } 40% { transform: translateY(-5px) rotate(-6deg); } 70% { transform: rotate(3deg); } }
.dx-chat__qui { min-width: 0; }
.dx-chat__nom { font-weight: 600; color: var(--dx-encre); }
.dx-chat__statut { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dx-muet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-chat__statut i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--dx-vert); }
.dx-chat__statut.est-occupe i { background: var(--dx-or); animation: dx-pulse 1s ease-in-out infinite; }
.dx-chat__statut.est-attente i { background: var(--dx-ambre); }
.dx-prog { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.dx-prog__lab { font: 500 11px var(--mono); color: var(--dx-muet); white-space: nowrap; }
.dx-prog__seg { display: flex; gap: 3px; }
.dx-prog__seg i { width: 14px; height: 4px; border-radius: 4px; background: var(--dx-fond-3); transition: background .4s; }
.dx-prog__seg i.est-fait { background: var(--dx-or); }
.dx-prog__seg i.est-bonus { width: 10px; } .dx-prog__seg i.est-bonus.est-fait { background: var(--dx-encre); }

.dx-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; overscroll-behavior: contain; }
.dx-msg { max-width: 100%; animation: dx-entre .4s cubic-bezier(.22,1,.36,1) both; }
.dx-msg--vous { align-self: flex-end; max-width: 86%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--dx-encre); color: var(--dx-fond); }
.dx-msg--bobby { display: flex; gap: 9px; align-items: flex-start; color: var(--dx-texte); }
.dx-msg--bobby > .dx-msg__ico { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px; background: var(--dx-or); color: #fff; }
.dx-msg--bobby > .dx-msg__ico svg { width: 15px; height: 15px; }
.dx-msg__corps { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.dx-msg--systeme { align-self: center; font: 500 11.5px var(--mono); color: var(--dx-pale); text-align: center; }
.dx-points { display: flex; gap: 4px; align-items: center; height: 22px; }
.dx-points i { width: 6px; height: 6px; border-radius: 50%; background: var(--dx-pale); animation: dx-saut 1s ease-in-out infinite; }
.dx-points i:nth-child(2) { animation-delay: .15s; } .dx-points i:nth-child(3) { animation-delay: .3s; }
.dx-plan { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--dx-ligne); border-radius: 12px; background: var(--dx-fond-2); }
.dx-plan li { display: flex; align-items: center; gap: 9px; padding: 4px 4px; font-size: 13px; color: var(--dx-pale); transition: color .3s; }
.dx-plan li.est-encours { color: var(--dx-encre); }
.dx-plan li.est-fait { color: var(--dx-texte); }
.dx-coche { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--dx-ligne-2); transition: border-color .3s, background .3s; }
.dx-coche svg { position: absolute; inset: 2px; width: 9px; height: 9px; margin: auto; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s ease .1s; }
.est-encours > .dx-coche { border-color: var(--dx-or); border-right-color: transparent; animation: dx-tourne .8s linear infinite; }
.est-fait > .dx-coche { border-color: var(--dx-vert); background: var(--dx-vert); animation: dx-pop .4s cubic-bezier(.3,1.6,.5,1); }
.est-fait > .dx-coche svg { stroke-dashoffset: 0; }
.dx-valider { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--dx-or); border-radius: 12px; background: var(--dx-or-pale); }
.dx-valider__lab { display: flex; align-items: center; gap: 7px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-or-texte); }
.dx-valider__lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--dx-or); animation: dx-pulse 1.2s ease-in-out infinite; }
.dx-valider__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border: 1px solid var(--dx-encre); border-radius: 999px; background: var(--dx-encre); color: var(--dx-fond) !important; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, opacity .2s; }
.dx-btn:hover { transform: translateY(-1px); }
.dx-btn:active { transform: translateY(1px) scale(.98); }
.dx-btn svg { width: 14px; height: 14px; }
.dx-btn--ghost { background: var(--dx-fond); color: var(--dx-encre) !important; border-color: var(--dx-ligne-2); }
.dx-btn--or { background: var(--dx-or); border-color: var(--dx-or); color: #fff !important; }
.dx-btn[disabled] { opacity: .45; cursor: default; transform: none; }
.dx-valider.est-valide { border-color: var(--dx-vert); background: var(--dx-vert-pale); }
.dx-valider.est-valide .dx-valider__lab { color: var(--dx-vert); } .dx-valider.est-valide .dx-valider__lab i { background: var(--dx-vert); animation: none; }
.dx-gain { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--dx-or-pale); color: var(--dx-or-texte); font: 600 12px var(--mono); animation: dx-pop .5s cubic-bezier(.3,1.6,.5,1) both; }

.dx-chat__pied { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--dx-ligne); display: flex; flex-direction: column; gap: 9px; }
.dx-missions { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-mission { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 5px 12px 5px 9px; border: 1px solid var(--dx-ligne-2); border-radius: 999px; background: var(--dx-fond); font-size: 12.5px; font-weight: 500; color: var(--dx-encre); cursor: pointer; text-align: left; transition: border-color .15s, background .15s, transform .2s, opacity .2s; }
.dx-mission:hover:not([disabled]) { border-color: var(--dx-or); background: var(--dx-or-pale); }
.dx-mission[disabled] { opacity: .5; cursor: default; }
.dx-mission__ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dx-fond-3); color: var(--dx-muet); }
.dx-mission__ico svg { width: 10px; height: 10px; }
.dx-mission.est-fait { color: var(--dx-muet); border-style: dashed; }
.dx-mission.est-fait .dx-mission__ico { background: var(--dx-vert); color: #fff; }
.dx-mission.est-bonus .dx-mission__ico { background: var(--dx-encre); color: var(--dx-fond); }
.dx-mission.est-verrou { border-style: dashed; color: var(--dx-pale); cursor: not-allowed; }
.dx-mission.est-nouveau { animation: dx-debloque 1s cubic-bezier(.3,1.5,.5,1); border-color: var(--dx-or); }
.dx-saisie { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 13px; border: 1px solid var(--dx-ligne-2); border-radius: 999px; background: var(--dx-fond-2); }
.dx-saisie input { flex: 1; min-width: 0; height: 30px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--dx-encre); outline: none; }
@media (min-width: 761px) { .dx-saisie input { font-size: 13.5px; } }
.dx-saisie input::placeholder { color: var(--dx-pale); }
.dx-saisie button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--dx-encre); color: var(--dx-fond); cursor: pointer; }
.dx-saisie button svg { width: 14px; height: 14px; }
.dx-saisie:focus-within { border-color: var(--dx-or); }
.dx-chat.est-occupe :is(.dx-missions, .dx-terminer) { display: none; }
.dx-terminer { align-self: center; border: 0; background: none; padding: 2px 6px; font-size: 12.5px; font-weight: 500; color: var(--dx-muet); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dx-terminer:hover { color: var(--dx-encre); }

/* -- outils -- */
.dx-outils { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--dx-fond-2); }
.dx-onglets { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--dx-ligne); flex: none; overflow-x: auto; scrollbar-width: none; }
.dx-onglets::-webkit-scrollbar { display: none; }
.dx-onglet { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px 10px 0 0; background: none; font-size: 13px; font-weight: 500; color: var(--dx-muet); cursor: pointer; white-space: nowrap; transition: color .15s, background .2s; }
.dx-onglet svg { width: 15px; height: 15px; }
.dx-onglet:hover { color: var(--dx-encre); }
.dx-onglet[aria-selected="true"] { color: var(--dx-encre); background: var(--dx-fond); }
.dx-onglet[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--dx-fond); }
.dx-onglet__actif { width: 6px; height: 6px; border-radius: 50%; background: var(--dx-or); opacity: 0; transform: scale(0); transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.dx-onglet.est-travail .dx-onglet__actif { opacity: 1; transform: scale(1); animation: dx-pulse 1s ease-in-out infinite; }
.dx-vues { position: relative; flex: 1; min-height: 0; background: var(--dx-fond); }
.dx-vue { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dx-vue[hidden] { display: none !important; }
.dx-vue.est-entree { animation: dx-fondu .35s ease both; }
.dx-journal { position: absolute; left: 50%; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--dx-encre); color: var(--dx-fond); font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.22,1,.36,1); }
.dx-journal.est-vu { opacity: 1; transform: translate(-50%, 0); }
.dx-journal i { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dx-or); }
.dx-journal i svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; }
.dx-curseur { position: absolute; left: 0; top: 0; z-index: 8; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: translate(60%, 60%); transition: transform .65s cubic-bezier(.45,0,.2,1), opacity .25s; }
.dx-curseur.est-vu { opacity: 1; }
.dx-curseur svg { width: 22px; height: 22px; }
.dx-curseur::after { content: ""; position: absolute; left: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dx-or); opacity: 0; transform: scale(.3); }
.dx-curseur.est-clic::after { animation: dx-clic .5s ease-out; }
.dx-vide { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--dx-pale); font-size: 13px; }
.dx-vide svg { width: 28px; height: 28px; opacity: .6; }
.dx-flash { animation: dx-flash 1.2s ease; }
.dx-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--dx-fond-3); color: var(--dx-muet); }
.dx-tag--or { background: var(--dx-or-pale); color: var(--dx-or-texte); }
.dx-tag--vert { background: var(--dx-vert-pale); color: var(--dx-vert); }
.dx-tag--ambre { background: var(--dx-ambre-pale); color: var(--dx-ambre); }
.dx-tag--bleu { background: var(--dx-bleu-pale); color: var(--dx-bleu); }
.dx-tag.est-nouveau { animation: dx-pop .45s cubic-bezier(.3,1.6,.5,1) both; }
.dx-entete { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--dx-ligne); flex: none; }
.dx-entete__titre { font-weight: 600; color: var(--dx-encre); }
.dx-entete__sous { font-size: 12.5px; color: var(--dx-muet); }
.dx-entete .dx-tag { margin-left: auto; }

/* mails */
.dx-mail { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); height: 100%; }
.dx-mail__liste { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--dx-ligne); }
.dx-mail__recherche { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 0 12px; height: 34px; border: 1px solid var(--dx-ligne); border-radius: 10px; background: var(--dx-fond-2); color: var(--dx-pale); font-size: 13px; flex: none; }
.dx-mail__recherche svg { width: 14px; height: 14px; flex: none; }
.dx-mail__recherche b { font-weight: 500; color: var(--dx-encre); }
.dx-mail__items { flex: 1; min-height: 0; overflow: hidden; }
.dx-mail__item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px; border-bottom: 1px solid var(--dx-ligne); transition: background .25s, opacity .3s, transform .45s cubic-bezier(.22,1,.36,1), max-height .45s ease, padding .45s ease; max-height: 90px; }
.dx-mail__item.est-actif { background: var(--dx-or-pale); }
.dx-mail__item.est-lu-scan { background: var(--dx-fond-2); }
.dx-mail__item.est-estompe { opacity: .3; }
.dx-mail__item.est-sorti { opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.dx-mail__av { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dx-fond-3); color: var(--dx-muet); font-size: 11px; font-weight: 600; }
.dx-mail__de { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--dx-texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-mail__item.est-nonlu .dx-mail__de { font-weight: 600; color: var(--dx-encre); }
.dx-mail__item.est-nonlu .dx-mail__de::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dx-or); }
.dx-mail__heure { font-size: 11.5px; color: var(--dx-pale); }
.dx-mail__objet { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--dx-muet); }
.dx-mail__objet span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-mail__objet .dx-tag { margin-left: auto; flex: none; }
.dx-mail__lecture { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.dx-mail__retour { display: none; }
.dx-lettre { display: flex; flex-direction: column; gap: 12px; padding: 18px 22px; overflow-y: auto; animation: dx-fondu .35s ease both; }
.dx-lettre__objet { font-size: 17px; font-weight: 600; color: var(--dx-encre); letter-spacing: -.01em; }
.dx-lettre__de { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dx-muet); }
.dx-lettre__de b { color: var(--dx-encre); font-weight: 600; }
.dx-lettre__corps { white-space: pre-line; color: var(--dx-texte); font-size: 13.5px; }
.dx-resultat { display: flex; align-items: center; gap: 10px; margin: 14px 22px 0; padding: 12px 14px; border: 1px solid var(--dx-ligne); border-radius: 12px; background: var(--dx-fond-2); font-size: 13px; animation: dx-entre .4s cubic-bezier(.22,1,.36,1) both; }
.dx-compo { display: flex; flex-direction: column; min-height: 0; height: 100%; animation: dx-fondu .35s ease both; }
.dx-compo__tete { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--dx-ligne); font-size: 12.5px; color: var(--dx-muet); flex: none; }
.dx-compo__tete b { color: var(--dx-encre); font-weight: 600; }
.dx-compo__tete .dx-tag { margin-left: auto; }
.dx-compo__champ { display: flex; gap: 10px; padding: 9px 18px; border-bottom: 1px solid var(--dx-ligne); font-size: 13px; flex: none; }
.dx-compo__champ span:first-child { width: 44px; flex: none; color: var(--dx-pale); }
.dx-compo__champ span:last-child { min-width: 0; color: var(--dx-encre); font-weight: 500; }
.dx-compo__corps { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; white-space: pre-line; font-size: 13.5px; color: var(--dx-texte); }
.dx-compo__pj { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; flex: none; }
.dx-pj { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--dx-ligne); border-radius: 8px; background: var(--dx-fond-2); font-size: 12px; color: var(--dx-texte); animation: dx-pop .4s cubic-bezier(.3,1.6,.5,1) both; }
.dx-pj svg { width: 13px; height: 13px; color: var(--dx-or); }
.dx-compo__envoye { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--dx-fond); color: var(--dx-encre); font-weight: 600; animation: dx-fondu .3s ease both; }
.dx-compo__envoye .dx-rond { width: 52px; height: 52px; }
.dx-rond { display: grid; place-items: center; border-radius: 50%; background: var(--dx-vert); }
.dx-rond svg { width: 45%; height: 45%; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: dx-trace .5s ease .15s forwards; }
.dx-compo__envoye small { font-weight: 400; color: var(--dx-muet); }
.dx-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--dx-or); animation: dx-caret .8s steps(1) infinite; }

/* agenda */
.dx-agenda { display: flex; flex-direction: column; height: 100%; }
.dx-agenda__grille { --h: 34px; position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 44px repeat(5, minmax(0, 1fr)); grid-template-rows: 38px auto; overflow: hidden; }
.dx-agenda__jour { display: flex; align-items: center; justify-content: center; gap: 5px; border-bottom: 1px solid var(--dx-ligne); border-left: 1px solid var(--dx-ligne); font-size: 12px; color: var(--dx-muet); white-space: nowrap; }
.dx-agenda__jour b { font-weight: 600; color: var(--dx-encre); }
.dx-agenda__jour.est-auj b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--dx-or); color: #fff; }
.dx-agenda__heures { grid-column: 1; grid-row: 2; position: relative; }
.dx-agenda__heures span { position: absolute; right: 8px; font: 10.5px var(--mono); color: var(--dx-pale); transform: translateY(-50%); }
.dx-agenda__col { grid-row: 2; position: relative; border-left: 1px solid var(--dx-ligne); background-image: linear-gradient(to bottom, var(--dx-ligne) 1px, transparent 1px); background-size: 100% var(--h); }
.dx-evt { position: absolute; left: 4px; right: 4px; display: flex; flex-direction: column; padding: 4px 7px; border-radius: 7px; background: var(--dx-fond-3); border-left: 3px solid var(--dx-ligne-2); font-size: 11px; line-height: 1.25; color: var(--dx-texte); overflow: hidden; }
.dx-evt b { font-weight: 600; color: var(--dx-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-evt small { font: 10px var(--mono); color: var(--dx-muet); }
.dx-evt--session { background: var(--dx-bleu-pale); border-left-color: var(--dx-bleu); }
.dx-evt--bobby { background: var(--dx-or-pale); border-left-color: var(--dx-or); }
.dx-evt.est-pose { animation: dx-pose .7s cubic-bezier(.3,1.4,.5,1) both; }
.dx-evt--bobby.est-pose::after { content: "Bobby"; position: absolute; right: 5px; top: 4px; padding: 0 5px; border-radius: 4px; background: var(--dx-or); color: #fff; font: 600 9px/14px var(--mono); }
.dx-creneau { position: absolute; left: 3px; right: 3px; border: 1.5px dashed var(--dx-or); border-radius: 7px; background: transparent; transition: top .35s cubic-bezier(.45,0,.2,1), opacity .2s; }
.dx-creneau.est-ok { border-style: solid; background: var(--dx-or-pale); }

/* gestion des formations, clients */
.dx-sousnav { display: flex; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--dx-ligne); flex: none; overflow-x: auto; scrollbar-width: none; }
.dx-sousnav span { padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--dx-muet); white-space: nowrap; transition: background .2s, color .2s; }
.dx-sousnav span.est-actif { background: var(--dx-fond-3); color: var(--dx-encre); }
.dx-logiciel { display: flex; align-items: center; gap: 8px; margin-right: 8px; padding-right: 10px; border-right: 1px solid var(--dx-ligne); font-size: 12.5px; font-weight: 600; color: var(--dx-encre); white-space: nowrap; }
.dx-logiciel i { width: 16px; height: 16px; border-radius: 5px; background: var(--dx-encre); }
.dx-panneau { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 60px; }
.dx-panneau.est-entree { animation: dx-fondu .3s ease both; }
.dx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dx-table th { padding: 8px 10px; border-bottom: 1px solid var(--dx-ligne); font: 500 10.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dx-pale); text-align: left; white-space: nowrap; }
.dx-table td { padding: 10px; border-bottom: 1px solid var(--dx-ligne); color: var(--dx-texte); vertical-align: middle; }
.dx-table td b { font-weight: 600; color: var(--dx-encre); }
.dx-table tr { transition: background .3s, opacity .3s; }
.dx-table tr.est-focus { background: var(--dx-or-pale); }
.dx-table tr.est-scan { background: var(--dx-fond-2); }
.dx-table tr.est-trouve { background: var(--dx-vert-pale); }
.dx-table tr.est-estompe { opacity: .35; }
.dx-jauge { display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 11.5px var(--mono); color: var(--dx-muet); }
.dx-jauge i { position: relative; width: 60px; height: 4px; border-radius: 4px; background: var(--dx-fond-3); overflow: hidden; }
.dx-jauge i::after { content: ""; position: absolute; inset: 0; background: var(--dx-or); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.dx-fiche { max-width: 520px; border: 1px solid var(--dx-ligne); border-radius: 14px; overflow: hidden; }
.dx-fiche__tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--dx-ligne); background: var(--dx-fond-2); }
.dx-fiche__tete b { color: var(--dx-encre); }
.dx-fiche__tete .dx-tag { margin-left: auto; }
.dx-fiche dl { margin: 0; }
.dx-fiche dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--dx-ligne); font-size: 13px; animation: dx-entre .35s cubic-bezier(.22,1,.36,1) both; }
.dx-fiche dl > div:last-child { border-bottom: 0; }
.dx-fiche dt { color: var(--dx-pale); }
.dx-fiche dd { margin: 0; min-width: 0; color: var(--dx-encre); font-weight: 500; }
.dx-preuves { display: flex; flex-direction: column; gap: 8px; max-width: 620px; }
.dx-preuves__titre { font-weight: 600; color: var(--dx-encre); margin-bottom: 4px; }
.dx-preuve { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dx-ligne); border-radius: 12px; font-size: 13px; animation: dx-entre .35s cubic-bezier(.22,1,.36,1) both; }
.dx-preuve__n { margin-left: auto; font: 500 12px var(--mono); color: var(--dx-muet); }
.dx-preuve.est-manque { border-color: var(--dx-or); background: var(--dx-or-pale); }
.dx-preuve .dx-rond { width: 20px; height: 20px; flex: none; }
.dx-preuve .dx-rond--manque { background: var(--dx-or); }
.dx-preuve .dx-rond--manque b { color: #fff; font-size: 12px; line-height: 1; }
.dx-sig { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--dx-vert-pale); color: var(--dx-vert); }
.dx-sig svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dx-sig--manque { background: var(--dx-or-pale); color: var(--dx-or-texte); font-weight: 700; font-size: 12px; }
.dx-sig.est-cible { outline: 2px solid var(--dx-or); outline-offset: 2px; animation: dx-pulse 1s ease-in-out 3; }
.dx-sig.est-signe svg { stroke-dasharray: 30; stroke-dashoffset: 30; animation: dx-trace .5s ease forwards; }
.dx-banque__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 600; color: var(--dx-encre); }
.dx-banque__tete .dx-tag { margin-left: auto; }
.dx-montant { font: 500 12.5px var(--mono); text-align: right; white-space: nowrap; }
.dx-montant.est-credit { color: var(--dx-vert); }
.dx-constat { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--dx-ligne); border-radius: 12px; font-size: 13px; animation: dx-entre .4s cubic-bezier(.22,1,.36,1) both; }
.dx-constat--or { border-color: var(--dx-or); background: var(--dx-or-pale); }
.dx-constat--vert { border-color: var(--dx-vert); background: var(--dx-vert-pale); }

/* réseaux sociaux */
.dx-social { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 22px; padding: 16px 18px; height: 100%; overflow-y: auto; }
.dx-post { align-self: start; border: 1px solid var(--dx-ligne); border-radius: 14px; overflow: hidden; background: var(--dx-fond); }
.dx-post__tete { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--dx-encre); }
.dx-post__tete i { width: 26px; height: 26px; border-radius: 50%; background: var(--dx-or); }
.dx-post__img { position: relative; aspect-ratio: 4 / 4.2; background: var(--dx-fond-3); overflow: hidden; }
.dx-post__img img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transition: clip-path .9s cubic-bezier(.65,0,.35,1); }
.dx-post__img.est-pret img { clip-path: inset(0 0 0 0); }
.dx-post__img .dx-vide { position: absolute; inset: 0; }
.dx-post__texte { min-height: 86px; padding: 10px 12px 12px; font-size: 12.5px; white-space: pre-line; color: var(--dx-texte); }
.dx-post__tags { color: var(--dx-bleu); }
.dx-reglages { display: flex; flex-direction: column; gap: 10px; }
.dx-reglages__lab { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dx-pale); }
.dx-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dx-galerie span { aspect-ratio: 1; border-radius: 8px; background: var(--dx-fond-3) center / cover no-repeat; border: 2px solid transparent; transition: border-color .2s, transform .3s; }
.dx-galerie span.est-choisi { border-color: var(--dx-or); transform: scale(.94); }
.dx-reglage { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--dx-ligne); border-radius: 12px; font-size: 13px; }
.dx-reglage b { font-weight: 600; color: var(--dx-encre); }
.dx-reglage.est-pret { border-color: var(--dx-or); background: var(--dx-or-pale); animation: dx-pop .45s cubic-bezier(.3,1.6,.5,1); }

/* documents */
.dx-docs { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 100%; }
.dx-docs__dossiers { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--dx-ligne); overflow-y: auto; }
.dx-dossier { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 12.5px; color: var(--dx-texte); }
.dx-dossier svg { width: 15px; height: 15px; flex: none; color: var(--dx-pale); }
.dx-dossier.est-fichier { padding-left: 22px; color: var(--dx-encre); font-weight: 500; animation: dx-entre .4s cubic-bezier(.22,1,.36,1) both; }
.dx-dossier.est-fichier svg { color: var(--dx-or); }
.dx-docs__page { display: flex; justify-content: center; align-items: flex-start; padding: 22px; overflow-y: auto; background: var(--dx-fond-2); }
.dx-page { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 1.3; padding: 28px 30px; border: 1px solid var(--dx-ligne); border-radius: 6px; background: #fff; color: #1d1d20; animation: dx-papier .6s cubic-bezier(.22,1,.36,1) both; }
.dx-page__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.dx-page__marque { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: #1d1d20; }
.dx-page__marque i { width: 14px; height: 14px; border-radius: 4px; background: #FB4D17; }
.dx-page__type { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9a9a9f; }
.dx-page__titre { min-height: 1.3em; margin-bottom: 18px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.dx-page__lignes { display: flex; flex-direction: column; gap: 10px; }
.dx-page__lignes p { padding-bottom: 9px; border-bottom: 1px solid #ececea; font-size: 12px; color: #35353a; animation: dx-entre .35s cubic-bezier(.22,1,.36,1) both; }
.dx-page__squelette { height: 9px; border-radius: 5px; background: #f0f0ee; }
.dx-page__signe { position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; justify-content: space-between; gap: 14px; font-size: 10.5px; color: #9a9a9f; }
.dx-page__signe span { flex: 1; padding-top: 26px; border-top: 1px dashed #d6d6d2; }
.dx-tampon { position: absolute; right: 24px; top: 66px; padding: 6px 12px; border: 2px solid #FB4D17; border-radius: 8px; color: #FB4D17; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-8deg); animation: dx-tampon .5s cubic-bezier(.3,1.6,.5,1) both; }

/* toasts de badge, panneau des badges, confettis */
.dx-toasts { position: absolute; left: 50%; top: 64px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.dx-toast { display: flex; align-items: center; gap: 12px; min-width: 260px; padding: 10px 16px 10px 10px; border: 1px solid var(--dx-ligne-2); border-radius: 16px; background: var(--dx-fond); animation: dx-toast 3.6s cubic-bezier(.22,1,.36,1) both; }
.dx-toast__lab { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dx-or-texte); }
.dx-toast__nom { font-weight: 600; color: var(--dx-encre); }
.dx-toast--niveau { border-color: var(--dx-or); }
.dx-medaille { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--dx-or-pale); color: var(--dx-or); }
.dx-medaille svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dx-medaille::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--dx-or); clip-path: inset(0 0 0 0); }
.dx-toast .dx-medaille { animation: dx-medaille .8s cubic-bezier(.3,1.6,.5,1) .1s both; }
.dx-medaille.est-verrou { background: var(--dx-fond-3); color: var(--dx-pale); }
.dx-medaille.est-verrou::before { border-color: var(--dx-ligne-2); border-style: dashed; }
.dx-tiroir { position: absolute; inset: 52px 0 0 auto; z-index: 25; display: flex; flex-direction: column; width: min(380px, 100%); border-left: 1px solid var(--dx-ligne); background: var(--dx-fond); opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s; }
.dx-tiroir.est-ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.dx-tiroir__tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--dx-ligne); }
.dx-tiroir__tete b { color: var(--dx-encre); }
.dx-tiroir__tete button { margin-left: auto; }
.dx-tiroir__liste { flex: 1; overflow-y: auto; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.dx-badge-ligne { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.dx-badge-ligne .dx-medaille { width: 38px; height: 38px; } .dx-badge-ligne .dx-medaille svg { width: 18px; height: 18px; }
.dx-badge-ligne b { display: block; font-size: 13.5px; color: var(--dx-encre); }
.dx-badge-ligne small { font-size: 12px; color: var(--dx-muet); }
.dx-badge-ligne.est-verrou b { color: var(--dx-pale); }
.dx-confettis { position: absolute; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.dx-confettis i { position: absolute; left: 0; top: 0; width: 7px; height: 11px; border-radius: 2px; background: #FB4D17; will-change: transform, opacity; }

/* -- écran final : carte de score -- */
.dx-fin { display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.dx-fin__grille { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 380px); gap: 28px; align-items: center; }
.dx-score { position: relative; padding: 24px; border: 1px solid var(--dx-ligne-2); border-radius: 20px; background: var(--dx-fond); overflow: hidden; animation: dx-carte .8s cubic-bezier(.22,1,.36,1) both; }
.dx-score__fond { position: absolute; inset: 0 0 auto 0; height: 118px; background: url("assets/da/peinture-orange.webp") 50% 30% / cover no-repeat; opacity: .9; }
.dx-score__bobby { position: relative; display: block; width: 104px; height: auto; margin: 22px 0 0 -4px; }
.dx-score__eyebrow { position: absolute; left: 24px; top: 20px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.dx-score__titre { margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--dx-encre); }
.dx-score__qui { font-size: 13px; color: var(--dx-muet); }
.dx-score__niveau { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.dx-score__niveau b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--dx-or-texte); }
.dx-score__niveau span { font-size: 13px; color: var(--dx-muet); }
.dx-score__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; border: 1px solid var(--dx-ligne); border-radius: 12px; }
.dx-score__stats div { padding: 10px 12px; border-left: 1px solid var(--dx-ligne); }
.dx-score__stats div:first-child { border-left: 0; }
.dx-score__stats b { display: block; font: 600 18px var(--font); letter-spacing: -.01em; white-space: nowrap; color: var(--dx-encre); font-variant-numeric: tabular-nums; }
.dx-score__stats small { font-size: 11.5px; color: var(--dx-muet); }
.dx-score__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dx-score__badges .dx-medaille { width: 34px; height: 34px; } .dx-score__badges .dx-medaille svg { width: 16px; height: 16px; }
.dx-fin__cote { display: flex; flex-direction: column; gap: 14px; }
.dx-fin__titre { font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--dx-encre); }
.dx-fin__p { color: var(--dx-muet); }
.dx-fin__actions, .dx-fin__partage { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-fin__sep { height: 1px; background: var(--dx-ligne); }
.dx-fin__info { font-size: 12.5px; color: var(--dx-vert); min-height: 1.2em; }

/* ---------- Comment ça se passe en vrai + rendez-vous ---------- */
.dx-vrai { padding: 84px 0; background: var(--paper); }
.dx-vrai__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.dx-vrai__grille article { padding: 22px; border: 1px solid var(--line); border-radius: 16px; }
.dx-vrai__grille h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dx-vrai__grille p { color: var(--muet, var(--ink-2)); font-size: 15px; line-height: 1.5; }
.dx-vrai__n { font: 500 12px var(--mono); color: #FB4D17; }
.dx-rdv .ct-hero__carte { align-items: center; }

/* ---------- Animations ---------- */
@keyframes dx-entre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dx-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes dx-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes dx-saute { 0%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -9px) rotate(-6deg); } 70% { transform: translate(-50%, 0) rotate(3deg); } }
@keyframes dx-saut { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes dx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes dx-tourne { to { transform: rotate(360deg); } }
@keyframes dx-trace { to { stroke-dashoffset: 0; } }
@keyframes dx-caret { 50% { opacity: 0; } }
@keyframes dx-clic { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes dx-flash { 0%, 100% { background-color: transparent; } 25% { background-color: var(--dx-or-pale); } }
@keyframes dx-pose { 0% { opacity: 0; transform: translateY(-16px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes dx-papier { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dx-tampon { 0% { opacity: 0; transform: rotate(-8deg) scale(1.8); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes dx-toast { 0% { opacity: 0; transform: translateY(-14px) scale(.96); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes dx-medaille { 0% { transform: scale(.4) rotate(-30deg); } 100% { transform: none; } }
@keyframes dx-debloque { 0% { transform: scale(.9); } 50% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes dx-carte { from { opacity: 0; transform: translateY(18px) rotate(-1.5deg); } to { opacity: 1; transform: none; } }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .dx-bureau { grid-template-columns: 320px minmax(0, 1fr); }
  .dx-mail { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
  .dx-docs { grid-template-columns: 160px minmax(0, 1fr); }
  .dx-social { grid-template-columns: minmax(0, 1fr); }
  .dx-niveau__txt { min-width: 100px; }
  .dx-fin__grille { grid-template-columns: minmax(0, 440px); }
  .dx-vrai__grille { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Téléphone : conversation au-dessus, outils en onglets dessous ---------- */
@media (max-width: 760px) {
  .dx-hero { padding: 40px 0 18px; }
  .dx-bref { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; max-width: 360px; }
  .dx-bref__titre { justify-content: flex-start; }
  .dx-sec { padding: 8px 0 56px; }
  .dx-sec .wrap { padding-left: 10px; padding-right: 10px; }
  .dx-scene { padding: 10px; border-radius: 18px; scroll-margin-top: 70px; }
  .dx { height: calc(100svh - 92px); min-height: 600px; max-height: 860px; border-radius: 14px; font-size: 13.5px; }
  .dx-barre { flex-wrap: wrap; gap: 8px; padding: 8px 10px; min-height: 0; }
  .dx-barre__points, .dx-barre__fictif, .dx-compteur__lab { display: none; }
  .dx-barre__titre { flex: 1; font-size: 13px; }
  .dx-hud:not([hidden]) ~ .dx-barre__titre, .dx-barre:has(.dx-hud:not([hidden])) :is(.dx-barre__titre) { display: none; }
  .dx-hud { gap: 6px; margin-left: 0; width: 100%; justify-content: space-between; }
  .page-demo-xp .bw-lanceur { display: none !important; } /* sur téléphone, la tête du chat ne masque pas les outils de la démo */
  .dx-valider { padding: 10px; gap: 8px; }
  .dx-valider__actions { gap: 6px; }
  .dx-valider .dx-btn { height: 34px; padding: 0 11px; font-size: 12.5px; }
  .dx-valider .dx-btn svg { display: none; }
  .dx-niveau__txt { min-width: 74px; }
  .dx-niveau__pts { display: none; }
  .dx-niveau__pastille { width: 24px; height: 24px; font-size: 11px; }
  .dx-compteur { height: 30px; padding: 0 9px; gap: 5px; }
  .dx-compteur::before { content: ""; width: 14px; height: 14px; background: var(--dx-or); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
  .dx-ico-btn { width: 30px; height: 30px; }
  .dx-ico-btn--vitesse { display: none; }
  .dx-choix { justify-content: flex-start; padding: 22px 14px; gap: 18px; }
  .dx-choix__tete img { width: 70px; }
  .dx-choix__cartes { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .dx-carte__nom { margin-top: 26px; }
  .dx-carte__img { width: 62px; height: 62px; }
  .dx-bureau { display: flex; flex-direction: column; }
  .dx-chat { flex: 0 0 47%; border-right: 0; border-bottom: 1px solid var(--dx-ligne); }
  .dx-chat__tete { padding: 8px 12px; gap: 10px; }
  .dx-avatar { width: 38px; height: 38px; border-radius: 11px; }
  .dx-fil { padding: 10px 12px 6px; gap: 10px; }
  .dx-chat__pied { padding: 8px 10px 10px; gap: 7px; }
  .dx-missions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
  .dx-missions::-webkit-scrollbar { display: none; }
  .dx-mission { flex: none; white-space: nowrap; }
  .dx-outils { flex: 1; min-height: 0; }
  .dx-onglets { padding: 6px 8px 0; gap: 2px; }
  .dx-onglet { height: 32px; padding: 0 10px; font-size: 12.5px; gap: 5px; }
  .dx-onglet svg { display: none; }
  .dx-mail { display: block; position: relative; }
  .dx-mail__liste { height: 100%; border-right: 0; }
  .dx-mail__lecture { position: absolute; inset: 0; z-index: 2; background: var(--dx-fond); transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); }
  .dx-mail.est-lecture .dx-mail__lecture { transform: none; }
  .dx-mail__retour { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--dx-ligne); background: var(--dx-fond-2); font-size: 12.5px; color: var(--dx-muet); flex: none; cursor: pointer; text-align: left; }
  .dx-mail__retour svg { width: 13px; height: 13px; }
  .dx-mail__recherche { margin: 8px 10px; height: 30px; }
  .dx-mail__item { padding: 8px 12px; }
  .dx-lettre { padding: 12px 14px; } .dx-compo__champ, .dx-compo__corps, .dx-compo__tete { padding-left: 14px; padding-right: 14px; } .dx-compo__pj { padding: 0 14px 10px; }
  .dx-compo__corps { padding-top: 10px; font-size: 13px; }
  .dx-agenda__grille { --h: 22px; grid-template-columns: 30px repeat(5, minmax(0, 1fr)); grid-template-rows: 32px auto; }
  .dx-agenda__jour { flex-direction: column; gap: 0; font-size: 10px; line-height: 1.1; }
  .dx-agenda__jour b { font-size: 11px; } .dx-agenda__jour.est-auj b { min-width: 18px; height: 18px; }
  .dx-agenda__heures span { right: 4px; font-size: 9px; }
  .dx-evt { left: 2px; right: 2px; padding: 2px 4px; font-size: 9.5px; border-left-width: 2px; border-radius: 5px; }
  .dx-evt small { display: none; }
  .dx-evt--bobby.est-pose::after { display: none; }
  .dx-panneau { padding: 10px 10px 56px; }
  .dx-table { font-size: 11.5px; }
  .dx-table th, .dx-table td { padding: 7px 6px; }
  .dx-table .dx-col-option { display: none; }
  .dx-jauge i { width: 34px; }
  .dx-fiche dl > div { grid-template-columns: 96px minmax(0, 1fr); padding: 8px 10px; font-size: 12.5px; }
  .dx-social { padding: 10px; gap: 12px; }
  .dx-post { max-width: 260px; justify-self: center; }
  .dx-docs { display: block; }
  .dx-docs__dossiers { display: none; }
  .dx-docs__page { height: 100%; padding: 12px; }
  .dx-page { padding: 18px 18px; aspect-ratio: auto; min-height: 100%; }
  .dx-page__tete { margin-bottom: 14px; }
  .dx-page__signe { position: static; margin-top: 18px; }
  .dx-tampon { top: 46px; right: 14px; }
  .dx-toasts { top: 92px; width: calc(100% - 20px); }
  .dx-toast { min-width: 0; width: 100%; }
  .dx-tiroir { inset: 0; width: 100%; }
  .dx-journal { bottom: 10px; font-size: 11.5px; }
  .dx-fin { align-items: flex-start; padding: 14px 12px; }
  .dx-score { padding: 18px; }
  .dx-score__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-score__stats div:nth-child(3) { border-left: 0; }
  .dx-score__stats div:nth-child(n+3) { border-top: 1px solid var(--dx-ligne); }
  .dx-vrai { padding: 56px 0; }
}

/* ---------- Mouvement réduit : tout est posé, rien ne bouge ---------- */
@media (prefers-reduced-motion: reduce) {
  .dx-charge__bobby, .dx-charge__bobby img, .dx-charge__antenne, .dx-charge__eclats path { animation: none !important; }
  .dx-charge__eclats path { opacity: 1; }
  .dx *, .dx *::before, .dx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .dx-curseur { display: none; }
}

/* ---------- Formulaire de rendez-vous : listes déroulantes (reprises de da-alternatives.css, page /demo mise de côté) ---------- */
.ct-fiche .field select { font: inherit; font-size: 15px; padding: 11px 38px 11px 13px; border: 1px solid transparent; border-radius: 10px; background: #f4f4f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23191919' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 13px center / 12px no-repeat; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.ct-fiche .field select:hover { background-color: #efefeb; }
.ct-fiche .field select:focus { outline: none; border-color: #191919; background-color: #fff; }
.ct-fiche .field select:user-invalid { border-color: rgba(200,60,40,.55); background-color: #fdf5f3; }
.demo-facultatif { font-weight: 400; color: var(--muet); }
html[data-theme="nuit"] .ct-fiche .field select { background-color: #2a2a2a; border-color: transparent; color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 12px; }
html[data-theme="nuit"] .ct-fiche .field select:hover { background-color: #303030; }
html[data-theme="nuit"] .ct-fiche .field select:focus { border-color: rgba(255,255,255,.55); }
html[data-theme="nuit"] .ct-fiche .field select option { background: #1f1f1f; color: #fff; }
html[data-theme="nuit"] .demo-facultatif { color: rgba(255,255,255,.55); }
.page-demo-xp .ct-hero__txt .actions { margin-top: 26px; }
@media (prefers-reduced-motion: reduce) { .ct-fiche .field select { transition: none; } }

/* Bobby fixe sur l'écran de chargement (Axel, 14/10/2026 au soir : le Bobby 3D n'était pas assez bon, on revient à l'image, sans faire bouger la mascotte).
   Seuls la phrase, les astuces et la barre s'animent. */
.dx-charge__bobby, .dx-charge__bobby img, .dx-charge__eclats path { animation: none !important; }
.dx-charge__eclats path { opacity: 1; }

/* ---------- Menu d'accueil façon jeu vidéo (Axel, 14/10/2026) : plus de barre de chargement, on choisit son bureau ici ----------
   Bobby ne bouge pas (image fixe). Les cartes sont numérotées comme dans un menu de jeu (touches 1, 2, 3, flèches, Entrée). */
.dx-charge { overflow-y: auto; justify-content: flex-start; padding: clamp(28px, 6vh, 64px) 24px 84px; }
.dx-charge__scene { margin: auto 0; width: 100%; }
.dx-charge__bobby { width: clamp(120px, 12vw, 160px); }
.dx-charge__phrase { margin-top: 22px; }
.dx-titre { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 30px; animation: dx-titre-entre .6s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes dx-titre-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dx-titre__lab { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8f; }
.dx-titre__cartes { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; margin-top: 16px; }
.dx-titre__cartes > .dx-mcarte { flex: 0 1 270px; }
.dx-mcarte { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; border: 1.5px solid rgba(13,15,20,.1); border-radius: 18px; background: #fff; color: #0d0f14; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1), background-color .2s ease; }
.dx-mcarte { animation: dx-mcarte-entre .55s cubic-bezier(.22,1,.36,1) both; }
.dx-mcarte:nth-child(1) { animation-delay: .25s; } .dx-mcarte:nth-child(2) { animation-delay: .4s; } .dx-mcarte:nth-child(3) { animation-delay: .55s; } .dx-mcarte:nth-child(n+4) { animation-delay: .7s; }
@keyframes dx-mcarte-entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dx-mcarte:hover, .dx-mcarte:focus-visible { border-color: #FB4D17; transform: translateY(-3px); outline: none; }
.dx-mcarte:focus-visible { background: #fff8f4; }
html[data-theme="nuit"] .dx-mcarte { background: #181818; border-color: rgba(255,255,255,.12); color: #f4f4f2; }
html[data-theme="nuit"] .dx-mcarte:hover, html[data-theme="nuit"] .dx-mcarte:focus-visible { border-color: #FB4D17; }
html[data-theme="nuit"] .dx-mcarte:focus-visible { background: #22160f; }
.dx-mcarte__n { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #f4f4f1; font: 600 12px var(--mono); color: #6b6b70; transition: background-color .2s ease, color .2s ease; }
html[data-theme="nuit"] .dx-mcarte__n { background: #262626; color: #a3a3a0; }
.dx-mcarte:hover .dx-mcarte__n, .dx-mcarte:focus-visible .dx-mcarte__n { background: #FB4D17; color: #fff; }
.dx-mcarte__img { align-self: center; width: 96px; height: 96px; object-fit: contain; margin: 2px 0 6px; }
.dx-mcarte__nom { font-size: 18px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.dx-mcarte__sous { font-size: 13.5px; line-height: 1.4; color: #6b6b70; }
html[data-theme="nuit"] .dx-mcarte__sous { color: #a3a3a0; }
.dx-mcarte__etat { margin-top: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #d63c0c; }
html[data-theme="nuit"] .dx-mcarte__etat { color: #ff8a5c; }
.dx-mcarte__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 600; }
.dx-mcarte__go svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.dx-mcarte:hover .dx-mcarte__go svg, .dx-mcarte:focus-visible .dx-mcarte__go svg { transform: translateX(3px); }
.dx-titre__regle { margin: 22px 0 0; font-size: 14px; color: #6b6b70; }
html[data-theme="nuit"] .dx-titre__regle { color: #a3a3a0; }
.dx-titre__touche { display: none; margin: 14px 0 0; font-family: var(--mono); font-size: 12px; color: #9a9a9f; }
.dx-titre__touche kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid rgba(13,15,20,.16); border-bottom-width: 2px; border-radius: 6px; font: inherit; color: #0d0f14; text-align: center; }
html[data-theme="nuit"] .dx-titre__touche kbd { border-color: rgba(255,255,255,.2); color: #f4f4f2; }
@media (hover: hover) and (pointer: fine) { .dx-titre__touche { display: block; } }
@media (max-width: 900px) { .dx-titre__cartes > .dx-mcarte { flex-basis: 420px; } .dx-mcarte { display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; row-gap: 3px; padding: 14px 16px 14px 14px; } .dx-mcarte__img { grid-row: 1 / span 4; width: 64px; height: 64px; margin: 0; } .dx-mcarte__n { top: 10px; left: auto; right: 10px; } .dx-mcarte__go { padding-top: 4px; } .dx-mcarte__nom { padding-right: 30px; } }
/* « Voir la page sans jouer » en haut à droite, comme « Quitter » dans un jeu ; la marque en bas seulement s'il y a la place */
.dx-charge__passer { position: fixed; top: 16px; right: 18px; bottom: auto; }
.dx-charge__marque { position: fixed; }
@media (max-height: 860px) { .dx-charge__marque { display: none; } }
@media (max-width: 760px) { .dx-charge { padding-top: 56px; } .dx-charge__bobby { width: 104px; } .dx-charge__eclats { display: none; } .dx-charge__phrase { margin-top: 14px; font-size: 21px; } .dx-titre { margin-top: 20px; } .dx-charge__marque { display: none; } .dx-charge__passer { top: 10px; right: 10px; font-size: 12.5px; } }
/* chargement avant le menu (Axel, 15/10/2026) : barre d'abord, choix ensuite */
.dx-charge__attente { display: none; flex-direction: column; align-items: center; margin-top: 8px; transition: opacity .35s ease; }
html.dx-ecran-titre.dx-menu-charge .dx-charge__attente { display: flex; }
html.dx-ecran-titre.dx-menu-charge .dx-titre { display: none; }
.dx-charge__attente.est-fini { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .dx-titre, .dx-mcarte { animation: none; } .dx-mcarte, .dx-mcarte__go svg { transition: none; } .dx-mcarte:hover, .dx-mcarte:focus-visible { transform: none; } }

/* plus de points, niveaux ni badges dans le jeu (Axel, 14/10/2026) */
.dx :is(.dx-niveau, [data-ouvre-badges], .dx-tiroir, .dx-toasts, .dx-gain) { display: none !important; }
.dx-score__stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.dx-score__stats--3 div { border-top: 0 !important; }
.dx-score__stats--3 div:nth-child(3) { border-left: 1px solid var(--dx-ligne) !important; }

/* bouton « Menu » dans la barre du jeu : retour à l'écran titre */
.dx-menu { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 11px 5px 8px; border: 1px solid var(--dx-ligne); border-radius: 999px; background: var(--dx-fond); font-size: 12.5px; font-weight: 500; color: var(--dx-encre); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.dx-menu svg { width: 15px; height: 15px; }
.dx-menu:hover { border-color: var(--dx-ligne-2); background: var(--dx-fond-2); }
.dx .dx-menu[hidden] { display: none !important; }
@media (max-width: 760px) { .dx-menu span { display: none; } .dx-menu { padding: 6px; } .dx-barre__points { display: none; } }

/* mode jeu : une fois lancé depuis l'écran titre, le bureau occupe tout l'écran sous le menu du site */
html.dx-en-jeu .dx { height: max(560px, calc(100svh - 78px - 64px - 10px)); }
@media (max-width: 760px) { html.dx-en-jeu .dx { height: max(520px, calc(100svh - 70px - 20px - 8px)); } }

/* ---------- Bilan de fin, version 2 (Axel, 15/10/2026) : Bobby entier dans la bannière, chiffres lisibles, actions regroupées. Aucune ombre portée. ---------- */
.dx-fin__grille { grid-template-columns: minmax(0, 420px) minmax(0, 400px); gap: 40px; }
.dx-score--v2 { padding: 0; }
.dx-score--v2 .dx-score__haut { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 168px; overflow: hidden; }
.dx-score--v2 .dx-score__fond { inset: 0; height: auto; background-position: 50% 40%; opacity: 1; }
.dx-score--v2 .dx-score__eyebrow { left: 16px; top: 14px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0d0f14; font-size: 10.5px; }
.dx-score--v2 .dx-score__bobby { position: relative; z-index: 1; width: 150px; height: 150px; margin: 0 0 -6px; animation: dx-score-bobby .7s cubic-bezier(.3,1.5,.5,1) .25s both; }
@keyframes dx-score-bobby { from { opacity: 0; transform: translateY(24px) scale(.9); } to { opacity: 1; transform: none; } }
.dx-score__corps { padding: 20px 24px 24px; border-top: 1px solid var(--dx-ligne); }
.dx-score--v2 .dx-score__titre { margin: 0; font-size: 24px; line-height: 1.15; }
.dx-score--v2 .dx-score__qui { margin-top: 4px; }
.dx-score__chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.dx-score__chiffres div { padding: 12px 12px 10px; border-radius: 12px; background: var(--dx-or-pale); }
.dx-score__chiffres b { display: block; font: 700 24px/1.1 var(--font); letter-spacing: -.02em; white-space: nowrap; color: var(--dx-or-texte); font-variant-numeric: tabular-nums; }
.dx-score__chiffres b span { font-size: 15px; font-weight: 600; opacity: .7; }
.dx-score__chiffres small { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.3; color: var(--dx-encre); opacity: .75; }
.dx-fin__cote { gap: 16px; }
.dx-fin__liens { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 16px; border-top: 1px solid var(--dx-ligne); }
.dx-fin__liens button { padding: 4px 0; border: 0; background: none; font: 500 14px var(--font); color: var(--dx-encre); text-decoration: underline; text-decoration-color: var(--dx-ligne-2); text-underline-offset: 4px; cursor: pointer; transition: color .2s ease, text-decoration-color .2s ease; }
.dx-fin__liens button:hover, .dx-fin__liens button:focus-visible { color: var(--dx-or-texte); text-decoration-color: currentColor; outline: none; }
.dx-fin__info:empty { display: none; }
@media (max-width: 1100px) { .dx-fin__grille { grid-template-columns: minmax(0, 440px); gap: 24px; } }
@media (max-width: 760px) { .dx-score--v2 { padding: 0; } .dx-score--v2 .dx-score__haut { height: 140px; } .dx-score--v2 .dx-score__bobby { width: 124px; height: 124px; } .dx-score__corps { padding: 16px 16px 18px; } .dx-score__chiffres b { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .dx-score--v2 .dx-score__bobby { animation: none; } }

/* ---------- Menu : exemples qui défilent + logo OpterIA (Axel, 15/10/2026) ---------- */
.dx-charge__exemples { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 16px 0 0; font-size: clamp(15px, 1.5vw, 18px); }
.dx-ex__lab { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8f; }
.dx-ex__fen { position: relative; display: block; width: min(440px, 86vw); height: 1.5em; overflow: hidden; text-align: center; }
.dx-ex__fen span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: #FB4D17; transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.dx-ex__fen span.est-sortant { opacity: 0; transform: translateY(-100%); }
.dx-ex__fen span.est-entrant { opacity: 0; transform: translateY(100%); }
html[data-theme="nuit"] .dx-ex__fen span { color: #ff8a5c; }
/* logo : dans le flux, en bas de l'écran s'il y a la place, sinon après les cartes */
.dx-charge__marque { position: static; display: flex; justify-content: center; margin: auto 0 0; padding-top: 32px; transform: none; }
.dx-charge__marque img { display: block; height: 26px; width: auto; }
.dx-charge__marque .dx-logo-nuit, html[data-theme="nuit"] .dx-charge__marque .dx-logo-jour { display: none; }
html[data-theme="nuit"] .dx-charge__marque .dx-logo-nuit { display: block; }
@media (max-height: 860px) { .dx-charge__marque { display: flex; } }
@media (max-width: 760px) { .dx-charge__marque { display: flex; padding-top: 24px; } .dx-charge__marque img { height: 22px; } .dx-charge__exemples { margin-top: 10px; font-size: 15px; } .dx-ex__fen { text-align: center; } }

/* ---------- Résumé de la démo en HTML pur, lisible sans JavaScript (point 34, 24/10/2026) : repliable, filets 1 px, aucune ombre ---------- */
.dx-resume { padding: 0 0 20px; background: var(--paper); }
.dx-resume__plis { max-width: 1080px; margin: 0 auto; border: 1px solid var(--line); border-radius: 16px; }
.dx-resume__plis > summary { display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer; list-style: none; }
.dx-resume__plis > summary::-webkit-details-marker { display: none; }
.dx-resume__plis > summary:focus-visible { outline: 2px solid #FB4D17; outline-offset: 2px; border-radius: 16px; }
.dx-resume__lab { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dx-resume__titre { flex: 1; margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.dx-resume__plus { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; }
.dx-resume__plus::before, .dx-resume__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease; }
.dx-resume__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.dx-resume__plis[open] .dx-resume__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.dx-resume__corps { padding: 0 22px 22px; }
.dx-resume__intro { max-width: 780px; margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--muet, var(--ink-2)); }
.dx-resume__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dx-resume__bureau { padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
.dx-resume__bureau h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.dx-resume__bureau p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--muet, var(--ink-2)); }
.dx-resume__bureau .dx-resume__outils { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.dx-resume__bureau ol { margin: 14px 0 0; padding: 0 0 0 20px; font-size: 14.5px; line-height: 1.45; color: var(--texte, var(--ink)); }
.dx-resume__bureau li + li { margin-top: 6px; }
.dx-resume__bureau li::marker { font: 500 12px var(--mono); color: #FB4D17; }
.dx-resume__bureau .dx-resume__bonus { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 1100px) { .dx-resume__grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .dx-resume { padding-bottom: 8px; }
  .dx-resume__plis > summary { flex-wrap: wrap; gap: 4px 12px; padding: 16px; }
  .dx-resume__lab { flex-basis: 100%; }
  .dx-resume__titre { font-size: 16px; }
  .dx-resume__corps { padding: 0 16px 16px; }
  .dx-resume__bureau { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dx-resume__plus::before, .dx-resume__plus::after { transition: none; } }