/* =========================================================
   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%;
}

/* -------- Boutons segmentés de tri des résultats (thème orange) -------- */
.tri-group .btn {
    border-color: #F19B03;
    color: #F19B03;
    background-color: #fff;
}
.tri-group .btn:hover {
    background-color: #fff3e0;
    color: #D88702;
}
.tri-group .btn.active {
    background-color: #F19B03;
    border-color: #F19B03;
    color: #fff;
}

/* =========================================================
   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;
    }

    /* Bandeau version : très fin et compact, texte sur une ligne sur petit écran. */
    .version-banner {
        font-size: 0.78rem;
        padding: 0.1rem 0.6rem;
    }

    /* 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;
    }

    /* Boutons de tri des résultats : pleine largeur en très petit écran. */
    .tri-group {
        width: 100%;
    }
    .tri-group .btn {
        flex: 1 1 0;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Mot de l'auteur (popup nouveautés + page À propos) : en-tête avatar + citation centrée */
.welcome-author {
    background-color: #fff8ec;            /* crème orangé doux (couleur marque atténuée) */
    border: 1px solid #f5d9a3;
    border-radius: 10px;
    padding: 1.25rem 1rem;
}
.welcome-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F19B03 0%, #D88702 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.welcome-author .welcome-quote-mark {
    color: #F19B03;
    font-size: 1.5rem;
    opacity: 0.55;
}
.welcome-author .blockquote p {
    font-size: 1.00rem;
    line-height: 1.6;
    font-style: italic;
    color: #34495e;
}
.welcome-author .blockquote-footer {
    font-size: 0.9rem;
}

/* ===================== Article du jour (AOD) ===================== */
/* Carte collée sous la barre d'onglets : le filet violet du bas de #homeTabs sert de bord
   supérieur unique à la carte (fusion des deux lignes violettes, plus de double trait). */
/* Respiration de 50px sous la carte : la page ne s'arrête pas pile sous les pouces. */
.aod-zone {
    margin-bottom: 50px;
}
/* Squelette de chargement : réserve l'espace (limite le CLS) ; se replie si #aodZone[hidden]. */
.aod-skeleton {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aod-header {
    background-color: #fff6ea;
    border-bottom: 1px solid #f3d9b5;
}
.aod-header .fw-bold {
    color: #c97a00;
}
/* Article affiché EN ENTIER (pas de scroll) — lecture posée façon « mot de l'auteur ».
   En mode onglet il y a la place : la page défile naturellement, plus de zone scrollable interne.
   On cible #aodContent (ID) pour PRIMER sur la règle .article-content d'index.php
   (max-height:60vh + overflow-y:auto + background gris) que la modale article réutilise. */
#aodContent.aod-content {
    max-height: none;                   /* annule le 60vh : article complet */
    overflow: visible;                  /* plus de scroll interne */
    display: flow-root;                 /* contient l'avatar flottant (lettrine) */
    background-color: #faf8fe;          /* fond violet très clair, cohérent avec l'onglet */
    border: 1px solid #ece5f7;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}
/* En-tête « auteur CRPV » de l'article du jour : avatar rond + guillemet + nom.
   FLOTTÉ à gauche façon lettrine de journal : le texte de l'article s'enroule autour puis continue.
   Couleur posée en JS (stable/CRPV). */
.aod-author {
    float: left;
    width: 5.5rem;
    margin: 0 1.25rem 0.5rem 0;          /* espace à droite + dessous pour l'enroulement du texte */
    text-align: center;
}
.aod-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #6f42c1;                 /* fallback ; surchargé en JS par la couleur du CRPV */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .5rem;
    font-weight: 700;
    font-size: 1.4rem;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.aod-quote-mark {
    display: block;
    color: #6f42c1;                      /* fallback ; surchargé en JS */
    font-size: 1.5rem;
    opacity: 0.55;
    margin-bottom: .35rem;
}
.aod-author-name {
    font-weight: 600;
    color: #5a32a3;                      /* violet foncé lisible, cohérent thème onglets */
    font-size: 0.8rem;
    line-height: 1.2;
}
/* Mobile : avatar et colonne flottante légèrement réduits. */
@media (max-width: 575.98px) {
    .aod-author { width: 4.5rem; margin-right: 0.9rem; }
    .aod-avatar { width: 56px; height: 56px; font-size: 1.25rem; }
}

/* Mise en forme du contenu (définie côté search_results.php ; rendue globale pour l'AOD). */
.formatted-content {
    line-height: 1.6;
    text-align: justify;
}
.formatted-content p {
    margin-bottom: 1rem;
}
.formatted-content p:last-child {
    margin-bottom: 0;
}
/* Boutons de vote : état actif plein (vert / rouge). */
#aodVoteUp.active {
    background-color: #198754;
    border-color: #198754;
    color: #fff;
}
#aodVoteDown.active {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
/* Barre méta sous le titre : catégorie · date · F1 alignées à gauche.
   Le point médian n'est inséré qu'ENTRE éléments visibles (gère F1/quality vides hors debug,
   et la date absente sur les source_ref non datées). */
.aod-metabar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.aod-metabar > span:not(:empty) ~ span:not(:empty)::before {
    content: "·";
    color: #adb5bd;
    margin: 0 0.5rem;
}
/* Filet de séparation discret entre la barre méta et Source / DCI. */
.aod-sep {
    margin: 0.5rem 0;
    border: 0;
    border-top: 1px solid #ece5f7;
    opacity: 1;
}
/* DCI de l'article du jour : chips violet clair bien distinctes et espacées
   (corrige l'effet « collé » : le bg-light de Bootstrap est trop pâle sur fond blanc). */
.aod-dci-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}
#aodDCI .badge {
    margin-right: 0 !important;            /* l'espacement vient du gap du conteneur flex */
    background-color: #f3eefc !important;  /* surcharge bg-light, trop pâle pour distinguer les DCI */
    color: #4a3a6b !important;
    border: 1px solid #d8d0ec;
    font-weight: 500;
}
/* « M'a intéressé ? » centré et en plus gros. */
.aod-vote-label {
    font-size: 1.1rem;
}
.aod-vote .btn {
    min-width: 4.5rem;
}
/* Onglets d'accueil (Article du jour / Accueil) : bien visibles, thème orange du site. */
#homeTabs {
    border-bottom: 3px solid #6f42c1;
    gap: 0.4rem;
}
#homeTabs .nav-link {
    font-size: 1.15rem;
    font-weight: 700;
    color: #6f42c1;
    padding: 0.65rem 1.7rem;
    border: 2px solid #6f42c1;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background-color: #fff;
}
#homeTabs .nav-link:hover:not(.active) {
    color: #5a32a3;
    background-color: #f3eefc;
    border-color: #5a32a3;
}
#homeTabs .nav-link.active {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}