/* ============================================================================
   BOKONZI — mobile.css  (SOURCE DE VERITE UNIQUE pour l'adaptation TELEPHONE)
   ----------------------------------------------------------------------------
   - Charge EN DERNIER dans le <head>, APRES dashboard.css, les <style> inline
     et theme-control.css : gagne la cascade pour la MISE EN PAGE.
   - NE CONTIENT QUE DU LAYOUT (display / largeur / padding / font-size /
     direction / overflow). AUCUNE COULEUR : le theme reste pilote par
     theme-control.css. Les deux fichiers ne se marchent jamais dessus.
   - !important est utilise volontairement : beaucoup d'elements ont des
     grilles/largeurs en style="" inline (specificite max) qu'il faut battre
     sur petit ecran.
   - 2 paliers : <= 768px (telephone large + petite tablette) et <= 480px
     (telephone etroit).
   - REGLE : tout ajustement responsif TELEPHONE se fait ICI, plus de patchs
     @media disperses dans index.php / dashboard.css.
   ========================================================================== */

/* =========================================================================
   1. PALIER TELEPHONE  (<= 768px)
   ========================================================================= */
@media (max-width: 768px) {

    /* --- Anti-debordement horizontal global (cause n°1 du "zoom" mobile) ---
       ⚠ IL N'Y A PLUS D'`overflow-x: hidden` SUR html/body — ET C'EST VOLONTAIRE.
       `hidden` ne "range" pas ce qui depasse : il le COUPE, et sans barre pour aller
       le chercher. Un tableau un peu large hors `.table-wrap` y perdait ses dernieres
       colonnes en silence (meme piege que le degrade retire de ux-v2.css). Il masquait
       en plus les vrais debordements pendant le developpement : tant qu'on coupe, on
       ne voit jamais qu'on deborde.
       On traite donc les CAUSES ci-dessous. S'il en reste une, la page defile
       horizontalement : c'est visible, c'est reparable, et surtout aucune donnee
       n'est perdue. */
    html, body { max-width: 100%; }
    *, *::before, *::after { box-sizing: border-box; }
    img, canvas, svg, video, iframe { max-width: 100%; height: auto; }

    /* ⚠ EXCEPTION LEAFLET (carte des competitions).
       Une carte est faite de tuiles <img> de 256x256 positionnees au pixel pres. La
       regle ci-dessus (`max-width:100%` + `height:auto`) les redimensionne : la carte
       part en escalier, les marqueurs se decalent de leur ville. C'est le piege
       classique quand on ajoute une feuille "mobile" a une page qui porte une carte —
       et il ne se voit QUE sur telephone.
       On ne neutralise QUE `max-width` : la hauteur des tuiles est fixee par la
       feuille de Leaflet via `.leaflet-tile`, dont la specificite de classe l'emporte
       deja sur notre selecteur d'element. Ajouter un `height` ici ne corrigerait rien
       et risquerait d'ecraser le calcul de Leaflet. */
    .leaflet-container img,
    .leaflet-container canvas,
    .leaflet-pane img,
    .leaflet-marker-icon { max-width: none !important; }

    /* Cause n°1 : un enfant de flex/grid ne descend JAMAIS sous la largeur de son
       contenu tant qu'il garde `min-width: auto` — c'est le PARENT qui deborde.
       (Ne s'applique pas aux `.table-wrap` : eux DOIVENT garder leur contenu large,
       ils ont leur propre defilement.) */
    .container > *, .wrap > *,
    .card, .chart-card, .search-box { min-width: 0; }

    /* Cause n°2 : un mot insecable plus large que l'ecran (URL, email, nom de club
       colle). On coupe le MOT, jamais la colonne. */
    body { overflow-wrap: break-word; }
    td, th, p, h1, h2, h3, li, a { overflow-wrap: anywhere; }

    /* Cause n°3 : les DECORS absolus (halos radiaux du hero) debordent de 240 px a
       droite. Invisibles (z-index:-1) mais ils fabriquent une barre de defilement
       horizontale sur toute la page. On les rentre dans l'ecran : un degrade radial
       n'a aucun besoin d'etre plus large que le telephone. */
    .bk-hero2::before, .bk-hero2::after,
    .bk-trust::before, .bk-cta-final::before {
        left: 0 !important; right: auto !important;
        width: 100% !important; max-width: 100% !important;
    }

    /* --- Conteneur principal : marges serrees --- */
    .container,
    .wrap { padding-left: 14px !important; padding-right: 14px !important; }

    /* ------------------------------------------------------------------ */
    /* NAVIGATION                                                          */
    /* ------------------------------------------------------------------ */
    /* ⚠⚠ NE JAMAIS ECRIRE DE REGLE SUR `nav` TOUT COURT.
       C'est ce qui etait fait ici (`nav, .nav { flex-wrap: nowrap !important; ... }`)
       et ca cassait DEUX choses sur toutes les pages :

       1. `core/nav.php` (la barre fixe du haut, `.bk-nav`) prevoit sur telephone
          DEUX rangees : le bloc auth au-dessus, les liens en dessous. Le
          `flex-wrap: nowrap !important` les remettait de force sur UNE ligne : chacun
          se retrouvait a ~190 px de large (liens reduits a des emoji illisibles),
          pendant que `.bk-nav-spacer` reservait toujours la hauteur de deux rangees
          -> une bande noire vide de 30 px sous la barre, sur TOUTES les pages.
       2. Les `<nav>` des menus deroulants (le mega-menu du burger d'index.php)
          heritaient d'un `overflow-x: auto` et d'un `padding` forces, alors qu'ils
          s'affichent en COLONNE dans un panneau positionne.

       La barre `.bk-nav` gere son propre responsive dans `core/nav.php` (elle doit
       rester autonome : elle est incluse par des pages qui ne chargent pas ce
       fichier). On ne cible donc plus que la nav principale d'index.php, par son
       role explicite. */
    nav[aria-label="Navigation principale"] {
        gap: 2px;
        padding: 0 10px !important;
    }
    nav[aria-label="Navigation principale"] > .logo { flex: 0 0 auto; font-size: 17px !important; }
    /* Liens du menu burger : cible tactile confortable, jamais coupes. */
    nav[aria-label="Navigation principale"] .nav-links a {
        padding: 12px 14px !important;
        font-size: 14px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Le panneau deroulant depassait de 19 px SOUS l'ecran : le dernier lien
       (« Contact ») etait coupe et inatteignable.
       `dashboard.css` calcule sa hauteur avec `calc(100vh - 60px)`, en supposant qu'il
       n'y a QUE la nav principale au-dessus. Sur telephone il y a aussi la barre fixe
       de `core/nav.php` : le panneau demarre a 141 px du haut (95 px de barre + 46 px
       de nav), pas a 60.
       ⚠ Ce 141 est une valeur SURE, pas une estimation : les deux rangees de la barre
       ont une `min-height` fixe (voir core/nav.php). Si elle change, corriger ici aussi.
       `dvh` plutot que `vh` : sur mobile, `vh` ignore la barre d'adresse du navigateur
       qui apparait/disparait au defilement — le menu depasserait a nouveau. */
    nav[aria-label="Navigation principale"] .nav-links {
        max-height: calc(100dvh - 150px) !important;
        overscroll-behavior: contain;   /* defiler le menu ne fait pas defiler la page */
    }

    /* ------------------------------------------------------------------ */
    /* TITRES / HERO                                                       */
    /* ------------------------------------------------------------------ */
    h1 { font-size: clamp(20px, 6vw, 26px) !important; line-height: 1.15; }
    h2 { font-size: clamp(18px, 5vw, 22px) !important; }
    .bk-hero2 { grid-template-columns: 1fr !important; gap: 32px !important; padding: 36px 0 28px !important; }
    .bk-hero-left { text-align: center; }
    .bk-hero-left h1 { font-size: clamp(28px, 8vw, 40px) !important; letter-spacing: -1px; }
    .bk-hero-lead { font-size: 16px !important; margin-left: auto; margin-right: auto; }
    .bk-hero-ctas, .bk-hero-trust { justify-content: center !important; }

    /* ------------------------------------------------------------------ */
    /* GRILLES DE STATS / CARTES                                           */
    /* ------------------------------------------------------------------ */
    .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .card { padding: 14px !important; }
    .card .num { font-size: 24px !important; }
    .charts-row, .charts-row-3 { grid-template-columns: 1fr !important; }
    .chart-card { padding: 14px !important; }
    /* Tout bloc multi-colonnes ECRIT EN INLINE repasse en 1 colonne.
       ⚠ Ces selecteurs matchent la CHAINE de l'attribut style : `repeat(3,1fr)` et
       `repeat(3, 1fr)` sont deux chaines DIFFERENTES. Il faut donc lister les deux
       ecritures, sinon la moitie des grilles du site reste en 3 colonnes sur un
       telephone de 390 px (mesure : 27 grilles inline dans index.php, dont 11 avec
       une espace apres la virgule). */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="repeat(2,1fr)"],  [style*="repeat(2, 1fr)"],
    [style*="repeat(3,1fr)"],  [style*="repeat(3, 1fr)"],
    [style*="repeat(4,1fr)"],  [style*="repeat(4, 1fr)"],
    [style*="repeat(5,1fr)"],  [style*="repeat(5, 1fr)"],
    [style*="grid-template-columns:1.1fr"],
    [style*="grid-template-columns:1.4fr"] { grid-template-columns: 1fr !important; }

    /* Grilles auto : un `minmax(>=200px, 1fr)` reclame plus large que l'ecran une fois
       les marges deduites (390 - 28 = 362 px utiles). On plafonne la piste plutot que
       de forcer 1 colonne : les petites tuiles (110-150 px) restent cote a cote. */
    [style*="minmax(200px"], [style*="minmax(220px"], [style*="minmax(240px"],
    [style*="minmax(260px"], [style*="minmax(280px"], [style*="minmax(300px"],
    [style*="minmax(340px"], [style*="minmax(360px"], [style*="minmax(180px"],
    [style*="minmax(360px, 1fr)"] { grid-template-columns: 1fr !important; }
    /* (Verifie : les grilles a colonnes en PIXELS du site — `120px 1fr 100px 70px`,
       `190px 1fr`, `50px 1fr 90px 60px` — gardent toutes une piste `1fr` qui absorbe
       la compression. Elles ne debordent pas : on n'y touche pas. Les empiler
       casserait l'alignement de leurs cellules.) */

    /* ------------------------------------------------------------------ */
    /* TABLEAUX (pattern 3-tables)  : scroll horizontal propre            */
    /* ------------------------------------------------------------------ */
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
        /* Le geste horizontal reste DANS le tableau : sans ca, arrive au bout, iOS
           interprete la suite du glissement comme un "retour a la page precedente"
           et l'utilisateur quitte la page en croyant faire defiler une colonne. */
        overscroll-behavior-x: contain;
        /* ⚠ La barre de defilement est VISIBLE et le reste.
           C'est la seule indication qu'il y a des colonnes a droite. On avait tente un
           degrade sur le bord droit : il RECOUVRE les derniers caracteres (chronos,
           noms de clubs) — un voile qui masque de la donnee est pire que pas
           d'indication du tout. Une barre, elle, ne cache rien. */
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .table-wrap::-webkit-scrollbar { height: 6px; -webkit-appearance: none; }
    .table-wrap::-webkit-scrollbar-thumb { background: rgba(140, 150, 170, .55); border-radius: 3px; }
    .bk-table { min-width: max-content; }
    .bk-table th, .bk-table td {
        padding: 10px 12px !important;
        font-size: 12.5px !important;   /* 12 px sous le doigt, c'est deja limite */
        white-space: nowrap;
    }

    /* ------------------------------------------------------------------ */
    /* RECHERCHE / FILTRES : tout en pleine largeur, empile               */
    /* ------------------------------------------------------------------ */
    .search-box { padding: 14px !important; }
    /* ⚠ LA LISTE DES TYPES DOIT ETRE COMPLETE.
       Sous 16 px, iOS ZOOME tout seul a la mise au point du champ — et ne dezoome
       jamais : la page reste agrandie et decalee, c'est le "bug responsive" le plus
       souvent signale. La liste precedente oubliait `textarea`, `number`, `tel`,
       `password`, `date` et `url` : le formulaire de contact (textarea) et la saisie
       de performance (number) declenchaient donc le zoom. */
    .search-box input, .search-box select,
    .search-filters input, .search-filters select,
    input[type="text"], input[type="search"], input[type="email"],
    input[type="number"], input[type="tel"], input[type="password"],
    input[type="date"], input[type="url"], input:not([type]),
    select, textarea {
        width: 100% !important;
        margin: 5px 0 !important;
        font-size: 16px !important; /* 16px = pas de zoom auto iOS au focus */
        min-height: 44px;           /* cible tactile */
    }
    textarea { min-height: 110px; }
    /* Cases et boutons radio : ils ne doivent PAS passer en pleine largeur. */
    input[type="checkbox"], input[type="radio"] {
        width: auto !important; min-height: 0;
        min-width: 20px; height: 20px;   /* 13 px par defaut : intouchable au doigt */
    }
    .search-filters { flex-direction: column !important; }

    /* ------------------------------------------------------------------ */
    /* BOUTONS : cibles tactiles confortables                             */
    /* ------------------------------------------------------------------ */
    .btn, button.btn, a.btn {
        width: 100%;
        margin: 6px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Petits boutons d'action (suivre, PDF, ffa, signaler...) : restent en ligne */
    .btn-follow, .btn-pdf, .btn-ffa, .btn-close-detail,
    .view-toggle button, .p2-view-toggle { width: auto; }

    /* ------------------------------------------------------------------ */
    /* PROFIL                                                              */
    /* ------------------------------------------------------------------ */
    .profil-header { flex-direction: column !important; gap: 14px !important; padding: 16px !important; text-align: center; }
    .profil-header .name { font-size: 22px !important; }
    .section-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .section-tabs a { display: inline-block; padding: 10px 14px !important; font-size: 12px !important; }

    /* ------------------------------------------------------------------ */
    /* PANNEAU DETAIL CLUB / EPREUVE (overlay inline)                     */
    /* ------------------------------------------------------------------ */
    .club-detail-panel { padding: 16px !important; border-radius: 10px; }
    .club-detail-header h2 { font-size: 18px !important; }
    .club-detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }
    .club-detail-tab { flex: 0 0 auto; padding: 8px 14px !important; font-size: 12px !important; }

    /* ------------------------------------------------------------------ */
    /* LISTE ATHLETES (cartes)                                            */
    /* ------------------------------------------------------------------ */
    .ath-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .ath-card { padding: 12px !important; }
    .ath-card .ath-name { font-size: clamp(16px, 4.5vw, 20px) !important; }
    .ath-card .ath-kpis { grid-template-columns: repeat(2, 1fr) !important; }

    /* ------------------------------------------------------------------ */
    /* COMPARER : panier flottant compact                                 */
    /* ------------------------------------------------------------------ */
    .cmp-basket {
        left: 10px !important; right: 10px !important;
        width: auto !important; max-width: none !important;
        bottom: 10px !important;
    }

    /* ------------------------------------------------------------------ */
    /* DECORS 3D LOURDS : on reduit (perf + lisibilite mobile)            */
    /* ------------------------------------------------------------------ */
    .stade-3d { transform: scale(0.7); height: 260px !important; }
    .podium-3d { height: 280px !important; }

    /* ------------------------------------------------------------------ */
    /* TOGGLES FLOTTANTS (theme clair/sombre) : ne pas chevaucher le pouce */
    /* ------------------------------------------------------------------ */
    .p2-toggles { gap: 6px; }
    .p2-light-toggle, .p2-view-toggle { font-size: 11px; padding: 8px 12px; }

    /* Barre newsletter fixe : compacte, ne mange pas tout l'ecran */
    #newsletterBar { padding: 12px 14px !important; }
    #newsletterBar input { width: 100% !important; }

    /* ------------------------------------------------------------------ */
    /* MODALES / OVERLAYS plein ecran sur telephone                       */
    /* ------------------------------------------------------------------ */
    .overlay > div, .modal > div, [id$="Overlay"] > div, [id$="Modal"] > div {
        max-width: 94vw !important;
        width: 94vw !important;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Tableau prix : 1 colonne */
    .bk-prix { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   2. PALIER TELEPHONE ETROIT  (<= 480px)
   ========================================================================= */
@media (max-width: 480px) {

    .container, .wrap { padding-left: 10px !important; padding-right: 10px !important; }

    /* Stats : 2 colonnes restent lisibles, mais on serre */
    .grid { gap: 8px !important; }
    .card .num { font-size: 21px !important; }

    /* Liste athletes : 1 seule colonne */
    .ath-grid { grid-template-columns: 1fr !important; }
    .ath-card .ath-kpis { grid-template-columns: repeat(4, 1fr) !important; }

    h1 { font-size: 20px !important; }
    .bk-hero-left h1 { font-size: 26px !important; }

    /* (Pas de regle `nav a` ici : elle retombait sur la barre du haut et sur les
       menus deroulants — voir l'avertissement du palier 768px. Et 11 px sous le
       doigt, c'est deja trop petit.) */

    .bk-table th, .bk-table td { padding: 8px 10px !important; font-size: 11.5px !important; }

    /* Decors 3D : encore plus reduits sur tres petit ecran */
    .stade-3d { height: 200px !important; }
    .podium-3d { height: 220px !important; }
}
