/* ------------------------------------------------------------------
   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.
   ------------------------------------------------------------------ */
/* ---------------------------------------------------------- la marque -
 * Les deux couleurs de l'ecusson de 1908, relevees dans le fichier du logo
 * lui-meme : le bleu de la nef, le rouge des raquettes. Elles ne changent
 * PAS avec le theme -- ce sont les couleurs du club, pas des couleurs
 * d'interface. Ce qui s'adapte, ce sont les teintes derivees plus bas.
 *
 * Parti pris : le BLEU porte la structure (boutons, liens, filets), le
 * ROUGE reste un accent. Deux aplats satures en pleine page donneraient un
 * air de document administratif -- pas un club de 1908.
 */
:root {
  --marque-bleu:  #214c9c;
  --marque-rouge: #e30613;
}

: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;
  /* Le rouge du club sert aussi d'alerte : une seule famille de rouge dans
     l'interface, plutot que deux qui se ressemblent sans se confondre.
     4,76:1 sur le fond clair -- lisible en texte courant. */
  --bad:            #e30613;
  /* Le bleu du club remplace le bleu generique : 7,9:1 sur fond clair,
     8,1:1 en blanc sur aplat. Boutons, liens et focus en heritent. */
  --info:           #214c9c;
  --cat-rh:         #3d86e0;
  --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;
    /* Sur fond sombre, le bleu et le rouge du club deviennent illisibles
       (2,1:1 et 3,6:1). On monte en clarte en gardant la teinte : 7,0:1
       pour le bleu, 5,7:1 pour le rouge. */
    --bad:            #f2665e;
    --info:           #7ba6ea;
    --cat-rh:         #5a9bf0;
    --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:            #f2665e;
  --info:           #7ba6ea;
  --cat-rh:         #5a9bf0;
  --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); }

/* « Ce qui t'attend » — bandeau en tête du tableau de bord.
   Une ligne = une action, cliquable sur toute sa surface (cible large :
   c'est souvent consulté depuis un téléphone). */
.notif-bloc { border-left: 3px solid var(--warning); }
.notif-groupe { display: flex; flex-direction: column; gap: 2px; }
.notif-ligne {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none; color: inherit;
  border: 1px solid transparent;
}
.notif-ligne:hover {
  background: color-mix(in srgb, var(--text-muted) 8%, transparent);
  border-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
}
.notif-ligne .badge { flex: 0 0 auto; min-width: 104px; justify-content: center; }
.notif-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-texte strong { font-size: 14.5px; line-height: 1.35; }
@media (max-width: 640px) {
  .notif-ligne { flex-direction: column; gap: 6px; }
  .notif-ligne .badge { min-width: 0; }
}

/* Une ligne dont il manque une information indispensable (un joueur sans
   niveau, invisible pour le matchmaking). Signalé, jamais masqué. */
.ligne-a-completer { background: color-mix(in srgb, var(--warning) 9%, transparent); }

/* =====================================================================
   L'ECUSSON DU CLUB
   ---------------------------------------------------------------------
   Ajoute apres coup : l'application etait juste, mais anonyme. Un futur
   membre qui ouvre le formulaire sur la tablette de l'accueil doit voir
   immediatement chez qui il est.

   Deux regles tenues ici :

   1. Le logo n'est jamais pose sur une couleur. Il contient deja du rouge,
      du bleu ET du blanc : sur un aplat, le blanc de la nef disparait.
      Il reste donc sur le fond de page, clair comme sombre.

   2. Le filet bicolore remplace un aplat de couleur. Trois pixels de bleu
      et de rouge suffisent a signer une page ; un bandeau plein aurait
      fait mairie.
   ===================================================================== */

/* Le filet, en tete de page. Le rouge n'occupe qu'un tiers : c'est un
   accent, pas une moitie. */
.filet-marque {
  height: 3px; flex: none;
  background: linear-gradient(to right,
    var(--marque-bleu) 0 68%, var(--marque-rouge) 68% 100%);
}

/* L'ecusson dans la barre du centre de pilotage. Petit, discret : ici on
   travaille, on ne se presente pas. */
.topbar .ecusson { height: 34px; width: auto; flex: none; }
.topbar .marque { flex-direction: row; align-items: center; gap: 11px; }
.topbar .marque .textes { display: flex; flex-direction: column; gap: 2px; }

/* --- L'en-tete du formulaire public --------------------------------- */
/* Celui-la, au contraire, se presente : c'est la premiere image du club
   pour quelqu'un qui ne le connait pas encore. */
.adh-entete { text-align: center; padding: 26px 0 4px; }
.adh-entete img { width: 108px; height: auto; display: block; margin: 0 auto 14px; }
.adh-entete .club {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--marque-bleu); line-height: 1.5;
}
:root[data-theme="dark"] .adh-entete .club,
:root[data-theme="dark"] .adh-num { color: var(--info); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .adh-entete .club,
  :root:where(:not([data-theme="light"])) .adh-num { color: var(--info); }
}
.adh-entete h1 { font-size: 30px; margin: 10px 0 8px; letter-spacing: -0.01em; }
.adh-entete .sous { color: var(--text-secondary); font-size: 14.5px;
                    line-height: 1.55; max-width: 480px; margin: 0 auto; }
.adh-entete .regle {
  width: 76px; height: 2px; margin: 20px auto 0;
  background: linear-gradient(to right,
    var(--marque-bleu) 0 60%, var(--marque-rouge) 60% 100%);
}

/* Le numero de section, en pastille. Il remplace le « 1. » tape a la main :
   sur un formulaire long, c'est ce qui dit ou on en est. */
.adh-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%; flex: none;
  border: 1.5px solid currentColor; color: var(--marque-bleu);
  font-size: 13px; font-weight: 700; margin-right: 10px;
}
.adh-section h2 { display: flex; align-items: center; }

/* L'etoile des champs necessaires, dans le rouge du club plutot qu'en
   noir : elle se repere sans avoir a la chercher. On passe par --bad, qui
   EST le rouge du club en theme clair et sa version eclaircie en sombre --
   le rouge pur tombe a 3,6:1 sur fond noir, trop faible pour un glyphe
   aussi petit. */
.obl { color: var(--bad); font-weight: 700; }

/* Le pied de page du formulaire : on redit qui recoit, et ou. */
.adh-pied {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--gridline);
  text-align: center; font-size: 12.5px; color: var(--text-muted);
  line-height: 1.6;
}

/* L'ecusson sur l'ecran de connexion : c'est le premier ecran de la
   journee pour l'accueil, autant qu'il soit accueillant. */
.ecusson-connexion { width: 62px; height: auto; display: block; margin: 0 auto 14px; }
.boite-connexion { text-align: center; }
.boite-connexion label { text-align: left; }
.boite-connexion input { text-align: left; }

/* --- Le mandat de prélèvement --------------------------------------- */
/* Encadré en tête de fiche, dans le rouge du club : c'est le seul état qui
   bloque tout le reste de la séquence d'accueil. */
.bloc-mandat {
  border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
  border-radius: 10px; padding: 10px 12px; margin: 10px 0;
}
.bloc-mandat-titre { font-size: 13.5px; font-weight: 700; color: var(--bad); }
/* Gelée, pas en retard : la nuance compte. Une échéance en attente du mandat
   ne réclame rien — elle patiente. */
.pastille.pastille-attente {
  border-style: dashed; color: var(--text-muted);
  background: transparent;
}
.pastille.pastille-annule { opacity: 0.45; text-decoration: line-through; }

/* Une personne du foyer, sur l'écran de relecture des demandes. */
.foyer-ligne {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 9px 0; border-top: 1px solid var(--gridline);
  flex-wrap: wrap; font-size: 13.5px;
}
.foyer-ligne:first-of-type { border-top: none; }

/* --- Histogramme horaire de l'usage (vue Activité, manager seulement) --- */
/* Une colonne par heure, empilée par compte. Les colonnes vides restent
   visibles : « personne n'a touché à l'outil à 14h » est une information,
   pas un trou à masquer. */
.histo {
  display: flex; align-items: flex-end; gap: 3px; height: 130px;
  padding: 8px 0 0; border-bottom: 1px solid var(--gridline);
}
.histo-col { flex: 1 1 0; display: flex; flex-direction: column;
             align-items: center; height: 100%; min-width: 0; }
.histo-barre { width: 100%; margin-top: auto; display: flex;
               flex-direction: column; border-radius: 3px 3px 0 0;
               overflow: hidden; min-height: 1px;
               background: var(--gridline); }
.histo-part.lilian { background: var(--marque-bleu); }
.histo-part.equipe { background: color-mix(in srgb, var(--marque-bleu) 40%, var(--surface-1)); }
.histo-etiq { font-size: 10px; color: var(--text-muted); margin-top: 4px;
              height: 12px; white-space: nowrap; }
.pastille-legende { display: inline-block; width: 10px; height: 10px;
                    border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.pastille-legende.lilian { background: var(--marque-bleu); }
.pastille-legende.equipe { background: color-mix(in srgb, var(--marque-bleu) 40%, var(--surface-1));
                           border: 1px solid var(--border); }