html,
body{
  scrollbar-width:none;
  -ms-overflow-style:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

/* ===== Banderole d'annonce ===== */
:root{
  --cx-announce-h:38px;
}

#site-header .cx-announce{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:var(--cx-announce-h) !important;
  z-index:100001 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:16px !important;
  padding:0 20px !important;
  font-family:Inter, sans-serif !important;
  background:#0c0c0e !important;
  border-bottom:1px solid rgba(255,255,255,0.06) !important;
  box-sizing:border-box !important;
}

#site-header .cx-announce-viewport{
  position:relative !important;
  flex:0 1 auto !important;
  min-width:0 !important;
  max-width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

/* Dégradés latéraux uniquement quand ça défile */
#site-header .cx-announce-viewport.is-masked{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%) !important;
  mask-image:linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%) !important;
}

#site-header .cx-announce-track{
  position:relative !important;
  top:0 !important;
  left:0 !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  width:max-content !important;
  max-width:100% !important;
}

/* Mode défilant : seulement quand le contenu dépasse la largeur */
#site-header .cx-announce-track.is-scrolling{
  position:absolute !important;
  justify-content:flex-start !important;
  width:max-content !important;
  max-width:none !important;
  will-change:transform !important;
  animation:cx-announce-scroll var(--cx-announce-dur, 60s) linear infinite !important;
}

#site-header .cx-announce-unit{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  gap:16px !important;
}

#site-header .cx-announce-item{
  display:inline-block !important;
  flex:0 0 auto !important;
  font-size:.82rem !important;
  font-weight:500 !important;
  line-height:var(--cx-announce-h) !important;
  white-space:nowrap !important;
  color:rgba(255,255,255,0.72) !important;
}

#site-header .cx-announce-item strong{
  color:#fff !important;
  font-weight:700 !important;
}

#site-header .cx-announce-sep{
  display:inline-block !important;
  width:1px !important;
  height:14px !important;
  margin:0 16px 0 0 !important;
  background:rgba(255,255,255,0.28) !important;
  vertical-align:middle !important;
  align-self:center !important;
  flex-shrink:0 !important;
}

@keyframes cx-announce-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  #site-header .cx-announce-track.is-scrolling{ animation:none !important; }
}

#site-header .cx-announce-btn{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  height:26px !important;
  padding:0 13px !important;
  border-radius:8px !important;
  font-size:.76rem !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  color:#fff !important;
  background:var(--nav-primary, #7c3aed) !important;
  text-decoration:none !important;
  transition:background .25s ease, transform .25s ease !important;
}

#site-header .cx-announce-btn:hover{
  background:#8b5cf6 !important;
  transform:translateY(-1px) !important;
}

#site-header .cx-announce-btn svg{
  transition:transform .25s ease !important;
}

#site-header .cx-announce-btn:hover svg{
  transform:translateX(2px) !important;
}

@media (max-width:600px){
  #site-header .cx-announce{ gap:11px !important; }
  #site-header .cx-announce-btn{ height:24px !important; padding:0 11px !important; font-size:.72rem !important; }
  #site-header .cx-announce-item{ font-size:.74rem !important; }
  #site-header .cx-announce-unit{ gap:12px !important; }
  #site-header .cx-announce-sep{ margin:0 12px 0 0 !important; }
  #site-header .cx-announce-viewport.is-masked{
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
    mask-image:linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%) !important;
  }
}

/* Décale la navbar et ses ombres sous la banderole */
html.cx-has-announce #site-header .hd{
  top:var(--cx-announce-h) !important;
}

html.cx-has-announce #site-header .shadow-top{
  top:var(--cx-announce-h) !important;
}

@media (max-width:600px){
  :root{ --cx-announce-h:34px; }
  #site-header .cx-announce{ padding:0 14px !important; }
}

#site-header{
  --nav-primary:#7c3aed;
  --nav-border:rgba(255,255,255,0.08);
  --nav-text-dim:rgba(255,255,255,0.7);
  --transition-fast:all .3s cubic-bezier(.4,0,.2,1);
  position:relative !important;
  z-index:100000 !important;
  font-family:Inter, sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#site-header *{
  box-sizing:border-box !important;
}

#site-header a,
#site-header button,
#site-header ul,
#site-header li,
#site-header img,
#site-header span,
#site-header nav,
#site-header header,
#site-header div,
#site-header i{
  margin:0 !important;
  padding:0 !important;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  text-decoration:none;
  list-style:none;
}

#site-header .btn-search-icon{
  width:18px;
  height:18px;
  display:block;
  filter:brightness(0) invert(1);
  opacity:.95;
}

#site-header .shadow-top{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:140px !important;
  background:linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%) !important;
  pointer-events:none !important;
  z-index:999 !important;
}

#site-header .ctn{
  width:100% !important;
  max-width:1900px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:block !important;
}

#site-header .hd{
  position:fixed !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100% !important;
  max-width:1900px !important;
  height:80px !important;
  padding:0 6% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  z-index:100000 !important;
  transition:var(--transition-fast) !important;
  overflow:visible !important;
  isolation:isolate !important;
}

#site-header .hd::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  height:160px !important;
  background:linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.60) 35%, rgba(0,0,0,0.00) 75%, transparent 100%) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

#site-header .logo{
  font-size:2rem !important;
  letter-spacing:-0.02em !important;
  display:flex !important;
  align-items:center !important;
  position:relative !important;
  color:#fff !important;
  transition:transform .35s ease, filter .35s ease !important;
}

#site-header .logo .full{
  background:linear-gradient(135deg, #fff 0%, var(--nav-primary) 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

#site-header .logo .short{
  display:none !important;
  color:#fff !important;
}

#site-header .logo::after{
  content:"" !important;
  position:absolute !important;
  inset:-10px !important;
  border-radius:12px !important;
  background:radial-gradient(circle, rgba(124, 58, 237, 0.167) 0%, transparent 40%) !important;
  opacity:0 !important;
  transition:opacity .4s ease !important;
  pointer-events:none !important;
}

#site-header .logo:hover{
  transform:translateY(-2px) scale(1.04) !important;
  filter:drop-shadow(0 6px 20px rgba(124,58,237,0.241)) !important;
}

#site-header .logo:hover::after{
  opacity:1 !important;
}

#site-header .nav{
  display:flex !important;
  gap:3rem !important;
  font-size:.95rem !important;
  font-weight:500 !important;
}

#site-header .nav a{
  color:var(--nav-text-dim) !important;
  position:relative !important;
  transition:var(--transition-fast) !important;
}

#site-header .nav a:hover{
  color:#fff !important;
}

#site-header .nav a::after{
  content:"" !important;
  position:absolute !important;
  bottom:-6px !important;
  left:50% !important;
  width:0 !important;
  height:2px !important;
  background:var(--nav-primary) !important;
  transition:var(--transition-fast) !important;
  transform:translateX(-50%) !important;
  border-radius:2px !important;
}

#site-header .nav a:hover::after{
  width:100% !important;
}

#site-header .act{
  display:flex !important;
  position:relative !important;
  align-items:center !important;
  gap:1.2rem !important;
  height:100% !important;
}

#site-header .btn-search{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  gap:.8rem !important;
  padding:10px 18px !important;
  height:42px !important;
  font-size:.9rem !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid var(--nav-border) !important;
  color:#fff !important;
  transition:var(--transition-fast) !important;
}

#site-header .btn-search::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-100% !important;
  width:100% !important;
  height:100% !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%) !important;
  transition:left .6s ease !important;
}

#site-header .btn-search:hover{
  background:rgba(255,255,255,0.08) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 25px rgba(67,53,69,0.088) !important;
}

#site-header .btn-search:hover::before{
  left:100% !important;
}

#site-header .btn-login{
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  height:42px !important;
  padding:0 20px !important;
  min-width:140px !important;
  font-size:.9rem !important;
  font-weight:600 !important;
  border-radius:12px !important;
  background:var(--nav-primary) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(124,58,237,0.3) !important;
  transition:all .3s ease !important;
}

#site-header .btn-login::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-100% !important;
  width:100% !important;
  height:100% !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%) !important;
  transition:left .6s ease !important;
}

#site-header .btn-login:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(124,58,237,0.45) !important;
  background:#8b5cf6 !important;
}

#site-header .btn-login:hover::before{
  left:100% !important;
}

#site-header .icon-login{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1) !important;
}

#site-header .account-logo{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:100px !important;
  background:linear-gradient(45deg, var(--nav-primary), #a78bfa) !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:var(--transition-fast) !important;
  border:1px solid rgba(255,255,255,0.2) !important;
  overflow:hidden !important;
  position:relative !important;
  color:#fff !important;
  font-size:1.2rem !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  user-select:none !important;
  box-shadow:0 8px 20px rgba(124,58,237,0.3) !important;
}

#site-header .account-logo::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-120% !important;
  width:120% !important;
  height:100% !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%) !important;
  transition:left .6s ease !important;
  pointer-events:none !important;
}

#site-header .account-logo:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 12px 30px rgba(124,58,237,0.45) !important;
}

#site-header .account-logo:hover::before{
  left:120% !important;
}

/* Quand un avatar (image) est présent : juste l'image en cercle, rien derrière */
#site-header .account-logo:has(img){
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

#site-header .account-logo:has(img)::before{
  display:none !important;
}

#site-header .account-logo:has(img):hover{
  box-shadow:none !important;
}

#site-header .account-logo img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}

#site-header .account-menu{
  position:absolute !important;
  top:calc(100% + 1px) !important;
  right:0 !important;
  width:220px !important;
  max-width:calc(100vw - 24px) !important;
  background:rgba(15, 15, 15, 0.29) !important;
  backdrop-filter:blur(25px) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
  box-shadow:0 20px 40px rgba(0,0,0,0.45) !important;
  transform:translateY(10px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:all .3s cubic-bezier(.4,0,.2,1) !important;
  z-index:2000 !important;
  padding:7px !important;
  display:none !important;
}

#site-header .account-menu.hidden{
  display:none !important;
}

#site-header .account-menu.show{
  display:block !important;
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

#site-header .account-menu ul{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
}

#site-header .account-menu li{
  margin:0 !important;
  padding:0 !important;
}

#site-header .account-menu .menu-item{
  width:100% !important;
  min-height:40px !important;
  padding:9px 13px !important;
  border-radius:11px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  cursor:pointer !important;
  text-align:left !important;
  font-size:.86rem !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.75) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  transition:all .3s cubic-bezier(.4,0,.2,1) !important;
  user-select:none !important;
}

#site-header .account-menu .menu-item:hover{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

#site-header .account-menu .menu-icon{
  width:17px !important;
  height:17px !important;
  flex:0 0 17px !important;
  display:block !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1) !important;
  opacity:.9 !important;
  transition:all .3s ease !important;
}

#site-header .account-menu .menu-item:hover .menu-icon{
  opacity:1 !important;
}

#site-header #logout-button.menu-item{
  color:#ff4b4b !important;
}

#site-header #logout-button.menu-item:hover{
  background:rgba(255,75,75,.12) !important;
  border-color:rgba(255,75,75,.25) !important;
  color:#ff6b6b !important;
}

#site-header #logout-button .menu-icon{
  filter:brightness(0) saturate(100%) invert(43%) sepia(88%) saturate(3522%) hue-rotate(337deg) brightness(104%) contrast(101%) !important;
  opacity:1 !important;
}

#site-header #premiums-button.menu-item{
  color:#ffcc00 !important;
}

#site-header #premiums-button.menu-item:hover{
  background:rgba(255,204,0,.12) !important;
  border-color:rgba(255,204,0,.25) !important;
  color:#ffdb4d !important;
}

#site-header #premiums-button.menu-item .menu-icon{
  filter:brightness(0) saturate(100%) invert(77%) sepia(77%) saturate(2200%) hue-rotate(2deg) brightness(105%) contrast(102%) !important;
  opacity:1 !important;
}

#site-header #cx-admin-link.menu-item{
  color:#a855f7 !important;
}

#site-header #cx-admin-link.menu-item:hover{
  background:rgba(168,85,247,.12) !important;
  border-color:rgba(168,85,247,.28) !important;
  color:#c084fc !important;
}

#site-header #cx-admin-link.menu-item .menu-icon{
  filter:none !important;
  stroke:currentColor !important;
  color:currentColor !important;
  opacity:1 !important;
}

/* Icône SVG inline (Nous contacter) : pas de filtre, suit la couleur du texte */
#site-header #cx-contact-link.menu-item .menu-icon{
  filter:none !important;
  stroke:currentColor !important;
  color:currentColor !important;
  opacity:.9 !important;
}

#site-header #cx-contact-link.menu-item:hover .menu-icon{
  opacity:1 !important;
}

#site-header .account-menu .menu-separator{
  height:1px !important;
  margin:5px 10px !important;
  background:rgba(255,255,255,.08) !important;
}

#site-header .menu-profile{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  min-height:55px !important;
}

#site-header .menu-profile-avatar{
  width:35px !important;
  height:35px !important;
  min-width:35px !important;
  min-height:35px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  flex:0 0 35px !important;
  display:block !important;
}

#site-header .menu-profile-text{
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

#site-header .menu-profile-name{
  font-size:.88rem !important;
  font-weight:700 !important;
  color:#fff !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#site-header .menu-profile-sub{
  font-size:.8rem !important;
  font-weight:600 !important;
  color:#ff4b4b !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

#site-header .menu-profile-sub.is-premium{
  color:#f5a623 !important;
  text-shadow:0 0 12px rgba(245,166,35,0.35) !important;
}

@media (min-width:2560px){
  #site-header .shadow-top{
    height:210px !important;
  }

  #site-header .ctn{
    max-width:2600px !important;
  }

  #site-header .hd{
    max-width:2600px !important;
    height:120px !important;
    padding:0 6% !important;
  }

  #site-header .hd::after{
    height:240px !important;
  }

  #site-header .logo{
    font-size:3rem !important;
    letter-spacing:-0.025em !important;
  }

  #site-header .logo::after{
    inset:-15px !important;
    border-radius:18px !important;
  }

  #site-header .nav{
    gap:4.5rem !important;
    font-size:1.43rem !important;
  }

  #site-header .nav a::after{
    bottom:-9px !important;
    height:3px !important;
  }

  #site-header .act{
    gap:1.8rem !important;
  }

  #site-header .btn-search{
    gap:1.2rem !important;
    padding:15px 27px !important;
    height:63px !important;
    font-size:1.35rem !important;
    border-radius:18px !important;
  }

  #site-header .btn-search-icon{
    width:27px !important;
    height:27px !important;
  }

  #site-header .btn-login{
    gap:12px !important;
    height:63px !important;
    padding:0 30px !important;
    min-width:210px !important;
    font-size:1.35rem !important;
    border-radius:18px !important;
  }

  #site-header .icon-login{
    width:30px !important;
    height:30px !important;
  }

  #site-header .account-logo{
    width:63px !important;
    height:63px !important;
    min-width:63px !important;
    min-height:63px !important;
    border-radius:150px !important;
    font-size:1.8rem !important;
    border-width:2px !important;
  }

  /* ≥2560px : +30% par rapport à la base 1080p */
  #site-header .account-menu{
    width:286px !important;
    border-radius:20px !important;
    padding:9px !important;
    top:calc(100% + 2px) !important;
  }

  #site-header .account-menu ul{
    gap:5px !important;
  }

  #site-header .account-menu .menu-item{
    min-height:52px !important;
    padding:12px 17px !important;
    border-radius:15px !important;
    gap:13px !important;
    font-size:1.12rem !important;
    border-width:1px !important;
  }

  #site-header .account-menu .menu-icon{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
  }

  #site-header .account-menu .menu-separator{
    height:1px !important;
    margin:7px 13px !important;
  }

  #site-header .menu-profile{
    gap:13px !important;
    padding:13px 16px !important;
    min-height:72px !important;
  }

  #site-header .menu-profile-avatar{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    flex:0 0 46px !important;
  }

  #site-header .menu-profile-text{
    gap:5px !important;
  }

  #site-header .menu-profile-name{
    font-size:1.14rem !important;
  }

  #site-header .menu-profile-sub{
    font-size:1.04rem !important;
  }
}

@media (min-width:1920px) and (max-width:2559px){
  #site-header .shadow-top{
    height:168px !important;
  }

  #site-header .ctn{
    max-width:2000px !important;
  }

  #site-header .hd{
    max-width:2000px !important;
    height:96px !important;
    padding:0 6% !important;
  }

  #site-header .hd::after{
    height:192px !important;
  }

  #site-header .logo{
    font-size:2.4rem !important;
    letter-spacing:-0.022em !important;
  }

  #site-header .logo::after{
    inset:-12px !important;
    border-radius:14px !important;
  }

  #site-header .nav{
    gap:3.6rem !important;
    font-size:1.14rem !important;
  }

  #site-header .nav a::after{
    bottom:-7px !important;
    height:2px !important;
  }

  #site-header .act{
    gap:1.44rem !important;
  }

  #site-header .btn-search{
    gap:0.96rem !important;
    padding:12px 22px !important;
    height:50px !important;
    font-size:1.08rem !important;
    border-radius:14px !important;
  }

  #site-header .btn-search-icon{
    width:22px !important;
    height:22px !important;
  }

  #site-header .btn-login{
    gap:10px !important;
    height:50px !important;
    padding:0 24px !important;
    min-width:168px !important;
    font-size:1.08rem !important;
    border-radius:14px !important;
  }

  #site-header .icon-login{
    width:24px !important;
    height:24px !important;
  }

  #site-header .account-logo{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    border-radius:120px !important;
    font-size:1.44rem !important;
  }

  /* 1920–2559px : +15% par rapport à la base 1080p */
  #site-header .account-menu{
    width:253px !important;
    border-radius:18px !important;
    padding:8px !important;
    top:calc(100% + 1px) !important;
  }

  #site-header .account-menu ul{
    gap:4px !important;
  }

  #site-header .account-menu .menu-item{
    min-height:46px !important;
    padding:10px 15px !important;
    border-radius:13px !important;
    gap:11px !important;
    font-size:0.99rem !important;
  }

  #site-header .account-menu .menu-icon{
    width:20px !important;
    height:20px !important;
    flex:0 0 20px !important;
  }

  #site-header .account-menu .menu-separator{
    margin:6px 11px !important;
  }

  #site-header .menu-profile{
    gap:11px !important;
    padding:11px 14px !important;
    min-height:63px !important;
  }

  #site-header .menu-profile-avatar{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    flex:0 0 40px !important;
  }

  #site-header .menu-profile-text{
    gap:4px !important;
  }

  #site-header .menu-profile-name{
    font-size:1.01rem !important;
  }

  #site-header .menu-profile-sub{
    font-size:0.92rem !important;
  }
}

@media (min-width:1440px) and (max-width:1919px){
  #site-header .shadow-top{
    height:151px !important;
  }

  #site-header .ctn{
    max-width:1800px !important;
  }

  #site-header .hd{
    max-width:1800px !important;
    height:86px !important;
    padding:0 6% !important;
  }

  #site-header .hd::after{
    height:172px !important;
  }

  #site-header .logo{
    font-size:2.16rem !important;
    letter-spacing:-0.021em !important;
  }

  #site-header .nav{
    gap:3.24rem !important;
    font-size:1.03rem !important;
  }

  #site-header .act{
    gap:1.3rem !important;
  }

  #site-header .btn-search{
    gap:0.86rem !important;
    padding:11px 19px !important;
    height:45px !important;
    font-size:0.97rem !important;
    border-radius:13px !important;
  }

  #site-header .btn-search-icon{
    width:19px !important;
    height:19px !important;
  }

  #site-header .btn-login{
    gap:9px !important;
    height:45px !important;
    padding:0 22px !important;
    min-width:151px !important;
    font-size:0.97rem !important;
    border-radius:13px !important;
  }

  #site-header .icon-login{
    width:22px !important;
    height:22px !important;
  }

  #site-header .account-logo{
    width:45px !important;
    height:45px !important;
    min-width:45px !important;
    min-height:45px !important;
    border-radius:108px !important;
    font-size:1.3rem !important;
  }

  #site-header .account-menu{
    width:220px !important;
    border-radius:16px !important;
    padding:7px !important;
  }

  #site-header .account-menu ul{
    gap:3px !important;
  }

  #site-header .account-menu .menu-item{
    min-height:40px !important;
    padding:9px 13px !important;
    border-radius:11px !important;
    gap:10px !important;
    font-size:0.86rem !important;
  }

  #site-header .account-menu .menu-icon{
    width:17px !important;
    height:17px !important;
    flex:0 0 17px !important;
  }

  #site-header .account-menu .menu-separator{
    margin:5px 10px !important;
  }

  #site-header .menu-profile{
    gap:10px !important;
    padding:10px 12px !important;
    min-height:55px !important;
  }

  #site-header .menu-profile-avatar{
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    min-height:35px !important;
    flex:0 0 35px !important;
  }

  #site-header .menu-profile-name{
    font-size:0.88rem !important;
  }

  #site-header .menu-profile-sub{
    font-size:0.8rem !important;
  }
}

@media (max-width:1279px){
  #site-header .hd{
    padding:0 4% !important;
  }

  #site-header .nav{
    gap:2rem !important;
  }
}

@media (min-width:769px) and (max-width:1279px){
  /* 769–1279px : -10% par rapport à la base 1080p */
  #site-header .account-menu{
    width:198px !important;
    border-radius:13px !important;
    padding:6px !important;
  }

  #site-header .account-menu ul{
    gap:3px !important;
  }

  #site-header .account-menu .menu-item{
    min-height:36px !important;
    padding:8px 11px !important;
    border-radius:10px !important;
    gap:9px !important;
    font-size:0.77rem !important;
  }

  #site-header .account-menu .menu-icon{
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
  }

  #site-header .account-menu .menu-separator{
    margin:5px 9px !important;
  }

  #site-header .menu-profile{
    gap:9px !important;
    padding:9px 11px !important;
    min-height:50px !important;
  }

  #site-header .menu-profile-avatar{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    flex:0 0 32px !important;
  }

  #site-header .menu-profile-name{
    font-size:0.79rem !important;
  }

  #site-header .menu-profile-sub{
    font-size:0.72rem !important;
  }
}

@media (max-width:1024px){
  #site-header .hd{
    padding:0 4% !important;
  }

  #site-header .nav{
    gap:1.5rem !important;
  }

  #site-header .btn-search span,
  #site-header .btn-login .login-text{
    display:none !important;
  }

  #site-header .btn-search{
    width:42px !important;
    padding:0 !important;
    justify-content:center !important;
  }

  #site-header .btn-login{
    min-width:42px !important;
    width:42px !important;
    padding:0 !important;
  }
}

@media (max-width:768px){
  #site-header .hd{
    height:70px !important;
    padding:0 20px !important;
  }

  #site-header .logo{
    font-size:1.8rem !important;
  }

  #site-header .hide-on-mobile-accueil,
  #site-header .hide-on-mobile-catalogue{
    display:none !important;
  }

  #site-header .act{
    gap:.8rem !important;
  }

  #site-header .account-logo{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
  }
}

@media (max-width:480px){
  #site-header .hd{
    height:64px !important;
  }

  #site-header .logo{
    font-size:1.6rem !important;
  }

  .hide-on-mobile-top10{
    display:none;
  }

  #site-header .btn-search,
  #site-header .btn-login{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:10px !important;
  }

  #site-header .account-logo{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:50% !important;
  }
}


#site-header .account-logo{ display:none !important; }
#site-header .btn-login{ display:flex !important; }

html.cx-authed #site-header .btn-login{ display:none !important; }
html.cx-authed #site-header .account-logo{ display:flex !important; }

html.cx-anon #site-header .account-logo{ display:none !important; }
html.cx-anon #site-header .btn-login{ display:flex !important; }

/* ============================================================
   Cloche de notifications
   ============================================================ */
#site-header .cx-notif{
  position:relative !important;
  align-items:center !important;
}

#site-header .cx-notif-btn{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  height:42px !important;
  padding:0 !important;
  border-radius:12px !important;
  background:rgba(255,255,255,0.05) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
  color:#fff !important;
  cursor:pointer !important;
  transition:var(--transition-fast, all .2s ease) !important;
}
#site-header .cx-notif-btn:hover{
  background:rgba(255,255,255,0.09) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 8px 25px rgba(0,0,0,0.25) !important;
}

#site-header .cx-notif-badge{
  position:absolute !important;
  top:-5px !important;
  right:-5px !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  border-radius:999px !important;
  background:#ef4444 !important;
  color:#fff !important;
  font-size:.66rem !important;
  font-weight:800 !important;
  line-height:18px !important;
  text-align:center !important;
  border:2px solid #0a0a0f !important;
  box-shadow:0 2px 8px rgba(239,68,68,0.5) !important;
}
#site-header .cx-notif-badge.hidden{ display:none !important; }

#site-header .cx-notif-panel{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;
  width:330px !important;
  max-width:calc(100vw - 24px) !important;
  background:rgba(15,15,15,0.55) !important;
  backdrop-filter:blur(25px) !important;
  -webkit-backdrop-filter:blur(25px) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:18px !important;
  box-shadow:0 20px 40px rgba(0,0,0,0.5) !important;
  transform:translateY(10px) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:all .26s cubic-bezier(.4,0,.2,1) !important;
  z-index:2000 !important;
  overflow:hidden !important;
  display:none !important;
}
#site-header .cx-notif-panel.hidden{ display:none !important; }
#site-header .cx-notif-panel.show{
  display:block !important;
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}

#site-header .cx-notif-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:13px 16px !important;
  border-bottom:1px solid rgba(255,255,255,0.07) !important;
  font-size:.92rem !important;
  font-weight:800 !important;
  color:#fff !important;
}
#site-header .cx-notif-readall{
  background:transparent !important;
  border:none !important;
  color:#a78bfa !important;
  font-size:.76rem !important;
  font-weight:600 !important;
  cursor:pointer !important;
  padding:4px 6px !important;
  border-radius:8px !important;
  transition:background .16s ease, color .16s ease !important;
}
#site-header .cx-notif-readall:hover{ background:rgba(124,58,237,0.16) !important; color:#fff !important; }

#site-header .cx-notif-list{
  max-height:min(60vh, 380px) !important;
  overflow-y:auto !important;
  scrollbar-width:thin !important;
}
#site-header .cx-notif-item{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  padding:12px 16px !important;
  text-decoration:none !important;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,0.05) !important;
  transition:background .16s ease !important;
}
#site-header .cx-notif-item:hover{ background:rgba(255,255,255,0.05) !important; }
#site-header .cx-notif-item.unread{ background:rgba(124,58,237,0.12) !important; }
#site-header .cx-notif-item.unread:hover{ background:rgba(124,58,237,0.18) !important; }
#site-header .cx-notif-item-title{ font-size:.84rem !important; font-weight:700 !important; }
#site-header .cx-notif-item-body{
  font-size:.78rem !important;
  color:rgba(255,255,255,0.62) !important;
  line-height:1.4 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
#site-header .cx-notif-item-time{ font-size:.68rem !important; color:rgba(255,255,255,0.4) !important; }
#site-header .cx-notif-empty{
  padding:28px 16px !important;
  text-align:center !important;
  color:rgba(255,255,255,0.45) !important;
  font-size:.85rem !important;
}

@media (max-width:600px){
  #site-header .cx-notif-panel{
    position:fixed !important;
    top:72px !important;
    right:10px !important;
    left:10px !important;
    width:auto !important;
    max-width:none !important;
  }
}