/* ------------------------------------------------------------------
   Charte visuelle reprise du tableau de bord statique (dashboard-jdp.html)
   Variables, theme clair/sombre, couleurs par categorie, cartes arrondies,
   badges de statut, typographie systeme.
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --page:           #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --border:         rgba(11,11,11,0.10);
  --good:           #0ca30c;
  --warning:        #fab219;
  --bad:            #d33b2f;
  --info:           #2a78d6;
  --cat-rh:         #2a78d6;
  --cat-comm:       #eb6834;
  --cat-membres:    #1baf7a;
  --cat-compta:     #eda100;
  --cat-autre:      #e87ba4;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:      #1a1a19;
    --page:           #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --border:         rgba(255,255,255,0.10);
    --good:           #0ca30c;
    --warning:        #fab219;
    --bad:            #e2564a;
    --info:           #3987e5;
    --cat-rh:         #3987e5;
    --cat-comm:       #d95926;
    --cat-membres:    #199e70;
    --cat-compta:     #c98500;
    --cat-autre:      #d55181;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:      #1a1a19;
  --page:           #0d0d0d;
  --text-primary:   #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted:     #898781;
  --gridline:       #2c2c2a;
  --border:         rgba(255,255,255,0.10);
  --good:           #0ca30c;
  --warning:        #fab219;
  --bad:            #e2564a;
  --info:           #3987e5;
  --cat-rh:         #3987e5;
  --cat-comm:       #d95926;
  --cat-membres:    #199e70;
  --cat-compta:     #c98500;
  --cat-autre:      #d55181;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--text-primary);
}
.hidden { display: none !important; }
a { color: var(--info); }

.wrap { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; }

/* ---------------------------------------------------------- topbar --- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--gridline); background: var(--surface-1);
  padding: 12px 20px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.topbar .marque { display: flex; flex-direction: column; gap: 2px; }
.topbar .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.topbar .titre { font-size: 15px; font-weight: 600; }
.topbar nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.navlink {
  border: 1px solid transparent; background: none; color: var(--text-secondary);
  font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  font-family: inherit;
}
.navlink:hover { background: var(--page); }
.navlink.actif { color: var(--text-primary); border-color: var(--border); background: var(--page); }
.qui { font-size: 12px; color: var(--text-muted); }

/* ---------------------------------------------------------- bandeau -- */
.bandeau-demo {
  background: color-mix(in srgb, var(--warning) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--text-primary); font-size: 13px; padding: 9px 20px; line-height: 1.45;
}

header.page-head { margin-bottom: 18px; }
header.page-head .eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
h1 { font-size: 26px; margin: 4px 0 6px; }
header.page-head p { color: var(--text-secondary); margin: 0; max-width: 660px; line-height: 1.5; font-size: 14px; }

.how-it-works {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; color: var(--text-secondary);
  margin: 18px 0 30px; line-height: 1.55;
}
.how-it-works strong { color: var(--text-primary); }

/* -------------------------------------------------------- categories - */
section.category { margin-bottom: 34px; }
.category-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.category-head h2 {
  font-size: 15px; margin: 0; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

.card {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; cursor: pointer; text-align: left; padding: 0; font-family: inherit;
  color: inherit; display: block; width: 100%;
}
.card:hover { border-color: var(--text-muted); }
.card-top { padding: 14px 16px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.summary-main { display: flex; flex-direction: column; gap: 4px; }
.card-title { font-size: 14.5px; font-weight: 600; }
.card-tagline { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.chevron { color: var(--text-muted); font-size: 13px; flex: none; margin-top: 2px; }
.card-foot {
  border-top: 1px solid var(--gridline); padding: 9px 16px 12px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.card-foot .ligne { display: flex; gap: 6px; align-items: baseline; }
.card-foot .etiquette { color: var(--text-muted); min-width: 100px; flex: none; }

/* ------------------------------------------------------------ badges - */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; flex: none;
}
.badge .dot2 { width: 6px; height: 6px; border-radius: 50%; }
.badge.ready    { color: var(--good);    background: color-mix(in srgb, var(--good) 14%, transparent); }
.badge.pending  { color: var(--warning); background: color-mix(in srgb, var(--warning) 18%, transparent); }
.badge.ref      { color: var(--info);    background: color-mix(in srgb, var(--info) 14%, transparent); }
.badge.propose  { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.badge.echec    { color: var(--bad);     background: color-mix(in srgb, var(--bad) 15%, transparent); }
.badge.ready .dot2   { background: var(--good); }
.badge.pending .dot2 { background: var(--warning); }
.badge.ref .dot2     { background: var(--info); }
.badge.propose .dot2 { background: var(--text-muted); }
.badge.echec .dot2   { background: var(--bad); }

/* ------------------------------------------------------------- blocs - */
.bloc {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 16px;
}
.bloc h3 { margin: 0 0 8px; font-size: 15px; }
.bloc h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin: 14px 0 5px;
}
.bloc h4:first-child { margin-top: 0; }
.bloc p { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.encart {
  background: var(--page); border: 1px solid var(--gridline); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.55;
}

/* ----------------------------------------------------------- boutons - */
.btn {
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  font-family: inherit;
}
.btn:hover:not(:disabled) { background: var(--gridline); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primaire { background: var(--info); border-color: var(--info); color: #fff; }
.btn-primaire:hover:not(:disabled) { filter: brightness(1.08); background: var(--info); }
.btn-petit { padding: 5px 10px; font-size: 12px; font-weight: 500; }
.ligne-boutons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.discret { font-size: 12px; color: var(--text-muted); }
.aide { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* ---------------------------------------------------------- formulaire */
label { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
input[type=text], input[type=number], input[type=password], input[type=time],
input[type=date], select, textarea {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  width: 100%; background: var(--surface-1); color: var(--text-primary); font-family: inherit;
}
.grille-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }

/* -------------------------------------------------------------- table */
table { width: 100%; border-collapse: collapse; background: var(--surface-1); font-size: 13px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--gridline); text-align: left; vertical-align: top; }
th { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.tableau-enveloppe { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

/* ------------------------------------------------------------- login - */
#ecran-connexion { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.boite-connexion {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 28px; width: 340px;
}
.boite-connexion h2 { margin: 4px 0 4px; font-size: 20px; }
.boite-connexion .eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.boite-connexion input { margin: 4px 0 12px; }
.erreur { color: var(--bad); font-size: 13px; margin-top: 6px; }

/* ------------------------------------------------ comment ca marche - */
.aide-tuiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.aide-tuile {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px;
}
.aide-tuile-titre { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.aide-tuile p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; }

.aide-statut {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--gridline);
}
.aide-statut:first-of-type { border-top: none; }
.aide-statut .badge { margin-top: 2px; min-width: 118px; justify-content: center; }
.aide-statut p { margin: 0; }

.aide-fiche-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.aide-fiche-tete h3 { margin: 0; }
.aide-fiche h4 { margin-top: 12px; }
.aide-fiche p { margin: 0 0 2px; }
.aide-fiche .aide { margin-top: 12px; border-top: 1px solid var(--gridline); padding-top: 10px; }

.aide-tech-tete {
  margin-top: 40px; padding-top: 22px; border-top: 2px solid var(--gridline);
}
.aide-tech-tete .eyebrow { color: var(--info); }

.cmd { margin: 12px 0 0; }
.cmd-ligne { display: flex; gap: 8px; align-items: stretch; }
.cmd-code {
  flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; word-break: break-word;
  background: var(--page); border: 1px solid var(--gridline); border-radius: 8px;
  padding: 9px 11px; font-size: 12.5px; color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.5;
}
.cmd-ligne .btn { flex: none; align-self: flex-start; }
.cmd-explication { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin-top: 5px; }
.bloc code {
  background: var(--page); border: 1px solid var(--gridline); border-radius: 5px;
  padding: 1px 5px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------- matchmaking - */
.sous-nav { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.day-block { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.day-header { padding: 10px 16px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--gridline); }
.slot-header {
  padding: 7px 16px; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  background: var(--page); border-bottom: 1px solid var(--gridline);
}
.prop-card { padding: 13px 16px; border-bottom: 1px solid var(--gridline); display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.prop-card.fait { background: color-mix(in srgb, var(--good) 8%, transparent); }
.prop-main { flex: 1; min-width: 260px; }
.prop-j1 { font-weight: 600; font-size: 14px; }
.prop-why { font-size: 12px; color: var(--text-muted); margin: 4px 0; line-height: 1.45; }
.prop-j2-list { font-size: 12.5px; margin: 6px 0; line-height: 1.5; color: var(--text-secondary); }
.prop-actions { display: flex; flex-direction: column; gap: 6px; min-width: 170px; }
.msg-preview {
  white-space: pre-wrap; background: var(--page); border: 1px solid var(--gridline);
  padding: 9px 11px; border-radius: 8px; font-size: 12px; margin-top: 6px; color: var(--text-secondary);
}
.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.stat-card .value { font-size: 24px; font-weight: 700; }
.stat-card .label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.toast {
  position: fixed; bottom: 20px; right: 20px; background: var(--text-primary); color: var(--page);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 100; max-width: 420px;
}
details.trace summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
details.trace pre {
  white-space: pre-wrap; word-break: break-word; background: var(--page);
  border: 1px solid var(--gridline); border-radius: 8px; padding: 10px;
  font-size: 11.5px; color: var(--text-secondary); margin: 6px 0 0;
}
footer { margin-top: 40px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--gridline); padding-top: 16px; }

/* --------------------------------------- accueil nouveau membre ------- */
.case-filtre {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  color: var(--text-secondary); margin: 0; cursor: pointer;
}
.case-filtre input { width: auto; }

.accueil-fiche { padding: 16px; }
.accueil-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.accueil-tete h3 { margin: 0 0 3px; }
.accueil-meta { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.accueil-dates {
  display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 4px;
  font-size: 12.5px; color: var(--text-secondary);
}
.accueil-dates .etiquette { color: var(--text-muted); margin-right: 4px; }
.accueil-actions { margin-top: 12px; }

.pastilles { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.pastille {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; min-width: 58px; padding: 6px 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--page); color: var(--text-secondary);
  font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.2;
}
.pastille:hover { border-color: var(--text-muted); }
.pastille-date { font-size: 10.5px; font-weight: 400; color: var(--text-muted); }
.pastille-a-venir   { background: var(--page); }
.pastille-a-envoyer {
  color: var(--warning); border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  background: color-mix(in srgb, var(--warning) 16%, transparent);
}
.pastille-en-retard {
  color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 14%, transparent);
}
.pastille-envoye {
  color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: color-mix(in srgb, var(--good) 13%, transparent);
}
.pastille-a-envoyer .pastille-date,
.pastille-en-retard .pastille-date,
.pastille-envoye .pastille-date { color: inherit; opacity: 0.8; }

.lien-reglage {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--text-secondary); word-break: break-all; margin-left: 8px;
}

/* --------------------------------------------- fenêtre « modèle » ----- */
.modale {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modale-boite {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px; max-width: 720px; width: 100%; max-height: 86vh; overflow: auto;
}
.modale-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.modale-tete h3 { margin: 0; font-size: 16px; }
.modale-corps {
  white-space: pre-wrap; word-break: break-word; margin: 10px 0 0;
  background: var(--page); border: 1px solid var(--gridline); border-radius: 10px;
  padding: 14px; font-size: 13px; line-height: 1.6; color: var(--text-primary);
  font-family: inherit;
}
#modale-intro { white-space: pre-wrap; }

/* ----------------------------------------- occupation des courts ------ */
.sous-valeur { font-size: 11px; color: var(--text-muted); }
.graphe {
  display: flex; align-items: flex-end; gap: 10px; height: 190px;
  padding: 10px 4px 0; border-bottom: 1px solid var(--gridline); overflow-x: auto;
}
.graphe-colonne { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 42px; }
.graphe-barres { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.graphe-barre { width: 14px; border-radius: 4px 4px 0 0; }
.graphe-squash { background: var(--cat-membres); }
.graphe-paume { background: var(--cat-compta); }
.graphe-etiquette { font-size: 10.5px; color: var(--text-muted); text-align: center; line-height: 1.3; }
.graphe-legende {
  display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-size: 12px; color: var(--text-secondary); align-items: center;
}
.graphe-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pastille-legende { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ==================================================================
   MATCHMAKING — présentation reprise du fichier propositions_matchs.html
   ------------------------------------------------------------------
   Mêmes repères visuels que l'ancien rendu (pastille d'initiales, badge
   de niveau coloré N1→N10, bloc « 3 partenaires proposés », étiquettes
   « nouveau binôme » / « pas vu Xj »), mais branchés sur les variables de
   thème de l'application : tout est lisible en clair COMME en sombre.
   Toutes les classes sont préfixées « mm- » pour ne pas entrer en conflit
   avec les cartes du tableau de bord.
   ================================================================== */

:root {
  /* Échelle de niveau : débutant (froid) → confirmé (chaud).
     N4 et N5 reprennent EXACTEMENT les couleurs de l'ancien fichier. */
  --niv1-fond: #e3ecf7;  --niv1-texte: #24507e;
  --niv2-fond: #dcebf0;  --niv2-texte: #1f5a6b;
  --niv3-fond: #d8eee4;  --niv3-texte: #1f6b4f;
  --niv4-fond: #ddeedd;  --niv4-texte: #2e6e2e;
  --niv5-fond: #cee4ce;  --niv5-texte: #255c25;
  --niv6-fond: #e6efc8;  --niv6-texte: #4f6b12;
  --niv7-fond: #f6efc2;  --niv7-texte: #7a5b0e;
  --niv8-fond: #fae3c2;  --niv8-texte: #8a4b10;
  --niv9-fond: #f9d6c6;  --niv9-texte: #93380f;
  --niv10-fond: #f5cbcb; --niv10-texte: #93242a;
  --mm-inedit: #2a78d6;
  --mm-creneau-fond: #fff8e4;
  --mm-creneau-bord: #e0a800;
  --mm-partenaire-fond: #f4f4f1;
  --mm-inedit-fond: #eef6ff;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    /* Même progression de teintes, transposée pour un fond sombre :
       fond assombri, texte éclairci — le mode sombre reste lisible. */
    --niv1-fond: #1b2a3d;  --niv1-texte: #9cc4ee;
    --niv2-fond: #172c33;  --niv2-texte: #8fc9d8;
    --niv3-fond: #16302a;  --niv3-texte: #85d3b1;
    --niv4-fond: #1b3320;  --niv4-texte: #92d192;
    --niv5-fond: #1d3b22;  --niv5-texte: #7ec47e;
    --niv6-fond: #2a3016;  --niv6-texte: #c3d477;
    --niv7-fond: #332c12;  --niv7-texte: #e0c464;
    --niv8-fond: #34260f;  --niv8-texte: #efb573;
    --niv9-fond: #351f14;  --niv9-texte: #f0a184;
    --niv10-fond: #351718; --niv10-texte: #f09a9e;
    --mm-inedit: #6fa8ec;
    --mm-creneau-fond: #2c2612;
    --mm-creneau-bord: #b8860b;
    --mm-partenaire-fond: #232322;
    --mm-inedit-fond: #16263a;
  }
}
:root[data-theme="dark"] {
  --niv1-fond: #1b2a3d;  --niv1-texte: #9cc4ee;
  --niv2-fond: #172c33;  --niv2-texte: #8fc9d8;
  --niv3-fond: #16302a;  --niv3-texte: #85d3b1;
  --niv4-fond: #1b3320;  --niv4-texte: #92d192;
  --niv5-fond: #1d3b22;  --niv5-texte: #7ec47e;
  --niv6-fond: #2a3016;  --niv6-texte: #c3d477;
  --niv7-fond: #332c12;  --niv7-texte: #e0c464;
  --niv8-fond: #34260f;  --niv8-texte: #efb573;
  --niv9-fond: #351f14;  --niv9-texte: #f0a184;
  --niv10-fond: #351718; --niv10-texte: #f09a9e;
  --mm-inedit: #6fa8ec;
  --mm-creneau-fond: #2c2612;
  --mm-creneau-bord: #b8860b;
  --mm-partenaire-fond: #232322;
  --mm-inedit-fond: #16263a;
}

/* ------------------------------------------------------- barre d'outils */
.mm-toolbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 12px;
}
.mm-recherche {
  flex: 1; min-width: 200px; max-width: 380px; width: auto;
}
.mm-stats { font-size: 12px; color: var(--text-muted); margin-left: auto; }

/* --------------------------------------------------- onglets par jour -- */
.mm-onglets-jours {
  display: flex; gap: 4px; overflow-x: auto; margin-bottom: 16px;
  border-bottom: 1px solid var(--gridline); padding-bottom: 2px;
}
.mm-onglet-jour {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 13px;
  font-weight: 600; padding: 9px 12px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.mm-onglet-jour:hover { color: var(--text-primary); }
.mm-onglet-jour.actif { color: var(--info); border-bottom-color: var(--info); }
.mm-compteur {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-secondary);
}
.mm-onglet-jour.actif .mm-compteur {
  background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info);
}

/* -------------------------------------------------------- créneau libre */
.mm-creneau { margin-bottom: 26px; }
.mm-creneau-tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--mm-creneau-fond);
  border-left: 4px solid var(--mm-creneau-bord); border-radius: 8px;
}
.mm-heure {
  font-size: 17px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.mm-creneau-meta { font-size: 12.5px; color: var(--text-secondary); }
.mm-poche {
  margin-left: auto; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info);
  font-weight: 600;
}
.mm-poche.weekend {
  background: color-mix(in srgb, var(--cat-autre) 18%, transparent);
  color: var(--cat-autre);
}

/* ------------------------------------------------------------- cartes - */
.mm-cartes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px;
}
.mm-carte {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 11px;
}
.mm-carte:hover { border-color: var(--text-muted); }
.mm-carte.faite { opacity: 0.5; }

.mm-j1 {
  display: flex; align-items: flex-start; gap: 11px;
  padding-bottom: 11px; border-bottom: 1px solid var(--gridline);
}
.mm-initiales {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--info); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.mm-info { flex: 1; min-width: 0; }
.mm-nom { margin: 0; font-weight: 600; font-size: 14.5px; }
.mm-contact { margin: 2px 0 0; font-size: 12px; color: var(--text-secondary); word-break: break-word; }
.mm-contact a { color: inherit; text-decoration: none; }
.mm-contact a:hover { color: var(--info); text-decoration: underline; }
.mm-pourquoi { margin: 4px 0 0; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* ------------------------------------------------- badges de niveau --- */
.mm-badge {
  display: inline-block; flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: var(--text-secondary);
}
.mm-badge.niv-1  { background: var(--niv1-fond);  color: var(--niv1-texte); }
.mm-badge.niv-2  { background: var(--niv2-fond);  color: var(--niv2-texte); }
.mm-badge.niv-3  { background: var(--niv3-fond);  color: var(--niv3-texte); }
.mm-badge.niv-4  { background: var(--niv4-fond);  color: var(--niv4-texte); }
.mm-badge.niv-5  { background: var(--niv5-fond);  color: var(--niv5-texte); }
.mm-badge.niv-6  { background: var(--niv6-fond);  color: var(--niv6-texte); }
.mm-badge.niv-7  { background: var(--niv7-fond);  color: var(--niv7-texte); }
.mm-badge.niv-8  { background: var(--niv8-fond);  color: var(--niv8-texte); }
.mm-badge.niv-9  { background: var(--niv9-fond);  color: var(--niv9-texte); }
.mm-badge.niv-10 { background: var(--niv10-fond); color: var(--niv10-texte); }

/* --------------------------------------------------- partenaires ------ */
.mm-partenaires { display: flex; flex-direction: column; gap: 6px; }
.mm-partenaires-titre {
  margin: 0; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.mm-partenaire {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 9px; border-radius: 8px; font-size: 12.5px;
  background: var(--mm-partenaire-fond);
}
/* Binôme inédit = ce qu'on valorise le plus (comme dans l'ancien rendu). */
.mm-partenaire.inedit {
  background: var(--mm-inedit-fond); border-left: 2px solid var(--mm-inedit);
}
.mm-pnom { flex: 1; min-width: 0; }
.mm-etiquette { font-size: 10.5px; color: var(--text-muted); }
.mm-partenaire.inedit .mm-etiquette { color: var(--mm-inedit); font-weight: 600; }
.mm-partenaire.connu .mm-etiquette { font-style: italic; }
.mm-affinite {
  font-size: 10px; padding: 1px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--text-secondary); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}

/* ------------------------------------------- message et actions ------- */
.mm-message summary {
  cursor: pointer; font-size: 12px; color: var(--text-muted); padding: 2px 0;
}
.mm-message summary:hover { color: var(--text-primary); }
.mm-message pre {
  white-space: pre-wrap; font-family: inherit; margin: 6px 0 0;
  background: var(--page); border: 1px solid var(--gridline); border-radius: 8px;
  padding: 10px 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.5;
}
.mm-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 2px;
}
.mm-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px;
  border-radius: 8px; border: 1px solid var(--border); cursor: pointer;
  background: var(--surface-1); color: var(--text-primary);
}
.mm-btn:hover { background: var(--gridline); }
.mm-btn-wa { background: #25d366; border-color: #25d366; color: #05320f; }
.mm-btn-wa:hover { background: #1dae54; border-color: #1dae54; color: #05320f; }
.mm-fait {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.mm-fait input { width: auto; }
.mm-vide {
  background: var(--surface-1); border: 1px dashed var(--gridline); border-radius: 12px;
  padding: 22px; text-align: center; font-size: 13px; color: var(--text-muted);
}

@media (max-width: 640px) {
  .mm-cartes { grid-template-columns: 1fr; }
  .mm-stats { margin-left: 0; }
}

/* ------------------------------- occupation : graphiques et encarts ---- */
.graphe-titre {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 4px;
}
.graphe-svg {
  width: 100%; height: auto; display: block;
  background: var(--page); border: 1px solid var(--gridline); border-radius: 10px;
}
.encart.alerte {
  background: color-mix(in srgb, var(--warning) 14%, var(--page));
  border-color: color-mix(in srgb, var(--warning) 45%, transparent);
  color: var(--text-primary);
}

/* ----------------------------------- accueil : « par où commencer » ---- */
.bloc.demarrage {
  border-left: 3px solid var(--info);
  background: color-mix(in srgb, var(--info) 6%, var(--surface-1));
}
ol.etapes { margin: 8px 0 4px; padding-left: 20px; }
ol.etapes li {
  font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 7px;
}
ol.etapes li strong { color: var(--text-primary); }

/* ---- Onboarding salarié ---- */
.onb-echeance { display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 12px; border:1px solid var(--gridline);
  border-radius:8px; margin-bottom:8px; background:var(--page); }
.onb-echeance .onb-date { font-size:12.5px; color:var(--text-secondary); }
.onb-echeance.onb-fait { opacity:0.6; }
.onb-echeance.onb-en_retard { border-color:var(--warning); }
.onb-texte { border:1px solid var(--gridline); border-radius:8px;
  padding:12px; margin-bottom:10px; background:var(--page); }
.onb-texte-tete { display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:6px; }
.onb-corps { white-space:pre-wrap; font-family:inherit; font-size:13px;
  line-height:1.55; color:var(--text-secondary); margin:8px 0 0;
  max-height:320px; overflow:auto; }

/* ------------------------------------------------------------------
   Rapprochement bancaire (vue #/rapprochement) + petites classes
   utilitaires reprises par les vues recentes. Aucune couleur en dur :
   tout passe par les variables de theme clair/sombre.
   ------------------------------------------------------------------ */

.message-erreur {
  background: color-mix(in srgb, var(--bad) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  color: var(--bad);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0;
}

.encadre-info {
  background: color-mix(in srgb, var(--info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.carte {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.stat-rangee {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.stat-tuile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat-valeur { font-size: 24px; font-weight: 700; }
.stat-libelle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.form-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.champ { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.champ > span { color: var(--text-secondary); }

/* Alias : certaines vues ecrivent « btn-principal », d'autres « btn-primaire ». */
.btn-principal { background: var(--info); border-color: var(--info); color: #fff; }
.btn-principal:hover:not(:disabled) { filter: brightness(1.08); background: var(--info); }

#vue-rapprochement .ligne {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  padding: 3px 0;
}
#vue-rapprochement .ligne .etiquette {
  color: var(--text-muted);
  min-width: 170px;
  flex: none;
}
#vue-rapprochement code {
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12px;
  word-break: break-all;
}
#vue-rapprochement table td { vertical-align: top; }
#vue-rapprochement .bloc h3 .muted { font-weight: 400; }

/* ---- Registre comptable ---- */
.reg-table-wrap { overflow-x:auto; border:1px solid var(--gridline); border-radius:10px; }
.reg-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.reg-table th { text-align:left; padding:9px 8px; background:var(--page);
  border-bottom:1px solid var(--gridline); font-size:11.5px;
  text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted);
  white-space:nowrap; }
.reg-table td { padding:4px 6px; border-bottom:1px solid var(--gridline);
  vertical-align:middle; }
.reg-table tr:hover td { background:var(--page); }
.reg-num { text-align:right; color:var(--text-muted); padding-right:10px !important;
  font-variant-numeric:tabular-nums; }
.reg-input { border:1px solid transparent; background:transparent;
  color:var(--text-primary); font:inherit; padding:4px 6px; border-radius:6px; }
.reg-input:hover { border-color:var(--gridline); }
.reg-input:focus { border-color:var(--info); background:var(--surface-1); outline:none; }
.reg-compteur { display:inline-block; margin-left:6px; padding:1px 6px;
  border-radius:999px; background:var(--gridline); font-size:11px;
  color:var(--text-secondary); }
.reg-legende { display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; }
.reg-leg { display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--text-secondary); }
.reg-pastille { width:11px; height:11px; border-radius:3px; display:inline-block;
  border:1px solid var(--border); }