@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%;}

/* Téléphone : le bouton 🌙 passe dans le menu ☰ (sinon le panier sort de l'écran) */
@media (max-width:768px){ html body #themeBtn{display:none !important;} }

/* Petits téléphones (iPhone SE, Galaxy Fold…) : barre du haut plus compacte, icônes seules */
@media (max-width:400px){
  nav .nav-r{gap:4px !important;}
  #authBtn .nav-lbl,#navFeedBtn .nav-lbl{display:none !important;}
  #authBtn,#navFeedBtn{min-width:34px;padding-left:.45rem !important;padding-right:.45rem !important;}
}
@media (max-width:340px){
  nav{padding-left:8px !important;padding-right:8px !important;}
  .site-switch{display:none !important;}           /* le lien vers Benni.Raw reste dans le menu ☰ */
}
@media (max-width:300px){ html body #navFeedBtn{display:none !important;} }   /* le blog reste dans le menu ☰ */

/* Téléphone couché et petite tablette : liens du haut dans le menu ☰ pour que tout tienne */
@media (min-width:769px) and (max-width:1100px){
  nav .nav-links{display:none !important;}
  nav .mm-btn{display:inline-flex !important;}
  #langWrap{display:none !important;}               /* la langue se choisit dans le menu ☰ */
}

/* 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{min-width:40px;min-height:40px;}
  #themeBtn{min-width:36px;min-height:36px;}
}

/* ── 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);}

/* Petits téléphones : les chiffres clés du haut (200-500 MRU, 24-72 h, 3 modes) tiennent sans être coupés */
@media (max-width:380px){
  .hero-stats{padding-left:.6rem !important;padding-right:.6rem !important;}
  .hero-stats .hstat{min-width:0;padding-left:.2rem !important;padding-right:.2rem !important;}
  .hero-stats .hstat-l{font-size:9.5px !important;letter-spacing:.06em !important;}
}
/* Garde-fous : médias jamais plus larges que l'écran, mots très longs coupés proprement */
img,video,svg,canvas,iframe{max-width:100%;}
h1,h2,h3,.sh{overflow-wrap:break-word;}

/* 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-h1{font-size:clamp(28px,8.5vh,40px) !important;line-height:1.08 !important;}
}

/* Ordinateurs portables et écrans moyens (1101–1679 px) : la barre gardait 7 liens + 7 boutons et le panier sortait de l'écran (1280 px).
   On garde les rubriques principales ; Avis, Paiement, À propos et Contact passent dans le menu ☰ (ils y sont déjà). */
@media (min-width:1101px) and (max-width:1679px){
  nav .nav-links .nav-a[href="#confiance"],nav .nav-links .nav-a[href="#paiement"],nav .nav-links .nav-a[href="#about"],nav .nav-links .nav-a[href="#contact"]{display:none !important;}
  nav .mm-btn{display:inline-flex !important;}
}
nav .nav-pill,nav .nav-feed-btn,nav .nav-a{white-space:nowrap;}

/* Logo « D. » devant le nom dans la barre du haut */
nav .nav-logo{display:inline-flex !important;align-items:center;gap:.5em;}
.nav-logo-ico{flex:0 0 auto;width:28px;height:28px;display:block;border-radius:8px;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){ nav .nav-logo:hover .nav-logo-ico{transform:rotate(-8deg) scale(1.08);} }
@media (max-width:360px){ .nav-logo-ico{width:24px;height:24px;} nav .nav-logo{gap:.35em;} }
@media (prefers-reduced-motion:reduce){ .nav-logo-ico{transition:none;} }