:root {
    --journal-blue: #173b58;
    --journal-sky: #6f9fc7;
    --journal-soft: #edf6fc;
    --journal-line: rgba(23, 59, 88, .14);
    --journal-muted: #5d6f7d;
    --journal-radius: 18px;
}

/* Conservé pour les articles publiés avant la refonte. */
.nbh-journal-lead {
    margin: 0 0 28px;
    padding: 20px 22px;
    border-left: 5px solid var(--journal-sky);
    border-radius: 0 16px 16px 0;
    background: var(--journal-soft);
    color: #29485f;
    font-size: 1.05em;
    line-height: 1.85;
}

/* ---------------------------------------------------------------- fiche récap */

.nbh-journal-summary {
    margin: 0 0 44px;
    padding: 22px 24px;
    border: 1px solid var(--journal-line);
    border-radius: var(--journal-radius);
    background: #fff;
    box-shadow: 0 10px 30px rgba(23, 59, 88, .06);
}

.nbh-journal-summary strong {
    display: block;
    margin-bottom: 14px;
    color: var(--journal-blue);
    font-size: 1.12em;
}

.nbh-journal-summary ul {
    margin: 0;
    padding-left: 1.3em;
}

.nbh-journal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 22px;
    margin: 0;
}

.nbh-journal-facts > div {
    padding-left: 12px;
    border-left: 3px solid var(--journal-sky);
}

.nbh-journal-facts dt {
    margin: 0 0 3px;
    color: var(--journal-muted);
    font-size: .78em;
    font-weight: 800;
    letter-spacing: .06em;
}

.nbh-journal-facts dd {
    margin: 0;
    color: var(--journal-blue);
    font-weight: 700;
    line-height: 1.5;
}

/* ------------------------------------------------------------------ activités */

.nbh-journal-activity {
    margin: 0 0 58px;
    padding-bottom: 42px;
    border-bottom: 1px solid var(--journal-line);
}

.nbh-journal-activity:last-of-type {
    border-bottom: 0;
}

.nbh-journal-activity > h2 {
    margin-bottom: 24px;
}

.nbh-journal-activity h3 {
    margin-top: 26px;
    color: var(--journal-blue);
    font-size: 1.08em;
}

.nbh-journal-date {
    margin: 0 0 12px;
    color: var(--journal-muted);
    font-size: .88em;
    font-weight: 750;
}

/* --------------------------------------------------------------------- photos */

.nbh-journal-photo {
    margin: 0;
}

.nbh-journal-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--journal-radius);
    box-shadow: 0 16px 40px rgba(23, 59, 88, .12);
}

.nbh-journal-photo figcaption {
    margin-top: 10px;
    color: var(--journal-muted);
    font-size: .87em;
    line-height: 1.6;
    text-align: center;
}

.nbh-journal-photo-main {
    margin: 0 0 26px;
}

/* Une photo verticale de téléphone ne doit pas occuper tout l'écran. */
.nbh-journal-photo-main.is-portrait {
    max-width: 430px;
    margin-inline: auto;
}

.nbh-journal-gallery {
    margin-top: 26px;
}

/* Par défaut : flux en colonnes, portrait et paysage cohabitent sans recadrage. */
.nbh-journal-gallery,
.nbh-journal-gallery.is-natural {
    column-count: 2;
    column-gap: 14px;
}

.nbh-journal-gallery > .nbh-journal-photo,
.nbh-journal-gallery.is-natural > .nbh-journal-photo {
    margin-bottom: 14px;
    break-inside: avoid;
}

.nbh-journal-gallery.is-square,
.nbh-journal-gallery.is-landscape {
    display: grid;
    column-count: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.nbh-journal-gallery.is-square > .nbh-journal-photo,
.nbh-journal-gallery.is-landscape > .nbh-journal-photo {
    margin-bottom: 0;
}

.nbh-journal-gallery.is-square img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.nbh-journal-gallery.is-landscape img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.nbh-journal-gallery.is-stack {
    display: grid;
    column-count: initial;
    grid-template-columns: 1fr;
    gap: 20px;
}

.nbh-journal-gallery.is-stack > .nbh-journal-photo {
    margin-bottom: 0;
}

.nbh-journal-gallery.is-stack .is-portrait {
    max-width: 430px;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------- audio */

.nbh-journal-audio {
    margin: 28px 0;
    padding: 18px 20px;
    border: 1px solid var(--journal-line);
    border-radius: var(--journal-radius);
    background: linear-gradient(150deg, #fff, var(--journal-soft));
}

.nbh-journal-audio-title {
    display: block;
    margin-bottom: 12px;
    color: var(--journal-blue);
    font-size: 1.02em;
}

.nbh-journal-audio audio {
    display: block;
    width: 100%;
}

.nbh-journal-audio figcaption {
    margin-top: 10px;
    color: var(--journal-muted);
    font-size: .87em;
}

.nbh-journal-audio figcaption:empty {
    display: none;
}

/* --------------------------------------------------------------------- vidéo */

.nbh-journal-video {
    margin: 28px 0;
}

.nbh-journal-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: var(--journal-radius);
}

/* ------------------------------------------------------------------ fichiers */

.nbh-journal-files {
    margin: 28px 0;
    padding: 20px 22px;
    border: 1px dashed var(--journal-sky);
    border-radius: var(--journal-radius);
    background: #fff;
}

.nbh-journal-files > strong {
    display: block;
    margin-bottom: 12px;
    color: var(--journal-blue);
}

.nbh-journal-files ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nbh-journal-files li {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--journal-soft);
}

.nbh-journal-files a {
    font-weight: 750;
    text-decoration: none;
}

.nbh-journal-files a:hover,
.nbh-journal-files a:focus {
    text-decoration: underline;
}

.nbh-journal-files span {
    color: var(--journal-muted);
    font-size: .8em;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- vocabulaire */

.nbh-journal-vocab {
    margin: 0 0 34px;
    overflow-x: auto;
    border: 1px solid var(--journal-line);
    border-radius: var(--journal-radius);
    background: #fff;
}

.nbh-journal-vocab table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.nbh-journal-vocab th {
    padding: 12px 16px;
    background: var(--journal-blue);
    color: #fff;
    font-size: .82em;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
}

.nbh-journal-vocab td {
    padding: 13px 16px;
    border-top: 1px solid var(--journal-line);
    vertical-align: top;
}

.nbh-journal-vocab tr td:first-child {
    width: 45%;
    color: var(--journal-blue);
    font-weight: 700;
    font-style: italic;
}

.nbh-journal-vocab tbody tr:nth-child(even) {
    background: #fafcfe;
}

/* ----------------------------------------------------------------- citations */

.nbh-journal-highlight,
.nbh-journal-french {
    margin: 24px 0;
    padding: 20px 24px;
    border: 0;
    border-left: 5px solid var(--journal-sky);
    border-radius: 0 var(--journal-radius) var(--journal-radius) 0;
    background: var(--journal-soft);
}

.nbh-journal-highlight p,
.nbh-journal-french p {
    margin: 0;
    color: #29485f;
    font-size: 1.06em;
    line-height: 1.85;
}

.nbh-journal-french p {
    font-style: italic;
}

/* ------------------------------------------------------------------ matériel */

.nbh-journal-material {
    margin-top: 22px;
    padding: 13px 15px;
    border-radius: 12px;
    background: #f5f7f8;
    color: #435969;
}

/* --------------------------------------------------------------------- liens */

.nbh-journal-links {
    display: grid;
    gap: 9px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

.nbh-journal-links a {
    display: block;
    padding: 12px 15px;
    border: 1px solid var(--journal-line);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    font-weight: 750;
}

.nbh-journal-links a:hover,
.nbh-journal-links a:focus {
    border-color: var(--journal-sky);
    background: var(--journal-soft);
}

.nbh-journal-line {
    display: inline-block;
    padding: 12px 17px;
    border-radius: 12px;
    background: #e4f8ea;
    color: #176b38;
    text-decoration: none;
    font-weight: 850;
}

@media (max-width: 680px) {
    .nbh-journal-gallery,
    .nbh-journal-gallery.is-natural {
        column-count: 1;
    }

    .nbh-journal-gallery.is-square,
    .nbh-journal-gallery.is-landscape {
        grid-template-columns: 1fr;
    }

    .nbh-journal-photo-main.is-portrait,
    .nbh-journal-gallery.is-stack .is-portrait {
        max-width: 100%;
    }

    .nbh-journal-activity {
        margin-bottom: 42px;
        padding-bottom: 30px;
    }

    .nbh-journal-vocab tr td:first-child {
        width: 50%;
    }
}

/* --- 5.4.3 : blocs Gutenberg à plat --- */

/* Sans conteneur d'activité, c'est le titre qui marque la séparation. */
.nbh-journal-activity-title {
    margin-top: 52px;
    padding-top: 34px;
    border-top: 1px solid var(--journal-line);
}

.entry-content > .nbh-journal-activity-title:first-child,
.nbh-journal-activity-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.nbh-journal-summary-title {
    margin-bottom: 8px;
    color: var(--journal-blue);
    font-size: 1.1em;
}

ul.nbh-journal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 20px;
    margin: 0 0 44px;
    padding: 20px 22px;
    border: 1px solid var(--journal-line);
    border-radius: var(--journal-radius);
    background: #fff;
    list-style: none;
    box-shadow: 0 10px 30px rgba(23, 59, 88, .06);
}

ul.nbh-journal-facts li {
    padding-left: 12px;
    border-left: 3px solid var(--journal-sky);
    line-height: 1.6;
}

ul.nbh-journal-facts strong {
    display: block;
    color: var(--journal-muted);
    font-size: .78em;
    letter-spacing: .06em;
}

.nbh-journal-caption {
    margin-top: -14px;
    color: var(--journal-muted);
    font-size: .87em;
    text-align: center;
}

/* Largeur de la photo principale, choisie à la génération. */
figure.nbh-journal-photo-main.is-width-compact {
    max-width: 380px;
    margin-inline: auto;
}

figure.nbh-journal-photo-main.is-width-balanced {
    max-width: 520px;
    margin-inline: auto;
}

/* Le bloc galerie du cœur pose sa propre grille : on la remplace. */
figure.nbh-journal-gallery.has-nested-images {
    display: block;
    margin-top: 26px;
}

figure.nbh-journal-gallery.has-nested-images.is-natural {
    column-count: 2;
    column-gap: 14px;
}

figure.nbh-journal-gallery.has-nested-images.is-natural > figure {
    display: block;
    width: 100% !important;
    margin: 0 0 14px;
    break-inside: avoid;
}

figure.nbh-journal-gallery.has-nested-images.is-square,
figure.nbh-journal-gallery.has-nested-images.is-landscape {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

figure.nbh-journal-gallery.has-nested-images.is-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

figure.nbh-journal-gallery.has-nested-images > figure {
    width: auto !important;
    margin: 0;
}

figure.nbh-journal-gallery.has-nested-images img {
    width: 100%;
    height: auto;
    border-radius: var(--journal-radius);
}

figure.nbh-journal-gallery.is-square img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

figure.nbh-journal-gallery.is-landscape img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.nbh-journal-file {
    margin: 12px 0;
}

.nbh-journal-file .wp-block-file__button {
    background: var(--journal-blue);
    border-radius: 10px;
}

@media (max-width: 680px) {
    figure.nbh-journal-gallery.has-nested-images.is-natural {
        column-count: 1;
    }

    figure.nbh-journal-gallery.has-nested-images.is-square,
    figure.nbh-journal-gallery.has-nested-images.is-landscape {
        grid-template-columns: 1fr;
    }

    figure.nbh-journal-photo-main.is-width-compact,
    figure.nbh-journal-photo-main.is-width-balanced {
        max-width: 100%;
    }

    .nbh-journal-activity-title {
        margin-top: 38px;
        padding-top: 26px;
    }
}

/* --- 5.5 : liens vers les articles de fond --- */
ul.nbh-journal-topic-links {
    display: grid;
    gap: 9px;
    margin: 18px 0 34px;
    padding: 0;
    list-style: none;
}

ul.nbh-journal-topic-links li {
    margin: 0;
}

ul.nbh-journal-topic-links a {
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--journal-line);
    border-left: 4px solid var(--journal-sky);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.5;
}

ul.nbh-journal-topic-links a:hover,
ul.nbh-journal-topic-links a:focus {
    border-left-color: var(--journal-blue);
    background: var(--journal-soft);
}