:root {
    --bmp-content-width: var(--wp--style--global--content-size, 840px);
    --bmp-wide-width: var(--wp--style--global--wide-size, 1200px);
    --bmp-page-gutter: 24px;
    --bmp-grid-columns: 4;
    --bmp-grid-gap: 18px;
    --bmp-radius: 18px;
    --bmp-transition: 180ms ease;
    --bmp-header-offset: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    padding: 0 !important;
    min-width: 320px;
    overflow-x: clip;
    color: var(--wp--preset--color--text, #444444);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.bmp-container {
    width: min(calc(100% - (2 * var(--bmp-page-gutter))), var(--bmp-wide-width));
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus,
.skip-link:focus {
    clip: auto !important;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100000;
    background: var(--wp--preset--color--white, #fff);
    color: var(--wp--preset--color--dark, #262626);
    border: 2px solid var(--wp--preset--color--primary-dark, #0072a3);
    border-radius: 6px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--wp--preset--color--primary-dark, #0072a3);
    outline-offset: 3px;
}

p, li { text-wrap: pretty; }
/* Les largeurs de texte suivent désormais exclusivement le layout Gutenberg
 * (contenu / étendu / pleine largeur). Aucune mesure de lecture n’est imposée
 * globalement aux paragraphes ou aux listes. */


/* Zones de lecture facultatives.
 *
 * IMPORTANT : le Groupe conserve intégralement son rail Gutenberg.
 * - alignement Aucun : contentSize du thème (840 px) ;
 * - largeur étendue : wideSize du thème (1200 px) ;
 * - pleine largeur : largeur disponible.
 *
 * Seuls les blocs de texte placés DANS le Groupe sont limités en longueur.
 * Leur position horizontale est laissée au moteur de layout natif de Gutenberg
 * (gauche / centre / droite), sans marges forcées par le thème.
 */
.wp-block-group.bmp-reading-zone,
.wp-block-group.bmp-reading-zone-short {
    min-width: 0;
}

.wp-block-group.bmp-reading-zone > :where(p, ul, ol, .wp-block-paragraph, .wp-block-list),
.wp-block-group.bmp-reading-zone-short > :where(p, ul, ol, .wp-block-paragraph, .wp-block-list) {
    width: min(100%, var(--bmp-reading-comfortable, 72ch));
    max-width: var(--bmp-reading-comfortable, 72ch);
}

.wp-block-group.bmp-reading-zone-short > :where(p, ul, ol, .wp-block-paragraph, .wp-block-list) {
    width: min(100%, var(--bmp-reading-short, 52ch));
    max-width: var(--bmp-reading-short, 52ch);
}

/* Les autres blocs ajoutés dans la zone (boutons, images, etc.) ne sont pas
 * artificiellement réduits : ils suivent le layout Gutenberg du Groupe. */

h1, h2, h3 { text-wrap: balance; }

.is-style-lead {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
}

.is-easy-read .entry-content p,
.is-easy-read .entry-content li {
    font-size: 1.18em;
    line-height: 1.75;
}
.is-easy-read .wp-block-columns { gap: 2rem; }

/* Grid reference: 390px -> 4 columns / 18px gap. */
.wp-block-columns { gap: var(--bmp-grid-gap); }

/* --------------------------------------------------------------------------
   Couleurs de contenu : contexte automatique + priorité Gutenberg
   -------------------------------------------------------------------------- */
/*
 * Le thème distingue désormais explicitement :
 * - la couleur globale du texte courant ;
 * - la couleur lisible automatique sur un bloc avec fond clair/sombre ;
 * - une couleur choisie localement dans Gutenberg.
 *
 * Une couleur Gutenberg locale est toujours prioritaire. Le seul !important
 * de ce système est volontairement réservé à cette décision explicite de
 * l'éditeur, afin qu'aucun style global ou contexte parent ne puisse l'écraser.
 */
.bmp-auto-text-on-light {
    --bmp-context-link-color: var(--bmp-link-on-light-bg, var(--wp--preset--color--primary-dark, #0072A3));
    --bmp-context-link-hover-color: var(--bmp-link-on-light-hover, var(--wp--preset--color--primary, #009ADE));
}

.bmp-auto-text-on-dark {
    --bmp-context-link-color: var(--bmp-link-on-dark-bg, var(--wp--preset--color--white, #ffffff));
    --bmp-context-link-hover-color: var(--bmp-link-on-dark-hover, var(--wp--preset--color--secondary, #90E0EF));
}

.bmp-auto-text-on-light:not(.has-text-color):not(.bmp-has-local-text-color) {
    --bmp-context-text-color: var(--bmp-text-on-light-bg, var(--wp--preset--color--text, #444444));
    color: var(--bmp-context-text-color);
}

.bmp-auto-text-on-dark:not(.has-text-color):not(.bmp-has-local-text-color) {
    --bmp-context-text-color: var(--bmp-text-on-dark-bg, var(--wp--preset--color--white, #ffffff));
    color: var(--bmp-context-text-color);
}

.bmp-has-local-text-color {
    color: var(--bmp-local-text-color) !important;
}

/*
 * Les titres disposent d'une couleur globale propre et certains blocs peuvent
 * recevoir une couleur via theme.json. Dans un Groupe/Cover coloré, les blocs
 * textuels sans choix local doivent cependant hériter du contexte du parent.
 * Un enfant ayant son propre fond, sa propre couleur automatique ou une couleur
 * Gutenberg explicite est exclu et garde donc son autonomie.
 */
:is(.bmp-auto-text-on-light, .bmp-auto-text-on-dark, .bmp-has-local-text-color)
    :where(
        p,
        li,
        blockquote,
        figcaption,
        caption,
        summary,
        td,
        th,
        h1.wp-block-heading,
        h2.wp-block-heading,
        h3.wp-block-heading,
        h4.wp-block-heading,
        h5.wp-block-heading,
        h6.wp-block-heading
    ):not(.has-text-color):not(.bmp-has-local-text-color):not(.bmp-auto-text-on-light):not(.bmp-auto-text-on-dark) {
    color: inherit;
}

/*
 * Compatibilité avec les couleurs de palette natives WordPress. Ces règles ne
 * fixent aucune valeur en dur : elles suivent les variables générées par
 * theme.json et servent uniquement de repli pour les contenus anciens.
 */
.has-white-color.has-text-color { color: var(--wp--preset--color--white); }
.has-light-gray-color.has-text-color { color: var(--wp--preset--color--light-gray); }
.has-light-blue-color.has-text-color { color: var(--wp--preset--color--light-blue); }
.has-primary-color.has-text-color { color: var(--wp--preset--color--primary); }
.has-primary-dark-color.has-text-color { color: var(--wp--preset--color--primary-dark); }
.has-text-color.has-text-color { /* La couleur inline/custom native reste intacte. */ }
.has-dark-color.has-text-color { color: var(--wp--preset--color--dark); }
.has-gray-color.has-text-color { color: var(--wp--preset--color--gray); }


/* Liens de contenu : le contexte clair/sombre suit le même moteur que le
 * texte. Une couleur de lien définie localement par Gutenberg conserve la
 * priorité grâce à la faible spécificité des sélecteurs :where(). */
:where(.entry-content, .editor-styles-wrapper) {
    --bmp-context-link-color: var(--bmp-link-on-light-bg, var(--wp--preset--color--primary-dark, #0072A3));
    --bmp-context-link-hover-color: var(--bmp-link-on-light-hover, var(--wp--preset--color--primary, #009ADE));
}

:where(.entry-content, .editor-styles-wrapper)
    :where(a:not(.wp-element-button):not(.wp-block-button__link):not(.bmp-group-link-overlay)) {
    color: var(--bmp-context-link-color, var(--bmp-link-on-light-bg, var(--wp--preset--color--primary-dark, #0072A3)));
    text-decoration-line: var(--bmp-link-decoration, underline);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
    transition: color var(--bmp-transition), text-decoration-color var(--bmp-transition);
}

:where(.entry-content, .editor-styles-wrapper)
    :where(a:not(.wp-element-button):not(.wp-block-button__link):not(.bmp-group-link-overlay)):is(:hover, :focus-visible) {
    color: var(--bmp-context-link-hover-color, var(--bmp-link-on-light-hover, var(--wp--preset--color--primary, #009ADE)));
    text-decoration-line: var(--bmp-link-hover-decoration, underline);
}

/* Les couleurs de lien choisies explicitement par Gutenberg utilisent des
 * sélecteurs générés plus spécifiques (.wp-elements-* a / .has-link-color a)
 * et passent donc naturellement au-dessus de ces valeurs contextuelles. */