/* =========================================================
   Mshop Gadget — Refonte page d'accueil (design Claude Design)
   Chargé UNIQUEMENT par boutique/indexclient.blade.php.
   Ne pas réutiliser sur d'autres pages : homestyle.css reste la
   feuille de style de panier.blade.php, carousel.css reste celle
   de product.blade.php — voir le plan de refonte pour le détail.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --hm-bg: #FCF8F4;
    --hm-dark: #1F1F1F;
    --hm-accent: #E8014F;
    --hm-accent-hover: #c70144;
    --hm-line: #EAEAEA;
    --hm-muted: #6b6b6b;
    --hm-font-heading: 'Sora', sans-serif;
    --hm-font-body: 'Public Sans', sans-serif;
    --hm-radius: 12px;
    --ok: #E7F7EC;
    --ok-soft:#0A7C2F;
}

/* ============ BASE ============ */
.hm-page {
    background: var(--hm-bg);
    color: var(--hm-dark);
    font-family: var(--hm-font-body);
}

.hm-page h1,
.hm-page h2,
.hm-page h3,
.hm-page h4 {
    font-family: var(--hm-font-heading);
    margin: 0;
}

/* Le conteneur centré/rembourré vit UNIQUEMENT sur .hm-wrap, jamais sur
   <section> directement : les deux étaient combinés à l'origine, ce qui
   doublait le padding partout (section + .hm-wrap imbriqués) et, pire,
   empêchait .hm-faq de reprendre une largeur plus étroite (le sélecteur
   "section" avait une spécificité plus forte que la classe seule). */
.hm-wrap {
    max-width: 95%;
    margin: 0 auto;
    padding: 0 20px;
}

.hm-page a {
    font-family: inherit;
}

/* ============ TOP UTILITY BAR ============ */
.hm-topbar {
    background: var(--hm-dark);
    color: #EDEDED;
    font-size: 12px;
}

.hm-topbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hm-topbar__left {
    display: flex;
    gap: 16px;
    align-items: center;
    color: #CFCFCF;
}

.hm-topbar__sep {
    opacity: .5;
}

.hm-topbar__right {
    display: flex;
    gap: 16px;
    align-items: center;
}

.hm-topbar__right a {
    color: #EDEDED;
    text-decoration: none;
}

.hm-topbar__right a:hover {
    color: #fff;
}

@media (max-width: 575.98px) {
    .hm-topbar__left span:last-child {
        display: none;
    }
}

/* ============ HERO ============
   Le hero carrousel maison a été remplacé par le même partiel que
   product.blade.php (@include('boutique.carousel'), stylé par carousel.css,
   chargée séparément — voir le <link> en tête de indexclient.blade.php).
   Seul un petit espace au-dessus est ajouté ici pour ne pas coller au
   bandeau utilitaire sombre. */

/* Bouton pill sombre réutilisé (ex: "Voir tous les produits" sous les
   onglets) — anciennement le CTA du hero maison, gardé car toujours utilisé
   ailleurs sur la page. */
.hm-btn {
    background: var(--hm-dark);
    color: #fff;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    width: fit-content;
    text-decoration: none;
    display: inline-block;
    transition: background .15s ease, transform .15s ease;
}

.hm-btn:hover {
    background: var(--hm-accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

/* ============ ANNONCE / PUBLICITÉ ============
   Bandeau "premium" juste sous le hero : nouvel arrivage, déstockage,
   fermeture exceptionnelle... Contenu statique pour le moment (voir le
   tableau $announcement dans indexclient.blade.php) — média à droite,
   image OU vidéo selon 'media_type' (repli en illustration CSS tant
   qu'aucun visuel n'est fourni). */
.hm-announce {
    padding-top: 28px;
}

.hm-announce__panel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, #17181c 0%, var(--hm-dark) 55%, #2a1720 100%);
    border-radius: 22px;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
}

.hm-announce__glow {
    position: absolute;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(232, 1, 79, .35), transparent 70%);
    top: -180px;
    right: -120px;
    pointer-events: none;
    border-radius: 50%;
}

.hm-announce__glow--two {
    top: auto;
    right: auto;
    bottom: -200px;
    left: -140px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
}

.hm-announce__content {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.hm-announce__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    background: var(--hm-accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 6px 14px;
    border-radius: 50px;
}

.hm-announce__title {
    color: #fff;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

.hm-announce__text {
    color: #d8d5d2;
    font-size: .93rem;
    line-height: 1.7;
    max-width: 460px;
    margin: 0;
}

.hm-announce__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: #fff;
    color: var(--hm-dark);
    font-weight: 700;
    font-size: 14px;
    padding: 13px 24px;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 8px;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.hm-announce__cta:hover {
    background: var(--hm-accent);
    color: #fff;
    transform: translateY(-2px);
}

.hm-announce__media {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-height: 320px;
}

.hm-announce__media img,
.hm-announce__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hm-announce__illustration {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%);
}

.hm-announce__illustration i {
    font-size: clamp(64px, 9vw, 110px);
    color: rgba(255, 255, 255, .18);
}

@media (max-width: 900px) {
    .hm-announce__panel {
        flex-direction: column;
        border-radius: 18px;
    }

    .hm-announce__media,
    .hm-announce__illustration {
        min-height: 220px;
    }

    .hm-announce__text {
        max-width: none;
    }
}

/* ============ REASSURANCE STRIP ============
   Panneau à fond dégradé pastel très doux, motif de points décoratif dans
   le coin, 4 items en ligne séparés par de fines lignes verticales
   (pas de cartes/boîtes), icône dans un anneau "donut" rose — look
   monochrome épuré. Empilé en 2 colonnes sur tablette, 1 colonne sur
   mobile (les séparateurs deviennent alors inutiles et disparaissent). */
.hm-reassurance {
    padding-top: 20px;
}

/* Section réservée au web : sur mobile elle prend trop de place pour ce
   qu'elle apporte, on la masque entièrement (le reste des styles
   ci-dessous devient alors inutile sous ce seuil, laissé tel quel). */
@media (max-width: 767.98px) {
    .hm-reassurance {
        display: none;
    }
}

.hm-reassurance__panel {
    position: relative;
    background: linear-gradient(160deg, #fdf1f3 0%, #fefaf8 55%, #fff 100%);
    border-radius: 20px;
    padding: 36px 40px;
    overflow: hidden;
}

.hm-reassurance__panel::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 84px;
    height: 84px;
    background-image: radial-gradient(rgba(232, 1, 79, .35) 1.5px, transparent 1.5px);
    background-size: 11px 11px;
    -webkit-mask-image: radial-gradient(circle at top left, #000 35%, transparent 75%);
    mask-image: radial-gradient(circle at top left, #000 35%, transparent 75%);
    pointer-events: none;
}

.hm-reassurance__grid {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
}

.hm-reassurance__item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
}

.hm-reassurance__item:first-child {
    padding-left: 0;
}

.hm-reassurance__item:last-child {
    padding-right: 0;
}

.hm-reassurance__item:not(:first-child) {
    border-left: 1px solid rgba(31, 31, 31, .08);
}

.hm-reassurance__icon {
    position: relative;
    flex-shrink: 0;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-reassurance__icon-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 1, 79, .14), rgba(232, 1, 79, 0) 72%);
}

.hm-reassurance__icon-inner {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(232, 1, 79, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hm-accent);
    font-size: 21px;
    box-shadow: 0 4px 12px -6px rgba(232, 1, 79, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}

.hm-reassurance__item:hover .hm-reassurance__icon-inner {
    transform: scale(1.06);
    box-shadow: 0 6px 16px -6px rgba(232, 1, 79, .35);
}

.hm-reassurance__title {
    font-family: var(--hm-font-heading);
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.3;
    margin-bottom: 4px;
    color: var(--hm-dark);
}

.hm-reassurance__text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--hm-muted);
    margin: 0;
}

@media (max-width: 991.98px) {
    .hm-reassurance__panel {
        padding: 28px 26px;
    }

    .hm-reassurance__grid {
        flex-wrap: wrap;
        row-gap: 26px;
    }

    .hm-reassurance__item {
        flex: 0 0 50%;
        border-left: none !important;
        padding: 0 18px;
    }

    .hm-reassurance__item:nth-child(odd) {
        padding-left: 0;
    }

    .hm-reassurance__item:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid rgba(31, 31, 31, .08) !important;
    }
}

@media (max-width: 575.98px) {
    .hm-reassurance {
        padding-top: 16px;
    }

    .hm-reassurance__panel {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .hm-reassurance__grid {
        flex-direction: column;
        row-gap: 22px;
    }

    .hm-reassurance__item {
        flex: 1 1 100%;
        border-left: none !important;
        padding: 0 !important;
    }

    .hm-reassurance__icon {
        width: 60px;
        height: 60px;
    }

    .hm-reassurance__icon-inner {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .hm-reassurance__title {
        font-size: 13.5px;
    }
}

/* ============ COMMANDER EN 3 ÉTAPES ============ */
.hm-steps {
    padding-top: 34px;
}

.hm-steps__head {
    text-align: center;
    margin-bottom: 28px;
}

.hm-steps__tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hm-accent);
    margin-bottom: 8px;
}

.hm-steps__title {
    font-weight: 800;
    font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.hm-steps__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

/* Ligne pointillée reliant les 3 pastilles numérotées (1 - - - 2 - - - 3).
   Elle passe derrière les cercles (z-index 0) : le fond opaque de
   .hm-step__num la recouvre à chaque étape, ce qui donne l'effet de
   segments reliés plutôt qu'un trait continu. */
.hm-steps__grid::before {
    content: "";
    position: absolute;
    top: 20px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 2px dashed rgba(31, 31, 31, .18);
    z-index: 0;
}

@media (max-width: 767.98px) {
    .hm-steps__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hm-steps__grid::before {
        content: none;
    }
}

.hm-step {
    position: relative;
    z-index: 1;
}

.hm-step__num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hm-dark);
    color: #fff;
    font-family: var(--hm-font-heading);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 16px;
}

.hm-step__title {
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 6px;
}

.hm-step__text {
    font-size: 12.5px;
    color: var(--hm-muted);
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

/* ============ EN-TÊTE DE SECTION GÉNÉRIQUE ============ */
.hm-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.hm-section-title {
    font-weight: 800;
    font-size: 20px;
}

.hm-section-link {
    font-size: 12.5px;
    color: var(--hm-accent);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.hm-section-link:hover {
    color: var(--hm-accent-hover);
}

/* ============ CATÉGORIES ============ */
.hm-categories {
    padding-top: 30px;
}

.hm-cat-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 12px;
}

@media (max-width: 991.98px) {
    .hm-cat-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 767.98px) {
    .hm-cat-grid {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .hm-cat-grid::-webkit-scrollbar {
        display: none;
    }
}

.hm-cat-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .15s ease, box-shadow .15s ease;
}

@media (max-width: 767.98px) {
    .hm-cat-card {
        flex-shrink: 0;
        width: 108px;
    }
}

.hm-cat-card:hover {
    border-color: var(--hm-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    color: inherit;
}

.hm-cat-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--hm-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-cat-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-cat-thumb i {
    font-size: 26px;
    color: var(--hm-accent);
}

.hm-cat-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

.hm-cat-count {
    font-size: 11px;
    color: #777;
}

/* ============ OFFRE FLASH ============
   Ancien design restauré tel quel (ported depuis homestyle.css) : carte
   bg-light + dégradé décoratif, carrousel 2 cartes visibles avec flèches
   prev/next, au lieu de la grille pleine largeur sur fond dégradé du
   redesign. */
.hm-flash {
    padding-top: 30px;
}

.bg-accent {
    background-color: var(--hm-accent) !important;
}

/* Compte à rebours — 4 pavés séparés (jours/h/min/sec), mêmes IDs/JS
   qu'avant (data-cd d/h/m/s). */
.flash-countdown {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.2rem;
}

.flash-countdown__box {
    background: var(--hm-dark);
    color: #fff;
    border-radius: .6rem;
    padding: .5rem .7rem;
    text-align: center;
    min-width: 56px;
}

.flash-countdown__num {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    font-family: var(--hm-font-heading);
}

.flash-countdown__lbl {
    font-size: .6rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s;
    font-size: 1rem;
    flex-shrink: 0;
}

.carousel-nav-btn:hover {
    background: var(--hm-accent);
    border-color: var(--hm-accent);
    color: #fff;
}

@media (max-width: 767.98px) {
    .carousel-nav-btn {
        width: 34px;
        height: 34px;
        font-size: .85rem;
    }
}

.exclusive-carousel-wrapper {
    overflow: hidden;
    border-radius: 1.5rem;
}

.exclusive-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform .45s cubic-bezier(.25, .46, .45, .94);
}

.exclusive-slide {
    flex-shrink: 0;
    width: calc(50% - .5rem);
}

@media (max-width: 767.98px) {
    .exclusive-slide {
        /* Une seule carte pleine largeur à la fois sur mobile (au lieu de 2
           cartes ou d'un aperçu de la suivante) — on navigue au swipe. */
        width: 100%;
    }
}

.card-exclusive {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 1.5rem;
    padding: .85rem;
    transition: all .35s;
}

.card-exclusive:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .1);
}

/* Vignette carrée — base commune, aussi utile telle quelle si réutilisée
   ailleurs (aspect-ratio + object-fit cohérents). */
.img-wrapper {
    border-radius: 1.2rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: 100%;
}

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

.card-exclusive .img-wrapper {
    border-radius: 1rem;
}

.card-exclusive .item-name {
    font-family: var(--hm-font-heading);
    font-weight: 600;
    font-size: .88rem;
    color: var(--hm-dark);
    margin-top: .6rem;
    margin-bottom: .2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-exclusive .item-ref {
    font-size: .68rem;
    color: #888;
    margin-bottom: .25rem;
}

.card-exclusive .item-desc {
    font-size: .72rem;
    color: #999;
    line-height: 1.5;
    margin-bottom: .45rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-exclusive .item-price {
    font-family: var(--hm-font-heading);
    font-weight: 700;
    color: var(--hm-accent);
    font-size: .98rem;
}

.card-exclusive .item-old-price {
    font-size: .76rem;
    color: #bbb;
    text-decoration: line-through;
    margin-left: .3rem;
}

@media (max-width: 767.98px) {
    .card-exclusive {
        padding: .65rem;
        border-radius: 1rem;
    }

    .card-exclusive .img-wrapper {
        border-radius: .65rem;
    }

    .card-exclusive .item-name {
        font-size: .78rem;
    }

    .card-exclusive .item-price {
        font-size: .82rem;
    }
}

.active_card {
    color: #fff !important;
    background: #00c853 !important;
}

/* ============ CARTE PRODUIT (onglets) ============ */
.hm-product-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

@media (max-width: 991.98px) {
    .hm-product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575.98px) {
    .hm-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hm-product-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 11px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}

.hm-product-card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    color: inherit;
}

.hm-product-card__img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--hm-bg);
    cursor: pointer;
}

.hm-product-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--hm-dark);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    z-index: 2;
}

.card-badge.promo {
    background: var(--hm-accent);
}

.card-badge.destock {
    background: #b8860b;
}

.hm-product-card__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    padding: 0;
}

.hm-product-card__fav svg {
    width: 13px;
    height: 13px;
}

.hm-product-card__fav.active_favoris svg {
    fill: var(--hm-accent);
    stroke: var(--hm-accent);
}

.hm-product-card__body {
    padding: 11px;
}

.hm-product-card__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    min-height: 36px;
    margin: 0 0 6px;
    cursor: pointer;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hm-product-card__prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.hm-product-card__price {
    font-weight: 800;
    color: var(--hm-dark);
    font-size: 15px;
    font-family: var(--hm-font-heading);
}

.hm-product-card__price-old {
    font-size: 11.5px;
    color: #999;
    text-decoration: line-through;
}

.hm-product-card__cart {
    width: 100%;
    margin-top: 9px;
    background: var(--hm-accent);
    color: #fff;
    border: none;
    padding: 9px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}

.hm-product-card__cart:hover {
    background: var(--hm-accent-hover);
}

.hm-product-card__cart.active-cart {
    background: var(--ok);
    color: var(--ok-soft) !important;
}

/* ============ ONGLETS PRODUITS ============ */
.hm-tabs {
    padding-top: 34px;
}

.tabs-nav {
    display: flex;
    gap: 6px;
    border-bottom: 2px solid var(--hm-line);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #777;
    border-bottom: 3px solid transparent;
    font-family: var(--hm-font-heading);
    margin-bottom: -2px;
}

.tab-btn.active {
    color: var(--hm-accent);
    border-bottom-color: var(--hm-accent);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* ============ TENDANCES — BENTO ============ */
.hm-bento {
    padding-top: 34px;
}

.hm-bento__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 14px;
}

@media (max-width: 767.98px) {
    .hm-bento__grid {
        grid-template-columns: 1fr;
    }
}

.hm-bento__featured {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    overflow: hidden;
    grid-row: span 2;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

@media (max-width: 767.98px) {
    .hm-bento__featured {
        grid-row: auto;
    }
}

.hm-bento__featured-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--hm-bg);
}

@media (max-width: 767.98px) {
    .hm-bento__featured-img {
        aspect-ratio: 4 / 3;
    }
}

.hm-bento__featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-bento__featured-body {
    padding: 14px;
}

.hm-bento__featured-name {
    font-size: 14px;
    font-weight: 700;
}

.hm-bento__featured-price {
    font-weight: 800;
    color: var(--hm-accent);
    font-size: 16px;
    margin-top: 4px;
    font-family: var(--hm-font-heading);
}

.hm-bento__small-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hm-bento__small {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.hm-bento__small-img {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    background: var(--hm-bg);
}

.hm-bento__small-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hm-bento__small-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hm-bento__small-name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.hm-bento__small-price {
    font-weight: 800;
    color: var(--hm-dark);
    font-size: 13px;
    margin-top: 3px;
    font-family: var(--hm-font-heading);
}

/* ============ POURQUOI MSHOP GADGET ============
   Ancien design restauré (mise en page éditoriale 2 colonnes + tuiles de
   couleur) — utilise la grille Bootstrap (row/col-lg-*/g-*, déjà chargée
   globalement par le layout) pour la structure, et seulement 3 classes
   propres à ce bloc ci-dessous, portées depuis homestyle.css puisque cette
   page ne charge plus ce fichier. */
.hm-why {
    padding-top: 34px;
}

.editorial-tag {
    display: inline-block;
    border: 1.5px solid #ddd;
    border-radius: 50px;
    padding: 4px 14px;
    font-size: .74rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.editorial-quote {
    font-family: var(--font-display);
    font-size: clamp(1.20rem, 2.4vw, 1.8rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.3px;
    color: var(--hm-dark);
}

.editorial-quote em {
    color: var(--hm-accent);
    font-style: normal;
}

.text-accent {
    color: var(--hm-accent) !important;
}

.fw-black {
    font-weight: 700;
    letter-spacing: -.5px;
}

/* Bouton pill plein accent — ported depuis homestyle.css (ex: CTA "Contacter
   le support" de la FAQ, dont l'ancien design est restauré ci-dessous). */
.btn-accent {
    display: inline-block;
    background: var(--hm-accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s;
}

.btn-accent:hover {
    background: var(--hm-accent-hover);
    color: #fff;
    transform: scale(1.04);
}

/* ============ NOS BOUTIQUES ============ */
.hm-stores {
    padding-top: 34px;
}

.hm-stores__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 767.98px) {
    .hm-stores__grid {
        grid-template-columns: 1fr;
    }
}

.store-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
}

.store-photo {
    width: 130px;
    flex-shrink: 0;
    position: relative;
    background: var(--hm-bg);
}

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

.store-photo__zoom {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    cursor: zoom-in;
    background: none;
    position: relative;
}

/* Petite loupe au survol pour signaler que la photo s'agrandit. */
.store-photo__zoom::after {
    content: "🔍";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s ease;
}

.store-photo__zoom:hover::after,
.store-photo__zoom:focus-visible::after {
    opacity: 1;
}

.store-photo__fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--hm-accent);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 8px;
}

.store-photo__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--hm-dark);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.store-body {
    padding: 14px;
    flex: 1;
}

.store-name {
    font-weight: 700;
    font-size: 14.5px;
    font-family: var(--hm-font-heading);
}

.store-infos {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: #555;
    line-height: 1.7;
}

.store-infos a {
    color: inherit;
    text-decoration: none;
}

.store-directions {
    display: inline-block;
    margin-top: 10px;
    background: var(--hm-bg);
    border: 1px solid var(--hm-line);
    color: var(--hm-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 7px;
    text-decoration: none;
}

.store-directions:hover {
    border-color: var(--hm-accent);
    color: var(--hm-accent);
}

/* ============ AVIS CLIENTS ============ */
.hm-avis {
    padding-top: 34px;
}

.hm-avis__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 767.98px) {
    .hm-avis__grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    background: #fff;
    border: 1px solid var(--hm-line);
    border-radius: 12px;
    padding: 16px;
    overflow: hidden;
}

/* Preuve (capture d'écran) affichée directement, pas besoin de cliquer pour
   la voir. Reste cliquable pour l'agrandir dans la modal existante. */
.testimonial-card__photo {
    display: block;
    width: calc(100% + 32px);
    margin: -16px -16px 12px;
    background: var(--hm-bg);
}

.testimonial-card__photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.testimonial-card .stars {
    color: var(--hm-accent);
    font-size: 13px;
    letter-spacing: 2px;
}

.testimonial-card__text {
    font-size: 13px;
    color: #333;
    margin-top: 8px;
    line-height: 1.5;
    font-style: italic;
}

.testimonial-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.testimonial-card__name {
    font-size: 12.5px;
    font-weight: 700;
}

/* ============ FAQ ============
   Ancien design restauré tel quel (ported depuis homestyle.css, cette page
   ne la charge plus) : accordéon avec icône ronde qui pivote à l'ouverture,
   au lieu du simple +/− et de l'ouverture instantanée du bloc précédent. */
.hm-faq {
    padding-top: 34px;
}

.faq-item {
    border-bottom: 1px solid #f0f0f0;
    padding: 1.2rem 0;
    cursor: pointer;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    font-family: var(--hm-font-heading);
    font-weight: 600;
    font-size: .98rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--hm-dark);
    user-select: none;
}

.faq-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    flex-shrink: 0;
    transition: all .3s;
}

.faq-item.open .faq-icon {
    background: var(--hm-accent);
    color: #fff;
    transform: rotate(45deg);
}

.faq-answer {
    font-family: var(--hm-font-body);
    font-size: .88rem;
    color: #666;
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s ease;
}

.faq-item.open .faq-answer {
    max-height: 200px;
    padding-top: .7rem;
}

/* ============ NEWSLETTER ============ */
.hm-newsletter-wrap {
    padding-top: 34px;
}



.hm-newsletter-wrap .btn_newsletter {
    background: var(--hm-accent);
    color: #fff;
    border-radius: 8px;
    padding: 11px 20px;
    font-weight: 700;
    font-size: 13px;
    border: none;
}

.hm-newsletter-wrap .btn_newsletter:hover:not(:disabled) {
    background: var(--hm-accent-hover);
}

.hm-newsletter-wrap .inpt_newsletter {
    border: none;
    border-radius: 8px;
    font-size: 13px;
}

/* ============ FOOTER SPACER (contenu masqué par la barre mobile fixe) ============ */

/* ============ CTA MOBILE FIXE ============ */
.mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--hm-line);
    display: none;
    gap: 8px;
    padding: 10px 14px;
    z-index: 60;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}

@media (max-width: 767.98px) {
    .mobile-cta {
        display: flex;
    }
}

.mobile-cta .m-primary,
.mobile-cta .m-second {
    flex: 1;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.mobile-cta .m-primary {
    background: var(--hm-accent);
    color: #fff;
}

.mobile-cta .m-second {
    background: var(--hm-dark);
    color: #fff;
}

 .hm-steps__title{
                color: #E8014F;
            }