/*
Theme Name: Storefront Child
Template: storefront
Author: RANDM BELGIUM
Version: 1.0
*/

/* ========================================================
   RANDM BELGIUM — STYLE.CSS (thème enfant) — COMPACT
   Garde le fonctionnement, supprime doublons, clarifie la structure.
   1) Base & accessibilité
   2) Woo: éléments globaux à masquer
   3) Header commun
   4) Header mobile (≤1023px)
   5) Header desktop (≥1024px)
   6) Nav RGB (≥992px)
   7) Mega‑menu (≥1024px) — full‑width + fixes intégrés
   8) Anti "ghost" / progress / sélection
   ======================================================== */

/* ===================== 1) BASE & ACCESSIBILITÉ ===================== */
.site-header .main-navigation a:focus,
.woocommerce-tabs a:focus,
.woocommerce ul.products li.product a:focus,
.site-header .site-branding a:focus,
html body a:focus,
html body button:focus{outline:none!important;box-shadow:none!important}

/* Cacher titres WooCommerce génériques */
.woocommerce-products-header,
.woocommerce-page-title,
.woocommerce-account .entry-header,
.woocommerce-cart .entry-header,
.entry-header{display:none!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}

/* Masquer la recherche sur desktop */
@media (min-width:769px){
  .site-header .product-search,.widget_product_search{display:none!important}
}

/* ================= 2) WOO — ÉLÉMENTS GLOBAUX À MASQUER ================ */
header .site-header-cart,
header .header-cart,
header .menu-item.cart,
header a.cart-contents,
header [class*="mini-cart"]{display:none!important}

/* ========================== 3) HEADER COMMUN ========================== */
.rb-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.rb-center{text-align:center}
.rb-center img,.rb-center .custom-logo img{max-height:140px;height:auto;width:auto}
@media (min-width:1024px){.rb-center{transform:translateY(-15px)}}
.rb-left .main-navigation,.rb-right .site-header-cart{margin:0}

/* Badge panier */
.rb-cart-link{position:relative;display:inline-flex;align-items:center}
.rb-cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#e11d48;color:#fff;font:11px/16px Arial,sans-serif;text-align:center}

/* Focus visible icônes */
.rb-menu-toggle:focus-visible,.rb-cart-link:focus-visible{outline:2px solid #000;outline-offset:2px}

/* ===================== 4) HEADER — MOBILE (≤1023px) ===================== */
@media (max-width:1023px){
  /* Layout */
  .rb-header{position:relative;display:flex!important;align-items:center;justify-content:space-between;gap:.5rem}
  .rb-left,.rb-right{flex:0 0 56px;display:flex;align-items:center;justify-content:center}
  .rb-center{flex:1;display:flex;justify-content:center}

  /* Logo mobile */
  .site-header .site-branding img,.site-header .custom-logo img{max-height:56px;height:auto;width:auto}

  /* Toggle natif off + base nav */
  .rb-left{position:relative}
  .rb-left .main-navigation .menu-toggle{display:none!important}
  .rb-left .main-navigation ul.menu{display:none}

  /* Panneau (quand .toggled sur .main-navigation) */
  .rb-left .main-navigation.toggled{position:absolute;top:calc(100% + 8px);left:0;width:clamp(260px,86vw,420px);background:#fff;border:1px solid #f0f0f0;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.12);padding:10px;z-index:9990;transform-origin:top left;transform:translateY(-6px) scale(.96);opacity:0;pointer-events:none;transition:transform .18s cubic-bezier(.2,.7,.2,1),opacity .18s cubic-bezier(.2,.7,.2,1)}
  .rb-left .main-navigation.toggled ul.menu{display:flex!important;flex-direction:column;gap:6px;margin:0;padding:4px 0}
  .rb-left .main-navigation.toggled ul.menu>li>a{display:block;padding:12px 14px;border-radius:10px;font-size:16px;line-height:1.2}
  .rb-left .main-navigation.toggled ul.menu>li>a:hover{background:#f7f7fa}
  .rb-left .main-navigation.toggled{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}

  /* Overlay */
  .rb-header:has(.main-navigation.toggled)::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:9980}

  /* Icônes (menu / panier) */
  .rb-menu-toggle,.rb-cart-link{display:flex!important;align-items:center;justify-content:center;width:44px!important;height:44px!important;padding:0!important;border:0;background:none;line-height:1;cursor:pointer}
  .rb-menu-toggle svg,.rb-cart-link svg{display:block!important;width:26px!important;height:26px!important;fill:currentColor!important;color:#000!important}
  .rb-menu-toggle:focus,.rb-menu-toggle:active{outline:none!important;box-shadow:none!important;background:none!important}

  /* Supprime l’espace fantôme Storefront */
  .site-header{padding-top:6px!important;padding-bottom:6px!important;margin-bottom:0!important;border-bottom:0!important}
  .site-header .col-full{padding-top:0!important;padding-bottom:0!important}
  .storefront-primary-navigation{display:none!important;height:0!important;margin:0!important;padding:0!important}

  /* Économie d’anim mobile */
  @media (prefers-reduced-motion:reduce){.rb-left .main-navigation.toggled{transition:none}}

  /* Masque images sous‑catégories dans le panneau */
  .rb-left .main-navigation .rb-subcats,
  .rb-left .main-navigation .rb-subcats__img{display:none!important}

  /* Sous‑menus (caret) */
  .rb-left .main-navigation .menu>li>a{position:relative;z-index:1;padding-right:38px}
  .rb-left .main-navigation .menu li.menu-item-has-children{position:relative}
  .rb-left .main-navigation .menu li>.rb-submenu-toggle{appearance:none;border:0;background:transparent;cursor:pointer;position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;z-index:3;color:#111}
  .rb-left .main-navigation .menu li>.rb-submenu-toggle:focus-visible{outline:2px solid #000;outline-offset:2px}
  .rb-left .main-navigation .menu li>.rb-submenu-toggle svg{display:block;width:16px;height:16px;transition:transform .15s ease}
  .rb-left .main-navigation .menu li>.rb-submenu-toggle svg *,
  .rb-left .main-navigation .menu li>.rb-submenu-toggle svg path{fill:#111!important;stroke:#111!important}
  .rb-left .main-navigation .menu li>.rb-submenu-toggle .rb-caret{display:block;font-size:16px;line-height:1;transform:translateY(1px);transition:transform .15s ease}
  .rb-left .main-navigation .menu li.is-open>.rb-submenu-toggle svg,
  .rb-left .main-navigation .menu li.is-open>.rb-submenu-toggle .rb-caret{transform:rotate(180deg)}
  .rb-left .main-navigation .menu li .sub-menu{display:none;margin:6px 0 0;padding:6px 0 0 10px;border-left:2px solid #f0f0f0}
  .rb-left .main-navigation .menu li.is-open>.sub-menu{display:block}
  .rb-left .main-navigation .menu li .sub-menu .sub-menu{border-left:2px solid #eee;margin-left:8px}
}

/* ====== Sous-catégories (mobile) : image + titre sur une ligne ====== */
@media (max-width:1023px){
  /* Ligne cliquable propre */
  .rb-left .main-navigation .menu li .sub-menu > li > a{
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:10px;
    text-transform:none; font-size:15px; font-weight:700;
    color:#111 !important; background:transparent !important;
  }
  .rb-left .main-navigation .menu li .sub-menu > li > a:hover{
    background:#f7f7fa;
  }

  /* Icône/miniature compacte */
  .rb-left .main-navigation .menu li .sub-menu img.rb-menu-cat-thumb{
    width:36px; height:36px; flex:0 0 36px;
    margin:0; object-fit:contain;
    box-shadow:none; transform:none !important; filter:none !important;
  }

  /* Titre à côté (wrap OK) */
  .rb-left .main-navigation .menu li .sub-menu .rb-menu-cat-title{
    display:block; flex:1; line-height:1.2; white-space:normal;
  }

  /* Optionnel : on allège l’UI si tu veux retirer la barre verticale du sous-menu */
  /* .rb-left .main-navigation .menu li .sub-menu{ border-left:0; padding-left:0; } */
}

/* ====== Petits raffinements mobile ====== */
@media (max-width:1023px){
  /* 1) Zone de tap confortable (≥ 44px) + meilleure lisibilité */
  .rb-left .main-navigation .menu li .sub-menu > li > a{
    min-height:44px;
    line-height:1.25;
  }

  /* 2) Fine séparation entre les items (évite l’effet “bloc blanc”) */
  .rb-left .main-navigation .menu li .sub-menu > li:not(:last-child) > a{
    border-bottom:1px solid #f0f0f2;
  }

  /* 3) Ultra-petits écrans : miniatures un peu plus petites */
  @media (max-width:360px){
    .rb-left .main-navigation .menu li .sub-menu img.rb-menu-cat-thumb{
      width:30px; height:30px; flex-basis:30px;
    }
  }
}



/* =================== 5) HEADER — DESKTOP (≥1024px) =================== */
@media (min-width:1024px){
  .rb-header{display:flex;align-items:center;justify-content:center;padding-block:.5rem}
  .rb-header .rb-left,.rb-header .rb-right{display:none!important}
  .rb-header .rb-center{display:flex;justify-content:center}
  .storefront-primary-navigation{display:block!important;margin-top:.25rem;background:none!important;padding:0!important;margin:0!important}
  .storefront-primary-navigation .main-navigation{display:block!important}
  .storefront-primary-navigation .main-navigation ul.menu{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;margin:0}
  .site-header{background:none!important;padding-bottom:0!important;margin-bottom:0!important}
}

/* ================= NAV RGB + RB-LABEL + MEGA — CLEAN ================= */

/* 6) NAV RGB — variables + base (≥992px) */
@keyframes navRGBmove{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media (min-width:992px){
  :root{
    --menu-bg:#000; --menu-text:#e9e9e9; --hover-text:#fff; --menu-sep:rgba(255,255,255,.06);
    --rgb-speed:3s;
    --rgb-1:#ff004d; --rgb-2:#ff6a00; --rgb-3:#ff00e1; --rgb-4:#7a00ff; --rgb-5:#0077ff;
    --rgb-6:#00d0ff; --rgb-7:#0077ff; --rgb-8:#7a00ff; --rgb-9:#ff00e1; --rgb-10:#ff004d;
    --u-left:28%; --u-right:28%; --u-bottom:8px; --u-height:3px;
    --glow-scale:1.12; --glow-blur:6px; --glow-alpha:.45;
  }

  /* barre full-bleed */
  .site-header .main-navigation,
  header .main-navigation,
  .primary-navigation,
  #site-navigation{
    background:var(--menu-bg)!important;
    border-top:1px solid var(--menu-sep);
    border-bottom:1px solid var(--menu-sep);
    position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
    width:100vw; overflow:visible;
  }

  /* UL répartie */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu{
    display:flex!important; flex-wrap:nowrap!important;
    justify-content:space-between; align-items:center;
    gap:0; margin:0 auto; max-width:100vw;
  }
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li{
    flex:1 1 0; min-width:0; text-align:center; overflow:visible; position:relative;
  }

  /* Liens (effets sur .rb-label) */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a{
    position:relative; isolation:isolate; display:flex; justify-content:center; align-items:center;
    width:100%; padding:16px 20px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
    color:var(--menu-text)!important; background:transparent!important; border:0!important; box-shadow:none!important; text-decoration:none!important; z-index:2;
  }

  /* Effets RGB via .rb-label */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a .rb-label{
    display:inline-block; position:relative; z-index:1; padding:16px 20px; border-radius:999px; line-height:1;
  }
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a .rb-label::before{
    content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
    background:linear-gradient(90deg,var(--rgb-1),var(--rgb-2),var(--rgb-3),var(--rgb-4),var(--rgb-5),var(--rgb-6),var(--rgb-7),var(--rgb-8),var(--rgb-9),var(--rgb-10),var(--rgb-1));
    background-size:320% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    filter:blur(12px) saturate(150%) brightness(140%);
    opacity:0; transform:scale(.985);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
  }
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a:hover .rb-label::before,
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li:focus-within>a .rb-label::before{
    opacity:1; transform:scale(1); animation:navRGBmove var(--rgb-speed) linear infinite;
  }

  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a .rb-label::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    bottom:var(--u-bottom); height:var(--u-height);
    width:calc(100% - (var(--u-left) + var(--u-right)));
    border-radius:999px; opacity:0;
    background:linear-gradient(90deg,var(--rgb-1),var(--rgb-2),var(--rgb-3),var(--rgb-4),var(--rgb-5),var(--rgb-6),var(--rgb-7),var(--rgb-8),var(--rgb-9),var(--rgb-10),var(--rgb-1));
    background-size:320% 100%;
    pointer-events:none;
  }
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li:is(.current-menu-item,.current-menu-ancestor)>a .rb-label::after{
    opacity:1; animation:navRGBmove var(--rgb-speed) linear infinite;
  }

  /* Neutralise tout ::before/::after sur <a> */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a::before,
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a::after{ content:none!important; }

  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li>a:hover,
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li:focus-within>a{
    color:var(--hover-text)!important;
  }
  :is(.primary-navigation,.main-navigation,#site-navigation) a:focus-visible{outline:none}
  @media (prefers-reduced-motion:reduce){
    :is(.primary-navigation,.main-navigation,#site-navigation) .rb-label::before,
    :is(.primary-navigation,.main-navigation,#site-navigation) .rb-label::after{animation:none!important}
  }
}

/* Garder l'ovale RGB actif quand le sous-menu est ouvert/hover (desktop) */
@media (min-width:1024px){
  /* 1) Ovale ::before allumé si le LI est hover, rb-open, ou si le panneau est hover */
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li:hover > a .rb-label::before,
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li.rb-open > a .rb-label::before,
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li:has(> ul.sub-menu:hover) > a .rb-label::before{
    opacity:1; transform:scale(1);
    animation:navRGBmove var(--rgb-speed) linear infinite;
  }

  /* 2) Conserver aussi la couleur de texte "hover" dans ces états */
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li:hover > a,
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li.rb-open > a,
  :is(.primary-navigation,.main-navigation,#site-navigation)
  ul.menu>li:has(> ul.sub-menu:hover) > a{
    color:var(--hover-text)!important;
  }
}

/* 7) MEGA — centré + espace + pont fiable + délai de fermeture (≥1024px) */
@media (min-width:1024px){
  /* Ergonomie */
  :root{
    --mega-gap: 8px;        /* espace visuel entre barre et panneau */
    --mega-bridge: 42px;    /* ↑ tolérance au-dessus du panneau (avant 26px) */
    --mega-close: .12s;     /* ↑ délai avant fermeture (avant .32s) */
  }

  .site-header .main-navigation,
  header .main-navigation,
  .primary-navigation,
  #site-navigation{ position:relative; z-index:10000; overflow:visible; }

  /* Le <li> parent n’est pas positionné (on centre sur la nav) */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega{ position:static !important; }

  /* Panneau méga (fermé par défaut) */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu{
    display:grid !important; position:absolute !important;
    top:calc(100% + var(--mega-gap)) !important;
    left:50% !important; transform:translateX(-50%) !important;
    margin:0; width:min(1400px,calc(100vw - 48px)) !important; max-width:calc(100vw - 48px) !important;
    box-sizing:border-box; padding:36px clamp(28px,5vw,64px);
    background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px;
    box-shadow:0 22px 48px rgba(0,0,0,.12);
    visibility:hidden; opacity:0; pointer-events:none; z-index:10002;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; max-height:72vh; overflow:auto;
    transition:
      opacity   .18s ease var(--mega-close),
      transform .18s ease var(--mega-close),
      visibility 0s linear var(--mega-close);
    will-change:opacity,transform;
  }

  /* OUVERT : survol natif OU classe .rb-open (posée par le JS) */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega:hover>ul.sub-menu,
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega.rb-open>ul.sub-menu,
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega:has(> ul.sub-menu:hover)>ul.sub-menu{
    visibility:visible; opacity:1; pointer-events:auto; transform:translateX(-50%);
    transition:
      opacity   .14s ease 0s,
      transform .14s ease 0s,
      visibility 0s linear 0s;
  }

  /* ⚠️ Neutralise complètement l’ancien PONT #1 sur le <li> */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega::after{
    content:none !important;
  }

  /* ✅ PONT FIABLE (seul nécessaire) — accroché au panneau */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu::before{
    content:""; position:absolute; left:0; right:0;
    top:calc(-1 * var(--mega-bridge)); height:var(--mega-bridge);
    /* minuscule alpha pour “peindre” la zone et capter le hover sans être visible */
    background:rgba(0,0,0,.001);
    pointer-events:auto;
  }

  /* Cartes sous-catégories */
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu{justify-content:center; justify-items:center; grid-template-columns:repeat(auto-fit,220px); gap:28px 36px}
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu>li{list-style:none; text-align:center; width:220px; background:transparent!important}
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu>li>a{
    display:flex; flex-direction:column; align-items:center; gap:12px;
    text-decoration:none; color:#111!important; font-weight:700; font-size:14px; letter-spacing:.02em; text-transform:uppercase;
    padding:10px; border-radius:12px; background:transparent!important; box-shadow:none!important; outline:none!important;
  }
  .main-navigation .rb-menu-cat-thumb{display:block; margin:0 auto; width:100px; height:100px; object-fit:contain; transform:scale(1); transition:transform .18s ease, filter .18s ease}
  :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu>li>a:hover .rb-menu-cat-thumb{transform:scale(1.06); filter:saturate(1.05)}

  @media (prefers-reduced-motion:reduce){
    :is(.primary-navigation,.main-navigation,#site-navigation) ul.menu>li.mega>ul.sub-menu{transition:none}
  }
}

/* =========================================================
   7) Footer
   ========================================================= */
footer#colophon.site-footer{
  padding-top:10px !important;
  padding-bottom:10px !important;
  margin:0 !important;
}
footer#colophon.site-footer > .col-full{
  padding:0 !important;
  margin:0 auto !important;
  max-width:1200px;
}
footer#colophon.site-footer .widget,
footer#colophon.site-footer .footer-widgets{
  margin-bottom:0 !important;
  padding:0 !important;
}


/* =========================================================
   8) ANIMATIONS & PRÉFÉRENCES
   (génériques utilisées ailleurs)
   ========================================================= */

/* Rebond compteur panier */
@keyframes cart-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.rb-cart-count.cart-bounce { animation: cart-bounce 0.3s ease; }


/* =========================================================
   BANNIÈRE DÉFILANTE — ruban infini avec drag/fling (PRO)
   ========================================================= */

/* --- Variables (une source de vérité) --- */
:root{
  /* Hauteur + typo */
  --banner-h-mobile: 32px;
  --banner-h-desktop: 36px;
  --banner-font-mobile: 14px;
  --banner-font-desktop: 15px;

  /* Icônes SVG / images */
  --icon-size-mobile: 18px;
  --icon-size-desktop: 20px;

  /* Espacement entre items */
  --marquee-gap-mobile: 50px;
  --marquee-gap-narrow: 36px;
}

/* --- Shell --- */
.banniere-info-randm{
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  width: 100%;
  height: var(--banner-h-mobile);
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  font: var(--banner-font-mobile)/1 Arial, sans-serif;
  touch-action: pan-y;   /* pour pouvoir drag horizontal + scroll vertical */
  user-select: none;
  cursor: grab;
  padding-top: env(safe-area-inset-top, 0); /* iOS notch */
}
.banniere-info-randm.is-dragging{ cursor: grabbing; }

/* Décale la page sous la bannière fixe */
#page{ margin-top: calc(var(--banner-h-mobile) + env(safe-area-inset-top, 0)); }

/* --- Piste de défilement --- */
.banniere-marquee{
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
}

/* Groupe d’items (répété 2x via JS pour le loop) */
.marquee-group{
  --gap: var(--marquee-gap-mobile);
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  padding-right: var(--gap); /* espace A ↔ B */
  flex-shrink: 0;
}

/* Item : icône + texte, alignement parfait */
.banniere-info-randm .marquee-group span{
  display: inline-flex;
  align-items: center;
  gap: 6px;          /* espace icône <-> texte */
  line-height: 1;    /* évite le “saut” vertical */
}
.banniere-info-randm .marquee-group strong{ font-weight: 700; }

/* Icônes SVG (utilise la classe .banner-icon dans le HTML) */
.banniere-info-randm .banner-icon{
  width: var(--icon-size-mobile);
  height: var(--icon-size-mobile);
  flex: 0 0 var(--icon-size-mobile); /* empêche l’écrasement en flex */
  display: inline-block;
  vertical-align: middle;
}

/* Si tu as des images .webp comme icônes (sinon tu peux retirer ce bloc) */
.banniere-info-randm .marquee-group span > img{
  width: var(--icon-size-mobile);
  height: var(--icon-size-mobile);
  flex: 0 0 var(--icon-size-mobile);
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  pointer-events: none; /* drag/clic sur le texte plutôt que l’image */
}

/* Accessibilité : focus clavier (la bannière est “button” côté JS) */
.banniere-info-randm:focus-visible{
  outline: 2px dashed #fff;
  outline-offset: 2px;
}

/* (On garde la classe .is-paused pour l’état, pas d’anim CSS) */
.banniere-info-randm.is-paused .banniere-marquee{}

/* Hover desktop : rien à animer ici, mais on laisse le hook */
@media (hover:hover) and (pointer:fine){
  .banniere-info-randm:hover .banniere-marquee{
    animation-play-state: paused;
  }
}

/* --- Ajustements écrans très étroits --- */
@media (max-width: 380px){
  .marquee-group{ --gap: var(--marquee-gap-narrow); }
  .banniere-info-randm{ font-size: 13px; }
  .banniere-info-randm .banner-icon,
  .banniere-info-randm .marquee-group span > img{
    width: 16px; height: 16px; flex-basis: 16px;
  }
}

/* --- Desktop (respire un peu plus) --- */
@media (min-width: 1024px){
  .banniere-info-randm{
    height: var(--banner-h-desktop);
    font-size: var(--banner-font-desktop);
  }
  #page{ margin-top: calc(var(--banner-h-desktop) + env(safe-area-inset-top, 0)); }
  .banniere-info-randm .banner-icon,
  .banniere-info-randm .marquee-group span > img{
    width: var(--icon-size-desktop);
    height: var(--icon-size-desktop);
    flex-basis: var(--icon-size-desktop);
  }
}

/* Boost optique très léger pour “Expédition rapide”
   (3e <span> de ta liste) – optionnel, retire si inutile */
.banniere-info-randm .marquee-group span:nth-of-type(3) .banner-icon{
  transform: scale(1.30);
}

/* RTL optionnel */
[dir="rtl"] .banniere-marquee{ direction: rtl; }

/* Légère amplification visuelle pour l'icône FAST */
.banniere-info-randm .banner-icon.fast{
  transform: scale(1.12);           /* ajuste 1.08–1.18 si besoin */
  transform-origin: center;
}

@media (min-width:1024px){
  .banniere-info-randm .banner-icon.fast{
    transform: scale(1.10);
  }
}

/* ============================================================
   AGE BANNER - PARAMÈTRES & AFFICHAGE (version non-cliquable)
   ============================================================ */
#rb-age-banner.rb-age-banner{
  position:fixed;
  inset:auto 0 16px;
  display:grid;
  place-items:center;
  padding:0 12px;
  z-index:99999;

  /* visible par défaut */
  opacity:1;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease;
}

#rb-age-banner.is-hidden,
.rb-age-ok #rb-age-banner {
  display:none !important;           /* <- retire complètement du flux */
}

/* Conteneur visuel */
.rb-age-banner__inner{
  max-width:920px; width:100%;
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  background:rgba(20,20,22,.88); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 16px; box-shadow:0 20px 40px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}

/* Icône */
.rb-age-banner__icon{ display:grid; place-items:center; }
.rb-age-icon{
  width:38px; height:38px; object-fit:contain;
  user-select:none; -webkit-user-drag:none;
}

/* Contenu */
.rb-age-banner__content{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; width:100%;
}
.rb-age-banner__text{ margin:0; font-size:15px; line-height:1.45; letter-spacing:.1px; }

/* Actions */
.rb-age-banner__actions{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.rb-age-banner__btn{
  -webkit-tap-highlight-color:transparent; appearance:none; border:0;
  padding:10px 14px; border-radius:10px; font-size:14px; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .08s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.rb-age-banner__btn--yes{ background:#61db67; color:#0a1f17; }
.rb-age-banner__btn--yes:hover{ transform:translateY(-1px); }
.rb-age-banner__btn--yes:active{ transform:translateY(0); }

.rb-age-banner__btn--no{ background:#f2384f; color:#eaecef; }
.rb-age-banner__btn--no:hover{ background:#d12c42; }

/* Mobile */
@media (max-width:640px){
  .rb-age-banner__inner{ grid-template-columns:1fr; row-gap:12px; padding:12px; }
  .rb-age-banner__content{ grid-template-columns:1fr; gap:10px; }
  .rb-age-banner__text{ text-align:center; font-size:14px; }
  .rb-age-banner__actions{ justify-content:center; }
}

/* Thèmes clairs : bord visible */
@media (prefers-color-scheme:light){
  .rb-age-banner__inner{ border-color:rgba(0,0,0,.08); }
}

/* Réduction de mouvement */
@media (prefers-reduced-motion:reduce){
  #rb-age-banner{ transition:none; }
}

/* =========================================================
   LOGO RESPONSIVE — anti-écrasement, iOS-safe, ratio préservé
   ========================================================= */

/* Variables globales : une seule modif suffit pour changer partout */
:root {
  --logo-h-mobile: 90px;         /* hauteur logo sur mobile */
  --logo-h-tablet: 110px;        /* hauteur logo sur tablette */
  --logo-h-desktop: 140px;       /* hauteur logo sur grand écran */
  --logo-w-max-mobile: 320px;    /* largeur max logo mobile */
  --logo-w-max-tablet: 380px;    /* largeur max logo tablette */
  --logo-w-max-desktop: 420px;   /* largeur max logo desktop */
}

/* centre adaptable */
.rb-center { min-width: 0; }

/* conteneur logo */
.rb-center .site-branding,
.rb-center .custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* image logo : mobile par défaut */
.rb-center img.custom-logo,
.rb-center .custom-logo-link img {
  height: var(--logo-h-mobile);
  width: auto;
  max-width: min(var(--logo-w-max-mobile), 80vw);
  object-fit: contain;
  aspect-ratio: auto;
  display: block;
  flex: 0 1 auto;
}
.rb-center img.custom-logo { max-width: none; }

/* tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  .rb-center img.custom-logo,
  .rb-center .custom-logo-link img {
    height: var(--logo-h-tablet);
    max-width: var(--logo-w-max-tablet);
  }
}

/* desktop */
@media (min-width: 1024px) {
  .rb-center img.custom-logo,
  .rb-center .custom-logo-link img {
    height: var(--logo-h-desktop);
    max-width: var(--logo-w-max-desktop);
  }
}

/* SVG logo */
.rb-center .custom-logo-link svg {
  height: var(--logo-h-mobile);
  width: auto;
  max-width: min(var(--logo-w-max-mobile), 80vw);
  preserveAspectRatio: xMidYMid meet;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .rb-center .custom-logo-link svg {
    height: var(--logo-h-tablet);
    max-width: var(--logo-w-max-tablet);
  }
}
@media (min-width: 1024px) {
  .rb-center .custom-logo-link svg {
    height: var(--logo-h-desktop);
    max-width: var(--logo-w-max-desktop);
  }
}

/* =========================================================
   FOOTER — RandM Belgium (clean & unified)
   ========================================================= */

/* ========== Global ========== */
.site-footer{background:#000;color:#fff;padding-bottom:0!important}
.site-footer::before,.site-footer::after,
.site-footer .col-full::before,.site-footer .col-full::after{content:none!important;display:none!important}

/* =========================================================
   TOP : LOGOS + COLONNES
   ========================================================= */
.footer-top{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  column-gap:48px;
  row-gap:24px;
  padding:28px 12px 12px;
  max-width:clamp(1280px,96vw,1680px);
  margin:0 auto;
}
@media (max-width:991px){
  .footer-top{grid-template-columns:1fr}
}

/* --- Logos anneau (base) --- */
.brand-cell{padding-top:20px}
.logo-circle-container{position:relative;width:200px;height:200px;margin:0 auto}
.logo-circle-container.xmedium{width:210px;height:210px}
.central-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:120px;z-index:2;
}
.partner-logo{
  position:absolute;width:50px;opacity:.45;
  transition:opacity .8s,filter .8s;
}
.partner-logo.active,.partner-logo:hover{
  opacity:1;filter:brightness(1.5) drop-shadow(0 0 10px rgba(255,255,255,.4));
}

/* === Desktop : 7 logos répartis uniformément (rayon +2%) === */
@media (min-width: 992px){
  .brand-cell{ padding-top:44px; }                 /* position verticale du bloc */
  .logo-circle-container .central-logo{ width:112px; }  /* un chouïa plus petit */

  /* “horloge” à 7 positions – plus loin du centre qu’avant */
  .logo-1{ top:  6.0%; left:50.0%; transform:translate(-50%,-50%); } /* 12h */
  .logo-2{ top: 21.8%; left:84.8%; transform:translate(-50%,-50%); }
  .logo-3{ top: 61.3%; left:92.9%; transform:translate(-50%,-50%); }
  .logo-4{ top: 90.0%; left:69.8%; transform:translate(-50%,-50%); }
  .logo-5{ top: 90.0%; left:30.2%; transform:translate(-50%,-50%); }
  .logo-6{ top: 61.3%; left: 7.1%; transform:translate(-50%,-50%); }
  .logo-7{ top: 21.8%; left:15.2%; transform:translate(-50%,-50%); }
}

/* === Mobile : angles identiques, rayon adapté === */
@media (max-width:767px){
  .brand-cell{margin-top:-25px}
  .logo-circle-container{width:180px;height:180px}
  .central-logo{width:80px}
  .partner-logo{width:40px}

  .logo-1{ top:16.0%; left:50.0%; transform:translate(-50%,-50%); }
  .logo-2{ top:28.8%; left:76.6%; transform:translate(-50%,-50%); }
  .logo-3{ top:57.6%; left:83.1%; transform:translate(-50%,-50%); }
  .logo-4{ top:80.6%; left:64.8%; transform:translate(-50%,-50%); }
  .logo-5{ top:80.6%; left:35.2%; transform:translate(-50%,-50%); }
  .logo-6{ top:57.6%; left:16.9%; transform:translate(-50%,-50%); }
  .logo-7{ top:28.8%; left:23.4%; transform:translate(-50%,-50%); }
}

/* =========================================================
   COLONNES DE DROITE
   ========================================================= */
.footer-columns{
  display:flex;
  flex-wrap:wrap;              /* permet le retour à la ligne si besoin */
  gap:0 40px;
  justify-content:flex-start;
  padding:10px 8px 0;
}
.footer-column{min-width:200px;max-width:240px;flex:0 0 auto}
.footer-column h4{
  font-size:15px;line-height:1.15;font-weight:700;letter-spacing:.6px;
  color:#e8e8e8;margin:0 0 12px;text-transform:uppercase;
}

/* Menus Explorer */
.ft-menu,.ft-menu ul{list-style:none;margin:0;padding:0}
.ft-menu li{margin-bottom:8px;font-size:13.5px;color:#cfcfcf}
.ft-menu a{color:#cfcfcf;text-decoration:none;display:inline-block}

/* Support */
.footer-column ul{margin:0;padding:0}
.support-col .contact-infos{list-style:none;margin-top:8px}
.support-col .contact-infos li{margin:0 0 12px}
.support-col .contact-title{
  display:flex;align-items:center;gap:8px;
  margin:0 0 6px;font-weight:700;font-size:14px;color:#e8e8e8;
}
.support-col .contact-infos a,
.support-col .contact-infos .hours-text{
  display:block;font-size:13.5px;line-height:1.5;color:#cfcfcf;text-decoration:none;
}
.support-col .contact-infos a{display:inline-block} /* limite la barre au texte */
.footer-top .support-col .hours-text{color:#fff!important}

/* Suivez-nous */
.social-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.social-list a{color:#cfcfcf;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px}
.social-list a svg{color:#fff;width:16px;height:16px;flex-shrink:0}
.social-list a .label{position:relative;display:inline-block}

/* Accordéon mobile */
@media (max-width:991px){
  .footer-columns{flex-direction:column;gap:18px}
  .footer-column h4{cursor:pointer;position:relative}
  .footer-column h4::after{content:'＋';position:absolute;right:0;font-weight:700}
  .footer-column.active h4::after{content:'−'}
  .footer-column .ft-menu,.footer-column .contact-infos,.footer-column .social-list{display:none}
  .footer-column.active .ft-menu,.footer-column.active .contact-infos,.footer-column.active .social-list{display:block}
}

/* Desktop — colonnes sur une seule rangée + langue à droite */
@media (min-width:992px){
  .footer-columns{flex-wrap:nowrap;align-items:flex-start;gap:40px}
  .footer-column{flex:1 1 220px;min-width:180px;max-width:260px}
}

/* =========================================================
   LANG SWITCHER — bouton = titre
   ========================================================= */

/* Neutralise l’ancien <select> si présent */
.lang-col .lang-wrap select{all:unset;display:none!important}

/* Place la colonne langue en bout de ligne en desktop */
.lang-col{margin-left:0;flex:0 0 auto;max-width:none}
.lang-col .lang-wrap{margin-top:0}
@media (min-width:992px){ .lang-col{margin-left:auto} }

.randm-lang{position:relative;font-size:13.5px}
.randm-lang .lang-trigger.title-variant{
  background:transparent;border:0;padding:0;margin:0 0 12px;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;line-height:1.15;
  font-size:15px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#e8e8e8;
}
.randm-lang .flag{
  width:18px;height:18px;border-radius:3px;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.randm-lang .flag img{display:inline-block;width:16px;height:12px;vertical-align:middle}
.randm-lang .lang-trigger.title-variant .caret{
  width:16px;height:16px;margin-left:6px;color:#fff;display:inline-block;position:relative;top:-2px;
}
.randm-lang [aria-expanded="true"] .caret{transform:rotate(180deg);top:-2px}

/* Menu */
.randm-lang .lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;
  margin:0;padding:6px;list-style:none;z-index:1000;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#080808;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
@media (max-width:991px){ .randm-lang .lang-menu{left:0;right:auto} }

.randm-lang .lang-menu li{margin:0}
.randm-lang .lang-menu a.lang-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  color:#fff;text-decoration:none;border-radius:10px;
  transition:background .15s ease,transform .04s ease;
}
.randm-lang .lang-menu a.lang-item:hover{background:#191919}
.randm-lang .lang-menu a.lang-item:active{transform:translateY(1px)}
.randm-lang .lang-menu a.lang-item.is-current{background:#131313}
.randm-lang .lang-menu .txt{flex:1;color:#e8e8e8}
.randm-lang .lang-menu .badge{opacity:.6}
.randm-lang .lang-trigger:focus-visible,
.randm-lang .lang-menu a.lang-item:focus-visible{outline:2px solid #fff;outline-offset:2px}
.randm-lang .lang-menu a.lang-item::after{content:none!important}
.randm-lang .lang-menu li+li{margin-top:4px}

/* =========================================================
   BANDEAU ÉCO / CONFORMITÉ
   ========================================================= */

/* Bandeau “compliance” (loi) — version sobre */
.eco-inline.eco-under.compliance{
  display:flex;align-items:center;justify-content:center; /* centré sous les colonnes */
  gap:12px;margin:8px 8px 0;padding:10px 14px;
  background:#0e1116;border:1px solid #2a2f3a;border-radius:14px;
  color:#e6e8ea;font-size:13.5px;line-height:1.35;
}
.eco-inline.eco-under.compliance .eu-bubble{
  width:26px;height:26px;position:relative;top:1px;flex-shrink:0;
}
.eco-inline.eco-under.compliance .text{display:inline-block}
.eco-inline.eco-under.compliance .eco-link{
  color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;white-space:nowrap;
}
.eco-inline.eco-under.compliance .eco-link::after{content:none!important}
.eco-inline.eco-under.compliance .eco-link:hover{color:inherit}
.eco-inline.eco-under.compliance .eco-link:focus-visible{outline:2px solid #6ea8ff;outline-offset:2px;border-radius:4px}
@media (max-width:767px){
  .eco-inline.eco-under.compliance{flex-wrap:wrap;text-align:center;gap:6px 10px;padding:8px 12px}
}

/* (Ancienne variante “top-right”) — on garde au cas où ailleurs */
.eco-inline{max-width:clamp(1280px,96vw,1680px);margin:6px auto 0;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:10px}
.eco-inline.top-right{margin-top:0;padding:0;justify-content:flex-end;display:flex;align-items:center;gap:10px;font-size:13px}
.footer-columns .eco-inline.top-right{flex-basis:100%;max-width:100%;width:100%;display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:8px 0 0 0;padding:0}

/* =========================================================
   SYSTÈME D’ACCENT (soulignement animé) — on EXCLUT les légaux
   ========================================================= */
.ft-menu a,
.support-col .contact-infos a,
.social-list a .label{
  text-decoration:none!important;position:relative;
}
.ft-menu a::after,
.support-col .contact-infos a::after,
.social-list a .label::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;pointer-events:none;
}
.ft-menu a:hover::after,
.ft-menu a:focus-visible::after,
.support-col .contact-infos a:hover::after,
.support-col .contact-infos a:focus-visible::after,
.social-list a:hover .label::after,
.social-list a:focus-visible .label::after{transform:scaleX(1)}
.ft-menu a:hover,
.social-list a:hover{color:#fff!important}
.support-col .contact-infos a:hover,
.support-col .contact-infos a:focus{color:#fff!important}

/* =========================================================
   FOOTER — Barre du bas (clean)
   ========================================================= */
.footer-bottombar{
  border-top:1px solid #191c20;
  padding:8px 0;
}
.footer-bottombar .bottom-inner{
  max-width:clamp(1280px,96vw,1680px);
  margin:0 auto;
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;               /* tout sur une seule ligne en desktop */
  font-size:11.5px;
  line-height:1.35;
}

/* ===== Gauche : © + liens légaux ===== */
.bottom-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:1 1 auto;                  /* prend l’espace central */
}
.bottom-left .copyright{
  white-space:nowrap;
  opacity:.9;
}

/* Liens + séparateurs "/" */
.legal-links.inline{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}
.legal-links.inline li + li{
  position:relative;
  margin-left:8px;
  padding-left:10px;
}
.legal-links.inline li + li::before{
  content:"/";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  font-size:.9em;
  color:#cfcfcf;                  /* reste gris, pas d’effet au hover */
  opacity:1;
}

/* Couleur identique au texte + soulignement fin et rapproché */
.legal-links.inline a{
  color:#cfcfcf;
  text-decoration:none;
  position:relative;
  padding-bottom:2px;
}
.legal-links.inline a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;   /* un poil remonté */
  height:1px;                     /* fin */
  background:currentColor;        /* suit la teinte du lien */
}
.legal-links.inline a:hover,
.legal-links.inline a:focus{
  color:#fff;
}
.legal-links.inline a:hover::after,
.legal-links.inline a:focus::after{
  background:#fff;
}

/* ===== Droite : icônes de paiement (SVG) ===== */
.bottom-right{
  flex:0 0 auto;
  margin-left:auto;               /* colle à droite */
  display:flex;
}
.payment-banner{
  display:flex;
  gap:12px;
}
.payment-banner img{
  height:26px;                    /* taille par défaut */
  width:auto;
  object-fit:contain;
  vertical-align:middle;
  opacity:.95;
  transition:transform .12s ease, opacity .2s ease;
}
.payment-banner img:hover{
  opacity:1;
  transform:translateY(-1px);
}

/* ===== Responsive ===== */
@media (min-width:1280px){
  .payment-banner img{ height:28px; }
}
@media (max-width:991px){
  .footer-bottombar .bottom-inner{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:6px;
  }
  .bottom-left{ flex-wrap:wrap; justify-content:center; }
  .legal-links.inline{ white-space:normal; flex-wrap:wrap; justify-content:center; }
  .bottom-right{ margin-left:0; justify-content:center; }
}
@media (max-width:767px){
  .payment-banner img{ height:24px; }
}