/* ====== PALETTE (remplace par les couleurs du logo BIC GLOBAL) ====== */
:root{
  --brand:#0b3b8f;     /* EXEMPLE bleu (logo) → remplace */
  --brand-2:#f4a300;   /* EXEMPLE jaune/or → remplace  */
  --brand-3:#0b1220;   /* Bleu nuit/texte foncé        */
  --ink:#0a0f1c;
  --muted:#6b7280;
  --bg:#033a45;        /* Couleur d'arrière-plan globale */
  --paper:#0f1629;
  --accent:#17b26a;    /* Accent (boutons secondaires) */
}

/* Utilitaires basés variables */
.bg-brand{ background: var(--brand); }
.bg-brand-2{ background: var(--brand-2); }
.text-brand{ color: var(--brand); }
.text-brand-2{ color: var(--brand-2); }
.border-brand{ border-color: var(--brand); }
/* Helpers pour gradients Tailwind (from-*, to-*) */
.from-brand{
  --tw-gradient-from: var(--brand) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-brand-2{ --tw-gradient-to: var(--brand-2) var(--tw-gradient-to-position); }

/* Effet verre pour barre sticky */
.frost{
  background: linear-gradient(90deg, rgba(10,15,16,.65), rgba(15,22,41,.65));
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
}

/* Décor léger en points */
.dots{
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* === CAROUSEL 3 SLIDES (auto) === */
@keyframes slider3{
  0%   { transform: translateX(0%); }
  28%  { transform: translateX(0%); }
  33%  { transform: translateX(-100%); }
  61%  { transform: translateX(-100%); }
  66%  { transform: translateX(-200%); }
  95%  { transform: translateX(-200%); }
  100% { transform: translateX(0%); }
}
.carousel-track{
  animation: slider3 18s infinite;
  will-change: transform;
}
/* pause au survol pour lecture confortable */
.carousel:hover .carousel-track{ animation-play-state: paused; }


/* ===== Effet "éclair jaune" sous les liens du menu ===== */
.navlink{
  position: relative;
  display: inline-block;
  padding: 0.25rem 0;           /* un peu d’air vertical */
  transition: color .2s ease;
}

.navlink::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;                 /* distance du texte */
  height: 10px;                 /* épaisseur de l’éclair */
  background: var(--brand-2);   /* jaune du logo */
  opacity: 0;
  transform: translateY(6px) skewX(-18deg);
  transition: transform .25s ease, opacity .25s ease;
  /* Zigzag (éclair) via clip-path */
  clip-path: polygon(
    0% 60%, 10% 70%, 18% 40%, 28% 52%, 36% 26%, 46% 40%,
    54% 12%, 64% 26%, 72% 0%, 82% 16%, 90% 6%, 100% 18%,
    100% 100%, 0% 100%
  );
  pointer-events: none;
}

.navlink:hover::after,
.navlink:focus-visible::after{
  opacity: 1;
  transform: translateY(0) skewX(-18deg);
}

/* Optionnel : légère montée du lien au hover */
.navlink:hover,
.navlink:focus-visible{
  color: #fff;
  transform: translateY(-1px);
}

/* Variante mobile : on évite les éléments dépassant le conteneur */
.navlink-mobile{
  position: relative;
  display: block;
}
.navlink-mobile:active{
  background: rgba(255,255,255,.06);
}
.navlink-mobile::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 8px;
  background: var(--brand-2);
  opacity: 0;
  transform: translateY(6px) skewX(-18deg);
  transition: transform .2s ease, opacity .2s ease;
  clip-path: polygon(
    0% 60%, 12% 72%, 22% 38%, 34% 54%, 44% 22%, 56% 40%,
    66% 10%, 78% 24%, 88% 0%, 100% 16%, 100% 100%, 0% 100%
  );
  pointer-events: none;
}
.navlink-mobile:hover::after,
.navlink-mobile:focus-visible::after{
  opacity: 1;
  transform: translateY(0) skewX(-18deg);
}

/* === Hover cards (tous les cadres) === */
.hcard{
  position: relative;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background-color .25s ease;
  transform: translateY(0) scale(1);
  will-change: transform, box-shadow;
}

/* survol : légère élévation + scale + halo */
.hcard:hover,
.hcard:focus-visible{
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.18);
  border-color: var(--brand-2);
  outline: none;
}

/* reflet (sheen) subtil qui balaye la carte au hover */
.hcard::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.hcard:hover::before,
.hcard:focus-visible::before{
  animation: sheen 700ms ease forwards;
}
@keyframes sheen{
  to{ transform: translateX(120%); }
}

/* zoom léger des visuels internes */
.himg img,
.himg video{
  transition: transform .35s ease;
  transform-origin: center center;
}
.hcard:hover .himg img,
.hcard:hover .himg video,
.hcard:focus-visible .himg img,
.hcard:focus-visible .himg video{
  transform: scale(1.06);
}

/* Boutons : impulsion douce */
.btn-anim{
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-anim:hover,
.btn-anim:focus-visible{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.18);
}

/* Logos partenaires : effet “pop” + cadre qui s’allume */
.partner{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.partner:hover,
.partner:focus-visible{
  transform: translateY(-4px) scale(1.03);
  border-color: var(--brand-2);
  box-shadow: 0 10px 24px rgba(0,0,0,.2);
  background: rgba(255,255,255,.03);
}

/* Respecte les préférences d’accessibilité */
@media (prefers-reduced-motion: reduce){
  .hcard, .btn-anim, .partner{ transition: none !important; }
  .hcard:hover, .btn-anim:hover, .partner:hover{ transform: none !important; }
}


/* === Scrollbar horizontal du slider (produits.php) === */
#rail{
  scrollbar-color: #033a45 rgba(255,255,255,.06); /* Firefox: thumb | track */
  scrollbar-width: thin;                          /* Firefox */
}

/* WebKit (Chrome, Edge, Safari, Opera) */
/* Scrollbar horizontal du slider (produits.php) — plus foncé */
#rail{
  scrollbar-color: #022a31 rgba(255,255,255,.06); /* Firefox: thumb | track */
  scrollbar-width: thin;
}
#rail::-webkit-scrollbar{ height: 10px; }
#rail::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
}
#rail::-webkit-scrollbar-thumb{
  background-color: #022a31;      /* plus foncé que #033a45 */
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.25);
}
#rail::-webkit-scrollbar-thumb:hover{
  filter: brightness(1.1);
}



  /* Conteneur flottant */
  #wa-float{
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px; height: 62px;
    border-radius: 9999px;
    background: radial-gradient(80% 80% at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,0)) #22c55e;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    text-decoration: none;
  }
  #wa-float:hover{
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
  }

  /* Icône */
  #wa-float img{
    width: 34px; height: 34px; object-fit: contain; display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  }

  /* Aura/pulse légère */
  #wa-float::after{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    box-shadow: 0 0 0 0 rgba(34,197,94,.45);
    animation: wa-pulse 2.2s ease-out infinite;
  }
  @keyframes wa-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
    70%  { box-shadow: 0 0 0 18px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }

  /* Infobulle */
  #wa-float .wa-tip{
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1;
    opacity: 0; transform: translateX(6px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
  }
  #wa-float:hover .wa-tip{ opacity: 1; transform: translateX(0); }
  @media (max-width: 480px){
    #wa-float{ right: 14px; bottom: 14px; width: 56px; height: 56px; }
    #wa-float img{ width: 30px; height: 30px; }
    #wa-float .wa-tip{ display:none; } /* on masque l’infobulle sur petit écran */
  }

  /* Overrides : bouton WhatsApp moitié plus petit et à droite */
#wa-float{
  left: auto !important;   /* force à droite */
  right: 18px !important;
  width: 62px !important;  /* 62 -> 31 */
  height: 62px !important; /* 62 -> 31 */
}