/* ============================================================
   mobile.css — passe responsive (chargée APRÈS site.min.css).
   Overrides additifs et non destructifs. Cible mobile : <= 767px.
   Le socle (grille Foundation, responsive-tables.js, modales)
   reste en place ; on comble seulement les manques.
   ============================================================ */

/* Anti-débordement horizontal global (médias + blocs préformatés) */
img, video, canvas, iframe, embed, object { max-width: 100%; }
pre { white-space: pre-wrap; word-wrap: break-word; }

@media screen and (max-width: 767px) {

    /* 1. Saisie : 16px => pas de zoom automatique iOS au focus du champ */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="date"], input[type="search"],
    input[type="tel"], input[type="url"], input:not([type]),
    textarea, select { font-size: 16px; }

    /* 2. Selects "Chosen" : pleine largeur */
    .chosen-container { width: 100% !important; max-width: 100%; }

    /* 3. Tables custom denses : scroll horizontal tactile fluide */
    .cw-tablewrap, .table-scroll, .scrollable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Chrono dans le menu replié (top-bar.expanded) : ligne pleine largeur */
    .top-bar.expanded .gchrono-li {
        height: auto !important;
        padding: 10px 15px !important;
        display: block !important;
    }
    .top-bar.expanded .gchrono-li .gchrono-idle,
    .top-bar.expanded .gchrono-li .gchrono-running {
        width: 100%;
        justify-content: flex-start;
    }
    .top-bar.expanded .gchrono-running { padding: 4px 0; }

    /* 5. Modale chrono : un peu plus haute pour le détail sur petit écran */
    .gchrono-modal-box { margin: 6% auto; }
    .gchrono-modal-box textarea { min-height: 110px; }

    /* 6. FullCalendar : en-tête empilé et lisible sur petit écran */
    .fc-toolbar { display: block; text-align: center; }
    .fc-toolbar .fc-left,
    .fc-toolbar .fc-center,
    .fc-toolbar .fc-right { float: none; display: block; margin: 5px 0; }
    .fc-toolbar h2 { font-size: 1.05rem; line-height: 1.4; }
    .fc-button { padding: 0 .55em; }

    /* 7. Titres principaux un peu plus compacts */
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }

    /* 8. Pagination : reste sur une ligne, scrollable si besoin */
    ul.pagination { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Calendrier annuel : déjà responsive via ses propres media-queries.
   On garantit juste que les mini-mois ne débordent pas. */
@media screen and (max-width: 480px) {
    .yc-months .yc-month { width: calc(50% - 14px); min-width: 0; }
}