@charset "UTF-8";
/* Adaptation à tous les écrans (petit téléphone, iPhone, téléphone couché, tablette, ordinateur, télé).
   Chargé après site.css et mode-sombre.css. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* Petits téléphones (iPhone SE, Galaxy Fold…) : le bouton 🌙 passe dans le menu ☰ (sinon le panier sort de l'écran) */
@media (max-width:360px){
  nav .nav-pill[data-mode-btn]{display:none !important;}
  nav .nav-r{gap:4px !important;}
}
@media (max-width:340px){
  .site-switch{display:none !important;}           /* le lien vers DiaGana reste dans le menu ☰ (sinon le panier sort de l'écran) */
}

/* Téléphones : « Benni.Raw » reste sur une seule ligne (sinon il se coupait en « Benn / i.Raw ») */
@media (max-width:480px){
  .hero-text-name{font-size:min(68px,16.5vw) !important;white-space:nowrap;}
}

/* Menu ☰ : panneau centré et pas trop large sur tablette et grand écran */
@media (min-width:600px){ .mm-sheet{max-width:520px;margin:0 auto;} }

/* Écrans tactiles : boutons de fermeture assez grands pour le doigt */
@media (pointer:coarse){
  button.xb,.modal-close,.drawer-close{min-width:40px;min-height:40px;}
}

/* ── Mode léger (appareils modestes, détecté automatiquement — voir js/*-fluidite.js) ──
   On garde le design, on retire seulement ce qui coûte cher à la carte graphique. */
/* :not(#…) donne à ces règles la priorité sur les styles d'origine (qui utilisent des identifiants) */
html.leger:not(#_a):not(#_b) body *,html.leger:not(#_a):not(#_b) body *::before,html.leger:not(#_a):not(#_b) body *::after{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
html.leger:not(#_a) #ax-grain,html.leger:not(#_a) .lg-sheen,html.leger:not(#_a) .a7-spot,html.leger:not(#_a) #ax-cur,html.leger:not(#_a) #ax-ring{display:none !important;}
html.leger .ab-sec::before{display:none;}
html.leger .hero-text-blur{filter:none !important;}
html.leger{scroll-behavior:auto;}
/* Les éléments qui comptaient sur le flou gardent un fond lisible */
html.leger nav,html.leger .lang-dd,html.leger .hero-stats,html.leger .marquee-section{background-color:var(--bg,#fff);}
html.leger[data-mode="sombre"] nav,html.leger[data-mode="sombre"] .lang-dd,html.leger[data-mode="sombre"] .hero-stats{background-color:var(--dk-surface);}

/* Téléphone couché (écran bas) : titre d'accueil plus petit pour voir le bouton sans défiler */
@media (orientation:landscape) and (max-height:500px){
  .hero-text-name{font-size:clamp(40px,14vh,64px) !important;}
}

/* Logo « Sticker B. » devant le nom dans la barre du haut et le pied de page */
.nav-logo{display:inline-flex !important;align-items:center;gap:.45em;}
.nav-logo-ico{flex:0 0 auto;width:30px;height:30px;display:block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
footer .nav-logo-ico,.footer .nav-logo-ico{width:34px;height:34px;}
@media (hover:hover){ .nav-logo:hover .nav-logo-ico{transform:rotate(-8deg) scale(1.08);} }
@media (max-width:360px){ .nav-logo-ico{width:26px;height:26px;} .nav-logo{gap:.35em;} }
@media (prefers-reduced-motion:reduce){ .nav-logo-ico{transition:none;} }

/* Téléphones (≤ 430 px) : mode sombre et « Envies » passent dans le menu ☰ (ils y sont déjà) pour que le panier tienne dans la barre */
@media (max-width:430px){
  nav .nav-r .nav-pill[data-mode-btn],nav .nav-r .nav-pill[onclick="openWishlist()"]{display:none !important;}
  nav .nav-r{gap:5px !important;}
}