/* ===================================================================
   Habillage "Club Ecole FFB" — charte graphique FFBillard (alignee sur
   ffbillard.com : bleu/rouge/noir, polices Exo 2 + Inter). Tailles de
   texte et de boutons conservees volontairement generseuses : public
   large, majoritairement 60 ans et plus.
   =================================================================== */

:root {
    --ffb-bleu: #1964af;
    --ffb-bleu-clair: #3d85cf;
    --ffb-bleu-fonce: #0d3258;
    --ffb-bleu-tres-fonce: #082542;
    --ffb-noir: #000000;
    --ffb-rouge: #e10a19;
    --ffb-rouge-fonce: #71050d;
    --ffb-gris-fond: #f6f6f6;
    --ffb-gris-bordure: #dfdfdf;
    --ffb-gris-texte: #4a5560;
    --ombre-legere: 0 1px 3px rgba(3, 40, 74, 0.08);
    --ombre-moyenne: 0 2px 8px rgba(3, 40, 74, 0.12);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--ffb-gris-fond);
    color: #1c2733;
}

h1, h2, h3, h4 {
    font-family: 'Exo 2', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 700;
    color: var(--ffb-bleu-fonce);
}

/* ===================== BANDEAU MODE DEBUG ===================== */
/* Affiche uniquement quand mode_debug_actif() est vrai (cf. inc/header.php)
   -- rappel visuel permanent, sur TOUTES les pages, que les emails partent
   en mode debug (redirection vers debug_email_destinataire, cf.
   config/config.php) et que les seuils anti brute-force sont abaisses. */
.ffb-bandeau-debug {
    background: var(--ffb-rouge);
    color: #fff;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 8px 12px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* ===================== EN-TETE ===================== */
.ffb-header {
    background: linear-gradient(135deg, var(--ffb-bleu-fonce) 0%, var(--ffb-bleu) 100%);
    border-bottom: 4px solid var(--ffb-rouge);
    color: #fff;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
}

.ffb-header .ffb-marque {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ffb-header .ffb-logo {
    height: 44px;
    width: auto;
    border-radius: 4px;
    background: #fff;
    padding: 3px;
}

.ffb-header .ffb-titre {
    font-family: 'Exo 2', 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-profil {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 12px;
    border-radius: 999px;
    color: #fff;
    vertical-align: middle;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.badge-profil-admin { background-color: var(--ffb-rouge); }
.badge-profil-club  { background-color: #198754; }
.badge-profil-ligue { background-color: var(--ffb-bleu-clair); }
.badge-profil-ffb   { background-color: #f0ad4e; color: #4a3200; }

.ffb-header .ffb-soustitre {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 2px;
}

.ffb-header a {
    color: #fff;
    text-decoration: none;
}

.ffb-header .btn-deconnexion,
.ffb-header .btn-accueil {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 7px 16px;
    font-size: 0.92rem;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.ffb-header .btn-deconnexion:hover,
.ffb-header .btn-accueil:hover {
    background-color: #fff;
    color: var(--ffb-bleu-fonce);
}

.ffb-header .ffb-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ffb-header .btn-notifications {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    padding: 7px 12px;
    font-size: 1.15rem;
    border-radius: 4px;
    line-height: 1;
}

.ffb-header .btn-notifications:hover {
    background-color: #fff;
}

.ffb-header .btn-notifications .badge-notif {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--ffb-rouge);
    color: #fff;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 3px;
}

/* ===================== CONTENU ===================== */
.ffb-contenu {
    max-width: 960px;
    margin: 28px auto;
    padding: 0 20px 56px;
}

/* Variante large pour les pages a base de grands tableaux (ex: admin/dossiers.php,
   admin/statistiques.php dont le tableau "Repartition par Ligue" a beaucoup de
   colonnes). */
.ffb-contenu--large {
    max-width: 1500px;
}

h1.h4, .h4 {
    border-bottom: 3px solid var(--ffb-bleu);
    padding-bottom: 10px;
    margin-bottom: 20px !important;
}

/* ===================== ENCARTS ===================== */
.ffb-encart {
    background-color: #fff;
    border: 1px solid var(--ffb-gris-bordure);
    border-radius: 6px;
    margin-bottom: 22px;
    box-shadow: var(--ombre-legere);
    overflow: hidden;
}

.ffb-encart-titre {
    background-color: var(--ffb-bleu-fonce);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 13px 20px;
    font-size: 0.95rem;
}

.ffb-encart-corps {
    padding: 22px;
}

/* ===================== BOUTONS ===================== */
.btn-ffb-primaire {
    background-color: var(--ffb-bleu);
    border: 1px solid var(--ffb-bleu);
    color: #fff;
    font-weight: 700;
    padding: 11px 22px;
    font-size: 1rem;
    border-radius: 4px;
    box-shadow: var(--ombre-legere);
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-ffb-primaire:hover {
    background-color: var(--ffb-bleu-fonce);
    color: #fff;
    box-shadow: var(--ombre-moyenne);
}

.btn-ffb-danger {
    background-color: var(--ffb-rouge);
    border: 1px solid var(--ffb-rouge);
    color: #fff;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.btn-ffb-danger:hover {
    background-color: var(--ffb-rouge-fonce);
    color: #fff;
}

.btn-ffb-secondaire {
    background-color: #fff;
    border: 1px solid var(--ffb-bleu);
    color: var(--ffb-bleu);
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-ffb-secondaire:hover {
    background-color: var(--ffb-bleu);
    color: #fff;
}

.btn-ffb-avertissement {
    background-color: #fff;
    border: 1px solid #b45309;
    color: #b45309;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-ffb-avertissement:hover {
    background-color: #b45309;
    color: #fff;
}

/* Bouton de retour / navigation arriere (ex : "<- Mes dossiers",
   "<- Tableau de bord"). Meme gabarit que btn-ffb-primaire (public 60+ ans :
   cible large, texte lisible) mais avec l'habillage secondaire (fond blanc,
   contour bleu) pour ne pas rivaliser visuellement avec l'action principale
   de la page. */
.btn-ffb-retour {
    display: inline-block;
    background-color: #fff;
    border: 1px solid var(--ffb-bleu);
    color: var(--ffb-bleu);
    font-weight: 600;
    padding: 11px 22px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-ffb-retour:hover {
    background-color: var(--ffb-bleu);
    color: #fff;
}

.btn-ffb-copie {
    background-color: #fff;
    border: 1px solid var(--ffb-gris-bordure);
    color: var(--ffb-gris-texte);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 4px;
}

.btn-ffb-copie:hover {
    background-color: var(--ffb-gris-fond);
    border-color: var(--ffb-bleu);
    color: var(--ffb-bleu);
}

/* ===================== BADGES DE STATUT ===================== */
.badge-statut {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 4px;
    letter-spacing: 0.2px;
}

/* ===================== FILTRES STATUT (pilules avec compteur) ===================== */
.filtre-statuts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filtre-statut-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background-color: #fff;
    border: 1px solid var(--ffb-gris-bordure);
    border-left: 4px solid var(--ffb-gris-bordure);
    color: var(--ffb-gris-texte);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 8px 16px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--ombre-legere);
    transition: transform 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

.filtre-statut-pill:hover {
    color: var(--ffb-bleu-fonce);
    box-shadow: var(--ombre-moyenne);
    transform: translateY(-1px);
}

.filtre-statut-compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background-color: var(--ffb-gris-fond);
    color: var(--ffb-gris-texte);
    font-size: 0.8rem;
    font-weight: 700;
}

.filtre-statut-pill.active {
    color: #fff;
    box-shadow: var(--ombre-moyenne);
}

.filtre-statut-pill.active:hover {
    color: #fff;
}

.filtre-statut-pill.active .filtre-statut-compteur {
    background-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.filtre-statut-pill--prioritaire {
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 20px;
    border-width: 2px;
    border-left-width: 7px;
    box-shadow: var(--ombre-moyenne);
}

.filtre-statut-tous { border-left-color: var(--ffb-bleu-fonce); }
.filtre-statut-tous.active { background-color: var(--ffb-bleu-fonce); border-color: var(--ffb-bleu-fonce); }

.filtre-couleur-secondary { border-left-color: #6c757d; }
.filtre-couleur-secondary.active { background-color: #6c757d; border-color: #6c757d; }

.filtre-couleur-info { border-left-color: var(--ffb-bleu-clair); }
.filtre-couleur-info.active { background-color: var(--ffb-bleu-clair); border-color: var(--ffb-bleu-clair); }

.filtre-couleur-danger { border-left-color: var(--ffb-rouge); }
.filtre-couleur-danger.active { background-color: var(--ffb-rouge); border-color: var(--ffb-rouge); }

.filtre-couleur-primary { border-left-color: var(--ffb-bleu); }
.filtre-couleur-primary.active { background-color: var(--ffb-bleu); border-color: var(--ffb-bleu); }

.filtre-couleur-warning { border-left-color: #f0ad4e; }
.filtre-couleur-warning.active { background-color: #f0ad4e; border-color: #f0ad4e; color: #4a3200; }
.filtre-couleur-warning.active:hover { color: #4a3200; }
.filtre-couleur-warning.active .filtre-statut-compteur { color: #4a3200; }

.filtre-couleur-success { border-left-color: #198754; }
.filtre-couleur-success.active { background-color: #198754; border-color: #198754; }

.filtre-couleur-dark { border-left-color: var(--ffb-bleu-tres-fonce); }
.filtre-couleur-dark.active { background-color: var(--ffb-bleu-tres-fonce); border-color: var(--ffb-bleu-tres-fonce); }

/* ===================== FORMULAIRES ===================== */
label {
    font-weight: 600;
    color: var(--ffb-bleu-fonce);
    margin-top: 14px;
    margin-bottom: 4px;
    display: block;
}

.form-check-label {
    color: inherit;
}

.form-control, .form-select {
    border-radius: 4px;
    border: 1px solid var(--ffb-gris-bordure);
    font-size: 1.02rem;
    padding: 10px 12px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ffb-bleu-clair);
    box-shadow: 0 0 0 3px rgba(50, 151, 255, 0.15);
}

/* Menu "Ajouter un créneau" : le libellé le plus long ("Jeunes débutants de
   moins de 21 ans") était coupé avec un simple w-auto (le select pouvait se
   retrouver plus etroit que son contenu dans le conteneur flex). On lui
   donne une largeur minimale confortable, et il repasse en pleine largeur
   sur mobile. */
.select-type-creneau {
    width: auto;
    min-width: 320px;
    max-width: 100%;
    flex: 0 0 auto;
}

@media (max-width: 576px) {
    .select-type-creneau {
        width: 100%;
        min-width: 0;
    }
}

.aide-champ {
    font-size: 0.85rem;
    color: var(--ffb-gris-texte);
    margin-top: 2px;
}

/* ===================== CRENEAUX / ANIMATEURS ===================== */
.bloc-creneau {
    border: 1px solid var(--ffb-gris-bordure);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--ombre-legere);
}

.bloc-creneau-entete {
    background: linear-gradient(90deg, var(--ffb-bleu-fonce) 0%, var(--ffb-bleu) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 20px;
    letter-spacing: 0.2px;
}

.bloc-creneau-corps {
    background: #fff;
    padding: 20px;
}

.bloc-animateur {
    background: #f5f9fe;
    border: 1px solid #d4e4f7;
    border-left: 3px solid var(--ffb-bleu-clair);
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

/* ===================== RAPPEL D'ENCADREMENT (criteres) ===================== */
.encart-criteres {
    background-color: #f4f8fc;
    border: 1px solid #c9ddf2;
    border-left: 4px solid var(--ffb-bleu);
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 18px;
    font-size: 0.95rem;
}

.encart-criteres ul {
    margin-bottom: 0;
    padding-left: 20px;
}

.encart-criteres li {
    margin-bottom: 4px;
}

/* ===================== TABLEAUX ===================== */
.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: var(--ffb-bleu-fonce);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
    border: none;
    padding: 12px 16px;
}

.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    border-color: var(--ffb-gris-bordure);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f7f9fb;
}

.table tbody tr:hover {
    background-color: #eef5fc;
}

/* ---- Tableau "Mes dossiers" (club/index.php), avec ligne "documents" ----
   Alternance geree via des classes explicites plutot que table-striped
   (cf. club/index.php) : la ligne supplementaire de liens documents, sous
   un dossier labellise, ne doit pas decaler l'alternance des dossiers
   suivants. Corrige/ajoute le 05/08/2026 (demande de Cyrille : rendre ce
   tableau plus joli). */
.table tbody tr.ligne-impaire {
    background-color: #f7f9fb;
}

.table tbody tr.ligne-dossier-avec-documents td {
    border-bottom: none;
}

.table tbody tr.ligne-documents-dossier td {
    padding-top: 0;
    padding-bottom: 14px;
    border-top: none;
}

.liens-documents-dossier {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-document {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background-color: #eef5fc;
    border: 1px solid #cfe2f3;
    color: var(--ffb-bleu-fonce);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip-document:hover {
    background-color: var(--ffb-bleu-fonce);
    border-color: var(--ffb-bleu-fonce);
    color: #fff;
    text-decoration: none;
}

/* Badge "document imprime" (cf. sql/32_documents_imprimes.sql) -- meme
   forme que .chip-document mais recoloree en vert pour se distinguer d'un
   coup d'oeil des chips bleues (liens de telechargement individuel). Le
   badge EST le bouton de demarquage (cf. admin-EcoleFFB/dossiers.php et
   assets/js/demarquer-impression.js) -- le survol passe en orange (meme
   teinte que .btn-ffb-avertissement) pour signaler l'action "annuler". */
.chip-document--imprime {
    background-color: #eafaf1;
    border-color: #b7e4c7;
    color: #1e7145;
    cursor: pointer;
}

.chip-document--imprime:hover {
    background-color: #b45309;
    border-color: #b45309;
    color: #fff;
}

/* Regroupe les badges "imprime", sur la meme ligne que les chips d'acces
   aux documents (.liens-documents-dossier est deja un flex container) mais
   pousses a droite via margin-left: auto -- demande de Cyrille
   (21/09/2026, revu le meme jour : sur la meme ligne plutot qu'en dessous). */
.liens-documents-imprimes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.barre-outils-tableau {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    background-color: #fafbfc;
    border-bottom: 1px solid var(--ffb-gris-bordure);
}

/* ===================== ALERTES ===================== */
.alert {
    border-radius: 6px;
    border-width: 1px;
}

/* ===================== CONFIDENTIALITE ===================== */
.alerte-confidentialite {
    background-color: #fff3cd;
    border: 1px solid var(--ffb-rouge);
    color: #842029;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* ===================== HISTORIQUE ===================== */
.ligne-historique {
    border-left: 3px solid var(--ffb-gris-bordure);
    padding-left: 14px;
    margin-bottom: 14px;
}

.ligne-historique .date-historique {
    color: var(--ffb-bleu);
    font-weight: 700;
}

/* ===================== HERO DOSSIER ===================== */
.dossier-hero {
    background: linear-gradient(135deg, var(--ffb-bleu-tres-fonce) 0%, var(--ffb-bleu-fonce) 55%, var(--ffb-bleu) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 22px 28px 20px;
    margin-bottom: 22px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: 0 4px 18px rgba(3, 40, 74, 0.25);
}

.dossier-hero-retour {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 9px 18px;
    font-size: 0.95rem;
    border-radius: 4px;
    margin-bottom: 14px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dossier-hero-retour:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: #fff;
    color: #fff;
}

.dossier-hero-titre {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 5px 0;
    border: none;
    padding: 0;
    line-height: 1.2;
}

.dossier-hero-saison {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.92rem;
}

.dossier-hero-badge {
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    flex-shrink: 0;
    margin-top: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.2px;
}

/* ===================== ONGLETS ===================== */
.ffb-nav-tabs {
    border-bottom: none;
    gap: 3px;
    margin-bottom: 0;
}

.ffb-nav-tabs .nav-item {
    margin-bottom: 0;
}

.ffb-nav-tabs .nav-link {
    color: var(--ffb-bleu-fonce);
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid var(--ffb-gris-bordure);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 13px 26px;
    background-color: #dde6f0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ffb-nav-tabs .nav-link:hover:not(.active) {
    background-color: #c8d7e8;
    color: var(--ffb-bleu-fonce);
}

.ffb-nav-tabs .nav-link.active {
    background-color: #fff;
    color: var(--ffb-bleu);
    border-color: var(--ffb-gris-bordure);
    border-bottom-color: #fff;
    position: relative;
    z-index: 1;
}

.ffb-tab-content {
    background: #fff;
    border: 1px solid var(--ffb-gris-bordure);
    border-radius: 0 8px 8px 8px;
    padding: 30px;
    margin-bottom: 22px;
    box-shadow: var(--ombre-legere);
}

/* ===================== SECTIONS FORMULAIRE (cartes) ===================== */
.form-section-card {
    background: #f5f9fe;
    border: 1px solid #d4e4f7;
    border-left: 4px solid var(--ffb-bleu);
    border-radius: 6px;
    padding: 18px 20px 6px;
    margin-top: 20px;
}

.form-section-card:first-of-type {
    margin-top: 0;
}

.form-section-titre {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ffb-bleu);
    margin: 0 0 4px 0;
}

/* ===================== BLOC SOUMISSION ===================== */
.bloc-soumission {
    background: linear-gradient(135deg, var(--ffb-bleu-fonce) 0%, var(--ffb-bleu) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 30px 32px;
    margin-bottom: 22px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(3, 40, 74, 0.2);
}

.bloc-soumission p {
    font-size: 1.05rem;
    margin-bottom: 18px;
    opacity: 0.95;
}

.bloc-soumission .btn-soumettre {
    background-color: #fff;
    color: var(--ffb-bleu-fonce);
    border: 2px solid #fff;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 12px 36px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.bloc-soumission .btn-soumettre:hover {
    background-color: var(--ffb-gris-fond);
    transform: translateY(-1px);
}

.bloc-soumission .btn-soumettre:disabled {
    background-color: var(--ffb-gris-fond);
    color: var(--ffb-gris-texte);
    border-color: var(--ffb-gris-fond);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

/* Message "dossier incomplet" juste au-dessus du bloc de soumission : sur
   fond clair (pas sur le degrade bleu fonce de .bloc-soumission, ou le
   rouge devient illisible -- cf. retour Cyrille du 03/08/2026). */
.alert-blocage-soumission {
    margin-bottom: 16px;
}

/* ===================== ALERTE FLASH ===================== */
.alert-flash {
    border-left: 4px solid #198754;
}

/* ===================== FOOTER ===================== */
footer.ffb-footer {
    text-align: center;
    background: linear-gradient(135deg, var(--ffb-bleu-fonce) 0%, var(--ffb-bleu) 100%);
    color: #fff;
    font-size: 0.85rem;
    padding: 24px 20px;
    border-top: 4px solid var(--ffb-rouge);
    margin-top: 40px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 600px) {
    body { font-size: 17px; }

    /* Bandeau d'en-tete compact en mobile portrait (demande de Cyrille,
       18/09/2026 -- le bandeau normal, empile en colonne, prenait toute la
       hauteur visible sur iPhone avant meme d'arriver au contenu de la
       page). On repasse en ligne (logo + badge de role a gauche, cloche +
       deconnexion a droite) et on masque le nom complet de l'appli : le
       logo + le badge de role (ex: "Administrateur") suffisent a se
       reperer, sans repeter "Label Club Ecole FFB" sur chaque page. */
    .ffb-header {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
    }
    .ffb-header .ffb-marque { gap: 8px; min-width: 0; }
    .ffb-header .ffb-logo { height: 28px; padding: 2px; }
    .ffb-header .ffb-titre { font-size: 0.95rem; gap: 6px; flex-wrap: nowrap; }
    .ffb-header .ffb-titre-texte { display: none; }
    .ffb-header .badge-profil { font-size: 0.66rem; padding: 3px 9px; }
    .ffb-header .ffb-soustitre { font-size: 0.78rem; margin-top: 0; opacity: 0.8; }
    .ffb-header .ffb-header-actions { gap: 6px; flex-shrink: 0; }
    .ffb-header .btn-deconnexion,
    .ffb-header .btn-accueil { padding: 6px 10px; font-size: 0.8rem; }
    .ffb-header .btn-notifications { padding: 6px 9px; font-size: 1rem; }
    .ffb-bandeau-debug { padding: 5px 10px; font-size: 0.8rem; }

    .ffb-contenu { padding: 0 14px 40px; }
    .ffb-encart-corps { padding: 16px; }
    .barre-outils-tableau { justify-content: flex-start; flex-wrap: wrap; }
}