/* =========================================================================
   SGDOME — correctifs d'affichage mobile
   Chargé en dernier, après style.css, pour surcharger le thème.
   Recette du 21/07/2026.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Débordement horizontal
   La page était plus large que l'écran : on pouvait la faire glisser
   latéralement et le contenu sortait du cadre. On coupe le débordement au
   niveau racine et on empêche les éléments larges (images, tableaux, blocs
   preformattés) de forcer la largeur du document.
   ------------------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991.98px) {

    .page-wrapper,
    .content,
    .container-fluid,
    .row {
        max-width: 100%;
    }

    /* Les marges négatives de .row débordent quand le parent n'a pas la
       gouttière correspondante : fréquent sur les conteneurs personnalisés. */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    img,
    svg,
    video,
    canvas,
    table {
        max-width: 100%;
        height: auto;
    }
}


/* -------------------------------------------------------------------------
   2. Logo du header sur mobile
   Le logo utilisait sa largeur naturelle, débordait du header et recouvrait
   le titre de la page. On le borne et on réserve la place du bouton burger.
   ------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .header .device-logo {
        max-width: 45vw;
        overflow: hidden;
    }

    .header .device-logo img,
    .header .logo2 {
        max-height: 38px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* Le titre de page ne doit plus passer sous le logo. */
    .page-header,
    .content-page-header {
        clear: both;
        padding-top: .5rem;
    }

    .content-page-header h5,
    .page-header h5,
    .page-header h3 {
        font-size: 1.05rem;
        line-height: 1.3;
        overflow-wrap: break-word;
    }
}


/* -------------------------------------------------------------------------
   3. Champs de saisie du code OTP
   Six cases de 60 px de haut avec une police de 2rem et le padding par
   défaut de .form-control : sur un écran de 390 px il ne restait qu'une
   trentaine de pixels utiles par case, et les chiffres étaient rognés.
   ------------------------------------------------------------------------- */
.otp-group {
    gap: 8px !important;
}

/* Les regles de la page OTP sont declarees dans un <style> du corps, donc
   apres cette feuille : d'ou le !important, necessaire pour les surcharger. */
.otp-input {
    min-width: 0 !important;   /* sans cela, flex refuse de reduire la case */
    flex: 1 1 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
}

@media (max-width: 575.98px) {

    .otp-group {
        gap: 6px !important;
    }

    .otp-input {
        height: 52px !important;
        font-size: 1.4rem !important;   /* neutralise aussi .fs-3 de Bootstrap */
        border-radius: 8px !important;
    }
}

@media (max-width: 360px) {

    .otp-group {
        gap: 4px !important;
    }

    .otp-input {
        height: 46px !important;
        font-size: 1.15rem !important;
    }
}


/* -------------------------------------------------------------------------
   4. Titres coupés en plein mot
   « Connexion Super Administrateur » s'affichait « Administrat / eur ».
   On interdit la césure à l'intérieur des mots et on réduit la taille sur
   les petits écrans.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.login-heading h3,
.card-title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

@media (max-width: 575.98px) {

    .login-heading h3 {
        font-size: 1.3rem !important;
        line-height: 1.35;
    }

    .login-container {
        padding: 12px !important;
    }
}


/* -------------------------------------------------------------------------
   4 bis. Lisibilité et confort de saisie sur mobile

   Le thème descend le texte des champs à 14 px. Deux conséquences :
   la saisie est difficile à relire, et surtout iOS déclenche un zoom
   automatique dès qu'un champ de moins de 16 px reçoit le focus, ce qui
   décale toute la mise en page. 16 px est donc un plancher, pas un choix
   esthétique.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .form-control,
    .form-select,
    .input-group-text,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 48px;
        padding: .65rem .85rem;
        line-height: 1.35;
    }

    textarea,
    textarea.form-control {
        min-height: 96px;
    }

    /* Le placeholder restait plus petit que la valeur saisie. */
    .form-control::placeholder,
    input::placeholder,
    textarea::placeholder {
        font-size: 15px;
        opacity: .65;
    }

    /* Libellés : lisibles sans être plus lourds que la valeur du champ. */
    .form-label,
    label.form-label,
    .col-form-label {
        font-size: .95rem;
        font-weight: 600;
        margin-bottom: .35rem;
    }

    /* Cible tactile : 44 px est le minimum recommandé. */
    .btn {
        min-height: 46px;
        font-size: 1rem;
        padding: .6rem 1rem;
    }

    .btn-sm {
        min-height: 38px;
        font-size: .9rem;
    }

    /* Champs fichier : le bouton « Choisir un fichier » debordait. */
    input[type="file"].form-control {
        padding: .5rem .6rem;
        font-size: 15px !important;
    }

    input[type="file"]::file-selector-button {
        font-size: 15px;
        padding: .5rem .75rem;
        margin-inline-end: .75rem;
    }

    /* Cases a cocher et boutons radio : trop petits pour le doigt. */
    .form-check-input {
        width: 1.15em;
        height: 1.15em;
        margin-top: .15em;
    }

    .form-check-label {
        font-size: .95rem;
        padding-left: .15rem;
    }
}


/* -------------------------------------------------------------------------
   4 ter. Formulaire de connexion : densité
   La carte occupait presque tout l'ecran pour deux champs, et l'en-tete
   ministeriel etait rogne en haut de page.
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    .login-card .card-body,
    .login-content {
        padding: 1.25rem !important;
    }

    .login-heading {
        margin-bottom: 1.25rem !important;
    }

    /* Le bloc armoiries + intitule du ministere garde sa taille d'origine :
       il n'etait pas trop grand, il etait simplement au-dessus de la zone
       visible au moment de la capture. On se contente de reduire la marge
       au-dessus pour qu'il tienne dans le premier ecran. */
    .superadmin-login-page {
        padding-top: 16px !important;
    }
}


/* -------------------------------------------------------------------------
   4 quater. Journal des validations : commentaires tronques

   La colonne « Commentaire » ne revenait pas a la ligne : le tableau
   debordait en largeur et le motif de reserve comme la reponse du demandeur
   etaient coupes au bord droit, derriere une barre de defilement. C'est
   pourtant l'information sur laquelle le validateur fonde sa decision.
   ------------------------------------------------------------------------- */
.modal table td,
.modal table th {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    vertical-align: top;
}

/* La colonne Commentaire prend l'espace restant, les autres restent compactes. */
.modal table td:last-child,
.modal table th:last-child {
    min-width: 260px;
}

.modal table th:not(:last-child),
.modal table td:not(:last-child) {
    white-space: nowrap;
    width: 1%;
}

@media (max-width: 767.98px) {

    .modal table td:last-child,
    .modal table th:last-child {
        min-width: 160px;
    }

    /* En dessous de cette largeur, un defilement horizontal reste
       preferable a des colonnes illisibles. */
    .modal .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}


/* -------------------------------------------------------------------------
   5. Confort général sur petits écrans
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Les modales occupaient une largeur fixe et débordaient. */
    .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    /* Les groupes de boutons d'action (Valider / Réserver / Rejeter)
       tenaient sur une seule ligne et sortaient de l'écran. */
    .modal-footer {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .modal-footer > .btn {
        flex: 1 1 auto;
    }

    /* Les barres de filtres DataTables se chevauchaient. */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: left;
        width: 100%;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-left: 0;
    }
}