/* ==========================================
   DESIGN GLOBAL ET SECTIONS
   ========================================== */

   body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    margin: 0;
    padding: 20px;
  }
  
hr {
  height: 3px;
  background-color: #333;
  border: none;
  margin: 15px 0;
}

  header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    background-color: #05254a;
    margin: -20px -20px 20px -20px;
    padding: 16px 20px;
  }

  header .menu-container {
    order: -1;
  }

  header h1 {
    margin: 0;
    font-size: 1.6rem;
    color: #ffffff;
    cursor: pointer;
  }

  .langue-switch {
    margin-left: auto;
    display: flex;
    gap: 4px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 3px;
  }

  .lang-btn {
    border: none;
    background: none;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .lang-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .lang-btn.active {
    background-color: #ffffff;
    color: #05254a;
  }

  #admin-appel, #admin-participants {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }
  
  h3, h4 {
    margin-top: 0;
    color: #0f172a;
  }

  .page {
    display: none;
  }

  .page.active {
    display: block;
  }

  .sous-page {
    display: none;
  }

  .sous-page-active {
    display: block;
  }
  
  /* ==========================================
     MENUS DÉROULANTS (header, admin, épreuves)
     ========================================== */

  .menu-container {
    position: relative;
    display: inline-block;
  }

  .menu-deroulant summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
  }

  .menu-deroulant summary::-webkit-details-marker {
    display: none;
  }

  /* Bouton du header : sur fond bleu, il doit rester bien visible */
  .menu-deroulant summary {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  .menu-deroulant summary:hover {
    background-color: rgba(255, 255, 255, 0.35);
  }

  /* ==========================================
     ONGLETS ADMIN (Appel / Participants / Réglages)
     ========================================== */

  .admin-tabs {
    box-sizing: border-box;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background-color: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 16px;
  }

  .admin-tab-btn {
    box-sizing: border-box;
    height: 100%;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
  }

  .admin-tab-btn:hover {
    color: #2563eb;
  }

  .admin-tab-btn.active {
    background-color: #2563eb;
    color: #ffffff;
  }

  .menu-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 6px;
    min-width: 190px;
  }

  .menu-options div,
  .menu-options button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    background: none;
    border: none;
    font-family: inherit;
    padding: 10px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s;
  }

  .menu-options div:hover,
  .menu-options button:hover {
    background-color: #eff6ff;
    color: #2563eb;
  }

  /* ==========================================
     NAVIGATION DES ÉPREUVES (Menu déroulant)
     ========================================== */

  .epreuve-ligne {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
  }

  .epreuve-nav {
    position: relative;
    display: inline-block;
  }

  .epreuve-nav summary {
    box-sizing: border-box;
    height: 38px;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #eff6ff;
    color: #2563eb;
    font-weight: 600;
    padding: 0 16px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
  }

  .epreuve-nav summary::-webkit-details-marker {
    display: none;
  }

  .epreuve-nav summary::after {
    content: "▾";
  }

  .epreuve-nav summary:hover {
    background-color: #dbeafe;
  }

  .epreuve-nav details {
    display: inline-block;
  }

  .epreuve-grid {
    display: grid;
    gap: 6px;
    margin-top: 8px;
  }

  .epreuve-nav div[data-epreuve] {
    padding: 8px 14px;
    background-color: #ffffff;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s;
  }

  .epreuve-nav div[data-epreuve]:hover {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
  }

  .epreuve-nav div.epreuve-active {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
    font-weight: 700;
  }
  
  .epreuves-terrain-public {
    margin: 4px 0 14px;
    padding: 8px 14px;
    background-color: #eff6ff;
    border-left: 4px solid #2563eb;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
  }

  .epreuves-terrain-public strong {
    color: #1d4ed8;
  }

  .epreuve-lien {
    border: 0;
    background: none;
    padding: 2px 6px;
    margin: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 6px;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
  }

  .epreuve-lien.affichee {
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
  }

  .epreuve-lien.affichee strong { color: #ffffff; }

  .epreuves-aide {
    display: block;
    margin-top: 4px;
    font-weight: 400;
    color: #475569;
  }

  .epreuve-apercu { color: #b45309; font-weight: 600; }
  .epreuve-avancee { color: #475569; font-weight: 600; font-size: 0.9em; }

  .epreuve-retour {
    margin-left: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #2563eb;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    cursor: pointer;
  }

  /* ==========================================
     ZONE D'APPEL & COMMANDES
     ========================================== */

  .appel {
    display: flex;
    gap: 16px;
    align-items: center;
    background-color: #eff6ff;
    padding: 16px;
    border-radius: 8px;
    border-left: 5px solid #2563eb;
    margin-bottom: 16px;
    /* Reste visible en haut de l'écran quand on fait défiler la liste. */
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  }
  
  .appel p {
    margin: 0;
    font-size: 1rem;
  }

  .appel strong {
    color: #1d4ed8;
    font-size: 1.1rem;
  }

  .aff-normal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .appel button {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 13px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 6px;
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.35);
  }

  .appel button:hover {
    background-color: #1d4ed8;
  }

  .appel button:active {
    transform: scale(0.97);
  }

  /* ==========================================
     BASCULE MODE MODIFICATION & SENS DE PASSAGE
     ========================================== */

  #modif {
    box-sizing: border-box;
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  #modif:hover {
    background-color: #e2e8f0;
  }

  #modif .modif-icone {
    font-size: 0.85rem;
  }

  #modif.modif-actif {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
  }

  #modif.modif-actif:hover {
    background-color: #fecaca;
  }

  .tableaux-appel {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px;
  }

  /* ==========================================
     TABLEAU D'APPEL & CASES (S, M, I, L)
     ========================================== */
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    border: none !important;
  }
  
  /* La ligne flexible */
  tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 3px solid #64748b;
  }
  
  /* Cellules globales */
  tbody td {
    padding: 0;
    border: none !important;
    vertical-align: middle;
  }
  
  /* En-tête bleu de catégorie (S, M, I, L) */
  .badge-cat {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 2.2rem;
    width: 72px;
    height: 78px;
    border-radius: 6px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    box-sizing: border-box;
  }

  /* Badge de catégorie d'équipe (Appel, épreuve "Équipe") : même famille que .badge-cat
     mais dimensionné pour un nom de plusieurs caractères (ex. "S/M") plutôt qu'une lettre. */
  .badge-equipe {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    font-weight: bold;
    font-size: 1rem;
    min-width: 110px;
    height: 78px;
    padding: 6px 10px;
    border-radius: 6px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-right: 10px;
    box-sizing: border-box;
  }
  
  tbody tr td.td-cat strong {
    background-color: transparent !important;
    color: #ffffff !important;
    padding: 0;
    font-size: 1.2rem;
  }
  
  /* ==========================================
     CARTES PARTICIPANTS
     ========================================== */
  
  .zone-depot-fin {
    min-width: 40px;
    height: 60px;
  }

  .carte-participant {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-left: 4px solid #0284c7;
    border-radius: 6px;
    padding: 4px 8px;
    text-align: center;
    width: 105px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
    position: relative;
  }

  /* Réorganisation par sélection au clic (pas de glisser-déposer tactile, peu fiable
     sur certains Android) : une carte "glissable" se touche pour la prendre, une
     carte "sélectionnée" attend qu'on touche sa destination. */
  .carte-participant.est-glissable {
    cursor: pointer;
  }

  .carte-participant.est-selectionnee {
    outline: 3px solid #2563eb;
    outline-offset: -1px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  }
  
  .carte-participant .dossard {
    font-weight: bold;
    font-size: 1.1rem;
    color: #0284c7;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 4px;
    margin-bottom: 4px;
    user-select: none;
    -webkit-user-select: none;
  }

  .badge-surveille {
    font-size: 0.85rem;
    margin-left: 2px;
  }

  .point-terrain {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ef4444;
    margin-right: 4px;
    vertical-align: middle;
  }

  .notif-liste-chiens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
  }

  .notif-chien-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    padding: 6px 8px 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .notif-chien-badge button {
    background-color: #1d4ed8;
    color: #ffffff;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
  }

  .notif-chien-badge button:hover {
    background-color: #1e40af;
  }
  
  .carte-participant .infos {
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.2;
    overflow-wrap: break-word;
    user-select: none;
    -webkit-user-select: none;
  }
  
  /* État barré */
  .carte-participant.est-barre {
    opacity: 0.35 !important;
    background-color: #e2e8f0 !important;
    border-color: #000000 !important;
  }
  
  .carte-participant.est-barre .dossard,
  .carte-participant.est-barre .infos {
    text-decoration: line-through !important;
    color: #000000 !important;
  }
  
  /* Petit bouton de suppression (mode édition) */
  .btn-suppr {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    line-height: 18px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  }
  
  .btn-suppr:hover {
    background-color: #dc2626;
  }

  /* ◀/▶ : solution de secours pour déplacer une carte d'un cran par simple clic,
     sans dépendre d'un geste tactile (peu fiable selon les téléphones Android).
     En ligne dans la carte (pas en superposition) : cibles plus grandes et faciles à
     viser, et jamais collées aux boutons de la carte voisine. */
  .carte-deplacer-controles {
    display: flex;
    gap: 6px;
    margin-top: 6px;
  }

  .btn-deplacer {
    flex: 1;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }

  .btn-deplacer:hover {
    background-color: #1d4ed8;
  }
  
  /* ==========================================
     FORMULAIRE DE SAISIE (#form-ajouter)
     ========================================== */
  
  #form-ajouter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: center;
  }
  
  #form-ajouter input[type="text"],
  #form-ajouter input[type="number"],
  #form-ajouter select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }
  
  #form-ajouter input[type="submit"] {
    grid-column: 1 / -1;
    background-color: #16a34a;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  #form-ajouter input[type="submit"]:hover {
    background-color: #15803d;
  }

  /* ==========================================
     IMPORT PDF PARTICIPANTS
     ========================================== */

  .bloc-participants,
  .bloc-parametres {
    margin-bottom: 20px;
  }

  .bloc-participants h4,
  .bloc-parametres h4 {
    margin-bottom: 10px;
  }

  .import-aide {
    color: #64748b;
    margin-bottom: 16px;
  }

  .reglage-case {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 480px;
    border-radius: 16px 16px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    animation: glisser-modal 0.25s ease-out;
  }

  @keyframes glisser-modal {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .modal-content h3 {
    margin: 0 0 6px;
  }

  .modal-content > p {
    margin: 0 0 16px;
    color: #64748b;
  }

  .btn-modal-fermer {
    margin-top: 18px;
    width: 100%;
    padding: 12px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .btn-modal-fermer:hover {
    background-color: #1d4ed8;
  }

  .btn-modal-annuler {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .btn-modal-annuler:hover {
    background-color: #e2e8f0;
  }

  .btn-modal-supprimer {
    margin-top: 10px;
    width: 100%;
    padding: 12px;
    background-color: #ffffff;
    color: #b91c1c;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .btn-modal-supprimer:hover {
    background-color: #fee2e2;
  }

  .notif-etapes-ios {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .notif-etapes-ios li {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .notif-etape-icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #eff6ff;
    border-radius: 8px;
  }

  #form-connexion, #form-titre-site, #form-nombre-terrains, #form-reco-config, #form-reglages-equipe, #form-chien-cible {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  #form-connexion input[type="text"],
  #form-connexion input[type="password"],
  #form-titre-site input[type="text"],
  #form-nombre-terrains input[type="number"],
  #form-reco-config input[type="text"],
  #form-reco-config input[type="number"],
  #form-reglages-equipe input[type="text"],
  #form-reglages-equipe input[type="number"],
  #form-chien-cible input[type="number"] {
    flex: 1;
    min-width: 160px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  #form-connexion input[type="submit"],
  #form-titre-site input[type="submit"],
  #form-nombre-terrains input[type="submit"],
  #form-reco-config input[type="submit"],
  #form-reglages-equipe input[type="submit"],
  #form-chien-cible input[type="submit"] {
    background-color: #16a34a;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  #form-connexion input[type="submit"]:hover,
  #form-titre-site input[type="submit"]:hover,
  #form-nombre-terrains input[type="submit"]:hover,
  #form-reco-config input[type="submit"]:hover,
  #form-chien-cible input[type="submit"]:hover,
  #form-reglages-equipe input[type="submit"]:hover {
    background-color: #15803d;
  }

  /* ==========================================
     SÉLECTEUR DE TERRAIN (Appel / Ordre de passage)
     ========================================== */

  .selecteur-terrains {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
  }

  .terrain-btn {
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }

  .terrain-btn:hover {
    color: #2563eb;
  }

  .terrain-btn.active {
    background-color: #2563eb;
    color: #ffffff;
  }

  .btn-suppr-tout {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 8px;
    transition: background-color 0.2s;
  }

  .btn-suppr-tout:hover {
    background-color: #dc2626;
  }

  /* ==========================================
     CONNEXION ADMIN (Firebase Authentication)
     ========================================== */

  #admin-connexion {
    background: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 420px;
  }

  #admin-connexion #form-connexion {
    flex-direction: column;
  }

  .admin-cache {
    display: none;
  }

  .btn-deconnexion.admin-cache {
    display: none;
  }

  .btn-deconnexion {
    background-color: #475569;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    vertical-align: middle;
    margin-left: 12px;
    transition: background-color 0.2s;
  }

  .btn-deconnexion:hover {
    background-color: #334155;
  }

  .import-zone {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .import-fichier {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #eff6ff;
    border: 2px dashed #93c5fd;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    font-weight: 600;
    color: #1d4ed8;
  }

  .import-fichier input[type="file"] {
    display: none;
  }

  #import-texte {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    box-sizing: border-box;
    resize: vertical;
  }

  .import-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .import-actions button {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
  }

  .import-actions button:hover {
    background-color: #1d4ed8;
  }

  .import-actions .btn-import {
    background-color: #16a34a;
  }

  .import-actions .btn-import:hover {
    background-color: #15803d;
  }

  .import-actions .btn-import:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
  }

  .import-statut {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
  }

  .import-apercu {
    margin-top: 20px;
    overflow-x: auto;
  }

  .import-apercu table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .import-apercu th,
  .import-apercu td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
  }

  .import-apercu th {
    background-color: #f1f5f9;
    font-weight: 600;
  }

  .import-apercu tbody tr:nth-child(even) {
    background-color: #f8fafc;
  }

  /* ==========================================
     LISTE DES PARTICIPANTS (édition / suppression)
     ========================================== */

  .liste-participants {
    overflow-x: auto;
  }

  .liste-participants table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .liste-participants table,
  .liste-participants thead,
  .liste-participants tbody,
  .liste-participants tr,
  .liste-participants th,
  .liste-participants td {
    display: revert;
  }

  .liste-participants th,
  .liste-participants td {
    border: 1px solid #e2e8f0;
    padding: 6px 8px;
    text-align: left;
  }

  .liste-participants th {
    background-color: #f1f5f9;
    font-weight: 600;
  }

  .liste-participants tbody tr:nth-child(even) {
    background-color: #f8fafc;
  }

  .liste-participants input,
  .liste-participants select {
    width: 100%;
    min-width: 70px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.9rem;
  }

  .btn-suppr-liste {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
  }

  .btn-suppr-liste:hover {
    background-color: #dc2626;
  }

  /* ==========================================
     ÉPREUVE PAR ÉQUIPE
     ========================================== */

  .carte-equipe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .carte-equipe-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .carte-equipe-entete strong {
    font-size: 1rem;
    color: #1e293b;
  }

  .carte-equipe-entete span {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .carte-equipe-chiens {
    font-size: 0.85rem;
    color: #475569;
  }

  /* ==========================================
     RECONNAISSANCE
     ========================================== */

  .reco-champs-principaux {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .reco-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .reco-champ.champ-espace {
    margin-bottom: 12px;
  }

  .equipe-champ-nom {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .reco-champ label {
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
  }

  .reco-champ select {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  .reco-noms-conteneur {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .reco-noms-conteneur input[type="text"] {
    flex: 1;
    min-width: 140px;
  }

  .aff-reco p {
    margin: 0;
    font-size: 1rem;
  }

  .aff-reco strong {
    color: #b45309;
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
  }

  .reco-a-suivre {
    margin-top: 4px !important;
    font-size: 0.85rem !important;
    color: #92400e;
    opacity: 0.85;
  }

  .reco-controles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
  }

  .reco-bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 999px;
    padding: 4px 6px 4px 4px;
  }

  .reco-bouton button {
    background-color: #f59e0b;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .reco-bouton button:hover {
    background-color: #d97706;
  }

  .reco-bouton .duree-reco {
    width: 56px;
    padding: 6px 8px;
    border: 1px solid #fde68a;
    border-radius: 999px;
    box-sizing: border-box;
    font-size: 0.85rem;
    text-align: center;
  }

  .reco-bouton-actif {
    background-color: #fef3c7;
    border-color: #fbbf24;
    color: #92400e;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 8px 8px 14px;
  }

  .reco-bouton-actif button {
    background-color: #92400e;
  }

  .reco-bouton-actif button:hover {
    background-color: #78350f;
  }

  /* ==========================================
     GESTION DES ÉPREUVES (Admin > Réglages)
     ========================================== */

  .btn-toggle-panel {
    background-color: #475569;
    color: #ffffff;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 8px;
    transition: background-color 0.2s;
  }

  #btn-activer-equipe {
    display: block;
    margin: 0 0 10px;
  }

  .btn-toggle-panel:hover {
    background-color: #334155;
  }

  #epreuves-panel {
    margin-top: 14px;
  }

  .epreuves-liste-edition {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
  }

  .epreuve-edit-ligne {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
    cursor: grab;
    background-color: #ffffff;
  }

  .epreuve-edit-ligne:active {
    cursor: grabbing;
  }

  .epreuve-edit-poignee {
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .epreuve-en-cours {
    display: inline-block;
    margin: 4px 0 0;
    padding: 3px 8px;
    background-color: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .epreuve-edit-terrain {
    flex-shrink: 0;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
  }

  .epreuve-edit-entete {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .epreuve-edit-entete input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.9rem;
  }

  .epreuve-edit-entete button {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
  }

  .epreuve-edit-entete button:hover {
    background-color: #dc2626;
  }

  .epreuve-edit-deplacer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
  }

  .epreuve-edit-entete .epreuve-deplacer-btn {
    width: 26px;
    height: 20px;
    padding: 0;
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
  }

  .epreuve-edit-entete .epreuve-deplacer-btn:hover:not(:disabled) {
    background-color: #e2e8f0;
  }

  .epreuve-edit-entete .epreuve-deplacer-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .epreuve-edit-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .epreuve-edit-resultats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .epreuve-edit-ordre {
    display: inline-flex;
    gap: 2px;
    background-color: #f1f5f9;
    border-radius: 999px;
    padding: 3px;
    flex-shrink: 0;
  }

  .epreuve-ordre-champ {
    width: 5.2em;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
    box-sizing: border-box;
  }

  .epreuve-ordre-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
  }

  .epreuve-ordre-btn:hover {
    color: #2563eb;
  }

  .epreuve-ordre-btn.active {
    background-color: #2563eb;
    color: #ffffff;
  }

  .epreuve-edit-details {
    position: relative;
    flex-shrink: 0;
  }

  .epreuve-edit-details summary {
    list-style: none;
    background-color: #f1f5f9;
    color: #475569;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .epreuve-edit-details summary::-webkit-details-marker {
    display: none;
  }

  .epreuve-edit-cases {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    width: max-content;
    max-width: min(480px, 90vw);
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }

  .epreuve-edit-groupe {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
  }

  .epreuve-edit-groupe span {
    font-weight: 600;
    color: #475569;
  }

  .epreuve-edit-groupe label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  /* ==========================================
     SÉLECTION MANUELLE DE PARTICIPANTS PAR ÉPREUVE
     ========================================== */

  .epreuve-edit-selection {
    position: relative;
    flex-shrink: 0;
  }

  .epreuve-edit-selection summary {
    list-style: none;
    display: inline-block;
    background-color: #eff6ff;
    color: #2563eb;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .epreuve-edit-selection summary::-webkit-details-marker {
    display: none;
  }

  .epreuve-selection-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: 720px;
    max-width: 90vw;
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
  }

  .epreuve-selection-avertissement {
    margin: 0 0 12px;
    padding: 8px 10px;
    font-size: 0.8rem;
    background-color: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 6px;
    color: #065f46;
  }

  .epreuve-selection-souscription {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
  }

  .epreuve-selection-recherche {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .epreuve-selection-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.8rem;
  }

  .epreuve-selection-filtres span {
    font-weight: 600;
    color: #475569;
  }

  .epreuve-selection-filtres label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
  }

  .epreuve-selection-filtres input[type="checkbox"] {
    accent-color: #94a3b8;
  }

  .epreuve-selection-case {
    accent-color: #16a34a;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .epreuve-selection-liste {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: #ffffff;
  }

  .epreuve-selection-ligne {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 0.82rem;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
  }

  .epreuve-selection-ligne:last-child {
    border-bottom: none;
  }

  .epreuve-selection-ligne:hover {
    background-color: #eff6ff;
  }

  /* ==========================================
     RECONNAISSANCE PAR ÉPREUVE
     ========================================== */

  .epreuve-edit-reco {
    position: relative;
    flex-shrink: 0;
  }

  .epreuve-edit-reco summary {
    list-style: none;
    display: inline-block;
    background-color: #fff7ed;
    color: #c2410c;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .epreuve-edit-reco summary::-webkit-details-marker {
    display: none;
  }

  .epreuve-reco-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    width: max-content;
    max-width: 90vw;
    padding: 10px 12px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  }

  .epreuve-reco-defaut {
    margin: 0 0 8px;
    font-size: 0.78rem;
    color: #64748b;
    font-style: italic;
  }

  .epreuve-reco-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
  }

  .epreuve-reco-ligne {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
  }

  .epreuve-reco-nom {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.85rem;
  }

  .epreuve-reco-duree {
    width: 56px;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.85rem;
  }

  .epreuve-reco-ligne button {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
  }

  .epreuve-reco-ligne button:hover {
    background-color: #dc2626;
  }

  .epreuve-reco-ajouter {
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .epreuve-reco-ajouter:hover {
    background-color: #e2e8f0;
  }

  #form-ajouter-epreuve {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
  }

  #form-ajouter-epreuve input[type="text"] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  #form-ajouter-epreuve input[type="submit"] {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  #form-ajouter-epreuve input[type="submit"]:hover {
    background-color: #1d4ed8;
  }

  .btn-enregistrer-epreuves {
    display: block;
    width: 100%;
    background-color: #16a34a;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background-color 0.2s;
  }

  .btn-enregistrer-epreuves:hover {
    background-color: #15803d;
  }

  .btn-notif {
    display: block;
    width: 100%;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    margin: 10px 0;
    transition: background-color 0.2s;
  }

  .btn-notif:hover {
    background-color: #1d4ed8;
  }

  /* ==========================================
     ÉCRANS ÉTROITS (iPhone en PWA, etc.)
     Sur un écran d'iPhone standard (~375-390px de large), les cartes participants à
     105px + le badge de catégorie à 72px ne laissent la place qu'à 2 cartes par
     ligne. On resserre légèrement badge/cartes/espacement pour en tenir 3.
     ========================================== */
  @media (max-width: 480px) {
    .badge-cat {
      width: 54px;
      height: 64px;
      font-size: 1.6rem;
      margin-right: 5px;
    }

    tbody tr {
      gap: 6px;
    }

    /* La carte elle-même remplit toute la largeur de sa cellule (voir
       .td-carte-participant ci-dessous, qui définit cette largeur). */
    .carte-participant {
      width: 100%;
      box-sizing: border-box;
      padding: 4px 5px;
    }

    /* Cellule flexible : garde 3 cartes par ligne mais les étire pour combler
       l'espace restant (plutôt qu'une largeur fixe qui laisse un vide à droite
       sur les iPhone plus larges). */
    .td-carte-participant {
      flex: 1 1 78px;
      max-width: 104px;
    }

    .carte-participant .dossard {
      font-size: 1rem;
    }

    .carte-participant .infos {
      font-size: 0.78rem;
    }
  }
  .pied-page {
    margin-top: 32px;
    padding: 16px 0;
    text-align: center;
    border-top: 1px solid #e2e8f0;
  }

  .pied-page a {
    color: #64748b;
    font-size: 0.85rem;
    text-decoration: underline;
  }

  .form-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 480px;
  }

  .form-contact input[type="text"],
  .form-contact input[type="email"],
  .form-contact textarea {
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    box-sizing: border-box;
    width: 100%;
  }

  .form-contact input[type="submit"] {
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
  }

  /* Alertes "chien cible" : visibles uniquement dans l'application installée (PWA),
     pas sur le site dans le navigateur, sauf si ipac2026/notifSurSite vaut true dans
     Firebase (classe notif-visible-web ajoutée par le JS). */
  @media not all and (display-mode: standalone) {
    .notif-pwa-seulement:not(.notif-visible-web) {
      display: none;
    }
  }


  /* ==========================================
     RÉSULTATS
     ========================================== */

  .resultat-chien-courant {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }

  .resultat-chien-courant label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
  }

  .resultat-chien-courant input {
    width: 100px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .resultat-nom-chien {
    margin: 0;
    font-weight: 700;
    color: #0284c7;
    flex-basis: 100%;
  }

  .resultat-champs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
  }

  .resultat-champs input {
    width: 110px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .resultat-ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }

  .resultat-ligne label {
    min-width: 130px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
  }

  .resultat-ligne input,
  .resultat-ligne select {
    flex: 1;
    max-width: 160px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .btn-plus1 {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
  }

  .btn-plus1:hover {
    background-color: #1d4ed8;
  }

  /* Case "Éliminé" stylée comme les boutons +1 (case cachée + étiquette-bouton) :
     rouge quand cochée, pour bien voir l'état actif en un coup d'œil. */
  .case-bouton-entree {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .case-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 0 18px;
    background-color: #f1f5f9;
    color: #475569;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
  }

  .case-bouton::before {
    content: "☐";
    font-size: 1.1rem;
  }

  .case-bouton-entree:checked + .case-bouton {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
  }

  .case-bouton-entree:checked + .case-bouton::before {
    content: "☑";
  }

  .case-bouton-entree:focus-visible + .case-bouton {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
  }

  .btn-modifier-resultat {
    background-color: #f59e0b;
    color: #ffffff;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
  }

  .btn-modifier-resultat:hover {
    background-color: #d97706;
  }

/* TPS / TPM (Admin > Résultats) */
.parcours-entete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.parcours-entete h4 { margin: 0; }
.parcours-saisie { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.parcours-saisie label { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 600; gap: 2px; }
.parcours-saisie input { width: 90px; padding: 8px; font-size: 1rem; box-sizing: border-box; }
.parcours-saisie select { padding: 8px; font-size: 1rem; }
.parcours-calcul { margin: 8px 0 12px; font-size: 0.9rem; }
.parcours-calcul p { margin: 4px 0; }
.parcours-calcul ul { margin: 4px 0; padding-left: 20px; }
.parcours-note { font-style: italic; font-size: 0.8rem; }

/* ==========================================
   TÉLÉPHONE : en-tête compact + onglets Admin sur plusieurs lignes
   ========================================== */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  height: auto;
  max-width: 100%;
  border-radius: 20px;
}

.admin-tab-btn {
  height: 32px;
}

@media (max-width: 520px) {
  header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    margin: -20px -20px 20px -20px;
  }

  header h1 {
    font-size: 1.15rem;
    flex: 1 1 auto;
    min-width: 0;
  }

  .lang-btn {
    padding: 5px 9px;
    font-size: 0.8rem;
  }

  .btn-deconnexion {
    margin-left: 0;
    padding: 7px 10px;
    font-size: 0.78rem;
  }

  .admin-tab-btn {
    padding: 0 12px;
  }
}

/* Site verrouillé (admin.html) : seul l'écran de connexion de la page Admin est visible */
body.site-verrouille header .menu-container,
body.site-verrouille .page:not(#page-admin) {
  display: none !important;
}

/* Pays affiché sous chaque chien (Réglages > Afficher le pays) */
.carte-participant .pays-carte {
  font-size: 0.7rem;
  color: #64748b;
  line-height: 1.15;
  margin-top: 3px;
  overflow-wrap: anywhere;
  user-select: none;
  -webkit-user-select: none;
}

.carte-participant.est-barre .pays-carte {
  text-decoration: line-through;
}

/* Épreuve Équipe : menu du nom d'équipe à la place du dossard (saisie des résultats) */
.resultat-chien-courant select {
  min-width: 220px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  background: #ffffff;
}

/* ==========================================
   MODE ÉCRAN (TV au bord du terrain) : même thème que le reste de l'appli
   (fond clair, bandeau marine, bleu #2563eb / #0284c7, cartes blanches), en très grand
   ========================================== */
body.mode-ecran {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #f8fafc;
}

body.mode-ecran header,
body.mode-ecran footer.pied-page,
body.mode-ecran #site-protege > footer {
  display: none !important;
}

body.mode-ecran main {
  padding: 0;
  margin: 0;
  max-width: none;
}

#page-ecran {
  display: none;
}

#page-ecran.active {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 1.1vh;
  padding: 0 2vw 1.4vh;
  box-sizing: border-box;
  background-color: #f8fafc;
  color: #1e293b;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Bandeau marine, comme l'en-tête de l'appli */
.ecran-barre {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  background-color: #05254a;
  margin: 0 -2vw;
  padding: 0.9vh 2vw;
}

.ecran-titre {
  font-size: min(4.6vh, 3vw);
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 2vw;
}

#ecran-terrain {
  color: #93c5fd;
  font-size: 0.8em;
}

.ecran-outils {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.ecran-bouton {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.9vh 1.2vw;
  font-size: min(2.2vh, 1.4vw);
  font-weight: 600;
  cursor: pointer;
}

.ecran-bouton:hover { background-color: rgba(255, 255, 255, 0.28); }
.ecran-bouton.actif { background-color: #ffffff; color: #05254a; }

.ecran-haut {
  flex: 0 0 28.5vh;
  display: flex;
  gap: 2vw;
  min-height: 0;
}

.ecran-haut.ecran-haut-court { flex-basis: 14vh; }

.ecran-panneau {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 1.4vh;
  padding: 0.3vh 2vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 1.2vh solid #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Sur le terrain : même bloc bleu clair que « Appel » */
.ecran-terrain-panneau {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.ecran-sas-panneau { flex: 0.75 1 0; }

.ecran-etiquette {
  line-height: 1.05;
  font-size: min(2.8vh, 1.9vw);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #475569;
}

/* Point rouge « sur le terrain », comme dans le tableau de l'appli */
.ecran-terrain-panneau .ecran-etiquette::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background-color: #ef4444;
  margin-right: 0.5em;
  vertical-align: baseline;
}

.ecran-gros-dossard {
  font-size: min(11.5vh, 8vw);
  font-weight: 800;
  line-height: 0.95;
  color: #0284c7;
}

.ecran-terrain-panneau .ecran-gros-dossard { color: #2563eb; }
.ecran-sas-panneau .ecran-gros-dossard { font-size: min(9vh, 6.4vw); }

.ecran-gros-nom {
  font-size: min(5.4vh, 3.8vw);
  font-weight: 700;
  line-height: 1.02;
  color: #1e293b;
  overflow-wrap: anywhere;
}

.ecran-gros-chien {
  font-size: min(4vh, 2.8vw);
  font-weight: 600;
  color: #334155;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.ecran-sas-panneau .ecran-gros-nom { font-size: min(4.6vh, 3.2vw); }
.ecran-sas-panneau .ecran-gros-chien { font-size: min(3.6vh, 2.4vw); }

.ecran-gros-details {
  font-size: min(2.6vh, 1.8vw);
  color: #64748b;
  margin-top: 0.2vh;
}

.ecran-gros-attente {
  font-size: min(9vh, 6vw);
  font-weight: 700;
  color: #94a3b8;
}

.ecran-bandeau {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(6vh, 4vw);
  font-weight: 700;
  color: #2563eb;
  background-color: #eff6ff;
  border-left: 1.2vh solid #2563eb;
  border-radius: 1.4vh;
}

/* Reconnaissance : même ambre que les boutons de reconnaissance de l'appli */
.ecran-reco {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 1.2vh solid #f59e0b;
  border-radius: 1.4vh;
  text-align: center;
}

/* Le bloc du haut a une hauteur fixe : les textes de la reconnaissance se règlent sur la
   hauteur du bloc lui-même (cqh) pour toujours tenir en entier. Les vh/vw servent de
   repli aux navigateurs (vieilles télévisions) qui ne connaissent pas les « container queries ». */
.ecran-reco-titre { font-size: min(4.2vh, 3vw); font-weight: 700; color: #92400e; line-height: 1.1; overflow-wrap: anywhere; }
.ecran-reco-temps { font-size: min(14vh, 12vw); font-weight: 800; line-height: 1; color: #b45309; font-variant-numeric: tabular-nums; }
.ecran-reco-suite { font-size: min(3.2vh, 2.4vw); color: #92400e; font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }

@supports (container-type: size) {
  .ecran-reco { container-type: size; min-height: 0; overflow: hidden; padding: 1cqh 2cqw; box-sizing: border-box; }
  .ecran-reco-titre { font-size: min(13cqh, 5.5cqw); }
  .ecran-reco-temps { font-size: min(44cqh, 24cqw); }
  .ecran-reco-suite { font-size: min(10cqh, 4.2cqw); }
}

.ecran-tableau {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr));
  align-content: start;
  gap: var(--gap, 8px);
}

.ecran-ligne {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--gap, 8px) * 2);
}

/* Pastille de taille : même bleu que celle du tableau de l'appli */
.ecran-badge {
  flex: 0 0 auto;
  width: var(--bw, calc(var(--cw, 90px) * 0.55));
  height: calc(var(--cw, 90px) * var(--ratio, 0.74));
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0284c7;
  border-radius: calc(var(--cw, 90px) * 0.06);
  font-size: calc(var(--cw, 90px) * 0.34);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

.ecran-cartes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 8px);
  flex: 1;
  min-width: 0;
}

/* Carte = carte du tableau de l'appli (fond blanc, liseré bleu à gauche) */
.ecran-carte {
  width: var(--cl, 90px);
  height: calc(var(--cw, 90px) * var(--ratio, 0.74));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: calc(var(--cw, 90px) * 0.04) solid #0284c7;
  border-radius: calc(var(--cw, 90px) * 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  line-height: 1.05;
  padding: 1.5% 0;
}

.ecran-c-dossard { font-size: calc(var(--cw, 90px) * 0.42); font-weight: bold; line-height: 1; color: #0284c7; }
.ecran-c-nom { font-size: calc(var(--cw, 90px) * 0.17); font-weight: 600; color: #334155; padding: 0 4%; overflow-wrap: anywhere; }
.ecran-c-chien { font-size: calc(var(--cw, 90px) * 0.15); color: #475569; padding: 0 4%; overflow-wrap: anywhere; }
.ecran-c-pays { font-size: calc(var(--cw, 90px) * 0.12); color: #64748b; }

.ecran-carte-equipe .ecran-c-nom { font-size: calc(var(--cw, 90px) * 0.22); font-weight: 700; color: #1e293b; }

/* Chien sur le terrain : bleu principal de l'appli, bien visible */
.ecran-carte.est-courant {
  background-color: #2563eb;
  border-color: #1d4ed8;
  box-shadow: 0 0 calc(var(--cw, 90px) * 0.12) rgba(37, 99, 235, 0.55);
}

.ecran-carte.est-courant .ecran-c-dossard,
.ecran-carte.est-courant .ecran-c-nom,
.ecran-carte.est-courant .ecran-c-chien,
.ecran-carte.est-courant .ecran-c-pays { color: #ffffff; }

/* Chien dans le sas : même bleu en contour */
.ecran-carte.est-suivant {
  background-color: #eff6ff;
  border: calc(var(--cw, 90px) * 0.03) solid #2563eb;
  border-left-width: calc(var(--cw, 90px) * 0.04);
}

/* Déjà passé / barré : même rendu que dans l'appli */
.ecran-carte.est-barre {
  opacity: 0.35;
  background-color: #e2e8f0;
}

.ecran-carte.est-barre .ecran-c-dossard,
.ecran-carte.est-barre .ecran-c-nom,
.ecran-carte.est-barre .ecran-c-chien { text-decoration: line-through; }

.ecran-vide-tableau {
  margin: auto;
  font-size: min(8vh, 5vw);
  font-weight: 700;
  color: #94a3b8;
}

.ecran-badge.ecran-badge-equipe { font-size: calc(var(--cw, 90px) * 0.24); padding: 0 4%; box-sizing: border-box; }

@media (orientation: portrait) {
  .ecran-haut { flex-direction: column; flex-basis: 46vh; }
  .ecran-gros-dossard { font-size: min(9vh, 17vw); }
  .ecran-sas-panneau .ecran-gros-dossard { font-size: min(7vh, 13vw); }
}

/* Grille de 4 lignes toujours remplie (épreuve normale) */
.ecran-tableau-grille { position: relative; display: block; }

.ecran-grille {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: var(--gap, 8px);
}

.ecran-grille .ecran-carte { width: auto; height: auto; }

/* Pastille de taille : prend la place d'une carte */
.ecran-badge-case {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0284c7;
  color: #ffffff;
  font-size: calc(var(--cw, 90px) * 0.6);
  font-weight: bold;
  border-radius: calc(var(--cw, 90px) * 0.06);
}

/* ==========================================
   ORDRE DE PASSAGE (Admin > Ordre)
   ========================================== */
.ordre-cat {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #0284c7;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}

.ordre-cat-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ordre-cat-badge {
  background-color: #0284c7;
  color: #ffffff;
  font-weight: bold;
  border-radius: 6px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ordre-btn-inverser {
  margin: 0 0 0 auto !important;
  width: auto !important;
  padding: 6px 12px !important;
}

.ordre-saisie {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.ordre-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ordre-pastille {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e293b;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
}

.ordre-pastille strong { color: #0284c7; }
.ordre-pastille.barre { opacity: 0.5; text-decoration: line-through; }
.ordre-pastille.invalide { background-color: #fee2e2; border-color: #fca5a5; color: #b91c1c; }

.ordre-condense {
  background-color: #f1f5f9;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 0.85rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ordre-tout { margin-top: 10px; }

/* ==========================================
   ÉPREUVE PAR ÉQUIPE : bandeau coloré + cartes collées dessous
   ========================================== */
.td-equipes { padding: 8px; vertical-align: top; }

.equipes-categorie {
  display: inline-block;
  background-color: #0284c7;
  color: #ffffff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 3px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.equipes-blocs { display: flex; flex-wrap: wrap; gap: 10px; }

.bloc-equipe {
  max-width: 100%;
  border: 2px solid var(--eq-fort);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.bloc-equipe-bandeau {
  background-color: var(--eq-fort);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.95rem;
  padding: 4px 10px;
  overflow-wrap: anywhere;
}

.bloc-equipe-cartes { display: flex; }

.bloc-equipe-carte {
  flex: 1 1 0;
  min-width: 68px;
  max-width: 100px;
  box-sizing: border-box;
  padding: 4px 5px;
  text-align: center;
  background-color: var(--eq-clair);
  color: var(--eq-texte);
  border-left: 1px solid #ffffff;
}

.bloc-equipe-carte:first-child { border-left: 0; }

.bloc-equipe-carte .dossard {
  font-weight: bold;
  font-size: 1.05rem;
  color: var(--eq-texte);
  border-bottom: 1px solid var(--eq-fort);
  padding-bottom: 3px;
  margin-bottom: 3px;
}

.bloc-equipe-carte .infos { font-size: 0.8rem; line-height: 1.2; overflow-wrap: anywhere; color: var(--eq-texte); }
.bloc-equipe-carte .pays-carte { font-size: 0.7rem; line-height: 1.15; margin-top: 3px; overflow-wrap: anywhere; color: var(--eq-texte); }
.bloc-equipe-vide { padding: 6px 10px; background-color: var(--eq-clair); color: var(--eq-texte); font-size: 0.8rem; }

/* Mode écran : grille de blocs d'équipes */
.ecran-eq-grille {
  display: grid;
  grid-template-columns: repeat(var(--eq-cols, 1), max-content);
  justify-content: center;
  align-content: start;
  gap: calc(var(--cw, 90px) * 0.12) calc(var(--cw, 90px) * 0.15);
}

.ecran-eq-bloc {
  border: calc(var(--cw, 90px) * 0.025) solid var(--eq-fort);
  border-radius: calc(var(--cw, 90px) * 0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ecran-eq-bandeau {
  height: calc(var(--cw, 90px) * 0.34);
  box-sizing: border-box;
  background-color: var(--eq-fort);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--cw, 90px) * 0.1);
  padding: 0 calc(var(--cw, 90px) * 0.1);
  font-weight: 700;
  line-height: 1;
}

.ecran-eq-nom { font-size: calc(var(--cw, 90px) * 0.19); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-eq-cat { font-size: calc(var(--cw, 90px) * 0.13); opacity: 0.9; flex: 0 0 auto; }

.ecran-eq-cartes { display: flex; }

.ecran-eq-carte {
  width: var(--cw, 90px);
  height: calc(var(--cw, 90px) * var(--eq-hcarte, 1));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--eq-clair);
  border-left: calc(var(--cw, 90px) * 0.015) solid #ffffff;
  line-height: 1.05;
  overflow: hidden;
}

.ecran-eq-carte:first-child { border-left: 0; }
.ecran-eq-carte .ecran-c-dossard { color: var(--eq-texte); }
.ecran-eq-carte .ecran-c-nom,
.ecran-eq-carte .ecran-c-chien,
.ecran-eq-carte .ecran-c-pays { color: var(--eq-texte); }

/* Équipe sur le terrain / dans le sas du mode écran */
.ecran-panneau-equipe {
  background-color: var(--eq-clair);
  border-color: var(--eq-fort);
  border-left-color: var(--eq-fort);
  padding-left: 1.2vw;
  padding-right: 1.2vw;
}

.ecran-panneau-equipe.ecran-terrain-panneau { box-shadow: 0 2px 10px var(--eq-fort); }

.ecran-pe-titre {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1.2vw;
  font-size: min(4.8vh, 3vw);
  font-weight: 800;
  line-height: 1.05;
  color: var(--eq-texte);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ecran-pe-titre span { font-size: 0.55em; font-weight: 700; opacity: 0.75; }

.ecran-pe-chiens { display: flex; justify-content: center; margin-top: 0.4vh; }

.ecran-pe-chien {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 0.3vw;
  line-height: 1.05;
  color: var(--eq-texte);
  border-left: 2px solid var(--eq-fort);
}

.ecran-pe-chien:first-child { border-left: 0; }
.ecran-pe-dossard { font-size: min(7.5vh, 4.4vw); font-weight: 800; line-height: 0.95; }
.ecran-pe-nom { font-size: min(3.2vh, 1.9vw); font-weight: 700; overflow-wrap: anywhere; }
.ecran-pe-nomchien { font-size: min(2.7vh, 1.6vw); font-weight: 600; overflow-wrap: anywhere; }
.ecran-pe-pays { font-size: min(2vh, 1.3vw); opacity: 0.85; }

.ecran-sas-panneau .ecran-pe-titre { font-size: min(3.8vh, 2.4vw); }
.ecran-sas-panneau .ecran-pe-dossard { font-size: min(5.6vh, 3.3vw); }
.ecran-sas-panneau .ecran-pe-nom { font-size: min(2.8vh, 1.7vw); }
.ecran-sas-panneau .ecran-pe-nomchien { font-size: min(2.4vh, 1.45vw); }

/* Appel : équipe passée / équipe sur le terrain */
.bloc-equipe.est-passee { opacity: 0.35; }
.bloc-equipe.est-passee .bloc-equipe-bandeau span { text-decoration: line-through; }
.bloc-equipe.est-courante { box-shadow: 0 0 0 3px #2563eb; }
.bloc-equipe-bandeau { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bloc-equipe-bandeau .btn-suppr { position: static; flex: 0 0 auto; }


/* ==========================================
   BOUTONS CHIEN PRÉCÉDENT / SUIVANT & APPEL FIXE
   ========================================== */

.appel-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.appel-boutons button { margin-top: 6px; }
.appel button.btn-precedent {
  background-color: #ffffff;
  color: #1d4ed8;
  border: 2px solid #2563eb;
  box-shadow: none;
}
.appel button.btn-precedent:hover:not(:disabled) { background-color: #dbeafe; }
.appel button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 520px) {
  .appel { padding: 10px 12px; gap: 10px; }
  .appel p { font-size: 0.92rem; }
  .appel strong { font-size: 1rem; }
  .appel button { padding: 9px 12px; font-size: 0.95rem; }
  .aff-normal { flex: 1; min-width: 0; }
  .appel-boutons { flex-wrap: nowrap; width: 100%; }
  .appel-boutons button { flex: 1 1 0; padding: 9px 4px; font-size: 0.88rem; }
}

/* ==========================================
   COULEURS DES CHIENS (page publique)
   ========================================== */

.carte-cliquable { cursor: pointer; }

.carte-participant.a-couleur {
  background-color: var(--cc-fond);
  border-color: var(--cc);
  border-left: 6px solid var(--cc);
  box-shadow: 0 0 0 2px var(--cc);
}
.carte-participant.a-couleur .dossard { border-bottom-color: var(--cc); }

.bloc-equipe-carte.a-couleur { box-shadow: inset 0 0 0 4px var(--cc); }
.bloc-equipe-carte.a-couleur .dossard::after {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--cc);
  border: 2px solid #ffffff;
  vertical-align: middle;
}

.pastille-couleur {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
  vertical-align: middle;
}

.choix-couleur {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 23, 42, 0.45);
  align-items: flex-end;
  justify-content: center;
}
.choix-couleur-feuille {
  background: #ffffff;
  width: 100%;
  max-width: 460px;
  border-radius: 14px 14px 0 0;
  padding: 18px 18px 22px;
  box-sizing: border-box;
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.25);
}
.choix-couleur-titre { margin: 0 0 14px; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.choix-couleur-pastilles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.choix-couleur-pastille {
  height: 52px;
  border-radius: 12px;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
  cursor: pointer;
}
.choix-couleur-pastille.choisie { box-shadow: 0 0 0 3px #0f172a; }
.choix-couleur-actions { display: flex; gap: 10px; }
.choix-couleur-bouton {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  font-weight: 600;
  cursor: pointer;
}

.notif-reco-ligne {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  background: #f1f5f9;
  border-radius: 8px;
}
.notif-reco-grades { display: flex; flex-wrap: wrap; gap: 8px; }
.notif-reco-grades label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.notif-reco-grades input { width: 18px; height: 18px; }
.notif-reco-ligne small { color: #475569; }


/* ==========================================
   ANNONCE SUR LA PAGE D'ACCUEIL
   ========================================== */

.annonce-public {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fef3c7;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  color: #78350f;
}
.annonce-icone { font-size: 1.4rem; line-height: 1.2; }
.annonce-public-texte { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 600; font-size: 1.05rem; }

.annonce-admin { margin: 12px 0; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 12px; }
.annonce-admin summary { cursor: pointer; font-weight: 700; color: #92400e; }
.annonce-admin textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; resize: vertical; }
.annonce-admin-boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }


/* ==========================================
   BOUTON BIP DE RECONNAISSANCE
   ========================================== */

.reco-bip-ligne { margin: 8px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reco-bip-ligne small { color: #475569; }
.btn-bip-reco { cursor: pointer; }
.reco-bip-ligne .btn-bip-reco {
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid #94a3b8;
  background: #ffffff;
  color: #334155;
  font-weight: 700;
}
.reco-bip-ligne .btn-bip-reco.actif { background: #dcfce7; border-color: #16a34a; color: #166534; }