/* ================================================================
   HOME PAGE — Bio et Local
   Couleurs : Rose FRAB #D2097A | Vert FRAB #009C50 | Jaune #FFDB16
   Seules les règles que Bootstrap ne couvre pas sont ici.
   ================================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --rose-frab: #D2097A;
    --vert-frab: #009C50;
    --jaune: #FFDB16;
    --font-title: 'Boogaloo', 'Arial Rounded MT Bold', sans-serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Alias pour agenda.css (filtre événements) */
    --ev-primary:    #D2097A;
    --ev-primary-dk: #a5076a;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 1 — "À LA UNE" (carousel Swiper)
   ══════════════════════════════════════════════════════════════ */

/* Wrapper de la section (mobile-first : plein bord, comme à l'origine) */
.home-hero {
    position: relative;
    background: #222;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    height: 300px;
}
@media (min-width: 768px) { .home-hero { height: 400px; } }

/* Le .container imbriqué ne sert qu'au recadrage desktop (voir plus bas) :
   en dessous de 992px il ne doit rien changer au rendu d'origine. */
@media (max-width: 991.98px) {
    .home-hero > .container { padding-left: 0; padding-right: 0; max-width: none; width: 100%; }
}

/* Réserve la hauteur avant init Slick → évite le CLS */
.home-hero-slick { min-height: 300px; }
@media (min-width: 768px) { .home-hero-slick { min-height: 400px; } }
@media (min-width: 992px) { .home-hero-slick { min-height: 460px; } }

/* Slide : image de fond pleine hauteur */
/* Sélecteur à 2 classes : Slick ajoute .slick-slide et applique
   `.slick-initialized .slick-slide { display: block }`, qui sinon
   écrase notre `display: flex` (même spécificité, une seule classe). */
.home-hero-slick .home-hero-slide {
    position: relative;
    height: 300px;
    background-color: #222;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: stretch;
}
@media (min-width: 768px) { .home-hero-slick .home-hero-slide { height: 400px; } }

/* Anti-FOUC : Slick s'initialise en pied de page (perf), donc avant son
   exécution on ne montre que la 1ère vignette pour éviter l'empilement
   visible de toutes les vignettes le temps que le JS arrive. */
.home-hero-slick .home-hero-slide:not(:first-child) {
    display: none;
}
.home-hero-slick.slick-initialized .home-hero-slide {
    display: flex;
}

/* LCP : 1er slide rendu via <img fetchpriority="high"> au lieu de background-image */
.home-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 0;
}

/* Dégradé sombre en bas pour lisibilité du texte */
.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,0.72) 100%);
    border-radius: inherit;
    pointer-events: none;
}

/* Contenu du slide : texte en bas (le badge est hors slide, voir plus bas) */
.home-hero-content {
    max-width: 700px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 100%;
    min-height: 300px;
}

/* Badge "À la une" — unique pour tout le carrousel, superposé au-dessus des slides */
.home-une-badge {
    position: absolute;
    top: 40px;
    left: -20px;
    z-index: 5;
    display: inline-block;
    background: #fff;
    border-radius: 40px;
    padding: 8px 28px;
    font-family: var(--font-title);
    font-size: 36px;
    color: var(--rose-frab);
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(0,0,0,0.22);
}

/* Titre de l'article — text-shadow (pas box-shadow : ça ne s'applique
   qu'aux glyphes de texte, box-shadow ne marche que sur la boîte d'un
   élément) pour garder le texte blanc lisible sur une image dont on ne
   maîtrise pas le contenu, sans toucher à la couleur du texte ni à
   l'image. Double ombre : une petite et nette pour le contraste sur
   fond clair, une grande et diffuse pour les fonds très texturés. */
.home-hero-title {
    display: block;
    font-family: var(--font-title);
    font-size: 20px;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 6px;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 2px 6px rgba(0, 0, 0, 0.85),
        0 4px 18px rgba(0, 0, 0, 0.75);
}

.home-hero-title:hover { color: rgba(255,255,255,0.85); }

/* Extrait sous le titre */
.home-hero-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.88);
    line-height: 1.45;
    margin: 0;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        0 2px 6px rgba(0, 0, 0, 0.85),
        0 4px 18px rgba(0, 0, 0, 0.75);
}

/* Flèches de navigation */
.home-hero-prev,
.home-hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.2s;
}

.home-hero-prev { left: 8px; }
.home-hero-next { right: 8px; }
.home-hero-prev:hover,
.home-hero-next:hover { opacity: 0.7; }

.home-hero-prev img,
.home-hero-next img { display: block; }

.home-une-empty p { color: #888; }

/* Responsive tablette */
@media (min-width: 768px) {
    .home-hero-content  { min-height: 400px; }
    .home-une-badge     { font-size: 42px; padding: 10px 34px; }
    .home-hero-title    { font-size: 26px; }
    .home-hero-subtitle { font-size: 16px; }
}

/* ── Desktop (≥992px) uniquement : refonte visuelle (carte arrondie,
   marge via .container, encart sombre centré, badge chevauchant) ── */
@media (min-width: 992px) {
    .home-hero {
        background: transparent;
        overflow: visible;
        height: auto;
    }

    .home-hero-slick .home-hero-slide {
        height: 460px;
        border-radius: 24px;
    }

    .home-hero-overlay {
        background: rgba(0,0,0,0.12);
    }

    .home-hero-content {
        max-width: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 16px;
        min-height: 0;
    }

    .home-une-badge {
        top: 100px;
        left: -20px;
        font-size: 40px;
        padding: 10px 34px;
    }

    .home-hero-text {
        position: relative;
        background: rgba(0,0,0,0.55);
        border-radius: 10px;
        padding: 24px 40px;
        max-width: 700px;
        text-align: center;
    }

    .home-hero-title {
        font-family: var(--font-title);
        font-size: 36px;
        text-shadow: none;
    }

    .home-hero-subtitle { text-shadow: none; }

    .home-hero-prev { left: 16px; }
    .home-hero-next { right: 16px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 2 — ÉVÉNEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Titre de section "pill" — déborde à gauche */
.home-section {
    padding: 50px 0 50px 0;
}
/* Déborde à gauche, comme le badge "À la une" */
.home-section-title-wrap {
    position: relative;
    margin-bottom: 12px;
}

@media (max-width: 576px) {
    .home-hero-text { padding-left: 60px; padding-right: 60px; }
}

.home-section-pill {
    position: relative;
    left: -50px;
    background: var(--rose-frab);
    border-radius: 40px;
    padding: 8px 24px 8px 44px;
}

@media (min-width: 992px) {
    .home-section-pill { left: -30px; }
}

.home-section-pill h2 {
    font-family: var(--font-title);
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    font-weight: 400;
}

.home-more-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--vert-frab);
    text-decoration: none;
    border-bottom: 1px solid var(--vert-frab);
    padding-bottom: 1px;
    margin-right: 4rem;
}

/* Bouton "Plus de filtres" — style lien souligné vert ────────── */
.ev-filter-container .ev-btn-filtres {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--vert-frab);
    border-radius: 0;
    padding: 0 0 2px;
    color: var(--vert-frab);
    font-size: 16px;
    font-weight: 600;
    gap: 8px;
    cursor: pointer;
}
.ev-filter-container .ev-btn-filtres:hover {
    background: transparent;
    opacity: 0.75;
}

.ev-filter-container .ev-btn-filtres-icon {
    padding-right: 4px;
}


/* ══════════════════════════════════════════════════════════════
   SECTION ÉDITORIALE — Titre édition + dates + description + affiche
   ══════════════════════════════════════════════════════════════ */
.ev-arc-title {
    font-family: var(--font-title);
    font-size: 30px;
    color: var(--rose-frab);
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 10px;
    line-height: 1.05;
    font-weight: 400;
}

.ev-arc-subtitle {
    font-family: var(--font-title);
    font-size: 24px;
    color: var(--vert-frab);
    margin: 0 0 14px;
    line-height: 1.15;
    font-weight: 400;
}

.ev-arc-intro {
    display: block;
    max-width: 700px;
    margin: 0 auto 30px;
    text-align: center;
}

.ev-arc-affiche-wrap {
    margin: 12px auto 0;
}

@media (min-width: 900px) {
    .ev-arc-intro {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }

    .ev-arc-affiche-wrap {
        margin: 0;
    }
}

.ev-arc-description {
    flex: 1;
    font-family: var(--font-body);
    font-size: 14px;
    color: #000;
    line-height: 1.6;
    margin: 0;
    min-width: 0;
}

.ev-arc-description strong,
.ev-arc-description b {
    color: var(--rose-frab);
    font-weight: 700;
}

.ev-arc-description h2 {
    position: relative;
    font-family: var(--font-title);
    color: var(--rose-frab);
    font-size: 1.9rem;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

/* Icône décorative en haut à droite du titre généré dynamiquement
   — masquée sur petits écrans */
@media (min-width: 768px) {
    .ev-arc-description h2::after {
        content: '';
        position: absolute;
        top: -70px;
        right: -30px;
        width: 90px;
        height: 90px;
        background: url('../images/icons/ornement1.svg') no-repeat center / contain;
        pointer-events: none;
    }
}

@media (min-width: 900px) {
    .ev-arc-description h2 { 
        font-size: 2.3rem; 
        max-width: 450px;
    }
}

/* Images WYSIWYG dans texte_de_presentation
   — wp_kses_post supprime style="float:right" inline,
     on ré-applique le float via class="alignright/alignleft"   */
.ev-arc-description img.alignright,
.ev-arc-description p img.alignright,
.ev-arc-description img[align="right"],
.ev-arc-description p img[align="right"],
.ev-arc-description figure.alignright {
    float: right;
    margin: 0 0 16px 24px;
    max-width: 45%;
    height: auto;
    border: 3px solid var(--vert);
}

.ev-arc-description img.alignleft,
.ev-arc-description p img.alignleft,
.ev-arc-description img[align="left"],
.ev-arc-description p img[align="left"],
.ev-arc-description figure.alignleft {
    float: left;
    margin: 0 24px 16px 0;
    max-width: 45%;
    height: auto;
    border-radius: 6px;
}

.ev-arc-description figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

.ev-arc-description::after {
    content: '';
    display: table;
    clear: both;
}

.ev-arc-affiche-wrap {
    flex-shrink: 0;
    width: 135px;
}

.ev-arc-affiche {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 3px solid var(--vert-frab);
    border-radius: 6px;
    box-sizing: border-box;
}

@media (min-width: 900px) {
    .ev-arc-title       { font-size: 50px; }
    .ev-arc-subtitle    { font-size: 36px; }
    .ev-arc-description { font-size: 16px; }
}

@media (min-width: 992px) {
    .home-events-list .container {
        max-width: 700px;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 3 — BLOCS NAVIGATION
   ══════════════════════════════════════════════════════════════ */

/* Section de base (mobile-first, comme à l'origine) : chaque bloc
   centré, badge en dessous. La refonte (carte arrondie, badge qui
   déborde pour les blocs pairs, trait jaune + personnage pour les
   impairs) n'arrive qu'à partir de 768px, plus bas dans ce fichier. */
.home-nav-bloc {
    padding: 32px 0;
}

.home-nav-bloc-inner {
    position: relative;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.home-nav-bloc-header {
    flex: 1;
}

.home-nav-bloc-title {
    font-family: var(--font-title);
    font-size: 26px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.1;
    margin: 0 0 10px;
}

.home-nav-bloc-intro {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 0 30px;
}

.home-nav-bloc-intro p            { margin: 0 0 6px; }
.home-nav-bloc-intro p:last-child { margin-bottom: 0; }
.home-nav-bloc-intro ul           { padding-left: 18px; margin: 4px 0 6px; text-align: left; }

.home-chiffres-cles {
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.home-chiffres-cles .col:last-child{
    /* auto (pas une largeur fixe) : passe à la ligne grâce à row-cols-md-N-1
       (qui remplit déjà la ligne précédente avec les autres items), mais se
       dimensionne ensuite à son propre contenu au lieu d'une largeur imposée. */
    flex: 0 0 auto;
    width: auto;
}

.home-chiffres-cles .chiffre-cle {
    max-width: 450px;
    margin-inline: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-chiffres-cles .chiffre-cle__nombre {
    font-family: var(--font-title);
}

.home-chiffres-cles .chiffre-cle__texte {
    font-family: var(--font-body);
    font-weight: 700;
}

.home-chiffres-cles .chiffre-cle__icone {
    display: block;
    margin-bottom: 0.75rem;
    width: 96px;
    height: 96px;
    margin-inline: auto;
}

.home-chiffres-cles-row + .home-chiffres-cles-row {
    margin-top: 1.5rem;
}

/* ── Impaire (fond blanc) ────────────────────────────────────── */
.home-nav-bloc--impair .home-nav-bloc-title { color: var(--rose-frab); text-align: center; }
.home-nav-bloc--impair .home-nav-bloc-intro { color: #333; }
.home-nav-bloc--impair .home-nav-bloc-intro strong,
.home-nav-bloc--impair .home-nav-bloc-intro b {
    color: var(--rose-frab);
    font-weight: 700;
}

/* ── Paire (fond vert pleine largeur) ────────────────────────── */
.home-nav-bloc--pair { background: var(--vert-frab); }
.home-nav-bloc--pair .home-nav-bloc-title { color: #fff; }
.home-nav-bloc--pair .home-nav-bloc-intro { color: #fff; }
.home-nav-bloc--pair .home-nav-bloc-intro strong,
.home-nav-bloc--pair .home-nav-bloc-intro b {
    color: var(--jaune);
    font-weight: 700;
}

.home-nav-block {
    position: relative;
    min-height: 100px;
    margin: 0 30px;
    max-width: max-content;
}

/* ── Desktop (≥768px) uniquement : refonte visuelle ───────────── */
@media (min-width: 768px) {
    .home-nav-bloc { padding: 30px 16px 50px; background: none; }

    /* Scopé à .home-nav-bloc (blocs_nav) pour ne pas affecter le bouton
       "voir toutes les actualités" de home-bloc-actus.php, qui réutilise
       la même classe .home-nav-bloc-inner sans ce parent. */
    .home-nav-bloc .home-nav-bloc-inner {
        max-width: 1050px;
        margin: 0 auto;
        text-align: left;
        border-radius: 20px;
    }

    .home-nav-bloc-header { flex: none; width: 100%; }

    .home-nav-bloc-title {
        font-size: 36px;
        text-align: left;
        padding: 20px 200px;
        padding-top: 50px;
    }

    .home-nav-bloc-intro {
        font-size: 15px;
        padding: 20px 200px 50px;
    }

    /* Paire : carte fond vert, tout centré, badge superposé sur le bas */
    .home-nav-bloc--pair .home-nav-bloc-inner {
        align-items: center;
        text-align: center;
        background: var(--vert-frab);
    }

    .home-nav-bloc--pair .home-nav-bloc-title,
    .home-nav-bloc--pair .home-nav-bloc-intro { text-align: center; }

    .home-nav-bloc .home-nav-block { margin: 0; }

    /* Bouton un peu plus bas, pour dépasser légèrement le bas de la section */
    .home-nav-bloc--pair .home-nav-block {
        position: absolute;
        left: 50%;
        bottom: -16px;
        transform: translate(-50%, 50%);
        z-index: 3;
    }

    /* Impaire : badge centré sur un trait jaune, personnage (perso2.svg,
       retourné) en ::after à droite */
    .home-nav-bloc--impair .home-nav-bloc-footer {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        margin-top: 16px;
        justify-content: center;
    }

    .home-nav-bloc--impair .home-nav-bloc-footer::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--jaune);
        transform: translateY(-50%);
        z-index: 0;
    }

    .home-nav-bloc--impair .home-nav-bloc-footer::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -120px;
        width: 200px;
        height: 200px;
        background: url('../images/icons/perso2.svg') no-repeat center / contain;
        transform: translateY(-50%) scaleX(-1);
        z-index: 1;
        pointer-events: none;
        rotate: 20deg;
    }

    .home-nav-bloc--impair .home-nav-block {
        z-index: 1;
    }
}

.home-nav-block-box {
    flex: 1;
    border: 2px dashed var(--rose-frab);
    border-radius: 10px;
    background: rgb(255, 255, 255);
    box-shadow: 0 0 15px rgba(0,0,0,0.25);
    padding: 14px 14px 14px 70px;
    min-height: 79px;
}

.home-nav-block-icon {
    position: absolute;
    left: -4px;
    z-index: 1;
}

.home-nav-block-icon--question {
    font-family: var(--font-title);
    font-size: 100px;
    color: var(--jaune);
    line-height: 1;
    margin-top: -4px;
    text-shadow: 2px 2px 0 rgba(210,0,122,0.15);
}

.home-nav-block-icon img {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    position: absolute;
    left: -40px;
}

.home-nav-block-text {
    font-family: var(--font-title);
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
}

.home-nav-block-text span { display: block; }
.home-nav-block-text .t-green { color: var(--vert-frab); }
.home-nav-block-text .t-pink  { color: var(--rose-frab); }


/* ══════════════════════════════════════════════════════════════
   SECTION 4 — BIOSEPTIQUES PROMO
   ══════════════════════════════════════════════════════════════ */
.home-bioseptiques-cover-wrap {
    position: relative;
    top: 50px;
    margin: 0 auto -1px;
}

.home-bioseptiques-cover {
    width: 200px;
    height: 142px;
    object-fit: cover;
    border: 4px solid var(--vert-frab);
    border-radius: 10px 10px 0 0;
    position: relative;
    z-index: 1;
}

.home-bioseptiques-bg {
    background: var(--vert-frab);
    padding: 50px 20px 28px;
}

.home-bioseptiques-text {
    font-family: var(--font-title);
    font-size: 22px;
    color: #fff;
    margin: 8px 0 16px;
    line-height: 1.2;
    padding: 0 20px;
}

.home-bioseptiques-btn {
    background: var(--rose-frab);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.home-bioseptiques-btn:hover { opacity: 0.9; }

/* ══════════════════════════════════════════════════════════════
   SECTION ACTUS — Carousel articles (Slick Slider)
   ══════════════════════════════════════════════════════════════ */

/* Base (mobile-first, comme à l'origine) : fond plein, titre/filtres
   en pill débordant à gauche. La refonte (centré, pill qui déborde en
   haut, personnage décoratif, badge qui déborde en bas) n'arrive qu'à
   partir de 768px, voir le @media plus bas. */
.home-actus-section {
    background: var(--vert);
    padding: 28px 0 40px;
    overflow: hidden;
}

/* Titre (pill blanc sur fond rose, débordant légèrement à gauche) */
.home-actus-heading-wrap, .home-actus-filters {
    position: relative;
    left: -16px;
}

.home-actus-filters {
    position: relative;
    left: -5px;
}

.home-actus-heading {
    display: inline-block;
    color: var(--rose-frab);
    border-radius: 40px;
    padding: 8px 28px 8px 44px;
    font-family: var(--font-title);
    font-size: 32px;
    background: #fff;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    font-weight: 400;
}

@media (min-width: 768px) {
    .home-actus-heading { font-size: 38px; }
}

/* Filtres catégories */
.home-actus-filters {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 40px;
    padding: 6px 20px 6px 50px;
}

.home-actus-filter {
    border: none;
    background: transparent;
    padding: 0;
    font-family: var(--font-title);
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s;
}

.home-actus-filter::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}

.home-actus-filter:hover { opacity: 0.75; }

.home-actus-filter.is-active::before {
    box-shadow: 0 0 0 2px currentColor;
}

.home-actus-filter--rose::before  { background: var(--rose-frab); }

.home-actus-filter--vert::before  { background: var(--vert-frab); }

.home-actus-filter--jaune  { color: #333; }
.home-actus-filter--jaune::before { background: var(--jaune); }

@media (max-width: 576px) {
    .home-actus-heading-wrap, .home-actus-filters { left: -30px; }

    .home-actus-heading, .home-actus-filters  {
        border-radius: 0 40px 40px 0;
    }
}

/* ── Desktop (≥768px) uniquement : refonte visuelle (centré, pill qui
   déborde en haut, personnage décoratif, image inset, badge qui
   déborde en bas) ── */
@media (min-width: 768px) {
    .home-actus-section {
        position: relative;
        overflow: visible;
        padding: 28px 0 80px;
    }

    /* Personnage décoratif en bas à gauche, positionné par rapport au
       contenu centré (.home-actus-inner) plutôt qu'à la pleine largeur
       de la section (.home-actus-section, en container-fluid). */
    .home-actus-inner {
        position: relative;
        max-width: 1050px;
        text-align: center;
    }

    .home-actus-heading-wrap, .home-actus-filters {
        left: 0;
    }

    .home-actus-heading-wrap {
        margin-top: -60px;
    }

    /* Page actus (home.php) : pas de décoration à chevaucher, on garde le pill en place */
    .home-actus-heading-wrap--page {
        margin-top: 0;
    }

    .home-actus-slide {
        margin: 0 16px;
    }

    .home-actus-card-img {
        padding: 0 10px;
        box-sizing: border-box;
    }

    .home-actus-img,
    .home-actus-img-placeholder {
        border-radius: 8px;
    }

    /* Bouton "voir toutes les actualités" : sans padding, déborde un peu
       sous la section (scopé à .home-actus-inner pour ne pas toucher
       .home-nav-bloc-inner / .home-nav-block dans home-bloc-nav.php). */
    .home-actus-inner .home-nav-bloc-inner {
        padding: 0;
    }

    .home-actus-inner .home-nav-block {
        position: absolute;
        left: 50%;
        bottom: -120px;
        margin: 0;
        transform: translateX(-50%);
        z-index: 3;
    }
}

.home-actus-grid,
.home-actus-slider-wrap{
    padding-top: 40px;
}

/* Wrapper slider + flèches */
.home-actus-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}



.home-actus-slider {
    flex: 1;
    min-width: 0;
    margin: 20px;
}

/* Boutons de navigation */
.home-actus-nav {
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    width: 38px;
    height: 38px;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.home-actus-nav:hover { opacity: 0.8; }

.home-actus-nav img { width: 10px; height: auto; }

@media (max-width: 767px) {
    .home-actus-slider-wrap {
        position: relative;
        gap: 0;
    }

    .home-actus-slider {
        margin: 0 19px;
    }

    .home-actus-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .home-actus-prev { left: 0; }
    .home-actus-next { right: 0; }
}

/* Slides */
.home-actus-slide {
    margin: 0 10px;
    height: 100%;
    box-sizing: border-box;
}

/* Anti-FOUC : Slick s'initialise en pied de page (perf), donc avant son
   exécution on ne montre que la 1ère carte pour éviter l'empilement visible
   de toutes les cartes le temps que le JS arrive. */
.home-actus-slider .home-actus-slide:not(:first-child) {
    display: none;
}
.home-actus-slider.slick-initialized .home-actus-slide {
    display: flex;
}

/* Carte article */
.home-actus-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    height: 100%;
    transition: box-shadow 0.2s;
}

.home-actus-card:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}

/* En-tête blanc avec titre coloré */
.home-actus-card-header {
    padding: 14px 12px;
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    background: #fff;
    height: 90px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}

.home-actus-card-header span {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-actus-card-header--rose  { color: var(--rose-frab); }
.home-actus-card-header--jaune { color: #333; }
.home-actus-card-header--vert  { color: var(--vert-frab); }

/* Image — aspect-ratio fixe : sans ça, chaque image prend la hauteur
   de son propre ratio naturel au lieu d'une hauteur commune pour la
   largeur actuelle de la carte. */
.home-actus-card-img {
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
}

.home-actus-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-actus-img-placeholder {
    width: 100%;
    height: 100%;
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-actus-img-placeholder .placeholder-icon {
    display: block;
    width: 65%;
    height: 65%;
    background-color: #4d4d4d;
    -webkit-mask-image: url('../images/icons/plante.svg');
    mask-image: url('../images/icons/plante.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: .5;
}

/* Corps : date + extrait */
.home-actus-card-body {
    padding: 12px;
    flex: 1;
}

.home-actus-card-date {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    color: var(--vert-frab);
    margin: 0 0 6px;
}

.home-actus-card-excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    text-align: left;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

/* Bouton nav affiché sous le carousel dans la section actus */
.home-actus-nav-block {
    margin-top: 28px;
}

/* Pagination page blog */
.home-actus-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 24px 0 8px;
}

.home-actus-pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1.5px solid var(--rose-frab);
    background: #fff;
    color: #333;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s;
}

.home-actus-pag-btn--active {
    background: var(--rose-frab);
    border-color: var(--rose-frab);
    color: #fff;
    cursor: default;
}

.home-actus-pag-btn:not(.home-actus-pag-btn--active):hover {
    color: var(--rose-frab);
    text-decoration: none;
}

/* Correctifs Slick pour hauteurs égales */
.home-actus-slider .slick-track {
    display: flex !important;
    align-items: stretch;
}
.home-actus-slider .slick-slide {
    height: auto !important;
    display: flex !important;
}
.home-actus-slider .slick-slide > div {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.home-actus-slider .home-actus-slide {
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.home-actus-slider .home-actus-card {
    flex: 1;
}

.home-actus-filters {
    display:none;
}

/* ══════════════════════════════════════════════════════════════
   VISUELS DÉCORATIFS — Sections avec images (panier, mouton)
   ══════════════════════════════════════════════════════════════ */

/* Bloc "Manger bio" : panier à gauche */
section[data-dev="manger-bio"] > div, 
section[data-dev="actus"] > div {
    position: relative;
    overflow: visible;
}

section[data-dev="manger-bio"] > div::after , 
section[data-dev="actus"] > div::after 
{
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
    
}

section[data-dev="manger-bio"] > div::after{
    background-image: url('../images/images_sections/panier.png');
    width: 250px;
    height: 250px;
    left: -100px;
    bottom: -120px;
}
section[data-dev="actus"] > div::after{
    background-image: url('../images/images_sections/mouton.png');
    width: 250px;
    height: 250px;
    right: -135px;
    bottom: -180px;
}


@media (max-width: 768px) {
    section[data-dev="manger-bio"] > div::after,
    section[data-dev="actus"] > div::after{
        content: unset;
    }
}