/* ════════════════════════════════════════════════════════════════════
   CHARTE v2 — SOCLE (FILE-ATTENTE tâche 5, 06/10/2026), v2.1 (tâche 8 bis, 07/10/2026). COPIE VERBATIM de
   design-ref/charte-v2-tokens.css, charte-v2-composants.css et charte-v2-marques.css (export du 05/10/2026 corrigé
   par Mathis le 06/10 : panneau des notifications compact, « Mon abonnement » ; dépôt du 07/10, 18 h 41 : sections
   « Bilans mensuels » et « Signaler un bug », tâche 11.5 lot 2 bis ; dépôt du 08/10, 17 h 44 : section « Automatisations
   (Elite) » de charte-v2-composants.css, ajout pur, tâche 11.10 ; dépôt du 08/10, 18 h 02 : section « Bilan d'un client »,
   ajout pur, tâche 11.11 ; dépôt du 08/10, 18 h 26 : sections de l'espace développeur, ajout pur, tâche 11.12), dans cet
   ordre ; puis
   design-ref/charte-v2-badges-compte.css (export du 08/10/2026, badges de compte Dev et Testeur, tâche 11.9 ; l'app
   n'émet que Dev A « Code » en vert et Testeur B « Validation », choix de Mathis du 08/10, 17 h 30).
   Seul retrait : l'@import Google Fonts (polices auto-hébergées : vendor/fonts/fonts-app.css).
   Chargée AVANT marx.css. Parité : node outil/harnais-parite.mjs charte-v2. Ne jamais éditer à la main :
   un nouvel export de la charte se recopie en entier.
   Dépôt du 13/10/2026, 21 h 24 (densité D2 « Équilibré », tâche 11.25) : jetons D2 AJOUTÉS à la fin des tokens
   (--mx-d2-*, --mx-fw-*, --mx-fs-kpi, --mx-row-h, --mx-h-btn*, --mx-e-soft : nouveaux noms, aucun ancien jeton changé ; lus
   d'abord par l'accueil, extension aux autres écrans = tâche à part) ; composants et marques : lignes vides seulement.
   Dépôt du 17/10/2026, 23 h 46 (maquettes Programme et Bibliothèque ; « Listes compactes » adoptées par Mathis le 18/10,
   tâche 11.42) : bloc « Listes compactes » @media (min-width:768px) ajouté à la fin des composants (.dd-*, .mx-menu* :
   options de 32 px, texte 13 px, sur ordinateur seulement) ; jetons et composants.js : lignes vides seulement.
   Dépôt du 23/10/2026 (maquette « Parcours du coach v2 », tâche 11.97, lot F0 ; charte du dossier
   design-ref/Parcours coach - export/, plus récente que celle de la racine) : `.mx-btn--xs` (3 lignes après .mx-btn--sm) —
   seul ajout réel ; jetons et marques : lignes vides seulement. Zone de toucher : la formule de la maquette donne 41 px
   (bordure 1,5 px) → formule sûre du 16/10 dans la COLLE (marx.css, 11.97 F0), jamais ici.
   ════════════════════════════════════════════════════════════════════ */
/* export du 05/10/2026 */
/* ════════════════════════════════════════════════════════════════
   MARX · CHARTE v2 — TOKENS
   Préfixe --mx-. Clair par défaut (:root / .mx-light), sombre via .mx-dark
   (sur <html> ou sur n'importe quel conteneur).
   Typographie validée : Barlow Condensed (grands titres de page, gros chiffres) + Barlow (tout le reste ;
   noms et sous-titres de section en Barlow 600, sans resserrement).
   JetBrains Mono : codes et identifiants uniquement.

   TABLE DE CORRESPONDANCE (anciennes variables → nouveaux tokens)
   --red    → --mx-red          (aplat, bouton primaire)
              --mx-red-text     (texte rouge sur fond crème/blanc)
   --black  → --mx-bg           (dans l'app, --black est le fond crème, pas l'encre)
   --ink    → --mx-ink
   --card   → --mx-surface
   --green  → --mx-green        (aplat)  /  --mx-green-text (texte)
   --bg     → --mx-bg      --muted → --mx-muted      --line → --mx-line
   --accent → --mx-red     --bx-*  → même nom sans préfixe bx (ex. --bx-line2 → --mx-line-2)
   Alias de transition disponibles dans le bloc .mx-legacy en bas de fichier.
   ════════════════════════════════════════════════════════════════ */

:root,.mx-light{
/* Marque — valeurs brutes */
--mx-brand-red:#E8170A;--mx-brand-ink:#0F0E0C;--mx-brand-cream:#F4F2ED;--mx-brand-green:#1B6B35;--mx-brand-yellow:#F2C12E;
/* Surfaces */
--mx-bg:#F4F2ED;--mx-bg-2:#ECE9E1;--mx-surface:#FFFFFF;--mx-surface-2:#F8F7F3;--mx-overlay:rgba(15,14,12,.48);
/* Encre */
--mx-ink:#0F0E0C;--mx-ink-2:#3D3A33;--mx-muted:#6B6760;--mx-faint:#B4AFA3;--mx-on-ink:#F4F2ED;
/* Filets */
--mx-line:#E4E0D5;--mx-line-2:#D3CEC1;--mx-line-strong:#0F0E0C;--mx-line-ui:#8C877C;
/* Rouge (marque + erreur) */
--mx-red:#E8170A;--mx-red-hover:#C2120A;--mx-red-text:#C2120A;--mx-red-soft:#FCEAE7;--mx-on-red:#FFFFFF;
/* Sémantique */
--mx-green:#1B6B35;--mx-green-text:#1B6B35;--mx-green-soft:#E4F0E7;--mx-on-green:#FFFFFF;
--mx-info:#1D4FB8;--mx-info-text:#1D4FB8;--mx-info-soft:#E7EDF9;--mx-on-info:#FFFFFF;
--mx-warn:#F2C12E;--mx-warn-text:#5C4500;--mx-warn-soft:#FBF1CF;--mx-on-warn:#0F0E0C;
--mx-danger:var(--mx-red);--mx-danger-text:var(--mx-red-text);--mx-danger-soft:var(--mx-red-soft);
--mx-focus:#1D4FB8;
/* Formules (badges) */
--mx-plan-starter:#6B6760;--mx-plan-pro:#0F0E0C;--mx-plan-elite:#0F0E0C;--mx-plan-pionnier:#E8170A;--mx-plan-demo:#1D4FB8;
--mx-e-1:0 1px 2px rgba(20,19,15,.05),0 4px 14px rgba(20,19,15,.03);
--mx-e-2:0 2px 6px rgba(20,19,15,.06),0 12px 32px rgba(20,19,15,.08);
--mx-e-3:0 8px 24px rgba(20,19,15,.12),0 32px 80px rgba(20,19,15,.18);
color-scheme:light;
}
/* Typographie, espacements, rayons, mouvement : indépendants du thème */
:root{

/* Typographie */
--mx-font-display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
--mx-font-text:'Barlow',system-ui,sans-serif;
--mx-font-mono:'JetBrains Mono',ui-monospace,monospace;
--mx-display-weight:700;--mx-display-case:uppercase;--mx-display-track:-.005em;
--mx-title-font:var(--mx-font-text);--mx-title-weight:600;--mx-title-track:0;
--mx-fs-display-xl:clamp(2.75rem,1.4rem + 5.6vw,5.5rem);--mx-lh-display-xl:.9;
--mx-fs-display:clamp(2.125rem,1.5rem + 2.6vw,3.5rem);--mx-lh-display:.92;
--mx-fs-h1:clamp(1.75rem,1.45rem + 1.3vw,2.5rem);--mx-lh-h1:1;
--mx-fs-h2:clamp(1.25rem,1.15rem + .45vw,1.5rem);--mx-lh-h2:1.2;
--mx-fs-h3:clamp(1.0625rem,1rem + .25vw,1.1875rem);--mx-lh-h3:1.3;
--mx-fs-body:1rem;--mx-lh-body:1.5;
--mx-fs-sm:.875rem;--mx-lh-sm:1.45;
--mx-fs-xs:.8125rem;--mx-lh-xs:1.4;
--mx-fs-over:.75rem;--mx-track-over:.14em;
--mx-fw-regular:400;--mx-fw-medium:500;--mx-fw-semi:600;--mx-fw-bold:700;

/* Espacements (base 4) */
--mx-s-0:0;--mx-s-1:.25rem;--mx-s-2:.5rem;--mx-s-3:.75rem;--mx-s-4:1rem;--mx-s-5:1.25rem;--mx-s-6:1.5rem;--mx-s-8:2rem;--mx-s-10:2.5rem;--mx-s-12:3rem;--mx-s-16:4rem;--mx-s-20:5rem;
--mx-gutter:clamp(1rem,.6rem + 2vw,2.5rem);
--mx-page-max:80rem;--mx-read-max:46rem;
/* Rayons */
--mx-r-xs:4px;--mx-r-sm:6px;--mx-r-md:10px;--mx-r-lg:14px;--mx-r-xl:20px;--mx-r-pill:999px;
/* Bordures */
--mx-bw-hair:1px;--mx-bw-ui:1.5px;--mx-bw-rule:2px;
/* Élévation */
--mx-e-0:none;
/* Cibles & hauteurs */
--mx-target:44px;--mx-h-sm:36px;--mx-h-md:44px;--mx-h-lg:52px;
--mx-nav-h:48px;
/* Mouvement */
--mx-ease:cubic-bezier(.4,0,.2,1);--mx-ease-out:cubic-bezier(0,0,.2,1);--mx-ease-in:cubic-bezier(.4,0,1,1);
--mx-d-fast:200ms;--mx-d-base:400ms;--mx-d-slow:600ms;
--mx-loader-delay:300ms;
/* Z */
--mx-z-nav:50;--mx-z-pop:60;--mx-z-modal:80;--mx-z-toast:90;
}
@media (min-width:1024px){:root{--mx-nav-h:52px}}

.mx-dark{
--mx-bg:#0E0D0B;--mx-bg-2:#161513;--mx-surface:#1C1B18;--mx-surface-2:#242320;--mx-overlay:rgba(0,0,0,.64);
--mx-ink:#F4F2ED;--mx-ink-2:#D6D2C8;--mx-muted:#A29D92;--mx-faint:#5C5848;--mx-on-ink:#0F0E0C;
--mx-line:#2C2A26;--mx-line-2:#3A3732;--mx-line-strong:#F4F2ED;--mx-line-ui:#77726A;
--mx-red:#E8170A;--mx-red-hover:#FF3B2E;--mx-red-text:#FF6A5E;--mx-red-soft:#2E120E;--mx-on-red:#FFFFFF;
--mx-green:#21803C;--mx-green-text:#5CC47E;--mx-green-soft:#13261A;
--mx-info:#2A5FD6;--mx-info-text:#8AAEFF;--mx-info-soft:#121C33;
--mx-warn:#F2C12E;--mx-warn-text:#F2C12E;--mx-warn-soft:#2A2208;
--mx-focus:#8AAEFF;
--mx-plan-starter:#A29D92;--mx-plan-pro:#F4F2ED;--mx-plan-elite:#F4F2ED;--mx-plan-demo:#8AAEFF;
--mx-e-1:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25);
--mx-e-2:0 2px 6px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.4);
--mx-e-3:0 10px 30px rgba(0,0,0,.5),0 40px 90px rgba(0,0,0,.6);
color-scheme:dark;
}

@media (prefers-reduced-motion:reduce){:root{--mx-d-fast:1ms;--mx-d-base:1ms;--mx-d-slow:1ms}}

/* Alias de transition — à retirer écran par écran */
.mx-legacy{--red:var(--mx-red);--black:var(--mx-bg);--ink:var(--mx-ink);--card:var(--mx-surface);--green:var(--mx-green);--bg:var(--mx-bg);--muted:var(--mx-muted);--line:var(--mx-line);--accent:var(--mx-red)}







/* Densité D2 « Équilibré » — validée le 13/10/2026 (accueil, Clients, fiche client). À étendre aux autres écrans. */
:root{--mx-d2-text:14px;--mx-d2-meta:13px;--mx-d2-name:15px;--mx-fw-name:600;--mx-fw-label:500;--mx-fw-btn:500;--mx-d2-title:30px;--mx-d2-section:13px;--mx-fs-kpi:30px;--mx-row-h:52px;--mx-h-btn:36px;--mx-h-btn-sm:32px;--mx-e-soft:0 1px 2px rgba(20,19,15,.04),0 4px 14px -8px rgba(20,19,15,.12)}
@media (max-width:767.98px){:root{--mx-h-btn:44px;--mx-h-btn-sm:36px}}



/* export du 05/10/2026 */
/* ════════════════════════════════════════════════════════════════
   MARX · CHARTE v2 — COMPOSANTS
   Dépend de charte-v2-tokens.css. Préfixe .mx-.
   États : :hover/.is-hover · :focus-visible/.is-focus · :active/.is-active
           [disabled]/.is-disabled · [aria-busy="true"] (chargement) · .is-error
   Les classes .is-* reproduisent les pseudo-états pour les planches.
   ════════════════════════════════════════════════════════════════ */

/* ───── Racine & base ───── */
.mx,.mx *,.mx *::before,.mx *::after{box-sizing:border-box}
.mx{font-family:var(--mx-font-text);font-size:var(--mx-fs-body);line-height:var(--mx-lh-body);color:var(--mx-ink);background:var(--mx-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(.mx) :where(h1,h2,h3,h4,p,ul,ol,figure,dl,dd){margin:0;padding:0}
:where(.mx) :where(ul,ol){list-style:none}
:where(.mx) :where(button,input,select,textarea){font:inherit;color:inherit;margin:0}
:where(.mx) :where(button){cursor:pointer;background:none;border:0;padding:0}
:where(.mx) :where(img,svg){display:block;max-width:100%}
:where(.mx) :where(a){color:var(--mx-ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:var(--mx-fw-semi)}
:where(.mx) :where(a:hover){color:var(--mx-red-text)}
:where(.mx) :where(:focus-visible){outline:2px solid var(--mx-focus);outline-offset:2px;border-radius:var(--mx-r-xs)}
.mx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mx-num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1,"lnum" 1}

/* ───── Typographie ───── */
.mx-display-xl,.mx-display,.mx-h1{font-family:var(--mx-font-display);font-weight:var(--mx-display-weight);text-transform:var(--mx-display-case);letter-spacing:var(--mx-display-track);text-wrap:balance}
.mx-display-xl{font-size:var(--mx-fs-display-xl);line-height:var(--mx-lh-display-xl)}
.mx-display{font-size:var(--mx-fs-display);line-height:var(--mx-lh-display)}
.mx-h1{font-size:var(--mx-fs-h1);line-height:var(--mx-lh-h1)}
.mx-h2,.mx-h3{font-family:var(--mx-title-font);font-weight:var(--mx-title-weight);letter-spacing:var(--mx-title-track);text-wrap:balance}
.mx-h2{font-size:var(--mx-fs-h2);line-height:var(--mx-lh-h2)}
.mx-h3{font-size:var(--mx-fs-h3);line-height:var(--mx-lh-h3)}
.mx-body{font-size:var(--mx-fs-body);line-height:var(--mx-lh-body);text-wrap:pretty}
.mx-small{font-size:var(--mx-fs-sm);line-height:var(--mx-lh-sm);text-wrap:pretty}
.mx-xs{font-size:var(--mx-fs-xs);line-height:var(--mx-lh-xs)}
.mx-over{font-family:var(--mx-font-text);font-size:var(--mx-fs-over);font-weight:var(--mx-fw-bold);letter-spacing:var(--mx-track-over);text-transform:uppercase;line-height:1.2;color:var(--mx-muted)}
.mx-over--red{color:var(--mx-red-text)}
.mx-stat{font-family:var(--mx-font-display);font-weight:var(--mx-display-weight);font-size:var(--mx-fs-display);line-height:.9;font-variant-numeric:tabular-nums lining-nums}
.mx-muted{color:var(--mx-muted)}
.mx-ink2{color:var(--mx-ink-2)}
.mx-strong{font-weight:var(--mx-fw-bold);color:var(--mx-ink)}

/* ───── Mise en page ───── */
.mx-page{width:100%;max-width:var(--mx-page-max);margin-inline:auto;padding:var(--mx-s-6) var(--mx-gutter) var(--mx-s-16);min-width:0}
.mx-page--read{max-width:calc(var(--mx-read-max) + 2 * var(--mx-gutter))}
.mx-stack{display:flex;flex-direction:column;gap:var(--mx-stack,var(--mx-s-4));min-width:0}
.mx-stack--2{--mx-stack:var(--mx-s-2)}.mx-stack--3{--mx-stack:var(--mx-s-3)}.mx-stack--6{--mx-stack:var(--mx-s-6)}.mx-stack--8{--mx-stack:var(--mx-s-8)}
.mx-row{display:flex;align-items:center;gap:var(--mx-s-3);min-width:0}
.mx-row--between{justify-content:space-between}
.mx-row--wrap{flex-wrap:wrap}
.mx-row--top{align-items:flex-start}
.mx-grow{flex:1 1 auto;min-width:0}
.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--mx-grid-min,16rem)),1fr));gap:var(--mx-grid-gap,var(--mx-s-4))}
.mx-rule{height:var(--mx-bw-rule);background:var(--mx-line-strong);border:0;margin:0}
.mx-hr{height:1px;background:var(--mx-line);border:0;margin:0}

/* ───── Icônes (24 grille, trait 1.85, bouts ronds) ───── */
.mx-ico{width:var(--mx-ico,20px);height:var(--mx-ico,20px);flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.mx-ico--16{--mx-ico:16px}.mx-ico--20{--mx-ico:20px}.mx-ico--24{--mx-ico:24px}.mx-ico--32{--mx-ico:32px;stroke-width:1.6}

/* ───── Boutons ───── */
.mx-btn{--b-bg:var(--mx-surface);--b-fg:var(--mx-ink);--b-bd:var(--mx-line-2);--b-bg-h:var(--mx-surface);--b-bd-h:var(--mx-ink);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mx-s-2);min-height:var(--mx-h-md);padding:var(--mx-s-2) var(--mx-s-5);border:var(--mx-bw-ui) solid var(--b-bd);border-radius:var(--mx-r-md);background:var(--b-bg);color:var(--b-fg);font-family:var(--mx-font-text);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background var(--mx-d-fast) var(--mx-ease),border-color var(--mx-d-fast) var(--mx-ease),color var(--mx-d-fast) var(--mx-ease),transform var(--mx-d-fast) var(--mx-ease);-webkit-tap-highlight-color:transparent}
.mx-btn:hover,.mx-btn.is-hover{background:var(--b-bg-h);border-color:var(--b-bd-h);color:var(--b-fg)}
.mx-btn:focus-visible,.mx-btn.is-focus{outline:2px solid var(--mx-focus);outline-offset:3px}
.mx-btn:active,.mx-btn.is-active{transform:translateY(1px) scale(.99)}
.mx-btn--primary{--b-bg:var(--mx-red);--b-fg:var(--mx-on-red);--b-bd:var(--mx-red);--b-bg-h:var(--mx-red-hover);--b-bd-h:var(--mx-red-hover)}
.mx-btn--secondary{--b-bg:var(--mx-surface);--b-fg:var(--mx-ink);--b-bd:var(--mx-line-2);--b-bd-h:var(--mx-ink)}
.mx-btn--ink{--b-bg:var(--mx-ink);--b-fg:var(--mx-on-ink);--b-bd:var(--mx-ink);--b-bg-h:var(--mx-ink-2);--b-bd-h:var(--mx-ink-2)}
.mx-btn--ghost{--b-bg:transparent;--b-fg:var(--mx-ink);--b-bd:transparent;--b-bg-h:var(--mx-bg-2);--b-bd-h:transparent}
.mx-btn--danger{--b-bg:var(--mx-surface);--b-fg:var(--mx-red-text);--b-bd:var(--mx-red-text);--b-bg-h:var(--mx-red);--b-bd-h:var(--mx-red)}
.mx-btn--danger:hover,.mx-btn--danger.is-hover{color:var(--mx-on-red)}
.mx-btn--danger-solid{--b-bg:var(--mx-red);--b-fg:var(--mx-on-red);--b-bd:var(--mx-red);--b-bg-h:var(--mx-red-hover);--b-bd-h:var(--mx-red-hover)}
.mx-btn--sm{min-height:var(--mx-h-sm);padding:var(--mx-s-1) var(--mx-s-3);font-size:var(--mx-fs-xs);border-radius:var(--mx-r-sm)}
.mx-btn--sm::after{content:"";position:absolute;inset:-4px}
/* --xs : bandeaux, cartes système, lignes de liste, centre de notifications. Les tailles --md et --lg sont pour les formulaires et les bas de page. Zone de toucher gardée à 44 px. */
.mx-btn--xs{min-height:32px;padding:0 12px;font-size:13px;border-radius:var(--mx-r-sm)}
.mx-btn--xs::after{content:"";position:absolute;inset:-6px -2px}
.mx-btn--lg{min-height:var(--mx-h-lg);padding:var(--mx-s-3) var(--mx-s-6);font-size:var(--mx-fs-body)}
.mx-btn--block{display:flex;width:100%}
.mx-btn--icon{padding:0;width:var(--mx-target);min-width:var(--mx-target)}
.mx-btn[disabled],.mx-btn.is-disabled,.mx-btn[aria-disabled="true"]{cursor:not-allowed;--b-bg:var(--mx-bg-2);--b-fg:var(--mx-muted);--b-bd:var(--mx-line);--b-bg-h:var(--mx-bg-2);--b-bd-h:var(--mx-line);transform:none}
.mx-btn--ghost[disabled],.mx-btn--ghost.is-disabled{--b-bg:transparent;--b-bg-h:transparent;--b-bd:transparent;--b-bd-h:transparent}
.mx-btn[aria-busy="true"]{cursor:progress}
.mx-btn[aria-busy="true"] .mx-btn-label{opacity:.9}
.mx-btn.is-error{--b-bd:var(--mx-red-text);--b-bd-h:var(--mx-red-text)}

/* Bouton-icône de navigation (cible 44) */
.mx-iconbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--mx-target);height:var(--mx-target);padding:0;border-radius:var(--mx-r-md);color:var(--mx-ink);transition:background var(--mx-d-fast) var(--mx-ease)}
.mx-iconbtn:hover,.mx-iconbtn.is-hover,.mx-iconbtn[aria-expanded="true"]{background:var(--mx-bg-2)}
.mx-count{position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--mx-r-pill);background:var(--mx-red);color:var(--mx-on-red);font-size:11px;font-weight:var(--mx-fw-bold);line-height:18px;text-align:center;font-variant-numeric:tabular-nums;border:2px solid var(--mx-bg)}

/* ───── Champs ───── */
.mx-field{display:flex;flex-direction:column;gap:var(--mx-s-2);min-width:0}
.mx-label{font-size:var(--mx-fs-over);font-weight:var(--mx-fw-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--mx-ink)}
.mx-hint{font-size:var(--mx-fs-xs);color:var(--mx-muted)}
.mx-error{display:flex;align-items:flex-start;gap:var(--mx-s-2);font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-red-text)}
.mx-error .mx-ico{--mx-ico:16px;margin-top:1px}
.mx-input,.mx-select,.mx-textarea{width:100%;min-width:0;min-height:var(--mx-h-md);padding:var(--mx-s-2) var(--mx-s-4);border:var(--mx-bw-ui) solid var(--mx-line-ui);border-radius:var(--mx-r-md);background:var(--mx-surface);color:var(--mx-ink);font-family:var(--mx-font-text);font-size:var(--mx-fs-body);line-height:1.4;transition:border-color var(--mx-d-fast) var(--mx-ease),box-shadow var(--mx-d-fast) var(--mx-ease)}
.mx-input::placeholder,.mx-textarea::placeholder{color:var(--mx-muted);opacity:1}
.mx-input:hover,.mx-select:hover,.mx-textarea:hover,.mx-input.is-hover,.mx-select.is-hover{border-color:var(--mx-ink)}
.mx-input:focus-visible,.mx-select:focus-visible,.mx-textarea:focus-visible,.mx-input.is-focus,.mx-select.is-focus,.mx-textarea.is-focus{outline:none;border-color:var(--mx-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--mx-focus) 35%,transparent)}
.mx-input[disabled],.mx-select[disabled],.mx-textarea[disabled],.mx-input.is-disabled{background:var(--mx-bg-2);color:var(--mx-muted);border-color:var(--mx-line);cursor:not-allowed}
.mx-field.is-error .mx-input,.mx-field.is-error .mx-select,.mx-field.is-error .mx-textarea{border-color:var(--mx-red-text)}
.mx-textarea{min-height:6.5rem;padding-block:var(--mx-s-3);resize:vertical}
.mx-select{appearance:none;padding-right:var(--mx-s-10);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.mx-input--mono{font-family:var(--mx-font-mono);letter-spacing:.08em;text-transform:uppercase}

.mx-choice{display:flex;align-items:flex-start;gap:var(--mx-s-3);min-height:var(--mx-target);padding-block:var(--mx-s-2);cursor:pointer;font-size:var(--mx-fs-sm);line-height:1.4}
.mx-choice>span{padding-top:2px;min-width:0}
.mx-check,.mx-radio{appearance:none;flex:0 0 auto;width:22px;height:22px;margin:0;border:var(--mx-bw-ui) solid var(--mx-line-ui);background:var(--mx-surface);display:inline-grid;place-content:center;cursor:pointer;transition:all var(--mx-d-fast) var(--mx-ease)}
.mx-check{border-radius:var(--mx-r-xs)}
.mx-radio{border-radius:50%}
.mx-check::before{content:"";width:11px;height:6px;border-left:2.2px solid var(--mx-on-ink);border-bottom:2.2px solid var(--mx-on-ink);transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform var(--mx-d-fast) var(--mx-ease)}
.mx-radio::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mx-on-ink);transform:scale(0);transition:transform var(--mx-d-fast) var(--mx-ease)}
.mx-check:checked,.mx-radio:checked{background:var(--mx-ink);border-color:var(--mx-ink)}
.mx-check:checked::before,.mx-radio:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
.mx-radio:checked::before{transform:scale(1)}
.mx-check:hover,.mx-radio:hover,.mx-check.is-hover{border-color:var(--mx-ink)}
.mx-check:focus-visible,.mx-radio:focus-visible,.mx-switch:focus-visible,.mx-check.is-focus,.mx-switch.is-focus{outline:2px solid var(--mx-focus);outline-offset:2px}
.mx-check:disabled,.mx-radio:disabled,.mx-switch:disabled{opacity:.45;cursor:not-allowed}
.is-error .mx-check,.mx-check.is-error{border-color:var(--mx-red-text)}
.mx-switch{appearance:none;flex:0 0 auto;position:relative;width:44px;height:26px;margin:0;border-radius:var(--mx-r-pill);background:var(--mx-line-ui);cursor:pointer;transition:background var(--mx-d-fast) var(--mx-ease)}
.mx-switch::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--mx-d-fast) var(--mx-ease)}
.mx-switch:checked{background:var(--mx-green)}
.mx-switch:checked::before{transform:translateX(18px)}

/* ───── Cartes ───── */
.mx-card{min-width:0;display:flex;flex-direction:column;gap:var(--mx-s-4);padding:var(--mx-s-5);background:var(--mx-surface);border:var(--mx-bw-hair) solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-1)}
@media (min-width:768px){.mx-card{padding:var(--mx-s-6)}}
.mx-card--flat{box-shadow:none}
.mx-card--strong{border:var(--mx-bw-ui) solid var(--mx-line-strong);box-shadow:none}
.mx-card--danger{border-color:color-mix(in oklab,var(--mx-red) 45%,var(--mx-line))}
.mx-card--flush{padding:0;gap:0;overflow:hidden}
.mx-card-hd{display:flex;align-items:flex-start;gap:var(--mx-s-3);min-width:0}
.mx-card-ic{flex:0 0 auto;width:40px;height:40px;border-radius:var(--mx-r-md);background:var(--mx-bg-2);display:grid;place-items:center;color:var(--mx-ink)}
.mx-card-ic--red{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-card-ft{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-3);padding-top:var(--mx-s-4);border-top:1px solid var(--mx-line)}

/* ───── Listes ───── */
.mx-list{display:flex;flex-direction:column;min-width:0}
.mx-item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:var(--mx-s-3);min-height:var(--mx-target);padding:var(--mx-s-4) var(--mx-s-4);border-bottom:1px solid var(--mx-line);background:var(--mx-surface);color:var(--mx-ink);text-align:left;width:100%;text-decoration:none;font-weight:inherit;transition:background var(--mx-d-fast) var(--mx-ease)}
.mx-item:last-child{border-bottom:0}
button.mx-item,a.mx-item{cursor:pointer}
button.mx-item:hover,a.mx-item:hover,.mx-item.is-hover{background:var(--mx-surface-2);color:var(--mx-ink)}
.mx-item:focus-visible{outline:2px solid var(--mx-focus);outline-offset:-2px;border-radius:0}
.mx-item-lead{width:40px;height:40px;border-radius:var(--mx-r-md);display:grid;place-items:center;background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-item-lead--red{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-item-lead--green{background:var(--mx-green-soft);color:var(--mx-green-text)}
.mx-item-lead--info{background:var(--mx-info-soft);color:var(--mx-info-text)}
.mx-item-lead--warn{background:var(--mx-warn-soft);color:var(--mx-warn-text)}
.mx-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mx-item-title{font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-medium);line-height:1.35;color:var(--mx-ink);text-wrap:pretty;overflow-wrap:anywhere}
.mx-item-text{font-size:var(--mx-fs-sm);line-height:1.4;color:var(--mx-muted);overflow-wrap:anywhere}
.mx-item-meta{font-size:var(--mx-fs-xs);color:var(--mx-muted);font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:center;gap:var(--mx-s-2);padding-top:2px}
.mx-item.is-unread{background:color-mix(in oklab,var(--mx-red) 4%,var(--mx-surface))}
.mx-item.is-unread .mx-item-title{font-weight:var(--mx-fw-bold)}
.mx-unread{width:9px;height:9px;border-radius:50%;background:var(--mx-red);flex:0 0 auto}
.mx-group-hd{padding:var(--mx-s-5) var(--mx-s-4) var(--mx-s-2);background:var(--mx-bg)}

/* ───── Onglets soulignés & segmenté fin ───── */
.mx-tabs{display:flex;gap:var(--mx-s-1);border-bottom:var(--mx-bw-ui) solid var(--mx-line);overflow-x:auto;scrollbar-width:none;min-width:0}
.mx-tabs::-webkit-scrollbar{display:none}
.mx-tab{flex:0 0 auto;min-height:var(--mx-target);padding:var(--mx-s-2) var(--mx-s-4);margin-bottom:calc(var(--mx-bw-ui) * -1);border-bottom:3px solid transparent;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--mx-muted);transition:color var(--mx-d-fast) var(--mx-ease),border-color var(--mx-d-fast) var(--mx-ease)}
.mx-tab:hover,.mx-tab.is-hover{color:var(--mx-ink)}
.mx-tab[aria-selected="true"]{color:var(--mx-ink);border-bottom-color:var(--mx-red)}
.mx-tab[disabled]{opacity:.45;cursor:not-allowed}
.mx-seg{display:inline-flex;gap:2px;padding:3px;border:var(--mx-bw-hair) solid var(--mx-line-2);border-radius:var(--mx-r-md);background:var(--mx-surface);max-width:100%;overflow-x:auto;scrollbar-width:none;min-width:0}
.mx-seg::-webkit-scrollbar{display:none}
.mx-seg--scroll{display:flex;width:100%}
@media (min-width:1024px){.mx-seg--scroll{display:inline-flex;width:auto}}
.mx-seg-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--mx-s-2);min-height:var(--mx-target);padding:var(--mx-s-1) var(--mx-s-3);border-radius:7px;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-muted);white-space:nowrap;transition:background var(--mx-d-fast) var(--mx-ease),color var(--mx-d-fast) var(--mx-ease)}
.mx-seg-btn:hover,.mx-seg-btn.is-hover{color:var(--mx-ink);background:var(--mx-bg-2)}
.mx-seg-btn[aria-pressed="true"],.mx-seg-btn[aria-selected="true"]{background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-seg-btn .n{font-size:var(--mx-fs-xs);font-variant-numeric:tabular-nums;opacity:.75}

/* ───── Étiquettes ───── */
.mx-tag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 9px;border-radius:var(--mx-r-sm);border:1px solid transparent;background:var(--mx-bg-2);color:var(--mx-ink-2);font-size:var(--mx-fs-over);font-weight:var(--mx-fw-bold);letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.mx-tag .mx-ico{--mx-ico:14px}
.mx-tag--red{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-tag--green{background:var(--mx-green-soft);color:var(--mx-green-text)}
.mx-tag--info{background:var(--mx-info-soft);color:var(--mx-info-text)}
.mx-tag--warn{background:var(--mx-warn-soft);color:var(--mx-warn-text)}
.mx-tag--outline{background:transparent;border-color:var(--mx-line-2);border-style:dashed;color:var(--mx-muted)}
.mx-tag--ink{background:var(--mx-ink);color:var(--mx-on-ink)}

/* ───── Bannières ───── */
.mx-banner{--bn-bg:var(--mx-info-soft);--bn-fg:var(--mx-info-text);--bn-bd:var(--mx-info);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mx-s-3);align-items:start;padding:var(--mx-s-4);border-radius:var(--mx-r-md);background:var(--bn-bg);border:1px solid color-mix(in oklab,var(--bn-bd) 40%,transparent);border-left-width:1px;color:var(--mx-ink)}
.mx-banner>.mx-ico{color:var(--bn-fg);margin-top:1px}
.mx-banner-body{display:flex;flex-direction:column;gap:var(--mx-s-1);min-width:0}
.mx-banner-title{font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold);line-height:1.35}
.mx-banner-text{font-size:var(--mx-fs-sm);line-height:1.45;color:var(--mx-ink-2)}
.mx-banner-actions{display:flex;flex-wrap:wrap;gap:var(--mx-s-2);margin-top:var(--mx-s-2)}
.mx-banner--trial{--bn-bg:var(--mx-ink);--bn-fg:var(--mx-red-text);--bn-bd:var(--mx-ink);color:var(--mx-on-ink)}
.mx-dark .mx-banner--trial,.mx-banner--trial.mx-dark{--bn-bg:var(--mx-surface-2);--bn-bd:var(--mx-line-2)}
.mx-banner--trial .mx-banner-text{color:color-mix(in oklab,var(--mx-on-ink) 80%,transparent)}
.mx-dark .mx-banner--trial{color:var(--mx-ink)}
.mx-dark .mx-banner--trial .mx-banner-text{color:var(--mx-ink-2)}
.mx-banner--warn{--bn-bg:var(--mx-warn-soft);--bn-fg:var(--mx-warn-text);--bn-bd:var(--mx-warn)}
.mx-banner--warn{border-color:var(--mx-warn)}
.mx-banner--alert{--bn-bg:var(--mx-red-soft);--bn-fg:var(--mx-red-text);--bn-bd:var(--mx-red)}
.mx-banner--success{--bn-bg:var(--mx-green-soft);--bn-fg:var(--mx-green-text);--bn-bd:var(--mx-green)}

/* ───── Toasts ───── */
.mx-toasts{position:fixed;z-index:var(--mx-z-toast);left:var(--mx-s-4);right:var(--mx-s-4);bottom:calc(var(--mx-s-4) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--mx-s-2);pointer-events:none}
@media (min-width:1024px){.mx-toasts{left:auto;align-items:flex-end;width:24rem}}
.mx-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--mx-s-3);width:100%;max-width:24rem;padding:var(--mx-s-3) var(--mx-s-4);border-radius:var(--mx-r-md);background:var(--mx-ink);color:var(--mx-on-ink);box-shadow:var(--mx-e-3);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-medium);animation:mx-toast-in var(--mx-d-base) var(--mx-ease-out) both}
.mx-toast .mx-ico{color:var(--mx-green-text)}
.mx-light .mx-toast .mx-ico,.mx-toast--light .mx-ico{color:#5CC47E}
.mx-toast--error .mx-ico{color:#FF6A5E}
.mx-toast .mx-btn{margin-left:auto;--b-bg:transparent;--b-bd:transparent;--b-fg:var(--mx-on-ink);--b-bg-h:rgba(127,127,127,.2);--b-bd-h:transparent}
.mx-toast.is-leaving{animation:mx-toast-out var(--mx-d-fast) var(--mx-ease-in) both}
.mx-toast--static{animation:none;position:static}
@keyframes mx-toast-in{from{opacity:0;transform:translateY(12px)}}
@keyframes mx-toast-out{to{opacity:0;transform:translateY(8px)}}

/* ───── Modales de confirmation ───── */
.mx-modal-bg{position:fixed;inset:0;z-index:var(--mx-z-modal);background:var(--mx-overlay);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:mx-fade var(--mx-d-fast) var(--mx-ease) both}
@media (min-width:768px){.mx-modal-bg{align-items:center;padding:var(--mx-s-6)}}
.mx-modal{width:100%;max-width:30rem;max-height:calc(100dvh - 2rem);overflow:auto;display:flex;flex-direction:column;gap:var(--mx-s-4);padding:var(--mx-s-6) var(--mx-s-5) calc(var(--mx-s-5) + env(safe-area-inset-bottom));background:var(--mx-surface);color:var(--mx-ink);border-radius:var(--mx-r-xl) var(--mx-r-xl) 0 0;box-shadow:var(--mx-e-3);animation:mx-sheet-in var(--mx-d-base) var(--mx-ease-out) both}
@media (min-width:768px){.mx-modal{border-radius:var(--mx-r-xl);padding:var(--mx-s-8)}}
.mx-modal-actions{display:flex;flex-direction:column-reverse;gap:var(--mx-s-2)}
@media (min-width:480px){.mx-modal-actions{flex-direction:row;justify-content:flex-end}}
.mx-modal--static{position:static;animation:none;border-radius:var(--mx-r-xl);box-shadow:var(--mx-e-2);max-height:none}
@keyframes mx-fade{from{opacity:0}}
@keyframes mx-sheet-in{from{opacity:0;transform:translateY(24px)}}

/* ───── Popover (panneau de la cloche) ───── */
.mx-anchor{position:relative}
.mx-popover{position:absolute;z-index:var(--mx-z-pop);top:calc(100% + 8px);right:0;width:min(26rem,calc(100vw - 2rem));max-height:min(36rem,calc(100dvh - var(--mx-nav-h) - 2rem));display:flex;flex-direction:column;background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-3);overflow:hidden;animation:mx-pop-in var(--mx-d-fast) var(--mx-ease-out) both}
.mx-popover-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--mx-s-2);padding:var(--mx-s-3) var(--mx-s-3) var(--mx-s-3) var(--mx-s-4);border-bottom:1px solid var(--mx-line)}
.mx-popover-bd{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto}
.mx-popover-ft{padding:var(--mx-s-2);border-top:1px solid var(--mx-line);display:flex}
@keyframes mx-pop-in{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:1023.98px){.mx-popover{display:none}.mx-desk{display:none!important}}
@media (min-width:1024px){.mx-mob{display:none!important}}

/* ───── Barre de navigation (verre dépoli) ───── */
.mx-nav{position:sticky;top:0;z-index:var(--mx-z-nav);height:var(--mx-nav-h);background:color-mix(in oklab,var(--mx-bg) 80%,transparent);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);border-bottom:1px solid var(--mx-line)}
.mx-nav-in{height:100%;max-width:var(--mx-page-max);margin-inline:auto;padding:0 calc(var(--mx-gutter) - 8px) 0 var(--mx-gutter);display:flex;align-items:center;gap:var(--mx-s-4);min-width:0}
.mx-nav-logo{display:flex;align-items:center;min-height:var(--mx-target);gap:var(--mx-s-2);color:var(--mx-ink);text-decoration:none;flex:0 0 auto}
.mx-nav-links{display:none;gap:var(--mx-s-1);min-width:0}
@media (min-width:1024px){.mx-nav-links{display:flex}}
.mx-nav-link{display:inline-flex;align-items:center;min-height:var(--mx-target);padding:0 var(--mx-s-3);border-radius:var(--mx-r-sm);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-muted);text-decoration:none}
.mx-nav-link:hover{color:var(--mx-ink);background:var(--mx-bg-2)}
.mx-nav-link[aria-current="page"]{color:var(--mx-ink)}
.mx-nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--mx-s-1)}

/* ───── En-tête de page ───── */
.mx-pagehd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--mx-s-3) var(--mx-s-4);padding-bottom:var(--mx-s-4);border-bottom:var(--mx-bw-rule) solid var(--mx-line-strong)}
.mx-pagehd--sticky{position:sticky;top:var(--mx-nav-h);z-index:10;background:var(--mx-bg);padding-top:var(--mx-s-3);margin-top:calc(var(--mx-s-3) * -1)}
@media (min-width:1024px){.mx-pagehd--sticky{position:static;margin-top:0;padding-top:0}}

/* ───── États vides ───── */
.mx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--mx-s-3);padding:var(--mx-s-12) var(--mx-s-5)}
.mx-empty-ic{width:56px;height:56px;border-radius:50%;background:var(--mx-bg-2);color:var(--mx-muted);display:grid;place-items:center}
.mx-empty-ic--red{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-empty .mx-small{max-width:26rem;color:var(--mx-muted)}

/* ───── Squelettes ───── */
.mx-skel{display:block;border-radius:var(--mx-r-xs);background:var(--mx-bg-2);position:relative;overflow:hidden}
.mx-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--mx-surface) 70%,transparent),transparent);animation:mx-shimmer 1.4s var(--mx-ease) infinite}
.mx-skel--line{height:12px;width:100%}
.mx-skel--title{height:16px;width:60%}
.mx-skel--meta{height:12px;width:36px}
.mx-skel.mx-w-30{width:30%}.mx-skel.mx-w-40{width:40%}.mx-skel.mx-w-50{width:50%}.mx-skel.mx-w-60{width:60%}.mx-skel.mx-w-70{width:70%}.mx-skel.mx-w-80{width:80%}
.mx-skel--box{width:40px;height:40px;border-radius:var(--mx-r-md)}
.mx-skel--circle{width:40px;height:40px;border-radius:50%}
@keyframes mx-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.mx-skel::after{animation:none;display:none}}

/* ───── Avatars ───── */
.mx-av{--av:40px;flex:0 0 auto;width:var(--av);height:var(--av);border-radius:50%;display:inline-grid;place-items:center;background:var(--mx-ink);color:var(--mx-on-ink);font-family:var(--mx-font-text);font-weight:var(--mx-fw-bold);font-size:calc(var(--av) * .36);letter-spacing:.02em;overflow:hidden;position:relative}
.mx-av--sm{--av:32px}.mx-av--lg{--av:56px}.mx-av--xl{--av:80px}
.mx-av--soft{background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-av--red{background:var(--mx-red);color:var(--mx-on-red)}
.mx-av--photo{background:repeating-linear-gradient(135deg,var(--mx-bg-2) 0 3px,var(--mx-line) 3px 6px);color:var(--mx-ink)}
.mx-av-stat{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;border-radius:50%;background:var(--mx-green);border:2px solid var(--mx-surface)}

/* ───── Barre de progression (élément natif <progress>, aucune valeur en style) ───── */
.mx-progress{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--mx-r-pill);background:var(--mx-bg-2);overflow:hidden;color:var(--mx-red)}
.mx-progress::-webkit-progress-bar{background:var(--mx-bg-2);border-radius:var(--mx-r-pill)}
.mx-progress::-webkit-progress-value{background:var(--mx-red);border-radius:var(--mx-r-pill);transition:width var(--mx-d-slow) var(--mx-ease)}
.mx-progress::-moz-progress-bar{background:var(--mx-red);border-radius:var(--mx-r-pill)}
.mx-progress--warn::-webkit-progress-value{background:var(--mx-warn)}.mx-progress--warn::-moz-progress-bar{background:var(--mx-warn)}
.mx-progress--thin{height:4px}

/* ───── Définitions (consentements, infos) ───── */
.mx-dl{display:flex;flex-direction:column}
.mx-dl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mx-s-2) var(--mx-s-4);padding:var(--mx-s-3) 0;border-top:1px solid var(--mx-line);min-width:0}
.mx-dl-row:first-child{border-top:0;padding-top:0}
.mx-dl-row>div{min-width:0}
.mx-links{display:flex;flex-wrap:wrap;gap:var(--mx-s-2) var(--mx-s-5)}
.mx-links a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mx-target);min-width:var(--mx-target);font-size:var(--mx-fs-sm)}

/* ════════ AJOUTS v2 ════════ */

/* ───── Loader « roue infinie » (direction A validée : boucle ∞) ─────
   3 tailles : --btn (dans un bouton) · défaut (section) · --screen (plein écran).
   Toujours role="status" + libellé. Apparition différée : .mx-loader--delay (300 ms). */
.mx-loader{--sz:56px;display:inline-flex;flex-direction:column;align-items:center;gap:var(--mx-s-3);color:var(--mx-ink)}
.mx-loader svg{width:var(--sz);height:auto;aspect-ratio:44/20;overflow:visible;flex:0 0 auto}
.mx-loader .trk,.mx-loader .run{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mx-loader .trk{stroke:currentColor;opacity:.14}
.mx-loader .run{stroke:var(--mx-loader-acc,var(--mx-red));stroke-dasharray:28 72;animation:mx-loop 1.6s linear infinite}
.mx-loader--btn{--sz:26px;flex-direction:row;gap:0}
.mx-loader--btn .trk,.mx-loader--btn .run{stroke-width:3.6}
.mx-loader--screen{--sz:104px;gap:var(--mx-s-4)}
.mx-loader--screen .trk,.mx-loader--screen .run{stroke-width:2.2}
.mx-loader-label{font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
.mx-btn--primary .mx-loader,.mx-btn--danger-solid .mx-loader,.mx-btn--ink .mx-loader{--mx-loader-acc:currentColor;color:inherit}
.mx-btn--primary .mx-loader .trk,.mx-btn--danger-solid .mx-loader .trk,.mx-btn--ink .mx-loader .trk{opacity:.35}
.mx-loader--delay{animation:mx-appear 1ms linear var(--mx-loader-delay) both}
@keyframes mx-loop{to{stroke-dashoffset:-100}}
@keyframes mx-appear{from{visibility:hidden}to{visibility:visible}}
@keyframes mx-pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.mx-loader .run{animation:mx-pulse 2.4s ease-in-out infinite;stroke-dasharray:none}}
.mx-loader.is-reduced .run{animation:mx-pulse 2.4s ease-in-out infinite;stroke-dasharray:none}
.mx-section-loading{display:grid;place-items:center;min-height:12rem;padding:var(--mx-s-8) var(--mx-s-4)}
.mx-screen-loading{position:fixed;inset:0;z-index:var(--mx-z-modal);display:grid;place-items:center;background:var(--mx-bg)}
.mx-screen-loading--static{position:relative;inset:auto;min-height:14rem;border-radius:var(--mx-r-lg)}

/* ───── Segmenté : fondu quand il reste des filtres à droite ───── */
.mx-seg.is-more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}

/* ───── Ligne de notification : action Supprimer (survol sur ordinateur, glissement sur mobile) ───── */
.mx-nrow{position:relative;overflow:hidden;border-bottom:1px solid var(--mx-line);background:var(--mx-surface)}
.mx-nrow:last-child{border-bottom:0}
.mx-nrow>.mx-item{border-bottom:0;z-index:1;transition:transform var(--mx-d-fast) var(--mx-ease),background var(--mx-d-fast) var(--mx-ease);touch-action:pan-y}
.mx-nrow.is-drag>.mx-item{transition:none}
.mx-nrow.is-open>.mx-item{transform:translateX(-88px)}
.mx-row-del{position:absolute;z-index:0;visibility:hidden;top:0;right:0;bottom:0;width:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--mx-red);color:var(--mx-on-red);font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-bold)}
.mx-row-del:focus-visible{outline:2px solid var(--mx-on-red);outline-offset:-4px}
@media (hover:hover) and (min-width:1024px){
.mx-nrow{background:var(--mx-surface)}
.mx-nrow>.mx-item{padding-right:60px}
.mx-nrow.is-open>.mx-item{transform:none}
.mx-row-del{z-index:2;top:50%;bottom:auto;right:8px;width:var(--mx-target);height:var(--mx-target);transform:translateY(-50%);border-radius:var(--mx-r-md);background:transparent;color:var(--mx-muted);opacity:0;transition:opacity var(--mx-d-fast) var(--mx-ease),background var(--mx-d-fast) var(--mx-ease),color var(--mx-d-fast) var(--mx-ease)}
.mx-row-del .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx-nrow:hover .mx-row-del,.mx-row-del:focus-visible,.mx-nrow.is-hover .mx-row-del{opacity:1}
.mx-row-del:hover{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-row-del:focus-visible{outline-color:var(--mx-focus);outline-offset:2px}
}

/* ───── Regroupement des répétitions ───── */
.mx-item-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--mx-r-pill);background:var(--mx-ink);color:var(--mx-on-ink);font-size:11px;font-weight:var(--mx-fw-bold);font-variant-numeric:tabular-nums}
.mx-chev{transition:transform var(--mx-d-fast) var(--mx-ease)}
[aria-expanded="true"] .mx-chev{transform:rotate(180deg)}
.mx-sub{background:var(--mx-surface-2);border-bottom:1px solid var(--mx-line)}
.mx-sub .mx-nrow{background:var(--mx-surface-2)}
.mx-sub .mx-item{background:var(--mx-surface-2);padding-left:calc(var(--mx-s-4) + 52px)}
.mx-sub .mx-item:hover{background:var(--mx-bg-2)}
@media (hover:hover) and (min-width:1024px){.mx-sub .mx-nrow{background:var(--mx-surface-2)}}

/* ───── Lignes de réglage (catégorie + interrupteur) ───── */
.mx-set{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--mx-s-3);padding:var(--mx-s-4);border-bottom:1px solid var(--mx-line);background:var(--mx-surface);min-width:0}
.mx-set:last-child{border-bottom:0}
.mx-set.is-off .mx-item-lead{opacity:.55}
.mx-set.is-off .mx-item-title{color:var(--mx-muted)}
.mx-set-ctl{display:flex;align-items:center;gap:var(--mx-s-2);min-height:var(--mx-target);min-width:var(--mx-target);justify-content:flex-end;cursor:pointer;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--mx-muted)}
.mx-set-ctl .t{display:none}
@media (min-width:480px){.mx-set-ctl .t{display:inline}}
.mx-lock{display:inline-flex;align-items:center;gap:6px;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-muted)}
.mx-lock .mx-ico{--mx-ico:14px}
.mx-set .mx-switch:disabled{opacity:1;cursor:not-allowed;background:var(--mx-line-ui)}
.mx-set .mx-switch:disabled::before{box-shadow:none}

/* ───── Étapes numérotées (marche à suivre) ───── */
.mx-steps{counter-reset:mxs;display:flex;flex-direction:column;gap:var(--mx-s-2);margin-top:var(--mx-s-2)}
.mx-steps li{counter-increment:mxs;display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--mx-s-2);align-items:start;font-size:var(--mx-fs-sm);line-height:1.45;color:var(--mx-ink-2)}
.mx-steps li::before{content:counter(mxs);width:24px;height:24px;border-radius:50%;background:var(--mx-ink);color:var(--mx-on-ink);font-size:12px;font-weight:var(--mx-fw-bold);display:grid;place-items:center}
.mx-steps b{color:var(--mx-ink)}

/* ───── Carte d'état (push, export…) ───── */
.mx-state{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mx-s-3) var(--mx-s-4);align-items:start}
.mx-state-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-state-ic--green{background:var(--mx-green-soft);color:var(--mx-green-text)}
.mx-state-ic--red{background:var(--mx-red-soft);color:var(--mx-red-text)}
.mx-state-ic--warn{background:var(--mx-warn-soft);color:var(--mx-warn-text)}
.mx-state-body{display:flex;flex-direction:column;gap:var(--mx-s-2);min-width:0}

/* ───── Menu du compte ───── */
.mx-avbtn{display:inline-grid;place-items:center;width:var(--mx-target);height:var(--mx-target);border-radius:50%}
.mx-avbtn:hover .mx-av,.mx-avbtn[aria-expanded="true"] .mx-av{box-shadow:0 0 0 2px var(--mx-bg),0 0 0 4px var(--mx-line-ui)}
.mx-menu{position:absolute;z-index:var(--mx-z-pop);top:calc(100% + 8px);right:0;width:min(16rem,calc(100vw - 1.5rem));padding:var(--mx-s-2);display:flex;flex-direction:column;background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-3);animation:mx-pop-in var(--mx-d-fast) var(--mx-ease-out) both}
.mx-menu-hd{display:flex;flex-direction:column;gap:2px;padding:var(--mx-s-2) var(--mx-s-3) var(--mx-s-3);margin-bottom:var(--mx-s-1);border-bottom:1px solid var(--mx-line)}
.mx-menu-item{display:flex;align-items:center;gap:var(--mx-s-3);min-height:var(--mx-target);padding:0 var(--mx-s-3);border-radius:var(--mx-r-sm);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-ink);text-decoration:none;text-align:left;width:100%}
.mx-menu-item:hover{background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-menu-item[aria-current="page"]{background:var(--mx-bg-2)}
.mx-menu-item .mx-ico{color:var(--mx-muted)}
.mx-menu-sep{height:1px;background:var(--mx-line);margin:var(--mx-s-1) 0}

/* ───── Lien retour ───── */
.mx-back{display:inline-flex;align-items:center;gap:var(--mx-s-2);min-height:var(--mx-target);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-muted);text-decoration:none}
.mx-back:hover{color:var(--mx-ink)}

/* ───── Actions de page (boutons secondaires sous l'en-tête) ───── */
.mx-actions{display:flex;flex-wrap:wrap;gap:var(--mx-s-2);align-items:center;min-width:0}
.mx-actions--end{justify-content:flex-end}

/* ───── Mot MARX (Barlow Condensed tant que le logo n'est pas choisi) ───── */
.mxl-word{font-family:var(--mx-font-display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.mxl-word i{font-style:normal;color:var(--mx-red)}
.mxl-word--nav{font-size:24px;color:var(--mx-ink)}
.mx-item--nolead{grid-template-columns:minmax(0,1fr) auto}
.mx-sticky{position:sticky;top:var(--mx-nav-h);z-index:10;background:var(--mx-bg);padding-block:var(--mx-s-2);margin-block:calc(var(--mx-s-2) * -1)}

/* ───── Séance live (ajout v2, issu du contrôle de l'écran séance — à valider) ─────
   Exception documentée : cibles de saisie à 52 px (au lieu de 44) car touchées en mouvement. */
.mx-live{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--mx-bg)}
.mx-live-top{position:sticky;top:0;z-index:var(--mx-z-nav);background:var(--mx-bg);padding:calc(var(--mx-s-2) + env(safe-area-inset-top)) var(--mx-gutter) 0}
.mx-live-top-in{display:flex;align-items:center;gap:var(--mx-s-1);max-width:40rem;margin-inline:auto;min-width:0}
.mx-iconbtn--box{border:var(--mx-bw-ui) solid var(--mx-line-2)}
.mx-live-ex{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:0}
.mx-live-ex-l{font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-ink-2);white-space:nowrap}
.mx-chrono{display:inline-flex;align-items:center;gap:6px;min-height:var(--mx-target);font-family:var(--mx-font-display);font-weight:700;font-size:1.375rem;font-variant-numeric:tabular-nums;color:var(--mx-ink);white-space:nowrap}
.mx-chrono .mx-ico{color:var(--mx-red-text)}
.mx-segbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;max-width:40rem;margin:var(--mx-s-2) auto 0;padding-bottom:var(--mx-s-3)}
.mx-segbar i{height:4px;border-radius:2px;background:var(--mx-line-2)}
.mx-segbar i.is-done{background:var(--mx-ink)}
.mx-segbar i.is-current{background:var(--mx-red)}
.mx-live-main{flex:1 1 auto;width:100%;max-width:calc(40rem + 2 * var(--mx-gutter));margin-inline:auto;padding:var(--mx-s-4) var(--mx-gutter) 220px;display:flex;flex-direction:column;gap:var(--mx-s-4);min-width:0}
.mx-live-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--mx-s-3);padding-bottom:var(--mx-s-4);border-bottom:var(--mx-bw-rule) solid var(--mx-line-strong)}
.mx-live-title{font-family:var(--mx-font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,1.5rem + 2.4vw,3rem);line-height:.92;letter-spacing:-.005em;text-wrap:balance;overflow-wrap:anywhere}
.mx-sets{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.mx-sets th{padding:var(--mx-s-2) var(--mx-s-1);font-size:var(--mx-fs-over);font-weight:var(--mx-fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-muted);text-align:left;white-space:nowrap}
.mx-sets th.c,.mx-sets td.c{text-align:center}
.mx-sets td{padding:var(--mx-s-2) var(--mx-s-1);border-top:1px solid var(--mx-line);vertical-align:middle}
.mx-sets tr.is-current td{background:var(--mx-red-soft)}
.mx-sets .n{width:2.75rem;text-align:center;font-family:var(--mx-font-display);font-weight:700;font-size:1.5rem;line-height:1}
.mx-sets tr.is-current .n{color:var(--mx-red-text)}
.mx-sets tr.is-done .n,.mx-sets tr.is-done .prev{color:var(--mx-muted)}
.mx-sets .prev{font-size:var(--mx-fs-sm);color:var(--mx-muted);white-space:nowrap}
.mx-sets .prev-mini{display:none;margin-top:4px;font-family:var(--mx-font-text);font-size:11px;font-weight:500;color:var(--mx-muted);white-space:nowrap}
.mx-sets .c-in{width:4.75rem}
.mx-sets .c-ok{width:3.75rem}
@media (max-width:359.98px){.mx-sets .col-prev{display:none}.mx-sets .prev-mini{display:block}.mx-sets .c-in{width:4.25rem}}
.mx-numin{width:100%;min-width:0;height:52px;padding:0 var(--mx-s-1);border:var(--mx-bw-ui) solid var(--mx-line-ui);border-radius:var(--mx-r-md);background:var(--mx-surface);color:var(--mx-ink);font-family:var(--mx-font-display);font-weight:700;font-size:1.625rem;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.mx-numin::placeholder{color:var(--mx-muted);opacity:1}
.mx-numin:focus-visible{outline:none;border-color:var(--mx-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--mx-focus) 35%,transparent)}
.mx-numin:disabled{background:transparent;border-color:transparent;color:var(--mx-muted)}
.mx-bigcheck{width:52px;height:52px;border:var(--mx-bw-ui) solid var(--mx-line-ui);border-radius:var(--mx-r-md);background:var(--mx-surface);display:grid;place-items:center;color:transparent;margin-inline:auto;transition:background var(--mx-d-fast) var(--mx-ease)}
.mx-bigcheck .mx-ico{--mx-ico:26px;stroke-width:2.4}
.mx-bigcheck:hover{border-color:var(--mx-ink)}
.mx-bigcheck[aria-pressed="true"]{background:var(--mx-green);border-color:var(--mx-green);color:var(--mx-on-green)}
.mx-addset{display:flex;align-items:center;justify-content:center;gap:var(--mx-s-2);width:100%;min-height:52px;border-block:1.5px dashed var(--mx-line-2);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--mx-ink-2)}
.mx-addset:hover{color:var(--mx-ink);background:var(--mx-bg-2)}
.mx-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--mx-z-nav);background:var(--mx-red);color:var(--mx-on-red);padding-bottom:env(safe-area-inset-bottom)}
.mx-actionbar-in{max-width:calc(40rem + 2 * var(--mx-gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;min-height:76px}
.mx-actionbar-info{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--mx-s-3) var(--mx-gutter);min-width:0}
.mx-actionbar-over{font-size:var(--mx-fs-over);font-weight:var(--mx-fw-bold);letter-spacing:.12em;text-transform:uppercase}
.mx-actionbar-val{font-family:var(--mx-font-display);font-weight:700;font-size:1.75rem;line-height:1;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-actionbar-btn{display:flex;align-items:center;justify-content:center;gap:var(--mx-s-2);min-width:8.5rem;padding:0 var(--mx-gutter);border-left:1px solid rgba(255,255,255,.35);font-size:1.25rem;font-weight:var(--mx-fw-bold);color:var(--mx-on-red);transition:background var(--mx-d-fast) var(--mx-ease)}
.mx-actionbar-btn .mx-ico{--mx-ico:24px;stroke-width:2.4}
.mx-actionbar-btn:hover{background:var(--mx-red-hover)}
.mx-actionbar-btn:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:0}
.mx-rest{background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-rest .mx-actionbar-in{grid-template-columns:minmax(0,1fr);gap:var(--mx-s-3);padding:var(--mx-s-4) var(--mx-gutter) var(--mx-s-4)}
.mx-rest-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--mx-s-3);min-width:0}
.mx-timer{font-family:var(--mx-font-display);font-weight:700;font-size:clamp(4.5rem,3.6rem + 5vw,6rem);line-height:.82;font-variant-numeric:tabular-nums}
.mx-rest .mx-actionbar-over{color:color-mix(in oklab,var(--mx-on-ink) 75%,transparent)}
.mx-rest .mx-progress{background:color-mix(in oklab,var(--mx-on-ink) 22%,transparent)}
.mx-rest .mx-progress::-webkit-progress-bar{background:color-mix(in oklab,var(--mx-on-ink) 22%,transparent)}
.mx-rest-actions{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:var(--mx-s-2)}
.mx-rest .mx-btn--secondary{--b-bg:transparent;--b-fg:var(--mx-on-ink);--b-bd:color-mix(in oklab,var(--mx-on-ink) 45%,transparent);--b-bg-h:color-mix(in oklab,var(--mx-on-ink) 12%,transparent);--b-bd-h:var(--mx-on-ink)}
.mx-rest .mx-btn{min-height:52px}
.mx-menu[hidden]{display:none}
.mx-iconbtn{flex:0 0 auto}
.mx-live-top-in>.mx-iconbtn,.mx-live-ex>.mx-iconbtn{flex:0 0 auto}
@media (max-width:399.98px){.mx-live-ex-l .w,.mx-live-ex .mx-btn .mx-ico{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mx-live-top-in{gap:2px}.mx-live-ex .mx-btn{padding:0 var(--mx-s-2);min-width:var(--mx-target)}}
.mx-nrow.is-open .mx-row-del,.mx-nrow.is-drag .mx-row-del,.mx-row-del:focus-visible{visibility:visible}
@media (hover:hover) and (min-width:1024px){.mx-row-del{visibility:visible}}
.mx-actions--quiet{margin-top:calc(var(--mx-s-2) * -1)}
.mx-actions--quiet .mx-btn{color:var(--mx-muted)}
.mx-actions--quiet .mx-btn:hover{color:var(--mx-ink)}

/* ───── Panneau des notifications (compact) ─────
   Ordinateur : ancré à la cloche, 24 rem, 70 % de la hauteur au plus, défilement interne.
   Mobile (< 1024 px) : plein écran depuis le bas, poignée pour fermer.
   Exception documentée : à la souris, cibles de 32 à 36 px dans le panneau ; au doigt, 44 px. */
.mx-iconbtn[disabled]{opacity:.4;cursor:not-allowed}
.mx-np{position:absolute;z-index:var(--mx-z-pop);top:calc(100% + 8px);right:0;width:min(24rem,calc(100vw - 2rem));max-height:70vh;max-height:70dvh;display:flex;flex-direction:column;background:var(--mx-surface);color:var(--mx-ink);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-3);overflow:hidden;animation:mx-pop-in var(--mx-d-fast) var(--mx-ease-out) both}
.mx-np-bg,.mx-np-handle{display:none}
.mx-np-hd{position:relative;display:flex;align-items:center;gap:2px;min-height:48px;padding:6px 6px 2px 14px}
.mx-np-title{margin:0;flex:1 1 auto;min-width:0;font-size:var(--mx-fs-body);font-weight:var(--mx-fw-semi);line-height:1.2}
.mx-iconbtn--sm{width:36px;height:36px;border-radius:var(--mx-r-sm)}
.mx-iconbtn--sm .mx-ico{--mx-ico:18px}
.mx-np-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 10px 10px;border-bottom:1px solid var(--mx-line);min-width:0}
.mx-tog{display:inline-flex;gap:2px;padding:2px;border-radius:var(--mx-r-sm);background:var(--mx-bg-2);flex:0 0 auto}
.mx-tog-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:5px;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-muted);white-space:nowrap;transition:background var(--mx-d-fast) var(--mx-ease),color var(--mx-d-fast) var(--mx-ease)}
.mx-tog-btn:hover{color:var(--mx-ink)}
.mx-tog-btn[aria-selected="true"]{background:var(--mx-surface);color:var(--mx-ink);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.mx-tog-btn .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--mx-r-pill);background:var(--mx-red);color:var(--mx-on-red);font-size:11px;font-weight:var(--mx-fw-bold)}
.mx-np-filter{appearance:none;-webkit-appearance:none;min-width:0;max-width:9.5rem;min-height:32px;padding:0 26px 0 10px;border:1px solid var(--mx-line-2);border-radius:var(--mx-r-sm);background-color:var(--mx-surface);background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 10px) 50%;background-size:4px 4px;background-repeat:no-repeat;font:inherit;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-ink);cursor:pointer}
.mx-np-filter:hover{border-color:var(--mx-line-ui)}
.mx-np-bd{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.mx-np-grp{margin:0;padding:10px 14px 4px;font-size:11px;font-weight:var(--mx-fw-bold);letter-spacing:.12em;text-transform:uppercase;color:var(--mx-muted)}
.mx-prow{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"ic t h" "ic x d";column-gap:10px;row-gap:1px;align-items:center;width:100%;min-height:56px;padding:9px 14px;border-bottom:1px solid var(--mx-line);background:var(--mx-surface);color:var(--mx-ink);text-align:left;font:inherit;transition:background var(--mx-d-fast) var(--mx-ease)}
button.mx-prow{cursor:pointer}
button.mx-prow:hover{background:var(--mx-surface-2)}
.mx-prow:focus-visible{outline:2px solid var(--mx-focus);outline-offset:-2px;border-radius:0}
.mx-prow .mx-item-lead{grid-area:ic;width:32px;height:32px;border-radius:8px}
.mx-prow .mx-item-lead .mx-ico{--mx-ico:16px}
.mx-prow-t{grid-area:t;min-width:0;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-medium);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-prow-x{grid-area:x;min-width:0;font-size:var(--mx-fs-xs);line-height:1.3;color:var(--mx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-prow-h{grid-area:h;display:flex;align-items:center;gap:6px;justify-self:end;font-size:12px;color:var(--mx-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mx-prow-d{grid-area:d;justify-self:end;display:flex;align-items:center;min-height:12px}
.mx-prow .mx-unread{width:8px;height:8px}
.mx-prow.is-unread{background:color-mix(in oklab,var(--mx-red) 4%,var(--mx-surface))}
.mx-prow.is-unread .mx-prow-t{font-weight:var(--mx-fw-bold)}
.mx-prow--grp{grid-template-areas:"ic t h";min-height:52px}
.mx-prow--kid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t h" "x d";min-height:50px;padding-left:56px;background:var(--mx-surface-2)}
button.mx-prow--kid:hover{background:var(--mx-bg-2)}
.mx-prow-sk{grid-area:ic;width:32px;height:32px;border-radius:8px}
.mx-prow .mx-skel--title{grid-area:t;height:12px}.mx-prow .mx-skel--line{grid-area:x;height:10px}.mx-prow .mx-skel--meta{grid-area:h;width:32px;height:10px}
.mx-np .mx-empty{padding:var(--mx-s-10) var(--mx-s-4)}
.mx-np .mx-empty-ic{width:44px;height:44px}
.mx-np-ft{flex:0 0 auto;padding:4px;border-top:1px solid var(--mx-line)}
.mx-np-ft a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:var(--mx-r-sm);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-ink);text-decoration:none}
.mx-np-ft a:hover{background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-noscroll,.mx-noscroll body{overflow:hidden}
@keyframes mx-sheet-up{from{transform:translateY(100%)}}
@media (max-width:1023.98px){
.mx-np-bg{display:block;position:fixed;inset:0;z-index:calc(var(--mx-z-modal) - 1);background:var(--mx-overlay);animation:mx-fade var(--mx-d-fast) var(--mx-ease) both}
.mx-np{position:fixed;z-index:var(--mx-z-modal);top:max(8px,env(safe-area-inset-top));left:0;right:0;bottom:0;width:100%;max-height:none;border-width:1px 0 0;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom);animation:mx-sheet-up var(--mx-d-base) var(--mx-ease-out) both;transition:transform var(--mx-d-fast) var(--mx-ease)}
.mx-np.is-drag{transition:none}
.mx-np-handle{display:flex;align-items:flex-start;justify-content:center;position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);width:96px;height:var(--mx-target);padding-top:8px;touch-action:none;cursor:grab}
.mx-np-handle i{display:block;width:36px;height:4px;border-radius:2px;background:var(--mx-line-ui)}
.mx-np-hd{min-height:64px;padding:20px 6px 4px 16px}
.mx-np-title{font-size:var(--mx-fs-h3)}
.mx-iconbtn--sm{width:var(--mx-target);height:var(--mx-target)}
.mx-tog-btn,.mx-np-filter{min-height:var(--mx-target)}
.mx-np-bar{padding:4px 12px 12px}
.mx-prow{min-height:60px;padding:10px 16px}
.mx-prow--kid{padding-left:58px}
.mx-np-ft a{min-height:48px}
}

/* Panneau des notifications · resserrage (v2.1) : 21 rem, lignes de 48 px, icônes de 24 px */
.mx-np{width:min(21rem,calc(100vw - 2rem));box-shadow:var(--mx-e-2);border-radius:var(--mx-r-md)}
.mx-np-hd{min-height:40px;padding:4px 4px 0 12px}
.mx-np-title{font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold)}
.mx-iconbtn--sm{width:32px;height:32px}
.mx-iconbtn--sm .mx-ico{--mx-ico:16px}
.mx-np-bar{padding:2px 8px 8px;gap:6px}
.mx-tog-btn{min-height:26px;padding:0 8px;font-size:12px;gap:5px}
.mx-tog-btn .n{min-width:16px;height:16px;padding:0 4px;font-size:10px}
.mx-np-filter{min-height:26px;font-size:12px;padding:0 22px 0 8px;background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%}
.mx-np-grp{padding:8px 12px 2px;font-size:10.5px}
.mx-prow{grid-template-columns:24px minmax(0,1fr) auto;column-gap:8px;min-height:48px;padding:6px 12px}
.mx-prow .mx-item-lead{width:24px;height:24px;border-radius:6px}
.mx-prow .mx-item-lead .mx-ico{--mx-ico:14px}
.mx-prow-t{font-size:13px;line-height:1.25}
.mx-prow-x{font-size:12px;line-height:1.25}
.mx-prow-h{font-size:11px;gap:4px}
.mx-prow-h .mx-ico{--mx-ico:14px}
.mx-prow .mx-unread{width:7px;height:7px}
.mx-prow--grp{min-height:40px}
.mx-prow--kid{min-height:44px;padding-left:44px}
.mx-prow-sk{width:24px;height:24px;border-radius:6px}
.mx-np .mx-empty{padding:var(--mx-s-6) var(--mx-s-4);gap:var(--mx-s-2)}
.mx-np .mx-empty-ic{width:36px;height:36px}
.mx-np .mx-empty .mx-h3{font-size:var(--mx-fs-sm)}
.mx-np .mx-empty .mx-small{font-size:12px}
.mx-np-ft{padding:2px}
.mx-np-ft a{min-height:34px;font-size:13px}
@media (max-width:1023.98px){
.mx-np{width:100%;border-radius:14px 14px 0 0}
.mx-np-hd{min-height:56px;padding:18px 4px 2px 14px}
.mx-np-title{font-size:var(--mx-fs-body)}
.mx-iconbtn--sm{width:var(--mx-target);height:var(--mx-target)}
.mx-tog-btn,.mx-np-filter{min-height:var(--mx-target);font-size:13px}
.mx-np-bar{padding:2px 12px 10px}
.mx-prow{grid-template-columns:28px minmax(0,1fr) auto;min-height:52px;padding:8px 14px}
.mx-prow .mx-item-lead{width:28px;height:28px}
.mx-prow-t{font-size:14px}.mx-prow-x{font-size:12.5px}
.mx-prow--grp{min-height:48px}
.mx-prow--kid{min-height:48px;padding-left:50px}
.mx-np-ft a{min-height:var(--mx-target)}
}
.mx-prow.mx-prow--kid{grid-template-columns:minmax(0,1fr) auto}

/* ───── Mon abonnement (coach) ───── */
.mx-nav-links--end{margin-left:auto}
@media (min-width:1024px){.mx-nav-links--end~.mx-nav-actions{margin-left:var(--mx-s-2)}}
.mx-page--wide{max-width:calc(60rem + 2 * var(--mx-gutter))}
.mx-banner--pio{--bn-bg:var(--mx-red-soft);--bn-fg:var(--mx-red-text);--bn-bd:var(--mx-red)}
.mx-plan{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-5);min-width:0}
@media (min-width:768px){.mx-plan{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}}
.mx-badges{gap:var(--mx-s-2)}
.mx-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:0;min-width:0}
.mx-price-was{font-family:var(--mx-font-display);font-weight:700;font-size:1.375rem;color:var(--mx-muted);text-decoration-thickness:2px;font-variant-numeric:tabular-nums}
.mx-price--sm .mx-stat{font-size:2.25rem}
.mx-price--sm .mx-price-was{font-size:1.125rem}
.mx-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:var(--mx-s-3);margin:0}
.mx-kv div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mx-kv dt{font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-muted)}
.mx-kv dd{margin:0;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);color:var(--mx-ink)}
.mx-paybox{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mx-s-3);padding:var(--mx-s-4);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface-2);min-width:0}
.mx-paybox.is-error{border-color:var(--mx-red-text);background:var(--mx-red-soft)}
.mx-cardrow{display:flex;align-items:center;gap:var(--mx-s-3);min-width:0}
.mx-cardchip{flex:0 0 auto;width:44px;height:30px;border-radius:5px;background:var(--mx-ink);color:var(--mx-on-ink);display:grid;place-items:center;font-size:10px;font-weight:var(--mx-fw-bold);letter-spacing:.08em}
.mx-disc{border-top:1px solid var(--mx-line)}
.mx-disc summary{display:flex;align-items:center;gap:var(--mx-s-2);min-height:var(--mx-target);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);cursor:pointer;list-style:none}
.mx-disc summary::-webkit-details-marker{display:none}
.mx-disc[open] summary .mx-chev{transform:rotate(180deg)}
.mx-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:6px var(--mx-s-5);margin:0 0 var(--mx-s-2);padding:0;list-style:none}
.mx-feat li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--mx-s-2);align-items:start;font-size:var(--mx-fs-sm);line-height:1.4;color:var(--mx-ink-2)}
.mx-feat li .mx-ico{color:var(--mx-green-text);margin-top:2px}
.mx-feat li b{grid-column:1/-1;color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-feat--sm{grid-template-columns:minmax(0,1fr);margin:0}
.mx-card-ft--end{justify-content:flex-end;padding-top:var(--mx-s-2)}
.mx-linkbtn{display:inline-flex;align-items:center;min-height:var(--mx-target);padding:0 var(--mx-s-1);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-medium);color:var(--mx-muted);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.mx-linkbtn:hover{color:var(--mx-red-text)}
.mx-g-use{--mx-grid-min:16rem;--mx-grid-gap:var(--mx-s-6)}
.mx-meter{display:flex;flex-direction:column;gap:var(--mx-s-2);min-width:0}
.mx-warn-text{color:var(--mx-warn-text);display:flex;align-items:flex-start;gap:6px}
.mx-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--mx-s-3)}
.mx-pcard{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mx-s-3);padding:var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);min-width:0}
.mx-pcard .mx-btn--block{margin-top:auto}
.mx-pcard.is-current{border:1.5px solid var(--mx-ink);box-shadow:var(--mx-e-1)}
.mx-card-pad{padding:var(--mx-s-5) var(--mx-s-5) var(--mx-s-2)}
@media (min-width:768px){.mx-card-pad{padding:var(--mx-s-6) var(--mx-s-6) var(--mx-s-2)}}
.mx-inv{width:100%;border-collapse:collapse;font-size:var(--mx-fs-sm)}
.mx-inv th{padding:var(--mx-s-2) var(--mx-s-4);font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-muted);text-align:left;border-bottom:1px solid var(--mx-line)}
.mx-inv td{padding:var(--mx-s-2) var(--mx-s-4);border-bottom:1px solid var(--mx-line);vertical-align:middle}
.mx-inv tr:last-child td{border-bottom:0}
.mx-inv .r{text-align:right}
.mx-inv .a{font-weight:var(--mx-fw-semi)}
.mx-inv .p{text-align:right;width:1%;white-space:nowrap}
@media (max-width:639.98px){
.mx-inv thead{display:none}
.mx-inv tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"l a p" "d s p";column-gap:var(--mx-s-3);row-gap:4px;align-items:center;padding:var(--mx-s-3) var(--mx-s-4);border-bottom:1px solid var(--mx-line)}
.mx-inv tr:last-child{border-bottom:0}
.mx-inv td{display:block;padding:0;border:0}
.mx-inv .l{grid-area:l;font-weight:var(--mx-fw-semi);min-width:0;overflow-wrap:anywhere}
.mx-inv .d{grid-area:d;font-size:var(--mx-fs-xs);color:var(--mx-muted)}
.mx-inv .a{grid-area:a;text-align:right}
.mx-inv .s{grid-area:s;justify-self:end}
.mx-inv .p{grid-area:p}
.mx-inv .p .mx-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mx-inv .p .mx-btn{width:var(--mx-target);padding:0}
}
.mx-losses{margin:0;padding-left:20px;display:grid;gap:8px;font-size:var(--mx-fs-sm);line-height:1.45;color:var(--mx-ink-2)}
.mx-losses b{color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-losses .mx-warn-text{display:list-item}
.mx-losses .mx-warn-text b{color:var(--mx-warn-text)}
.mx-empty--sm{padding:var(--mx-s-6) var(--mx-s-4)}
.mx-skel--price{width:120px;height:44px}
.mx-skel--panel{display:block;height:140px;border-radius:var(--mx-r-md)}
.mx-card>.mx-skel+.mx-skel{margin-top:4px}

/* ───── Bilans mensuels ───── */
.mx-row--end{align-items:flex-end}
.mx-page--narrow{max-width:calc(36rem + 2 * var(--mx-gutter))}
.mx-mname,.mx-name{font-weight:var(--mx-fw-semi)}
.mx-stepn{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:var(--mx-ink);color:var(--mx-on-ink);font-size:13px;font-weight:var(--mx-fw-bold);vertical-align:2px}
.mx-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--mx-s-2)}
.mx-choice--box{padding:var(--mx-s-3) var(--mx-s-4);border:1.5px solid var(--mx-line-2);border-radius:var(--mx-r-md);background:var(--mx-surface)}
.mx-choice--box:has(input:checked){border-color:var(--mx-ink);background:var(--mx-surface-2)}
.mx-choice--box b{font-weight:var(--mx-fw-semi)}
.mx-card--inset{box-shadow:none;max-height:22rem;overflow-y:auto}
.mx-item--check{grid-template-columns:auto minmax(0,1fr);align-items:center;cursor:pointer}
.mx-item--check:hover{background:var(--mx-surface-2)}
.mx-sticky-ft{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mx-s-3);padding:var(--mx-s-3) var(--mx-s-4);margin:0 calc(var(--mx-s-4) * -1);background:color-mix(in oklab,var(--mx-bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--mx-line)}
@media (min-width:768px){.mx-sticky-ft{margin:0;border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);bottom:var(--mx-s-4)}}
.mx-sticky-ft .mx-actions{margin-left:auto}
.mx-gen{display:flex;flex-direction:column;align-items:center;gap:var(--mx-s-5);padding-top:var(--mx-s-6);text-align:center}
.mx-gen>.mx-progress,.mx-gen>.mx-card{width:100%}
.mx-gen-hd{align-items:center}
.mx-genlist{margin:0;padding:0;list-style:none;text-align:left}
.mx-genrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:var(--mx-s-3);min-height:48px;padding:var(--mx-s-2) var(--mx-s-4);border-bottom:1px solid var(--mx-line)}
.mx-genrow:last-child{border-bottom:0}
.mx-genic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mx-bg-2);color:var(--mx-muted)}
.is-ok .mx-genic{background:var(--mx-green-soft);color:var(--mx-green-text)}
.is-err .mx-genic{background:var(--mx-red-soft);color:var(--mx-red-text)}
.is-run .mx-genic{background:transparent}
.is-run .mx-genic .mx-loader--btn{--sz:24px}
.is-wait .mx-small{color:var(--mx-muted)}
.mx-actions--center{justify-content:center}
.mx-center{text-align:center}
.mx-bgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-4)}
@media (min-width:1024px){.mx-bgrid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start}}
.mx-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.5rem),1fr));gap:var(--mx-s-2)}
.mx-statbox{display:flex;flex-direction:column;gap:4px;padding:var(--mx-s-3);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface-2);min-width:0}
.mx-statbox .mx-stat{font-size:2.25rem}
.mx-stat small{font-size:.5em;color:var(--mx-muted);margin-left:2px}
.mx-lifts{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.mx-lifts li{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:baseline;gap:6px;padding:var(--mx-s-2) 0;border-top:1px solid var(--mx-line);font-size:var(--mx-fs-sm)}
.mx-lifts li:first-child{border-top:0}
.mx-lifts li>span:first-child{font-weight:var(--mx-fw-semi);min-width:0;overflow-wrap:anywhere}
.mx-delta{min-width:4.25rem;text-align:right;font-weight:var(--mx-fw-bold);color:var(--mx-green-text)}
.mx-textarea--tall{min-height:16rem;line-height:1.55}
.mx-namechips{display:flex;flex-wrap:wrap;gap:6px}
.mx-namechips .mx-tag{text-transform:none;letter-spacing:0;font-weight:var(--mx-fw-semi);font-size:var(--mx-fs-xs)}
.mx-prev{display:flex;justify-content:center;padding:var(--mx-s-3);border-radius:var(--mx-r-md);background:var(--mx-bg)}
.mx-modal:has(.mx-prev){max-width:28rem}
/* Carte du bilan (client) */
.mx-bcard{display:flex;flex-direction:column;gap:0;width:100%;max-width:30rem;background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-xl);box-shadow:var(--mx-e-2);overflow:hidden;color:var(--mx-ink);text-align:left}
.mx-bcard[aria-busy]{gap:var(--mx-s-3);padding:var(--mx-s-5)}
.mx-bcard--preview{box-shadow:none;max-width:24rem}
.mx-bcard-hd{display:flex;flex-direction:column;gap:var(--mx-s-3);padding:var(--mx-s-5) var(--mx-s-5) var(--mx-s-4);background:var(--mx-brand-ink);color:#F4F2ED}
.mx-bcard-hd .mx-av{background:var(--mx-red);color:#fff}
.mx-bcard-over{display:flex;align-items:center;gap:6px;color:rgba(244,242,237,.75)}
.mx-bcard-over .mx-unread{width:8px;height:8px}
.mx-bcard-month{margin:0;font-family:var(--mx-font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2.5rem,2rem + 2vw,3.25rem);line-height:.9;letter-spacing:-.005em;color:#F4F2ED}
.mx-aitag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin:0;padding:4px 10px;border-radius:var(--mx-r-pill);background:rgba(244,242,237,.12);font-size:12px;font-weight:var(--mx-fw-semi);color:#F4F2ED}
.mx-aitag .mx-ico{color:#FF6A5E}
.mx-bcard-hero{display:flex;flex-direction:column;gap:var(--mx-s-3);padding:var(--mx-s-5);border-bottom:1px solid var(--mx-line)}
.mx-bcard-big{display:flex;align-items:baseline;gap:6px;margin:0}
.mx-bcard-big .mx-stat{font-size:clamp(3.5rem,3rem + 2vw,4.5rem);line-height:.85}
.mx-bcard-of{font-family:var(--mx-font-display);font-weight:700;font-size:1.75rem;color:var(--mx-muted)}
.mx-bcard-chips{display:flex;flex-wrap:wrap;gap:var(--mx-s-2)}
.mx-bchip{display:inline-flex;align-items:baseline;gap:6px;padding:6px 10px;border-radius:var(--mx-r-sm);background:var(--mx-bg-2);font-size:var(--mx-fs-xs);color:var(--mx-ink-2)}
.mx-bchip b{font-family:var(--mx-font-display);font-weight:700;font-size:1.125rem;color:var(--mx-ink)}
.mx-bcard-sec{display:flex;flex-direction:column;gap:var(--mx-s-2);padding:var(--mx-s-4) var(--mx-s-5);border-bottom:1px solid var(--mx-line)}
.mx-bcard-text p:not(.mx-over){margin:0;font-size:var(--mx-fs-body);line-height:1.6;color:var(--mx-ink);text-wrap:pretty}
.mx-bcard-text p+p{margin-top:var(--mx-s-2)}
.mx-bcard-ft{padding:var(--mx-s-4) var(--mx-s-5) var(--mx-s-5)}
.mx-page--client .mx-bcard{max-width:none}
@media (min-width:768px){.mx-page--client .mx-bcard{max-width:34rem}}
/* Non Elite */
.mx-lock-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-6);align-items:center}
@media (min-width:900px){.mx-lock-grid{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}}
.mx-lock-ex{position:relative;display:flex;justify-content:center;padding:var(--mx-s-4);border-radius:var(--mx-r-lg);background:var(--mx-bg-2);overflow:hidden;max-height:30rem}
.mx-lock-ex::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(transparent,var(--mx-bg-2))}
.mx-blur{filter:blur(3.5px);user-select:none;pointer-events:none;width:100%;display:flex;justify-content:center}
.mx-lock-lbl{position:absolute;z-index:2;top:12px;left:12px;padding:3px 9px;border-radius:var(--mx-r-xs);background:var(--mx-ink);color:var(--mx-on-ink);font-size:11px;font-weight:var(--mx-fw-bold);letter-spacing:.1em;text-transform:uppercase}

/* ───── Signaler un bug ───── */
.mx-noscroll{overflow:hidden}
.mx-pastille{display:inline-block;flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--mx-green);box-shadow:0 0 0 2px var(--mx-surface)}
.mx-menu-item .mx-pastille{margin-left:auto}
.mx-avbtn{position:relative}
.mx-pastille--av{position:absolute;top:6px;right:5px;z-index:1;box-shadow:0 0 0 2px var(--mx-bg)}
.mx-bugclamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-bugopt{font-weight:var(--mx-fw-semi);letter-spacing:.04em;text-transform:none}
.mx-modal--bug{max-width:34rem;gap:var(--mx-s-5)}
.mx-modal--bug .mx-modal-actions{position:sticky;bottom:calc(var(--mx-s-5) * -1);flex-direction:row;justify-content:space-between;gap:var(--mx-s-2);margin-top:auto;padding:var(--mx-s-3) 0 var(--mx-s-1);background:var(--mx-surface);border-top:1px solid var(--mx-line)}
.mx-modal--bug .mx-modal-actions .mx-btn{flex:1 1 0}
@media (min-width:480px){.mx-modal--bug .mx-modal-actions .mx-btn{flex:0 0 auto}}
.mx-modal--bug .mx-h2:focus{outline:none}
.mx-bugsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.mx-bugsteps i{height:4px;border-radius:2px;background:var(--mx-line-2)}
.mx-bugsteps i.is-on{background:var(--mx-red)}
.mx-bugtypes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mx-s-2)}
.mx-bugtype{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--mx-s-3);min-height:120px;padding:var(--mx-s-4);border:1.5px solid var(--mx-line-2);border-radius:var(--mx-r-lg);background:var(--mx-surface);cursor:pointer;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);line-height:1.3;transition:border-color var(--mx-d-fast) var(--mx-ease),background var(--mx-d-fast) var(--mx-ease),color var(--mx-d-fast) var(--mx-ease)}
.mx-bugtype input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.mx-bugtype .ic{width:44px;height:44px;border-radius:var(--mx-r-md);display:grid;place-items:center;background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-bugtype:hover{border-color:var(--mx-ink)}
.mx-bugtype:has(input:checked){border-color:var(--mx-ink);background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-bugtype:has(input:checked) .ic{background:var(--mx-red);color:var(--mx-on-red)}
.mx-bugtype:has(input:focus-visible),.mx-bugpill:has(input:focus-visible),.mx-bugdrop:has(input:focus-visible){outline:2px solid var(--mx-focus);outline-offset:2px}
@media (max-width:359.98px){.mx-bugtype{min-height:104px;padding:var(--mx-s-3)}}
.mx-bugcount{align-self:flex-end}
.mx-bugdrop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:104px;padding:var(--mx-s-4);border:1.5px dashed var(--mx-line-ui);border-radius:var(--mx-r-md);background:var(--mx-surface-2);color:var(--mx-muted);text-align:center;cursor:pointer;transition:border-color var(--mx-d-fast) var(--mx-ease),background var(--mx-d-fast) var(--mx-ease)}
.mx-bugdrop .mx-strong{color:var(--mx-ink)}
.mx-bugdrop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.mx-bugdrop:hover,.mx-bugdrop.is-over{border-color:var(--mx-ink);background:var(--mx-bg-2)}
.mx-bugshot{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:var(--mx-s-3);padding:var(--mx-s-2);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface)}
.mx-bugshot img{display:block;width:72px;height:54px;object-fit:cover;border-radius:6px;background:var(--mx-bg-2)}
.mx-bugfake{position:relative;display:block;width:72px;height:54px;border-radius:6px;border:1px solid var(--mx-line-2);background:var(--mx-surface-2);overflow:hidden}
.mx-bugfake i{position:absolute;left:8%;display:block;border-radius:2px;background:var(--mx-line-2)}
.mx-bugfake i:nth-child(1){left:0;top:0;width:100%;height:16%;border-radius:0;background:var(--mx-ink)}
.mx-bugfake i:nth-child(2){top:30%;width:62%;height:9%}
.mx-bugfake i:nth-child(3){top:46%;width:44%;height:9%}
.mx-bugfake i:nth-child(4){top:68%;width:34%;height:16%;background:var(--mx-red)}
.mx-bugfake--lg{width:100%;height:auto;aspect-ratio:16/10;border-radius:var(--mx-r-md)}
.mx-bugfs{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:var(--mx-s-2);min-width:0}
.mx-bugfs legend{padding:0;margin-bottom:var(--mx-s-2)}
.mx-bugpills{display:flex;flex-wrap:wrap;gap:var(--mx-s-2)}
.mx-bugpill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:var(--mx-target);min-width:5.5rem;padding:0 var(--mx-s-4);border:1.5px solid var(--mx-line-2);border-radius:var(--mx-r-pill);background:var(--mx-surface);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);cursor:pointer;transition:all var(--mx-d-fast) var(--mx-ease)}
.mx-bugpill input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.mx-bugpill:hover{border-color:var(--mx-ink)}
.mx-bugpill:has(input:checked){background:var(--mx-ink);border-color:var(--mx-ink);color:var(--mx-on-ink)}
.mx-bugmsg{display:flex;flex-direction:column;gap:var(--mx-s-2);padding:var(--mx-s-3) var(--mx-s-4);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface-2)}
.mx-bugmsg .mx-small{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--mx-ink)}
.mx-bugrecap dd{margin:0}
.mx-bugrecap .mx-row{gap:6px}
.mx-bugtech{display:flex;flex-direction:column;gap:var(--mx-s-3);padding:var(--mx-s-4);border:1px solid var(--mx-line-2);border-radius:var(--mx-r-md)}
.mx-bugtech dd{margin:0;text-align:right;overflow-wrap:anywhere}
.mx-bugtech.is-off dl{opacity:.45}
.mx-bugtech.is-off dd{text-decoration:line-through}
.mx-bugthanks{display:flex;flex-direction:column;align-items:center;gap:var(--mx-s-3);padding:var(--mx-s-4) 0 var(--mx-s-2);text-align:center}
.mx-bugthanks-ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--mx-green-soft);color:var(--mx-green-text)}
.mx-bugthanks-ic .mx-ico{stroke-width:2.2}
.mx-bugthanks .mx-small{max-width:24rem}
.mx-bugtl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.mx-bugtl li{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:var(--mx-s-2);min-height:32px;font-size:var(--mx-fs-sm);color:var(--mx-muted)}
.mx-bugtl li::before{content:"";justify-self:center;width:10px;height:10px;border-radius:50%;border:2px solid var(--mx-line-ui);background:var(--mx-surface)}
.mx-bugtl li+li::after{content:"";position:absolute;left:8px;top:-11px;width:2px;height:22px;background:var(--mx-line-2);z-index:-1}
.mx-bugtl{position:relative;z-index:0}
.mx-bugtl li.is-done,.mx-bugtl li.is-fixed{color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-bugtl li.is-done::before{background:var(--mx-ink);border-color:var(--mx-ink)}
.mx-bugtl li.is-fixed::before{background:var(--mx-green);border-color:var(--mx-green)}
.mx-bugdetail{display:flex;flex-direction:column;gap:var(--mx-s-4);padding:var(--mx-s-2) var(--mx-s-4) var(--mx-s-5);border-bottom:1px solid var(--mx-line);background:var(--mx-surface)}
@media (min-width:768px){.mx-bugdetail{padding-left:calc(var(--mx-s-4) + 52px)}}
.mx-bugdetail dd{margin:0}
.mx-bugfilters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--mx-s-3)}
.mx-bugfilters .mx-field{flex:1 1 10rem;min-width:0}
@media (min-width:768px){.mx-bugfilters .mx-field{flex:0 0 14rem}}
.mx-bugtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mx-buginbox{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-4);align-items:start}
@media (min-width:1100px){.mx-buginbox{grid-template-columns:minmax(0,1fr) minmax(0,30rem)}.mx-buginbox-d{position:sticky;top:calc(var(--mx-nav-h) + var(--mx-s-4))}}
.mx-item.is-sel{background:var(--mx-bg-2)}
.mx-item.is-sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--mx-ink)}
.mx-bugcard{gap:var(--mx-s-5)}
.mx-bugcard .mx-h2.mx-row{gap:var(--mx-s-2)}
.mx-bugcard dd{margin:0;text-align:right;overflow-wrap:anywhere}
.mx-bugzoom{position:relative;display:block;width:100%;padding:0;border-radius:var(--mx-r-md);cursor:zoom-in}
.mx-bugzoom .mx-tag{position:absolute;right:10px;bottom:10px}
.mx-bugzoom:hover .mx-bugfake{border-color:var(--mx-ink)}


/* ───── Automatisations (Elite) ───── */
.mx-page--xl{max-width:calc(72rem + 2 * var(--mx-gutter))}
.mx-au-n{display:inline-grid;place-items:center;min-width:22px;height:20px;margin-left:4px;padding:0 6px;border-radius:var(--mx-r-pill);background:var(--mx-bg-2);color:var(--mx-ink-2);font-size:11px;letter-spacing:0}
.mx-au-center{justify-content:center}
.mx-au-tok{font-weight:var(--mx-fw-semi);color:var(--mx-ink);background:var(--mx-bg-2);border-radius:5px;padding:1px 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mx-au-si{font-weight:var(--mx-fw-bold);color:var(--mx-red-text)}
.mx-au-sent{font-size:var(--mx-fs-body);line-height:1.7;color:var(--mx-ink-2);text-wrap:pretty}
.mx-au-sent--sm{font-size:var(--mx-fs-sm);line-height:1.75}
.mx-au-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border:1px solid var(--mx-line-2);border-radius:var(--mx-r-pill);background:var(--mx-surface);font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-ink-2);white-space:nowrap}
.mx-au-chip b{color:var(--mx-ink)}
.mx-au-guard{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-2) var(--mx-s-3);padding:var(--mx-s-3) var(--mx-s-4);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);background:var(--mx-surface-2)}
.mx-au-guard-t{display:inline-flex;align-items:center;gap:6px;font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-bold);color:var(--mx-green-text)}
.mx-au-guard .mx-btn{margin-left:auto}
.mx-au-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--mx-s-4);align-items:start;padding:var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-1);transition:opacity var(--mx-d-fast) var(--mx-ease)}
.mx-au-card.is-off .mx-au-sent,.mx-au-card.is-off .mx-au-meta{opacity:.62}
.mx-au-card.is-off .mx-au-tok{background:transparent;box-shadow:inset 0 0 0 1px var(--mx-line-2)}
.mx-au-body{min-width:0}
.mx-au-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-2)}
.mx-au-side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--mx-s-3)}
.mx-au-sw{display:flex;align-items:center;gap:var(--mx-s-2);min-height:var(--mx-target);cursor:pointer;color:var(--mx-ink-2)}
@media (max-width:719.98px){.mx-au-card{grid-template-columns:auto minmax(0,1fr);padding:var(--mx-s-4)}.mx-au-side{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;padding-top:var(--mx-s-3);border-top:1px solid var(--mx-line)}}
.mx-au-grid{--mx-grid-min:19rem;align-items:stretch}
.mx-au-rec .mx-card-ft{margin-top:auto}
.mx-au-mini{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.mx-au-mini li{display:flex;align-items:center;gap:var(--mx-s-2);font-size:var(--mx-fs-xs);color:var(--mx-ink-2)}
.mx-au-day{flex:0 0 auto;display:inline-grid;place-items:center;min-width:40px;height:24px;padding:0 6px;border-radius:6px;background:var(--mx-ink);color:var(--mx-on-ink);font-family:var(--mx-font-display);font-weight:700;font-size:14px;letter-spacing:.02em}
.mx-au-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--mx-s-3)}
.mx-au-filters .mx-field{flex:1 1 12rem;min-width:0}
@media (min-width:768px){.mx-au-filters .mx-field{flex:0 0 15rem}}
.mx-au-filters-n{margin-left:auto;padding-bottom:12px}
.mx-au-logr .mx-item-title b{font-weight:var(--mx-fw-bold)}
.mx-au-logr .mx-item-text{display:flex;align-items:center;gap:6px}
.mx-au-logr .mx-item-body>span:last-child{margin-top:6px}
.mx-au-logr .mx-tag{white-space:normal;text-transform:none;letter-spacing:0;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi)}
/* éditeur */
.mx-au-ed{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-5);align-items:start;padding-bottom:96px}
@media (min-width:1024px){.mx-au-ed{grid-template-columns:minmax(0,1fr) minmax(0,24rem)}.mx-au-prev{position:sticky;top:calc(var(--mx-nav-h) + var(--mx-s-4))}}
.mx-au-blk{position:relative;display:flex;flex-direction:column;gap:var(--mx-s-3);padding:var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg)}
.mx-au-blk+.mx-au-blk::before{content:"";position:absolute;left:38px;top:calc(var(--mx-s-4) * -1 - 1px);height:var(--mx-s-4);width:2px;background:var(--mx-line-2)}
.mx-au-blk-t{display:flex;align-items:center;gap:var(--mx-s-3);font-size:var(--mx-fs-body);font-weight:var(--mx-fw-semi);color:var(--mx-ink)}
.mx-au-pill{display:inline-grid;place-items:center;min-width:44px;height:28px;padding:0 10px;border-radius:6px;background:var(--mx-red);color:var(--mx-on-red);font-family:var(--mx-font-display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.mx-au-pill--ink{background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-au-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:var(--mx-fs-body);color:var(--mx-ink-2);line-height:1.5}
.mx-au-num{width:5rem;min-height:40px;text-align:center;font-weight:var(--mx-fw-semi);font-variant-numeric:tabular-nums}
.mx-au-picks{display:flex;flex-wrap:wrap;gap:var(--mx-s-2)}
.mx-au-pick{position:relative;display:inline-flex;align-items:center;min-height:var(--mx-target);padding:0 var(--mx-s-4);border:1.5px solid var(--mx-line-2);border-radius:var(--mx-r-pill);background:var(--mx-surface);font-size:var(--mx-fs-sm);font-weight:var(--mx-fw-semi);cursor:pointer}
.mx-au-pick input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.mx-au-pick:hover{border-color:var(--mx-ink)}
.mx-au-pick:has(input:checked){background:var(--mx-ink);border-color:var(--mx-ink);color:var(--mx-on-ink)}
.mx-au-pick:has(input:focus-visible){outline:2px solid var(--mx-focus);outline-offset:2px}
.mx-au-steps{display:flex;flex-direction:column;gap:var(--mx-s-3)}
.mx-au-step{position:relative;display:flex;flex-direction:column;gap:var(--mx-s-3);padding:var(--mx-s-4);border:1px solid var(--mx-line-2);border-radius:var(--mx-r-md);background:var(--mx-surface-2)}
.mx-au-step+.mx-au-step::before{content:"";position:absolute;left:34px;top:calc(var(--mx-s-3) * -1 - 1px);height:var(--mx-s-3);width:2px;background:var(--mx-line-ui)}
.mx-au-step-hd{display:flex;align-items:center;gap:var(--mx-s-3)}
.mx-au-when{flex:1 1 auto}
.mx-au-ta{min-height:5.5rem}
.mx-au-vars{display:flex;flex-wrap:wrap;gap:6px}
.mx-au-var{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px dashed var(--mx-line-ui);border-radius:var(--mx-r-sm);font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-ink-2);background:var(--mx-surface)}
.mx-au-var::after{content:"";position:absolute}
.mx-au-var:hover{border-style:solid;border-color:var(--mx-ink);color:var(--mx-ink)}
@media (pointer:coarse){.mx-au-var{min-height:var(--mx-target)}}
.mx-au-tplprev{padding:var(--mx-s-3);border-radius:var(--mx-r-sm);background:var(--mx-surface);border:1px solid var(--mx-line);font-size:var(--mx-fs-sm);color:var(--mx-ink-2);white-space:pre-wrap}
.mx-au-prev{padding:var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-1);min-width:0}
.mx-au-pc{flex:0 1 12rem;min-width:0}
.mx-au-pc .mx-select{min-height:38px;font-size:var(--mx-fs-sm)}
.mx-au-tl{position:relative;display:flex;flex-direction:column;gap:var(--mx-s-4);margin:0;padding:0;list-style:none}
.mx-au-tl li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--mx-s-3);align-items:start}
.mx-au-tl li+li::before{content:"";position:absolute;left:21px;top:calc(var(--mx-s-4) * -1);height:var(--mx-s-4);width:2px;background:var(--mx-line-2)}
.mx-au-bub{display:flex;flex-direction:column;gap:6px;padding:var(--mx-s-3) var(--mx-s-4);border-radius:16px 16px 16px 4px;background:var(--mx-bg-2);color:var(--mx-ink);font-size:var(--mx-fs-sm);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.mx-au-bub mark{background:var(--mx-warn-soft);color:var(--mx-ink);border-radius:3px;padding:0 2px;box-shadow:inset 0 -2px 0 var(--mx-warn)}
.mx-au-bub--notif{border-radius:12px;background:var(--mx-surface-2);border:1px solid var(--mx-line-2)}
.mx-au-notif-hd{font-size:var(--mx-fs-xs);color:var(--mx-muted);white-space:normal}
.mx-au-notif-hd .mxl-word{font-size:13px;color:var(--mx-ink)}
.mx-au-stars{display:flex;gap:4px}
.mx-au-stars i{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--mx-line-ui)}
.mx-au-mine{display:flex;align-items:flex-start;gap:var(--mx-s-2);padding:var(--mx-s-3);border:1px dashed var(--mx-line-ui);border-radius:var(--mx-r-md);font-size:var(--mx-fs-sm);color:var(--mx-ink-2)}
.mx-au-mine .mx-ico{margin-top:2px;color:var(--mx-ink)}
.mx-au-mine mark{background:transparent;color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-au-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--mx-z-nav);background:color-mix(in oklab,var(--mx-surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--mx-line);padding-bottom:env(safe-area-inset-bottom)}
.mx-au-bar-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-2);max-width:calc(72rem + 2 * var(--mx-gutter));margin-inline:auto;padding:var(--mx-s-3) var(--mx-gutter)}
@media (max-width:479.98px){.mx-au-bar-in>.mx-btn--ghost{display:none}.mx-au-bar-in>.mx-btn{flex:1 1 0}.mx-au-bar-in>.mx-grow{display:none}}
.mx-au-tlist{border:1px solid var(--mx-line);border-radius:var(--mx-r-md);overflow:hidden}
.mx-au-tlist .mx-item{padding:var(--mx-s-3) var(--mx-s-4)}
.mx-au-tempty{padding:var(--mx-s-6) var(--mx-s-4)}
.mx-au-safe{grid-template-columns:auto minmax(0,1fr);align-items:center;margin:0}
.mx-au-quiet{display:grid;grid-template-columns:1fr 1fr;gap:var(--mx-s-3)}
/* non Elite */
.mx-au-hero{padding:clamp(1.5rem,1rem + 3vw,3rem);border-radius:var(--mx-r-xl);background:var(--mx-surface);border:1px solid var(--mx-line);box-shadow:var(--mx-e-1)}
.mx-au-hero .mx-body{max-width:40rem}
.mx-au-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:var(--mx-s-3);margin:0;padding:0;list-style:none}
.mx-au-feats li{display:flex;align-items:flex-start;gap:var(--mx-s-2);font-size:var(--mx-fs-sm);color:var(--mx-ink-2)}
.mx-au-feats li .mx-ico{color:var(--mx-red-text);margin-top:1px}
.mx-au-feats b{color:var(--mx-ink)}

/* ───── Liste déroulante dessinée (.mx-dd) ───── */
.mx-dd{position:relative;display:flex;min-width:0}
.mx-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:var(--mx-s-2);width:100%;min-height:var(--mx-h-md);padding:0 var(--mx-s-3) 0 var(--mx-s-4);border:var(--mx-bw-ui) solid var(--mx-line-ui);border-radius:var(--mx-r-md);background:var(--mx-surface);color:var(--mx-ink);font-size:var(--mx-fs-body);text-align:left;transition:border-color var(--mx-d-fast) var(--mx-ease),box-shadow var(--mx-d-fast) var(--mx-ease)}
.mx-dd-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mx-dd-btn .mx-ico{color:var(--mx-muted);transition:transform var(--mx-d-fast) var(--mx-ease)}
.mx-dd-btn:hover{border-color:var(--mx-ink)}
.mx-dd-btn:focus-visible,.mx-dd.is-open .mx-dd-btn{outline:none;border-color:var(--mx-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--mx-focus) 30%,transparent)}
.mx-dd.is-open .mx-dd-btn .mx-ico{transform:rotate(180deg)}
.mx-dd--sm .mx-dd-btn{min-height:38px;font-size:var(--mx-fs-sm);padding-left:var(--mx-s-3)}
.mx-dd-list{position:absolute;z-index:var(--mx-z-pop);top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(20rem,calc(100vw - 2rem));max-height:18rem;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);box-shadow:var(--mx-e-3);animation:mx-pop-in var(--mx-d-fast) var(--mx-ease-out) both}
.mx-dd-list[hidden]{display:none}
.mx-dd--end .mx-dd-list,.mx-dd.is-flip .mx-dd-list{left:auto;right:0}
.mx-dd-opt{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:var(--mx-s-2);min-height:40px;padding:0 var(--mx-s-3) 0 var(--mx-s-2);border-radius:var(--mx-r-sm);font-size:var(--mx-fs-sm);color:var(--mx-ink-2);cursor:pointer}
.mx-dd-opt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-dd-opt .mx-ico{visibility:hidden;color:var(--mx-red-text);stroke-width:2.4}
.mx-dd-opt[aria-selected="true"]{color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-dd-opt[aria-selected="true"] .mx-ico{visibility:visible}
.mx-dd-opt:hover,.mx-dd-opt:focus{outline:none;background:var(--mx-bg-2);color:var(--mx-ink)}
.mx-dd-opt:focus-visible{box-shadow:inset 0 0 0 2px var(--mx-focus)}
@media (pointer:coarse){.mx-dd-opt{min-height:var(--mx-target)}}
/* Automatisations : bouton principal plus marqué, journal cliquable, détail */
.mx-au-new{font-weight:800;letter-spacing:.01em}
.mx-au-logr{cursor:pointer}
.mx-au-logr .mx-item-meta .mx-ico{color:var(--mx-muted)}
.mx-au-logr:hover .mx-item-meta .mx-ico{color:var(--mx-ink)}
.mx-au-run{max-width:36rem}
.mx-au-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mx-s-2)}
.mx-au-stat{display:flex;flex-direction:column;gap:4px;padding:var(--mx-s-3);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface-2)}
.mx-au-stat .mx-stat{font-size:1.75rem}
@media (max-width:399.98px){.mx-au-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Retouches : surlignage des variables, modale de détail compacte, + en gras */
.mx-au-bub{display:block}
.mx-au-bub>b{display:block;margin-bottom:6px}
.mx-au-notif-hd{display:block;margin-bottom:4px}
.mx-au-stars{margin-top:6px}
.mx-au-bub mark{background:color-mix(in oklab,var(--mx-warn) 22%,transparent);color:var(--mx-ink);font-weight:var(--mx-fw-semi);border-radius:4px;padding:0 3px;box-shadow:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mx-dark .mx-au-bub mark{background:color-mix(in oklab,var(--mx-warn) 18%,transparent);color:var(--mx-warn-text)}
.mx-au-new .mx-ico{stroke-width:2.8}
.mx-au-run{max-width:28rem;gap:var(--mx-s-3);padding:var(--mx-s-5)}
@media (min-width:768px){.mx-au-run{padding:var(--mx-s-6)}}
.mx-au-run .mx-h2{font-size:1.125rem}
.mx-au-run .mx-iconbtn{margin:-8px -8px 0 0}
.mx-au-run .mx-au-stats{gap:6px}
.mx-au-run .mx-au-stat{padding:8px 10px;gap:2px}
.mx-au-run .mx-au-stat .mx-stat{font-size:1.375rem}
.mx-au-run .mx-au-bub{padding:10px 12px;font-size:var(--mx-fs-xs)}
.mx-au-run .mx-au-tlist{max-height:13rem;overflow-y:auto}
.mx-au-run .mx-au-tlist .mx-item{padding:8px 12px;gap:10px;align-items:center;min-height:0}
.mx-au-run .mx-au-tlist .mx-av{--av:28px}
.mx-au-run .mx-au-tlist .mx-item-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mx-au-run .mx-tag{text-transform:none;letter-spacing:0;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);min-height:22px;padding:1px 8px}
.mx-au-run .mx-small.mx-strong{font-size:var(--mx-fs-xs)}
.mx-au-run .mx-modal-actions .mx-btn{min-height:40px}

/* Bilan d un client : bandeau client et barre d actions qui ressortent du fond */
.mx-bclient{display:flex;align-items:center;gap:var(--mx-s-3);flex-wrap:wrap;padding:var(--mx-s-4) var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-left:4px solid var(--mx-ink);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-1);min-width:0}
.mx-bclient .mx-av{--av:48px}
.mx-bclient .mx-grow{min-width:10rem}
.mx-sticky-ft{background:var(--mx-surface);border-top:1px solid var(--mx-line-2);box-shadow:0 -6px 20px rgba(20,19,15,.08)}
@media (min-width:768px){.mx-sticky-ft{border:1px solid var(--mx-line-2);box-shadow:var(--mx-e-2)}}
.mx-dark .mx-sticky-ft{background:var(--mx-surface-2);box-shadow:0 -6px 20px rgba(0,0,0,.35)}
@media (min-width:768px){.mx-dark .mx-sticky-ft{box-shadow:var(--mx-e-2)}}
.mx-sticky-ft .mx-btn--ghost{--b-bg:var(--mx-bg-2);--b-bg-h:var(--mx-line)}
.mx-bhd-client{margin-top:var(--mx-s-3)}
.mx-lock-grid{align-items:start}
@media (min-width:900px){.mx-lock-grid{grid-template-columns:minmax(0,1fr) minmax(0,20rem);gap:var(--mx-s-8)}.mx-lock-grid>.mx-stack{padding-top:var(--mx-s-2)}}
.mx-lock-ex{max-height:22rem}
.mx-alldone{min-height:var(--mx-target);padding:0 var(--mx-s-4);text-transform:none;letter-spacing:0;font-size:var(--mx-fs-sm)}

/* ───── Espace développeur ───── */
.mx-devbar{position:sticky;top:0;z-index:calc(var(--mx-z-nav) + 1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--mx-s-3);min-height:40px;padding:4px var(--mx-gutter);background:#0F3A22;color:#E4F5EA;font-size:var(--mx-fs-xs);border-bottom:1px solid #2F9A57}
.mx-devbar-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.mx-devbar-t b{font-weight:var(--mx-fw-bold);letter-spacing:.02em}
.mx-devbar-t .mx-ico{color:#86E3A7}
.mx-devbar .mx-devbar-btn{--b-bg:transparent;--b-fg:#E4F5EA;--b-bd:rgba(228,245,234,.5);--b-bg-h:rgba(228,245,234,.12);--b-bd-h:#E4F5EA;min-height:30px}
.has-devbar .mx-nav{top:40px}
@media (max-width:599.98px){.mx-devbar{min-height:56px}.has-devbar .mx-nav{top:56px}}
.mx-menu-badge{margin-left:auto;display:inline-flex}
.mx-dv-status{display:flex;flex-wrap:wrap;gap:var(--mx-s-2)}
.mx-dv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:var(--mx-s-3)}
.mx-dv-tile{display:flex;flex-direction:column;gap:var(--mx-s-3);min-height:9.5rem;padding:var(--mx-s-5);background:var(--mx-surface);border:1px solid var(--mx-line);border-radius:var(--mx-r-lg);box-shadow:var(--mx-e-1);color:var(--mx-ink);text-decoration:none;font-weight:inherit;transition:border-color var(--mx-d-fast) var(--mx-ease),transform var(--mx-d-fast) var(--mx-ease)}
.mx-dv-tile:hover{border-color:var(--mx-ink);color:var(--mx-ink);transform:translateY(-1px)}
.mx-dv-tile .mx-card-ic{background:var(--mx-green-soft);color:var(--mx-green-text)}
.mx-dv-tile-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--mx-s-2);font-size:var(--mx-fs-xs);color:var(--mx-muted)}
.mx-dv-tile-ft b{color:var(--mx-ink);font-weight:var(--mx-fw-semi)}
.mx-dv-hd{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--mx-s-3);padding-bottom:var(--mx-s-4);border-bottom:var(--mx-bw-rule) solid var(--mx-line-strong)}
.mx-dv-hd .mx-h1{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-3)}
.mx-dv-flag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mx-s-3) var(--mx-s-4);padding:var(--mx-s-4);border-bottom:1px solid var(--mx-line);background:var(--mx-surface)}
.mx-dv-flag:last-child{border-bottom:0}
.mx-dv-flag-ctl{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mx-s-2)}
@media (min-width:900px){.mx-dv-flag{grid-template-columns:auto minmax(0,1fr) 30rem;align-items:center}.mx-dv-flag-ctl{grid-column:auto}}
.mx-dv-ctl{display:flex;align-items:center;justify-content:space-between;gap:var(--mx-s-2);min-height:52px;padding:6px var(--mx-s-3);border:1px solid var(--mx-line);border-radius:var(--mx-r-md);background:var(--mx-surface-2);cursor:pointer;min-width:0}
.mx-dv-ctl.is-locked{cursor:not-allowed;background:transparent;border-style:dashed}
.mx-dv-ctl .mx-stack{min-width:0}
.mx-dv-ctl .mx-switch:disabled{opacity:.5}
.mx-dv-ctl.is-on{border-color:var(--mx-green);background:var(--mx-green-soft)}
.mx-dv-journal{display:inline-flex;align-items:center;gap:6px;font-size:var(--mx-fs-xs);font-weight:var(--mx-fw-semi);color:var(--mx-muted)}
.mx-dv-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mx-s-4);align-items:start}
@media (min-width:1024px){.mx-dv-grid{grid-template-columns:minmax(0,1fr) minmax(0,26rem)}.mx-dv-grid--mail{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}}
.mx-dv-opts{display:flex;flex-direction:column;gap:var(--mx-s-2)}
.mx-dv-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--mx-s-3);align-items:start;padding:var(--mx-s-3) var(--mx-s-4);border:1.5px solid var(--mx-line-2);border-radius:var(--mx-r-md);background:var(--mx-surface);cursor:pointer}
.mx-dv-opt:hover{border-color:var(--mx-ink)}
.mx-dv-opt:has(input:checked){border-color:var(--mx-ink);background:var(--mx-surface-2)}
.mx-dv-opt .mx-radio{margin-top:1px}
.mx-dv-inline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mx-s-2);margin-top:var(--mx-s-2)}
.mx-dv-inline .mx-input{width:5rem;min-height:40px;text-align:center}
.mx-dv-sum{display:flex;flex-direction:column;gap:var(--mx-s-2);padding:var(--mx-s-4);border-radius:var(--mx-r-md);background:var(--mx-ink);color:var(--mx-on-ink)}
.mx-dv-sum .mx-over{color:color-mix(in oklab,var(--mx-on-ink) 72%,transparent)}
.mx-dv-sum p.mx-h3{color:var(--mx-on-ink)}
.mx-dv-mail{display:flex;justify-content:center;padding:var(--mx-s-5);border-radius:var(--mx-r-lg);background:var(--mx-bg-2);border:1px solid var(--mx-line);overflow:hidden}
.mx-dv-mframe{width:100%;max-width:36rem;border-radius:10px;overflow:hidden;box-shadow:var(--mx-e-2);background:#FFFFFF;color:#0F0E0C}
.mx-dv-mframe.is-mobile{max-width:22rem}
.mx-dv-mframe.is-dark{background:#1C1B18;color:#F4F2ED}
.mx-dv-mhead{display:flex;flex-direction:column;gap:2px;padding:10px 16px;background:#F4F2ED;border-bottom:1px solid #E4E0D5;font-size:12px;color:#55524B}
.mx-dv-mframe.is-dark .mx-dv-mhead{background:#242320;border-color:#3A3732;color:#BDB8AE}
.mx-dv-mhead b{color:inherit;font-weight:600}
.mx-dv-mbody{display:flex;flex-direction:column;gap:14px;padding:24px 24px 28px;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}
.mx-dv-mframe.is-mobile .mx-dv-mbody{padding:20px 18px 24px}
.mx-dv-mlogo{font-family:var(--mx-font-display);font-weight:800;font-size:24px;letter-spacing:.06em}
.mx-dv-mlogo i{font-style:normal;color:#E8170A}
.mx-dv-mbody h3{margin:0;font-family:var(--mx-font-display);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1}
.mx-dv-mbtn{align-self:flex-start;display:inline-block;padding:12px 20px;border-radius:8px;background:#E8170A;color:#FFFFFF;font-weight:700;font-size:15px}
.mx-dv-mfoot{font-size:12px;color:#6B6760;border-top:1px solid #E4E0D5;padding-top:12px}
.mx-dv-mframe.is-dark .mx-dv-mfoot{color:#A29D92;border-color:#3A3732}
.mx-dv-push{display:flex;gap:12px;align-items:flex-start;max-width:22rem;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.92);color:#0F0E0C;box-shadow:var(--mx-e-2);font-size:14px;line-height:1.4}
.mx-dv-push.is-dark{background:rgba(40,39,36,.95);color:#F4F2ED}
.mx-dv-push-ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#E8170A;color:#fff;font-family:var(--mx-font-display);font-weight:800;font-size:18px}
.mx-dv-push b{display:block}
.mx-dv-mono{font-family:var(--mx-font-mono);font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:var(--mx-s-3);border-radius:var(--mx-r-md);background:var(--mx-surface-2);border:1px solid var(--mx-line);color:var(--mx-ink-2);max-height:16rem;overflow:auto}
.mx-dv-dl .mx-dl-row dd{margin:0;text-align:right;overflow-wrap:anywhere}
.mx-dv-dl .mx-dl-row dt{min-width:8rem}
.mx-dv-logr{display:grid;grid-template-columns:7.5rem auto minmax(0,1fr);gap:var(--mx-s-3);align-items:center;padding:var(--mx-s-3) var(--mx-s-4);border-bottom:1px solid var(--mx-line);background:var(--mx-surface)}
.mx-dv-logr:last-child{border-bottom:0}
@media (max-width:599.98px){.mx-dv-logr{grid-template-columns:auto 1fr}.mx-dv-logr>div{grid-column:1/-1}}
.mx-dv-denied{max-width:32rem;margin:var(--mx-s-12) auto 0}






/* Listes compactes (17/10/2026) : même format que les filtres Groupe / Équipement de la Bibliothèque, partout dans l'app.
   Sur ordinateur : options de 32 px, texte 13 px. Sur mobile : options de 44 px pour le pouce. */
@media (min-width:768px){
.dd-m{padding:4px;border-radius:10px;box-shadow:0 6px 18px -6px rgba(20,19,15,.18),0 16px 32px -14px rgba(20,19,15,.2)}
.dd-o{gap:8px;min-height:32px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:400}
.dd-o[aria-selected="true"]{font-weight:600}
.dd-k{--mx-ico:14px}
.dd-n{font-size:12.5px}
.mx-menu{width:auto;min-width:11rem;max-width:min(16rem,calc(100vw - 1.5rem));padding:4px;border-radius:10px;box-shadow:0 6px 18px -6px rgba(20,19,15,.18),0 16px 32px -14px rgba(20,19,15,.2)}
.mx-menu-item{gap:8px;min-height:32px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:400}
.mx-menu-item .mx-ico{--mx-ico:16px}
.mx-menu-hd{padding:6px 8px 8px;margin-bottom:4px}
.mx-menu-sep{margin:4px 0}
}

/* export du 05/10/2026 */
/* ════════════════════════════════════════════════════════════════
   MARX · CHARTE v2 — MARQUES retenues : logo deux moitiés · deux rouges, badges B · Liseré un seul contour.
   Dépend de charte-v2-tokens.css. Balisage produit par charte-v2-marques.js.
   Une fois les choix faits, seuls la piste et la direction retenues passent dans charte-v2-composants.css.
   ════════════════════════════════════════════════════════════════ */

/* ───── Symbole ───── */
.mxl6{display:inline-flex;align-items:center;gap:.3em;line-height:1;color:var(--mx-red)}
.mxl6 svg{display:block;flex:0 0 auto;width:var(--s,32px);height:var(--s,32px);fill:var(--mx-red);overflow:visible}
.mxl6 .f2{fill:#A80F06}
.mxl6--16{--s:16px}.mxl6--24{--s:24px}.mxl6--32{--s:32px}.mxl6--48{--s:48px}.mxl6--180{--s:180px}
.mxl6 .mxl-word{font-size:calc(var(--s) * .8);color:var(--mxl-ink,var(--mx-ink))}
.mxl6--on-ink .f2{fill:#7E0B05}

/* ───── Badges : géométrie commune aux 3 directions (proche des badges actuels de l'app) ─────
   Capsule à angles doux, capitales Barlow 700, interlettrage 0,1 em, emblème optionnel à gauche.
   Petite version 22 px (listes) · grande version 32 px (profil, en-tête). */
.mxb{--h:22px;--fs:10.5px;--px:8px;--em:10px;position:relative;display:inline-flex;align-items:center;gap:5px;height:var(--h);padding:0 var(--px);border:1px solid transparent;border-radius:6px;font-family:var(--mx-font-text);font-size:var(--fs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap;vertical-align:middle;font-variant-numeric:tabular-nums lining-nums;flex:0 0 auto}
.mxb--lg{--h:32px;--fs:13px;--px:12px;--em:14px;gap:7px;border-radius:8px}
.mxb svg{width:var(--em);height:var(--em);flex:0 0 auto;fill:currentColor}
.mxb .d{font-weight:600;letter-spacing:.04em;opacity:.8}
.mxb .num{align-self:stretch;display:flex;align-items:center;margin-left:2px;padding:0 7px;background:var(--mx-brand-ink);color:#fff;letter-spacing:.06em}
.mxb--lg .num{padding:0 10px}

/* Métal laiton (Elite) — teinte neutre, aucune couleur de marque tierce */
.mx-light,:root{--mxb-hi:#F7E6AE;--mxb-mid:#D9B24E;--mxb-lo:#AE8424;--mxb-line:#8A6514;--mxb-ink:#2B1F03;--mxb-soft:#F6EBC9;--mxb-text:#6E500C;--mxb-on-dark:#F2D78A}
.mx-dark{--mxb-hi:#F2DC98;--mxb-mid:#CFA640;--mxb-lo:#9E7618;--mxb-line:#C79C35;--mxb-ink:#241A02;--mxb-soft:#2D2410;--mxb-text:#F2D78A;--mxb-on-dark:#F2D78A}

/* Démo (commune aux 3 directions : interne, ne doit jamais ressembler à une formule) */
.mxb--demo{color:var(--mx-info-text);border-color:currentColor;background:repeating-linear-gradient(135deg,var(--mx-info-soft) 0 3px,transparent 3px 6px);font-family:var(--mx-font-mono);letter-spacing:.08em}

/* ── Direction retenue · B Liseré, un seul contour ──
   Starter filet fin → Pro filet encre + losange, fond satiné → Elite aplat encre cerclé laiton + étoile.
   Survol (Pro, Elite) : reflet qui traverse le badge, emblème qui pivote, léger soulèvement. Coupé si mouvement réduit. */
.mxb--b.mxb--starter{background:transparent;border-color:var(--mx-line-ui);color:var(--mx-ink-2)}
.mxb--b.mxb--pro{background:linear-gradient(180deg,var(--mx-surface) 0%,color-mix(in oklab,var(--mx-ink) 7%,var(--mx-surface)) 100%);border:1.5px solid var(--mx-ink);color:var(--mx-ink);box-shadow:inset 0 1px 0 color-mix(in oklab,var(--mx-surface) 80%,transparent),0 1px 2px rgba(0,0,0,.1)}
.mxb--b.mxb--pro svg{width:calc(var(--em) * .8);height:calc(var(--em) * .8)}
.mxb--b.mxb--elite{background:var(--mx-brand-ink);border:1.5px solid var(--mxb-mid);color:var(--mxb-on-dark);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mxb--b.mxb--elite svg{fill:var(--mxb-mid)}
.mxb--b.mxb--pionnier{background:var(--mx-red);border-color:var(--mx-red);color:#fff}
.mxb--b.mxb--essai{background:transparent;border:1.5px dashed var(--mx-ink);color:var(--mx-ink)}
.mxb--b.mxb--pro,.mxb--b.mxb--elite{overflow:hidden;isolation:isolate;cursor:default;transition:transform var(--mx-d-fast) var(--mx-ease),box-shadow var(--mx-d-fast) var(--mx-ease)}
.mxb--b.mxb--pro::after,.mxb--b.mxb--elite::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;transform:translateX(-130%);background:linear-gradient(105deg,transparent 30%,var(--mxb-sheen) 50%,transparent 70%)}
.mxb--b.mxb--pro{--mxb-sheen:color-mix(in oklab,var(--mx-ink) 16%,transparent)}
.mxb--b.mxb--elite{--mxb-sheen:rgba(242,215,138,.38)}
.mxb--b svg{transition:transform var(--mx-d-slow) var(--mx-ease)}
.mxb--b.mxb--pro:hover,.mxb--b.mxb--elite:hover{transform:translateY(-1px)}
.mxb--b.mxb--pro:hover{box-shadow:0 3px 10px rgba(0,0,0,.16)}
.mxb--b.mxb--elite:hover{box-shadow:0 4px 14px rgba(160,120,20,.35)}
.mxb--b.mxb--pro:hover::after,.mxb--b.mxb--elite:hover::after{transform:translateX(130%);transition:transform 750ms var(--mx-ease)}
.mxb--b.mxb--pro:hover svg{transform:rotate(90deg)}
.mxb--b.mxb--elite:hover svg{transform:rotate(90deg) scale(1.15)}
/* Pionnier : le badge se soulève, un reflet clair passe, le drapeau flotte (la toile ondule autour de la hampe) */
.mxb--b.mxb--pionnier{overflow:hidden;isolation:isolate;cursor:default;--mxb-sheen:rgba(255,255,255,.32);transition:transform var(--mx-d-fast) var(--mx-ease),box-shadow var(--mx-d-fast) var(--mx-ease)}
.mxb--b.mxb--pionnier::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;transform:translateX(-130%);background:linear-gradient(105deg,transparent 30%,var(--mxb-sheen) 50%,transparent 70%)}
.mxb--b.mxb--pionnier:hover{transform:translateY(-1px);box-shadow:0 4px 14px color-mix(in oklab,var(--mx-red) 45%,transparent)}
.mxb--b.mxb--pionnier:hover::after{transform:translateX(130%);transition:transform 750ms var(--mx-ease)}
.mxb--b.mxb--pionnier .cloth{transform-origin:3.7px 4px;transform-box:view-box}
.mxb--b.mxb--pionnier:hover .cloth{animation:mxb-wave 900ms ease-in-out infinite}
@keyframes mxb-wave{0%,100%{transform:skewY(0) scaleX(1)}25%{transform:skewY(-9deg) scaleX(.92)}50%{transform:skewY(0) scaleX(1.04)}75%{transform:skewY(7deg) scaleX(.94)}}
@media (prefers-reduced-motion:reduce){.mxb--b.mxb--pionnier:hover{transform:none}.mxb--b.mxb--pionnier:hover .cloth{animation:none}.mxb--b.mxb--pro:hover,.mxb--b.mxb--elite:hover{transform:none}.mxb--b:hover::after{transform:translateX(-130%)!important;transition:none!important}.mxb--b:hover svg{transform:none!important}}





/* export du 08/10/2026 */
/* ════════════════════════════════════════════════════════════════
   MARX · CHARTE v2 — BADGES DE COMPTE : DEV et TESTEUR (exploration, 3 directions chacun)
   Même géométrie que les badges de formule (.mxb, .mxb--lg) : dépend de charte-v2-marques.css.
   Animation : seulement au survol / focus clavier (ou .is-play), < 600 ms, jamais en boucle.
   Mobile : badge fixe ; ou une seule fois à l'affichage en ajoutant .is-play (MX.badgeIntro).
   prefers-reduced-motion : aucune animation.
   ════════════════════════════════════════════════════════════════ */
:root,.mx-light{
--dv-bg:#E2F3F7;--dv-bd:#2C8FA6;--dv-fg:#0B4F5E;--dv-ic:#127A91;--dv-glow:rgba(27,160,192,.32);--dv-trace:rgba(18,122,145,.26);--dv-run:#14A9CB;
--ts-bg:#FBF0CC;--ts-bd:#C4950F;--ts-fg:#4F3B00;--ts-ic:#8A6400;--ts-ring:rgba(196,149,15,.4);--ts-g1:#FCEAB0;--ts-g2:#EDC24C;--ts-gfg:#3A2B00;--ts-spark:#FFFFFF}
.mx-dark{
--dv-bg:#0D272E;--dv-bd:#2A93AB;--dv-fg:#8BE2F4;--dv-ic:#5CCFE8;--dv-glow:rgba(92,207,232,.34);--dv-trace:rgba(92,207,232,.24);--dv-run:#C2F3FD;
--ts-bg:#2A2208;--ts-bd:#A97F12;--ts-fg:#F5CF5A;--ts-ic:#F2C12E;--ts-ring:rgba(242,193,46,.38);--ts-g1:#5E460C;--ts-g2:#2E2407;--ts-gfg:#FBDD7A;--ts-spark:#FFE89A}

/* Variante verte du badge Dev (à comparer au cyan) */
:root .mxb--dev-g,.mx-light .mxb--dev-g{--dv-bg:#E3F2E8;--dv-bd:#2E8B4F;--dv-fg:#0F4D28;--dv-ic:#1B6B35;--dv-glow:rgba(33,128,60,.3);--dv-trace:rgba(27,107,53,.26);--dv-run:#21A350}
.mx-dark .mxb--dev-g{--dv-bg:#10261A;--dv-bd:#2F9A57;--dv-fg:#86E3A7;--dv-ic:#5CC47E;--dv-glow:rgba(92,196,126,.32);--dv-trace:rgba(92,196,126,.24);--dv-run:#C4F5D4}
.pl-dvg{--dv-bg:#E3F2E8;--dv-fg:#0F4D28;--dv-ic:#1B6B35}
.mx-dark .pl-dvg,.mx-dark.pl-dvg{--dv-bg:#10261A;--dv-fg:#86E3A7;--dv-ic:#5CC47E}

/* ── Socle commun ── */
.mxb--acc{overflow:hidden;isolation:isolate;cursor:default;transition:transform var(--mx-d-fast) var(--mx-ease),box-shadow var(--mx-d-fast) var(--mx-ease)}
.mxb--acc:focus-visible{outline:2px solid var(--mx-focus);outline-offset:2px}
.mxb--acc svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mxb--acc .sheen{position:absolute;inset:-2px;z-index:-1;pointer-events:none;transform:translateX(-130%);background:linear-gradient(105deg,transparent 30%,var(--sheen) 50%,transparent 70%)}
.mxb--acc:is(:hover,:focus-visible,.is-play) .sheen{transform:translateX(130%);transition:transform 520ms var(--mx-ease)}
.mxb--acc:is(:hover,:focus-visible,.is-play){transform:translateY(-1px)}
.mxb--dev{background:var(--dv-bg);border:1.5px solid var(--dv-bd);color:var(--dv-fg);--sheen:var(--dv-glow)}
.mxb--dev svg{color:var(--dv-ic)}
.mxb--tst{background:var(--ts-bg);border:1.5px solid var(--ts-bd);color:var(--ts-fg);--sheen:rgba(255,236,170,.55)}
.mx-dark .mxb--tst{--sheen:rgba(255,226,140,.28)}
.mxb--tst svg{color:var(--ts-ic)}

/* ── DEV A · Code : chevrons + curseur qui clignote une fois ── */
.mxb--da .cr{position:absolute;right:calc(var(--px) - 5px);top:50%;width:1.5px;height:.95em;margin-top:-.475em;background:currentColor;border-radius:1px;opacity:0}
.mxb--da:is(:hover,:focus-visible,.is-play) .cr{animation:mxb-blink 480ms steps(1) both}
@keyframes mxb-blink{0%{opacity:1}30%{opacity:0}60%{opacity:1}100%{opacity:0}}
.mxb--da{padding-right:calc(var(--px) + 2px)}

/* ── DEV B · Circuit : tracé en fond, une lumière le parcourt ── */
.mxb--db .trace{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.mxb--db .trace path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mxb--db .trace .t{stroke:var(--dv-trace)}
.mxb--db .trace .r{stroke:var(--dv-run);stroke-width:1.6;stroke-dasharray:16 100;stroke-dashoffset:16;opacity:0}
.mxb--db:is(:hover,:focus-visible,.is-play) .trace .r{animation:mxb-run 560ms linear both}
@keyframes mxb-run{0%{stroke-dashoffset:16;opacity:1}90%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}

/* ── DEV C · Terminal : le mot s'écrit lettre par lettre, halo cyan ── */
.mxb--dc .pr{color:var(--dv-ic);font-weight:700;margin-right:1px}
.mxb--dc .tt{display:inline-flex}
.mxb--dc .tt i{font-style:normal}
.mxb--dc:is(:hover,:focus-visible,.is-play){box-shadow:0 0 0 3px var(--dv-glow),0 0 16px var(--dv-glow)}
.mxb--dc:is(:hover,:focus-visible,.is-play) .tt i{animation:mxb-type 1ms linear both}
.mxb--dc:is(:hover,:focus-visible,.is-play) .tt i:nth-child(1){animation-delay:90ms}
.mxb--dc:is(:hover,:focus-visible,.is-play) .tt i:nth-child(2){animation-delay:210ms}
.mxb--dc:is(:hover,:focus-visible,.is-play) .tt i:nth-child(3){animation-delay:330ms}
@keyframes mxb-type{from{opacity:0}to{opacity:1}}

/* ── TESTEUR A · Loupe : bascule légère + reflet ── */
.mxb--ta svg{transform-origin:45% 45%;transition:transform 320ms var(--mx-ease)}
.mxb--ta:is(:hover,:focus-visible,.is-play) svg{transform:rotate(-20deg)}

/* ── TESTEUR B · Validation : la coche se redessine, léger soulèvement comme Pro et Elite ── */
.mxb--tb .ck{stroke-dasharray:10;stroke-dashoffset:0}
.mxb--tb:is(:hover,:focus-visible,.is-play) .ck{animation:mxb-draw 380ms var(--mx-ease) 60ms both}
@keyframes mxb-draw{from{stroke-dashoffset:10}to{stroke-dashoffset:0}}

/* ── TESTEUR C · Éclat : fond or, éclats qui s'allument puis s'éteignent ── */
.mxb--tc{background:linear-gradient(135deg,var(--ts-g1),var(--ts-g2));color:var(--ts-gfg)}
.mxb--tc svg.st{color:var(--ts-gfg)}
.mxb--tc .sp{position:absolute;z-index:1;width:7px;height:7px;opacity:0;transform:scale(0);pointer-events:none;color:var(--ts-spark)}
.mxb--lg.mxb--tc .sp{width:9px;height:9px}
.mxb--tc .sp svg{width:100%;height:100%;fill:currentColor;stroke:none}
.mxb--tc .sp1{top:2px;left:16%}.mxb--tc .sp2{bottom:2px;left:52%}.mxb--tc .sp3{top:3px;right:7%}
.mxb--tc:is(:hover,:focus-visible,.is-play) .sp{animation:mxb-spark 460ms var(--mx-ease) both}
.mxb--tc:is(:hover,:focus-visible,.is-play) .sp2{animation-delay:70ms}
.mxb--tc:is(:hover,:focus-visible,.is-play) .sp3{animation-delay:130ms}
@keyframes mxb-spark{0%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1) rotate(20deg)}100%{opacity:0;transform:scale(.2) rotate(45deg)}}

/* ── Mouvement réduit : badge fixe ── */
@media (prefers-reduced-motion:reduce){.mxb--acc,.mxb--acc *{animation:none!important;transition:none!important}.mxb--acc:is(:hover,:focus-visible,.is-play){transform:none;box-shadow:none}.mxb--acc .sheen,.mxb--tc .sp{display:none}}
.mx-rm .mxb--acc,.mx-rm .mxb--acc *{animation:none!important;transition:none!important}
.mx-rm .mxb--acc:is(:hover,:focus-visible,.is-play){transform:none;box-shadow:none}
.mx-rm .mxb--acc .sheen,.mx-rm .mxb--tc .sp{display:none}