/* ======================================================
   JUSDIVINUM — RESPONSIVE SYSTEM OVERRIDE
   Site-wide adaptation for phones, tablets and desktops
   ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

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

input, select, textarea, button {
    max-width: 100%;
    font: inherit;
}

pre, code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

table {
    max-width: 100%;
}

.responsive-table,
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent long words and URLs from forcing horizontal overflow */
p, li, dd, td, th, .card, .article-card, .summary-card,
[class*="content"], [class*="description"], [class*="text"] {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Common containers */
.container, .wrapper, .content, .page-content, .page-section,
main, section {
    min-width: 0;
}

/* Flexible grids: safely collapse where cards are too narrow */
[class*="grid"], [class*="cards"] {
    min-width: 0;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    body { font-size: clamp(14px, 1.8vw, 17px); }

    .container, .page-container, .page-content, .content-wrapper,
    .hero-content, .section-content, .main-content {
        width: min(100% - 32px, 1100px) !important;
        margin-left: auto;
        margin-right: auto;
    }

    [class*="grid"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }

    .page-hero h1, .hero h1, h1 {
        font-size: clamp(1.8rem, 5vw, 3rem);
        line-height: 1.15;
    }

    h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); }
    h3 { font-size: clamp(1.15rem, 3vw, 1.6rem); }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    body {
        font-size: 15px;
        line-height: 1.55;
    }

    main {
        width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container, .page-container, .page-content, .content-wrapper,
    .hero-content, .section-content, .main-content {
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    .page-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page-hero, .hero {
        min-height: auto !important;
        padding: 52px 16px 42px !important;
    }

    .page-hero-content {
        width: 100%;
    }

    .page-hero h1, .hero h1, h1 {
        font-size: clamp(1.65rem, 8vw, 2.35rem) !important;
        line-height: 1.15 !important;
    }

    h2 { font-size: clamp(1.35rem, 6vw, 1.85rem) !important; }
    h3 { font-size: clamp(1.08rem, 5vw, 1.4rem) !important; }

    /* Cards and panels */
    .card, .article-card, .summary-card, .identity-card,
    .official-law-card, .mbomi-sheet, .birthday-banner,
    [class*="card"], [class*="panel"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Force common multi-column layouts to stack */
    .identity-grid,
    .article-navigation,
    .official-law-buttons,
    .official-law-features,
    .summary-header,
    .birthday-banner,
    [class*="two-column"],
    [class*="three-column"],
    [class*="four-column"] {
        grid-template-columns: 1fr !important;
        flex-wrap: wrap;
    }

    .article-navigation,
    .official-law-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .article-navigation .btn,
    .official-law-buttons .official-btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Generic grid collapse */
    [class*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Horizontal navigation must not overflow */
    nav, .nav-links, .menu, .tabs, .filters, .category-nav {
        max-width: 100%;
    }

    /* Buttons and controls */
    button, .btn, [class*="button"] {
        min-height: 42px;
        max-width: 100%;
    }

    /* Forms */
    input, select, textarea {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Tables */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        white-space: normal;
        -webkit-overflow-scrolling: touch;
    }

    /* Common media/content blocks */
    iframe {
        width: 100%;
        max-width: 100%;
    }

    /* Reduce excessive fixed spacing on small screens */
    [style*="width:"] {
        max-width: 100% !important;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {
    body { font-size: 14px; }

    .container, .page-container, .page-content, .content-wrapper,
    .hero-content, .section-content, .main-content {
        width: calc(100% - 20px) !important;
    }

    .page-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .page-hero, .hero {
        padding: 40px 10px 32px !important;
    }

    .page-badge, .badge {
        font-size: .72rem;
    }

    .summary-header,
    .birthday-banner,
    .official-law-top {
        gap: 12px !important;
    }

    .summary-icon, .birthday-icon, .official-law-icon {
        flex: 0 0 auto;
    }
}


/* ======================================================
   CORRECTIONS CIBLEES — MBOMI / QRDC
   ====================================================== */

/* MBOMI : calendrier plus compact sans perdre la lisibilité */
.calendar-section{
    margin:48px auto;
    padding:32px;
}
.calendar-header-wrapper{
    padding:6px 6px 16px;
    margin-bottom:16px;
}
.calendar-top-bar{ margin-bottom:10px; }
.calendar-main-title-block{ margin-bottom:14px; }
.calendar-headline{ font-size:1.7rem; }
.calendar-subtext{ font-size:.88rem; }
.month-selector-card{ padding:6px 10px 6px 16px; gap:12px; }
.current-month-display{ font-size:1.25rem; min-width:115px; }
.nav-btn{ width:34px; height:34px; }
.calendar-weekdays{ gap:7px; margin-bottom:8px; }
.calendar-day-name{ font-size:.7rem; padding:5px 0; letter-spacing:.8px; }
#calendar{ gap:7px; }
.calendar-day{ min-height:76px; padding:8px 9px; border-radius:14px; }
.calendar-day .number{ font-size:1rem; }
.calendar-day.event .event-badge-chip{ margin-top:4px; padding:3px 7px; font-size:.61rem; }
.month-dashboard{ margin-top:22px; }
.month-grid{ gap:14px; }
.month-card{ padding:18px; }

/* QRDC : le panneau du héros ne doit jamais rester à 46 % sur mobile */
@media (max-width: 768px){
    .qrdc-app{
        width:100% !important;
        padding:18px 12px 50px !important;
    }
    .qrdc-app .hero{
        display:block !important;
        min-height:auto !important;
        padding:16px !important;
        border-radius:24px !important;
        background-position:center top !important;
    }
    .qrdc-app .hero-left{
        width:100% !important;
        max-width:none !important;
        padding:26px 20px !important;
        border-radius:22px !important;
        min-width:0 !important;
    }
    .qrdc-app .hero-label{
        width:100%;
        white-space:normal !important;
        font-size:.68rem !important;
        letter-spacing:.7px !important;
        line-height:1.35;
    }
    .qrdc-app .hero h1{
        font-size:clamp(1.75rem, 8vw, 2.45rem) !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
        hyphens:none !important;
    }
    .qrdc-app .hero h2{
        font-size:1.05rem !important;
        line-height:1.45 !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }
    .qrdc-app .hero p{
        font-size:.94rem !important;
        line-height:1.65 !important;
        overflow-wrap:normal !important;
        word-break:normal !important;
    }
    .qrdc-app .hero-features{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }
    .qrdc-app .hero-features > div{
        width:100% !important;
        min-width:0 !important;
        justify-content:flex-start !important;
    }
    .qrdc-app .hero-buttons{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }
    .qrdc-app .hero-buttons a{
        width:100% !important;
        padding:14px 18px !important;
    }

    .calendar-section{
        width:calc(100% - 16px) !important;
        margin:28px auto !important;
        padding:18px 10px !important;
        border-radius:20px !important;
    }
    .calendar-header-wrapper{ padding:2px 2px 12px !important; }
    .calendar-headline{ font-size:1.28rem !important; }
    .calendar-subtext{ font-size:.78rem !important; }
    .calendar-nav-toolbar{ gap:8px !important; }
    .month-selector-card{ width:100% !important; padding:5px 8px 5px 10px !important; }
    .current-month-display{ font-size:1rem !important; min-width:0 !important; }
    .calendar-weekdays{ gap:3px !important; }
    .calendar-day-name{ font-size:.56rem !important; letter-spacing:0 !important; }
    #calendar{ gap:3px !important; }
    .calendar-day{ min-height:48px !important; padding:4px !important; border-radius:9px !important; }
    .calendar-day .number{ font-size:.78rem !important; }
    .calendar-day.event .event-badge-chip{
        margin-top:2px !important;
        padding:2px 4px !important;
        font-size:.45rem !important;
        border-radius:5px !important;
    }
    .event-dot-glow{ width:4px !important; height:4px !important; }
}

@media (max-width: 390px){
    .qrdc-app .hero-left{ padding:22px 16px !important; }
    .qrdc-app .hero-label{ font-size:.62rem !important; }
    .calendar-section{ padding:14px 7px !important; }
    .calendar-day{ min-height:43px !important; }
    .calendar-day.event .event-badge-chip{ display:none !important; }
}


/* ======================================================
   V4 — CORRECTIONS CIBLÉES
   ====================================================== */

/* 1. MBOMI : calendrier mensuel compact, lisible et stable */
.mbomi-calendar-wrap,
.calendar-section,
#calendar {
    min-width: 0;
}

.calendar-section {
    width: min(760px, calc(100% - 32px)) !important;
    margin: 34px auto 42px !important;
}

.calendar-header-wrapper {
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
    border-radius: 24px !important;
}

.calendar-top-bar {
    margin-bottom: 10px !important;
}

.calendar-main-title-block {
    margin-bottom: 12px !important;
}

.calendar-headline {
    font-size: clamp(1.35rem, 3vw, 2rem) !important;
    margin: 0 0 6px !important;
}

.calendar-subtext {
    font-size: .9rem !important;
    line-height: 1.4 !important;
}

.month-selector-card {
    min-height: 54px !important;
    padding: 7px 12px !important;
    border-radius: 18px !important;
}

.current-month-display {
    font-size: clamp(1.05rem, 2.4vw, 1.35rem) !important;
}

.calendar-nav-btns {
    gap: 8px !important;
}

.nav-btn,
.calendar-header button {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: .9rem !important;
}

/* Même logique qu'un calendrier mensuel classique */
.calendar-weekdays,
#calendarWeekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 0 4px !important;
}

.calendar-day-name {
    padding: 7px 2px !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .92rem !important;
}

#calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 10px !important;
    border-radius: 24px !important;
}

.calendar-day {
    min-height: 62px !important;
    height: 62px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.calendar-day:hover {
    transform: none !important;
}

.calendar-day .number {
    font-size: 1rem !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.calendar-day .count,
.calendar-day .event-title,
.calendar-day .event-label {
    display: none !important;
}

.calendar-day.event::after {
    content: "" !important;
    position: static !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    margin-top: 5px !important;
    background: var(--gold, #caa52d) !important;
    font-size: 0 !important;
}

.calendar-day.today {
    border-width: 2px !important;
}

@media (max-width: 768px) {
    .calendar-section {
        width: min(680px, calc(100% - 20px)) !important;
        margin: 20px auto 30px !important;
    }

    .calendar-header-wrapper {
        padding: 14px 12px !important;
        border-radius: 18px !important;
    }

    .calendar-top-bar,
    .calendar-main-title-block {
        display: none !important;
    }

    .month-selector-card {
        width: 100% !important;
        min-height: 48px !important;
        padding: 5px 8px !important;
    }

    .calendar-weekdays,
    #calendarWeekdays {
        gap: 2px !important;
    }

    .calendar-day-name {
        padding: 5px 1px !important;
        font-size: .78rem !important;
    }

    #calendar {
        gap: 2px !important;
        padding: 6px !important;
        border-radius: 18px !important;
    }

    .calendar-day {
        min-height: 44px !important;
        height: 44px !important;
        padding: 3px !important;
        border-radius: 9px !important;
    }

    .calendar-day .number {
        font-size: .9rem !important;
    }

    .calendar-day.event::after {
        width: 4px !important;
        height: 4px !important;
        margin-top: 3px !important;
    }
}

/* 2. Accès rapides : sur index, disparition immédiate pendant le défilement */
body.home-quick-scroll #quick-access-zone {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateY(-12px) !important;
    pointer-events: none !important;
    transition: max-height .25s ease, opacity .18s ease, transform .25s ease,
                padding .25s ease, margin .25s ease !important;
}

body.home-quick-scroll #quick-access-zone * {
    pointer-events: none !important;
}

body:not(.home-quick-scroll) #quick-access-zone {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
}

/* 3. QRDC : sur téléphone, aucune barre d'en-tête */
@media (max-width: 768px) {
    body.qrdc-mobile-clean #mainHeader {
        display: none !important;
    }

    body.qrdc-mobile-clean .qrdc-app {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body.qrdc-mobile-clean .qrdc-app .hero {
        margin-top: 0 !important;
    }
}


/* ======================================================
   V5 — DÉPLIANTS : COLLECTION PLUS COMPACTE
   Inspirée du principe appliqué au calendrier MBOMI :
   largeur maîtrisée, centrage et proportions harmonieuses.
   ====================================================== */

.document-section,
.documents-section,
#documentGrid {
    min-width: 0;
}

/* La collection ne s'étale plus inutilement sur toute la largeur. */
.document-grid {
    width: min(1180px, calc(100% - 40px)) !important;
    margin: 38px auto 70px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(235px, 280px)) !important;
    justify-content: center !important;
    gap: 24px !important;
}

/* Chaque dépliant conserve une taille élégante et nettement plus compacte. */
.document-card {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
}

/* Les couvertures sont réduites sans déformation. */
.document-card img {
    height: 175px !important;
    object-fit: cover !important;
}

/* Contenu et typographie proportionnellement resserrés. */
.document-content {
    padding: 18px !important;
}

.document-category {
    padding: 6px 12px !important;
    margin-bottom: 12px !important;
    font-size: .68rem !important;
}

.document-card h3 {
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

.document-card p {
    font-size: .88rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
}

.document-meta {
    gap: 7px !important;
    margin-bottom: 16px !important;
    padding-top: 13px !important;
}

.document-meta span {
    font-size: .72rem !important;
}

.document-actions {
    gap: 8px !important;
}

.document-actions a,
.document-actions button {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: .78rem !important;
}

/* Tablettes : même philosophie compacte, avec plusieurs cartes si l'espace le permet. */
@media (max-width: 1024px) {
    .document-grid {
        width: min(760px, calc(100% - 32px)) !important;
        grid-template-columns: repeat(auto-fit, minmax(220px, 255px)) !important;
        gap: 20px !important;
    }

    .document-card {
        max-width: 255px !important;
    }

    .document-card img {
        height: 160px !important;
    }
}

/* Téléphones : une carte à la fois, mais volontairement étroite et centrée. */
@media (max-width: 768px) {
    .document-grid {
        width: min(360px, calc(100% - 28px)) !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin: 24px auto 48px !important;
    }

    .document-card {
        width: 100% !important;
        max-width: 330px !important;
    }

    .document-card img {
        height: 165px !important;
    }

    .document-content {
        padding: 17px !important;
    }

    .document-card h3 {
        font-size: 1.12rem !important;
    }

    .document-card p {
        font-size: .85rem !important;
    }
}

/* Très petits écrans : la carte reste compacte sans être écrasée. */
@media (max-width: 420px) {
    .document-grid {
        width: min(320px, calc(100% - 22px)) !important;
    }

    .document-card {
        max-width: 300px !important;
    }

    .document-card img {
        height: 150px !important;
    }
}


/* ======================================================
   V6 — DÉPLIANTS : CARTES SIMPLIFIÉES ET PLUS COURTES
   Seuls restent : couverture, domaine, intitulé, actions.
   ====================================================== */

/* Sécurité : toute ancienne légende ou métadonnée est masquée. */
#documentGrid .document-card > p,
#documentGrid .document-card .document-content > p,
#documentGrid .document-meta {
    display: none !important;
}

/* Carte compacte sans espaces réservés à la légende supprimée. */
#documentGrid .document-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#documentGrid .document-card img {
    flex: 0 0 auto !important;
}

#documentGrid .document-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 14px 16px 16px !important;
    gap: 0 !important;
}

#documentGrid .document-category {
    margin: 0 0 9px !important;
}

#documentGrid .document-card h3 {
    margin: 0 0 14px !important;
    min-height: 0 !important;
}

/* Les deux actions constituent désormais la fin immédiate de la carte. */
#documentGrid .document-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
}

#documentGrid .document-actions a,
#documentGrid .document-actions button {
    min-height: 36px !important;
    padding: 8px 6px !important;
    white-space: nowrap !important;
}

/* Le même rendu compact sur tous les écrans. */
@media (max-width: 768px) {
    #documentGrid .document-content {
        padding: 13px 14px 14px !important;
    }

    #documentGrid .document-card h3 {
        margin-bottom: 12px !important;
        font-size: 1.05rem !important;
        line-height: 1.28 !important;
    }

    #documentGrid .document-actions a,
    #documentGrid .document-actions button {
        min-height: 35px !important;
        font-size: .74rem !important;
    }
}