/* ============================================================
   THEME Planete-Market — Style yutilis.global-transaction.fr
   ============================================================ */
:root {
  /* Identité de marque Planete-Market (logo + visuels officiels) : rouge-orangé
     plutôt que le noir générique précédent — cf. logo.png et les bannières
     vendeur Pro fournies par la marque. Cet accent sert les boutons/liens/badges
     sur fond clair. Les surfaces sombres (barre du haut, footer) utilisent
     --darkSurface, pas --skinColor : les textes blancs semi-transparents qui y
     sont posés ont été calibrés pour un fond très sombre, illisibles sur un
     orange clair.
     Palette enrichie du 01/08 : rouge-orangé approfondi (reste fidèle au
     logo.png/bannières officielles, juste plus dense) + un vrai second accent
     doré (--accentGold), utilisé uniquement dans les dégradés (hero de secours,
     bandeaux publicitaires sans image) qui, avant, étaient des aplats plats car
     --primary et --accent pointaient tous deux vers --skinColor. */
  --skinColor:      #C0431A;
  --skinHoverColor: #9F3513;
  --accentGold:     #D4A017;
  --darkSurface:    #17100C;
  --lightColor:  #F2F4F6;
  --lightColor2: #F7F8FA;
  --darkColor:   #0D0E10;
  --grayColor:   #818195;
  --grayColor2:  #74807F;
  --borderColor: #D9D9DF;
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;color:#818195;background:#fff;line-height:1.5;overflow-x:hidden;max-width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
a{text-decoration:none;color:inherit;transition:.25s}

/* === LAYOUT ===
   Grille façon Bootstrap, mobile-first : chaque classe col-* n'agit
   qu'à partir de son propre seuil (min-width), pour que col-xl-3,
   col-lg-4, col-md-6, col-sm-6 posés ensemble sur un même élément
   se comportent comme prévu (4 → 3 → 2 → 1 colonnes) au lieu de se
   marcher dessus. */
.container{max-width:1260px;margin:0 auto;padding:0 15px}
.row{display:flex;flex-wrap:wrap;margin-left:-10px;margin-right:-10px}
[class*="col-"]{padding-left:10px;padding-right:10px;width:100%}
.col-12{width:100%}
/* Retour Gérard (26/07) : "grille similaire pour la version mobile ... plutôt qu'un
   empilement 1 colonne" pour les cartes produits — .col-sm-6 n'est utilisé que dans
   des grilles de cartes produit (accueil, product-card), jamais dans un formulaire :
   passage à 50% dès la plus petite largeur au lieu d'attendre 576px. */
.col-sm-6{width:50%}
@media(min-width:768px){.col-md-6{width:50%}}
@media(min-width:992px){.col-lg-4{width:33.333%}.col-lg-3{width:25%}}
@media(min-width:1200px){.col-xl-3{width:25%}}

/* === UTILITIES === */
.d-none{display:none!important}
.d-block{display:block!important}
.d-flex{display:flex!important}
.d-lg-block{display:none}
.d-lg-none{display:block}
@media(min-width:992px){.d-lg-block{display:block!important}.d-lg-none{display:none!important}.d-none-lg{display:none!important}}
.text-center{text-align:center!important}
.text-white{color:#fff!important}
.align-items-center{align-items:center!important}
.align-items-end{align-items:flex-end!important}
.justify-content-between{justify-content:space-between!important}
.justify-content-center{justify-content:center!important}
.flex-wrap{flex-wrap:wrap!important}
.flex-column{flex-direction:column!important}
.gap-6px{gap:6px!important}
.gap-18px{gap:18px!important}
.gap-3{gap:1rem!important}
.gap-4{gap:1.5rem!important}
.column-gap-30px{column-gap:30px!important}
.row-gap-4{row-gap:1.5rem!important}
.w-100{width:100%!important}
.h-100{height:100%!important}
.ms-1{margin-left:4px!important}
.pe-4{padding-right:1.5rem!important}
.capitalize{text-transform:capitalize!important}
.text-decoration-line-through{text-decoration:line-through!important}
.rounded-circle{border-radius:50%!important}

/* === SPACING === */
.mb-100px{margin-bottom:100px!important}
.mb-30px{margin-bottom:30px!important}
.mb-20px{margin-bottom:20px!important}
.mb-12px{margin-bottom:12px!important}
.mb-7px{margin-bottom:7px!important}
.mb-3px{margin-bottom:3px!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mt-12px{margin-top:12px!important}
.mt-5{margin-top:3rem!important}
.pt-5{padding-top:3rem!important}
.py-60{padding:60px 0!important}
.gy-4>*{padding-top:0;padding-bottom:20px}

/* === TOP HEADER === */
.top-header-section{background:var(--darkSurface)!important;padding:9px 0;font-size:13px;color:rgba(255,255,255,.75);border-bottom:2px solid var(--skinColor)}
.top-header-section a{color:rgba(255,255,255,.75)}
.top-header-section a:hover{color:var(--skinColor);opacity:1}

/* === HEADER === */
.logo-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:900;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.header-menuitem-a{padding:8px 14px;font-size:14px;font-weight:500;color:#0D0E10;border-radius:6px;transition:.2s;display:inline-block}
.header-menuitem-a:hover,.header-menuitem-a.active{color:var(--skinColor)!important}

/* === SEARCH === */
.header-search-wrap{position:relative}
.header-search-box{display:flex;align-items:center;background:#F7F8FA;border-radius:50px;padding:7px 16px;gap:8px;border:1.5px solid transparent;transition:.2s}
.header-search-box:focus-within{border-color:var(--skinColor);background:#fff}
.header-search-box input{border:none;background:none;outline:none;font-size:14px;width:130px;color:#0D0E10}
.search-suggest{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.15);z-index:999;display:none;min-width:320px;overflow:hidden}
.search-suggest a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #F2F4F6;color:#0D0E10;transition:.15s}
.search-suggest a:hover{background:#F7F8FA}
.search-suggest a img{width:44px;height:44px;object-fit:cover;border-radius:6px;background:#F2F4F6}
.search-suggest-footer{display:block;text-align:center;padding:10px;font-size:13px;font-weight:600;color:var(--skinColor);background:#F7F8FA;border-top:1px solid #eee}
#mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:5px;align-items:center;justify-content:center}
#mobile-nav{display:none;border-top:1px solid #eee;background:#fff;padding:16px}
#mobile-nav a{display:block;padding:10px 0;border-bottom:1px solid #F2F4F6;font-size:14px;color:#0D0E10}

/* === TYPOGRAPHY === */
.mv-title-40px{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;color:#0D0E10;line-height:1.15;letter-spacing:-.02em}
.al-title-24px{font-size:22px;font-weight:700;color:#0D0E10;letter-spacing:-.01em}
.al-title-20px{font-size:18px;font-weight:700;color:#0D0E10}
.al-title-18px{font-size:17px;font-weight:600;color:#0D0E10}
.al-title-16px{font-size:15px;font-weight:600;color:#0D0E10;line-height:1.35}
.al-title-14px{font-size:14px;font-weight:500;color:#0D0E10}
.al-subtitle-14px{font-size:13px;color:#818195}
.al-subtitle2-16px{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65}
.fsh-text-skin{color:var(--skinColor)!important}
.max-w-337px{max-width:337px}
.icon-right{display:inline-flex!important;align-items:center!important;gap:10px!important}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;border:none}
.btn:focus{box-shadow:none;outline:none}
/* Accessibilité (WCAG 2.4.7 "Focus visible") : la règle ci-dessus supprimait tout indicateur
   de focus, y compris au clavier — impossible de savoir quel élément est actif sans souris.
   :focus-visible ne s'affiche que pour la navigation clavier (Tab), pas au clic souris. */
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2.5px solid var(--skinColor);outline-offset:2px;border-radius:4px;
}
.fsh-btn-dark{background:var(--skinColor);color:#fff;padding:13px 20px 13px 24px;border-radius:10px;font-size:14px;font-weight:600;transition:.25s cubic-bezier(.4,0,.2,1)}
.fsh-btn-dark:hover{background:var(--skinHoverColor);color:#fff;opacity:1;transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}

/* === HERO === */
.home-hero-section{
  background:radial-gradient(circle at 15% 20%, rgba(26,26,26,.06) 0%, transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(26,26,26,.04) 0%, transparent 50%),
             #fff;
  padding-top:40px;margin-bottom:100px
}
.home-hero-inner-wrap{position:relative}
.home-hero-banner{position:relative;max-width:1100px;width:100%;margin:0 auto}
/* Retour Halick (21-08-2026) : "bannière coupée sur pc ou grand écran" — la hauteur fixe de
   600px ne correspondait pas au format réel des créations (1170×500, cf. commentaire plus bas
   sur .hero-slide-no-veil), qui rendent plutôt ~470px de haut à 1100px de large. Object-fit:cover
   devait donc recadrer horizontalement une bonne partie de l'image pour combler l'écart de
   hauteur — d'où le rognage visible des bords (logos de marques coupés, etc.) sur grand écran.
   aspect-ratio respecte ce format quelle que soit la largeur réelle du conteneur (mobile compris),
   object-fit:cover ne sert donc plus que de filet de sécurité pour un visuel ponctuellement
   fourni dans un autre ratio. */
.home-hero-banner .banner{width:100%;display:block;aspect-ratio:1170/500;object-fit:cover;object-position:top center;border-radius:18px}
/* Voile de lisibilité derrière le titre superposé au hero : garantit un bon contraste
   quel que soit le contenu de la photo (au lieu de ne compter que sur un text-shadow flou,
   insuffisant sur une image chargée/sombre). Limité aux écrans où le titre est affiché
   (voir @media(max-width:992px) qui masque .hero-desktop-titles).
   Correctif Halick (14-08-2026) : "enlève l'effet blanc sur l'image hero section" — le
   voile était posé sur TOUT le conteneur .home-hero-banner et seulement retiré (hero-no-veil)
   si TOUS les visuels de la rotation étaient self_contained. Depuis la fusion Hero+Slider
   (#159), un même carrousel peut mélanger des visuels autoporteurs (texte déjà intégré à
   l'image, comme "ARRIVAGE RÉGULIER D'ARCHIVES VINTAGE") et des visuels classiques avec
   titre HTML superposé : dès qu'UN SEUL visuel du groupe n'était pas self_contained, le
   voile blanc délavait quand même TOUS les autres, y compris les visuels autoporteurs qui
   n'en ont jamais eu besoin. Le voile est donc posé par SLIDE (.hero-rotator-slide),
   pas par conteneur. */
.hero-rotator-slide{position:relative}
/* Retour Halick (29-08-2026) : "enlever le voile blanc c'est dans home hero
   section" — 2e demande de suppression de ce voile (déjà demandé le 14-08-2026,
   voir commentaire ci-dessus) ; il ne suffisait pas de le limiter aux slides non
   autoporteuses (hero-slide-no-veil) car TOUTE nouvelle bannière classique
   ajoutée en admin le faisait réapparaître. Règle ::before entièrement retirée
   cette fois-ci pour qu'il ne puisse plus revenir, quel que soit le contenu des
   bannières. La lisibilité du titre .hero-desktop-titles reste assurée par son
   propre text-shadow blanc (voir plus bas), sans délaver l'image en dessous. */
/* Visuels autoporteurs (titre + CTA déjà composés dans l'image) : pas de
   recadrage — les créations sont fournies au même format (1170×500) donc
   height:auto suffit à garder une hauteur identique d'un visuel à l'autre — cf.
   resources/views/partials/hero-banner.blade.php. */
.hero-rotator-slide.hero-slide-no-veil .banner{height:auto;aspect-ratio:auto}
.hero-self-contained-btn{
  position:absolute;left:28px;bottom:28px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--skinColor);color:#fff;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .15s ease, background .15s ease;
}
.hero-self-contained-btn:hover{background:var(--skinHoverColor);transform:translateY(-2px)}
@media(max-width:576px){.hero-self-contained-btn{left:14px;bottom:14px;padding:10px 16px;font-size:13px}}
.home-hero-buttons{
  position:absolute;bottom:144px;left:0;z-index:2;
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;max-width:765px;width:100%
}
.text-circle-btn{
  width:68px;height:68px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0
}
.text-circle-btn .spin-text{
  position:absolute;inset:0;width:100%;height:100%;
  animation:spin 10s linear infinite
}
.text-circle-btn .play-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
@keyframes spin{to{transform:rotate(360deg)}}
.home-hero-list-wrap{padding:36px 0 0}
.home-hero-list-wrap h4{font-size:20px;font-weight:700;color:#0D0E10;margin-bottom:14px}
.engagement-badges{display:flex;flex-wrap:wrap;gap:32px}
.engagement-badge{display:flex;align-items:center;gap:12px;font-size:14px;color:#33343a;font-weight:600}
.engagement-icon{width:38px;height:38px;border-radius:50%;background:color-mix(in srgb, var(--skinColor) 12%, white);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.engagement-icon svg{width:18px;height:18px}
@media(max-width:576px){.engagement-badges{gap:20px}.engagement-badge{font-size:13px}}
.hero-desktop-titles{position:absolute;top:44px;left:44px;z-index:2;pointer-events:none;max-width:60%}
.hero-desktop-titles h1{font-size:clamp(2rem,4.5vw,5.5rem);font-weight:800;color:#0D0E10;line-height:1;text-shadow:0 2px 18px rgba(255,255,255,.5)}
.hero-desktop-titles .t2{font-size:clamp(2.5rem,5.5vw,7rem);font-weight:800;color:var(--skinColor);display:block;line-height:1;text-shadow:0 2px 18px rgba(255,255,255,.5)}
.hero-desktop-titles p{font-size:1.1rem;color:#33343a;margin-top:10px;font-weight:600;text-shadow:0 1px 10px rgba(255,255,255,.6)}

/* === FILTER BUTTONS === */
.fsh-mixitup-btn{padding:8px 20px;border-radius:50px;font-size:13px;font-weight:600;border:1.5px solid #D9D9DF;background:#fff;color:#818195;cursor:pointer;transition:.2s}
.fsh-mixitup-btn.mixitup-control-active,.fsh-mixitup-btn:hover{background:var(--skinColor);color:#fff;border-color:var(--skinColor)}

/* === PRODUCT CARD === */
.product-grid-md{background:#fff;border-radius:16px;overflow:hidden;border:1px solid transparent;transition:.3s cubic-bezier(.4,0,.2,1)}
.product-grid-md:hover{border-color:transparent;box-shadow:0 16px 40px rgba(0,0,0,.12);transform:translateY(-6px)}
.product-grid-banner-md{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1/1;background:#F7F8FA}
.product-grid-banner-md .banner{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.product-grid-md:hover .product-grid-banner-md .banner{transform:scale(1.06)}
.red-badge-md{position:absolute;top:10px;left:10px;background:var(--skinColor);color:#fff;padding:3px 10px;border-radius:50px;font-size:11px;font-weight:700}
.product-cart-btn-md{position:absolute;bottom:10px;right:10px;background:var(--skinColor);color:#fff;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;opacity:0;transition:.2s}
.product-grid-md:hover .product-cart-btn-md{opacity:1}

/* === SECTIONS === */
.fsh-light-section{background:#F7F8FA}
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;height:320px}
.gallery-grid .gallery-item{border-radius:10px;overflow:hidden;position:relative}
.gallery-grid .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery-grid .gallery-item:hover img{transform:scale(1.08)}
.gallery-grid .gallery-item::after{content:'';position:absolute;inset:0;background:var(--skinColor);opacity:.16;mix-blend-mode:multiply;pointer-events:none}

/* === SELLER CARD ===
   Corrigé 28-08-2026 (retour Halick : "les tailles des card qui ont un theme
   s'aggrandissent legerement") : une card avec thème payant/Premium a du contenu en
   plus (bandeau image, badge "◈ thème") qu'une card classique n'a pas, ce qui la
   rendait naturellement plus haute dans sa ligne de grille — display:flex en colonne
   + margin-top:auto sur le bouton CTA (voir resources/views/sellers/index.blade.php
   et subshops) rend toutes les cards d'une même ligne strictement égales en hauteur
   (align-items:stretch, déjà la valeur par défaut de CSS Grid mais explicitée ici par
   sécurité) : le contenu variable s'empile en haut, le bouton reste toujours ancré en
   bas, quelle que soit la quantité de badges/bandeaux affichés. */
.seller-card{background:#fff;border-radius:18px;border:1px solid #F0F0F2;padding:24px;text-align:center;transition:.3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.seller-card:hover{border-color:var(--skinColor);box-shadow:0 16px 40px rgba(0,0,0,.1);transform:translateY(-6px)}

/* === PAGE HERO (events/blog/sellers/produits — toutes les pages hors accueil) ===
   Bandeau enrichi (dégradé de profondeur + halo + trame de points, tous en CSS pur,
   sans toucher au balisage Blade partagé par les 4 pages) pour sortir du simple
   aplat de couleur, tout en conservant le contraste texte validé précédemment. */
/* Hero "compact" (Categories/Produits, Boutiques, Vitrines, Events, Blog) : bandeau
   ramené à une hauteur minimale (icône + titre sur une ligne, sous-titre en dessous)
   pour que le contenu de la page apparaisse plus vite au scroll, au lieu de l'ancien
   bandeau haut de ~130px à vide. */
.page-hero{position:relative;background:var(--darkSurface);padding:22px 0 24px;border-bottom:2px solid var(--skinColor);overflow:hidden}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 320px at 88% -25%, var(--skinColor) 0%, transparent 62%),
    radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size:auto, 24px 24px;
  opacity:.55;
}
.page-hero::after{
  content:'';position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, var(--skinColor) 0%, transparent 70%);opacity:.18;pointer-events:none;
}
.page-hero .container{position:relative;z-index:1}
.page-hero-head{display:flex;align-items:center;gap:12px}
.page-hero-icon{font-size:1.7rem;line-height:1;flex-shrink:0}
.page-hero h1{font-size:clamp(1.3rem,2.6vw,1.8rem);font-weight:800;color:#fff;letter-spacing:-.01em}
.page-hero p{color:rgba(255,255,255,.65);margin-top:2px;font-size:.85rem}
.breadcrumb-list{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.45);margin-bottom:8px}
.breadcrumb-list a{color:rgba(255,255,255,.45)}
.breadcrumb-list a:hover{color:var(--skinColor);opacity:1}

/* === FOOTER === */
.footer-section-main{background:var(--darkSurface);position:relative;overflow:hidden}
.footer-section-main::before{
  content:'';position:absolute;top:0;left:0;right:0;height:220px;pointer-events:none;
  background:radial-gradient(420px 220px at 10% 0%, var(--skinColor) 0%, transparent 62%);opacity:.14;
}
.footer-section-main .container{position:relative;z-index:1}
.footer-nav-link{color:rgba(255,255,255,.6);font-size:14px;display:block;width:fit-content;margin-bottom:10px;transition:.15s}
.footer-nav-link:hover{color:var(--skinColor);opacity:1;transform:translateX(3px)}
.footer-bottom-area{border-top:1px solid rgba(255,255,255,.1)}
.footer-input{flex:1;padding:11px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:6px;font-size:14px;outline:none;min-width:0}
.footer-input::placeholder{color:rgba(255,255,255,.45)}
.footer-input:focus{border-color:var(--skinColor);background:rgba(255,255,255,.12)}
.footer-submit-btn{background:var(--skinColor);color:#fff;border:none;padding:11px 20px;border-radius:6px;cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap;transition:.2s}
.footer-submit-btn:hover{background:var(--skinHoverColor);opacity:1;transform:translateY(-1px)}
.footer-title{color:rgba(255,255,255,.88);font-size:15px;font-weight:700;margin-bottom:18px;position:relative;padding-bottom:10px;width:fit-content}
.footer-title::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--skinColor);border-radius:2px}
/* --- Section "Restez informé" dédiée (accueil, CDC section 8) ---
   Même traitement visuel que .page-hero (halo + trame de points) pour une
   cohérence de langage graphique sur les surfaces sombres du site ; fond neutre
   fixe (indépendant de --darkSurface, qui n'existe que sur general) afin de
   rester identique sur les 3 sites. */
.newsletter-section{position:relative;padding:64px 0;background:#14161a;overflow:hidden}
.newsletter-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 260px at 50% -25%, var(--skinColor) 0%, transparent 62%),
    radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size:auto, 24px 24px;
  opacity:.5;
}
.newsletter-section .container{position:relative;z-index:1}
.newsletter-section-inner{max-width:560px;margin:0 auto;text-align:center}
.newsletter-section-icon{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--skinColor);margin:0 auto 18px}
.newsletter-section-title{color:#fff;font-size:1.85rem;font-weight:800;margin-bottom:.5rem;letter-spacing:-.01em}
.newsletter-section-desc{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:1.75rem}
.newsletter-section-form{display:flex;gap:8px;max-width:420px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-section-note{color:rgba(255,255,255,.4);font-size:12px;margin-top:.9rem}

/* --- Section CTA "Rejoindre" (bas des pages Boutiques ET Showcases — même vue,
   filtrée par ?type=particulier) : remplace l'aplat brut de --skinColor (illisible
   depuis que l'accent est devenu un orange clair — même bug que le page-hero avant
   correction) par --darkSurface + le même halo/trame de points que page-hero et
   newsletter-section, pour un langage visuel cohérent sur tout le site. */
.join-cta{position:relative;background:var(--darkSurface);padding:80px 0;text-align:center;overflow:hidden}
.join-cta::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 300px at 50% -20%, var(--skinColor) 0%, transparent 60%),
    radial-gradient(rgba(255,255,255,.10) 1.5px, transparent 1.5px);
  background-size:auto, 24px 24px;
  opacity:.55;
}
.join-cta .container{position:relative;z-index:1}
.join-cta-eyebrow{font-size:12px;color:var(--skinColor);font-weight:700;text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:12px}
.join-cta-title{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;color:#fff;margin-bottom:16px;letter-spacing:-.01em}
.join-cta-desc{color:rgba(255,255,255,.65);font-size:.95rem;line-height:1.7;margin-bottom:32px}
.join-cta-btn{padding:14px 32px;font-size:15px}
.join-cta-stats{display:flex;justify-content:center;gap:16px;margin-top:40px;flex-wrap:wrap}
.join-cta-stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:16px 28px;min-width:110px}
.join-cta-stat-value{font-size:1.75rem;font-weight:800;color:#fff}
.join-cta-stat-label{font-size:.72rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* --- Restez informé (bandeau newsletter en tête de footer) --- */
.footer-newsletter{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 0 36px;border-bottom:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.footer-newsletter-text{display:flex;align-items:flex-start;gap:16px;max-width:480px}
.footer-newsletter-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--skinColor);margin-top:2px}
.footer-newsletter-title{color:#fff;font-size:19px;font-weight:800;margin:0 0 6px}
.footer-newsletter-desc{color:rgba(255,255,255,.55);font-size:14px;line-height:1.55;margin:0}
.footer-newsletter-form{display:flex;gap:8px;flex:1;max-width:420px;min-width:280px}
@media(max-width:576px){.footer-newsletter-form{max-width:100%}}

/* === RESPONSIVE === */
@media(max-width:992px){
  #main-nav{display:none!important}
  #mobile-menu-btn{display:flex!important}
  .hero-desktop-titles{display:none!important}
  .home-hero-buttons{bottom:24px;left:50%;transform:translateX(-50%);max-width:none;width:auto}
  .gallery-grid{grid-template-columns:repeat(3,1fr);height:auto}
  .header-search-wrap{display:none}
}
@media(max-width:420px){
  .header-brand-tagline{display:none}
  .logo-header .header-row{gap:8px}
}
@media(max-width:640px){
  .top-bar-email{display:none!important}
}
@media(max-width:340px){
  .top-bar-contacts a{font-size:12px}
}
/* Barre du haut (Hotline/Email/Langue/Compte) : évite l'empilement sur 3 lignes en mobile.
   Le numero et l'email sont deja repris dans le footer, donc masquer ce bloc sur mobile
   ne fait perdre aucun acces a l'information. */
@media(max-width:768px){
  .top-header-section .container>div{justify-content:center!important}
  .top-bar-contacts{display:none!important}
  /* Retour Halick (29-08-2026) : "bouton déconnexion en haut qui ne reste pas
     sur la même ligne" — Langue/Boutique/Compte/Déconnexion passaient à la
     ligne dès que la largeur cumulée dépassait l'écran (flex-wrap), reléguant
     Déconnexion seul sur une 2e ligne centrée. Passé en bandeau nowrap
     défilable au doigt : tout reste sur une seule ligne, quitte à devoir
     glisser pour voir Déconnexion sur un très petit écran. */
  .top-bar-actions{gap:10px!important;font-size:13px!important;justify-content:flex-start!important;flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;padding-bottom:2px}
  .top-bar-actions>*{flex-shrink:0;white-space:nowrap}
  .top-header-section{padding:6px 0!important}
  /* Retour Halick (29-08-2026) : "les notifications s'ouvre mal" — #notif-dropdown
     (layouts/app.blade.php) est en position:absolute;right:0;width:320px, calé sur
     la cloche 🔔. Sur mobile, la cloche n'est pas collée au bord droit de l'écran
     (cœur/panier/burger sont à sa droite dans .header-actions) : un panneau de
     320px ancré sur SA propre bordure droite déborde donc largement à GAUCHE de
     l'écran (texte "Notifications" tronqué en "tifications" observé). Passage en
     position:fixed ancré aux bords de la fenêtre (plus jamais dépendant de la
     position de la cloche dans le header) — largeur fluide entre 2 marges de
     12px, hauteur du header mobile mesurée à ~102px (logo-header, stable car ce
     bandeau ne change pas de hauteur selon la largeur d'écran). */
  #notif-dropdown{position:fixed!important;top:104px!important;left:12px!important;right:12px!important;width:auto!important;max-width:none!important}
}
@media(max-width:992px){
  .flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .featured-shops-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:768px){
  /* aspect-ratio (règle de base ci-dessus) suffit désormais à garder le bon format à toute
     largeur — plus besoin de max-height ici, qui rognait l'image différemment du desktop. */
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr!important;gap:24px!important}
  .collection-grid{grid-template-columns:1fr!important}
  .testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:576px){
  .home-hero-buttons{gap:8px;bottom:10px;left:10px;transform:none}
  .fsh-btn-dark{padding:10px 16px;font-size:13px}
  .testimonial-grid{grid-template-columns:minmax(0,1fr)!important}
  .buyer-seller-grid{grid-template-columns:minmax(0,1fr)!important}
  /* Retour Gérard (26/07) : cartes accueil (Flash Vente, Boutiques en Vedette) trop
     petites en 1 colonne sur mobile — conservées en 2 colonnes comme sur les autres
     grilles de cartes (blog, boutiques, catégories). */
  .flash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .featured-shops-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.buyer-seller-card{cursor:pointer}
.buyer-seller-card:hover{border-color:var(--skinColor)!important;box-shadow:0 16px 36px rgba(0,0,0,.1);transform:translateY(-4px)}
@media(max-width:480px){
  .gallery-grid{grid-template-columns:1fr 1fr}
}
@media(hover:none){
  .product-grid-md:hover{transform:none;box-shadow:none}
  .product-cart-btn-md{opacity:1!important}
}

/* ============================================================
   COUCHE DE COMPATIBILITÉ — pages internes (produits, boutiques,
   events, blog, panier, compte...) qui utilisent un vocabulaire
   CSS différent de la home. Ces variables/classes n'existaient
   pas et cassaient l'affichage de ces pages.
   ============================================================ */
:root{
  --primary:      var(--skinColor);
  --primary-dark: var(--skinHoverColor);
  --accent:       var(--accentGold);
  --gray:         var(--grayColor);
  --light:        var(--lightColor2);
  --dark:         var(--darkColor);
  --border:       var(--borderColor);
  --radius: 14px;
  --shadow: 0 2px 20px rgba(0,0,0,.06);
}

/* === LAYOUT GÉNÉRIQUE === */
.section{padding:2.5rem 0}
.section-title{font-size:1.3rem;font-weight:800;color:var(--dark);margin-bottom:1.25rem}
/* Retour Gérard (25/07) : "la page dépasse en largeur les produits affichés" sur
   /products, aussi en mobile — les colonnes 1fr d'une grille CSS ont un min-width
   implicite égal au min-content de leur contenu (nom de produit, prix...), donc
   dès qu'une carte est intrinsèquement plus large que sa part de 1fr, toute la
   grille pousse au-delà de son conteneur au lieu de se comprimer. minmax(0,1fr)
   autorise chaque colonne à rétrécir sous ce min-content (même correctif déjà
   appliqué à .flash-grid/.featured-shops-grid/.testimonial-grid plus bas). */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.grid-2>[class*="col-"],.grid-3>[class*="col-"],.grid-4>[class*="col-"],.grid-5>[class*="col-"]{width:100%;padding:0}

/* Retour Gérard (04/08, annotations "Liste dans catégorie.jpg") : rangée compacte
   de 9 produits insérée après chaque Bloc pub sur la pagination catégorie
   (page 2+, voir products/index.blade.php) — réutilise partials/product-card.blade.php
   tel quel (mêmes classes .product-grid-md/.red-badge-md/...), la compacité vient
   uniquement d'une grille à 9 colonnes + réduction ciblée des tailles internes. */
.grid-9-compact{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}
.grid-9-compact>[class*="col-"]{width:100%;padding:0}
.grid-9-compact .product-grid-banner-md{border-radius:8px}
.grid-9-compact .product-grid-md{border-radius:8px}
.grid-9-compact .red-badge-md{font-size:9px;padding:2px 6px;top:6px;left:6px}
.grid-9-compact .product-cart-btn-md{font-size:10px;padding:4px 8px;bottom:6px;right:6px}
.grid-9-compact .product-wishlist-btn{width:24px;height:24px}
.grid-9-compact a[style*="font-size:.875rem"]{font-size:.68rem!important;margin-bottom:.2rem!important}
.grid-9-compact div[style*="padding:.75rem 1rem 1rem"]{padding:.4rem .5rem .5rem!important}
.grid-9-compact img[alt="star"]{width:9px!important;height:9px!important}
.grid-9-compact span[style*="font-size:.72rem;color:#aaa"]{font-size:.6rem!important}
.grid-9-compact span[style*="font-weight:800;font-size:1rem"]{font-size:.78rem!important}
.grid-9-compact span[style*="font-size:.8rem;color:#aaa;text-decoration:line-through"]{font-size:.62rem!important}
/* Vendeur masqué : place trop réduite en 9 colonnes */
.grid-9-compact a[style*="display:flex;align-items:center;gap:.35rem"]{display:none}

/* === BREADCRUMB (pages internes) === */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--gray);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a{color:var(--gray)}
.breadcrumb a:hover{color:var(--primary);opacity:1}
.breadcrumb-sep{color:#c9c9cf}

/* === BOUTONS (legacy) === */
.btn-primary{background:var(--primary);color:#fff;padding:13px 24px;border-radius:6px;font-weight:600;font-size:14px}
.btn-primary:hover{opacity:.88}
.btn-accent{background:var(--primary);color:#fff;padding:13px 24px;border-radius:6px;font-weight:600;font-size:14px}
.btn-accent:hover{background:var(--primary-dark);opacity:1}
.btn-danger{background:#fee2e2;color:#dc2626;padding:10px 20px;border-radius:6px;font-weight:600;font-size:13px}
.btn-admin{background:var(--primary);color:#fff;padding:10px 18px;border-radius:6px;font-weight:600;font-size:13px}
.btn-sm{padding:8px 16px!important;font-size:13px!important}
.btn:disabled{cursor:not-allowed;opacity:.6}

/* === CARTE GÉNÉRIQUE === */
.card{background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.card-title{font-size:1.05rem;font-weight:700;color:var(--dark);margin-bottom:.75rem}

/* === FORMULAIRES === */
.form-group{margin-bottom:1rem}
.form-row{display:flex;gap:1rem;flex-wrap:wrap}
.form-row .form-group{flex:1;min-width:160px}
.form-label{display:block;font-size:.82rem;font-weight:600;color:var(--dark);margin-bottom:.4rem}
.form-control,.form-input{width:100%;padding:.65rem .85rem;border:1.5px solid var(--border);border-radius:8px;font-size:.9rem;font-family:inherit;color:var(--dark);background:#fff;outline:none;transition:.2s}
.form-control:focus,.form-input:focus{border-color:var(--primary)}
textarea.form-control{resize:vertical}

/* === BADGES === */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:50px;font-size:11px;font-weight:700;background:var(--light);color:var(--dark)}
.badge-sale{background:#fee2e2;color:#dc2626}
.badge-new{background:#d1fae5;color:#059669}
.badge-cond{background:#e0e7ff;color:#4338ca}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-yellow{background:#fef3c7;color:#b45309}
.badge-gray{background:#F2F4F6;color:var(--gray)}
.badge-green{background:#d1fae5;color:#059669}
.badge-count{background:var(--primary);color:#fff;border-radius:50%;min-width:18px;height:18px;padding:0 4px;font-size:10px;display:inline-flex;align-items:center;justify-content:center}
.fsh-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;font-size:11px;font-weight:700}
.fsh-badge-skin{background:var(--primary);color:#fff}
.fsh-badge-green{background:#d1fae5;color:#059669}
.fsh-badge-gray{background:#F2F4F6;color:var(--gray)}

/* === ALERTES === */
.alert{padding:12px 16px;border-radius:8px;font-size:13px;margin-bottom:1rem}
.alert-error{background:#fee2e2;color:#991b1b}

/* === ÉTAT VIDE === */
.fsh-empty{text-align:center;padding:64px 20px;background:#fff;border-radius:12px}
.fsh-empty-icon{font-size:3rem;margin-bottom:12px}
.fsh-empty h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:6px}

/* === BARRE DE FILTRES (listings) === */
.fsh-filter-bar{display:flex;gap:12px;background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:24px;flex-wrap:wrap}
.fsh-input{padding:11px 14px;border:1.5px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;color:var(--dark);background:#fff;outline:none;transition:.2s}
.fsh-input:focus{border-color:var(--primary)}

/* === SIDEBAR FILTRES (produits) === */
/* Une catégorie avec beaucoup d'attributs filtrables (ex. Animalerie : Animal
   concerné + Marque + Couleur + Matière + "Plus de caractéristiques") rend la
   colonne de filtres bien plus haute que la grille de résultats quand peu de
   produits correspondent — grand vide disgracieux à droite. `position:sticky`
   suffit : la sidebar suit le défilement de la page au lieu de rester un bloc
   figé disproportionné, et le vide se remplit naturellement en scrollant.
   Première tentative avec max-height + overflow-y:auto (double défilement,
   un dans la page ET un dans la boîte) : retour utilisateur négatif, les
   filtres du bas restaient masqués derrière un ascenseur imbriqué peu
   naturel — retiré, un seul défilement (celui de la page) suffit. */
.fsh-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;align-self:start}
.fsh-sidebar-box{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.fsh-sidebar-title{font-size:13px;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.fsh-sidebar-label{font-size:12px;color:var(--gray);display:block;margin-bottom:4px}

/* === GRILLES LISTINGS === */
.fsh-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fsh-sellers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
/* Retour Halick (29-08-2026, 3e passage) : "les cartes doivent toutes être la même
   taille que la carte SnowDémo [...] fais en sorte que ce soit la taille par défaut
   quoi qu'il en soit" — jusqu'ici align-items:stretch étirait chaque card à la hauteur
   de sa voisine de ligne la plus haute (donc variable d'une ligne à l'autre), et seule
   la card en mode "fond plein" y échappait (align-self:flex-start, voir
   sellers/index.blade.php) en gardant sa hauteur naturelle — plus compacte, ce qui la
   faisait paraître "rétrécie" à côté des autres. Demande inversée ici : hauteur FIXE et
   UNIFORME pour toutes les cards (mesurée sur la hauteur naturelle d'une card premium
   "fond plein" typique), peu importe le thème actif. .seller-card-cta est sorti du flux
   (position:absolute, voir règle plus bas) pour rester toujours visible en bas de la
   card même quand le contenu au-dessus (badges, description...) dépasserait cette
   hauteur fixe — seul ce surplus est alors masqué (overflow:hidden), jamais le bouton. */
.fsh-sellers-grid .seller-card{height:460px;padding-bottom:76px}
/* Retour Halick (29-08-2026, 4e passage) : "le bouton déborde sur la droite" — le lien
   CTA garde en inline style `width:100%` (hérité du markup d'origine, pensé pour un
   bouton en flux normal). Or pour une boîte en position:absolute, si `left`, `right` ET
   `width` sont tous les trois renseignés à la fois, la spec CSS ignore `right` et
   recalcule la boîte à partir de `left`+`width` : avec width:100% (= 100% de la largeur
   du containing block .seller-card, pas de l'espace entre les 24px de marge), le bouton
   débordait donc largement à droite de la card. width:auto!important ci-dessous laisse
   `left:24px`/`right:24px` déterminer seuls la largeur du bouton, comme prévu. */
.fsh-sellers-grid .seller-card-cta{position:absolute;left:24px;right:24px;bottom:24px;width:auto!important;margin-top:0!important;z-index:2}
/* Retour Halick (29-08-2026, 18e correctif) : "grille seulement sur mobile" —
   le 17e correctif (grille multi-colonnes) impactait aussi desktop/tablette.
   Revert : desktop/tablette retrouvent l'empilement 1 colonne de cards
   horizontales d'origine ; la grille 2 colonnes + carte verticale (17e
   correctif) est réservée au mobile, voir @media(max-width:576px) plus bas. */
.fsh-events-grid{display:flex;flex-direction:column;gap:14px}

/* === PAGINATION === */
.fsh-pagination,.pagination{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.fsh-pagination a,.fsh-pagination span,.pagination a,.pagination span{min-width:36px;height:36px;padding:0 6px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;font-weight:600;color:var(--dark);background:#fff;border:1px solid var(--border)}
.fsh-pagination a:hover{border-color:var(--primary);color:var(--primary)}
.fsh-pagination .active,.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* === CARTE ÉVÉNEMENT ===
   Retour Halick (29-08-2026, 18e correctif) : desktop/tablette repassent à la
   ligne horizontale d'origine (bandeau date 88px à gauche + corps + flèche à
   droite) — seule la version mobile (≤576px) garde la carte verticale du 17e
   correctif (bandeau date en haut, corps, CTA en bas), voir @media plus bas. */
.event-card{display:flex;align-items:stretch;background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;transition:.3s cubic-bezier(.4,0,.2,1)}
.event-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.1);transform:translateY(-4px)}
.event-date-block{flex-shrink:0;width:88px;background:var(--primary);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.event-date-block .day{font-size:1.6rem;font-weight:800;line-height:1}
.event-date-block .month{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-top:4px}
.event-body{flex:1;padding:18px 20px;min-width:0}
.event-card-arrow{display:flex;align-items:center;justify-content:flex-end;padding:16px 20px;flex-shrink:0}

/* === CARTE BLOG === */
/* Retour Halick (29-08-2026) : "sur pages blog mobile amelioré la grille de
   card, elle sont resséré" — blog/index.blade.php posait grid-template-columns
   EN STYLE INLINE sur .blog-grid (repeat(3,1fr)), qui l'emportait toujours sur
   les règles responsive existantes de ce fichier (.blog-grid en 2 colonnes dès
   992px puis 576px, cf. plus bas "RESPONSIVE — PAGES INTERNES") : un style
   inline a une spécificité CSS plus forte qu'une classe, même dans une media
   query, sans !important (même famille de bug déjà rencontrée sur
   #quick-actions-grid, cf. commentaire plus bas). Résultat : la grille restait
   figée à 3 colonnes sur mobile, cartes écrasées à ~120px de large. La valeur
   de base (3 colonnes desktop) est donc déplacée ici, en CSS normal — les
   media queries existantes reprennent alors naturellement la main sur petit
   écran, plus besoin d'!important puisque même spécificité (classe vs classe).
   Inline style de la vue simplifié à "display:grid;gap:20px" en conséquence. */
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.blog-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:.3s cubic-bezier(.4,0,.2,1)}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.1)}
.blog-card-img{position:relative;height:170px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
.blog-card-body{padding:16px 18px}

/* === FICHE PRODUIT === */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:1.5rem}
.product-info-price{font-size:1.75rem;font-weight:800;color:var(--dark)}
.stars-row{color:#f59e0b;font-size:.95rem}
.qty-selector{display:inline-flex;align-items:center;border:1.5px solid var(--border);border-radius:6px;overflow:hidden}
.qty-btn{width:38px;height:38px;background:var(--light);border:none;font-size:1.1rem;cursor:pointer;color:var(--dark)}
.qty-btn:hover{background:var(--border)}
.qty-input{width:52px;height:38px;border:none;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;font-size:.9rem;font-family:inherit}
.product-wishlist-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:.2s}
.product-wishlist-btn:hover{background:var(--primary)}
.product-wishlist-btn:hover svg path{stroke:#fff}

/* === CARTE VENDEUR (listing boutiques) === */
.seller-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block}
.seller-avatar-placeholder{width:64px;height:64px;border-radius:50%;background:var(--primary);color:#fff;font-size:1.4rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.verified-badge{display:inline-flex;align-items:center;align-self:center;gap:4px;background:#d1fae5;color:#059669;font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;margin-bottom:10px;flex:0 0 auto;width:fit-content}

/* === MISES EN PAGE À COLONNES (fiche produit / article / événement) === */
.products-layout,.article-layout{align-items:start}

/* === RESPONSIVE — PAGES INTERNES === */
@media(max-width:992px){
  .product-detail{grid-template-columns:1fr}
  .fsh-products-grid,.fsh-sellers-grid,.grid-4,.grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-9-compact{grid-template-columns:repeat(5,minmax(0,1fr))}
  .products-layout{grid-template-columns:1fr!important}
  .article-layout{grid-template-columns:1fr!important}
  .fsh-sidebar{margin-bottom:20px;position:static}
  /* Retour Halick (29-08-2026, captures mobile "Actions rapides") : la grille
     "Actions rapides" du dashboard vendeur (id="quick-actions-grid", jusqu'à 4
     colonnes en style inline selon Seller\DashboardController — voir
     seller/dashboard.blade.php) n'avait AUCUNE règle responsive : sur mobile,
     les libellés de groupe ("CATALOGUE"/"VENTES"/"MARKETING"/"FINANCE") et les
     icônes se chevauchaient/tronquaient, illisibles. !important nécessaire pour
     passer devant le style inline (grid-template-columns posé en ligne). */
  #quick-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Retour Halick (29-08-2026) : "je voudrais pouvoir cliquer directement sur la
   carte d'une boutique pour changer la gestion d'une a l'autre" — retour visuel
   au survol pour signaler que toute la carte (pas seulement "Gérer →") est
   cliquable, voir seller/dashboard.blade.php (lien plein-carte en overlay). */
.shop-switch-card{transition:box-shadow .15s,transform .15s}
.shop-switch-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.1);transform:translateY(-2px)}
@media(max-width:576px){
  /* Retour Gérard (26/07) : "les images cards sont trop petites (pages blog), fais
     une grille similaire pour la version mobile sur Categories, Boutique et Vitrines,
     Page d'accueil plutôt qu'un empilement 1 colonne" — ces grilles de cartes gardent
     2 colonnes même sur petit mobile (contrairement à .products-layout, la mise en
     page sidebar-filtres + contenu, qui elle reste en 1 colonne, cf. plus haut). */
  .fsh-products-grid,.fsh-sellers-grid,.grid-4,.grid-5,.grid-3,.grid-2,.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-9-compact{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Retour Halick (29-08-2026, 18e correctif) : "grille seulement sur mobile" —
     .fsh-events-grid repasse en grille (2 colonnes) + .event-card en carte
     verticale UNIQUEMENT ici (≤576px) ; desktop/tablette gardent l'empilement
     1 colonne de cards horizontales défini plus haut, hors media query. */
  .fsh-events-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .event-card{flex-direction:column}
  .event-date-block{width:100%;flex-direction:row;gap:8px;padding:10px}
  .event-body{flex:0 1 auto;padding:14px}
  .event-card-arrow{padding:0 14px 14px;margin-top:auto}
  /* Retour Halick (29-08-2026) : sur petit mobile, même 2 colonnes de libellés
     "Actions rapides" (souvent longs, ex. "Wallet Micro-Paiement") restent
     illisibles — 1 seule colonne ici (contrairement aux grilles de cartes
     ci-dessus, qui gardent volontairement 2 colonnes). */
  #quick-actions-grid{grid-template-columns:1fr!important}
  /* Retour Halick (29-08-2026, captures mobile dashboard vendeur) : "les boutons
     [...] sont l'un en dessous de l'autre mal aligné, il doit être 2 sur la même
     ligne l'autre en dessous alignée au départ" — le flex-wrap naturel empilait
     chaque bouton d'en-tête (Paramètres/Premium/Vedette/Voir ma boutique) un par
     un selon sa longueur de texte ; grille 2 colonnes forcée à la place, chaque
     bouton remplit sa cellule. Inchangé au-dessus de 576px (toujours display:flex
     en ligne, voir seller/dashboard.blade.php). */
  .dash-header-btn-grid{display:grid!important;grid-template-columns:repeat(2,1fr);gap:.5rem}
  .dash-header-btn-grid>a{width:100%;justify-content:center;text-align:center}
  /* "et le badge violet aussi" — même règle d'alignement : le carré desktop
     (max-width:280px, pensé pour se caler à droite du bandeau d'en-tête) passe en
     pleine largeur sur mobile au lieu de rester tronqué à 280px. */
  .dash-header-promo{max-width:100%!important}
  /* Retour Halick (29-08-2026) : "Boutique & Boutique Spécialisée faire un
     bandeau déroulant sur une ligne" — sur mobile, les cartes boutique
     principale/Boutiques Spécialisées/+Nouvelle boutique passent d'un
     empilement vertical (1 carte par ligne) à un bandeau horizontal défilable
     au doigt, une seule ligne, comme dans une galerie marchande. Chaque carte
     garde une largeur fixe (elle ne peut plus se rétrécir comme en grid
     auto-fill) pour rester lisible pendant le défilement. */
  .shops-gallery-grid{display:flex!important;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:.5rem;gap:1rem!important}
  .shops-gallery-grid>*{flex:0 0 220px;scroll-snap-align:start}
  .fsh-filter-bar{padding:10px}
  .fsh-filter-bar form{flex-direction:row!important;flex-wrap:wrap;gap:8px}
  .fsh-filter-bar form input[type="text"]{width:100%;flex:1 1 100%}
  .fsh-filter-bar form select{flex:1;min-width:130px}
  .fsh-filter-bar form button{white-space:nowrap}
}

/* ── Panier ─────────────────────────────────────────────── */
.cart-table { width:100%; border-collapse:collapse; }
.cart-table th { text-align:left; font-size:.75rem; font-weight:700; color:var(--gray); padding:.5rem .75rem; border-bottom:2px solid var(--border); text-transform:uppercase; letter-spacing:.04em; }
.cart-table td { padding:.85rem .75rem; border-bottom:1px solid var(--border); vertical-align:middle; font-size:.9rem; }
.cart-table tr:last-child td { border-bottom:none; }
.qty-input { border:1px solid var(--border); border-radius:6px; padding:4px 8px; text-align:center; font-size:.9rem; }

.cart-summary { background:#fff; border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); height:fit-content; position:sticky; top:80px; }

/* Mobile : résumé panier en dessous du tableau, bouton toujours visible */
@media(max-width:768px) {
  .cart-page-grid { display:flex !important; flex-direction:column !important; gap:1rem !important; }
  .cart-summary { position:static; }
  .cart-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cart-table th, .cart-table td { white-space:nowrap; }
  .checkout-grid { display:flex !important; flex-direction:column !important; gap:1rem !important; }

  /* Retour Halick (23-08-2026, PDF "contrôle d'une commande multiple") : "Panier
     Problème Réduire Quantité affichée (Portable)" — le tableau du panier devient
     défilable horizontalement ci-dessus (overflow-x:auto) ; sur mobile, un doigt qui
     touche le stepper −/+ à 28px (sous le minimum tactile recommandé de 44px) glisse
     facilement et déclenche le SCROLL du tableau au lieu du clic sur le bouton, d'où
     la quantité qui ne change pas alors que l'affichage semble "bouger". On agrandit
     les boutons et on désactive le geste de défilement AU-DESSUS d'eux spécifiquement
     (touch-action:manipulation), sans toucher au reste du tableau. */
  .cart-table .qty-stepper-btn { width:40px !important; height:40px !important; font-size:1.15rem !important; touch-action:manipulation; }
  .cart-table form[action*="cart"] { touch-action:pan-y; }
}

/* ============================================================
   RESPONSIVE GÉNÉRIQUE — Retour Halick (31/07) "Le responsive design
   doit être impeccable sur toute la plateforme".

   Deux familles de mise en page à colonnes fixes revenaient, en style
   inline, sur des dizaines de pages (formulaires, panneaux latéraux
   résumé/infos vendeur et admin) sans jamais avoir de repli mobile —
   chacune débordait ou écrasait ses champs sous ~640-900px. Deux
   classes génériques, ajoutées à l'attribut class= de chaque grille
   concernée en plus du style inline existant (même principe déjà en
   place pour .cart-page-grid/.checkout-grid ci-dessus : la classe
   avec !important prime sur le style inline sans avoir à le retirer).
   ============================================================ */

/* Grilles de champs de formulaire (adresse, inscription, réservation,
   paiement, admin...) : quel que soit le nombre de colonnes inline
   (1fr 1fr / 2fr 1fr / 2fr 1fr 1fr / 1fr 1fr 80px auto...), repli à
   1 seule colonne sous 640px pour éviter des champs trop étroits. */
@media(max-width:640px){
  .form-grid-cols{ grid-template-columns:1fr !important; }
  /* Ligne "déclinaison" produit (nom/valeur/stock/supprimer) — même classe
     appliquée par seller/products/create.blade.php à la fois sur la ligne
     statique et sur celles clonées en JS (addVariant()). */
  .variant-row{ grid-template-columns:1fr !important; }
}

/* Mises en page "contenu + colonne latérale de largeur fixe en px"
   (solde vendeur, détail commande, stock, KYC/litiges/emails admin...) :
   repli à 1 colonne sous 900px, même principe que .products-layout /
   .article-layout déjà en place pour les sidebars de filtres (992px). */
@media(max-width:900px){
  .sidebar-detail-grid{ grid-template-columns:1fr !important; }
}

/* Tableaux (générique, toute la plateforme) : de nombreuses pages
   vendeur/admin affichent des <table> larges (produits, commandes,
   stock, employés...) sans aucun traitement mobile — elles débordaient
   la page au lieu de défiler proprement. Tout <table> devient
   horizontalement défilable sous 768px plutôt que de casser la mise
   en page ; sans white-space:nowrap ici (contrairement à .cart-table
   qui le force pour ses boutons/stepper), pour laisser le texte des
   autres tableaux se replier naturellement quand c'est possible. */
@media(max-width:768px){
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== BANNIÈRES PUBLICITAIRES ===== */

/* Règle globale : toutes les images bannières s'adaptent à leur container */
[data-ad-slot] img,[data-ad-slot] video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:center center;
}

/* ── Bloc 2 accueil : la grande image (slot D) doit remplir exactement la
   même hauteur que la colonne E/F/G/H empilée à côté (2 lignes), pour que
   le bas des deux colonnes coïncide (cf. maquette de référence) — sans quoi
   la hauteur naturelle de D (aspect carré déclaré) dépasse souvent la somme
   des 2 lignes de petites bannières, laissant une bande vide dessous.
   Retour Gérard (07/08) : la mesure JS (syncBloc2HeroHeight(), y compris sa
   version ResizeObserver) restait intermittente — bonne au premier chargement
   à froid (navigation privée), cassée après une réactualisation normale (D
   retombant sur la hauteur naturelle de son image, plus grande, faute de
   style inline appliqué à temps). Éliminé la dépendance au JS : hauteur fixée
   en CSS pur.
   Retour Halick (08/08) : "sur products?page=2 la mosaïque est mal affichée
   (image coupée)" — la valeur 560px (= 2×275+10, tuning fait UNIQUEMENT pour
   la largeur de colonne de l'accueil, où .bloc2-outer-grid occupe le
   container plein largeur) ne "tenait" que sur l'accueil. products/
   index.blade.php inclut ce même partial (bloc2-mosaique) dans sa colonne
   principale à CÔTÉ de la sidebar de filtres (.fsh-sidebar), donc nettement
   plus étroite — même hauteur (560px) appliquée à une colonne bien plus
   étroite : object-fit:cover doit alors recadrer BEAUCOUP plus (crop
   horizontal sévère, texte des bannières coupé).
   Premier essai : aspect-ratio:13/10 (dérivé de la largeur/hauteur combinée
   native de la ligne E(250×250)+F(400×250) = 650×500) — proportionnel à la
   largeur réelle de la colonne, correct en théorie MAIS retour Halick
   (08/08, suite, capture mobile) : "le responsive mobile aussi pour le meme
   bloc" — sur mobile, D s'effondrait à une taille quasi nulle (minuscule
   logo) ET les 4 petites bannières perdaient leurs images (seule la légende
   "Cause partenaire" restait visible, flottant dans un espace vide). Cause :
   dans cette chaîne de conteneurs imbriqués (grid > flex > grid > flex >
   ad-fade-slot > div > a > img), la propriété aspect-ratio n'est pas
   toujours traitée comme une taille "définie" par tous les moteurs mobiles
   pour la résolution des height:100% en cascade des DESCENDANTS (contrairement
   à une hauteur explicite ou au padding-top en %, technique bien plus
   ancienne et éprouvée) — la chaîne entière retombait donc sur 'auto'/0.
   Remplacé par la technique "boîte à ratio" classique (height:0 +
   padding-top en %, appuyée sur la largeur, contenu en position:absolute
   pleine boîte) : same résultat proportionnel que aspect-ratio, mais support
   navigateur nettement plus robuste (y compris anciens WebKit mobiles),
   car padding-top:% calcule une hauteur immédiatement CONCRÈTE en pixels
   (pas une "taille préférée" dont le statut "définie" dépend du moteur).
   Note : le height:100% d'un enfant en flux normal se résout contre la
   propriété `height` du parent (littéralement 0 ici), PAS contre l'espace
   ajouté par le padding — un enfant position:absolute est nécessaire pour
   se dimensionner sur la boîte de padding réelle. !important requis car le
   premier enfant réel (partials/ad-banner.blade.php) porte déjà
   style="position:relative" en inline, qui gagnerait sinon sur cette règle
   externe. */
.bloc2-hero-D{position:relative;height:0;padding-top:76.92%}
.bloc2-hero-D>div{position:absolute!important;top:0;left:0;right:0;bottom:0;height:100%}
.bloc2-hero-D .ad-fade-slot{height:100%}
.bloc2-hero-D .ad-fade-slot>div{height:100%}
.bloc2-hero-D a{height:100%;display:block}
.bloc2-hero-D img,.bloc2-hero-D video{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}

/* Retour Gérard (07/08, suite) : "il reste un peu d'espace blanc en dessous
   des 4 petites bannières" — #bloc2-hero-D et #bloc2-small-grid sont deux
   items de la même ligne d'un CSS Grid parent (align-items:stretch) : D a une
   hauteur explicite (560px, ci-dessus) et #bloc2-small-grid, sans hauteur
   propre, est bien étiré à 560px par ce stretch (confirmé : l'inspecteur
   affiche 560px pour les deux). MAIS #bloc2-small-grid est lui-même un
   conteneur flex (flex-direction:column) contenant 2 lignes (E/F puis G/H) —
   et un conteneur flex étiré par SON PARENT ne fait pas automatiquement
   grandir SES PROPRES enfants pour combler l'espace (align-items:stretch ne
   s'applique qu'entre un parent flex/grid et ses enfants directs, pas en
   cascade) : les 2 lignes gardaient leur hauteur de contenu naturelle,
   laissant le surplus en espace vide tout en bas de la boîte de 560px.
   flex:1 force les 2 lignes à se partager équitablement toute la hauteur
   disponible de #bloc2-small-grid, quelle que soit sa hauteur réelle. */
#bloc2-small-grid>div{flex:1 1 0;min-height:0}

/* ── Bloc 2 accueil : 4 petites images toutes à 275px, recadrées (cover) ──
   Retour Gérard (07/08) : "espace blanc en dessous de la mosaïque" persistant
   même après le correctif JS (ResizeObserver) — cause réelle trouvée ici, pas
   côté JS. Cette règle était scopée à .bloc2-outer (commit "CSS ad-home-block
   limité à .bloc2-outer - ne plus affecter les bannières des autres pages"),
   mais AUCUN élément du HTML réel (voir partials/bloc2-mosaique.blade.php)
   ne porte cette classe — .ad-home-block n'est utilisée QUE dans ce partial
   (vérifié : aucune autre page ne l'utilise, le risque de fuite motivant ce
   scoping n'existe donc pas), donc la règle ne s'appliquait plus jamais nulle
   part depuis ce commit. Sans hauteur fixe, chaque petite bannière prenait la
   hauteur dictée par le ratio de SON image (variable selon le contenu chargé,
   pas seulement une question de timing/cache navigateur) — la somme des 2
   lignes pouvait donc être plus courte que la hauteur mesurée par
   syncBloc2HeroHeight() à un instant donné, laissant un vide sous D même avec
   un JS de synchronisation correct. Rescopé sur #bloc2-small-grid, l'ID du
   conteneur qui existe réellement dans le partial. */
#bloc2-small-grid .ad-home-block{
  height:100%;
  overflow:hidden;
  border-radius:var(--radius,10px);
}
/* Retour Gérard (07/08, suite) : boîtes E/F/G/H parfaitement alignées sur D
   en hauteur (confirmé par mesure DOM à 2 reprises : bottom de D = bottom de
   #bloc2-small-grid = bottom de la ligne G/H, au pixel près), mais "il reste
   un peu d'espace blanc"/mosaïque "non compacte" malgré tout, visible cette
   fois DANS/EN BAS de chaque carte plutôt qu'entre les boîtes elles-mêmes —
   cause n°1 (déjà corrigée ci-dessous) : object-fit:contain préserve le ratio
   de CHAQUE image et laisse des bandes vides en haut/bas dès que ce ratio ne
   correspond pas exactement à celui de sa boîte.
   Cause n°2 (trouvée ensuite, capture non coupée par le scroll à l'appui) :
   même en cover, l'image ne remplissait TOUJOURS PAS sa boîte de 275px — parce
   que height:100% sur <img> ne se résout QUE si TOUTE la chaîne de parents
   entre l'image et #bloc2-small-grid .ad-home-block a elle-même une hauteur
   définie (pas juste "height:100%" en style inline sur UN SEUL de ces parents,
   comme partials/ad-banner-content.blade.php le fait déjà) — sinon le
   pourcentage est invalide et le navigateur retombe sur 'auto' (hauteur
   intrinsèque de l'image). C'est exactement le traitement déjà appliqué à
   .bloc2-hero-D ci-dessus (>div, .ad-fade-slot, a — chaîne complète), jamais
   répliqué ici. Complété : chaque maillon de la chaîne (le wrapper de
   partials/ad-banner.blade.php, .ad-fade-slot, puis le contenu réel — <a> pour
   une bannière simple, ou le mini-grid 2 colonnes pour une bannière double
   avec image2) reçoit désormais une hauteur définie via flex (flex:1 1 0 sur
   tout sauf le dernier enfant — la légende "Cause partenaire"/"Publicité", qui
   doit elle rester à sa hauteur naturelle, pas être étirée).
   Retour Halick (08/08) : "products?page=2, mosaïque mal affichée (image
   coupée)" — .ad-home-block passe de height:275px (fixe, calé sur la largeur
   de colonne de l'accueil uniquement) à height:100%, la chaîne restant
   entièrement définie (son parent direct, la ligne E/F ou G/H, a une hauteur
   flex:1 1 0 définie, elle-même dérivée de #bloc2-small-grid étiré sur la
   hauteur désormais proportionnelle de .bloc2-hero-D — voir aspect-ratio
   plus haut) donc s'adapte à n'importe quelle largeur de colonne (accueil,
   page produits avec sidebar plus étroite, mobile). */
#bloc2-small-grid .ad-home-block>div{height:100%}
#bloc2-small-grid .ad-home-block .ad-fade-slot{height:100%}
#bloc2-small-grid .ad-home-block .ad-fade-slot>div{
  height:100%;
  display:flex;
  flex-direction:column;
}
#bloc2-small-grid .ad-home-block .ad-fade-slot>div>:not(:last-child){
  flex:1 1 0;
  min-height:0;
  overflow:hidden;
}
#bloc2-small-grid .ad-home-block a{height:100%;display:block}
#bloc2-small-grid .ad-home-block img,
#bloc2-small-grid .ad-home-block video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

/* Retour Gérard (07/08, suite) : "en corrigeant nous avons cassé le responsive
   sur mobile" — les hauteurs fixes ajoutées ci-dessus pour aligner D sur la
   colonne E/F/G/H (D:560px, petites bannières:275px) n'avaient aucun repli
   mobile : sous 768px, la grille 2 colonnes (.bloc2-outer-grid, D | E-F-G-H)
   se comprimait dans une largeur d'écran étroite tout en gardant des hauteurs
   pensées pour desktop.
   Premier essai : empiler D au-dessus de la colonne E/F/G/H (1 seule colonne)
   sous 768px — rejeté par Gérard ("je souhaite conserver la mosaïque avec la
   grande image à gauche") ET cassait #bloc2-small-grid par effet de bord :
   sans grille 2 colonnes parente pour l'étirer (align-items:stretch), sa
   hauteur redevenait 'auto' (dépendante du contenu) ; or #bloc2-small-grid>div
   utilise flex:1 1 0 (flex-basis:0) — un conteneur flex en hauteur 'auto' avec
   des enfants en flex-basis:0 n'a aucun espace libre défini à distribuer, les
   2 lignes (E/F et G/H) s'effondraient quasiment à hauteur nulle tout en
   laissant leurs propres enfants (.ad-home-block, hauteur fixe) déborder par
   dessus — d'où les bannières visiblement superposées sur la capture mobile.
   Corrigé en gardant la grille 2 colonnes à TOUTE largeur d'écran (D reste à
   gauche, comme demandé) : #bloc2-small-grid garde donc bien une hauteur
   explicite via le stretch du parent, flex:1 1 0 redevient valide. Un
   media-query dédié réduisait alors les hauteurs fixes en proportion pour un
   écran étroit (200px / 95px, "même ratio 2×95+10=200 que D").
   Retour Halick (08/08) : ce media-query devient inutile — .bloc2-hero-D
   (aspect-ratio:13/10) et #bloc2-small-grid .ad-home-block (height:100%,
   voir plus haut) sont désormais PROPORTIONNELS à la largeur réelle de la
   colonne à tout instant, y compris en mobile, sans valeur fixe à recalculer
   par breakpoint — supprimé (comportement identique, plus robuste). */

/* ── Pages secondaires : hauteur fixe, tous les enfants héritent ── */

/* G grande bannière */
.ad-layout-G{height:250px;overflow:hidden;margin-bottom:1.5rem}
.ad-layout-G *{max-height:250px}
.ad-layout-G img,.ad-layout-G video{width:100%;height:250px;object-fit:contain;object-position:center center;display:block}

/* H+F paires côte à côte */
.ad-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1rem}
.ad-pair-cell{height:200px;overflow:hidden;border-radius:var(--radius,10px)}
.ad-pair-cell *{max-height:200px}
.ad-pair-cell img,.ad-pair-cell video{width:100%;height:200px;object-fit:contain;object-position:center center;display:block}
@media(max-width:576px){.ad-pair-cell{height:130px}.ad-pair-cell *,.ad-pair-cell img,.ad-pair-cell video{height:130px;max-height:130px}}

/* C et D page produits — contain pour voir image entière */
.ad-products-C{overflow:hidden}
.ad-products-C img,.ad-products-C video{width:100%;height:auto;max-height:300px;object-fit:contain;display:block}

.ad-products-D{overflow:hidden}

/* Retour Halick (12-08-2026) : pages légales (CGU/CGV/mentions/confidentialité/rétractation)
   désormais éditées via Filament RichEditor (LegalPageResource) au lieu de HTML codé en dur
   avec styles inline par balise — ces règles reproduisent le rendu visuel d'origine pour le
   HTML brut que produit l'éditeur (h2/h3/p/a/ul/ol simples, sans style inline). */
.legal-content h2{font-size:1.1rem;font-weight:700;margin:1.5rem 0 .75rem}
.legal-content h3{font-size:1rem;font-weight:700;margin:1rem 0 .5rem}
.legal-content p{margin:0 0 1rem}
.legal-content ul,.legal-content ol{margin:0 0 1rem 1.25rem}
.legal-content a{color:var(--primary)}
.ad-products-D img,.ad-products-D video{width:100%;height:auto;max-height:250px;object-fit:contain;display:block}