/**
 * Bloc 4 — Remontée automatique (refonte design)
 *
 * Aligné sur le langage visuel des blocs image-texte et 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)
 * - Card avec image + overlay gradient teal (au lieu de fond noir 30%)
 * - Hover : image scale doux, overlay s'intensifie, titre slide
 *
 * Les classes parallèles .bloc-remontee__* coexistent avec les anciennes
 * (.contentuRemonteItem, .contentuRemonteTitre, etc.) — ce CSS surcharge
 * ces dernières grâce à la spécificité (.bloc-remontee .contentuRemonteItem).
 * Le slick carousel reste fonctionnel : on n'écrase que le visuel des items.
 */

/* =========================================================================
   Variables locales au bloc
   ========================================================================= */
.bloc-remontee {
    --brem-teal: #1F5C56;
    --brem-teal-mid: #2D7A72;
    --brem-teal-light: #3A9C92;
    --brem-teal-rgb: 31, 92, 86;
    --brem-text: #0F2E2A;
    --brem-text-soft: #1A3F3A;
    --brem-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --brem-font-title: 'DM Serif Display', Georgia, serif;
    --brem-radius: 3px;
    --brem-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --brem-shadow: 0 8px 24px rgba(var(--brem-teal-rgb), 0.18);
    --brem-shadow-hover: 0 14px 32px rgba(var(--brem-teal-rgb), 0.28);

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

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

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

/* =========================================================================
   Container & list
   ========================================================================= */
/* Container : 1440px max pour permettre l'affichage complet de 4 cards à 320px
   sans déclencher le carousel. Calcul : 4×320 + 3×32 (gap) + 2×20 (padding) = 1416px.
   La règle legacy .content { width: 1200px } est surchargée ici grâce à la
   spécificité (0,2,0) + !important sur max-width pour battre le width: 1200px. */
.bloc-remontee .bloc-remontee__container {
    max-width: 1440px !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 0 20px;
}

.bloc-remontee {
    /* Taille standard des cards — uniforme quel que soit le nombre.
       320px = sweet spot pour image immersive + texte au hover.
       Permet 3-4 cards par rangée sur desktop (1024-1440px). */
    --brem-card-size: 320px;
}

/* Liste de cards — flex centered avec wrap autorisé par défaut.
   Décision du mode d'affichage :
   - < 4 cards → flex centered (wrap si jamais nécessaire en mobile)
   - >= 4 cards → le JS ajoute .is-scrollable sur le wrapper, qui passe en
     flex nowrap + overflow-x: auto + scroll-snap + flèches.
   - Mode "retour à la ligne" forcé (ACF) → toujours wrap, pas de scroll. */
.bloc-remontee .bloc-remontee__list,
.bloc-remontee .contentuRemonteList {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 2rem !important;
    /* Alignement à gauche : une ligne incomplète (ex: 6 items = 4+2) reste
       collée à gauche au lieu d'être centrée. */
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 3rem 0;
    grid-template-columns: none !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================================
   Mode scrollable — activé en JS via .is-scrollable sur le wrapper .bloc-remontee
   quand scrollWidth > clientWidth.

   La liste passe en flex non-wrap + overflow-x: auto + scroll-snap.
   Les flèches de navigation (insérées en JS) deviennent visibles.
   ========================================================================= */
.bloc-remontee.is-scrollable {
    position: relative;
}

.bloc-remontee.is-scrollable .bloc-remontee__list {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 2rem;
    /* Espace pour les flèches qui débordent légèrement sur les bords */
    padding-left: 1rem;
    padding-right: 1rem;
    /* Masque la scrollbar (toujours utilisable via clavier + flèches JS) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bloc-remontee.is-scrollable .bloc-remontee__list::-webkit-scrollbar {
    display: none;
}

.bloc-remontee.is-scrollable .bloc-remontee__item {
    scroll-snap-align: start;
    /* Petit margin pour que le scroll-snap ait un effet visible entre cards */
    scroll-snap-stop: always;
}

/* Flèches de navigation — visibles uniquement en mode scrollable, design
   moderne : pastilles rondes blanches avec ombre douce, positionnées
   verticalement au centre des cards (au niveau de l'image, pas du body). */
.bloc-remontee .bloc-remontee__nav {
    position: absolute;
    /* Centré verticalement sur la zone image (image 16/9 sur 320px = 180px ;
       top = padding-list 3rem + image/2 = 48px + 90px = 138px) */
    top: calc(3rem + 90px);
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    display: none;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--brem-teal);
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(var(--brem-teal-rgb), 0.25);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    padding: 0;
}

.bloc-remontee .bloc-remontee__nav svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.25s var(--brem-ease);
}

.bloc-remontee .bloc-remontee__nav:hover:not(:disabled) {
    background: var(--brem-teal);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--brem-teal-rgb), 0.35);
}

.bloc-remontee .bloc-remontee__nav:active:not(:disabled) {
    transform: translateY(-50%) scale(0.94);
}

.bloc-remontee .bloc-remontee__nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(var(--brem-teal-rgb), 0.15);
}

/* Position : juste à l'extérieur de la zone des cards (= container padding 20px).
   left: -22px → la pastille (44px) est centrée sur le bord interne du container,
   donc à mi-cheval entre la zone padding et la card.
   Pour aligner exactement avec le bord de la première/dernière card (qui colle
   au padding-left/right du container 20px), on utilise: left = padding - half-arrow
   = 20 - 22 = -2px. À ajuster selon préférence. */
.bloc-remontee .bloc-remontee__container .bloc-remontee__nav--prev,
.bloc-remontee > .bloc-remontee__nav--prev {
    left: -22px;
}

.bloc-remontee .bloc-remontee__container .bloc-remontee__nav--next,
.bloc-remontee > .bloc-remontee__nav--next {
    right: -22px;
}

.bloc-remontee.is-scrollable .bloc-remontee__nav {
    display: inline-flex;
}

/* Indicateur visuel "il y a plus de cards à droite" — gradient blanc qui
   fade les cards près du bord. Apparaît uniquement en mode scrollable. */
.bloc-remontee.is-scrollable::before,
.bloc-remontee.is-scrollable::after {
    content: '';
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    width: 60px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bloc-remontee.is-scrollable::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
}

.bloc-remontee.is-scrollable::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
}

.bloc-remontee.is-scrollable.has-prev::before,
.bloc-remontee.is-scrollable.has-next::after {
    opacity: 1;
}

/* =========================================================================
   Card — design strictement aligné sur le bloc hub (.bloc-hub__grid-card).
   Animation principale : "rideau teal" qui monte de bas en haut via clip-path.
   Au repos : image 16/9 en haut + bande blanche en bas avec titre teal.
   Au hover : le body s'ouvre, image disparaît (opacity → 0), overlay teal
   recouvre la card, titre passe en blanc, extrait apparaît en cascade.
   ========================================================================= */
/* L'item n'est qu'un wrapper de flex pour fixer la taille de la card.
   Pas de styling visuel ici — tout est porté par __link. */
.bloc-remontee .bloc-remontee__item {
    --brem-body-h: 150px;
    flex: 0 0 auto;
    width: var(--brem-card-size);
    max-width: 100%;
    background: transparent !important;
}

/* La CARD elle-même = __link. Tout y est : image, body, bordure, info.
   Pattern identique à .bloc-hub__grid-card (où le <a> est la card). */
.bloc-remontee .bloc-remontee__link {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    border-radius: var(--brem-radius);
    overflow: hidden;
    box-shadow: var(--brem-shadow);
    background-color: transparent;
    padding-bottom: var(--brem-body-h);
    transition: box-shadow 0.3s ease;
    isolation: isolate;
}

.bloc-remontee .bloc-remontee__link:hover {
    box-shadow: var(--brem-shadow-hover);
}

/* =========================================================================
   Image — pattern hub strict.
   - __media : zone 16/9 en haut, en flow flex normal
   - <img> : position: absolute inset: 0 dans le __media (couvre la zone 16/9)
   - Au repos : l'image nette est visible dans la zone __media.
   - Au hover : image opacity → 0. Le background-image du __body (qui couvre
     toute la card grâce au clip-path qui s'ouvre) apparaît → on voit la même
     image en background, teintée teal par le ::before du body.
   ========================================================================= */
.bloc-remontee .bloc-remontee__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    flex: 1 0 auto;
    overflow: hidden;
    margin: 0;
}

.bloc-remontee .bloc-remontee__media img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
    z-index: 0;
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Au hover : l'image nette disparaît. Le background-image du __body
   (visible quand le clip-path s'ouvre et que le fond blanc devient transparent)
   prend le relais et couvre toute la card. */
.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__media img {
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

/* =========================================================================
   Bordure intérieure — pattern hub exact : ::after du __media (zone 16/9),
   inset: 8px → bordure dans la zone image visible.
   ========================================================================= */
.bloc-remontee .bloc-remontee__media::after {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 2px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__media::after {
    opacity: 0;
}

/* Le <span class="bloc-remontee__inner-border"> du PHP est neutralisé. */
.bloc-remontee .bloc-remontee__inner-border {
    display: none !important;
}

/* =========================================================================
   Overlay — non utilisé dans ce design (l'effet teal est géré par
   le ::before du body). On le neutralise pour ne pas créer de couche
   parasite par-dessus l'image au repos.
   ========================================================================= */
.bloc-remontee .bloc-remontee__overlay {
    display: none !important;
}

/* =========================================================================
   Body — clip-path qui ouvre comme un rideau du bas vers le haut.
   Au repos : clippé à la bande basse (150px), fond blanc, titre teal.
   Au hover : clip-path inset(-2px) → recouvre toute la card, fond
   transparent + ::before teal 85% qui apparaît, titre/extrait en blanc.
   ========================================================================= */
.bloc-remontee .bloc-remontee__body {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;
    /* Padding bas plus généreux pour que le titre se cale propre dans la
       bande blanche sans toucher le bord. Padding haut/horizontal minimal
       puisque seuls les éléments visibles sont en flow au repos. */
    padding: 20px 22px 22px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
    text-shadow: none !important;
    overflow: hidden;
    clip-path: inset(calc(100% - var(--brem-body-h)) -2px -2px -2px);
    /* SORTIE */
    transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s ease,
        padding 0.3s ease;
}

/* Filtre blanc au repos par-dessus le background-image éventuel du body
   (rare ici, mais on suit le pattern hub par sécurité). */
.bloc-remontee .bloc-remontee__body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 1);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__body::after {
    opacity: 0;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__body {
    clip-path: inset(-2px);
    background-color: transparent !important;
    justify-content: flex-start;
    padding: 24px 22px;
    /* ENTRÉE : rideau qui monte */
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.4s ease,
        padding 0.4s ease;
}

/* Overlay teal par-dessus le background-image du body (visible uniquement
   au hover). Opacité 0.85 identique au bloc hub — image transparaît
   légèrement (15%) en arrière-plan tout en assurant la lisibilité du
   texte blanc par-dessus. */
.bloc-remontee .bloc-remontee__body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--brem-teal-rgb), 0.85);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__body::before {
    opacity: 1;
    transition: opacity 0.4s ease 0.1s;
}

/* =========================================================================
   Titre — teal au repos, blanc au hover (cascade après le clip-path)
   ========================================================================= */
.bloc-remontee .bloc-remontee__title {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    font-family: var(--brem-font-title) !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--brem-teal);
    text-align: left;
    letter-spacing: -0.005em;
    /* SORTIE */
    transition: color 0.25s ease;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__title {
    color: #fff;
    /* ENTRÉE : cascade après le clip-path */
    transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

/* =========================================================================
   Extrait — caché au repos, apparaît en cascade après le titre au hover
   ========================================================================= */
.bloc-remontee .bloc-remontee__excerpt {
    position: relative;
    z-index: 1;
    font-family: var(--brem-font-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    text-align: left;
    /* Caché au repos via display: none → retiré du flow flex, le titre reste
       seul dans la bande basse sans être poussé vers le haut. Au hover,
       passe à -webkit-box pour activer le line-clamp. */
    display: none;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.25s ease;
    max-height: none;
    margin: 0;
}

.bloc-remontee .bloc-remontee__excerpt * {
    line-height: 1.5;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__excerpt {
    display: -webkit-box;
    opacity: 1;
    /* ENTRÉE : fade-in + slide-up cascadé après le titre */
    animation: bremExcerptFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes bremExcerptFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================================
   Bouton "Read more" (mode manuelle) — outline teal au repos, blanc au hover
   ========================================================================= */
.bloc-remontee .bloc-remontee__cta {
    position: relative;
    z-index: 1;
    /* Caché au repos pour ne pas pousser le titre hors de la bande visible.
       Passe à inline-flex au hover. */
    display: none;
    align-items: center;
    justify-content: center;
    margin: 4px 0 0 !important;
    padding: 7px 16px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: var(--brem-radius) !important;
    background: transparent !important;
    color: #fff !important;
    font-family: var(--brem-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bloc-remontee .bloc-remontee__cta::before,
.bloc-remontee .bloc-remontee__cta::after {
    content: none !important;
    display: none !important;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__cta {
    display: inline-flex;
}

/* =========================================================================
   Info (ville/date) — pastille avec position et style qui changent au hover.
   - Au repos : haut à droite, fond teal solide, texte blanc.
   - Au hover : descend en bas à droite, fond blanc translucide (glass) avec
     bordure blanche, texte blanc. Légère animation de slide + fade.
   ========================================================================= */
.bloc-remontee .bloc-remontee__info {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    background: var(--brem-teal);
    border: 1px solid transparent;
    border-radius: var(--brem-radius);
    color: #fff;
    font-family: var(--brem-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: none !important;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    /* Animation : top + background + border en simultané. La transition
       depuis "top: 12px" vers "top: calc(100% - 12px - height)" anime la
       descente de la pastille. */
    transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
        background 0.35s ease 0.15s,
        border-color 0.35s ease 0.15s,
        backdrop-filter 0.35s ease 0.15s;
}

.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__info {
    /* Position bas à droite : calc pour mesurer depuis le haut de la card */
    top: calc(100% - 12px - 26px); /* 26px ≈ hauteur de la pastille */
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bloc-remontee .bloc-remontee__info svg {
    width: 13px;
    height: 13px;
    fill: #fff !important;
}

.bloc-remontee .bloc-remontee__info svg path {
    fill: #fff !important;
}

/* =========================================================================
   Reset des règles legacy qui interfèrent avec le nouveau design
   ---------------------------------------------------------------
   Le legacy applique sur .contentuRemonteItem :
   - display: grid + grid-area sur le > a → casse notre flex column
   - background #2e2e2e, max-width 35rem
   - picture height: 100% → casse l'aspect-ratio
   - img opacity 0.6 !important + transform scale(1.1) translateX → image quasi invisible
   - hover: opacity 0.1, translateX 10px, background teal sur picture
   - .contentuRemonteTxt en position absolute top: 50% transform: translateY(-50%)
   On neutralise tout ici pour que le pattern hub puisse s'exprimer.
   ========================================================================= */

/* Wrapper item : on neutralise grid + flex: 1 + width legacy.
   Taille fixe uniforme (--brem-card-size) pour toutes les cards. */
.bloc-remontee .contentuRemonteItem,
.bloc-remontee .bloc-remontee__item,
.bloc-remontee .content .contentuRemonteItem {
    background-color: transparent !important;
    display: block !important;
    flex: 0 0 var(--brem-card-size) !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: var(--brem-card-size) !important;
    max-width: var(--brem-card-size) !important;
    width: var(--brem-card-size) !important;
}

/* Le > a (notre __link) : neutralise grid-area legacy et fixe le display flex */
.bloc-remontee .contentuRemonteItem > a {
    display: flex !important;
    grid-area: unset !important;
    flex-direction: column !important;
}

/* Picture (notre __media) : neutraliser le height legacy.
   Position relative pour participer au flow flex (zone 16/9 en haut).
   L'image en absolute inset: 0 dans le picture remplit la zone. */
.bloc-remontee .contentuRemonteItem picture.bloc-remontee__media {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
}

/* Image : retirer opacity 0.6 et transform legacy */
.bloc-remontee .contentuRemonteItem img,
.bloc-remontee .bloc-remontee__media img {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
    height: 100% !important;
}

/* Au hover legacy : annule le translateX et le fond teal sur picture */
.bloc-remontee .contentuRemonteItem a:hover picture {
    background-color: transparent !important;
}

.bloc-remontee .contentuRemonteItem a:hover img,
.bloc-remontee .bloc-remontee__link:hover .bloc-remontee__media img {
    transform: scale(1) translateX(0) !important;
}

/* Annule les heights fixes legacy .contentuRemonte img, .contentuRemonteHaut img
   qui forcent des heights en rem (28.6rem, 42.7rem, 50rem etc.) */
.bloc-remontee.contentuRemonte img,
.bloc-remontee.contentuRemonteHaut img {
    height: 100% !important;
}

/* Le .contentuRemonteTxt legacy est positionné top: 50%; transform: translateY(-50%)
   au centre vertical. On force la position absolute inset:0 du body hub. */
.bloc-remontee .contentuRemonteItem .contentuRemonteTxt {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    text-shadow: none !important;
    max-height: none !important;
    overflow: hidden !important;
    text-align: left !important;
    padding: 20px 22px 22px !important;
}

/* L'extrait legacy .contentuRemonteExtrait a max-height: 0; opacity: 0 par défaut
   et apparaît au hover. Le pattern hub gère opacity différemment (animation),
   donc on neutralise les transitions legacy qui interfèrent. */
.bloc-remontee .contentuRemonteItem .contentuRemonteExtrait {
    max-height: none !important;
    transition: none !important;
}

.bloc-remontee .contentuRemonteItem a:hover .contentuRemonteExtrait {
    max-height: none !important;
    opacity: 1 !important;
}

/* Le titre legacy .contentuRemonteTitre a font-family: Gravity. On force la
   famille DM Serif Display du design system. */
.bloc-remontee .contentuRemonteItem .contentuRemonteTitre {
    font-family: var(--brem-font-title) !important;
}

/* L'info legacy .contentuRemonteInfo est en position absolute bottom: 1rem; left: 2rem.
   On force notre positionnement haut-droite. */
.bloc-remontee .contentuRemonteItem .contentuRemonteInfo {
    bottom: auto !important;
    left: auto !important;
}

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

/* Tablette */
@media (max-width: 1024px) {
    .bloc-remontee {
        --brem-card-size: 280px;
    }

    .bloc-remontee .bloc-remontee__item {
        --brem-body-h: 140px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .bloc-remontee {
        --brem-card-size: min(90vw, 360px);
    }

    .bloc-remontee .bloc-remontee__item {
        /* Bande body plus petite sur mobile (card plus étroite) */
        --brem-body-h: 130px;
    }

    .bloc-remontee .bloc-remontee__list,
    .bloc-remontee .bloc-remontee__list--grid {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .bloc-remontee .bloc-remontee__title {
        font-size: 18px;
    }

    .bloc-remontee .bloc-remontee__excerpt {
        font-size: 14px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    .bloc-remontee .bloc-remontee__info {
        font-size: 11px;
        padding: 4px 8px;
        top: 10px;
        right: 10px;
    }

    .bloc-remontee .bloc-remontee__info svg {
        width: 12px;
        height: 12px;
    }
}

/* =========================================================================
   Accessibilité — prefers-reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .bloc-remontee .bloc-remontee__item,
    .bloc-remontee .bloc-remontee__media img,
    .bloc-remontee .bloc-remontee__inner-border,
    .bloc-remontee .bloc-remontee__body,
    .bloc-remontee .bloc-remontee__title,
    .bloc-remontee .bloc-remontee__excerpt,
    .bloc-remontee .bloc-remontee__cta,
    .bloc-remontee .bloc-remontee__info {
        transition: none !important;
        animation: none !important;
    }

    .bloc-remontee .bloc-remontee__item:hover {
        transform: none;
    }
}