/* ============================================================
   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}
.home-hero-banner .banner{width:100%;display:block;height:600px;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}
@media(min-width:993px){
  .hero-rotator-slide::before,
  .home-hero-banner:not(.hero-banner-rotator)::before{
    content:'';position:absolute;inset:0;z-index:1;border-radius:18px;pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 28%, rgba(255,255,255,.32) 50%, rgba(255,255,255,0) 68%);
  }
}
/* Visuels autoporteurs (titre + CTA déjà composés dans l'image) : pas de voile,
   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::before{content:none}
.hero-rotator-slide.hero-slide-no-veil .banner{height: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 === */
.seller-card{background:#fff;border-radius:18px;border:1px solid #F0F0F2;padding:24px;text-align:center;transition:.3s cubic-bezier(.4,0,.2,1)}
.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}
  .top-bar-actions{gap:10px!important;font-size:13px!important;justify-content:center!important}
  .top-header-section{padding:6px 0!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){
  .home-hero-banner .banner{max-height:320px;object-fit:cover}
  .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-banner .banner{max-height:240px}
  .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}
.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 === */
.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}

/* === CARTE BLOG === */
.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;gap:4px;background:#d1fae5;color:#059669;font-size:11px;font-weight:700;padding:3px 10px;border-radius:50px;margin-bottom:10px}

/* === 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}
}
@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))}
  .event-card{flex-direction:column}
  .event-date-block{width:100%;flex-direction:row;gap:8px;padding:10px}
  .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; }
}

/* ============================================================
   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}