/**
 * Bloc 3 — Texte (refonte design)
 *
 * Aligné sur le langage visuel du bloc image-texte et du bloc encart :
 * - Palette teal #1F5C56 / #2D7A72 / #3A9C92
 * - DM Serif Display (titres) + DM Sans (corps)
 * - border-radius 3px, animations cubic-bezier(0.22, 1, 0.36, 1)
 * - Listes avec flèche ➝ animée au hover
 * - Liens hypertextes : teal mid → teal light au hover, souligné
 *
 * Les classes parallèles .bloc-texte__* coexistent avec les anciennes
 * (.contenuFlexibleTxt, .contenuFlexibleTitre) — ce CSS surcharge ces
 * dernières grâce à la spécificité (.bloc-texte .contenuFlexibleTitre).
 */

/* =========================================================================
   Variables locales au bloc
   ========================================================================= */
.bloc-texte {
    --btxt-teal: #1F5C56;
    --btxt-teal-mid: #2D7A72;
    --btxt-teal-light: #3A9C92;
    --btxt-teal-rgb: 31, 92, 86;
    --btxt-text: #0F2E2A;
    --btxt-text-soft: #1A3F3A;
    --btxt-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --btxt-font-title: 'DM Serif Display', Georgia, serif;
    --btxt-radius: 3px;
    --btxt-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Largeur de contenu alignée sur le bloc encart (.bloc-encart__card) pour
       cohérence visuelle entre les deux blocs textuels. Hors mode fond image
       qui doit rester pleine largeur (override plus bas). */
    --btxt-content-max-width: 720px;

    /* Espacement vertical harmonisé entre blocs ACF (override du 10rem hérité
       de .contenuFlexibleTxt dans style.css). */
    padding: 5rem 0;
}

@media (max-width: 900px) {
    .bloc-texte {
        padding: 3.5rem 0;
    }
}

@media (max-width: 700px) {
    .bloc-texte {
        padding: 2.5rem 0;
    }
}

/* =========================================================================
   Container — largeur alignée sur le bloc encart (sauf mode fond image)
   ========================================================================= */
.bloc-texte--couleur .bloc-texte__container,
.bloc-texte--plain .bloc-texte__container {
    max-width: var(--btxt-content-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Mode fond image : le container interne garde sa pleine largeur. La règle
   legacy .contenuFlexibleTxt (padding 10rem 0) et .content (max-width via
   .contenu) reste appliquée — on ne touche rien ici. */

/* =========================================================================
   Parallaxe (mode "Image de fond" avec option parallaxe activée)
   ---------------------------------------------------------------
   Technique : l'image est portée par un vrai élément <div> en
   position absolute, plus haut que le bloc (top -20%, height 140%) pour
   laisser de la marge au défilement. Le JS (js/parallax.js) applique
   directement transform: translate3d via el.style.transform (pas via
   variable CSS) pour éviter le style recalc cascade et garder 60 fps.
   - Composite layer GPU explicite via will-change + translateZ
   - getBoundingClientRect mis en cache (offsetTop / offsetHeight)
   - Pas de scroll listener global (IntersectionObserver gating)
   - Fallback statique sur mobile (< 900px) et prefers-reduced-motion
   - Compatible iOS Safari (contrairement à background-attachment: fixed)
   ========================================================================= */
.bloc-texte--parallax {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* contexte de stacking propre, évite des promotions tardives */
    /* Neutralise le background-image legacy posé sur le wrapper (style inline)
       puisqu'on bascule sur l'élément interne. */
    background-image: none !important;
    /* Neutralise le background-attachment: fixed legacy de .bgParallaxe
       (style.css:1786) qui est cassé sur mobile et obsolète ici. */
    background-attachment: scroll !important;
}

.bloc-texte__parallax-bg {
    position: absolute;
    left: 0;
    right: 0;
    /* Image dépasse de 20% en haut et en bas → marge de défilement.
       Avec un déplacement max de ~20% de la hauteur du bloc, l'image ne
       laisse jamais voir le fond derrière. */
    top: -20%;
    height: 140%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Composite layer GPU dès le départ. translateZ(0) force la promotion
       même si transform n'est pas encore appliqué par le JS. */
    transform: translate3d(0, 0, 0);
    will-change: transform;
    z-index: -1;
    pointer-events: none;
    /* Empêche les saccades dues à un sub-pixel rendering imprécis */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Mobile : parallaxe désactivée, image redevient simplement le fond du bloc.
   Évite le bug Android (background-attachment fixed s'étire à toute la page)
   et iOS (effet ignoré). L'élément reste mais sans transform ni débordement. */
@media (max-width: 900px) {
    .bloc-texte__parallax-bg {
        top: 0;
        height: 100%;
        transform: none;
        will-change: auto;
    }
}

/* Respect prefers-reduced-motion : image statique, pas de transform animé */
@media (prefers-reduced-motion: reduce) {
    .bloc-texte__parallax-bg {
        top: 0;
        height: 100%;
        transform: none !important;
        will-change: auto;
    }
}

/* =========================================================================
   Mode fond image — overlay et hauteur
   ---------------------------------------------------------------
   On supprime l'overlay noir 30% legacy (.contenuFlexibleBgImg:before) pour
   préserver la qualité visuelle de l'image. Le text-shadow sur les éléments
   texte (legacy .contenuFlexibleBgImg *) reste actif pour la lisibilité.
   ========================================================================= */
.bloc-texte--image.contenuFlexibleBgImg::before {
    content: none !important;
    display: none !important;
}

/* Hauteur fluide pour le mode "Image de fond" avec option "Hauteur forcée".
   Sweet spot parallaxe : entre 500px (petits écrans) et 900px (grands
   écrans), idéalement 75% du viewport. Remplace l'ancien min-height: 80rem
   fixe qui s'adaptait mal aux écrans variés.
   On scope à .bloc-texte pour ne pas impacter les autres blocs legacy qui
   utiliseraient .contenuFlexibleTxtHaut. */
.bloc-texte.contenuFlexibleTxtHaut {
    min-height: clamp(500px, 75vh, 900px);
}

/* =========================================================================
   Titre
   ========================================================================= */
.bloc-texte .bloc-texte__title,
.bloc-texte .contenuFlexibleTitre {
    margin: 0 0 1.5rem;
    font-family: var(--btxt-font-title);
    font-size: clamp(24px, 1.6vw + 14px, 38px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    color: var(--btxt-teal);
}

/* Quand le bloc est en fond image, le titre prend la couleur de texte forcée
   (ex: blanc) — on neutralise le teal pour laisser la cascade .texteBlanc/
   .texteNoir agir. Le text-shadow déjà appliqué par .contenuFlexibleBgImg *
   reste pour la lisibilité. */
.bloc-texte--image:not(.bloc-texte--has-encart) .bloc-texte__title,
.bloc-texte--image:not(.bloc-texte--has-encart) .contenuFlexibleTitre {
    color: inherit;
}

/* =========================================================================
   Corps de texte
   ========================================================================= */
.bloc-texte .bloc-texte__text,
.bloc-texte .bloc-texte__text p,
.bloc-texte .bloc-texte__text li,
.bloc-texte .bloc-texte__text ul,
.bloc-texte .bloc-texte__text ol,
.bloc-texte .bloc-texte__text span,
.bloc-texte .bloc-texte__text strong,
.bloc-texte .bloc-texte__text em,
.bloc-texte .bloc-texte__text div {
    font-family: var(--btxt-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--btxt-text);
}

.bloc-texte .bloc-texte__text p {
    margin: 0 0 1rem;
}

.bloc-texte .bloc-texte__text p:last-child {
    margin-bottom: 0;
}

/* Fond image sans encart : on laisse la couleur de texte choisie agir
   (blanc avec text-shadow géré par le parent .contenuFlexibleBgImg). */
.bloc-texte--image:not(.bloc-texte--has-encart) .bloc-texte__text,
.bloc-texte--image:not(.bloc-texte--has-encart) .bloc-texte__text * {
    color: inherit;
}

/* =========================================================================
   Liens hypertextes — teal mid → teal light au hover, souligné permanent
   On exclut les CTA et les boutons du template liens.php.
   ========================================================================= */
.bloc-texte .bloc-texte__text a,
.bloc-texte .contenu a:not(.verdon-cta):not(.verdon-cta-outline):not(.buttonPrimary):not(.buttonSecondary):not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) {
    color: var(--btxt-teal-mid) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.bloc-texte .bloc-texte__text a:hover,
.bloc-texte .contenu a:not(.verdon-cta):not(.verdon-cta-outline):not(.buttonPrimary):not(.buttonSecondary):not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):hover {
    color: var(--btxt-teal-light) !important;
    text-decoration-thickness: 2px;
}

/* =========================================================================
   Listes — flèche ➝ teal animée au hover, indentation pour décaler le texte
   ========================================================================= */
.bloc-texte .bloc-texte__text ul,
.bloc-texte .bloc-texte__text ol {
    list-style: none !important;
    margin: 0 0 1rem;
    padding: 0 0 0 1.5rem;
}

.bloc-texte .bloc-texte__text ul li,
.bloc-texte .bloc-texte__text ol li {
    position: relative;
    padding-left: 2rem;
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.bloc-texte .bloc-texte__text ul li::before,
.bloc-texte .bloc-texte__text ol li::before {
    content: '➝';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--btxt-teal);
    font-size: 1em;
    line-height: 1.6;
    transition: transform 0.25s var(--btxt-ease), color 0.25s var(--btxt-ease);
}

.bloc-texte .bloc-texte__text ul li:hover::before,
.bloc-texte .bloc-texte__text ol li:hover::before {
    transform: translateX(4px);
    color: var(--btxt-teal-light);
}

@media (prefers-reduced-motion: reduce) {
    .bloc-texte .bloc-texte__text ul li::before,
    .bloc-texte .bloc-texte__text ol li::before {
        transition: none;
    }
}

/* =========================================================================
   Encart (variante fond image avec encart positionnable)
   On respecte le layout legacy (.encart, .encartCentre, etc.) et on
   harmonise juste l'apparence : radius, ombre, padding cohérents.
   ========================================================================= */
.bloc-texte .bloc-texte__encart,
.bloc-texte.hasEncart .encart {
    border-radius: var(--btxt-radius);
    box-shadow: 0 8px 24px rgba(var(--btxt-teal-rgb), 0.12);
}

/* Dans l'encart, le texte n'a plus de text-shadow (le encart a son propre
   fond opaque). Le design system teal/DM Sans reprend la main. */
.bloc-texte.hasEncart .bloc-texte__title,
.bloc-texte.hasEncart .contenuFlexibleTitre {
    color: var(--btxt-teal);
}

.bloc-texte.hasEncart .bloc-texte__text,
.bloc-texte.hasEncart .bloc-texte__text * {
    color: var(--btxt-text);
}

/* =========================================================================
   Boutons (template liens.php) — alignés sur le design système du bloc 2
   ========================================================================= */
.bloc-texte {
    --btxt-btn-min-width: 220px;
    --btxt-grey: #4a4a4a;
    --btxt-grey-mid: #6b6b6b;
    --btxt-grey-dark: #2e2e2e;
    --btxt-orange: #E8833A;
    --btxt-orange-mid: #D4722D;
    --btxt-orange-dark: #B85F1E;
}

/* Disposition des liens : flex row, wrap, gap 1rem. Centré par défaut
   puisque .contenuFlexibleTxt .contenu a text-align: center, mais on
   garde le centrage explicite via justify-content. */
.bloc-texte .liens {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0 0;
    justify-content: center;
    align-items: flex-start;
}

/* Mode encart : alignement à gauche (le contenu est aligné dans l'encart) */
.bloc-texte.hasEncart .liens {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* --- BASE plein : commune aux 3 variantes (teal / gris / orange) --- */
.bloc-texte .verdon-cta,
.bloc-texte .liens .buttonSecondary,
.bloc-texte .liens .buttonPrimaryGrey,
.bloc-texte .liens .buttonOrange {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 13px 28px;
    min-width: var(--btxt-btn-min-width);
    border: none !important;
    border-radius: var(--btxt-radius) !important;
    font-family: var(--btxt-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none !important;
    color: #fff !important;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    background-size: 200% 100% !important;
    background-position: 0% 0%;
    transition: background-position 0.45s ease, transform 0.12s ease, box-shadow 0.25s ease;
    white-space: nowrap;
}

/* Neutralise les pseudo-éléments skew legacy du thème parent */
.bloc-texte .verdon-cta::after,
.bloc-texte .liens .buttonSecondary::after,
.bloc-texte .liens .buttonPrimaryGrey::after,
.bloc-texte .liens .buttonOrange::after {
    content: none !important;
    display: none !important;
}

/* Glow radial qui suit la souris (blanc 18% sur fond coloré) */
.bloc-texte .verdon-cta::before,
.bloc-texte .liens .buttonSecondary::before,
.bloc-texte .liens .buttonPrimaryGrey::before,
.bloc-texte .liens .buttonOrange::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    height: 100% !important;
    width: 100% !important;
    transform: none !important;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            transparent 55%) !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.bloc-texte .verdon-cta:hover,
.bloc-texte .verdon-cta:focus,
.bloc-texte .liens .buttonSecondary:hover,
.bloc-texte .liens .buttonSecondary:focus,
.bloc-texte .liens .buttonPrimaryGrey:hover,
.bloc-texte .liens .buttonPrimaryGrey:focus,
.bloc-texte .liens .buttonOrange:hover,
.bloc-texte .liens .buttonOrange:focus {
    background-position: 100% 0% !important;
    color: #fff !important;
    text-decoration: none !important;
}

.bloc-texte .verdon-cta:hover::before,
.bloc-texte .liens .buttonSecondary:hover::before,
.bloc-texte .liens .buttonPrimaryGrey:hover::before,
.bloc-texte .liens .buttonOrange:hover::before {
    opacity: 1;
}

.bloc-texte .verdon-cta:active,
.bloc-texte .liens .buttonSecondary:active,
.bloc-texte .liens .buttonPrimaryGrey:active,
.bloc-texte .liens .buttonOrange:active {
    transform: scale(0.97);
    filter: brightness(0.88);
}

.bloc-texte .verdon-cta span,
.bloc-texte .verdon-cta svg,
.bloc-texte .liens .buttonSecondary span,
.bloc-texte .liens .buttonSecondary svg,
.bloc-texte .liens .buttonPrimaryGrey span,
.bloc-texte .liens .buttonPrimaryGrey svg,
.bloc-texte .liens .buttonOrange span,
.bloc-texte .liens .buttonOrange svg {
    position: relative;
    z-index: 1;
    margin: 0;
}

.bloc-texte .verdon-cta svg,
.bloc-texte .verdon-cta svg *,
.bloc-texte .liens .buttonSecondary svg,
.bloc-texte .liens .buttonSecondary svg *,
.bloc-texte .liens .buttonPrimaryGrey svg,
.bloc-texte .liens .buttonPrimaryGrey svg *,
.bloc-texte .liens .buttonOrange svg,
.bloc-texte .liens .buttonOrange svg * {
    fill: #fff !important;
    width: 18px;
    height: 18px;
}

/* --- VARIANTE 1 : teal (défaut .verdon-cta + legacy .buttonSecondary) --- */
.bloc-texte .verdon-cta,
.bloc-texte .liens .buttonSecondary {
    background-color: var(--btxt-teal) !important;
    background-image: linear-gradient(to right,
            var(--btxt-teal-mid) 0%,
            var(--btxt-teal) 50%,
            #143F3A 100%) !important;
}

.bloc-texte .verdon-cta:focus-visible,
.bloc-texte .liens .buttonSecondary:focus-visible {
    outline: 2px solid var(--btxt-teal);
    outline-offset: 3px;
}

/* --- VARIANTE 2 : gris (.buttonPrimaryGrey) --- */
.bloc-texte .liens .buttonPrimaryGrey {
    background-color: var(--btxt-grey-mid) !important;
    background-image: linear-gradient(to right,
            var(--btxt-grey) 0%,
            var(--btxt-grey-mid) 50%,
            var(--btxt-grey-dark) 100%) !important;
}

.bloc-texte .liens .buttonPrimaryGrey:focus-visible {
    outline: 2px solid var(--btxt-grey-dark);
    outline-offset: 3px;
}

/* --- VARIANTE 3 : orange (.buttonOrange) --- */
.bloc-texte .liens .buttonOrange {
    background-color: var(--btxt-orange) !important;
    background-image: linear-gradient(to right,
            var(--btxt-orange-mid) 0%,
            var(--btxt-orange) 50%,
            var(--btxt-orange-dark) 100%) !important;
    border: none !important;
}

.bloc-texte .liens .buttonOrange:focus-visible {
    outline: 2px solid var(--btxt-orange);
    outline-offset: 3px;
}

/* --- Bouton outline teal (.verdon-cta-outline + legacy .buttonPrimary seul) ---
   .buttonPrimary est aussi présent sur les boutons gris/orange/transparent
   (le template liens.php empile : "buttonPrimary buttonPrimaryGrey", etc.)
   On exclut ces variantes pour ne pas écraser leur design plein. */
.bloc-texte .verdon-cta-outline,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 11px 26px;
    min-width: var(--btxt-btn-min-width);
    border: 2px solid var(--btxt-teal) !important;
    border-radius: var(--btxt-radius) !important;
    font-family: var(--btxt-font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--btxt-teal) !important;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none !important;
    background: #fff !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.12s ease;
    white-space: nowrap;
}

.bloc-texte .verdon-cta-outline::after,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent)::after {
    content: none !important;
    display: none !important;
}

.bloc-texte .verdon-cta-outline::before,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent)::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    height: 100% !important;
    width: 100% !important;
    transform: none !important;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(var(--btxt-teal-rgb), 0.10) 0%,
            transparent 60%) !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.bloc-texte .verdon-cta-outline:hover,
.bloc-texte .verdon-cta-outline:focus,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):hover,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):focus {
    background: rgba(var(--btxt-teal-rgb), 0.06) !important;
    border-color: #143F3A !important;
    color: #143F3A !important;
    text-decoration: none !important;
}

.bloc-texte .verdon-cta-outline:hover::before,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):hover::before {
    opacity: 1;
}

.bloc-texte .verdon-cta-outline:active,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):active {
    transform: scale(0.97);
    background: rgba(var(--btxt-teal-rgb), 0.10) !important;
}

.bloc-texte .verdon-cta-outline span,
.bloc-texte .verdon-cta-outline svg,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) span,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) svg {
    position: relative;
    z-index: 1;
    margin: 0;
}

.bloc-texte .verdon-cta-outline svg,
.bloc-texte .verdon-cta-outline svg *,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) svg,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) svg * {
    fill: var(--btxt-teal) !important;
    width: 18px;
    height: 18px;
}

.bloc-texte .verdon-cta-outline:hover svg,
.bloc-texte .verdon-cta-outline:hover svg *,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):hover svg,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):hover svg * {
    fill: #143F3A !important;
}

.bloc-texte .verdon-cta-outline:focus-visible,
.bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent):focus-visible {
    outline: 2px solid var(--btxt-teal);
    outline-offset: 3px;
}

/* Mode fond image sans encart : les boutons restent en design teal mais on
   ajoute un fond semi-opaque pour garantir la lisibilité sur image variée.
   L'outline passe en blanc sur blanc translucide pour le contraste. */
.bloc-texte--image:not(.bloc-texte--has-encart) .verdon-cta-outline,
.bloc-texte--image:not(.bloc-texte--has-encart) .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent) {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablette */
@media (max-width: 1024px) {
    .bloc-texte .bloc-texte__title,
    .bloc-texte .contenuFlexibleTitre {
        margin-bottom: 1.2rem;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .bloc-texte .bloc-texte__text,
    .bloc-texte .bloc-texte__text p,
    .bloc-texte .bloc-texte__text li,
    .bloc-texte .bloc-texte__text ul,
    .bloc-texte .bloc-texte__text ol,
    .bloc-texte .bloc-texte__text div {
        font-size: 15px;
        line-height: 1.55;
    }

    .bloc-texte .bloc-texte__text ul,
    .bloc-texte .bloc-texte__text ol {
        padding-left: 0.5rem;
    }

    .bloc-texte .bloc-texte__text ul li,
    .bloc-texte .bloc-texte__text ol li {
        padding-left: 1.75rem;
    }

    /* Encart : pleine largeur en mobile (legacy fait déjà width: 100% via
       .contenuFlexibleTxt.hasEncart .encart mais on garantit l'override). */
    .bloc-texte.hasEncart .bloc-texte__encart,
    .bloc-texte.hasEncart .encart {
        width: 100% !important;
        padding: 2.5rem 2rem !important;
    }

    /* Boutons : adapté au mobile — min-width neutralisé, max-width cappé
       pour éviter qu'un bouton dépasse la largeur du parent étroit. */
    .bloc-texte .verdon-cta,
    .bloc-texte .verdon-cta-outline,
    .bloc-texte .liens .buttonSecondary,
    .bloc-texte .liens .buttonPrimary:not(.buttonPrimaryGrey):not(.buttonOrange):not(.buttonTransparent),
    .bloc-texte .liens .buttonPrimaryGrey,
    .bloc-texte .liens .buttonOrange {
        min-width: 0;
        width: 100%;
        max-width: var(--btxt-btn-min-width);
    }

    .bloc-texte .liens {
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
}