/* ==========================================================================================================
   Reproductions d'écran de ChronoFEED-MAPPING (WPF, écran tactile au bord de la piste) pour son aide.
   Préfixe « m- », dans une fenêtre « e-fenetre m-fenetre » (ecrans.css) : <figure class="figure-ecran"><div class="ecran">
   <div class="e-zoom"><div class="e-fenetre m-fenetre">…</div></div></div></figure>. Repères : <span class="repere">1</span> dans un
   élément .e-cible, comme les autres reproductions.

   Sources : src/ChronoFeed.Mapping/App.xaml (Fond #F4F6F8, cartes blanches, bordure #DDE3E8, titres #0B5FA5, boutons de 48 px),
   MainWindow.xaml (menu, état de la liaison, grand message, onglets, Réglages), Views/DistributionView.xaml, CoursesView.xaml,
   ChoixCrochetWindow.xaml, PisteView.xaml, EditeurView.xaml ; couleurs des puces : ViewModels/DistributionViewModel.cs (PuceEtat).
   Mesures : celles du XAML × 0,75 (le logiciel est en 16 px, pensé pour le doigt). Les crochets d'un tableau sont dessinés à
   l'échelle --k (1 = la taille du XAML, avant la Viewbox qui ajuste la grille à la fenêtre) : style="--k:.5" sur .m-grille.
   La reproduction reste claire en mode sombre (c'est l'image du logiciel, posée sur la page).
   ========================================================================================================== */
.m-fenetre{--m-fond:#F4F6F8;--m-bord:#DDE3E8;--m-doux:#6B7785;--m-titre:#0B5FA5;--m-accent:#0B5FA5;
  background:var(--m-fond);font-size:12px;color:#000;min-width:0}
.m-fenetre.e-dialogue{display:inline-flex}
.m-fenetre .ic{width:13px;height:13px;vertical-align:-2px}

/* Menu (Fichier, Aide) */
.m-menu{display:flex;gap:2px;padding:2px 3px;background:#fff;font-size:11px;position:relative}
.m-menu > span{padding:2px 7px}
.m-menu > span.ouvert{background:#C0DDEB;outline:1px solid #26A0DA}
.m-menu .e-menu{position:absolute;top:22px;left:58px;z-index:3;min-width:230px}

/* Les cartes (style « Carte ») */
.m-carte{background:#fff;border:1px solid var(--m-bord);border-radius:6px;padding:10px;margin:6px}
.m-titre-carte{font-size:15px;font-weight:600;color:var(--m-titre);margin:0 0 7px}
.m-libelle{display:block;color:var(--m-doux);margin:7px 0 3px}
.m-aide{display:block;color:var(--m-doux);font-size:10.5px;line-height:1.35}

/* Contrôles de WPF (thème Aero2), aux tailles de App.xaml */
.m-bouton{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:36px;padding:5px 13px;margin:0 6px 0 0;
  background:#DDDDDD;border:1px solid #707070;color:#000;font-size:13px;white-space:nowrap;vertical-align:middle}
.m-bouton.principal{background:#0B5FA5;color:#fff;font-weight:600}
.m-bouton.orange{background:#E08A00;color:#fff;font-weight:600}
.m-bouton.admin{background:#FFF3E0;border-color:#E08A00}
.m-bouton.blanc{background:#fff}
.m-bouton.defaut{border:2px solid #3C7FB1;padding:4px 12px}
.m-bouton.inactif{background:#F4F4F4;border-color:#ADB2B5;color:#838383}
.m-bouton.petit{min-height:30px;padding:3px 8px;font-size:12px}
.m-champ{display:flex;align-items:center;min-height:33px;padding:0 5px;background:#fff;border:1px solid #ABADB3;font-size:13.5px;white-space:nowrap;overflow:hidden}
.m-champ.focus{border-color:#569DE5}
.m-champ.mono{font-family:Consolas,"Cascadia Mono",Menlo,monospace}
.m-champ.masque{letter-spacing:2px;font-size:12px}
.m-champ.court{width:90px}
.m-liste{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:33px;min-width:165px;padding:0 6px;
  background:linear-gradient(#F0F0F0,#E5E5E5);border:1px solid #ACACAC;font-size:13px;white-space:nowrap}
.m-liste::after{content:"";width:8px;height:8px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.m-liste.inactif{background:#F4F4F4;border-color:#D9D9D9;color:#838383}
.m-case{display:flex;align-items:flex-start;gap:7px;margin:6px 0;font-size:14.5px;line-height:1.25}
.m-case::before{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:1px;background:#fff;border:1px solid #333}
.m-case.cochee::before{background:#fff no-repeat center/90%
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23333' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.m-radio{display:flex;align-items:center;gap:7px;margin:4px 0;font-size:13px}
.m-radio::before{content:"";width:13px;height:13px;border:1px solid #333;border-radius:50%;background:#fff}
.m-radio.cochee::before{background:radial-gradient(circle,#333 0 3px,#fff 3.5px)}

/* L'état de la liaison (carte du haut) */
.m-etat{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:6px 6px 0}
.m-etat .m-etat-textes{flex:1;min-width:0}
.m-ligne-etat{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.m-ligne-etat + .m-ligne-etat{margin-top:3px;font-size:13px}
.m-point{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--c,#6B7785)}
.m-etat .m-bouton{margin:0 0 0 6px}
/* Le grand message, vert (appliqué) ou rouge (refusé) */
.m-message{margin:6px 6px 0;padding:8px 12px;border-radius:6px;background:#E8F5E9;border:1px solid #81C784;color:#1B5E20;font-size:14px;font-weight:600}
.m-message.refus{background:#FFEBEE;border-color:#E57373;color:#B71C1C}

/* Les onglets (TabControl, thème Aero2) */
.m-onglets{display:flex;align-items:flex-end;margin:6px 6px 0;padding-left:2px}
.m-onglet{padding:7px 16px 6px;margin-right:-1px;background:linear-gradient(#F0F0F0,#E5E5E5);border:1px solid #ACACAC;border-bottom:0;font-size:14px;white-space:nowrap}
.m-onglet.actif{background:#fff;padding:9px 18px 8px;margin:0 -2px -1px;position:relative;z-index:1}
.m-page{margin:0 6px 6px;border:1px solid #ACACAC;background:var(--m-fond);min-height:80px}
.m-page.fondu{-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent);min-height:60px}

/* ---------- Le tableau à crochets (Distribution, choix sur le tableau) : tout à l'échelle --k ---------- */
.m-grille{--k:.5;display:grid;grid-template-columns:repeat(var(--colonnes,11),auto);justify-content:center;align-items:center;padding:4px}
.m-etiq{display:flex;align-items:center;justify-content:center;font-size:calc(var(--k)*30px);font-weight:700;color:#0B5FA5}
.m-crochet{position:relative;display:flex;width:calc(var(--k)*132px);height:calc(var(--k)*116px);margin:calc(var(--k)*5px);
  border:calc(var(--k)*2px) solid rgba(0,0,0,.25);border-radius:calc(var(--k)*12px);background:#fff}
.m-grille.large .m-crochet,.m-grille.large .m-etiq{width:calc(var(--k)*236px)}
.m-grille .m-etiq{min-height:calc(var(--k)*40px)}
.m-crochet::after{content:"";position:absolute;left:50%;top:calc(var(--k)*5px);width:calc(var(--k)*12px);height:calc(var(--k)*12px);margin-left:calc(var(--k)*-6px);
  border-radius:50%;background:rgba(0,0,0,.56);z-index:2}
.m-crochet.double::before{content:"";position:absolute;left:50%;top:calc(var(--k)*18px);bottom:calc(var(--k)*4px);width:calc(var(--k)*2px);margin-left:calc(var(--k)*-1px);
  background:rgba(0,0,0,.5);z-index:2}
.m-crochet.fantome{border-color:#9AA5B1;background:#F4F6F8}
.m-crochet.vide{background:#FAFBFC;border-color:#C9D2DA}
.m-crochet.trou{visibility:hidden}
/* Choix sur le tableau : un crochet disponible (bleu, se touche) */
.m-crochet.choix{border-color:#0B5FA5}
.m-moitie{position:relative;flex:1 1 0;min-width:0}
.m-couleur{position:absolute;inset:calc(var(--k)*1px);border-radius:calc(var(--k)*9px)}
.m-contenu{position:absolute;left:0;right:0;top:50%;transform:translateY(-38%);padding:0 calc(var(--k)*3px);text-align:center}
.m-id,.m-code,.m-qui-nom,.m-qui-course,.m-prochain{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-id{font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-weight:700;font-size:calc(var(--k)*24px);line-height:1.2}
.m-code{font-weight:600;font-size:calc(var(--k)*16px);line-height:1.25}
.m-moitie.fantome .m-couleur{opacity:.38}
.m-moitie.fantome .m-contenu{top:calc(var(--k)*16px);transform:none}
.m-moitie.fantome .m-id{font-size:calc(var(--k)*20px);opacity:.6}
.m-moitie.fantome .m-code{opacity:.7}
.m-qui{position:absolute;left:calc(var(--k)*1px);right:calc(var(--k)*1px);bottom:calc(var(--k)*1px);padding:calc(var(--k)*2px) calc(var(--k)*3px);
  background:rgba(255,255,255,.95);border-radius:0 0 calc(var(--k)*9px) calc(var(--k)*9px);text-align:center}
.m-qui-nom{font-size:calc(var(--k)*14px);font-weight:700;color:#102A43;line-height:1.25}
.m-qui-course{font-size:calc(var(--k)*11px);color:#334E68;line-height:1.3}
.m-qui-course b{font-weight:600}
.m-puce{display:inline-block;width:calc(var(--k)*10px);height:calc(var(--k)*10px);border-radius:50%;margin-right:calc(var(--k)*4px);vertical-align:-.05em;
  background:#fff;border:max(1px,calc(var(--k)*1px)) solid #9E9E9E}
.m-puce.chargee{background:#FFE066;border-color:#C99700} .m-puce.encours{background:#2E9E44;border-color:#1B6E2D}
.m-puce.terminee{background:#1E88E5;border-color:#1565C0} .m-puce.courue{background:#B0BEC5;border-color:#78909C}
.m-statut{position:absolute;right:calc(var(--k)*4px);top:calc(var(--k)*4px);padding:calc(var(--k)*1px) calc(var(--k)*5px);border-radius:calc(var(--k)*4px);
  background:#334E68;color:#fff;font-size:calc(var(--k)*11px);font-weight:700;line-height:1.2;z-index:1;white-space:nowrap}
.m-moitie.a-rendre .m-statut{background:#E08A00}
.m-moitie.a-rendre::after{content:"";position:absolute;inset:0;border:calc(var(--k)*4px) solid #E08A00;border-radius:calc(var(--k)*9px)}
.m-prochain{position:absolute;left:calc(var(--k)*2px);right:calc(var(--k)*2px);bottom:calc(var(--k)*3px);width:max-content;max-width:calc(100% - var(--k)*4px);margin:0 auto;
  padding:0 calc(var(--k)*3px);background:rgba(255,255,255,.9);font-size:calc(var(--k)*11px);line-height:1.3}
/* Choix sur le tableau : le fantôme est plus estompé et ne se choisit pas */
.m-grille.choix .m-moitie.fantome .m-couleur{opacity:.25}
.m-grille.choix .m-moitie.fantome .m-contenu{opacity:.45}
/* Gros plan : une partie du tableau, coupée à droite */
.m-gros-plan{display:inline-block;background:var(--m-fond,#F4F6F8);padding:6px 0 6px 6px;border-radius:6px;
  -webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.m-gros-plan.sans-fondu{-webkit-mask:none;mask:none;padding-right:6px}

/* La bulle d'information (ToolTip de WPF ; ouverte au doigt : 16 px) */
.m-bulle{position:absolute;z-index:5;padding:5px 9px;background:#fff;border:1px solid #767676;box-shadow:2px 3px 6px rgba(0,0,0,.3);
  font-size:12px;line-height:1.4;color:#000;white-space:pre-line;width:max-content;max-width:430px}

/* ---------- Courses (CoursesView.xaml) ---------- */
.m-course{padding:9px 9px 2px}
.m-course.encours{border:3px solid #43A047}
.m-course-tete{display:flex;align-items:center;gap:10px}
.m-course-nom{font-size:18px;font-weight:700}
.m-course-heure{font-size:12px;color:var(--m-doux)}
.m-pastille{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:8px;background:#E3E8ED;font-size:10.5px;font-weight:600}
.m-pastille .m-puce{--k:.9;margin:0}
.m-course.encours .m-pastille{background:#C8E6C9}
.m-doublons{margin-left:auto;font-size:15px;font-weight:700;color:#B25E00;white-space:nowrap}
.m-tuiles{display:flex;flex-wrap:wrap;margin-top:6px}
.m-tuile{min-width:172px;margin:0 8px 8px 0;padding:5px 8px;border:1px solid rgba(0,0,0,.2);border-radius:6px}
.m-tuile-nom{font-size:13.5px;font-weight:600;white-space:nowrap}
.m-tuile-details{font-size:10.5px;opacity:.8}
.m-emplacements{display:flex;margin-top:5px}
.m-emplacement{display:flex;flex-direction:column;justify-content:center;min-height:42px;padding:3px 8px;margin-right:6px;background:#fff;border:1px solid #707070;position:relative}
.m-emplacement.jaune{background:#FFE082} .m-emplacement.rouge{background:#EF9A9A}
.m-emplacement.vide{opacity:.6;align-items:center}
.m-emplacement .m-ligne{display:flex;align-items:center;gap:4px;white-space:nowrap}
.m-emplacement .m-symbole{font-size:12px;font-weight:700}
.m-emplacement .m-ident{font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-size:15px;font-weight:700}
.m-emplacement .m-usuel{margin-left:2px;padding:0 6px;border-radius:7px;background:#263238;color:#fff;font-size:10.5px;font-weight:600}
.m-emplacement .m-crochet-de{font-size:9px;color:#486581}
.m-bouton.tableau{background:#fff;min-height:36px;margin-top:6px;font-size:12px;padding:3px 9px}
.m-icone-grille{display:inline-block;width:13px;height:13px;background:
  linear-gradient(currentColor,currentColor) 0 0/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 4.5px 0/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 9px 0/4px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 0 4.5px/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 4.5px 4.5px/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 9px 4.5px/4px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 0 9px/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 4.5px 9px/4px 4px no-repeat,linear-gradient(currentColor,currentColor) 9px 9px/4px 4px no-repeat}
/* Choisir sur le tableau (ChoixCrochetWindow.xaml) */
.m-choix{padding:9px}
.m-choix-titre{font-size:18px;font-weight:600}
.m-erreur{margin-top:6px;padding:6px 9px;border-radius:6px;background:#FFEBEE;border:1px solid #E57373;color:#B71C1C;font-size:13.5px;font-weight:600}

/* ---------- Athlètes sur la piste (PisteView.xaml) ---------- */
.m-champs{display:grid;grid-template-columns:1fr 1fr auto;gap:0 12px}
.m-athlete{display:flex;align-items:center;gap:9px;margin:0 0 6px;padding:6px 8px;border:1px solid #DDE3E8;border-radius:6px;background:#fff}
.m-athlete.mapping{background:#E3F2FD}
.m-athlete .m-barre-couleur{flex:0 0 auto;width:15px;height:36px;border-radius:3px}
.m-athlete .m-athlete-textes{flex:1;min-width:0}
.m-athlete-tete{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px}
.m-athlete-nom{font-size:15px;font-weight:700}
.m-badge{padding:0 8px;border-radius:7px;color:#fff;font-size:10px;font-weight:700;background:#0B5FA5}
.m-badge.perso{background:#2E7D32} .m-badge.puce{background:#6B7785}
.m-athlete-details{font-size:10.5px;color:var(--m-doux)}
.m-athlete-transpondeurs{font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-size:13px;font-weight:700;margin-top:3px}
.m-athlete-tours{font-size:11.5px;color:#334E68}

/* ---------- L'éditeur des tableaux (EditeurView.xaml) ---------- */
.m-editeur{display:grid;grid-template-columns:255px minmax(0,1fr) 248px;align-items:start}
.m-editeur .m-carte .m-bouton{margin-bottom:6px}
.m-boutons{display:flex;flex-wrap:wrap}
.m-deux{display:grid;grid-template-columns:1fr 1fr;gap:0 5px}
.m-palette{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.m-palette span{width:36px;height:36px;border:1px solid #707070}
.m-palette.petite span{width:30px;height:30px}
.m-ed-barre{display:flex;align-items:center;gap:0;padding:6px 8px 0}
.m-ed-barre .m-aide{margin-left:4px}
.m-ed-message{padding:6px 8px;font-size:12px;color:#334E68}
.m-grille.ed .m-crochet{flex-direction:column;width:calc(var(--k)*96px);height:calc(var(--k)*88px);margin:calc(var(--k)*3px);border-radius:calc(var(--k)*8px)}
.m-grille.ed.large .m-crochet,.m-grille.ed.large .m-etiq{width:calc(var(--k)*156px)}
.m-grille.ed .m-etiq{font-size:calc(var(--k)*22px)}
.m-grille.ed .m-crochet::after,.m-grille.ed .m-crochet::before{display:none}
.m-poignee{flex:0 0 auto;height:calc(var(--k)*14px);background:rgba(0,0,0,.08);border-radius:calc(var(--k)*6px) calc(var(--k)*6px) 0 0;position:relative}
.m-poignee::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--k)*9px);height:calc(var(--k)*9px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.56)}
.m-moities{flex:1;display:flex;min-height:0}
.m-zone{position:relative;flex:1 1 0;min-width:0;margin:calc(var(--k)*1px);border:calc(var(--k)*3px) solid transparent;border-radius:calc(var(--k)*6px);
  display:flex;flex-direction:column;justify-content:center;text-align:center;overflow:hidden}
.m-zone .m-id{font-size:calc(var(--k)*20px)}
.m-zone .m-code{font-size:calc(var(--k)*14px)}
.m-zone.vide{background:#FAFBFC}
.m-zone.choisie{border-color:#F2A900}
.m-zone.glissee{opacity:.35}
.m-zone.echanger{border-color:#0B5FA5}
.m-zone .m-indice{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--k)*22px);font-weight:700;color:#fff;background:rgba(11,95,165,.8)}
.m-zone.deplacer{border-color:#2E9E44;background:#C8E6C9!important}
.m-zone.deplacer .m-indice{background:none;color:#1B6E2D}
.m-crochet.choisi{border-color:#0B5FA5;border-width:calc(var(--k)*5px)}
.m-crochet.cible-echanger{border-color:#0B5FA5;border-width:calc(var(--k)*5px);background:#BBDEFB}
.m-crochet.cible-deplacer{border-color:#2E9E44;border-width:calc(var(--k)*5px)}
.m-curseur{position:absolute;z-index:4;width:18px;height:18px;pointer-events:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.9L4 19z' fill='%23fff' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- Réglages, mot de passe ---------- */
.m-reglages{max-width:575px}
.m-dialogue{padding:15px;font-size:13px;min-width:300px}
.m-dialogue .m-champ{min-height:36px;min-width:270px;margin-top:8px}
.m-dialogue .m-boutons{justify-content:flex-end;margin-top:12px}
/* Un texte qui porte un repère : la place du repère après le dernier mot */
.m-fenetre .m-marge{padding-right:18px}
.m-fenetre .m-bouton{flex:none}
.m-editeur .m-bouton{white-space:normal;text-align:left}