/* ============================================================================
   SC-Timing App — feuille de style de l'application.
   Vocabulaire des maquettes validées, dérivé du style du site public :
   vert nuit #123f2e · vert #1f8a5b · fond #f4f7f5 · disciplines CSO/DR/CCE.
   ==========================================================================*/

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f4f7f5;color:#1c2a22;font:14px/1.45 'Segoe UI',system-ui,-apple-system,sans-serif}
a{color:#1f8a5b}

/* --- bandeau supérieur --- */
.top{background:#123f2e;color:#fff;display:flex;align-items:center;gap:18px;padding:0 22px;height:54px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:#fff;text-decoration:none}
.mk{background:#1f8a5b;color:#fff;width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.5px}
.nav{display:flex;gap:4px}
.nav a{color:#cfe4d8;text-decoration:none;font-weight:600;font-size:13px;padding:6px 12px;border-radius:8px}
.nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.user{margin-left:auto;display:flex;align-items:center;gap:12px}
.user .who{text-align:right;line-height:1.15;font-size:13px}
.user .who small{display:block;color:#9fc3b1;font-size:11px}
.user form{margin:0}

/* --- page --- */
.page{max-width:1180px;margin:0 auto;padding:20px 22px 60px}
h1{font-size:20px;font-weight:600;color:#123f2e;margin:0 0 4px}
h2{font-size:15px;font-weight:600;color:#123f2e;margin:0 0 8px}
.sous-titre{color:#5f6b64;margin:0 0 16px}
.barre{display:flex;align-items:center;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.barre .droite{margin-left:auto;display:flex;gap:8px}

/* --- cartes / bandeaux --- */
.carte{background:#fff;border:1px solid #e3e9e5;border-radius:12px;padding:14px 16px;margin-bottom:12px}
.bjour{background:#123f2e;color:#fff;padding:8px 16px;border-radius:10px;font-weight:600;font-size:14px;margin:16px 0 8px}
.bpiste{color:#1f8a5b;font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;margin:12px 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* l'ordre des pistes se règle sur leur bandeau (vue_concours.php) */
.bpiste-ordre{display:inline-flex;gap:4px}.bpiste-ordre form{display:inline;margin:0}
.bpiste-ordre .btn{padding:1px 8px;line-height:1.2}
/* « Pas d'engagés » n'est pas un lieu : il ne prend pas la couleur des pistes */
.bpiste-vide{color:#6b7570}.bpiste .aide{text-transform:none;letter-spacing:0;font-weight:400}

/* --- badges --- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 10px;border-radius:8px;border:1px solid #c3e2d3;background:#e8f4ee;color:#1f8a5b;font-weight:600;white-space:nowrap}
.badge-red{background:#fbecec;color:#b23636;border-color:#f0cccc}
.badge-amber{background:#fdf4e4;color:#a06a10;border-color:#ecd9b2}
.badge-grey{background:#eef1ef;color:#5f6b64;border-color:#dde3df}
/* « Prête » : paramétrée, en attente de résultats — ni l'orange d'une épreuve
   en cours, ni le vert d'une épreuve terminée (Avancement::badge) */
.badge-bleu{background:#e9f0f9;color:#2f5f9e;border-color:#c9d8ec}
.disc{display:inline-flex;align-items:center;font-weight:800;font-size:11px;letter-spacing:.5px;color:#fff;border-radius:7px;padding:2px 8px}
.disc-cso{background:#1f8a5b}.disc-dr{background:#7057ae}.disc-cce{background:#b07419}

/* --- boutons / champs --- */
.btn{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 'Segoe UI',system-ui,sans-serif;padding:9px 14px;border-radius:9px;border:1px solid #d5dcd7;background:#fff;color:#28352e;cursor:pointer;text-decoration:none}
.btn:hover{background:#f3f5f4}
.btn-primaire{background:#1f8a5b;border-color:#1f8a5b;color:#fff}
.btn-primaire:hover{background:#1a7a50}
.btn-sombre{background:#123f2e;border-color:#123f2e;color:#fff}
.btn-danger{background:#fbecec;border-color:#f0cccc;color:#b23636}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#cfe4d8}
label{display:block;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#5f6b64;margin:12px 0 4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=file],input[type=number],input[type=search],select{width:100%;font:14px 'Segoe UI',system-ui,sans-serif;padding:9px 12px;border:1.5px solid #d5dcd7;border-radius:9px;background:#fff;color:#1c2a22}
input:focus,select:focus{outline:none;border-color:#1f8a5b;box-shadow:0 0 0 3px rgba(31,138,91,.13)}
.aide{font-size:12px;color:#5f6b64;margin-top:4px}
.erreur-champ{background:#fbecec;border:1px solid #f0cccc;color:#b23636;border-radius:9px;padding:9px 12px;margin:0 0 12px;font-weight:600}
.info-ok{background:#e8f4ee;border:1px solid #c3e2d3;color:#14523a;border-radius:9px;padding:9px 12px;margin:0 0 12px;font-weight:600}

/* --- tableaux --- */
.tablo{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid #e3e9e5;border-radius:12px;overflow:hidden}
.tablo thead th{background:#123f2e;color:#fff;text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.6px;padding:8px 10px}
.tablo td{padding:8px 10px;border-bottom:1px solid #edf1ee;font-variant-numeric:tabular-nums;vertical-align:middle}
.tablo tbody tr:nth-child(even){background:#f7faf8}
.tablo tbody tr:last-child td{border-bottom:none}
.td-num{font-size:16px;font-weight:800;color:#1f8a5b}
.tablo-defile{overflow-x:auto}

/* --- tuiles statistiques --- */
.stats{display:flex;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.stat{flex:1;min-width:150px;background:#fff;border:1px solid #e3e9e5;border-radius:12px;padding:10px 14px}
.stat .v{font-size:22px;font-weight:800;color:#123f2e;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#5f6b64}

/* --- carte centrée (connexion / installation) --- */
.centre{max-width:420px;margin:8vh auto 0}
.centre .logo-grand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:18px;color:#123f2e;font-weight:700;font-size:18px}
.centre .mk{width:40px;height:40px;border-radius:10px;font-size:15px}
.centre .btn{width:100%;justify-content:center;font-size:15px;padding:12px;margin-top:16px}

/* --- badges complémentaires du socle --- */
.badge-exp{background:#f4eded;color:#8d4b4b;border-color:#e2d2d2}   /* abonnement échu : rouge-gris */
.badge-role{background:#eef1ef;color:#28352e;border-color:#dde3df} /* rôle de sous-compte */

/* --- onglets de la vue concours (seul « Épreuves » vit en phase 0) --- */
.onglets{display:inline-flex;gap:3px;background:#e7ede9;border-radius:10px;padding:3px;flex-wrap:wrap}
.onglet{padding:6px 12px;border-radius:8px;font-weight:600;font-size:13px;color:#5f6b64}
.onglet.on{background:#fff;color:#123f2e;box-shadow:0 1px 2px rgba(18,63,46,.12)}
.onglet.off{opacity:.5;cursor:not-allowed}

/* --- boutons compacts de ligne + contrôles désactivés (phase 2) --- */
.btn-petit{padding:4px 10px;font-size:12px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{background:#fff}

/* --- petits formulaires en ligne (tableaux, cartes) --- */
.tablo form{margin:0;display:inline-flex;gap:6px;align-items:center}
.ligne-form{display:inline-flex;gap:6px;align-items:center}
.ligne-form input{width:auto}
.depli summary{cursor:pointer;font-weight:600;color:#1f8a5b;font-size:13px;list-style-position:inside}
.grille2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* formulaires de reglage (horaires de dressage) : des champs COURTS mis
   cote a cote. Un champ par ligne repoussait le tableau des passages a
   2000 px du haut, ce qui rend l'ecran inutilisable au secretariat. */
.grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 18px;align-items:end}
.grille-champs label{margin:8px 0 4px}
.grille-champs input,.grille-champs select{width:100%}
.hr-fin{border:0;border-top:1px solid #edf1ee;margin:6px 0}

@media (max-width:760px){
  .top{height:auto;padding:8px 14px;flex-wrap:wrap}
  .page{padding:14px 14px 50px}
  .stats{flex-direction:column}
  .grille2{grid-template-columns:1fr}
}

/* --- le menu « Impressions » -------------------------------------------- *
 * Bâti sur <details> : il s'ouvre au clavier et fonctionne sans script.
 *
 * LE MENU EST EN FLUX PAR DÉFAUT, ET FLOTTANT SEULEMENT SI LE SCRIPT EST LÀ.
 * J'avais commencé par `position:absolute`, pour que l'ouverture ne pousse pas
 * les lignes suivantes. Mesuré dans le navigateur : le tableau vit dans un
 * `.tablo-defile` en `overflow:auto`, qui ROGNAIT le menu de 85 pixels — la
 * dernière entrée était invisible, et rien ne le disait.
 *
 * Rogné est pire que décalé. Le défaut est donc le menu en flux, qui ne peut
 * pas être coupé et qui marche sans JavaScript ; `assets/app.js` le fait
 * flotter (`position:fixed`, qui échappe au rognage) quand il est chargé. */
.impressions{position:relative;display:inline-block}
.impressions>summary{list-style:none;cursor:pointer;user-select:none}
.impressions>summary::-webkit-details-marker{display:none}
.impressions>summary::after{content:" ▾";font-size:.9em;opacity:.75}
.impressions[open]>summary::after{content:" ▴"}
.impressions-menu{margin-top:4px;min-width:200px;
  background:#fff;border:1px solid #cfd8d2;border-radius:8px;
  box-shadow:0 6px 20px rgba(18,63,46,.16);padding:4px;text-align:left}
/* posé par app.js : le menu flotte au-dessus de tout et échappe au rognage */
.impressions.flottant>.impressions-menu{position:fixed;z-index:60;margin-top:0}
.impressions-menu a{display:block;padding:8px 12px;border-radius:6px;
  color:#123f2e;text-decoration:none;font-size:13px;white-space:nowrap}
.impressions-menu a:hover,.impressions-menu a:focus{background:#eef5f1;outline:none}

/* --- déplacer un couple dans une liste de départ ------------------------- *
 * La poignée porte `touch-action:none` : sans elle, le doigt qui la tire fait
 * DÉFILER LA PAGE au lieu de déplacer la ligne — le geste est perdu avant
 * d'avoir commencé. Le reste du tableau garde son défilement normal. */
.ordre-cel{white-space:nowrap}
/* la cible du doigt, pas celle de la souris : sur tablette une poignée de la
   taille du glyphe se rate une fois sur deux, et rater, ici, c'est faire
   défiler la page au lieu de déplacer le couple */
.poignee{display:inline-block;cursor:grab;touch-action:none;user-select:none;
         color:#9bb0a5;font-size:17px;line-height:1;padding:7px 5px;vertical-align:middle}
.poignee:hover{color:#1f8a5b}
.ordre-tire{background:#e8f5ee !important;box-shadow:0 2px 10px rgba(18,63,46,.18)}
.ordre-tire .poignee{cursor:grabbing;color:#1f8a5b}
/* pendant le geste, plus rien ne se sélectionne : sur tablette, une sélection
   de texte qui démarre sous le doigt fait apparaître la loupe et masque la
   ligne qu'on déplace */
body.ordre-en-cours{user-select:none}

/* --- grille de notes : figures × juges ---------------------------------- *
 * Le C saisit ainsi (ui_notesdlg.c) : une colonne par juge, et l'opérateur
 * descend une colonne entière avant de passer au juge suivant. Chaque case
 * porte la note et, dessous, l'observation de CE juge sur CETTE figure. */
.grille-notes .cel-note{padding:6px}
.grille-notes .cel-note .note{width:100%;text-align:center;font-weight:700;font-size:15px}
/* case qu'aucune règle ne permet de noter (volet croisé d'une reprise double) */
.grille-notes .cel-fermee{background:#f2f4f3;text-align:center}
.grille-notes input.note:focus{outline:2px solid #1f8a5b;outline-offset:-1px}

/* --- jury d'une épreuve de dressage -------------------------------------- *
 * Pastilles des cinq places, reprises de la maquette du logiciel local
 * (ui_dressagedlg.c : pastilles rouges, maquette validée le 12 août 2026). */
.pastille-juge{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:#b3261e;color:#fff;
  font-weight:800;font-size:13px}
.jury-nom::placeholder{color:#b3c0b8;font-style:italic}

/* --- pied de page : la version, discrète mais lisible par tous -------------
   Elle répond en une seconde à « qu'est-ce qui tourne ici ? » — la première
   question quand un défaut est signalé. Marge haute généreuse pour qu'elle ne
   se confonde jamais avec le contenu de la page. */
.pied{max-width:1200px;margin:28px auto 16px;padding:0 22px;
  color:#8a998f;font-size:12px;text-align:right}

/* --- bandeau d'une instance de RECETTE --------------------------------------
   Il doit se voir du premier coup d'œil, de loin, sur un poste de saisie : deux
   onglets identiques un jour de concours, et les résultats partent dans la
   mauvaise fenêtre. */
.bandeau-recette{background:#c47f00;color:#fff;font-weight:700;font-size:13px;
  letter-spacing:.4px;text-align:center;padding:6px 12px}