/* DS Content Blocks - rendu front de la page d'accueil. */
.dshb {
    --dshb-gold: #ba933e;
    --dshb-ink: #1a1a1a;
    --dshb-text: #444;
    --dshb-bg-soft: #f6f4ef;
    --dshb-border: #e7e2d7;
    --dshb-radius: 8px;
    --dshb-gap: 40px;
    /* Largeur du container, pilotée en responsive : 1400px sur les très grands écrans
       (« si on peut »), resserrée à 1200px dès qu'on manque de marge (cf. media query plus
       bas). Une seule variable → s'applique à tous les blocs (.dshb > * et .dshb-hero-inner) ;
       le slider la neutralise (max-width:none) pour rester en pleine largeur. */
    --dshb-maxw: 1400px;
    /* Colonne flex + gap : un espace strictement identique entre TOUS les blocs, quel que
       soit leur type. Robuste à la fusion de marges (certains blocs créent un BFC via
       overflow:hidden, d'autres non → un système de marges donnerait des écarts inégaux). */
    display: flex;
    flex-direction: column;
    gap: var(--dshb-gap);
    /* Évite que le dernier bloc soit collé au footer. */
    margin-bottom: var(--dshb-gap);
}

/* Chaque bloc : centré et borné en largeur (les blocs pleine largeur lèvent ces bornes). */
.dshb > * {
    width: 100%;
    max-width: var(--dshb-maxw);
    margin-inline: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* En dessous des très grands écrans, le container 1400px laisserait des marges latérales
   trop faibles : on revient à la largeur générale de 1200px (le slider n'est pas concerné,
   il reste en pleine largeur). */
@media (max-width: 1499px) {
    .dshb {
        --dshb-maxw: 1200px;
    }
}

/* Titres de section */
.dshb-section-title {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--dshb-ink);
    margin: 0 0 24px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.dshb-section-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 12px auto 0;
    background: var(--dshb-gold);
}

/* Bloc « Titre de section » : titre gras (casse normale, sans barre) + sous-titre gris,
   calqué sur le rendu Elementor (heading + texte) du site. */
.dshb-heading {
    text-align: center;
}

.dshb-heading-title {
    margin: 0;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: var(--dshb-ink);
    line-height: 1.2;
    letter-spacing: -.01em;
}

.dshb-heading-subtitle {
    margin: 8px 0 0;
    font-size: 1rem;
    font-weight: 400;
    color: #666;
    line-height: 1.4;
}

/* Texte libre */
.dshb-richtext {
    color: var(--dshb-text);
    line-height: 1.7;
}

.dshb-richtext a {
    color: var(--dshb-gold);
}

/* -------------------------------------------------------------------------- */
/* Bannière / Promo                                                           */
/* -------------------------------------------------------------------------- */
.dshb-banner {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--dshb-bg-soft);
    border-radius: var(--dshb-radius);
    overflow: hidden;
}

.dshb-banner--right {
    flex-direction: row-reverse;
}

.dshb-banner--center {
    flex-direction: column;
    text-align: center;
}

.dshb-banner-media {
    flex: 1 1 50%;
    min-width: 0;
}

.dshb-banner-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dshb-banner-body {
    flex: 1 1 50%;
    padding: 32px;
}

.dshb-banner--center .dshb-banner-body {
    flex: 1 1 auto;
}

.dshb-banner-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dshb-ink);
    margin: 0 0 8px;
    text-transform: uppercase;
}

.dshb-banner-subtitle {
    font-size: 1.1rem;
    color: var(--dshb-gold);
    font-weight: 600;
    margin: 0 0 12px;
}

.dshb-banner-text {
    color: var(--dshb-text);
    line-height: 1.6;
    margin-bottom: 16px;
}

.dshb-banner-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--dshb-ink);
    margin: 0 0 16px;
}

.dshb-banner-cta {
    display: inline-block;
    background: var(--dshb-ink);
    color: #fff;
    padding: 12px 28px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background .2s ease;
}

.dshb-banner-cta:hover {
    background: var(--dshb-gold);
    color: #fff;
}

/* Variante pleine largeur : l'image sert de fond, le texte se superpose */
.dshb-banner--full {
    position: relative;
    display: block;
    color: #fff;
    min-height: 320px;
}

.dshb-banner--full .dshb-banner-media,
.dshb-banner--full .dshb-banner-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dshb-banner--full .dshb-banner-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 320px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}

.dshb-banner--full .dshb-banner-title,
.dshb-banner--full .dshb-banner-price {
    color: #fff;
}

/* -------------------------------------------------------------------------- */
/* Bannière « hero » : image de fond parallaxe + push (logo/titre + texte + CTA) */
/* -------------------------------------------------------------------------- */
.dshb-hero {
    /* Pleine largeur : on lève les bornes de .dshb > *. */
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 520px;
    background-color: var(--dshb-ink);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.dshb-hero--h-small { min-height: 380px; }
.dshb-hero--h-medium { min-height: 520px; }
.dshb-hero--h-large { min-height: 680px; }

/* Effet de défilement : l'image reste fixée au viewport → on découvre une autre
   partie de l'image au scroll (parallaxe), comme l'ancien bloc Elementor. */
.dshb-hero--parallax {
    background-attachment: fixed;
}

/* Voile sombre (lisibilité du texte par-dessus l'image). */
.dshb-hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
    transition: background .3s ease;
}

.dshb-hero--ov-always .dshb-hero-scrim {
    background: rgba(0, 0, 0, .38);
}

/* Conteneur centré + borné : reprend la largeur max des autres blocs. */
.dshb-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--dshb-maxw);
    margin-inline: auto;
    padding: 48px 30px;
    display: flex;
}

.dshb-hero--left .dshb-hero-inner { justify-content: flex-start; }
.dshb-hero--right .dshb-hero-inner { justify-content: flex-end; }

.dshb-hero-content {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.dshb-hero-logo {
    display: block;
    max-width: 260px;
    max-height: 90px;
    width: auto;
    height: auto;
    margin: 0 0 22px;
}

.dshb-hero-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: .01em;
}

.dshb-hero-text {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 26px;
}

.dshb-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    text-decoration: none;
    border-radius: 2px;
    transition: filter .2s ease, transform .2s ease;
}

.dshb-hero-cta:hover {
    filter: brightness(.94);
    transform: translateY(-1px);
}

.dshb-hero-cta-ico {
    color: var(--dshb-gold);
    font-size: 1.2em;
    line-height: 1;
}

/* Apparition au scroll du contenu (le fond, lui, joue l'effet parallaxe). */
.dshb-hero.is-armed .dshb-hero-content {
    opacity: 0;
    transform: scale(.96);
}

.dshb-hero.is-revealed .dshb-hero-content {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s ease;
}

@media (prefers-reduced-motion: reduce) {
    .dshb-hero--parallax { background-attachment: scroll; }

    .dshb-hero.is-armed .dshb-hero-content,
    .dshb-hero.is-revealed .dshb-hero-content {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Mobile : image non fixée (background-attachment: fixed cassé sur iOS), contenu
   centré et voile pour garantir la lisibilité par-dessus l'image. */
@media (max-width: 767px) {
    .dshb-hero {
        background-attachment: scroll;
        min-height: 420px;
    }

    .dshb-hero--h-small { min-height: 320px; }
    .dshb-hero--h-medium { min-height: 420px; }
    .dshb-hero--h-large { min-height: 500px; }

    .dshb-hero-inner {
        justify-content: center;
        padding: 40px 22px;
    }

    .dshb-hero-content {
        max-width: 480px;
        align-items: center;
        text-align: center;
    }

    .dshb-hero-logo {
        margin-inline: auto;
    }

    .dshb-hero--ov-mobile .dshb-hero-scrim {
        background: rgba(0, 0, 0, .45);
    }
}

/* -------------------------------------------------------------------------- */
/* Grille de tuiles (catégories, styles de conduite…)                         */
/* -------------------------------------------------------------------------- */
.dshb-tiles {
    display: grid;
    grid-template-columns: repeat(var(--dshb-cols, 4), 1fr);
    gap: 20px;
}

.dshb-tile {
    display: block;
    position: relative;
    border-radius: var(--dshb-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--dshb-ink);
    background: var(--dshb-bg-soft);
}

.dshb-tile-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.dshb-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.dshb-tile:hover .dshb-tile-media img {
    transform: scale(1.06);
}

.dshb-tile-label {
    display: block;
    padding: 12px 8px;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .95rem;
}

/* -------------------------------------------------------------------------- */
/* Bloc dynamique (module / hook)                                             */
/* -------------------------------------------------------------------------- */
.dshb-module,
.dshb-hook {
    /* Le rendu interne provient du(des) module(s) branché(s) ; on neutralise juste les marges. */
}

/* Le slider doit pouvoir s'étendre sur toute la largeur de la page */
.dshb-module--ps_imageslider,
.dshb-module--leoslideshow,
.dshb-slider {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* -------------------------------------------------------------------------- */
/* Push : mosaïque catégories (grande image + tuiles)                         */
/* -------------------------------------------------------------------------- */
.dshb-push {
    display: grid;
    gap: 16px;
    /* Évite tout débordement horizontal pendant le glissement latéral d'apparition. */
    overflow: hidden;
    /* Lignes de hauteur explicite et égale : la grande image (2 lignes) reste toujours
       alignée avec les 2 tuiles empilées adjacentes → le bloc forme un rectangle net
       (flush), sans décalage en haut ni en bas, quelle que soit la largeur.
       Hauteur calée sur un format paysage proche des visuels catégories ; réglable. */
    --dshb-push-row: clamp(170px, 17vw, 250px);
    /* Fond « gris » qui comble l'espace autour de l'image entière (object-fit: contain). */
    --dshb-push-mat: #ececec;
    grid-auto-rows: var(--dshb-push-row);
}

.dshb-push--a {
    grid-template-columns: repeat(4, 1fr);
}

.dshb-push--b {
    grid-template-columns: repeat(3, 1fr);
}

.dshb-push--a.dshb-push--img-left {
    grid-template-areas:
        "feat feat i1 i3"
        "feat feat i2 i3"
        "i4 i5 i6 i7";
}

.dshb-push--a.dshb-push--img-right {
    grid-template-areas:
        "i3 i1 feat feat"
        "i3 i2 feat feat"
        "i4 i5 i6 i7";
}

.dshb-push--b.dshb-push--img-left {
    grid-template-areas:
        "feat feat i1"
        "feat feat i2"
        "i3 i4 i5";
}

.dshb-push--b.dshb-push--img-right {
    grid-template-areas:
        "i1 feat feat"
        "i2 feat feat"
        "i3 i4 i5";
}

.dshb-push-feature {
    grid-area: feat;
}

.dshb-push-i1 {
    grid-area: i1;
}

.dshb-push-i2 {
    grid-area: i2;
}

.dshb-push-i3 {
    grid-area: i3;
}

.dshb-push-i4 {
    grid-area: i4;
}

.dshb-push-i5 {
    grid-area: i5;
}

.dshb-push-i6 {
    grid-area: i6;
}

.dshb-push-i7 {
    grid-area: i7;
}

.dshb-push-cell {
    position: relative;
    min-height: 0;
}

.dshb-push-tile {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #f4f3f1;
    border-radius: 4px;
    text-decoration: none;
    color: var(--dshb-ink);
}

/* Image entière : on voit toute la photo (object-fit: contain), centrée et
   verticalement, l'espace restant étant comblé par un fond gris. La case garde sa
   hauteur fixe → le bloc reste parfaitement aligné. */
.dshb-push-media {
    position: absolute;
    inset: 0;
    background: var(--dshb-push-mat, #ececec);
}

.dshb-push-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform .4s ease;
}

.dshb-push-tile:hover .dshb-push-img {
    transform: scale(1.04);
}

/* Légende ancrée : un conteneur plein cadre place le texte selon les classes
   verticales (dshb-pv--*) et horizontales (dshb-ph--*), choisies dans le BO. */
.dshb-push-capwrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    pointer-events: none;
}

/* Vertical (axe principal de la colonne) */
.dshb-pv--top {
    justify-content: flex-start;
}

.dshb-pv--center {
    justify-content: center;
}

.dshb-pv--bottom {
    justify-content: flex-end;
}

/* Horizontal (axe transversal) + alignement du texte */
.dshb-ph--left {
    align-items: flex-start;
    text-align: left;
}

.dshb-ph--center {
    align-items: center;
    text-align: center;
}

.dshb-ph--right {
    align-items: flex-end;
    text-align: right;
}

.dshb-push-cap {
    max-width: 90%;
}

/* Seuls les liens du texte restent cliquables ; le reste laisse passer vers l'image. */
.dshb-push-cap a {
    pointer-events: auto;
}

/* Le lien de l'image remplit toute la case (comme la <figure> Elementor). */
.dshb-push-media a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Texte calqué sur l'ancien bloc Elementor « image-box » (titre h3 700/16px +
   description « Découvrir »). La couleur vient de l'inline `color` de la légende. */
.dshb-push-cap .elementor-image-box-content {
    margin: 0;
    width: auto;
}

.dshb-push-cap .elementor-image-box-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
    transition: color .2s ease;
}

.dshb-push-cap .elementor-image-box-title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

/* Survol de la tuile : couleur du titre uniquement (la description « Découvrir » ne
   change pas). --dshb-title-hover est posé en inline par tuile depuis le BO ; sans
   valeur, le titre garde sa couleur normale (inherit). */
.dshb-push-tile:hover .elementor-image-box-title,
.dshb-push-tile:hover .elementor-image-box-title a {
    color: var(--dshb-title-hover, inherit);
}

.dshb-push-feature .dshb-push-cap .elementor-image-box-title {
    font-size: 20px;
}

.dshb-push-cap .elementor-image-box-description {
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.3;
    color: inherit;
    opacity: .92;
}

/* Apparition au scroll : les tuiles glissent en alternance depuis la gauche et la
   droite (avec fondu), en cascade. `is-armed` est posé par le JS uniquement si
   l'animation est possible → repli : tuiles visibles sans JS. */
@keyframes dshb-fx-in-left {
    from {
        opacity: 0;
        transform: translateX(-55px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes dshb-fx-in-right {
    from {
        opacity: 0;
        transform: translateX(55px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dshb-push.is-armed .dshb-push-cell {
    opacity: 0;
}

/* Impairs (dont la grande image) depuis la gauche, pairs depuis la droite. */
.dshb-push.is-revealed .dshb-push-cell {
    animation: dshb-fx-in-left .85s cubic-bezier(.16, .8, .3, 1) both;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(even) {
    animation-name: dshb-fx-in-right;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(1) {
    animation-delay: .1s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(2) {
    animation-delay: .22s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(3) {
    animation-delay: .34s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(4) {
    animation-delay: .46s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(5) {
    animation-delay: .58s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(6) {
    animation-delay: .7s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(7) {
    animation-delay: .82s;
}

.dshb-push.is-revealed .dshb-push-cell:nth-child(8) {
    animation-delay: .94s;
}

/* Respect de la préférence « animations réduites » : tuiles visibles, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .dshb-push.is-armed .dshb-push-cell,
    .dshb-push.is-revealed .dshb-push-cell {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Promo : push 2 (double) ou 3 (triple) images, texte placé librement         */
/* -------------------------------------------------------------------------- */
.dshb-promo {
    display: grid;
    /* Même espacement que la mosaïque « push ». */
    gap: 16px;
    /* Évite tout débordement pendant le glissement latéral d'apparition. */
    overflow: hidden;
    /* Couleur par défaut du cadre animé factorisé (.dshb-frame). */
    --dshb-frame: #ffffff;
}

.dshb-promo--2 {
    grid-template-columns: repeat(2, 1fr);
}

.dshb-promo--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Ratio paysage par défaut (ajustable). Triple un peu plus haut car plus étroit. */
.dshb-promo--2 .dshb-promo-card {
    aspect-ratio: 16 / 9;
}

.dshb-promo--3 .dshb-promo-card {
    aspect-ratio: 4 / 5;
}

.dshb-promo-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.dshb-promo-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image plein cadre : elle remplit toute la carte (rognée au besoin), aucun fond visible. */
.dshb-promo-media {
    position: absolute;
    inset: 0;
}

.dshb-promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .4s ease;
}

.dshb-promo-card:hover .dshb-promo-img {
    transform: scale(1.04);
}

/* Cadre animé au survol — composant factorisé (blocs « promo » et « catégories »).
   Au survol de l'hôte (.dshb-frame-host), les bords horizontaux se tracent, puis les
   verticaux. Couleur réglée dans le BO via --dshb-frame. */
.dshb-frame {
    position: absolute;
    inset: 14px;
    z-index: 1;
    pointer-events: none;
}

.dshb-frame::before,
.dshb-frame::after {
    content: "";
    position: absolute;
    inset: 0;
}

.dshb-frame::before {
    border-top: 1px solid var(--dshb-frame, #fff);
    border-bottom: 1px solid var(--dshb-frame, #fff);
    transform: scaleX(0);
    transition: transform .4s ease;
}

.dshb-frame::after {
    border-left: 1px solid var(--dshb-frame, #fff);
    border-right: 1px solid var(--dshb-frame, #fff);
    transform: scaleY(0);
    transition: transform .45s ease .15s;
}

.dshb-frame-host:hover .dshb-frame::before {
    transform: scaleX(1);
}

.dshb-frame-host:hover .dshb-frame::after {
    transform: scaleY(1);
}

@media (prefers-reduced-motion: reduce) {
    .dshb-frame::before,
    .dshb-frame::after {
        transition: none;
    }
}

/* Description : style propre au promo (le sur-titre/titre/bouton réutilisent les
   classes du slider .dshb-slide-eyebrow / -title / -cta). */
.dshb-promo-desc {
    font-size: clamp(.82rem, 1.1vw, .95rem);
    font-weight: 400;
    line-height: 1.4;
}

/* Apparition au scroll : réutilise les keyframes de la mosaïque (gauche/droite en
   cascade). `is-armed` posé par le JS uniquement si l'animation est possible. */
.dshb-promo.is-armed .dshb-promo-card {
    opacity: 0;
}

.dshb-promo.is-revealed .dshb-promo-card {
    animation: dshb-fx-in-left .85s cubic-bezier(.16, .8, .3, 1) both;
}

.dshb-promo.is-revealed .dshb-promo-card:nth-child(even) {
    animation-name: dshb-fx-in-right;
}

.dshb-promo.is-revealed .dshb-promo-card:nth-child(1) {
    animation-delay: .1s;
}

.dshb-promo.is-revealed .dshb-promo-card:nth-child(2) {
    animation-delay: .22s;
}

.dshb-promo.is-revealed .dshb-promo-card:nth-child(3) {
    animation-delay: .34s;
}

/* Mobile : empilement en une colonne, espacement réduit, cartes plus hautes. */
@media (max-width: 767px) {
    .dshb-promo--2,
    .dshb-promo--3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dshb-promo--2 .dshb-promo-card,
    .dshb-promo--3 .dshb-promo-card {
        aspect-ratio: 3 / 2;
    }
}

/* Respect de la préférence « animations réduites » : cartes visibles, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .dshb-promo.is-armed .dshb-promo-card,
    .dshb-promo.is-revealed .dshb-promo-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Catégories : 6 cartes cover + icône + texte (blanc), ligne animée au survol  */
/* -------------------------------------------------------------------------- */
.dshb-cats {
    display: grid;
    /* 6 colonnes (1×6) → 3 (2×3) → 2 (3×2) → 1 (6×1), gérés plus bas par paliers. */
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    --dshb-frame: #ffffff;
}

.dshb-cat {
    position: relative;
    display: block;
    aspect-ratio: 3 / 5;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    background: var(--dshb-ink);
}

.dshb-cat-media {
    position: absolute;
    inset: 0;
}

.dshb-cat-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease;
}

.dshb-cat:hover .dshb-cat-bg {
    transform: scale(1.06);
}

/* Voile dégradé : assure la lisibilité du texte blanc (renforcé vers le bas). */
.dshb-cat-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .55) 100%);
}

/* Icône centrée : grandit au survol de la carte. */
.dshb-cat-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    pointer-events: none;
}

.dshb-cat-icon {
    display: block;
    transition: transform .45s cubic-bezier(.16, .8, .3, 1);
}

.dshb-cat-icon img {
    display: block;
    width: clamp(150px, 82%, 250px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .4));
}

.dshb-cat:hover .dshb-cat-icon {
    transform: scale(1.12);
}

/* Pied : la ligne (qui se dessine) + le texte blanc qui disparaît au survol. */
.dshb-cat-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    pointer-events: none;
}

.dshb-cat-label {
    color: #fff;
    font-weight: 700;
    font-size: clamp(.9rem, 1.05vw, 1.15rem);
    line-height: 1.2;
    letter-spacing: .03em;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
    /* Sécurité responsive : jamais de débordement ni de césure brutale du libellé. */
    max-width: 100%;
    overflow-wrap: break-word;
    transition: opacity .35s ease, transform .35s ease;
}

.dshb-cat:hover .dshb-cat-label {
    opacity: 0;
    transform: translateY(10px);
}

/* Cadre animé au survol : composant factorisé .dshb-frame (cf. bloc « promo »). */

/* Paliers responsive : 6 → 3 → 2 → 1 colonnes. */
@media (max-width: 1199px) {
    .dshb-cats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .dshb-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479px) {
    .dshb-cats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* En une colonne, on aplatit la carte pour éviter un visuel plein écran trop haut. */
    .dshb-cat {
        aspect-ratio: 16 / 10;
    }
}

/* Écrans tactiles : pas de survol → on garde le texte visible et le cadre masqué. */
@media (hover: none) {
    .dshb-cat:hover .dshb-cat-label {
        opacity: 1;
        transform: none;
    }

    .dshb-cat:hover .dshb-cat-icon,
    .dshb-cat:hover .dshb-cat-bg {
        transform: none;
    }
}

/* Respect de la préférence « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
    .dshb-cat-bg,
    .dshb-cat-icon,
    .dshb-cat-label {
        transition: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Réassurance (icône + titre + description + bouton « En savoir + »)          */
/* Bande grise pleine largeur, colonnes séparées par des filets verticaux.    */
/* -------------------------------------------------------------------------- */
.dshb-reassurance {
    /* Pleine largeur : on lève les bornes de .dshb > * (le fond gris est à fond perdu). */
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    background: #f5f5f5;
}

/* Option BO : colle le bloc au précédent en annulant le gap flex de .dshb (utile pour
   poser la bande grise directement sous une bannière / un hero, sans espace). */
.dshb-reassurance--flush-top {
    margin-top: calc(-1 * var(--dshb-gap));
}

.dshb-reassurance-grid {
    --dshb-reass-sep: rgba(0, 0, 0, .12);
    display: grid;
    grid-template-columns: repeat(var(--dshb-reass-cols, 4), 1fr);
    max-width: var(--dshb-maxw);
    margin-inline: auto;
    padding-block: 56px;
    /* Rogne le filet de la première colonne (cf. box-shadow ci-dessous) → des séparateurs
       uniquement ENTRE les colonnes, jamais sur les bords. Fonctionne quel que soit le
       nombre de colonnes ou de lignes. */
    overflow: hidden;
}

/* Carte en colonne flex : le bouton est poussé en bas (margin-top:auto) afin que tous
   les « En savoir + » restent alignés quelle que soit la hauteur des descriptions. */
.dshb-reass-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 40px;
    /* Filet vertical à gauche de chaque carte ; celui de la 1re colonne (bord gauche de la
       grille) est rogné par overflow:hidden. */
    box-shadow: -1px 0 0 var(--dshb-reass-sep);
}

.dshb-reass-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    margin-bottom: 16px;
}

.dshb-reass-icon img {
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.dshb-reass-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dshb-ink);
}

.dshb-reass-text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--dshb-text);
}

.dshb-reass-text a {
    color: var(--dshb-gold);
    text-decoration: underline;
}

/* Bouton calé en bas de carte → alignement des « En savoir + » sur toute la rangée. */
.dshb-reass-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    font-weight: 700;
    font-size: .9rem;
    color: var(--dshb-ink);
    text-decoration: none;
    transition: color .2s ease;
}

.dshb-reass-cta:hover {
    color: var(--dshb-gold);
}

.dshb-reass-cta-ico {
    font-size: 1.2em;
    line-height: 1;
    transition: transform .2s ease;
}

.dshb-reass-cta:hover .dshb-reass-cta-ico {
    transform: translateX(3px);
}

/* Responsive : on resserre les colonnes par paliers (la valeur BO sert de plafond). */
@media (max-width: 991px) {
    .dshb-reassurance-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }
}

@media (max-width: 575px) {
    .dshb-reassurance-grid {
        grid-template-columns: 1fr;
        padding-block: 36px;
    }

    /* Empilé : plus de filets verticaux, les cartes sont espacées verticalement. */
    .dshb-reass-card {
        box-shadow: none;
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dshb-reass-cta-ico {
        transition: none;
    }
}

/* -------------------------------------------------------------------------- */
/* Slider natif                                                               */
/* -------------------------------------------------------------------------- */
.dshb-slider {
    position: relative;
    overflow: hidden;
}

.dshb-slider-viewport {
    overflow: hidden;
}

.dshb-slider-track {
    display: flex;
    transition: transform .5s ease;
    will-change: transform;
}

.dshb-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    display: none;
}

.dshb-slide.is-active {
    display: block;
}

/* Avec JS : le carrousel passe en mode "track" horizontal */
.js-dshb-slider.is-ready .dshb-slide {
    display: block;
}

.js-dshb-slider.is-ready .dshb-slider-track {
    width: 100%;
}

.dshb-slide-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.dshb-slide-media {
    display: block;
}

.dshb-slide-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Voile : transparent sur desktop (le client n'en veut pas), forcé sur mobile. */
.dshb-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: transparent;
    pointer-events: none;
}

/* Légende : positionnée librement (left/top en %, posés en inline depuis le BO). */
.dshb-slide-caption {
    position: absolute;
    z-index: 2;
    max-width: 46%;
    display: flex;
    flex-direction: column;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}

.dshb-ta--left {
    align-items: flex-start;
    text-align: left;
}

.dshb-ta--center {
    align-items: center;
    text-align: center;
}

.dshb-ta--right {
    align-items: flex-end;
    text-align: right;
}

.dshb-slide-caption-inner {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 14px;
}

/* Effets d'apparition (joués quand la diapo devient active). */
@keyframes dshb-fx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dshb-fx-up {
    from { opacity: 0; transform: translateY(70px); }
    to { opacity: 1; transform: none; }
}

@keyframes dshb-fx-down {
    from { opacity: 0; transform: translateY(-70px); }
    to { opacity: 1; transform: none; }
}

@keyframes dshb-fx-left {
    from { opacity: 0; transform: translateX(-95px); }
    to { opacity: 1; transform: none; }
}

@keyframes dshb-fx-right {
    from { opacity: 0; transform: translateX(95px); }
    to { opacity: 1; transform: none; }
}

@keyframes dshb-fx-zoom {
    from { opacity: 0; transform: scale(.75); }
    to { opacity: 1; transform: none; }
}

@keyframes dshb-fx-blur {
    from { opacity: 0; filter: blur(16px); transform: scale(1.05); }
    to { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes dshb-fx-flip {
    from { opacity: 0; transform: perspective(900px) rotateX(-78deg); }
    to { opacity: 1; transform: perspective(900px) rotateX(0); }
}

@keyframes dshb-fx-rotate {
    from { opacity: 0; transform: rotate(-7deg) scale(.82); }
    to { opacity: 1; transform: none; }
}

.dshb-slide.is-active .dshb-fx--fade {
    animation: dshb-fx-fade 1s ease both .6s;
}

.dshb-slide.is-active .dshb-fx--up {
    animation: dshb-fx-up 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--down {
    animation: dshb-fx-down 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--left {
    animation: dshb-fx-left 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--right {
    animation: dshb-fx-right 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--zoom {
    animation: dshb-fx-zoom 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--blur {
    animation: dshb-fx-blur 1s ease both .6s;
}

.dshb-slide.is-active .dshb-fx--flip {
    transform-origin: top center;
    animation: dshb-fx-flip 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

.dshb-slide.is-active .dshb-fx--rotate {
    animation: dshb-fx-rotate 1s cubic-bezier(.16, .8, .3, 1) both .6s;
}

/* Cascade : chaque ligne (sur-titre, titre, bouton) apparaît l'une après l'autre. */
.dshb-slide.is-active .dshb-fx--stagger > * {
    animation: dshb-fx-up .8s cubic-bezier(.16, .8, .3, 1) both;
}

.dshb-slide.is-active .dshb-fx--stagger .dshb-slide-eyebrow {
    animation-delay: .55s;
}

.dshb-slide.is-active .dshb-fx--stagger .dshb-slide-title {
    animation-delay: .75s;
}

.dshb-slide.is-active .dshb-fx--stagger .dshb-slide-cta {
    animation-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {

    .dshb-slide.is-active .dshb-slide-caption-inner,
    .dshb-slide.is-active .dshb-slide-caption-inner * {
        animation: none !important;
    }
}

.dshb-slide-eyebrow {
    font-size: clamp(.72rem, 1vw, .82rem);
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.dshb-slide-title {
    font-size: clamp(1.4rem, 2.6vw, 2.3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.dshb-slide-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    background: var(--dshb-gold);
    color: #fff;
    padding: 11px 26px;
    border-radius: 3px;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    text-shadow: none;
    transition: background .2s ease, transform .2s ease;
}

.dshb-slide-cta::after {
    content: "›";
    margin-left: 10px;
    font-size: 1.1em;
    line-height: 0;
}

.dshb-slide-cta:hover {
    background: var(--dshb-ink);
    transform: translateY(-1px);
}

/* Flèches : bande verticale pleine hauteur, fond doré dégradé transparent. */
.dshb-slider-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: 64px;
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
    /* Cachées par défaut, apparaissent au survol du slider. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, background .25s ease;
}

.dshb-slider-prev {
    left: 0;
    background: linear-gradient(to right, rgba(186, 147, 62, .32), rgba(186, 147, 62, 0));
}

.dshb-slider-next {
    right: 0;
    background: linear-gradient(to left, rgba(186, 147, 62, .32), rgba(186, 147, 62, 0));
}

.dshb-slider:hover .dshb-slider-nav {
    opacity: 1;
    pointer-events: auto;
}

/* Au survol de la flèche : on n'accentue pas le fond, on anime juste l'icône. */
.dshb-slider-ico {
    display: inline-block;
    transition: transform .25s ease;
}

.dshb-slider-prev:hover .dshb-slider-ico {
    transform: translateX(-6px);
}

.dshb-slider-next:hover .dshb-slider-ico {
    transform: translateX(6px);
}

/* Écrans tactiles : pas de survol → flèches toujours visibles. */
@media (hover: none) {
    .dshb-slider-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Anneau de décompte (autoplay) — repris du style de l'ancien slider :
   anneau sombre épais en fond + arc clair fin qui se vide sur la durée d'affichage. */
.dshb-slider-timer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 44px;
    height: 44px;
    opacity: .5;
    pointer-events: none;
}

.dshb-slider-timer svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.dshb-slider-timer circle {
    fill: none;
}

.dshb-slider-timer-track {
    stroke: #000;
    stroke-width: 10;
}

.dshb-slider-timer-bar {
    stroke: #eee;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 94.25;
    stroke-dashoffset: 0;
    animation: dshb-timer var(--dshb-timer-dur, 5000ms) linear both;
}

@keyframes dshb-timer {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 94.25; }
}

/* Points de pagination fins (comme l'ancien slider). */
.dshb-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Inactif : petit point plein doré. */
.dshb-slider-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--dshb-gold);
    border-radius: 50%;
    background: var(--dshb-gold);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    transition: width .2s ease, height .2s ease, background .2s ease;
}

/* Actif : anneau creux (contour seul) plus gros. */
.dshb-slider-dot.is-active {
    width: 16px;
    height: 16px;
    background: transparent;
}

@media (max-width: 767px) {
    /* Mobile : texte forcé centré + voile sombre sur toute l'image (lisibilité). */
    .dshb-slide-overlay {
        background: rgba(0, 0, 0, .45);
    }

    .dshb-slide-caption {
        left: 50% !important;
        right: auto;
        top: auto !important;
        bottom: 9%;
        transform: translateX(-50%);
        width: 88%;
        max-width: 88%;
        align-items: center !important;
        text-align: center !important;
        color: #fff !important;
    }

    .dshb-slide-caption-inner {
        align-items: center;
        gap: 10px;
    }

    .dshb-slide-eyebrow {
        font-size: .85rem;
    }

    .dshb-slide-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .dshb-slide-cta {
        padding: 10px 20px;
        font-size: .82rem;
    }

    .dshb-slider-nav {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .dshb-tiles {
        grid-template-columns: repeat(min(var(--dshb-cols, 4), 3), 1fr);
    }

    /* Push : on abandonne la mosaïque, passage à une grille 2 colonnes,
       grande image en bannière pleine largeur. Les marges (gap) sont conservées. */
    .dshb-push--a,
    .dshb-push--b {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-areas: none !important;
        grid-auto-rows: clamp(130px, 30vw, 200px);
    }

    .dshb-push-cell {
        grid-area: auto !important;
    }

    .dshb-push-feature {
        grid-column: 1 / -1 !important;
        grid-row: span 2 !important;
    }

    /* En 2 colonnes (grande image seule puis tuiles 2 par 2), le nombre de tuiles
       est impair → on masque la dernière pour éviter une tuile seule en fin de ligne. */
    .dshb-push--a .dshb-push-i7,
    .dshb-push--b .dshb-push-i5 {
        display: none;
    }

    /* Vignettes réduites en tablette/mobile : on masque le texte (titre + « Découvrir »)
       et on ne garde que l'image. La grande image conserve son texte et son placement BO. */
    .dshb-push-cell:not(.dshb-push-feature) .dshb-push-capwrap {
        display: none;
    }
}

@media (max-width: 767px) {
    .dshb {
        --dshb-gap: 28px;
    }

    .dshb-banner,
    .dshb-banner--right {
        flex-direction: column;
        text-align: center;
    }

    .dshb-banner-body {
        padding: 24px;
    }

    .dshb-banner-title {
        font-size: 1.5rem;
    }

    .dshb-tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .dshb-section-title {
        font-size: 1.35rem;
    }

}

/* Très petit écran : push en une seule colonne, tuiles empilées. */
@media (max-width: 575px) {

    .dshb-push--a,
    .dshb-push--b {
        grid-template-columns: 1fr !important;
        grid-auto-rows: clamp(170px, 55vw, 250px);
        gap: 12px;
    }

    .dshb-push-feature {
        grid-row: span 1 !important;
    }

    /* En 1 colonne, plus de problème de parité → on réaffiche la dernière tuile. */
    .dshb-push--a .dshb-push-i7,
    .dshb-push--b .dshb-push-i5 {
        display: block;
    }
}

/* ==========================================================================
   Bloc « Marques » : carrousel de logos (slick) — logos seuls, niveaux de gris
   ========================================================================== */
.dshb-brands {
    border-top: 1px solid var(--dshb-border);
    border-bottom: 1px solid var(--dshb-border);
    padding: 26px 0;
}

/* Avant l'init slick (ou en repli) : logos alignés sur une ligne, sans empilement. */
.js-dshb-brands:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

.js-dshb-brands:not(.slick-initialized) .dshb-brand {
    flex: 0 0 calc(100% / var(--dshb-brands-show, 8));
    min-width: 0;
}

.dshb-brand {
    box-sizing: border-box;
}

.dshb-brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 95px;
    padding: 0 14px;
    text-decoration: none;
}

.dshb-brand-img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80px;
    margin: 0 auto;
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.dshb-brand-link:hover .dshb-brand-img {
    filter: grayscale(0);
    opacity: 1;
}

/* Apparition au scroll : logos en fondu + légère montée, en cascade.
   `is-armed` est posé par le JS uniquement si l'animation est jouable. */
@keyframes dshb-brand-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: .7;
        transform: none;
    }
}

.dshb-brands.is-armed .dshb-brand-img {
    opacity: 0;
}

.dshb-brands.is-revealed .dshb-brand-img {
    animation: dshb-brand-in .6s cubic-bezier(.16, .8, .3, 1) both;
}

.dshb-brands.is-revealed .dshb-brand:nth-child(1) .dshb-brand-img { animation-delay: .04s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(2) .dshb-brand-img { animation-delay: .1s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(3) .dshb-brand-img { animation-delay: .16s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(4) .dshb-brand-img { animation-delay: .22s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(5) .dshb-brand-img { animation-delay: .28s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(6) .dshb-brand-img { animation-delay: .34s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(7) .dshb-brand-img { animation-delay: .4s; }
.dshb-brands.is-revealed .dshb-brand:nth-child(n+8) .dshb-brand-img { animation-delay: .46s; }

/* Respect de la préférence « animations réduites » : logos visibles, sans animation. */
@media (prefers-reduced-motion: reduce) {
    .dshb-brands.is-armed .dshb-brand-img,
    .dshb-brands.is-revealed .dshb-brand-img {
        animation: none;
        opacity: .7;
        transform: none;
    }
}

/* ==========================================================================
   Bloc « Listing produits » : réutilise le rendu de liste figé du thème
   (catalog/_partials/miniatures/leo_col_products.tpl → product-frozen.tpl). La grille
   (colonnes 4→3→2→2→1) et le style des cartes viennent du thème (.product_list.plist-7).
   On ne fait qu'encadrer la section.
   ========================================================================== */
.dshb-products {
    width: 100%;
}

/* Titre/sous-titre optionnel d'un bloc « Listing produits » : le titre étant à l'intérieur de
   la section, le gap inter-blocs de .dshb ne joue pas. On reproduit donc l'écart qu'aurait un
   bloc « Titre de section » placé juste au-dessus, pour un rendu identique. */
.dshb-products .dshb-heading {
    margin-bottom: var(--dshb-gap);
}

/* ==========================================================================
   Bloc « module » leoblog (derniers articles, via hookDisplayHome → blog_list.tpl).
   leoblog injecte son propre titre « Lastest Blogs » et un lien « View all » non
   stylé. On neutralise le titre interne (le titre de section se gère via un bloc
   « Titre de section » dédié, comme partout ailleurs) et on skinne le « View all »
   en CTA cohérent avec le reste de la home.
   ========================================================================== */
.dshb-module--leoblog .blog-lastest-title {
    display: none;
}

.dshb-module--leoblog .blog-bottom {
    margin-top: 28px;
    text-align: center;
}

.dshb-module--leoblog .blog-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--dshb-gold);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    text-decoration: none;
    border-radius: 2px;
    transition: filter .2s ease, transform .2s ease;
}

.dshb-module--leoblog .blog-bottom a:hover {
    filter: brightness(.94);
    transform: translateY(-1px);
}

/* ==========================================================================
   Bloc « Flux Instagram » : mosaïque type Pinterest (colonnes CSS). Chaque image
   garde son ratio naturel ; hauteurs décalées comme sur le rendu d'origine, mais
   SANS slider (100% CSS, pas de JS). Nombre de colonnes piloté par --dshb-ig-cols.
   ========================================================================== */
.dshb-instagram {
    column-count: var(--dshb-ig-cols, 5);
    column-gap: 10px;
}

.dshb-ig-item {
    display: block;
    break-inside: avoid;
    margin: 0 0 10px;
    overflow: hidden;
    border-radius: 4px;
}

.dshb-ig-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .3s ease;
}

.dshb-ig-item:hover img {
    transform: scale(1.04);
}

@media (max-width: 1024px) {
    .dshb-instagram {
        column-count: 4;
    }
}

@media (max-width: 768px) {
    .dshb-instagram {
        column-count: 2;
    }
}

/* =========================================================================
   Exception PANIER (body#cart) : les zones dscontentblocks s'affichent en
   pleine largeur (au-dessus / en dessous de la grille panier), sans habillage
   "card". On resserre seulement le listing produits (gouttières, espacement
   des lignes, images plus contenues).
   ========================================================================= */
#cart .dshb {
    /* Pas de bordure ni de fond : rendu pleine largeur comme sur les autres pages. */
    margin: 20px 0;
}

/* Titre éventuel d'un bloc dans le panier : on conserve le style identique à la
   home (.dshb-heading-title de base), on ne gère ici que l'espacement du bloc. */
#cart .dshb-heading {
    margin-bottom: 15px;
}

/* Listing produits : gouttières horizontales + espacement vertical des lignes */
#cart .dshb-products .row.leo-product-ajax {
    margin-left: -8px;
    margin-right: -8px;
}

#cart .dshb-products .ajax_block_product {
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 24px;
}

/* Images plus contenues et centrées (au lieu de pleine largeur) */
#cart .dshb-products .thumbnail-container,
#cart .dshb-products .product-image {
    text-align: center;
}

#cart .dshb-products .product-image img.img-fluid {
    max-height: 150px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
}

/* Un peu d'air sous l'image (titre / prix / aperçu rapide) */
#cart .dshb-products .product-description,
#cart .dshb-products .product-title,
#cart .dshb-products .product-price-and-shipping {
    margin-top: 6px;
}

@media (max-width: 767px) {
    #cart .dshb-products .product-image img.img-fluid {
        max-height: 120px;
    }
}