/*
 * Articles du journal composés en blocs (templates/article/_blocs.html.twig).
 * Grille de 12 colonnes : chaque bloc reprend sa colonne, sa largeur et sa
 * ligne de l'éditeur (variables --bloc-x/w/y/h). Sous 48rem, une seule colonne
 * dans l'ordre du HTML, qui est l'ordre de lecture.
 */
.blocs {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.blocs__rangee {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: 1rem 1.5rem;
}

.bloc {
    grid-column: var(--bloc-x) / span var(--bloc-w);
    min-inline-size: 0;
}

@media (max-width: 48rem) {
    .blocs__rangee {
        grid-template-columns: 1fr;
    }

    .bloc {
        grid-column: 1 / -1;
    }
}

/* — Mise en forme commune : fond et alignement — */
.bloc--fond-clair,
.bloc--fond-sombre,
.bloc--fond-accent {
    align-self: stretch;
    block-size: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: 1rem;
}

.bloc--fond-clair {
    background: var(--craie);
    color: var(--encre);
}

.bloc--fond-clair .prose,
.bloc--fond-clair .prose strong,
.bloc--fond-clair .prose a {
    color: var(--encre);
}

.bloc--fond-sombre {
    border: 1px solid var(--trait);
    background: var(--fond-eleve);
}

.bloc--fond-accent {
    background: var(--electrique);
    color: #fff;
}

.bloc--fond-accent .prose,
.bloc--fond-accent .prose strong,
.bloc--fond-accent .prose a,
.bloc--fond-accent .texte-doux {
    color: #fff;
}

.bloc--align-centre { text-align: center; }
.bloc--align-droite { text-align: end; }

.bloc--align-centre .actions { justify-content: center; }
.bloc--align-droite .actions { justify-content: flex-end; }

/* — Types de blocs — */
.bloc__titre {
    font-family: var(--police-titre);
    font-size: var(--t-xl);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

h3.bloc__titre {
    font-size: var(--t-lg);
}

.bloc .prose > :first-child {
    margin-block-start: 0;
}

.bloc__figure {
    display: grid;
    gap: 0.6rem;
    margin: 0;
}

.bloc__figure img {
    inline-size: 100%;
    block-size: auto;
    max-block-size: 34rem;
    border-radius: 1rem;
    object-fit: cover;
}

.bloc__figure--contenir img {
    object-fit: contain;
}

.bloc__figure figcaption {
    font-size: var(--t-sm);
    color: var(--texte-doux);
}

.bloc__duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem;
    align-items: center;
}

.bloc__duo img {
    inline-size: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.bloc__duo--droite img {
    order: 2;
}

.bloc__citation {
    margin: 0;
    padding-inline-start: 1.5rem;
    border-inline-start: 3px solid var(--electrique);
}

.bloc__citation blockquote {
    margin: 0;
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    line-height: 1.25;
}

.bloc__citation figcaption {
    margin-block-start: 0.75rem;
    color: var(--texte-doux);
}

.bloc__chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bloc__chiffres strong {
    display: block;
    font-family: var(--police-titre);
    font-size: var(--t-2xl);
    line-height: 1;
    letter-spacing: -0.015em;
    color: var(--electrique);
}

.bloc--fond-accent .bloc__chiffres strong {
    color: #fff;
    filter: none;
}

.bloc__chiffres span {
    font-size: var(--t-sm);
    color: var(--texte-doux);
}

.bloc__encadre {
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    border-inline-start: 4px solid var(--electrique);
    background: color-mix(in srgb, var(--electrique) 12%, transparent);
}

.bloc__encadre--info {
    border-inline-start-color: var(--cyan);
    background: color-mix(in srgb, var(--cyan) 10%, transparent);
}

.bloc__encadre--alerte {
    border-inline-start-color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
}

.bloc__encadre-titre {
    margin-block-end: 0.5rem;
    font-family: var(--police-titre);
    font-weight: 700;
}

.bloc__video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--fond-eleve);
}

.bloc__video iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.bloc__video-lancer {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.6rem;
    inline-size: 100%;
    block-size: 100%;
    padding: 1.5rem;
    border: 1px solid var(--trait);
    border-radius: inherit;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--electrique) 30%, transparent), transparent 70%), var(--fond-eleve);
    color: var(--texte);
    font: inherit;
    cursor: pointer;
}

.bloc__video-icone {
    display: grid;
    place-items: center;
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: 50%;
    background: var(--electrique);
    color: #fff;
    font-size: 1.4rem;
    transition: transform 0.35s var(--ease-sortie);
}

.bloc__video-lancer:hover .bloc__video-icone {
    transform: scale(1.08);
}

.bloc__video-lancer--miniature {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 0;
    color: #fff;
    align-content: end;
    justify-items: start;
    text-align: start;
}

.bloc__video-miniature {
    position: absolute;
    inset: 0;
    z-index: -2;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-sortie);
}

/* Voile en bas pour la lisibilité du titre, bouton de lecture au centre. */
.bloc__video-lancer--miniature::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(transparent 45%, rgb(7 3 32 / 0.78));
}

.bloc__video-lancer--miniature .bloc__video-icone {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    box-shadow: 0 0 0 0.5rem rgb(255 255 255 / 0.18), 0 10px 40px rgb(7 3 32 / 0.5);
}

.bloc__video-lancer--miniature span:not(.bloc__video-icone) {
    font-family: var(--police-texte);
    font-weight: 600;
    font-size: var(--t-md);
}

.bloc__video-lancer--miniature small {
    color: rgb(255 255 255 / 0.72);
}

.bloc__video-lancer--miniature:hover .bloc__video-miniature {
    transform: scale(1.04);
}

.bloc__video-lancer small {
    max-inline-size: 30ch;
    color: var(--texte-tres-doux);
    font-size: var(--t-xs);
}

.bloc__appel {
    display: grid;
    gap: 0.75rem;
}

.bloc__appel-titre {
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 700;
}

.bloc__separateur {
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--trait-fort);
    align-self: center;
}

.bloc .reseaux-sociaux {
    margin-block-start: 0;
}

/* — Couverture, rappel du service et bandeau d'aperçu — */
.article__couverture {
    margin-block: 0 1rem;
}

.article__couverture img {
    inline-size: 100%;
    max-block-size: 32rem;
    border-radius: 1rem;
    object-fit: cover;
}

.article__pilier {
    margin-block-start: 2.5rem;
}

.bandeau-apercu {
    position: fixed;
    inset-block-end: 1rem;
    inset-inline: 50% auto;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #1a1200;
    font-weight: 600;
    translate: -50% 0;
    box-shadow: 0 1rem 2rem -1rem rgb(0 0 0 / 0.6);
}

.bandeau-apercu button {
    padding: 0.3rem 0.8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}