/* ============================================================
   MonGalop — mobile-fix.css
   À charger APRÈS refonte.css.
   Sous 720 px : le rail devient une barre d'onglets basse,
   les cibles tactiles repassent à 44 px, le changement d'écurie
   redevient atteignable.
   ============================================================ */

@media (max-width: 980px) {
    /* Le sélecteur d'écurie était masqué sans remplacement. On le rétablit,
       mais SANS ancrage en dur : `--topbar-height` est une hauteur minimale,
       pas la hauteur réelle, et la topbar grandit dès que son contenu passe
       à la ligne (168 px sur le planning). Tout `top:` fixe finirait par
       recouvrir des boutons. Il rejoint donc la barre basse — voir plus bas. */
    .sidebar-ecurie { display: flex !important; align-items: center; }
    .sidebar-ecurie-label { display: none; }
    .sidebar-ecurie-select { min-width: 0; min-height: 44px; }
}

@media (max-width: 720px) {
    /* --- 1. Le contenu récupère toute la largeur ------------------- */
    .app-shell > .app-main,
    body .app-shell > .app-main { margin-left: 0 !important; }

    /* --- 2. Le rail passe en barre d'onglets basse ----------------- */
    .sidebar {
        top: auto !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: auto;
        flex-direction: row;
        border-right: 0;
        border-top: 1px solid var(--chassis-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -1px 3px rgba(24, 24, 27, 0.06);
    }
    .sidebar:hover,
    .sidebar:focus-within { width: 100% !important; box-shadow: 0 -1px 3px rgba(24, 24, 27, 0.06); }

    /* Marque et réglages sortent de la barre ; le sélecteur d'écurie y reste,
       en tête, comme première commande de navigation. */
    .sidebar-brand,
    .sidebar-nav-title { display: none !important; }

    /* .sidebar-footer contient l'UNIQUE lien vers Reglages : le masquer
       rendrait la page inatteignable sur mobile. Il devient le dernier
       onglet de la barre, au meme titre que les autres destinations. */
    .sidebar-footer {
        position: static !important;
        flex: 0 0 auto;
        flex-direction: row;
        gap: 0;
        padding: 0 !important;
        margin: 0;
        border: 0 !important;
        border-left: 1px solid var(--chassis-border) !important;
        background: transparent !important;
    }

    /* Le sélecteur d'écurie : premier élément de la barre basse.
       Dans le flux, donc aucun recouvrement possible, quelle que soit
       la hauteur de la topbar. */
    /* Le selecteur d'ecurie quitte la barre : il y prenait 102 px des 390,
       ne laissant que 4 destinations sur 10 visibles. Ce n'est PAS un
       masquage sans remplacement — parametres.html porte deja une carte
       « Ecurie active » avec la liste complete, et l'onglet Reglages est
       atteignable dans la barre. Changer d'ecurie reste donc possible,
       a l'endroit qui lui revient. */
    .sidebar-ecurie { display: none !important; }

    .sidebar-nav {
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }

    /* La zone de navigation defile : son bord droit s'estompe pour signaler
       qu'il y a une suite. Le masque porte sur .sidebar-nav et non sur
       .sidebar, sinon il recouvrirait le lien Reglages qui la suit. */
    .sidebar-nav {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }

    /* Icône au-dessus du libellé : le texte redevient lisible au doigt */
    .sidebar .nav-item,
    .sidebar-footer .nav-item,
    .sidebar-footer > * {
        width: auto !important;
        min-width: 62px;
        min-height: 56px;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px !important;
        padding: 7px 6px;
        font-size: 9.5px;
        font-weight: 500;
        line-height: 1.15;
        text-align: center;
        border-radius: 0;
        white-space: nowrap;
    }
    .sidebar .nav-item.active {
        background: transparent;
        color: var(--brand-copper);
        box-shadow: inset 0 2px 0 var(--brand-copper);
    }
    .sidebar .nav-item.active svg { color: var(--brand-copper); }

    /* La barre basse ne masque pas le bas du contenu */
    .content,
    body .content { padding-bottom: 84px !important; }

    /* --- 3. Cibles tactiles : 44 px minimum ------------------------ */
    /* !important nécessaire : refonte.css impose 30-32 px avec une
       spécificité supérieure à celle d'une media query. */
    .icon-btn, .back-btn, .modal-close, .lot-icon-btn,
    #add-jockey-btn, .jockey-access, .jockey-remove {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .today-btn, .date-nav-btn, .filter-chip,
    .billing-tab, .health-tab, .subnav-tab,
    .action-btn, .planning-action, .primary-action,
    .btn-primary, .btn-secondary, .btn-add, .btn-ana,
    .btn-health-primary, .btn-health-secondary,
    .sort-select, .month-input, .side-search,
    body .search-bar, body .search-bar input,
    input, select, textarea, button {
        min-height: 44px !important;
    }

    /* --- 4. Topbar : compacte, le titre passe avant le fil d'ariane -- */
    .topbar-eyebrow { display: none; }
    .topbar-title h1 { font-size: 15px; }
    /* Sur le planning, la topbar montait à 168 px (3 lignes). On resserre
       l'interligne et les paddings pour rendre l'écran au contenu. */
    .topbar {
        gap: 8px;
        flex-wrap: wrap;
        row-gap: 6px;
        padding-top: 7px;
        padding-bottom: 7px;
    }
    .topbar-actions { gap: 6px; }

    /* --- 5. Les notifications passent au-dessus de la barre basse ---
       Sinon elles recouvrent les onglets de navigation. */
    .toast-region {
        bottom: calc(58px + env(safe-area-inset-bottom) + 12px) !important;
        right: 12px;
        left: 12px;
        width: auto;
    }

    /* --- 6. Lignes de tableau empilées ----------------------------- */
    .horse-row, .health-row, .invoice-row, .lot-summary, .deadline {
        row-gap: 6px;
    }
}


/* ============================================================
   Planning en mode terrain (ecran consulte dans la cour a 6 h)
   Une colonne, gros caracteres, cibles larges — sur le modele
   de jockey.html, qui est la seule page pensee mobile d'abord.
   ============================================================ */
@media (max-width: 720px) {
    /* Les deux colonnes du planning s'empilent */
    .planning-layout, .planning-grid, .planning-body {
        display: block !important;
    }
    .side-panel, .planning-side {
        width: 100% !important;
        margin-bottom: 14px;
    }

    /* Un lot = un bloc lisible a bout de bras */
    .lot-card, .lot-block {
        border-radius: 12px !important;
        margin-bottom: 12px;
    }
    .lot-header, .lot-title {
        min-height: 52px;
        font-size: 15px !important;
    }
    .lot-time, .lot-heure {
        font-size: 16px !important;
        font-weight: 600 !important;
    }

    /* Une affectation par ligne pleine largeur */
    .assignment, .a-row, .lot-assignment {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) !important;
        row-gap: 4px;
        align-items: center;
        min-height: 60px;
        padding: 10px 12px !important;
    }
    .a-horse, .assignment-horse {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
    .a-jockey, .a-jockey-slot, .assignment-jockey,
    .a-consigne, .assignment-consigne {
        grid-column: 2 / -1;
        font-size: 13.5px !important;
        line-height: 1.45;
        white-space: normal !important;
    }
    /* La case « fait » est la commande principale : 48 px */
    .a-check, .assignment-check, .lot-check,
    input[type="checkbox"] {
        width: 48px !important;
        height: 48px !important;
    }

    /* Le glisser-deposer n'existe pas au doigt : on masque l'invite */
    .side-panel-title, .drag-hint { font-size: 10px !important; }
}

/* ============================================================
   Mode exterieur — lecture en plein soleil
   A activer en posant data-lisibilite="exterieur" sur <html>.
   ============================================================ */
:root[data-lisibilite="exterieur"] {
    --text-primary: #000000;
    --text-secondary: #3f3f46;
    --text-tertiary: #52525b;
    --card-glass-border: #a1a1aa;
    --chassis-border: #a1a1aa;
    --hairline: #d4d4d8;
}
:root[data-lisibilite="exterieur"] body { font-size: 15px; }
:root[data-lisibilite="exterieur"] [class*="-label"],
:root[data-lisibilite="exterieur"] .section-title { font-size: 11.5px !important; }
:root[data-lisibilite="exterieur"] [class*="-value"],
:root[data-lisibilite="exterieur"] [class*="-name"] { font-size: 17px !important; }
:root[data-lisibilite="exterieur"] button,
:root[data-lisibilite="exterieur"] .nav-item,
:root[data-lisibilite="exterieur"] input,
:root[data-lisibilite="exterieur"] select { min-height: 52px !important; }
:root[data-lisibilite="exterieur"] .card,
:root[data-lisibilite="exterieur"] [class*="-card"] { box-shadow: none !important; }


/* ============================================================
   Barre a 5 onglets + « Plus » (necessite mobile-nav.js)
   ============================================================ */
@media (max-width: 720px) {
    .nav-tiroir {
        position: fixed;
        right: 8px;
        bottom: calc(58px + env(safe-area-inset-bottom) + 6px);
        z-index: 70;
        display: none;
        flex-direction: column;
        min-width: 190px;
        padding: 6px;
        border: 1px solid var(--card-glass-border);
        border-radius: 11px;
        background: var(--surface);
        box-shadow: var(--shadow-overlay);
    }
    .nav-tiroir.ouvert { display: flex; }
    .nav-tiroir .nav-item {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 11px !important;
        font-size: 13px !important;
        border-radius: 7px;
        text-align: left;
    }
    .nav-tiroir .nav-item:hover { background: var(--surface-sunken); }
    /* Avec 5 onglets + Plus, la barre ne defile plus : masque inutile */
    .sidebar-nav[data-replie="1"] {
        -webkit-mask-image: none;
        mask-image: none;
        justify-content: space-around;
    }
}


/* ============================================================
   Topbar du planning : grille a une colonne
   Mesure a 390 px : .topbar-actions portait bien flex:1 1 100%
   mais restait sur la ligne du titre et debordait jusqu'a 488 px
   (bouton « Etiquettes » a left:409, hors ecran). Le flex-basis
   ne garantit pas le retour a la ligne ici ; une grille a une
   colonne le garantit, quelle que soit la largeur des enfants.
   ============================================================ */
@media (max-width: 720px) {
    /* Portee limitee aux topbars qui portent une navigation de date
       (planning). Ailleurs, un seul bouton de 44 px tient sans peine a
       cote du titre : forcer le retour a la ligne y coutait 31 px de
       hauteur pour rien (90 px au lieu de 59). */
    .topbar:has(.date-nav) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 9px;
        align-items: center;
    }
    /* Repli pour les navigateurs sans :has() — seul le groupe large
       prend une ligne entiere, les autres partagent la premiere. */
    .topbar { align-items: center; row-gap: 9px; }
    .topbar-title { min-width: 0; }
    .topbar-title h1 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Les commandes se rangent dans la colonne, sans jamais la depasser.
       Le width:100% est reserve a la topbar en grille : ailleurs il
       forcait un retour a la ligne inutile (90 px au lieu de 59). */
    .topbar-actions {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .topbar:has(.date-nav) .topbar-actions { width: 100%; }
    .topbar-actions > * { flex: 0 0 auto; }

    /* La navigation de date prend sa propre ligne, en premier :
       c'est la commande la plus utilisee de l'ecran. */
    .date-nav {
        order: -1;
        flex: 1 1 100% !important;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    .date-nav-btn { min-width: 44px !important; flex: 0 0 auto; }
    /* Le bouton du jour se centrait 7 px plus bas que les fleches
       (centre y=79 contre 72). Cause reelle : .date-center est une boite
       BLOC de 59 px qui empile le libelle de date au-dessus du bouton.
       Les fleches se centrent donc sur ces 59 px, tandis que le bouton
       n'occupe que les 44 px du bas. Ce n'est pas une marge : les deux
       marges valaient deja 0. On aligne en rendant .date-center un
       contexte flex centre, et en le laissant dicter sa hauteur. */
    .date-center {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        min-width: 0;
    }
    .date-nav { align-items: center !important; }
    .date-label, .date-nav > span { flex: 1 1 auto; min-width: 0; text-align: center; }
}

/* ============================================================
   Le bleu du bouton d'aujourd'hui n'appartient pas au systeme
   Mesure : fond rgba(2,132,199,.1), texte rgb(69,107,153).
   Le systeme n'a que le cuivre pour l'action et le neutre pour
   le reste — ce bleu est un troisieme accent orphelin.
   ============================================================ */
body .today-btn,
body .today-btn:not(:disabled) {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--card-glass-border) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}
body .today-btn.active,
body .today-btn[aria-current="true"] {
    background: rgba(163, 87, 44, .10) !important;
    border-color: var(--brand-copper) !important;
    color: var(--brand-copper) !important;
}


/* ============================================================
   Robustesse de la barre basse — toutes les pages
   ============================================================ */
@media (max-width: 720px) {
    /* La barre garde sa hauteur, quoi qu'une page y injecte */
    .sidebar { max-height: calc(64px + env(safe-area-inset-bottom)) !important; }
    .sidebar-nav { align-items: center !important; }
    .sidebar-nav > :not(.nav-item) { display: none !important; }

    /* Boutons « Plus » et theme : pas de style navigateur par defaut */
    .nav-plus {
        border: 0 !important;
        background: transparent !important;
        color: var(--text-secondary);
        font: inherit;
        cursor: pointer;
        height: 56px;
        min-height: 56px !important;
    }
    .nav-plus[aria-expanded="true"] { color: var(--brand-copper); }

    .icon-button, #theme-toggle-btn {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border: 1px solid var(--chassis-border) !important;
        border-radius: 12px !important;
        background: var(--bg-surface, #fff) !important;
        color: var(--text-primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Onglets eleveur ramenes dans la page par mobile-nav.js.
       Le prefixe :is(#breeder-profile, body) porte la specificite d'un id :
       refonte.css cible [class*="-section"] avec ~25 :not() (0,25,1), ce
       qui imposait un fond blanc et une bordure aux pastilles et au groupe.
       Les couleurs ont une valeur de secours : si une variable manque sur
       une page, le texte ne doit jamais finir blanc sur blanc. */
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        width: auto !important;
        margin: 4px 0 18px !important;
        padding: 0 0 2px !important;
        border: 0 !important;
        overflow-x: auto;
        scrollbar-width: none;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie::-webkit-scrollbar { display: none; }
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie .breeder-section-tab {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 38px !important;
        padding: 0 15px !important;
        border: 1px solid var(--chassis-border, #e4e4e7) !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #52525b !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap;
        box-shadow: none !important;
    }
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie .breeder-section-tab::before { display: none !important; }
    /* Actif : texte fonce + bordure cuivre. Jamais de texte blanc, pour
       rester lisible meme si une autre feuille impose un fond blanc. */
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie .breeder-section-tab[aria-selected="true"] {
        background: #f6ede6 !important;
        border-color: #a3542b !important;
        color: #18181b !important;
    }

    /* Onglet actif de la barre basse : un simple trait, sans coins arrondis */
    .sidebar .nav-item.active {
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: inset 0 2px 0 var(--brand-copper, #a3542b) !important;
        color: var(--brand-copper, #a3542b) !important;
    }

    /* Titre eleveur : moins massif sur 390 px */
    #breeder-profile h1, #breeder-profile h2,
    .breeder-profile-head h1, .breeder-profile-head h2,
    .breeding-hero h1, .breeding-hero h2 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   Correctifs mesures a 390 px (audit Playwright)
   ============================================================ */
@media (max-width: 720px) {
    /* Grilles a une colonne : `1fr` vaut minmax(auto, 1fr) et s'elargit
       jusqu'a la largeur min-content du contenu (529 px sur l'accueil,
       470 px sur la synthese eleveur). Le debordement etait masque par
       l'overflow de .app-main, donc invisible pour scrollWidth. */
    .today-layout,
    .breeder-overview-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .today-layout > *,
    .breeder-overview-grid > * { min-width: 0; }
    .duplicate-card { flex-wrap: wrap; gap: 6px; }
    .duplicate-card b { min-width: 0; overflow-wrap: anywhere; }

    /* Le contenu n'est pas cache par la barre basse (58 px + 16 px) */
    .page-content,
    body .page-content,
    .owner-main { padding-bottom: 84px !important; }

    /* Onglet actif de la barre basse : trait cuivre exact */
    .sidebar .nav-item.active {
        box-shadow: inset 0 2px 0 #a3542b !important;
        color: #a3542b !important;
    }
    .sidebar .nav-item.active svg { color: #a3542b !important; }

    /* Pastilles eleveur : 44 px au doigt */
    :is(#breeder-profile, body) .breeder-section-menu.menu-rapatrie .breeder-section-tab { min-height: 44px !important; }

    /* Contrastes < 4,5:1 mesures sur fond reel */
    .analysis-link-btn { color: #a3542b !important; }
    .prog-btn { color: #2f5580 !important; }
    .prog-btn.danger { color: #b91c1c !important; }
    .filters-reset { color: #7a5312 !important; }
    /* Portail proprietaire : .owner-main (enfant flex) s'elargissait a
       893 px a cause de la rangee de saisons. */
    .owner-main { min-width: 0 !important; max-width: 100% !important; }
    .owner-context-bar, .season-switch { flex-wrap: wrap; }
    .season-switch { overflow-x: auto; scrollbar-width: none; }
    .season-btn,
    .comparison-table button[data-compare-year] { color: #a3542b !important; }
    .season-btn.active { background: #a3542b !important; border-color: #a3542b !important; color: #fff !important; }
    /* Cartes chiffrees eleveur : 2 colonnes lisibles sans zoom
       (breeding-dashboard.css passe a 1 colonne sous 430 px). */
    .breeding-kpis,
    .breeder-summary-kpis,
    .breeder-official-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .breeding-kpi { min-width: 0; min-height: 0; padding: 14px !important; }
    :is(#breeder-profile, body) .breeding-kpi .label { font-size: 10.5px !important; letter-spacing: .04em !important; white-space: normal !important; overflow-wrap: anywhere; }
    :is(#breeder-profile, body) .breeding-kpi .value { font-size: 22px !important; font-family: var(--font-mono, "IBM Plex Mono", monospace) !important; color: var(--text-primary, #18181b) !important; overflow-wrap: anywhere; }
    :is(#breeder-profile, body) .breeding-kpi .sub { font-size: 12px !important; white-space: normal !important; overflow-wrap: anywhere; }
    /* La grille et le panneau d'onglet ne sont que des dispositions :
       refonte.css ([class*="-kpi"], [class*="-panel"]) leur donnait un
       fond et une bordure de carte. */
    :is(#breeder-profile, body) :is(.breeding-kpis, .breeder-summary-kpis, .breeder-official-kpis, .breeder-tab-panel) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    /* refonte.css prend .breeder-tab-panel pour un onglet ([class*="-tab"]) :
       nowrap, texte gris et 12 px imposes a tout le panneau. Le texte
       sortait des cartes (+190 px sur Poulinieres). */
    :is(#breeder-profile, body) .breeder-tab-panel {
        white-space: normal !important;
        color: var(--text-primary, #18181b) !important;
        font-size: inherit !important;
        min-height: 0 !important;
        border-radius: 0 !important;
        cursor: auto !important;
    }
    :is(#breeder-profile, body) .breeder-tab-panel .panel-head { flex-wrap: wrap; }
    :is(#breeder-profile, body) .breeder-tab-panel .panel-head > * { min-width: 0; }
    :is(#breeder-profile, body) .breeder-tab-panel :is(h3, h4, p, strong, span) { overflow-wrap: anywhere; }
    /* 2 ans : le badge de course (hippodrome · date · distance) depassait
       sa carte de 45 px. */
    .kpi-card { min-width: 0; }
    .kpi-card .kpi-badge {
        max-width: 100%;
        white-space: normal !important;
        overflow-wrap: anywhere;
        height: auto;
    }
}