/* Page Journal Officiel — bandeau vert (charte Praxely) + encarts 50/50 */

.journal-officiel-home.jo-page {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.jo-intro .jo-title {
    color: var(--text-heading, #005a00);
    font-weight: 600;
}

/* Bandeau vert (aligné navbar / anciennes captures) */
.jo-green-banner {
    background: linear-gradient(
        135deg,
        var(--nav-gradient-start, #005a00) 0%,
        var(--nav-gradient-end, #00b300) 100%
    );
    color: #fff;
}

.jo-green-banner .h6 {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Carte héros : compacte, bandeau en haut (plus de grosse bordure gauche seule) */
.jo-hero.jo-hero--compact {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 90, 0, 0.07);
}

.jo-hero--compact .jo-green-banner {
    border-radius: 0.5rem 0.5rem 0 0;
}

.jo-hero-body {
    background: #fff;
}

/* Rangée 2/3 · 1/3 : alignement hauteur des cartes */
.jo-hero-row {
    --bs-gutter-x: 1rem;
}

/* Compteur modifications sous le texte (carte liste) */
.jo-kpi-inline {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 90, 0, 0.12);
}

.jo-kpi-label--inline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6268;
    font-weight: 600;
}

.jo-kpi-value--inline {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading, #005a00);
    font-variant-numeric: tabular-nums;
}

/* Encart TFR (colonne 1/3) */
.jo-tfr-encart {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 90, 0, 0.07);
}

.jo-tfr-encart .jo-green-banner {
    border-radius: 0.5rem 0.5rem 0 0;
}

.jo-tfr-body {
    background: #fff;
}

/* CTA principal (liste + TFR) : même style */
.jo-hero-cta {
    padding: 0.85rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0, 0, 128, 0.2);
}

.jo-hero-cta:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 128, 0.28);
}

@media (max-width: 991.98px) {
    .jo-hero-row .col-lg-4 {
        margin-top: 0.25rem;
    }
}

/* Encarts accès rapides (même famille que le héros) */
.jo-encart {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.jo-encart .jo-green-banner {
    border-radius: 0;
}

.jo-encart-body {
    background: #fff;
}

/*
 * Phrase explicative : hauteur alignée sur la phrase la plus longue
 * (« Vue unifiée des modifications… »), soit ~2 lignes en .small (0.875rem × lh 1.45).
 * Si le texte passe à 3 lignes (colonne très étroite), le bloc grandit au-delà du minimum.
 */
.jo-encart-blurb-slot {
    min-height: calc(2 * 0.875rem * 1.45 + 0.125rem);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
}

.jo-encart-blurb {
    line-height: 1.45;
}

.jo-encart-intro {
    margin-bottom: 0;
    line-height: 1.45;
}

/* Grille 3×2 pour les types de modification (5 liens : 3 + 2) */
.jo-encart .jo-type-links .jo-type-link-btn {
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 0.35rem 0.45rem;
    white-space: normal;
    hyphens: auto;
}

/* Même famille visuelle que jo-hero-cta (liste / TFR), en format compact */
.jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta {
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(0, 0, 128, 0.14);
    /* Hauteur homogène : même ligne de grille + min. 2 lignes de texte */
    min-height: 4.1rem;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.35rem;
}

/* Boutons "creux" pour les 2 encarts Accès rapides */
.jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta.jo-quick-cta {
    background-color: transparent;
    border: 0;
    color: var(--bs-primary, #0d6efd);
    box-shadow: none;
    /*
     * On garde un rendu "texte", mais avec des cellules de hauteur homogène
     * pour aligner les 2 encarts (certains libellés passent sur 2 lignes).
     */
    min-height: 2.75rem;
    height: 100%;
    padding: 0.25rem 0.25rem;
    justify-content: flex-start;
}

.jo-encart .jo-type-links .jo-quick-link-cell {
    align-items: stretch;
}

.jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta.jo-quick-cta:hover {
    background-color: transparent;
    border: 0;
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
    box-shadow: none;
}

.jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta.jo-quick-cta:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.35);
    outline-offset: 2px;
}

.jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta.jo-quick-cta:active {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.jo-encart .jo-type-links .jo-type-link-btn .fa-tag {
    font-size: 0.75em;
    align-self: center;
}

.jo-encart .jo-type-links .jo-quick-link-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

@media (min-width: 992px) {
    .jo-encart .jo-type-links .jo-type-link-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.5rem;
    }

    .jo-encart .jo-type-links .jo-type-link-btn.jo-encart-cta {
        min-height: 4.35rem;
    }
}

.jo-panel-intro {
    max-width: 42rem;
}

/* « Explorer dans le temps » : boutons pleine largeur (50 % / 50 %), même styles .jo-encart-cta */
.jo-explore-time .jo-type-link-btn.jo-encart-cta .fas {
    font-size: 0.85em;
    align-self: center;
}