/* ============================================================================
   Version mobile et tablette (telephones ~320px, tablettes ~768-992px).
   Chargee APRES style.css et rtl.css : elle a la priorite en cas de conflit.
   Le bureau conserve sa presentation ; le menu devient un tiroir modal, les
   formulaires se repliant et chaque tableau large garde son propre defilement.
   ============================================================================ */

/* Elements graphiques et champs : jamais plus larges que leur conteneur. */
img,
svg,
video,
canvas {
    max-width: 100%;
}

input,
select,
textarea,
button,
.combobox,
.carte,
.contenu-principal {
    max-width: 100%;
}

.carte,
.champ,
.combobox {
    min-width: 0;
}

.grille-formulaire {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Un seul conteneur est responsable du defilement d'un tableau encapsule. */
.conteneur-tableau-large,
.table-responsive {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.pied {
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
}

/* Boutons du tiroir : invisibles sur grand ecran. */
.bouton-menu-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
}

.bouton-fermer-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 0.75rem 0.5rem;
    margin-inline-start: auto;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: var(--couleur-menu-texte);
    font: inherit;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}

.bouton-menu-mobile:focus-visible,
.bouton-fermer-menu:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.sidebar a:focus-visible,
.sidebar summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

/* Voile sombre derriere le tiroir du menu (tap = fermer). */
.voile-menu {
    display: none;
}

/* --- Tablettes et telephones (<= 992px) ------------------------------------ */
@media (max-width: 992px) {
    /* Le tiroir translate ne doit pas creer de defilement de la page. */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
        overflow-x: clip;
    }

    body.menu-ouvert {
        overflow: hidden;
        overscroll-behavior: none;
    }

    .entete {
        padding-top: max(0.6rem, env(safe-area-inset-top));
        padding-left: max(1.2rem, env(safe-area-inset-left));
        padding-right: max(1.2rem, env(safe-area-inset-right));
    }

    .entete-logo {
        font-size: 1.2rem;
    }

    /* Le nom complet reste disponible dans « Mon profil » ; le conserver ici
       sur tablette casse inutilement l'entete sur plusieurs lignes. */
    .entete .nom-utilisateur {
        display: none;
    }

    .bouton-menu-mobile,
    .bouton-fermer-menu {
        display: inline-flex;
    }

    .bouton-fermer-menu {
        display: flex;
    }

    /* La barre laterale devient un tiroir fixe, masque hors ecran. */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: min(280px, 85vw);
        height: 100vh;
        height: 100dvh;
        z-index: 90;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        transform: translateX(-110%);
        visibility: hidden;
        transition: transform 0.25s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }

    /* En RTL le tiroir est a droite : il sort par la droite. */
    [dir="rtl"] .sidebar {
        transform: translateX(110%);
    }

    body.menu-ouvert .sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    .voile-menu {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 80;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
        touch-action: manipulation;
    }

    body.menu-ouvert .voile-menu {
        opacity: 1;
        visibility: visible;
    }

    .contenu-principal {
        padding: 1rem;
    }

    /* Cibles tactiles d'au moins 44px dans la navigation. */
    .menu-lateral a,
    .pole-menu > summary {
        min-height: 44px;
    }

    .menu-lateral a {
        padding: 0.85rem 1.2rem;
    }

    .lien-langue,
    .bouton-deconnexion {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Cascade v33 : deux colonnes sur tablette/telephone. */
    .filtres-cascade {
        flex-wrap: wrap;
    }

    .filtres-cascade .champ {
        flex: 1 1 45%;
    }

    .combobox-option,
    .combobox-vide {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* --- Telephones (<= 640px) -------------------------------------------------- */
@media (max-width: 640px) {
    .entete {
        padding: 0.5rem 0.8rem;
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-left: max(0.8rem, env(safe-area-inset-left));
        padding-right: max(0.8rem, env(safe-area-inset-right));
        gap: 0.6rem;
    }

    .entete-logo {
        font-size: 1rem;
        min-width: 0;
    }

    /* Le nom long de l'application cede la place au logo seul. */
    .entete .logo-texte,
    .entete .nom-utilisateur {
        display: none;
    }

    .entete-actions {
        gap: 0.4rem;
        font-size: 0.85rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .selecteur-langue {
        gap: 0.3rem;
    }

    .lien-langue {
        padding: 0.35rem 0.45rem;
    }

    .bouton-deconnexion {
        padding: 0.35rem 0.55rem;
    }

    .contenu-principal {
        padding: 0.8rem 0.6rem;
        padding-left: max(0.6rem, env(safe-area-inset-left));
        padding-right: max(0.6rem, env(safe-area-inset-right));
    }

    .carte {
        padding: 1rem;
    }

    .carte h1 {
        font-size: 1.25rem;
    }

    .aide,
    .alerte,
    td,
    .badge-autre-compte {
        overflow-wrap: anywhere;
    }

    /* Les coordonnees longues ne doivent pas imposer une seconde colonne
       plus large que la carte sur un telephone etroit. */
    .infos-utilisateur {
        grid-template-columns: minmax(0, 1fr);
    }

    .infos-utilisateur dd {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .barre-navigation {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Filtres : un champ par ligne, boutons pleine largeur. */
    .filtres .champ {
        min-width: 0;
        flex: 1 1 100%;
    }

    .filtres .bouton,
    .filtres button {
        width: 100%;
    }

    .grille-formulaire,
    .cartes-modules {
        grid-template-columns: minmax(0, 1fr);
    }

    .grille-stats {
        grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr));
    }

    .fieldset-formulaire {
        padding: 0.85rem;
    }

    /* Cibles tactiles : les petits boutons restent lisibles sans etre difficiles
       a viser. Les cases a cocher et boutons radio gardent leur taille native. */
    .bouton,
    .pagination a,
    .pagination .page-courante {
        min-height: 44px;
    }

    .bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .champ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .champ select,
    .combobox-input {
        min-height: 44px;
    }

    .champ-case label,
    .mois-option {
        min-height: 44px;
    }

    /* Les tableaux autonomes defilent dans leur carte. Un tableau deja place
       dans une hauteur/largeur de conteneur reste un vrai tableau : c'est ce
       conteneur unique qui defile (notamment l'emploi du temps). */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .conteneur-tableau-large > table,
    .table-responsive > table {
        display: table;
        overflow: visible;
    }

    th,
    td {
        padding: 0.4rem 0.55rem;
        font-size: calc(var(--taille-base) - 1px);
    }

    .entete-fiche {
        flex-wrap: wrap;
        gap: 0.8rem;
    }

    .actions {
        flex-wrap: wrap;
    }

    .actions > form {
        flex: 1 1 auto;
    }

    .actions .bouton,
    .barre-outils .bouton {
        flex: 1 1 auto;
        text-align: center;
    }

    .actions > form .bouton {
        width: 100%;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .pagination a,
    .pagination .page-courante {
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Connexion, badge et lecteur QR sur toute la largeur utile. */
    .page-connexion {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .carte-connexion {
        max-width: 400px;
        padding: 1.4rem;
    }

    .scan-public {
        margin: 1rem auto;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .scan-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .scan-actions .champ {
        flex-basis: auto;
        width: 100%;
    }

    .scan-actions .bouton {
        width: 100%;
    }

    #lecteur-qr,
    #lecteur-qr-pointage {
        max-width: 100% !important;
    }

    .combobox-liste {
        max-width: 100%;
        max-height: min(240px, 50vh);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .code-erreur {
        font-size: 3rem;
    }
}

/* Les controles generes par la bibliotheque QR ne heritent pas de .bouton :
   leur cible tactile doit etre definie explicitement. */
@media (max-width: 992px), (pointer: coarse) {
    #lecteur-qr button,
    #lecteur-qr-pointage button,
    #lecteur-qr select,
    #lecteur-qr-pointage select {
        min-height: 44px;
    }

    #lecteur-qr button,
    #lecteur-qr-pointage button,
    #lecteur-qr #html5-qrcode-anchor-scan-type-change,
    #lecteur-qr-pointage #html5-qrcode-anchor-scan-type-change {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0.5rem 0.8rem;
        touch-action: manipulation;
    }
}

/* Un large ecran tactile (tablette 1024px, par exemple) garde le bureau
   lateral mais recoit les memes cibles confortables qu'un telephone. */
@media (pointer: coarse) {
    .bouton,
    .lien-langue,
    .bouton-deconnexion,
    .menu-lateral a,
    .pole-menu > summary,
    .pagination a,
    .pagination .page-courante,
    .combobox-option,
    .combobox-vide,
    .champ-case label,
    .mois-option {
        min-height: 44px;
    }

    .bouton,
    .lien-langue,
    .bouton-deconnexion,
    .pagination a,
    .pagination .page-courante,
    .combobox-option,
    .combobox-vide {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .pagination a,
    .pagination .page-courante {
        min-width: 44px;
    }

    .champ input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    .champ select,
    .combobox-input {
        min-height: 44px;
    }
}

/* Le paysage d'un telephone garde des marges compactes sans imposer une
   hauteur fixe au contenu ou au lecteur QR. */
@media (max-width: 992px) and (orientation: landscape) {
    .page-connexion {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .voile-menu {
        transition: none;
    }
}