/* =========================================================
   perso.css — Surcharges responsive CRPVue
   Toutes les règles sont placées sous media queries mobiles
   afin de ne provoquer AUCUNE régression sur écran ≥ 768px.
   ========================================================= */

/* -------- Sécurité globale (toutes tailles) -------- */
/* Empêche un scroll horizontal résiduel quel que soit l'écran. */
body {
    overflow-x: hidden;
}

/* Image fluide par défaut sur tout le site (déjà fait par Bootstrap mais on consolide). */
img {
    max-width: 100%;
    height: auto;
}

/* Largeur de la barre de recherche dans le header.
   Reproduit le comportement du style inline supprimé (style="width: 95%"). */
.header-search-wrap {
    width: 95%;
}

/* =========================================================
   Tablette et mobile (< 768px)
   ========================================================= */
@media (max-width: 767.98px) {

    /* Modale fullscreen sur tablette/mobile pour éviter les marges étroites
       qui rognent le contenu (override de la règle .modal-lg { max-width: 80% }
       du index.php, désormais limitée au desktop). */
    .modal-lg,
    .modal-xl {
        max-width: 100%;
        margin: 0;
    }

    .modal-lg .modal-content,
    .modal-xl .modal-content {
        border-radius: 0;
        min-height: 100vh;
    }

    /* Wrap de la rangée des badges sur les cards de résultats. */
    .result-card .card-body .d-flex.align-items-center.gap-2 {
        flex-wrap: wrap;
    }
}

/* =========================================================
   Mobile (< 576px) — refonte mobile-first
   ========================================================= */
@media (max-width: 575.98px) {

    /* ---------- Containers globaux ---------- */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h5, .h5 { font-size: 1.05rem; }

    /* ---------- Header / barre de recherche Tagify ----------
       Le gros du responsive header (wrap input-group, toggle ET/OU,
       boutons 44px, dropdown Tagify) est déjà géré dans header.php
       sous le breakpoint < 768px, donc actif aussi en < 576px.
       On n'ajoute ici que des ajustements purement < 576px. */

    /* Logo encore plus compact en très petit écran (header.php met 44px à < 768px). */
    .bg-white.border-bottom.shadow-sm img.img-fluid {
        height: 38px !important;
    }

    /* Tagify mobile : trois corrections superposées
       1. header.php force `display: flex; align-items: center;` sans
          flex-wrap → on restaure le comportement vendor (flex-wrap,
          alignement haut/gauche) pour que tags + input se placent
          proprement et que la barre n'empile pas verticalement le vide.
       2. header.php ligne 475 met `text-align: center` sur
          `.bg-white .row.align-items-center` (pour centrer logos),
          ce qui CENTRE le placeholder Tagify (::before est inline-block,
          il hérite du text-align). On force `text-align: left` sur le
          placeholder pour le ramener à gauche. */
    #headerSearchForm .tagify {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
    }

    #headerSearchForm .tagify__input,
    #headerSearchForm .tagify__input::before {
        text-align: left !important;
    }

    /* ---------- Cards de résultats ---------- */
    /* On garde le layout flex-row par défaut (titre/badges à gauche en
       flex-grow:1, bouton PDF à droite). Empiler verticalement créait un
       gros vide entre les badges et le contenu de l'article (à cause du
       min-height 44px du bouton sur sa propre ligne). */
    .result-card-header {
        gap: 0.5rem;
    }

    /* Bouton PDF compact mais touch-friendly (44×44 iOS/WCAG). */
    .result-card-header > div:not(.flex-grow-1) .btn {
        min-width: 40px;
        min-height: 40px;
        padding: 0.35rem 0.55rem;
    }

    /* La rangée des badges wrap proprement et se densifie. */
    .result-card .card-body .d-flex.align-items-center.gap-2 {
        gap: 0.4rem !important;
    }

    .result-card .card-body .d-flex.align-items-center.gap-2 .badge,
    .result-card .card-body .d-flex.align-items-center.gap-2 .text-muted.small {
        font-size: 0.72rem;
    }

    /* Le score-badge en absolute risque de chevaucher : on le réduit. */
    .score-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.5rem !important;
        right: 8px !important;
    }

    /* Padding interne des cards réduit pour laisser plus de place au contenu. */
    .result-card .card-body {
        padding: 1rem 0.85rem;
    }

    /* ---------- Modales (article + bulletin) ---------- */
    .modal-body {
        padding: 0.75rem;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-header .modal-title {
        font-size: 1rem;
    }

    .modal-footer {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    /* Contenu d'article dans la modale : padding réduit, ligne plus serrée. */
    .article-content {
        padding: 0.85rem !important;
        line-height: 1.6 !important;
    }

    /* ---------- Pages secondaires (charte, aide, stats, bibliothèque, etc.) ---------- */

    /* Tables qui débordent : scroll horizontal local au lieu de casser la page. */
    .table-responsive,
    table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Bloc de code / preformaté : éviter le débordement. */
    pre, code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Cartes / colonnes : aérer verticalement quand elles s'empilent. */
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }

    /* Titre de page (souvent dans un .container avec marges) : moins de padding. */
    .container, .container-md, .container-lg {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Navigation top (barre fine 26px) : police plus petite pour faire tenir les liens. */
    .top-nav .nav-link-top {
        font-size: 0.78rem !important;
    }

    .top-nav .nav-separator {
        display: none;
    }
}