/**
 * Bloc Encart — Carte de mise en avant
 *
 * Aligné sur le langage visuel du bloc image-texte :
 * - Palette teal #1F5C56 / #2D7A72 / #3A9C92
 * - DM Serif Display (titres) + DM Sans (corps)
 * - border-radius 3px, ombres douces, cubic-bezier(0.22, 1, 0.36, 1)
 * - Mêmes dimensions que .bloc-imagetexte__quote (max-width 880px, padding 48/56)
 *
 * Variantes de couleur du bouton (toutes plein, même langage que bloc 2) :
 *   .verdon-cta              → teal     (défaut)
 *   .verdon-cta--grey        → gris
 *   .verdon-cta--orange      → orange
 */

/* =========================================================================
   Variables locales au bloc
   ========================================================================= */
.bloc-encart {
    --enc-teal: #1F5C56;
    --enc-teal-mid: #2D7A72;
    --enc-teal-light: #3A9C92;
    --enc-teal-rgb: 31, 92, 86;
    --enc-text: #0F2E2A;
    --enc-text-soft: #1A3F3A;
    --enc-grey: #4a4a4a;
    --enc-grey-mid: #6b6b6b;
    --enc-grey-dark: #2e2e2e;
    --enc-orange: #E8833A;
    --enc-orange-mid: #D4722D;
    --enc-orange-dark: #B85F1E;
    --enc-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --enc-font-title: 'DM Serif Display', Georgia, serif;
    --enc-radius: 3px;
    --enc-shadow: 0 8px 24px rgba(var(--enc-teal-rgb), 0.18);
    --enc-shadow-hover: 0 12px 28px rgba(var(--enc-teal-rgb), 0.22);
    --enc-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --enc-btn-min-width: 220px;

    /* Espacement vertical harmonisé entre blocs ACF. */
    padding: 5rem 0;
}

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

/* =========================================================================
   Container & carte
   ========================================================================= */
.bloc-encart__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.bloc-encart__card {
    position: relative;
    margin: 0 auto;
    max-width: 720px;
    padding: 40px 48px;
    background: rgba(var(--enc-teal-rgb), 0.05);
    border: 2px solid var(--enc-teal);
    border-radius: var(--enc-radius);
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.3s var(--enc-ease), border-color 0.3s var(--enc-ease), background-color 0.3s var(--enc-ease);
}

/* Animation hover discrète : léger soulèvement + bordure qui fonce + fond
   très légèrement plus saturé. Pas d'ombre portée. */
.bloc-encart__card:hover {
    transform: translateY(-2px);
    border-color: #143F3A;
    background: rgba(var(--enc-teal-rgb), 0.08);
}

/* =========================================================================
   Variante avec image A4 superposée sur le bord droit de l'encart.
   La card garde sa taille d'origine (max-width 720px). L'image est positionnée
   en absolute, centrée verticalement sur la bordure droite (50% à l'intérieur
   / 50% à l'extérieur). Format A4 portrait (aspect-ratio 1/1.414).
   ========================================================================= */
.bloc-encart__card--has-image {
    /* Pas d'overflow: hidden ici → l'image doit pouvoir dépasser à droite */
    overflow: visible;
    /* Padding-right augmenté pour que le texte ne passe pas sous l'image
       qui chevauche le bord droit. La moitié de l'image (~120px) est à
       l'intérieur de la card. */
    padding-right: 160px;
}

.bloc-encart__card--has-image .bloc-encart__body {
    position: relative;
    z-index: 1;
}

/* Image : position absolute centrée verticalement sur le bord droit de la
   card. translateX(50%) = la moitié droite de l'image dépasse à l'extérieur.
   aspect-ratio: 1/1.414 = format A4 portrait.
   Bordure intérieure animée (pattern bloc image-texte) via ::after. */
.bloc-encart__media {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 220px;
    aspect-ratio: 1 / 1.414;
    display: block;
    z-index: 2;
    border-radius: calc(var(--enc-radius) + 1px);
    overflow: hidden;
    isolation: isolate;
    background: rgba(var(--enc-teal-rgb), 0.08);
    box-shadow: 0 8px 24px rgba(var(--enc-teal-rgb), 0.18);
    transition: transform 0.3s var(--enc-ease), box-shadow 0.3s var(--enc-ease);
}

.bloc-encart__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Bordure intérieure animée (pattern .bloc-imagetexte__media picture::after).
   Trait fin blanc à 8px du bord au repos, s'écarte à 12px et devient plus
   opaque au hover. */
.bloc-encart__media::after {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    pointer-events: none;
    transition: inset 0.3s var(--enc-ease), border-color 0.3s var(--enc-ease);
}

.bloc-encart__media:hover {
    transform: translate(50%, calc(-50% - 2px));
    box-shadow: 0 12px 28px rgba(var(--enc-teal-rgb), 0.28);
}

.bloc-encart__media:hover::after {
    inset: 12px;
    border-color: rgba(255, 255, 255, 0.75);
}

/* =========================================================================
   Caption overlay sur l'image (titre optionnel affiché en bas)
   ---------------------------------------------------------------
   Texte blanc en bas de l'image avec gradient sombre pour la lisibilité,
   indépendamment de la teinte de l'image en arrière-plan.
   ========================================================================= */
/* Caption positionnée à l'intérieur de la bordure intérieure (inset 8px),
   avec margin pour aérer le titre par rapport au trait de la bordure.
   Titre plus gros (DM Serif Display) avec gradient sombre pour la lisibilité. */
.bloc-encart__media-caption {
    position: absolute;
    /* Aligné sur la bordure intérieure (inset: 8px) + petite marge interne
       pour que le titre ne touche pas le trait. */
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    padding: 0;
    color: #fff;
    font-family: var(--enc-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-align: left;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

/* Gradient sombre sous la caption pour garantir la lisibilité du titre
   blanc sur image claire. Étendu sous la zone du titre, derrière la bordure. */
.bloc-encart__media-caption::before {
    content: '';
    position: absolute;
    /* Déborde au-delà de la caption pour englober la zone bordure aussi */
    left: -16px;
    right: -16px;
    bottom: -16px;
    height: calc(100% + 60px);
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.45) 50%,
            transparent 100%);
    z-index: -1;
    pointer-events: none;
}

/* La bordure intérieure standard (inset: 8px) reste inchangée — le titre
   est maintenant DANS la zone de la bordure (inset: 16px = 8px bordure + 8px
   margin interne), donc pas besoin de la rétracter. */

/* =========================================================================
   Mode placeholder — quand la page/article remonté(e) n'a pas d'image
   à la une. Fond teal dégradé, le titre overlay devient l'élément central.
   ========================================================================= */
.bloc-encart__media--placeholder {
    background: linear-gradient(135deg,
            var(--enc-teal-mid) 0%,
            var(--enc-teal) 60%,
            #143F3A 100%);
}

/* En mode placeholder, on centre le titre overlay au milieu (vs en bas) pour
   un rendu plus équilibré sans image en arrière-plan. */
.bloc-encart__media--placeholder .bloc-encart__media-caption {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    right: 16px;
    text-align: center;
    font-size: 1.4rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* Pas de gradient sombre derrière le texte en mode placeholder (le fond teal
   est déjà uniforme et lisible). */
.bloc-encart__media--placeholder .bloc-encart__media-caption::before {
    display: none;
}

/* En mode placeholder, la bordure intérieure reste à inset: 8px (pas besoin
   de l'écarter du bas puisque la caption est centrée, pas en bas). */
.bloc-encart__media--placeholder.bloc-encart__media--with-caption::after {
    inset: 8px;
}

.bloc-encart__media--placeholder.bloc-encart__media--with-caption:hover::after {
    inset: 12px;
}

.bloc-encart__media:focus-visible {
    outline: 2px solid var(--enc-teal);
    outline-offset: 3px;
}

/* =========================================================================
   Titre
   ========================================================================= */
.bloc-encart__title {
    position: relative;
    z-index: 1;
    margin: 0 0 1rem;
    font-family: var(--enc-font-title);
    font-size: clamp(24px, 1.6vw + 14px, 36px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--enc-teal);
    letter-spacing: -0.005em;
    text-align: left;
}

/* =========================================================================
   Texte (WYSIWYG)
   ========================================================================= */
.bloc-encart__text {
    position: relative;
    z-index: 1;
    font-family: var(--enc-font-body);
    /* Légèrement plus grand que les paragraphes classiques (1rem = 16px) */
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--enc-text);
    text-align: left;
}

.bloc-encart__text p {
    margin: 0 0 1rem;
    color: var(--enc-text);
    font-family: var(--enc-font-body);
}

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

.bloc-encart__text strong {
    color: var(--enc-text);
    font-weight: 600;
}

.bloc-encart__text em {
    color: var(--enc-text);
}

/* Liens hypertext dans le corps — teal foncé par défaut (même couleur que le
   titre), passe au teal clair au hover. Soulignés en permanence. */
.bloc-encart__text a:not(.verdon-cta):not(.verdon-cta-outline) {
    color: var(--enc-teal) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--enc-teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.bloc-encart__text a:not(.verdon-cta):not(.verdon-cta-outline):hover {
    color: var(--enc-teal-light) !important;
    text-decoration-color: var(--enc-teal-light);
}

/* Listes à puces — flèches "➝" custom (cohérence bloc image-texte) */
.bloc-encart__text ul {
    list-style: none !important;
    padding-left: 0;
    margin: 0 0 1rem 1.75em;
}

.bloc-encart__text ul li {
    position: relative;
    padding-left: 2.2em;
    margin: 0 0 0.5em;
    list-style: none !important;
}

.bloc-encart__text ul li::before {
    content: '➝';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--enc-teal);
    font-size: 0.95em;
    font-weight: 400;
    line-height: 1.68;
    opacity: 0.75;
    transition: transform 0.25s var(--enc-ease), opacity 0.25s ease;
}

.bloc-encart__text ul li:hover::before {
    opacity: 1;
    transform: translateX(3px);
}

/* =========================================================================
   CTA (bouton) — Base plein, 3 variantes teal/gris/orange (cohérence bloc 2)
   ========================================================================= */
.bloc-encart__cta {
    position: relative;
    z-index: 1;
    /* display: flex + width fit-content + margin auto = centrage horizontal du
       bouton tout en laissant titre et texte alignés à gauche au-dessus. */
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1.5rem auto 0;
    padding: 13px 28px;
    min-width: var(--enc-btn-min-width);
    border: none !important;
    border-radius: var(--enc-radius) !important;
    font-family: var(--enc-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-encart__cta::after {
    content: none !important;
    display: none !important;
}

/* Glow radial qui suit la souris */
.bloc-encart__cta::before {
    content: '' !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.bloc-encart__cta:hover,
.bloc-encart__cta:focus {
    background-position: 100% 0% !important;
    color: #fff !important;
    text-decoration: none !important;
}

.bloc-encart__cta:hover::before {
    opacity: 1;
}

.bloc-encart__cta:active {
    transform: scale(0.97);
    filter: brightness(0.88);
}

.bloc-encart__cta span {
    position: relative;
    z-index: 1;
}

/* --- VARIANTE 1 : teal (défaut) --- */
.bloc-encart__cta.verdon-cta:not(.verdon-cta--grey):not(.verdon-cta--orange) {
    background-color: var(--enc-teal) !important;
    background-image: linear-gradient(to right,
            var(--enc-teal-mid) 0%,
            var(--enc-teal) 50%,
            #143F3A 100%) !important;
}

.bloc-encart__cta.verdon-cta:not(.verdon-cta--grey):not(.verdon-cta--orange):focus-visible {
    outline: 2px solid var(--enc-teal);
    outline-offset: 3px;
}

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

.bloc-encart__cta.verdon-cta--grey:focus-visible {
    outline: 2px solid var(--enc-grey-dark);
    outline-offset: 3px;
}

/* --- VARIANTE 3 : orange --- */
.bloc-encart__cta.verdon-cta--orange {
    background-color: var(--enc-orange) !important;
    background-image: linear-gradient(to right,
            var(--enc-orange-mid) 0%,
            var(--enc-orange) 50%,
            var(--enc-orange-dark) 100%) !important;
}

.bloc-encart__cta.verdon-cta--orange:focus-visible {
    outline: 2px solid var(--enc-orange);
    outline-offset: 3px;
}

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

/* Tablette : l'image superposée à droite ne fonctionne plus (déborde le
   viewport). On la repositionne au-dessus de la card, centrée, dépassant
   par le haut au lieu du côté. */
@media (max-width: 900px) {
    .bloc-encart__card--has-image {
        padding-right: 48px; /* revient au padding normal */
        margin-top: 120px;   /* espace pour l'image qui dépasse en haut */
    }

    .bloc-encart__media {
        top: 0;
        right: 50%;
        transform: translate(50%, -50%);
        width: 180px;
    }

    .bloc-encart__media:hover {
        transform: translate(50%, calc(-50% - 2px));
    }
}

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

    .bloc-encart__card {
        padding: 32px 24px;
    }

    /* Mobile : layout vertical → image positionnée SOUS la card, remontant
       vers le haut pour chevaucher légèrement la bordure basse de la card.
       Annule le margin-top et le padding-right hérités du layout desktop. */
    .bloc-encart__card--has-image {
        padding: 32px 24px;
        margin-top: 0;
    }

    .bloc-encart__cta {
        min-width: 0;
        width: 100%;
        max-width: var(--enc-btn-min-width);
    }

    .bloc-encart__title {
        font-size: clamp(22px, 4vw + 12px, 28px);
    }

    /* Mobile : on transforme l'<article> .bloc-encart__card en simple wrapper
       transparent (sans bordure, sans fond, sans padding) qui héberge deux
       enfants empilés : .bloc-encart__body (= la VRAIE card visuelle avec
       bordure+fond+padding) et .bloc-encart__media (image SOUS la card).
       Ainsi l'image n'est visuellement plus dans le cadre teal. */
    .bloc-encart__card--has-image {
        padding: 0;
        background: transparent;
        border: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    .bloc-encart__card--has-image:hover {
        transform: none;
        border: none;
        background: transparent;
    }

    /* Le body récupère le rôle de "card visuelle" : bordure, fond, padding,
       border-radius. z-index plus bas que l'image → l'image passe par-dessus
       le bas du body au point de chevauchement. */
    .bloc-encart__card--has-image .bloc-encart__body {
        background: rgba(var(--enc-teal-rgb), 0.05);
        border: 2px solid var(--enc-teal);
        border-radius: var(--enc-radius);
        padding: 32px 24px;
        position: relative;
        z-index: 1;
    }

    /* Image SOUS le body : flow naturel, en dessous, remontée de 30px pour
       chevaucher la bordure basse du body. z-index supérieur = l'image est
       AU PREMIER PLAN, sa bordure haute passe devant la bordure basse du body.
       Largeur réduite à 85% + auto margins pour centrer horizontalement. */
    .bloc-encart__media {
        position: relative;
        top: auto;
        right: auto;
        z-index: 2;
        width: 85%;
        margin: -30px auto 0 auto;
        transform: none;
    }

    .bloc-encart__media:hover {
        transform: translateY(-2px);
    }

    .bloc-encart__media-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;
        font-size: 1.05rem;
        line-height: 1.15;
    }
}

/* =========================================================================
   Accessibilité — prefers-reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {

    .bloc-encart__card,
    .bloc-encart__cta,
    .bloc-encart__cta::before,
    .bloc-encart__media,
    .bloc-encart__media img,
    .bloc-encart__media-caption,
    .bloc-encart__text ul li::before {
        transition: none !important;
    }

    .bloc-encart__text ul li:hover::before {
        transform: none !important;
    }

    .bloc-encart__cta:active,
    .bloc-encart__card:hover,
    .bloc-encart__media:hover,
    .bloc-encart__media:hover img {
        transform: none !important;
    }
}