/* ==========================================================
   BASE — reset, layout global, textes, badges, formulaires,
   boutons, cartes, listes, messages de statut, responsive,
   popup, readonly. Chargé en premier (les autres fichiers
   comptent sur son ordre pour les overrides de cascade).
   ========================================================== */

/* =========================================================
   RESET / BASE
   ========================================================= */
:root {
    --blue-main: #293a5f;
    --blue-dark: #293a5f;
    /* Seule variante réellement distincte du bleu marine : sert de hover pour
       .primary/.secondary, sinon invisible sur fond --gradient-main identique. */
    --blue-light: #3d5a80;

    /* Couleur plate (plus de dégradé) : --gradient-main/--gradient-soft
       gardent leur nom (utilisés partout via `background: var(--gradient-*)`)
       mais valent désormais toutes les deux #293a5f. */
    --gradient-main: #293a5f;
    --gradient-soft: #293a5f;

    /* Hauteur réelle de #globalTopBar, tenue à jour en JS (app.js) : sert de
       décalage à .sticky-header pour empiler les 2 barres sticky sans qu'elles
       ne se recouvrent. */
    --global-top-bar-height: 0px;

    /* Hauteur réelle de #globalBottomBar (position:fixed), tenue à jour en JS
       (app.js) : sert à calculer le min-height de .card pour qu'il touche le
       bandeau du bas sans passer dessous. */
    --global-bottom-bar-height: 0px;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100vh;
    min-height: 100dvh;
}

body {
    margin: 0;
    padding-top: env(safe-area-inset-top);
    /* + hauteur du bandeau sticky #globalBottomBar, pour que le bas des
       écrans ne se retrouve pas caché derrière (position:fixed). */
    padding-bottom: calc(env(safe-area-inset-bottom) + 40px);
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    color: #1f2937;
    background:
        radial-gradient(circle at top, rgba(202, 167, 92, 0.15), transparent 30%),
        #f4f6f8;
}

/* =========================================================
   LAYOUT GLOBAL
   ========================================================= */

.container {
    max-width: 560px;
    margin: auto;
    padding-top: 14px;
}

.global-top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;

    padding: 8px 0 0;
    /* Bord-à-bord (comme #globalBottomBar), plus de marge de 10px de chaque
       côté qui l'alignait auparavant sur le style "carte" — sur mobile ça
       laissait un liseré vide de chaque côté alors que le bandeau du bas,
       lui, allait jusqu'au bord. */
    margin: -14px 0 0 0;
    border-radius: 0;

    background: var(--gradient-main);
    color: white;

    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
}

.global-top-bar-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Logo + nom du club côte à côte, sur une seule ligne compacte — depuis
   2026-08-20, le logo n'est plus en position:absolute à gauche d'un texte
   centré seul (gardait le bandeau inutilement haut, cf. capture d'écran). */
.global-top-bar-identity-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
}

/* Plus gros que les 18px hérités de .global-top-bar. */
#globalTopBarClub {
    font-size: 23px;
}

.global-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Même largeur que .container (100% sur mobile, plafonné à 560px et
       centré sur desktop) plutôt que bord-à-bord sur toute la fenêtre —
       cohérent avec #globalTopBar qui, lui, vit dans .container. */
    width: 100%;
    max-width: 560px;
    z-index: 1000;

    min-height: 40px;
    padding: 8px 46px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;

    background: var(--gradient-main);
    color: white;

    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.global-bottom-bar-coach {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    opacity: 0.85;
}

.global-bottom-bar-logout,
.global-bottom-bar-home {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;
    padding: 0;

    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.08s ease;
}

.global-bottom-bar-logout {
    right: 10px;
}

.global-bottom-bar-home {
    left: 10px;
    font-size: 16px;
}

.global-bottom-bar-home svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .global-bottom-bar-logout:hover,
    .global-bottom-bar-home:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.global-bottom-bar-logout svg {
    width: 19px;
    height: 19px;
}

.card {
    overflow: visible;
    margin: 0;
    padding: 0 14px;
    padding-bottom: 10px;
    background: white;
    border-radius: 0;
    border: 1px solid #e5e7eb;
    box-shadow: none;

    /* Étend le contenu jusqu'au bandeau du bas au lieu de s'arrêter à la
       hauteur de son propre contenu (fond blanc jusqu'en bas, pas de zone
       grise vide) — n'empêche pas de grandir plus si le contenu est plus
       long que l'écran. */
    min-height: calc(100dvh - var(--global-top-bar-height, 0px) - var(--global-bottom-bar-height, 0px));
}

.hidden {
    display: none !important;
}

.centered {
    text-align: center;
}

.logo-container {
    text-align: center;
    margin-bottom: 10px;
}

.login-header {
    margin: -14px -14px 24px -14px;
    padding: 28px 20px 20px;
    background: var(--gradient-main);
    border-radius: 18px 18px 0 0;
    text-align: center;
}

.login-club-name {
    margin: 0 0 12px;
    color: white;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.logo-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 10px 18px;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    margin-bottom: 14px;
}

.app-logo {
    /*     display: block;
    max-width: 170px;
    height: auto;
    margin: 0 auto 14px; */
    width: 45%;
    max-width: 165px;
    height: auto;
}

.login-header .badge {
    display: inline-block;
}

.login-badge {
    display: inline-block;
    padding: 8px 16px;
    background: #efe2bf;
    color: #293a5f;
    font-size: 14px;
    font-weight: bold;
    border-radius: 999px;
}

.login-card .subtitle {
    margin-top: 0;
}

/* =========================================================
   TEXTES / LIBELLÉS
   ========================================================= */


/* .subtitle {
    margin-top: 40px;
} */

.subtitle,
.muted {
    font-size: 14px;
    line-height: 1.4;
    color: #6b7280;
}

/* Icône de chargement (ex. liste encore vide le temps d'un fetch) — combiner
   avec .muted pour la couleur/taille. */
.spin {
    animation: spin 0.8s linear infinite;
}

/* Spinner de #appLoadingScreen (index.html) : plus grand que la taille
   d'icône par défaut (1em, héritée du texte courant), pour bien marquer un
   écran de chargement à lui seul plutôt qu'un détail dans une liste.
   Sélecteur #appLoadingScreen .app-loading-spinner (pas juste la classe) pour
   battre en spécificité svg.lucide { width:1em; height:1em } plus haut —
   même piège que .admin-mode-icon (cf. commentaire plus bas). */
#appLoadingScreen .app-loading-spinner {
    width: 36px;
    height: 36px;
    color: #293a5f;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.entete-title {
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.sticky-header {
    position: sticky;
    top: var(--global-top-bar-height, 0px);
    z-index: 500;

    background: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sticky-header::after {
    content: "";
    display: block;
    height: 1px;
}

.big-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0 -14px 10px -14px;
    padding: 10px 1px;

    background: var(--gradient-main);
    color: white;
    text-align: center;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.title-row {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* 44px : juste la place de la flèche retour ronde à gauche (30px +
       10px de marge), symétrique des deux côtés pour garder le titre
       vraiment centré — plus besoin de réserver large à droite depuis que
       le nom du coach a été retiré de cette row (vit maintenant dans le
       bandeau du bas, #globalBottomBarCoach). */
    padding: 0 44px;
}

#globalTopBarScreenTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 17px;
}

#globalTopBarScreenTitle svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* Taille par défaut de toute icône Lucide (svg.lucide, classe ajoutée par
   lucide.createIcons()) placée dans du texte courant (titres, boutons,
   pills...) : suit le font-size du conteneur (1em), pas de règle à dupliquer
   à chaque nouvel usage. Les icônes qui vivent hors texte (tuiles home,
   bandeau du bas) gardent leur taille fixe dédiée, plus spécifique donc
   prioritaire sur celle-ci. */
svg.lucide {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    vertical-align: -0.125em;
}


/* Row 2 : retour (à gauche, absolu) + titre (centré) + icône mode admin (à
   droite, absolu). L'ex-row badge (#globalTopBarScreenBadge, catégorie/
   équipe/ADMINISTRATION) a été retirée — le mode admin est maintenant
   indiqué par une icône (même icône que la tuile Admin de la Home) tout à
   droite de cette row (cf. .title-admin-icon, setScreenTopBar() dans
   js/app.js). */
#globalTopBarScreenRow {
    /* #globalTopBar est display:flex/column/align-items:center : sans largeur
       explicite, ce wrapper se réduit à son contenu et se centre comme un
       bloc, ce qui casse le width:100% de .title-row en dessous (il devient
       100% de ce wrapper déjà réduit, pas de la barre entière) — la flèche
       retour se retrouvait collée au titre au lieu du bord gauche réel. */
    width: 100%;

    /* Espace au-dessus/en dessous de cette row, pour la détacher de la row
       club au-dessus et du contenu de l'écran en dessous. En MARGE, pas en
       padding : .title-back-btn (position:absolute, centré à top:50% sur
       toute la boîte y compris le padding) se désaligne du titre (centré par
       flexbox sur la seule content-box, sans le padding) dès que ce padding
       est non nul — la marge, elle, est hors de cette boîte et n'affecte pas
       ce calcul. */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 2px;
    margin-bottom: 10px;
}

.title-stack .title-badge-list {
    margin: 0;
}

.title-back-btn {
    position: absolute;
    top: calc(50% - 3px);
    left: 10px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;

    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    border-radius: 50%;

    cursor: pointer;
    transition: background 0.08s ease;
}

/* Icône mode admin, symétrique de .title-back-btn côté droit — vide (donc
   invisible) tant qu'on n'est pas admin, cf. setScreenTopBar() dans
   js/app.js. */
.title-admin-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    /* <button> (cliquable en mode admin, cf. goAdminHome() dans js/app.js) :
       reset du chrome natif — même traitement que .title-back-btn. */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* Icône Lucide (chevron-left) plutôt que le glyphe texte "←" d'origine —
   cohérent avec le reste de l'app (icônes Lucide partout ailleurs), rendu
   plus net/net que le caractère unicode. Taille alignée sur les autres
   boutons ronds icône-seule du même acabit (cf. .global-bottom-bar-home svg). */
.title-back-btn svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .title-back-btn:hover {
        background: rgba(255, 255, 255, 0.3);
    }
}

.title-main {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.title-badge {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: bold;
    background: #c8d5da;
    color: #293a5f;
    border-radius: 999px;
    border: 2px solid transparent;
    /* Texte tout en majuscules, sans jambage (descender) : avec le
       line-height par défaut du navigateur, l'espace réservé pour un
       jambage reste vide en bas de la ligne et le texte paraît décalé vers
       le haut malgré un padding haut/bas identique — line-height:1 aligne la
       hauteur de ligne sur celle du texte pour un vrai centrage vertical. */
    line-height: 1;
}

.title-badge-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    margin-bottom: 6px;
}

/* Icône mode admin, accolée au titre d'écran (posée par setScreenTopBar()
   sur tous les écrans admin — cf. js/app.js) — remplace l'ancien badge
   "ADMINISTRATION" en pastille, redondant une fois les badges catégorie
   retirés du bandeau. Couleur dédiée (même orange que l'ancien badge) pour
   rester bien visible que le mode admin est actif. */
.admin-mode-icon {
    color: white;
    /* Pas de fill (contrairement à un essai précédent) : "settings" est une
       icône détaillée (dents d'engrenage, trou central) qui devient un bloc
       plein illisible une fois remplie — contour blanc simple + liseré
       autour suffisent à la faire ressortir sur le fond bleu foncé. */
    box-sizing: border-box;
    padding: 6px;
    border: 1.5px solid white;
    border-radius: 50%;
}

/* 30px, comme .title-back-btn (même gabarit des 2 côtés du titre) — sélecteur
   #globalTopBarAdminIcon .admin-mode-icon (pas juste .admin-mode-icon) pour
   battre en spécificité svg.lucide { width:1em; height:1em } plus haut : sans
   ça, ce dernier gagnait (élément+classe > classe seule) et réduisait le
   cercle à ~1px de glyphe visible derrière le padding/bordure. */
#globalTopBarAdminIcon .admin-mode-icon {
    width: 30px;
    height: 30px;
}

/* Ligne d'info locale sous le bandeau global fusionné : le titre du bandeau
   reste stable au niveau de la section (Équipes/Entraînements/Joueurs), cette
   ligne affiche ce qui est spécifique à l'écran/instance courante (une
   séance précise, un écran Stats, une joueuse...). */
.screen-info-line {
    margin: 6px 0;
    padding: 4px 0;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

/* Évite le cumul avec le padding-top du conteneur (.sticky-header ou
   .editor-grid) quand c'est le premier élément affiché. */
.screen-info-line:first-child {
    margin-top: 0;
}

.title-badge-list .title-badge {
    margin-top: 0;
}

/* Partagée par #coachRoleBadge (Home) et le sélecteur de catégorie des
   écrans coach scopés catégorie (Joueurs/Équipes/Entraînements/
   Evaluations/Tests/Stats), cf. renderCategoryBadgesInto() dans
   js/coachs.js — même sélecteur, même endroit visuel qu'sur la Home. */
.coach-category-badges {
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.coach-category-select {
    width: auto;
    max-width: 260px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}

#roleLabel {
    display: none;
}

.small-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: #293a5f;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 14px 14px 0 0;
}

/* Titre de section générique : contrairement à .small-title (bloc plein,
   coins arrondis en haut seulement, pensé pour fusionner visuellement avec
   UNE card juste en dessous), utilisable au-dessus de n'importe quoi — une
   liste de plusieurs cards, un bloc stats, etc. — sans suggérer une connexion
   qui n'existe pas. */
.section-title {
    margin: 14px 0 8px;
    color: #293a5f;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}


.small-title2 {
    display: block;
    margin: -14px -14px 10px -14px;
    /* padding: 16px 10px 16px; */
    padding: 8px 10px;
    background: #293a5f;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

.margintop16 {
    margin-top: 16px;
}

.margintop10 {
    margin-top: 10px;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-search-filter {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 6px;
}

/* =========================================================
   BADGES / PILLS
   ========================================================= */

.badge {
    display: inline-block;
    margin-top: 8px;

    padding: 6px 12px;
    background: #efe2bf;
    color: #293a5f;

    font-size: 13px;
    font-weight: bold;
    border-radius: 999px;

    white-space: nowrap;
}


.pill {
    display: inline-block;
    flex-shrink: 0;
    margin-right: 6px;
    padding: 3px 8px;
    background: #eef2f7;
    color: #293a5f;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    border-radius: 999px;
}

.pill-admin {
    background: orange;
    color: #293a5f;
}

/* Badge catégorie de la liste Créneaux : seul pill de cette liste, texte plus
   grand que le pill générique (11px) pour rester lisible sur cette ligne. */
#listeCreneaux .pill {
    font-size: 14px;
}

.pill-warning {
    background: #f59e0b;
    color: white;
}

.pill-success {
    background: #16a34a;
    color: white;
}

.pill-danger {
    background: #dc2626;
    color: white;
}

/* Statut FFF du joueur (cachet de mutation) dans la liste Joueurs — info
   neutre, à distinguer du pill-warning ambre "numéro non renseigné".
   white-space: normal : certains libellés ("PRATIQUE UNIQUEMENT DANS
   CATEGORIE AGE (…)") sont trop longs pour tenir sans retour sur un
   téléphone. */
.pill-statut {
    background: #e0e7ff;
    color: #3730a3;
    white-space: normal;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    inset: 0;
    background: #dc2626;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.switch-slider::before {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.switch input:checked + .switch-slider {
    background: #16a34a;
}

.switch input:checked + .switch-slider::before {
    transform: translateX(20px);
}

.switch input:disabled + .switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.pill.journee {
    background: #f3e7c3;
    color: #1f3b5c;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 14px;

    position: relative;
    top: -2px;
    /* ajuste -2 / -3 selon ton goût */
}

/* =========================================================
   FORMULAIRES
   ========================================================= */

input,
select,
textarea {
    width: 100%;
    padding: 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    font-size: 14px;
}

input[readonly],
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    background: #f3f4f6;
    /* color: #6b7280; */
    color: #293a5f;
}

.field {
    margin-bottom: 6px;
}

.field-value {
    padding: 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #293a5f;
}

.field-readonly label {
    display: block;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1px;
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-inline label {
    white-space: nowrap;
}

.field.field-inline input {
    width: auto;
    flex: 1;
    min-width: 0;
}

/* Contrairement à l'input recherche (flex:1, prend tout l'espace restant), un
   select doit se limiter à la largeur de son option affichée, pas s'étirer
   sur toute la ligne (cf. .field select { width:100% } sinon). */
.field.field-inline select {
    width: auto;
    flex: none;
}

/* Petit bouton-icône sans fond ni bordure, pour une action secondaire posée
   à côté d'un titre ou d'un compteur. Nommé .legend-toggle-btn jusqu'au
   2026-09-10, alors qu'il ne sert de bouton de légende que sur 2 des 4 écrans
   qui l'utilisent — les 2 autres (entrainement-stats, categorie-stats) s'en
   servent pour basculer le sens de tri. Renommé pour décrire la forme, pas
   un usage particulier. */
.icon-toggle-btn {
    flex: none;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.field input.score-input {
    width: 70px;
    text-align: center;
}

.score-edit-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.score-field {
    margin: 16px 0 28px 0;
}

.score-edit-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.score-edit-team {
    font-size: 16px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
}

.score-edit-sep {
    font-weight: 700;
    color: #6b7280;
}

.option-group {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.option-group-spaced {
    padding-top: 10px;
    padding-bottom: 10px;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    color: #1f2937;
    cursor: pointer;
}

.option-item input[type="radio"],
.option-item input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    border-radius: 0;
    flex: none;
}

.field label {
    /*     display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em; */
    font-weight: 700;
    margin-bottom: 1px;
    color: #293a5f;
}

/* Version plus compacte pour les zones toolbar / grilles */
.toolbar .field,
.top-grid .field,
.editor-grid .field {
    margin-bottom: 2px;
}

/* =========================================================
   CHAMP MOT DE PASSE
   ========================================================= */

.password-field {
    position: relative;
}

.password-field input {
    padding: 14px 50px 14px 14px;
}

.toggle-eye {
    position: absolute;
    top: 50%;
    right: 12px;
    border: none;
    background: transparent;
    color: #1e40af;
    cursor: pointer;
    transform: translateY(-50%);
}

.material-icons {
    font-size: 22px;
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* =========================================================
   BOUTONS
   ========================================================= */

.primary {
    width: 100%;
    padding: 10px;
    background: var(--gradient-main);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

@media (hover: hover) and (pointer: fine) {
    .primary:hover:not(:disabled) {
        background: var(--blue-light);
    }
}

#btnAdminAccess.primary {
    background: linear-gradient(180deg, #f97316, #c2410c);
}

/* Dégradé (pas couleur unie) sur le hover aussi, même raison que
   .tile-stats.primary:hover ci-dessous : évite le flash blanc. */
#btnAdminAccess.primary:hover {
    background: linear-gradient(180deg, #c2410c, #c2410c);
}

/* Tuiles "Stats" de la Home coach (Stats Matchs/Convocations/entraînements) :
   même forme que .primary, couleur distincte pour les repérer d'un coup
   d'œil parmi les tuiles d'action au-dessus (Équipes/Joueurs/Entraînements/
   Evaluations). */
.tile-stats.primary {
    background: linear-gradient(180deg, #0d9488, #115e59);
}

/* Hover en dégradé (mêmes deux teintes inversées), pas en couleur unie : vu
   que .primary anime "background" et que background-image (le dégradé) ne
   s'interpole pas comme background-color, passer à une couleur pleine ici
   ferait clignoter en blanc le temps de la transition (background-color
   repart de transparent pendant que le dégradé disparaît instantanément). */
.tile-stats.primary:hover {
    background: linear-gradient(180deg, #115e59, #115e59);
}

/* Tuile "Evaluations" de la Home coach : couleur distincte des tuiles
   d'action (navy) et des tuiles Stats (teal) au-dessus, même raison que
   .tile-stats.primary. Dégradé aussi au hover, cf. commentaire ci-dessus. */
.tile-evaluations.primary {
    background: linear-gradient(180deg, #4f46e5, #3730a3);
}

.tile-evaluations.primary:hover {
    background: linear-gradient(180deg, #3730a3, #3730a3);
}

.secondary {
    padding: 10px;
    background: var(--gradient-main);
    color: white;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.08s ease;
}

@media (hover: hover) and (pointer: fine) {
    .secondary:hover:not(:disabled) {
        background: var(--blue-light);
    }
}

.btn-edit-icon {
    background: #ffffff;
    color: #293a5f;
    border-color: #25456AFF;
}

@media (hover: hover) and (pointer: fine) {
    .btn-edit-icon:hover {
        background: #e5e7eb;
    }
}

.danger {
    padding: 12px;
    background: #FF4D00;
    color: white;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.cancel {
    width: 100%;
    padding: 10px;
    background: white;
    color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: 14px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.cancel:hover {
    background: #fef2f2;
}

.buttons-1 .danger {
    width: 50%;
    justify-self: center;
}

.floatingButton .danger {
    width: 50%;
    align-self: center;
}

.small-btn {
    padding: 4px 10px !important;
    min-height: 36px !important;
    height: 36px !important;
    line-height: 1.1 !important;
    font-size: 13px !important;
}

/* =========================================================
   BLOCS DE MISE EN PAGE
   ========================================================= */


.buttons-1 {
    display: grid;
    margin-top: 10px;
}

.buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 4px;
    padding: 0 6px;
}

.buttons.single {
    display: flex;
    justify-content: center;
}

.buttons.single .primary,
.buttons.single .success {
    width: 50%;
    margin: 0 auto;
}

button.disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

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

/* Fiche joueur — vue synthétique côté coach (partials/joueurs.html,
   .joueur-card x-show="!isAdmin"). Carte lecture seule sauf les 2 postes. */
.joueur-card {
    margin: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.joueur-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.joueur-card-name {
    font-size: 20px;
    font-weight: 800;
    color: #293a5f;
}

.joueur-card-head .pill {
    flex-shrink: 0;
}

.joueur-card-sub {
    margin-top: -6px;
    color: #6b7280;
    font-size: 13px;
}

.joueur-card-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.joueur-card-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 8px;
}

.joueur-card-key {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.joueur-card-val {
    font-weight: 600;
    color: #293a5f;
}

.joueur-card-postes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.joueur-card-postes select {
    flex: 1 1 120px;
    min-width: 0;
}

.joueur-card-licence-ok {
    color: #16a34a;
    font-weight: 700;
}

.joueur-card-notes {
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.joueur-card-notes-title {
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.joueur-card-notes-input {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 6px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #293a5f;
    font: inherit;
    font-size: 14px;
}

.joueur-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.joueur-card-actions button {
    flex: 1 1 30%;
    min-width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
}

.joueur-card-actions button i {
    width: 16px;
    height: 16px;
}

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

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

.deuxcolonnes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    /* margin-top: 10px; */
}


.toolbar {
    display: grid;
    gap: 4px;
    /*     margin-top: 8px; */
}

.table-like {
    display: grid;
    gap: 4px;
}

.editor-grid {
    display: grid;
    gap: 6px;
    /*margin-top: 8px;*/
}

/* Ajustement des boutons dans certaines zones */
.toolbar .buttons,
.editor-grid .buttons,
.top-grid .buttons {
    margin-top: 2px;
}

/* =========================================================
   CARTES / BLOCS INTERFACES
   ========================================================= */

.box-card {
    overflow: hidden;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: none;
    margin-bottom: 5px;
}

.box-card > .buttons:first-child {
    margin-top: 14px;
}

.box-card-sans-cadre {
    grid-column: 1 / -1;
    overflow: hidden;
    background: white;
    box-shadow: none;
}

.box-card-match-joueur {
    overflow: hidden;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 14px 14px;
    box-shadow: none;
}

.pad10 {
    padding: 10px 10px 0px 10px;
}

.menu-card {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.menu-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 40, 75, 0.08);
}

.menu-title {
    margin: 0 0 8px;
    color: #293a5f;
    font-size: 18px;
    font-weight: bold;
}

/* =========================================================
   CARTES SPÉCIALES : LOGIN / HOME
   ========================================================= */

.login-card {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    border: none;

    /* Annule le padding-top:14px de .container (cf. base.css) : sans ça,
       .login-header (elle-même déjà collée au bord de .login-card via son
       margin négatif) reste décalée du haut réel de l'écran par ce padding
       du conteneur parent. */
    margin-top: -14px;

    /* Contrairement aux écrans de l'app, le formulaire de connexion ne doit
       pas s'étirer jusqu'au bandeau du bas (pas de #globalTopBar/
       #globalBottomBar visibles à ce stade, .card { min-height: ... }
       n'aurait aucun sens ici) — garde sa hauteur naturelle, compacte. */
    min-height: auto;
}

.login-card::before {
    display: none;
}

/* =========================================================
   RÉSUMÉ DASHBOARD
   ========================================================= */

.full-width {
    grid-column: 1 / -1;
}

.summary-item {
    padding: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.summary-label {
    margin-bottom: 6px;
    color: #293a5f;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-value {
    color: #293a5f;
    font-size: 18px;
    font-weight: bold;
}

.summary-label.admin {
    color: #1e90ff;
    /* bleu */
    font-weight: 600;
}

.summary-label.coach {
    color: #2c3e50;
}

/* =========================================================
   LISTES
   ========================================================= */

.list-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.simple-list-row {
    margin-left: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #fff;
}

.list-row.secondary {
    margin-left: auto;
}

.list-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 3px;
}

.list-main.secondary {
    margin-left: auto;
}

.list-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.list-name {
    margin: 3px 0 3px 0;
    color: #293a5f;
    font-size: 15px;
    font-weight: 600;
}

/* 🔵 Admin actif = bleu */
.list-name.admin-active {
    color: #1e90ff;
}

.list-name.inactive {
    color: #FF4D00;
}

.list-row.danger {
    margin-left: auto;
}

/* Tableau compact (divs en grille, pas de <table> natif — déborde/scrolle mal
   sur mobile) pour une liste homogène de paires nom/nombre à scanner d'un
   coup d'œil (comparer des valeurs), plutôt que des .list-row indépendantes
   pensées pour des lignes avec boutons d'action. */
.stats-table {
    margin: 0 14px 10px;
}

.stats-table-header,
.stats-table-row {
    display: grid;
    grid-template-columns: 1fr auto 100px;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
}

.stats-table-header {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
}

.stats-table-row {
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #1f2937;
}

.stats-table-row:last-child {
    border-bottom: none;
}

/* Variante N colonnes égales, centrées (ex. Joué/V/N/D) : le nombre de
   colonnes vient d'un grid-template-columns inline posé sur chaque usage,
   ces classes ne gèrent que le style commun (header vs valeurs). */
.stats-table-cols-header,
.stats-table-cols-row {
    display: grid;
    text-align: center;
    padding: 6px 4px;
}

.stats-table-cols-header {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
}

.icon-victoire {
    color: #16a34a;
}

.icon-nul {
    color: #f59e0b;
}

.icon-defaite {
    color: #dc2626;
}

.stats-vnd-recap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

.stats-vnd-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.stats-table-cols-row {
    font-size: 15px;
    font-weight: 700;
    color: #293a5f;
}

/* Colonne "Matchs" (nombre) : 2e colonne, pas .stats-bar-track (3e, sa
   propre largeur fixe gère déjà son alignement). */
.stats-table-header > div:nth-child(2),
.stats-table-row > div:nth-child(2),
.stats-table-header > div:nth-child(3),
.stats-table-row > div:nth-child(3) {
    text-align: right;
    font-weight: 700;
    color: #293a5f;
}

.player-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: -5px;
    padding-bottom: 3px;
    color: #6b7280;
    font-size: 13px;
}

.player-email {
    color: #666;
    font-size: 13px;
}

/* =========================================================
   MESSAGES DE STATUT
   ========================================================= */

.statut {
    display: none;
    margin-top: 12px;
    padding: 12px;
    font-size: 14px;
    border-radius: 12px;
}

.statut.show {
    display: block;
}

.statut.err {
    background: #fef2f2;
    color: #b91c1c;
}

.statut.ok {
    background: #ecfdf5;
    color: #166534;
}

.statut.info {
    background: #eff6ff;
    color: #1d4ed8;
}

.statut.warn {
    background: #fffbeb;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 8px;
}

.statut.warn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {
    .container {
        max-width: 100%;
        /* Pas de padding horizontal : .card a déjà sa propre marge de 10px
           (inconditionnelle), et #globalTopBar (position:sticky, reste
           soumis au padding de son parent contrairement à #globalBottomBar
           qui est fixed) a besoin d'aller bord-à-bord sur mobile. */
        padding: 14px 0 24px;
    }

    .list-row {
        grid-template-columns: 1fr;
    }


}

@media (max-width: 600px) {
    .chart-wrap {
        height: 260px;
    }

    .team-table,
    .team-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .team-table-head>div,
    .team-row>div {
        padding: 10px 8px;
        font-size: 13px;
    }

    /*     #stepCard .step-title {
        width: calc(100% - 24px);
        font-size: 26px;
    }
 */
    .match-score {
        min-width: 38px;
        height: 40px;
        font-size: 26px;
    }

    .match-score-row {
        gap: 8px;
    }
}

/* =========================================================
   POPUP
   ========================================================= */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    width: 100%;
    max-width: 640px;
    background: #f7f7f7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);

    /* Un modal plus long que l'écran (ex. formulaire "Copier la
       convocation", plusieurs champs) débordait tronqué en haut : .modal le
       centre verticalement (align-items:center) sans jamais le contraindre
       en hauteur, donc l'excédent partait sous le haut de l'écran, hors champ
       de vue et inatteignable. Scroll interne au lieu de déborder — 32px =
       les 16px de padding haut/bas de .modal. */
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
}

/* Mode info d'openConfirm() (pas de callback) : message court, la largeur
   par défaut (pensée pour des confirmations plus longues) est disproportionnée. */
.modal-content-narrow {
    max-width: 340px;
}

/* =========================================================
   READONLY
   ========================================================= */
.readonly-list {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    padding: 10px 14px;
    background: #f3f4f6;
    color: #374151;
    display: flex;
    flex-direction: column;
    gap: 8px;
}