/**
 * Règles mobiles du paquet « coquille »
 * Barre du haut, menu latéral, barre de raccourcis du bas, pages de
 * connexion, pages d'erreur (403, 404) et manuel.
 *
 * Tout est sous media queries : l'affichage sur ordinateur ne change pas.
 * Les nouvelles classes portent le préfixe « coquille- ».
 * Téléphones visés : 360 à 420 px de large.
 */

/* ============================================================
   Barre du haut, menu latéral, barre de raccourcis (< 992 px)
   ============================================================ */
@media (max-width: 991.98px) {
    /* Barre du haut moins haute : ses boutons font déjà 44 px */
    .navbar.coquille-barre {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Une seule ligne : les outils ne passent plus sous le titre */
    .navbar.coquille-barre > .container-fluid {
        flex-wrap: nowrap;
    }

    /* Titre de la page : occupe toute la place libre, deux lignes au plus */
    .navbar .coquille-titre {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        flex: 1 1 0%;
        min-width: 0;
        max-width: none !important;
        margin-right: 0.5rem;
        padding: 0;
        font-size: 1rem !important;
        line-height: 1.25;
        white-space: normal;
        overflow: hidden;
        overflow-wrap: anywhere;
    }

    /* Boutons de la barre : zone tactile de 44 px */
    .navbar .coquille-btn-barre {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    /* Menu du compte : lignes et boutons de langue de 44 px, textes de 14 px au moins */
    .navbar .coquille-menu-compte .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    .navbar .coquille-menu-compte .btn-group .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        font-size: 1rem;
    }

    .navbar .coquille-menu-compte small,
    .navbar .coquille-menu-compte .small {
        font-size: 0.875rem;
    }

    /* Nom de boutique long : il passe à la ligne au lieu de déborder */
    .navbar .coquille-menu-compte .badge {
        font-size: 0.875rem;
        line-height: 1.3;
        white-space: normal;
        text-align: end;
    }

    /* Téléphone tenu en largeur : le menu du compte défile, « Déconnexion »
       reste accessible */
    .navbar .coquille-menu-compte {
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Saut vers une ancre ou un champ : ni la barre du haut ni la barre de
       raccourcis ne recouvrent l'élément visé */
    html:has(.mobile-bottom-nav) {
        scroll-padding-top: 64px;
        scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }

    /* Menu latéral : au-dessus de la barre de raccourcis, à la hauteur
       réellement visible (barre d'adresse du navigateur déduite) */
    .sidebar {
        height: 100vh;
        height: 100dvh;
        z-index: 1045;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior: contain;
        visibility: hidden;
    }

    /* Menu ouvert seulement : fermé, il ne reçoit plus le focus clavier */
    .sidebar.show {
        visibility: visible;
    }

    .sidebar-overlay {
        z-index: 1042;
    }

    .sidebar .sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 0.5rem;
    }

    /* Contenu dégagé de la barre de raccourcis (61 px + encoche).
       min-width: 0 : sans lui, la zone de contenu (élément flex) prenait la
       largeur du plus large tableau de la page et débordait de l'écran au
       lieu de laisser .table-responsive défiler. */
    .main-content {
        min-width: 0;
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }

    /* Barre de raccourcis : cinq cases égales, libellés de 14 px */
    .mobile-bottom-nav {
        gap: 2px;
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    }

    .mobile-nav-item {
        flex: 1 1 0;
        min-width: 0;
        max-width: 120px;
        min-height: 52px;
        padding: 4px 2px;
    }

    .mobile-nav-item i {
        font-size: 1.35rem;
        line-height: 1;
        margin-bottom: 4px;
    }

    .mobile-nav-item span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.875rem;
        line-height: 1.2;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Clavier ouvert (anciens navigateurs Android) : la barre ne recouvre
       plus le champ en cours de saisie */
    body.coquille-clavier .mobile-bottom-nav {
        display: none;
    }
}

/* ============================================================
   Téléphone (< 576 px)
   ============================================================ */
@media (max-width: 575.98px) {
    /* style.css réduit le titre à 120 px et 0,9 rem : on le rend lisible */
    .navbar .coquille-titre {
        font-size: 1rem !important;
        max-width: none !important;
    }

    /* Le thème passe dans le menu du compte : place gagnée pour le titre */
    .navbar .coquille-theme-barre {
        display: none;
    }

    .navbar .coquille-compte-toggle::after {
        display: none;
    }

    /* ---------- Connexion, mot de passe oublié, réinitialisation ---------- */
    .coquille-auth .auth-wrapper {
        min-height: 100vh;
        min-height: 100dvh;
        padding: 1rem 0.75rem;
    }

    .coquille-auth .auth-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .coquille-auth .auth-logo {
        width: 64px;
        height: 64px;
        margin-bottom: 0.5rem;
    }

    .coquille-auth .auth-body {
        padding: 1.25rem;
    }

    /* 16 px dans les champs : pas de zoom automatique à la saisie */
    .coquille-auth .form-control {
        min-height: 48px;
        font-size: 1rem;
    }

    .coquille-auth .input-group-text,
    .coquille-auth .input-group .btn {
        min-width: 48px;
        justify-content: center;
    }

    .coquille-auth .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }

    .coquille-auth .small,
    .coquille-auth small,
    .coquille-auth .form-text {
        font-size: 0.875rem;
    }

    .coquille-auth .coquille-auth-lien {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 1rem;
    }

    .coquille-auth .coquille-auth-langues .btn {
        min-width: 48px;
    }

    /* ---------- Pages d'erreur 403 et 404 ---------- */
    .coquille-erreur .coquille-erreur-icone {
        font-size: 4rem !important;
    }

    .coquille-erreur .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
    }
}

/* ============================================================
   Manuel (colonne unique sous 900 px, comme sa propre feuille)
   « screen » : l'impression garde la mise en page du manuel.
   ============================================================ */
@media screen and (max-width: 900px) {
    .coquille-manuel nav.sommaire {
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Sommaire replié en une barre : 80 liens ne précèdent plus le texte */
    .coquille-manuel nav.sommaire summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 0 14px;
        border: 1px solid var(--rule-fort);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
    }

    .coquille-manuel nav.sommaire summary h2 {
        margin: 0;
        font-size: 1rem;
        letter-spacing: 0.04em;
        color: var(--ink);
    }

    .coquille-manuel nav.sommaire summary::after {
        content: "+";
        font-size: 1.5rem;
        line-height: 1;
        color: var(--accent);
    }

    .coquille-manuel nav.sommaire details[open] > summary::after {
        content: "\2212";
    }

    .coquille-manuel nav.sommaire details[open] > ol {
        margin-top: 14px;
    }

    /* Liens du sommaire : 44 px de haut */
    .coquille-manuel nav.sommaire a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .coquille-manuel nav.sommaire ul a {
        font-size: 0.9375rem;
    }

    .coquille-manuel .coquille-manuel-imprimer {
        display: none;
    }

    /* Bouton flottant de retour au sommaire, une fois le sommaire dépassé */
    .coquille-manuel .coquille-manuel-haut.coquille-visible {
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        font-size: 1.4rem;
        text-decoration: none;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    }

    .coquille-manuel footer.fin {
        padding-bottom: 88px;
    }
}

@media screen and (max-width: 575.98px) {
    .coquille-manuel .couverture .dedans {
        gap: 12px;
        padding: 20px 16px 24px;
    }

    .coquille-manuel .retour {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        font-size: 1rem;
    }

    .coquille-manuel .chapo {
        font-size: 1.05rem;
    }

    .coquille-manuel .page {
        padding: 16px 10px 48px;
    }

    .coquille-manuel .chapitre {
        padding: 18px 14px 20px;
        border-radius: 8px;
    }

    .coquille-manuel .chapitre h2 {
        font-size: 1.45rem;
    }

    .coquille-manuel .chapitre h3 {
        margin-top: 24px;
        font-size: 1.1rem;
    }

    .coquille-manuel .chapitre ol,
    .coquille-manuel .chapitre ul {
        padding-left: 20px;
    }

    .coquille-manuel .note,
    .coquille-manuel .attention {
        padding: 12px 14px;
    }

    .coquille-manuel .note::before,
    .coquille-manuel .attention::before,
    .coquille-manuel figcaption {
        font-size: 0.875rem;
    }

    /* Tableaux : une fiche par ligne, première colonne en titre */
    .coquille-manuel .chapitre table,
    .coquille-manuel .chapitre tbody,
    .coquille-manuel .chapitre tr,
    .coquille-manuel .chapitre td {
        display: block;
        width: 100%;
    }

    .coquille-manuel .chapitre thead {
        display: none;
    }

    .coquille-manuel .chapitre tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--rule);
    }

    .coquille-manuel .chapitre tbody tr:last-child {
        border-bottom: none;
    }

    .coquille-manuel .chapitre td {
        padding: 2px 0;
        border: none;
    }

    .coquille-manuel .chapitre td:first-child {
        font-weight: 600;
        color: var(--ink);
    }

    /* Tableaux à trois colonnes : libellé de colonne repris au-dessus */
    .coquille-manuel .chapitre td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-top: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .coquille-manuel footer.fin {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* ============================================================
   Thème sombre : le nom de l'utilisateur, en tête du menu du compte,
   s'affichait en gris foncé sur fond gris foncé (invisible)
   ============================================================ */
[data-theme="dark"] .navbar .coquille-menu-compte {
    color: var(--text-primary);
}

/* ============================================================
   Impression : la barre de raccourcis (fixe) sortait sur chaque page
   ============================================================ */
@media print {
    .mobile-bottom-nav {
        display: none !important;
    }
}