/* ===== Easy Shop CI — port fidèle du thème (couleurs/classes/valeurs identiques au live) ===== */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; color: #1a1a1a; background: #f5f6fa; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

/* LIEN D'ÉVITEMENT.
   L'en-tête compte logo, recherche, dix entrées de menu et les icônes : au
   clavier, il fallait tout retraverser sur CHAQUE page avant d'atteindre le
   contenu. Ce lien est le premier élément focusable et saute directement au
   contenu. Il reste hors écran jusqu'à ce qu'on le focalise, donc invisible
   pour la souris et le doigt. */
.saut-contenu {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: #1565C0; color: #fff; padding: 10px 18px;
  border-radius: 0 0 8px 8px; font-weight: 700; font-size: 15px;
  transition: top .15s ease;
}
.saut-contenu:focus { top: 0; color: #fff; }

/* Visible pour Google et les lecteurs d'écran, invisible à l'œil.
   Sert au <h1> de l'accueil : la page n'en avait AUCUN. Le titre le plus fort
   y était un <h2> de bannière, qui change à chaque diapositive — impossible d'en
   faire le titre de la page. Or le h1 est l'un des signaux les plus lus par
   Google pour comprendre de quoi traite une page.
   On ne masque PAS avec display:none ni visibility:hidden : ces deux-là retirent
   aussi l'élément des lecteurs d'écran, ce qui viderait la mesure de son sens. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ANNEAU DE FOCUS CLAVIER.
   Le site supprime l'outline natif à six endroits pour habiller ses champs. Un
   visiteur qui navigue au clavier — ou avec une aide technique — n'avait donc
   plus AUCUN repère : il tabulait à l'aveugle sur toute la boutique.
   `:focus-visible` ne se déclenche PAS au clic de souris ni au doigt : le
   rendu habituel est strictement inchangé pour tout le monde. Il n'apparaît
   qu'à la navigation clavier, exactement là où il manquait. */
:focus-visible {
  outline: 3px solid #1565C0;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Supprime le délai de ~300 ms que les navigateurs mobiles gardaient pour voir
   si l'appui allait devenir un double-tap de zoom. Sans ça, chaque bouton répond
   avec un tiers de seconde de retard : le client croit que rien ne s'est passé et
   appuie une deuxième fois — d'où les doubles ajouts au panier.
   `manipulation` autorise toujours le défilement et le zoom à deux doigts ; seul
   le double-tap-pour-zoomer est abandonné, et il n'a aucun usage ici. */
a, button, input, select, textarea, label, [role="button"], .product-card {
  touch-action: manipulation;
}

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1565C0; color: #fff; padding: 12px 24px;
  border-radius: 8px; font-weight: 600; font-size: 15px;
  border: none; cursor: pointer; transition: background .2s;
}
.btn-primary:hover { background: #0d47a1; color: #fff; }
.btn-secondary {
  display: inline-block; text-align: center;
  border: 2px solid #1565C0; color: #1565C0; padding: 11px 24px;
  border-radius: 8px; font-weight: 600; transition: all .2s;
}
.btn-secondary:hover { background: #1565C0; color: #fff; }
.btn-full { width: 100%; justify-content: center; }


/* ===== HEADER ===== */
.site-header { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.1); position: sticky; top: 0; z-index: 1000; }
.header-topbar { border-bottom: 1px solid #f0f0f0; padding: 12px 0; }
.topbar-inner { max-width: 1380px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 20px; }
.site-logo { display: flex; align-items: center; }
.logo-text { font-size: 24px; font-weight: 900; color: #c62828; letter-spacing: -1px; }

.header-search { flex: 1; display: flex; border: 2px solid #e8e8e8; border-radius: 30px; overflow: hidden; transition: border-color .2s; max-width: 560px; }
.header-search:focus-within { border-color: #c62828; }
/* 16px OBLIGATOIRE sur tout champ de saisie. En dessous, iOS zoome de lui-même
   dès le premier appui : le client se retrouve avec une page déformée qu'il doit
   repincer pour continuer, en pleine recherche de produit. Ce n'est pas un
   réglage esthétique, c'est un comportement imposé par Safari mobile. */
.header-search input { flex: 1; padding: 10px 20px; border: none; outline: none; font-size: 16px; background: transparent; }
.header-search button { background: #c62828; border: none; color: #fff; padding: 0 22px; cursor: pointer; font-size: 16px; transition: background .2s; }
.header-search button:hover { background: #b71c1c; }

.header-contacts { display: flex; gap: 24px; margin-left: auto; }
.contact-item { display: flex; align-items: center; gap: 10px; }
.contact-item i { font-size: 22px; color: #c62828; }
.contact-item span { display: block; font-size: 11px; color: #64748b; }
.contact-item strong { display: block; font-size: 15px; color: #c62828; font-weight: 800; }

.header-nav { background: #fce4e4; border-bottom: 1px solid #f5c6c6; }
.nav-inner { max-width: 1380px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 6px; }
.nav-menu { display: flex; gap: 2px; }
.nav-menu a { padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: #333; border-radius: 6px; transition: color .15s, background .15s; white-space: nowrap; }
.nav-menu a:hover { color: #c62828; background: rgba(198,40,40,.08); }
.nav-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-icons a { position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; color: #333; transition: all .2s; }
.nav-icons a:hover { background: rgba(198,40,40,.1); color: #c62828; }
.badge { position: absolute; top: 2px; right: 2px; background: #c62828; color: #fff; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* Mobile header */
.mobile-header { display: none; align-items: center; justify-content: space-between; padding: 10px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; position: relative; height: 60px; }
.mobile-menu-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 5px; width: 36px; flex-shrink: 0; }
.mobile-menu-btn span { display: block; height: 2.5px; width: 100%; background: #0f172a; border-radius: 2px; }
.mobile-logo { position: absolute; left: 50%; transform: translateX(-50%); font-size: 19px; font-weight: 900; color: #c62828; letter-spacing: -0.5px; }
.mobile-right-icons { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.mobile-search-btn { background: none; border: none; cursor: pointer; font-size: 18px; color: #0f172a; padding: 8px; border-radius: 8px; transition: background .15s; }
.mobile-search-btn:hover { background: #f0f4ff; color: #1d4ed8; }
.mobile-cart { position: relative; font-size: 18px; color: #0f172a; padding: 8px; border-radius: 8px; transition: background .15s; }
.mobile-cart:hover { background: #f0f4ff; color: #1d4ed8; }
.mobile-cart .badge { position: absolute; top: 2px; right: 2px; }
.mobile-search-bar { display: none; background: #fff; border-bottom: 1px solid #e8e8e8; padding: 10px 16px; }
.mobile-search-bar.open { display: block; }
.mobile-search-bar form { display: flex; border: 2px solid #1d4ed8; border-radius: 10px; overflow: hidden; }
.mobile-search-bar input { flex: 1; padding: 10px 14px; border: none; outline: none; font-size: 16px; }   /* 16px : voir .header-search input */
.mobile-search-bar button { background: #1d4ed8; border: none; color: #fff; padding: 0 16px; font-size: 15px; cursor: pointer; }
.mobile-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1100; }
.mobile-menu-overlay.open { display: block; }
.mobile-menu { position: fixed; top: 0; left: -300px; width: 280px; height: 100%; background: #0d1117; z-index: 1200; transition: left .3s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow-y: auto; }
.mobile-menu.open { left: 0; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 18px; border-bottom: 1px solid #1e293b; }
.mobile-menu-top .logo-text { color: #f1f5f9; font-size: 19px; }
.mobile-menu-close { background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.mobile-menu-close:hover { color: #fff; }
.mobile-menu-links { list-style: none; padding: 12px 0; flex: 1; }
.mobile-menu-links li a { display: flex; align-items: center; gap: 14px; padding: 16px 22px; color: #e2e8f0; font-size: 15px; font-weight: 600; border-left: 3px solid transparent; transition: all .15s; }
.mobile-menu-links li a i { width: 18px; color: #3b82f6; font-size: 16px; }
.mobile-menu-links li a:hover { background: #1e293b; border-left-color: #3b82f6; color: #fff; }
.mobile-menu-links li + li { border-top: 1px solid #1e293b; }
.mobile-cat-divider { border-top: 1px solid #1e293b !important; }
.mobile-cat-divider span { display: block; padding: 10px 22px 4px; font-size: .68rem; font-weight: 800; color: #3b82f6; text-transform: uppercase; letter-spacing: 1.5px; }
.mobile-menu-footer { padding: 20px 22px; border-top: 1px solid #1e293b; display: flex; align-items: center; gap: 16px; }
.mobile-menu-footer a { color: #64748b; font-size: 18px; transition: color .15s; }
.mobile-menu-footer a:hover { color: #fff; }

/* Barre catégories desktop */
.header-categories { background: #0f172a; border-top: 1px solid #1e293b; }
.cat-inner { max-width: 1600px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.cat-inner::-webkit-scrollbar { display: none; }
.cat-item { position: relative; flex-shrink: 0; }
.cat-link { display: flex; align-items: center; gap: 7px; padding: 11px 15px; color: rgba(255,255,255,.82); font-size: .83rem; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; transition: all .2s; }
.cat-link i { font-size: .8rem; opacity: .8; }
.cat-link:hover { color: #60a5fa; border-bottom-color: #3b82f6; }
.cat-dropdown { display: none; position: absolute; top: 100%; left: 0; background: #fff; min-width: 210px; border-radius: 0 0 10px 10px; box-shadow: 0 8px 32px rgba(0,0,0,.18); z-index: 2000; padding: 6px 0; }
.cat-item:hover .cat-dropdown { display: block; }
.cat-dropdown a { display: block; padding: 9px 18px; color: #0f172a; font-size: .83rem; font-weight: 500; transition: background .12s; }
.cat-dropdown a:hover { background: #eff6ff; color: #1d4ed8; padding-left: 22px; }
.cat-dropdown hr { border: none; border-top: 1px solid #f1f5f9; margin: 4px 0; }

@media (max-width: 768px) {
  .header-topbar, .header-nav, .header-categories { display: none !important; }
  .mobile-header { display: flex !important; }
}

/* ===== HERO (valeurs réelles de la section) ===== */
.hero-layout { padding: 12px 20px; background: #f5f6fa; }
/* Une seule colonne depuis la suppression de la bannière « Deals du jour » : la
   colonne de 360 px qui l'accueillait laissait un vide à droite, et min-height
   étirait le bandeau au-delà de son contenu. */
.hero-wrapper { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 1380px; margin: 0 auto; }
.hero-wrapper .spinner { grid-column: 1 / -1; }
.hero-slider-wrap { position: relative; border-radius: 14px; overflow: hidden; }
.hero-slider { position: relative; height: 400px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; display: flex; align-items: center; }
.hero-slide.active { opacity: 1; z-index: 1; }
.hero-slide:nth-child(1) { background: linear-gradient(135deg, #0a1628 0%, #0d2d5e 60%, #1a4a8a 100%); }
.hero-slide:nth-child(2) { background: linear-gradient(135deg, #1a0533 0%, #3d0e6b 60%, #6a1fbf 100%); }
.hero-slide:nth-child(3) { background: linear-gradient(135deg, #0d2a0d 0%, #1b5e20 60%, #2e7d32 100%); }
.slide-content { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 30px 40px; }
.slide-text { flex: 1; color: #fff; z-index: 2; }
.slide-badge { display: inline-block; background: #c62828; color: #fff; font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 999px; margin-bottom: 12px; text-transform: uppercase; }
.slide-text h2 { font-size: 28px; font-weight: 900; line-height: 1.2; margin-bottom: 8px; }
.slide-text p { font-size: 14px; opacity: .85; margin-bottom: 10px; }
.slide-price { font-size: 24px; font-weight: 900; color: #ffd54f; margin-bottom: 18px; }
.slide-btn { display: inline-block; background: #c62828; color: #fff; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: background .2s; }
.slide-btn:hover { background: #b71c1c; color: #fff; }
.slide-btn.small { padding: 7px 16px; font-size: 12px; }
/* align-items:flex-end + décalage : le visuel descend légèrement plus bas que le bloc
   de texte au lieu d'être centré, ce qui lui donne plus de présence. Le débordement
   est absorbé par overflow:hidden du slider. */
.slide-image { flex: 0 1 auto; max-width: 74%; min-width: 0; display: flex; justify-content: flex-end; align-items: flex-end; margin-bottom: -46px; }
.slide-image img { max-width: 100%; max-height: 420px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.4)); }
.slide-placeholder { width: 100%; max-width: 180px; aspect-ratio: 1; height: auto; background: rgba(255,255,255,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.slide-placeholder i { font-size: clamp(28px, 8vw, 60px); color: rgba(255,255,255,.4); }
.slider-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.dot { width: 10px; height: 10px; border-radius: 999px; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: all .2s; }
.dot.active { background: #fff; width: 26px; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.2); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 13px; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.slider-arrow:hover { background: rgba(255,255,255,.35); }
.slider-arrow.prev { left: 10px; }
.slider-arrow.next { right: 10px; }
.hero-right { display: flex; flex-direction: column; gap: 10px; }
.hero-banner-top { position: relative; border-radius: 12px; overflow: hidden; flex: 1; display: block; background: linear-gradient(135deg, #1a0533 0%, #3d0e6b 60%, #6a1fbf 100%); min-height: 200px; }
/* contain : le visuel est détouré, il doit flotter en entier sur le fond sans être rogné.
   Marge basse réduite au minimum pour qu'il occupe un maximum de place, le dégradé de
   .banner-text-overlay assure la lisibilité du titre par-dessus.
   Positionnement absolu indispensable : sinon l'image dicte la hauteur du conteneur
   (hauteur auto) et la bannière devient démesurée sur mobile. */
.hero-banner-top img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px 8px 40px; filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)); }
.banner-placeholder.dark { width: 100%; height: 100%; min-height: 200px; background: linear-gradient(135deg, #1a0533, #6a1fbf); }
.banner-text-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%); }
.banner-text-overlay h3 { color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.hero-mini-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-banner { border-radius: 12px; overflow: hidden; padding: 16px 14px; display: flex; align-items: center; gap: 8px; position: relative; min-height: 190px; transition: transform .2s; }
.mini-banner:hover { transform: translateY(-2px); }
/* height + max-height : les visuels n'ont pas le même format (manette presque carrée,
   console en portrait). Se caler uniquement sur la hauteur rendait la console
   visuellement deux fois plus petite. */
.mini-banner-img { position: absolute; right: 0; bottom: 0; height: 182px; max-width: 72%; width: auto; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
/* borne la largeur du texte : sans ça le visuel produit, positionné en bas à droite,
   passe par-dessus le titre et le sous-titre */
.mini-banner-text { z-index: 1; max-width: 68%; }
.mini-banner-text strong { display: block; font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.mini-banner-text span { display: block; font-size: 10px; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.mini-banner-text em { display: inline-block; background: #fff; color: #1a1a1a; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 6px; font-style: normal; }

@media (max-width: 768px) {
  .hero-layout { padding: 10px; }
  .hero-wrapper { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; }
  .hero-slider { height: 260px; }
  .slide-content { padding: 20px 18px; }
  .slide-text h2 { font-size: 18px; }
  .slide-text p { font-size: 12px; }
  .slide-price { font-size: 18px; margin-bottom: 12px; }
  .slide-image { max-width: 42%; }
  .slide-image img { max-height: 230px; }
  .slide-placeholder { max-width: 100px; }
  /* le slider se manipule au doigt sur mobile : les flèches masquaient le sous-titre */
  .slider-arrow { display: none; }
  .hero-right { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-banner-top { min-height: 150px; }
  .hero-mini-banners { display: contents; }
  .mini-banner { min-height: 176px; }
  .banner-text-overlay h3 { font-size: 13px; }
}
@media (max-width: 480px) {
  .hero-slider { height: 220px; }
  .slide-text h2 { font-size: 15px; }
  .slide-price { font-size: 15px; }
  .slide-image { max-width: 38%; }
  .slide-image img { max-height: 165px; }
  .slide-placeholder { max-width: 72px; }
  .hero-right { grid-template-columns: 1fr; }
  /* pleine largeur à ce palier : 130px serait trop écrasé pour la bannière */
  .hero-banner-top { min-height: 200px; }
  .hero-mini-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* le texte passe sur 2 lignes à cette largeur : le bloc est plus haut pour laisser
     le visuel respirer sans venir se coller derrière le titre */
  /* texte calé en haut : le visuel occupe le bas du bloc, sans ça il passe
     derrière le sous-titre sur les petites largeurs */
  .mini-banner { min-height: 196px; padding: 14px 12px; align-items: flex-start; }
  .mini-banner-text { max-width: 100%; }
  .mini-banner-img { height: 112px; }
  .mini-banner-text { max-width: 78%; }
}

/* ===== SECTION HEADER ===== */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.section-header h2 { font-size: 22px; font-weight: 700; color: #1a1a1a; }
.see-all { color: #1565C0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ===== TRUST BAR (design carte réel) ===== */
/* ===== Badges de confiance =====
   Ce sont eux qui rassurent un acheteur qui ne connaît pas la boutique et qui
   hésite à donner son adresse. Ils doivent avoir l'air soignés, pas bricolés. */
.trust-bar { background: #fff; padding: 30px 0; }
.trust-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust-item {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border-radius: 16px; padding: 18px 18px;
  border: 1px solid #e9eef7;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s;
}
.trust-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(29,78,216,.10);
  border-color: #c7d7f5;
}
/* Pastille dégradée derrière l'icône : beaucoup plus net qu'un emoji, qui change
   de dessin d'un téléphone à l'autre et casse l'harmonie. */
.trust-item > i, .trust-emoji {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 4px 12px rgba(29,78,216,.28);
}
.trust-emoji { font-size: 24px; background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.trust-item strong { display: block; font-size: 13.5px; font-weight: 800; color: #0f172a; margin-bottom: 2px; }
.trust-item span, .trust-item p { font-size: 12px; color: #64748b; margin: 0; }
@media (max-width: 768px) {
  .trust-items { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 14px 12px; gap: 10px; }
  .trust-emoji { font-size: 38px; }
  .trust-item strong { font-size: 12px; }
  .trust-item span { font-size: 11px; }
  /* Pastille réduite : à 46 px elle mangeait un tiers de la carte et poussait
     « Payez à la réception » sur trois lignes. */
  .trust-item > i { width: 38px; height: 38px; border-radius: 12px; font-size: 16px; }
}

/* ===== CATEGORIES GRID ===== */
.categories-section { padding: 40px 0; }
.categories-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.cat-card { background: #fff; border-radius: 12px; padding: 20px 12px; text-align: center; transition: all .2s; border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.cat-card:hover { border-color: #1565C0; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(21,101,192,.15); }
.cat-icon { font-size: 28px; color: #1565C0; margin-bottom: 10px; }
.cat-icon img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; transition: transform .3s; }
.cat-card:hover .cat-icon img { transform: scale(1.08); }
.cat-card span { font-size: 12px; font-weight: 600; color: #333; }

/* ===== PRODUCTS GRID / CARD ===== */
.products-section { padding: 40px 0; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ===== Vitrine d'accueil : 24 produits en rangées qui défilent =====
   Une grille de 24 cartes obligerait à faire défiler très longtemps sur téléphone
   avant d'atteindre la suite de la page. Trois rangées horizontales laissent
   parcourir beaucoup de produits sans allonger la page.
   scroll-snap donne le cran de défilement sans une ligne de JavaScript. */
.vitrine-lignes { display: flex; flex-direction: column; gap: 18px; }
.rangee {
  display: flex; gap: 16px; overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  /* marges négatives : les cartes touchent le bord de l'écran en défilant,
     le rembourrage les réaligne sur la colonne au repos */
  margin: 0 -16px; padding: 4px 16px 10px;
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.rangee::-webkit-scrollbar { height: 5px; }
.rangee::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.rangee::-webkit-scrollbar-track { background: transparent; }
.rangee-case { flex: 0 0 210px; scroll-snap-align: start; }
.rangee-case > * { height: 100%; }

@media (max-width: 700px) {
  /* Une carte et demie visible. C'était 44 % (deux cartes) : les cartes tombaient
     à 125 px et le prix se cassait en deux lignes — « 150 000 » puis « FCFA » —
     sur les 24 cartes. Le prix est l'information qu'on lit en premier, elle ne
     peut pas être coupée. Le débord sur la droite reste, il indique qu'on peut
     faire défiler. */
  .rangee-case { flex: 0 0 68%; }
  .rangee { gap: 12px; }
}
.product-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: all .2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }
.product-card-link { display: block; }
.product-image-wrap { position: relative; overflow: hidden; background: #f8f8f8; aspect-ratio: 1; }
.product-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.product-card:hover .product-img { transform: scale(1.05); }
.badge-discount { position: absolute; top: 10px; left: 10px; background: #e53935; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; z-index: 1; }
.product-info { padding: 14px; }
.product-vendor { font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.product-title { font-size: 14px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Le prix ne doit jamais se couper : « 150 000 » sur une ligne et « FCFA » sur la
   suivante donne l'impression d'une page cassée, juste sur l'information qui
   décide de l'achat. flex-wrap permet au prix barré de passer dessous plutôt que
   de comprimer le prix courant. */
.product-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-current { font-size: 16px; font-weight: 800; color: #1565C0; white-space: nowrap; }
.price-old { font-size: 13px; color: #64748b; text-decoration: line-through; white-space: nowrap; }
.stock-note { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.stock-note.ok { background: #e8f5e9; color: #2e7d32; }

/* ===== PRODUCT PAGE (valeurs réelles de la section) ===== */
.product-page { padding: 20px 0 60px; max-width: 1100px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.breadcrumb { font-size: 13px; color: #64748b; margin-bottom: 24px; }
.breadcrumb a { color: #1565C0; }
.breadcrumb a:hover { text-decoration: underline; }
/* ===== PALIERS DE QUANTITÉ (lots) =====
   Le client choisit « 1 / 2 / 3 unités » et voit l'économie écrite, au lieu de
   la calculer. Chaque carte est un <label> qui enveloppe sa case radio : tout
   le bloc devient cliquable — une cible tactile de 60 px de haut plutôt qu'un
   petit rond de 20 px. */
.lots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.lot {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border: 2px solid #e2e8f0; border-radius: 12px;
  cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
  min-height: 60px;
}
.lot:hover { border-color: #bfdbfe; }
.lot.choisi { border-color: #1565C0; background: #eff6ff; }
.lot input[type="radio"] { width: 20px; height: 20px; accent-color: #1565C0; flex-shrink: 0; margin: 0; }
/* Deux colonnes fixes — libellé à gauche, prix à droite. Le badge de remise passe
   SOUS le libellé au lieu de pousser le prix hors de l'écran : sur un téléphone
   de 360 px, « 2 unités » + « Économisez 17 % » + le prix ne tiennent pas sur
   une ligne, et c'est le prix qui se faisait écraser. */
.lot-gauche { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.lot-nom { font-weight: 700; font-size: 15px; color: #0f172a; white-space: nowrap; }
.lot-remise {
  background: #1565C0; color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 6px; white-space: nowrap;
}
.lot-prix { margin-left: auto; text-align: right; line-height: 1.35; flex-shrink: 0; }
.lot-prix strong { display: block; font-size: 16px; font-weight: 800; color: #0f172a; white-space: nowrap; }
.lot-prix s { font-size: 12.5px; color: #64748b; white-space: nowrap; }
.lot-populaire {
  position: absolute; top: -10px; right: 12px;
  background: #c62828; color: #fff; font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .2px;
}
@media (max-width: 380px) {
  .lot { padding: 12px 13px; gap: 8px; }
  .lot-nom { font-size: 14.5px; }
  .lot-prix strong { font-size: 15px; }
}

.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-bottom: 56px; }
.main-image { position: relative; border-radius: 16px; overflow: hidden; background: #f8f8f8; aspect-ratio: 1; }
.main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; cursor: zoom-in; }
.main-image:hover img { transform: scale(1.04); }
.fullscreen-btn { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.9); border: none; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 14px; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,.12); transition: all .2s; }
.fullscreen-btn:hover { background: #1565C0; color: #fff; }
.gallery-badge { position: absolute; top: 12px; left: 12px; background: #e53935; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.thumbnails { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.thumb-wrap { width: 70px; height: 70px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; transition: border-color .2s; flex-shrink: 0; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.thumb-wrap.active, .thumb-wrap:hover { border-color: #1565C0; }
.img-dots { display: none; justify-content: center; gap: 6px; margin-top: 10px; }
.img-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background .2s; }
.img-dot.active { background: #1565C0; }
.stock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; }
.in-stock { background: #e8f5e9; color: #2e7d32; }
.out-stock { background: #e3f2fd; color: #1565C0; }
.product-vendor-label { color: #1565C0; font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .8px; margin-bottom: 6px; }
.product-name { font-size: 24px; font-weight: 900; color: #0f172a; margin-bottom: 14px; line-height: 1.3; }
.product-pricing { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.big-price { font-size: 32px; font-weight: 900; color: #1565C0; }
.big-price-old { font-size: 16px; color: #64748b; text-decoration: line-through; }
.big-discount { background: #ffebee; color: #c62828; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.savings-line { font-size: 13px; color: #2e7d32; font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 6px; }
.variant-selector { margin-bottom: 18px; }
.option-group { margin-bottom: 12px; }
.option-group label, .option-group .option-titre { font-size: 13px; font-weight: 700; display: block; margin-bottom: 8px; color: #0f172a; }
.option-values { display: flex; flex-wrap: wrap; gap: 8px; }
.option-btn { padding: 7px 16px; border: 2px solid #e0e0e0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; transition: all .15s; font-weight: 600; }
.option-btn:hover, .option-btn.selected { border-color: #1565C0; color: #1565C0; background: #e3f2fd; }
.qty-label { font-size: 13px; font-weight: 700; display: block; margin-bottom: 8px; color: #0f172a; }
.qty-row { margin-bottom: 16px; }
.qty-control { display: inline-flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 10px; overflow: hidden; }
.qty-control button { background: #f5f5f5; border: none; padding: 10px 18px; font-size: 18px; cursor: pointer; font-weight: 700; transition: background .15s; }
.qty-control button:hover { background: #e0e0e0; }
.qty-control input { width: 56px; text-align: center; border: none; font-size: 16px; font-weight: 700; outline: none; padding: 10px 0; }
.product-btns { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.btn-add-cart { padding: 14px 16px; background: #1565C0; color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-add-cart:hover { background: #0d47a1; }
.btn-add-cart.disabled { background: #bbb; cursor: not-allowed; }
.trust-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.trust-badges .trust-item { display: flex; align-items: center; gap: 10px; background: #f8faff; border: 1px solid #e8eef8; border-radius: 10px; padding: 12px; box-shadow: none; }
.trust-badges .trust-item i { font-size: 1.3rem; color: #1565C0; flex-shrink: 0; }
.trust-badges .trust-item div { display: flex; flex-direction: column; }
.trust-badges .trust-item strong { font-size: 12px; font-weight: 700; color: #0f172a; }
.trust-badges .trust-item span { font-size: 11px; color: #64748b; }
.share-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #64748b; }
.share-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; transition: transform .2s; }
.share-btn:hover { transform: scale(1.1); }
.whatsapp-share { background: #25D366; }
.facebook-share { background: #1877F2; }
.twitter-share { background: #000; }
.features-section { background: #f8faff; border-radius: 20px; padding: 40px 32px; margin-bottom: 48px; }
.section-title { font-size: 22px; font-weight: 900; color: #0f172a; text-align: center; margin-bottom: 32px; }
.product-tabs { margin-bottom: 56px; }
.tabs-nav { display: flex; gap: 4px; border-bottom: 2px solid #f0f0f0; margin-bottom: 28px; overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn { padding: 12px 22px; background: none; border: none; font-size: 14px; font-weight: 700; color: #64748b; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; }
.tab-btn.active, .tab-btn:hover { color: #1565C0; border-bottom-color: #1565C0; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.product-description-content { color: #334155; max-width: 860px; font-size: 14px; line-height: 1.7; }
.livraison-content { max-width: 700px; display: flex; flex-direction: column; gap: 18px; }
/* Même langage visuel que les cartes de réassurance (.trust-item) : pastille
   dégradée, carte blanche, léger relief au survol. Le bloc était en aplat bleu
   pâle avec une icône nue, il faisait plus vieux que le reste de la page. */
.livraison-row {
  display: flex; gap: 15px; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: 17px 18px;
  border: 1px solid #e9eef7;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, border-color .18s;
}
.livraison-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(29,78,216,.10);
  border-color: #c7d7f5;
}
.livraison-row i {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; color: #fff; margin: 0;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
  box-shadow: 0 4px 12px rgba(29,78,216,.26);
}
/* La livraison offerte est l'argument le plus fort de la page : elle mérite sa
   propre couleur plutôt que de se fondre dans les trois autres lignes. */
.livraison-row.offert { border-color: #bbf7d0; background: linear-gradient(180deg, #f0fdf4, #fff); }
.livraison-row.offert i { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 4px 12px rgba(22,163,74,.28); }
.livraison-row.offert strong { color: #14532d; }
.livraison-row strong { font-size: 14px; font-weight: 800; color: #0f172a; display: block; margin-bottom: 3px; }
.livraison-row p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.55; }
.faq-list { max-width: 780px; display: flex; flex-direction: column; gap: 8px; }
.faq-item { border: 1px solid #e8eef8; border-radius: 12px; overflow: hidden; }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-size: 14px; font-weight: 700; color: #0f172a; transition: background .15s; }
.faq-question:hover { background: #f8faff; }
.faq-question i { color: #1565C0; transition: transform .3s; flex-shrink: 0; }
.faq-question.open i { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 20px 16px; font-size: 13px; color: #475569; line-height: 1.65; border-top: 1px solid #f0f0f0; }
.faq-answer p { margin: 12px 0 0; }
.related-products { margin-bottom: 60px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.related-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.07); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.related-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.related-img { aspect-ratio: 1; overflow: hidden; background: #f5f5f5; }
.related-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.related-card:hover .related-img img { transform: scale(1.05); }
.related-info { padding: 12px 14px; }
.related-vendor { font-size: 10px; font-weight: 700; color: #1565C0; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.related-title { font-size: 13px; font-weight: 700; color: #0f172a; line-height: 1.35; margin-bottom: 8px; }
.related-price { display: flex; align-items: baseline; gap: 6px; }
.rel-price { font-size: 14px; font-weight: 900; color: #1565C0; }
.rel-old { font-size: 11px; color: #64748b; text-decoration: line-through; }
.lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 9999; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: 12px; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; opacity: .7; }
.lightbox-close:hover { opacity: 1; }

@media (max-width: 768px) {
  .product-page { padding-left: 16px; padding-right: 16px; }
  .product-layout { grid-template-columns: 1fr; gap: 20px; }
  .product-name { font-size: 20px; }
  .big-price { font-size: 26px; }
  .trust-badges { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .thumbnails { display: none; }
  .img-dots { display: flex; }
}
@media (max-width: 480px) {
  .trust-badges { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== COLLECTION PAGE ===== */
.collection-page { padding-top: 30px; padding-bottom: 60px; }
.collection-header { margin-bottom: 28px; }
.collection-header h1 { font-size: 28px; font-weight: 800; }
.collection-desc { color: #666; margin-top: 8px; }
.collection-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding: 14px 0; border-bottom: 1px solid #e8e8e8; }
.product-count { color: #666; font-size: 14px; }
.sort-by select { padding: 8px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; cursor: pointer; }   /* 16px : voir .header-search input */
.pagination { display: flex; justify-content: center; gap: 8px; padding: 40px 0; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.pagination a { background: #fff; border: 1px solid #e0e0e0; color: #444; }
.pagination a:hover { border-color: #1565C0; color: #1565C0; }
.pagination .current { background: #1565C0; color: #fff; border: none; }

/* ===== CART PAGE (valeurs réelles de la section) ===== */
.cart-page { padding-top: 32px; padding-bottom: 80px; }
.cart-empty { text-align: center; padding: 80px 20px; }
.cart-empty-icon { font-size: 72px; margin-bottom: 20px; }
.cart-empty h2 { font-size: 24px; font-weight: 800; color: #0f172a; margin-bottom: 10px; }
.cart-empty p { color: #64748b; font-size: 15px; margin-bottom: 28px; }
.btn-shop { display: inline-block; background: #1565C0; color: #fff; padding: 14px 32px; border-radius: 12px; font-weight: 700; font-size: 15px; transition: background .2s; }
.btn-shop:hover { background: #0d47a1; color: #fff; }
.cart-header { margin-bottom: 28px; }
.cart-header h1 { font-size: 26px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 12px; }
.cart-count-badge { background: #1565C0; color: #fff; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-item { display: flex; gap: 18px; background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid #f1f5f9; transition: box-shadow .2s; }
.cart-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.cart-item-img-wrap { flex-shrink: 0; width: 100px; height: 100px; border-radius: 12px; overflow: hidden; background: #f8f8f8; }
.cart-item-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cart-item:hover .cart-item-img-wrap img { transform: scale(1.04); }
.cart-item-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.cart-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cart-item-title { font-weight: 700; font-size: 15px; color: #0f172a; line-height: 1.4; }
.cart-item-title:hover { color: #1565C0; }
/* #64748b et non #94a3b8 : sur le blanc de .cart-item, ce dernier tombe à 2,56:1
   là où la norme demande 4,5:1. Illisible sur un téléphone en plein soleil.
   #94a3b8 reste en revanche parfaitement valable sur le pied de page sombre
   (7,57:1) — vérifier le fond réel avant de le remplacer ailleurs. */
.cart-item-variant { font-size: 12px; color: #64748b; margin-top: 3px; }
.cart-item-unit { font-size: 12px; color: #64748b; margin-top: 4px; }
.cart-remove { color: #cbd5e1; font-size: 16px; padding: 4px; transition: color .15s; flex-shrink: 0; background: none; border: none; cursor: pointer; }
.cart-remove:hover { color: #e53935; }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.cart-qty { display: flex; align-items: center; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.qty-btn { padding: 7px 14px; font-size: 16px; font-weight: 700; color: #334155; background: #f8fafc; transition: background .15s; border: none; cursor: pointer; }
.qty-btn:hover { background: #e2e8f0; color: #0f172a; }
.qty-num { padding: 7px 16px; font-weight: 700; font-size: 15px; color: #0f172a; border-left: 1.5px solid #e2e8f0; border-right: 1.5px solid #e2e8f0; }
.cart-item-total { font-size: 17px; font-weight: 800; color: #1565C0; }
.cart-continue { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #64748b; padding: 10px 0; transition: color .15s; }
.cart-continue:hover { color: #1565C0; }
.cart-summary { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.08); border: 1px solid #f1f5f9; position: sticky; top: 100px; }
.cart-summary h2, .cart-summary h3 { font-size: 18px; font-weight: 800; color: #0f172a; margin-bottom: 22px; }
.summary-lines { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; color: #475569; }
.summary-row.delivery { padding-top: 12px; border-top: 1px solid #f1f5f9; }
.free-tag { color: #64748b; font-size: 13px; }
.summary-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 2px solid #f1f5f9; margin-bottom: 20px; font-weight: 800; font-size: 18px; color: #0f172a; }
.summary-total span:last-child { color: #1565C0; font-size: 22px; }
.payment-methods { margin-bottom: 20px; }
.payment-methods p { font-size: 12px; color: #64748b; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.payment-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-chip { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600; color: #475569; }
.cart-guarantees { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid #f1f5f9; }
.guarantee-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #64748b; }
.guarantee-item i { color: #1565C0; width: 16px; font-size: 14px; }
@media (max-width: 768px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-item-img-wrap { width: 80px; height: 80px; }
  .cart-item-title { font-size: 14px; }
  .cart-header h1 { font-size: 20px; }
}

/* ===== CHECKOUT (pas dans le thème Shopify — habillage cohérent) ===== */
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; padding: 32px 0 80px; align-items: start; }
.form-card { background: #fff; border-radius: 20px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.08); border: 1px solid #f1f5f9; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #0f172a; }
/* 16px : ce sont les champs du formulaire de COMMANDE. C'est le pire endroit du
   site pour un zoom automatique d'iOS — le client est en train de saisir son
   nom, son téléphone et son adresse, et l'écran se déforme à chaque champ. */
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 11px 14px; border: 2px solid #e0e0e0; border-radius: 8px;
  font-size: 16px; outline: none; transition: border-color .2s; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #1565C0; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.payment-choice { display: grid; gap: 10px; }
.payment-choice label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid #e0e0e0; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s; }
.payment-choice input { width: auto; }
.payment-choice label:has(input:checked) { border-color: #1565C0; background: #e3f2fd; }
.order-recap { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,.08); border: 1px solid #f1f5f9; position: sticky; top: 100px; }
.order-recap .recap-line { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; color: #475569; }
@media (max-width: 768px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-recap { position: static; }
  /* Le récapitulatif REMONTE avant le formulaire sur téléphone. En une colonne il
     se retrouvait sous le bouton « Confirmer » : le client validait sans avoir vu
     ni les articles ni le total. On ne demande pas de confirmer quelque chose
     qu'on n'a pas montré. */
  .order-recap { order: -1; margin-bottom: 16px; }
  .checkout-layout { display: flex; flex-direction: column; }
}

/* ===== CONFIRMATION (pas dans le thème Shopify) ===== */
.confirm-box { max-width: 560px; margin: 60px auto; text-align: center; padding: 0 20px 60px; }
.confirm-box .icon { font-size: 56px; color: #2e7d32; margin-bottom: 16px; }
.confirm-box h1 { font-size: 24px; font-weight: 800; margin-bottom: 10px; color: #0f172a; }
.confirm-box p { color: #64748b; margin-bottom: 6px; }
.confirm-code { display: inline-block; background: #f8faff; border: 1px solid #e8eef8; padding: 12px 24px; border-radius: 10px; font-weight: 800; font-size: 18px; letter-spacing: 1px; margin: 18px 0; color: #0f172a; }
.confirm-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.btn-whatsapp { background: #25D366; color: #fff; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.btn-whatsapp:hover { background: #1ebe5a; color: #fff; }

/* ===== CONTACT PAGE ===== */
.contact-page { padding-top: 60px; padding-bottom: 80px; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.contact-info h1 { font-size: 32px; font-weight: 800; margin-bottom: 12px; color: #0f172a; }
.contact-info > p { color: #666; font-size: 15px; margin-bottom: 28px; }
.contact-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.contact-card { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.contact-card i { font-size: 24px; color: #1565C0; width: 30px; }
.contact-card.whatsapp i { color: #25D366; }
.contact-card strong { display: block; font-size: 14px; font-weight: 700; color: #0f172a; }
.contact-card span { font-size: 12px; color: #64748b; }
.social-contact { display: flex; gap: 12px; }
.social-contact a { width: 40px; height: 40px; background: #f0f4ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #1565C0; font-size: 16px; transition: all .2s; }
.social-contact a:hover { background: #1565C0; color: #fff; }
.contact-form-wrap { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.contact-form-wrap h2 { font-size: 20px; font-weight: 700; margin-bottom: 24px; color: #0f172a; }
.form-success { background: #e8f5e9; color: #2e7d32; border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; font-weight: 600; display: none; align-items: center; gap: 8px; }
.form-success.show { display: flex; }
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; } }

/* ===== Suggestions de recherche (pendant la frappe) ===== */
.suggestions {
  position: absolute; z-index: 200; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border-radius: 14px; overflow: hidden auto; max-height: 62vh;
  box-shadow: 0 18px 44px rgba(15,23,42,.18); border: 1px solid #e9eef7;
  -webkit-overflow-scrolling: touch;
}
.sugg-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid #f5f7fb; color: inherit; text-decoration: none;
}
.sugg-item:last-of-type { border-bottom: none; }
.sugg-item:hover, .sugg-item.actif { background: #f5f8ff; }
.sugg-img {
  flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
}
.sugg-img img { width: 100%; height: 100%; object-fit: cover; }
.sugg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sugg-nom {
  font-size: 13.5px; font-weight: 600; color: #0f172a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sugg-prix { font-size: 13px; font-weight: 800; color: var(--brand, #d32f2f); }
.sugg-prix s { color: #64748b; font-weight: 500; font-size: 11.5px; margin-left: 4px; }
.sugg-vide { padding: 20px 16px; text-align: center; color: #64748b; font-size: 13px; }
.sugg-tout {
  display: block; padding: 12px; text-align: center; background: #f8fafc;
  font-size: 12.5px; font-weight: 700; color: var(--brand, #d32f2f);
  border-top: 1px solid #eef2f7;
}
.sugg-tout:hover, .sugg-tout.actif { background: #eef4ff; }

/* ===== SEARCH PAGE (pas dans le thème — habillage cohérent) ===== */
.search-page { padding-top: 40px; padding-bottom: 80px; }
.search-page h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; color: #0f172a; }
.results-count { color: #64748b; font-size: 14px; margin-bottom: 28px; }
.no-results { color: #64748b; font-size: 16px; padding: 60px 0; text-align: center; }

/* ===== 404 PAGE ===== */
.error-page { padding: 100px 0; text-align: center; }
.error-content h1 { font-size: 80px; font-weight: 900; color: #1565C0; line-height: 1; }
.error-content p { font-size: 18px; color: #666; margin: 20px 0 32px; }

/* ===== FOOTER (valeurs réelles de la section) ===== */
.footer { background: #070d1a; color: #94a3b8; padding: 56px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
/* Trois colonnes égales depuis que la marque est descendue dans sa propre bande. */
.footer-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 34px; }

/* ===== Bande marque, sous le service après-vente ===== */
.footer-marque {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px;
  padding-top: 30px; margin-bottom: 28px;
  border-top: 1px solid rgba(255,255,255,.09);
}
/* Espacements du bloc marque, corrigés le 26/08.
   Avant : le logo poussait 14 px, le texte en rajoutait 10 au-dessus (24 px de
   trou), et cette même règle remettait sa marge du bas à 0 — les icônes venaient
   donc coller le texte. Le déséquilibre sautait aux yeux sur mobile.
   Maintenant : peu d'air sous le logo (il appartient au même bloc que le texte),
   davantage avant les icônes (qui forment un groupe distinct). */
.footer-marque .footer-desc { max-width: 380px; margin: 4px 0 20px; }
.footer-marque .footer-logo-link { margin-bottom: 4px; }
.footer-marque .social-links { margin-left: auto; }
@media (max-width: 768px) {
  .footer-grid-3 { grid-template-columns: 1fr; gap: 28px; }
  .footer-marque { flex-direction: column; align-items: center; text-align: center; }
  .footer-marque .social-links { margin-left: 0; justify-content: center; }
}
.footer-logo-link { display: inline-block; margin-bottom: 14px; }
.footer-logo-link .logo-text { color: #f1f5f9; }
.footer-desc { font-size: 13px; line-height: 1.8; color: #64748b; margin-bottom: 22px; max-width: 260px; }
.social-links { display: flex; gap: 12px; flex-wrap: wrap; }
/* Ronds plutôt que carrés arrondis : c'est la convention actuelle, et ça
   s'accorde avec la forme des logos eux-mêmes. */
.social-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s;
  position: relative;
}
.social-btn:hover { transform: translateY(-4px) scale(1.06); }
.social-btn.facebook { background: #1877F2; }
.social-btn.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-btn.tiktok { background: #000; border: 1px solid #333; }
.social-btn.whatsapp { background: #25D366; }
.social-btn.whatsapp:hover { background: #1ebe5a; }
/* h2, h3 ET h4 — les trois, volontairement.
   Les titres de colonne étaient des h4 : sur les pages sans aucun h2 dans le
   contenu (panier, recherche, suivi, 404), on sautait de h1 à h4. Ils sont
   maintenant en h2, et « Service après-vente » en h3 puisqu'il est imbriqué
   dans la colonne Contact.
   ⚠️ Les anciens niveaux restent listés : ce sélecteur est le SEUL à habiller ces
   titres. Quand ils sont passés de h4 à h2 sans que la règle suive, ils se sont
   affichés en 24 px gris au lieu de 14 px clairs — attrapé au navigateur, pas à
   la lecture du code. Si le niveau rebouge un jour, revenir ICI. */
.footer-col h2, .footer-col h3, .footer-col h4 { color: #f1f5f9; font-size: 14px; font-weight: 700; margin-bottom: 18px; letter-spacing: .5px; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { color: #64748b; font-size: 13px; transition: color .15s; }
.footer-col ul li a:hover { color: #f1f5f9; }
.footer-bottom { border-top: 1px solid #1e293b; padding: 20px 0; text-align: center; font-size: 12px; color: #334155; }
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Responsive global ===== */
@media (max-width: 1024px) {
  .categories-grid { grid-template-columns: repeat(4, 1fr); }
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .header-contacts { display: none; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  /* Colonne unique : celle de 320 px accueillait la bannière « Deals du jour ». */
  .hero-wrapper { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Spinner (utilitaire, pas dans le thème mais nécessaire pour le chargement JS) ===== */
.spinner { width: 22px; height: 22px; border: 3px solid #eee; border-top-color: #c62828; border-radius: 50%; animation: spin .7s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   FLUIDITÉ — squelettes de chargement, apparitions et transitions
   ==========================================================================
   Objectif : ne plus jamais montrer de page blanche avec un spinner. On affiche
   la forme du contenu (squelette) puis on fait apparaître le vrai contenu en
   fondu. Toutes les animations restent sur `transform` et `opacity`, les deux
   seules propriétés que le navigateur peut animer sans recalculer la mise en page. */

:root {
  --ease-sortie: cubic-bezier(.22, 1, .36, 1);   /* démarre vite, freine en douceur */
  --rapide: .18s;
  --moyen: .28s;
}

/* ---- Squelettes ---- */
@keyframes sk-brille { to { background-position-x: -200%; } }
.sk {
  background: linear-gradient(90deg, #eef1f5 40%, #f7f9fb 50%, #eef1f5 60%);
  background-size: 200% 100%;
  animation: sk-brille 1.1s linear infinite;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

.sk-hero { width: 100%; height: 400px; border-radius: 14px; }
.sk-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sk-carte { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #f1f5f9; }
.sk-carte .sk-img { width: 100%; aspect-ratio: 1; border-radius: 0; }
.sk-carte .sk-l { height: 12px; margin: 12px 14px 0; }
.sk-carte .sk-l.court { width: 55%; margin-bottom: 16px; }
.sk-bloc { width: 100%; height: 220px; }

@media (max-width: 1024px) { .sk-grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .sk-grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } .sk-hero { height: 260px; } }

/* ---- Apparition du contenu réel ---- */
@keyframes apparait { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.apparait { animation: apparait var(--moyen) var(--ease-sortie) both; }
@media (prefers-reduced-motion: reduce) { .apparait { animation: none; } }

/* ---- Interactions plus vives ---- */
.product-card, .related-card, .cat-card, .mini-banner {
  transition: transform var(--rapide) var(--ease-sortie), box-shadow var(--rapide) var(--ease-sortie);
  will-change: transform;
}
.product-card:active, .related-card:active, .cat-card:active { transform: scale(.985); }

.btn-primary, .btn-secondary, .btn-add-cart, .slide-btn, .btn-shop, .btn-whatsapp {
  transition: transform var(--rapide) var(--ease-sortie), background-color var(--rapide) linear, box-shadow var(--rapide) var(--ease-sortie);
}
.btn-primary:active, .btn-secondary:active, .btn-add-cart:active, .slide-btn:active, .btn-shop:active { transform: scale(.97); }

/* Menu mobile : le voile s'estompe au lieu d'apparaître d'un coup */
.mobile-menu-overlay { display: block; opacity: 0; pointer-events: none; transition: opacity var(--moyen) var(--ease-sortie); }
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu { transition: transform var(--moyen) var(--ease-sortie); left: 0; transform: translate3d(-100%, 0, 0); will-change: transform; }
.mobile-menu.open { transform: translate3d(0, 0, 0); }

/* Slider hero : fondu enchaîné plus court, sinon on voit les deux slides à la fois */
.hero-slide { transition: opacity var(--moyen) linear; }

/* Parallaxe : le visuel du slide se décale légèrement au défilement.
   Piloté en JS via --parallaxe, appliqué en translate3d pour rester sur le GPU. */
.slide-image img { transform: translate3d(0, var(--parallaxe, 0px), 0); }
@media (prefers-reduced-motion: reduce) { .slide-image img { transform: none; } }

/* Lightbox : ouverture en fondu + léger zoom */
.lightbox { display: flex; opacity: 0; pointer-events: none; transition: opacity var(--moyen) var(--ease-sortie); }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { transform: scale(.96); transition: transform var(--moyen) var(--ease-sortie); }
.lightbox.open img { transform: scale(1); }

/* ==========================================================================
   PANIER COULISSANT + FICHE PRODUIT DÉPLIÉE
   ========================================================================== */

/* ---- Tiroir panier (même principe que le menu mobile) ---- */
.tiroir-voile {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1300;
  opacity: 0; pointer-events: none; transition: opacity var(--moyen) var(--ease-sortie);
}
.tiroir-voile.open { opacity: 1; pointer-events: auto; }

.panier-tiroir {
  position: fixed; top: 0; right: 0; height: 100%; width: 360px; max-width: 88vw;
  background: #fff; z-index: 1400; display: flex; flex-direction: column;
  box-shadow: -8px 0 30px rgba(0,0,0,.18);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--moyen) var(--ease-sortie);
  will-change: transform;
}
.panier-tiroir.open { transform: translate3d(0, 0, 0); }

.tiroir-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid #f1f5f9; flex-shrink: 0;
}
.tiroir-tete strong { font-size: 16px; font-weight: 800; color: #0f172a; }
.tiroir-fermer {
  background: none; border: none; cursor: pointer; font-size: 19px; color: #64748b;
  padding: 6px 10px; border-radius: 8px; transition: background var(--rapide) linear;
}
.tiroir-fermer:hover { background: #f1f5f9; color: #0f172a; }

.tiroir-corps { flex: 1; overflow-y: auto; padding: 8px 0; }
.tiroir-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 20px; }
.tiroir-ligne + .tiroir-ligne { border-top: 1px solid #f6f8fa; }
.tiroir-ligne img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: #f8fafc; flex-shrink: 0; }
.tiroir-ligne-info { flex: 1; min-width: 0; }
.tiroir-ligne-info strong { display: block; font-size: 13.5px; font-weight: 700; color: #0f172a; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiroir-ligne-info span { font-size: 12.5px; color: #64748b; }
.tiroir-retirer {
  background: none; border: none; cursor: pointer; color: #cbd5e1; font-size: 14px;
  padding: 8px; border-radius: 8px; flex-shrink: 0; transition: color var(--rapide) linear, background var(--rapide) linear;
}
.tiroir-retirer:hover { color: #dc2626; background: #fef2f2; }

.tiroir-vide { text-align: center; padding: 60px 24px; color: #64748b; }
.tiroir-vide i { font-size: 34px; margin-bottom: 14px; display: block; opacity: .5; }
.tiroir-vide p { font-size: 14.5px; }

.tiroir-pied { padding: 16px 20px 22px; border-top: 1px solid #f1f5f9; flex-shrink: 0; }
.tiroir-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.tiroir-total span { font-size: 14px; color: #64748b; }
.tiroir-total strong { font-size: 19px; font-weight: 800; color: #0f172a; }
.tiroir-lien { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #64748b; font-weight: 600; }
.tiroir-lien:hover { color: #1565C0; }

/* ---- Fiche produit : bouton commander ---- */
.product-btns { display: flex; flex-direction: column; gap: 10px; }
.btn-commander {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 24px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #c62828, #e53935);
  color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(198,40,40,.32);
  transition: transform var(--rapide) var(--ease-sortie), box-shadow var(--rapide) var(--ease-sortie);
}
.btn-commander:hover { box-shadow: 0 10px 26px rgba(198,40,40,.4); }
.btn-commander:active { transform: scale(.97); }

/* ---- Fiche produit : sections toujours visibles ---- */
.product-sections { display: grid; gap: 16px; margin-top: 28px; }
.prod-section { background: #fff; border: 1px solid #f1f5f9; border-radius: 14px; padding: 22px 24px; }
.prod-section-titre {
  display: flex; align-items: center; gap: 10px;
  font-size: 16.5px; font-weight: 800; color: #0f172a; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;
}
.prod-section-titre i { color: #1565C0; font-size: 15px; }

/* FAQ repliée : les questions sont listées, la réponse s'ouvre au clic.
   Basé sur <details>/<summary> — fonctionne sans JavaScript. */
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid #eef2f7; border-radius: 10px; overflow: hidden; background: #fbfcfe; }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 700; color: #0f172a;
  transition: background var(--rapide) linear;
}
.faq-q::-webkit-details-marker { display: none; }  /* masque la flèche native de Safari */
.faq-q:hover { background: #f1f5f9; }
.faq-q i { color: #64748b; font-size: 12px; flex-shrink: 0; transition: transform var(--rapide) var(--ease-sortie); }
.faq-item[open] .faq-q { background: #f1f5f9; }
.faq-item[open] .faq-q i { transform: rotate(180deg); }
/* Le repliage natif de <details> cesse de fonctionner quand <summary> passe en
   display:flex (nécessaire ici pour aligner le chevron à droite). On pilote donc
   l'affichage explicitement plutôt que de dépendre du comportement par défaut. */
.faq-item > *:not(.faq-q) { display: none; }
.faq-item[open] > *:not(.faq-q) { display: block; }
.faq-item p { font-size: 14px; color: #475569; line-height: 1.65; padding: 0 16px 15px; }

/* Réassurance + partage renvoyés en bas de page */
.product-page .trust-badges { margin-top: 28px; }
.product-page .share-row { margin-top: 18px; justify-content: center; }

@media (max-width: 768px) {
  .prod-section { padding: 18px 16px; border-radius: 12px; }
  .prod-section-titre { font-size: 15px; }
  /* le tiroir ne couvre PAS tout l'écran sur mobile : on garde une bande de la page
     visible derrière, comme sur ordinateur, pour ne pas perdre le fil de la navigation */
  .panier-tiroir { width: 82vw; max-width: 340px; }
}

/* ---- Description produit (HTML repris de Shopify : p, h3, ul, strong) ---- */
.product-description-content { font-size: 14.5px; color: #334155; line-height: 1.75; }
.product-description-content > *:first-child { margin-top: 0; }
.product-description-content p { margin-bottom: 10px; }
/* Les descriptions Shopify enchaînent beaucoup de courts paragraphes : sans ça
   la fiche s'étire démesurément sur mobile. */
.product-description-content p:empty { display: none; }
.product-description-content h3 { font-size: 15.5px; font-weight: 800; color: #0f172a; margin: 20px 0 8px; }
.product-description-content ul, .product-description-content ol { margin: 0 0 14px 20px; }
.product-description-content li { margin-bottom: 5px; list-style: disc; }
.product-description-content strong { color: #0f172a; font-weight: 700; }
/* Images intégrées à la description (récupérées de Shopify). Sans max-width elles
   sortent de la colonne sur mobile : celles d'origine avaient un width="550" en dur.
   height:auto évite l'écrasement, et le fond gris masque le vide pendant le
   chargement des images à fond blanc. */
.product-description-content img {
  display: block; max-width: 100%; height: auto;
  margin: 14px auto; border-radius: 10px; background: #f8fafc;
}
.product-description-content p:has(> img:only-child) { margin-bottom: 0; }
.product-description-content .desc-tags {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9;
  font-size: 13px; color: #64748b;
}

/* ==========================================================================
   PAGES INFORMATIONS (à propos, livraison, remboursement, CGV, confidentialité)
   ========================================================================== */
.page-info {
  max-width: 780px;              /* au-delà, les lignes deviennent pénibles à lire */
  padding-top: 36px; padding-bottom: 60px;
  font-size: 15px; line-height: 1.75; color: #334155;
}
.page-titre { font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 18px; }
.page-info .chapo {
  font-size: 16.5px; color: #1e293b; line-height: 1.7;
  padding: 16px 18px; margin-bottom: 28px;
  background: #f0f6ff; border-left: 4px solid #1565C0; border-radius: 0 10px 10px 0;
}
.page-info h2 {
  font-size: 19px; font-weight: 800; color: #0f172a;
  margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #eef2f7;
}
.page-info h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 22px 0 8px; }
.page-info p { margin-bottom: 14px; }
.page-info a { color: #1565C0; font-weight: 600; }
.page-info a:hover { text-decoration: underline; }
.page-info code {
  background: #f1f5f9; padding: 2px 7px; border-radius: 5px;
  font-size: 13.5px; font-weight: 700; color: #0f172a;
}

.page-info ul, .page-info ol { margin: 0 0 18px; padding: 0; }
.liste-simple li { list-style: disc; margin: 0 0 7px 20px; }
.liste-check li { position: relative; padding-left: 28px; margin-bottom: 10px; list-style: none; }
.liste-check li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: #16a34a; font-weight: 900; font-size: 15px;
}
.liste-etapes { counter-reset: etape; }
.liste-etapes li {
  position: relative; padding-left: 38px; margin-bottom: 14px; list-style: none;
  counter-increment: etape;
}
.liste-etapes li::before {
  content: counter(etape); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: #1565C0; color: #fff;
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.tableau-frais { overflow-x: auto; margin-bottom: 20px; }
.tableau-frais table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tableau-frais th {
  text-align: left; padding: 11px 14px; background: #f8fafc;
  font-weight: 800; color: #0f172a; border-bottom: 2px solid #e2e8f0;
}
.tableau-frais td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; }
.tableau-frais tr:last-child td { border-bottom: none; }
.tableau-frais td:last-child { font-weight: 700; color: #0f172a; white-space: nowrap; }

.note-contact {
  margin-top: 30px; padding: 14px 18px;
  background: #f8fafc; border-radius: 10px;
  font-size: 14.5px; color: #475569;
}

@media (max-width: 768px) {
  .page-titre { font-size: 23px; }
  .page-info { font-size: 14.5px; padding-top: 26px; }
  .page-info h2 { font-size: 17px; }
}

/* ==========================================================================
   PIED DE PAGE ENRICHI — adresse boutique, contact, SAV
   ========================================================================== */

/* Bandeau adresse : c'est l'information la plus cherchée, elle passe en premier */
.footer-boutique {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; margin-bottom: 34px;
  background: linear-gradient(135deg, rgba(29,78,216,.18), rgba(6,182,212,.10));
  border: 1px solid rgba(96,165,250,.25); border-radius: 14px;
}
.footer-boutique .fb-icone {
  width: 46px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 19px; color: #fff;
  background: linear-gradient(135deg, #1d4ed8, #06b6d4);
}
.footer-boutique strong {
  display: block; color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 3px;
}
.footer-boutique span { display: block; color: #94a3b8; font-size: 13.5px; line-height: 1.55; }

/* Colonne contact */
.footer-contact h2, .footer-contact h3, .footer-contact h4 { margin-bottom: 10px; }
.footer-contact .fc-sous-titre {
  display: flex; align-items: center; gap: 8px;
  margin-top: 22px; font-size: 13.5px;
}
.footer-contact .fc-sous-titre i { color: #22d3ee; font-size: 13px; }

.fc-tel {
  display: block; font-size: 17px; font-weight: 800; letter-spacing: .3px;
  color: #fff; margin-bottom: 4px;
  transition: color var(--rapide) linear;
}
.fc-tel:hover { color: #60a5fa; }
.fc-tel-sav { font-size: 15.5px; color: #e2e8f0; }

.fc-horaires { margin-top: 10px; font-size: 12.5px; line-height: 1.9; color: #64748b; }
.fc-jours { color: #94a3b8; }
.fc-heures { color: #fbbf24; font-weight: 700; }

.fc-mail {
  display: inline-block; margin-top: 2px;
  font-size: 14.5px; font-weight: 700; color: #22d3ee;
  word-break: break-all;
}
.fc-mail:hover { color: #67e8f9; text-decoration: underline; }

@media (max-width: 768px) {
  .footer-boutique { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 18px; }
  .footer-contact .fc-sous-titre { margin-top: 18px; }
}

/* Livraison hors Abidjan : le total n'inclut pas le transport, il faut le dire. */
.note-livraison {
  margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
  font-size: 12.5px; line-height: 1.55;
}
.note-livraison i { margin-right: 6px; }

/* Vignettes ne correspondant pas au coloris choisi : estompées mais toujours
   cliquables. Les masquer ferait croire à un bug de chargement. */
.thumb-wrap.hors-couleur { opacity: .32; filter: saturate(.6); }
.thumb-wrap.hors-couleur:hover { opacity: 1; filter: none; }

/* Adresse e-mail du pied de page — activée le 26/08 après vérification de la
   redirection Namecheap. Casse le mot si nécessaire : une adresse longue déborde
   sur les écrans étroits. */
.fc-mail { text-transform: none; overflow-wrap: anywhere; }

/* Écrans étroits : les badges passent sur une colonne. À deux par rangée il ne
   restait qu'une centaine de pixels de texte, et les libellés tombaient sur trois
   lignes — on lisait « Payez à / la / réception ». Mieux vaut quatre lignes nettes
   qu'une grille compacte illisible. */
@media (max-width: 430px) {
  .trust-items { grid-template-columns: 1fr; gap: 10px; }
  .trust-item { padding: 13px 14px; }
  .trust-item > i { width: 40px; height: 40px; }
}

/* ===== Grille des 24 produits vedettes =====
   Remplace les trois rangées à défilement horizontal. Le balayage latéral n'est
   pas un geste évident : au-delà de la troisième carte, les articles restaient
   invisibles pour qui n'y pense pas. Tout est maintenant atteignable par un simple
   défilement vertical. Demande explicite du vendeur. */
.vitrine-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .vitrine-grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .vitrine-grille { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* Paiement : un seul mode possible, donc une information et non un choix.
   C'était un bouton radio unique, coché d'avance et marqué obligatoire — il
   n'offrait aucune décision et allongeait le formulaire. */
.paiement-info {
  display: flex; align-items: center; gap: 12px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px;
  padding: 13px 14px; margin-bottom: 18px;
}
.paiement-info i {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; font-size: 15px;
}
.paiement-info strong { display: block; font-size: 13.5px; color: #14532d; }
.paiement-info span { font-size: 12px; color: #3f6212; line-height: 1.45; }

/* Le bouton WhatsApp était aussi voyant que « Confirmer ma commande » : plein
   vert, bordure noire, même taille. Deux actions de force égale font hésiter.
   Il redevient un secours discret. */
.btn-whatsapp-aide {
  background: #fff !important; color: #0e6f63 !important;
  border: 1.5px solid #cbd5e1 !important; box-shadow: none !important;
  font-size: 13.5px !important; font-weight: 600 !important; padding: 11px !important;
}
.btn-whatsapp-aide:hover { border-color: #25D366 !important; background: #f0fdf4 !important; }

/* Montants du récapitulatif : jamais coupés. « 12 000 » sur une ligne et « FCFA »
   sur la suivante, en face du nom du produit, donne une addition illisible. */
.order-recap .recap-line > span:last-child { white-space: nowrap; padding-left: 10px; }

/* ===== Mini-bannières : visuel remonté sous le texte =====
   L'image était collée au bas du bloc (bottom: 0), ce qui laissait un vide entre
   le texte et elle. On la remonte pour qu'elle démarre juste sous le bouton. */
.mini-banner-img { bottom: -6px; }
@media (max-width: 480px) {
  .mini-banner-img { height: 128px; bottom: -4px; }
}

/* ===== Slides 1 et 3 : visuels agrandis =====
   « Meilleurs Smartphones 2026 » et « Jeux Vidéos & Consoles » sont des visuels
   panoramiques (1100x404 et 923x458) montrant plusieurs appareils alignés : à la
   largeur commune, chaque appareil devenait minuscule. Le slide « Tablettes »
   n'a qu'un seul objet et reste inchangé.

   ATTENTION — c'est la LARGEUR qui bride ces images, jamais max-height. Elles sont
   bien plus larges que hautes : max-width est atteint en premier, donc toucher à
   max-height seul ne produit strictement aucun effet. Vérifié à la mesure.

   Le margin-right négatif annule le padding droit de .slide-content pour que le
   visuel aille jusqu'au bord du slide ; le débordement est absorbé par
   overflow:hidden du slider.

   Le 60 % de la version mobile est un plafond mesuré, pas un chiffre rond : à 62 %
   le titre « Meilleurs Smartphones 2026 » passe sur 3 lignes et le bloc de texte
   dépasse les 220 px du slider. Ne pas monter sans revérifier ce titre. */
/* Sur ORDINATEUR ces mêmes réglages doivent rester sobres. Le 82 % / 400 px d'une
   première version donnait, sur un écran 1512 px : une image à 77 % de la largeur
   du slide, amputée de 19 px en bas, et surtout 1 px seulement entre la fin du
   sous-titre et le visuel — les deux se touchaient. C'est un travers du grand
   écran : le slide s'élargit, l'image suit, mais le texte ne grandit pas avec.
   Valeurs retenues : 58 % de large, 137 px de respiration, plus aucune coupe. */
.hero-slide[data-slide="slide1"] .slide-image,
.hero-slide[data-slide="slide3"] .slide-image { max-width: 62%; margin-right: -40px; }
.hero-slide[data-slide="slide1"] .slide-image img,
.hero-slide[data-slide="slide3"] .slide-image img { max-height: 320px; }

@media (max-width: 768px) {
  .hero-slide[data-slide="slide1"] .slide-image,
  .hero-slide[data-slide="slide3"] .slide-image { max-width: 58%; margin-right: -18px; }
  .hero-slide[data-slide="slide1"] .slide-image img,
  .hero-slide[data-slide="slide3"] .slide-image img { max-height: 240px; }
}
@media (max-width: 480px) {
  .hero-slide[data-slide="slide1"] .slide-image,
  .hero-slide[data-slide="slide3"] .slide-image { max-width: 60%; margin-right: -18px; }
  .hero-slide[data-slide="slide1"] .slide-image img,
  .hero-slide[data-slide="slide3"] .slide-image img { max-height: 200px; }
}

/* ===== Mini-bannière à visuel portrait =====
   Classe posée par index.html quand l'image est nettement plus haute que large
   (le PS5 debout : 417x600, contre 624x600 pour la manette).

   Le problème : à hauteur égale, un visuel vertical rend deux fois moins large.
   La manette occupait 68 % de sa carte, le PS5 seulement 45 %, tassé dans l'angle
   droit, avec un grand vide au milieu.

   Deux leviers :
   1. le TEXTE est rétréci sur cette carte seulement — c'est le sous-titre qui
      bloquait l'agrandissement, pas la place disponible ;
   2. l'image est agrandie et décollée du bord droit.

   HAUTEUR RELATIVE, PAS FIXE. Première version : 268 px en dur. Résultat, sur
   ordinateur la carte ne fait que 190 px de haut et le PS5 était amputé de 72 px
   par le haut — invisible sur téléphone, flagrant sur grand écran. Les cartes
   changent de hauteur à chaque palier (196 / 176 / 190 px) : une valeur en dur
   sera fausse à au moins un palier. calc(100% - 4px) suit la carte partout et
   laisse 10 px de respiration en haut.

   Décalage droit en PIXELS et non en % : à 8 % la carte large de l'ordinateur
   ouvrait un trou de 49 px, là où le téléphone n'en avait que 16.

   Repère si on y revient : le haut de mini2.webp est transparent sur ses 44 %
   gauche (vérifié au canal alpha), donc le premier pixel VISIBLE en haut est bien
   plus à droite que le bord de l'image. C'est ce qui permet ce gabarit sans
   toucher au sous-titre. */
.mini-banner.visuel-portrait .mini-banner-text { max-width: 54%; }
.mini-banner.visuel-portrait .mini-banner-img { height: calc(100% - 4px); right: 16px; }

/* ===== Slide « Tablettes & iPad » : le bas était coupé =====
   Signalé par l'utilisateur, et à juste titre : je l'avais mesuré à 33 px rognés
   et écarté comme voulu par le design. Ce n'en était pas un.

   L'arithmétique du défaut, pour qu'on ne le réintroduise pas : .slide-image porte
   un margin-bottom de -46px (le visuel doit dépasser légèrement vers le bas). Avec
   align-items:center sur le parent, le bas de l'image tombe à 223 + hauteur/2.
   Le slider fait 400 px. Rien n'est coupé tant que la hauteur reste sous 354 px —
   or la règle de base autorisait 420 px. Tout visuel assez HAUT pour atteindre ce
   plafond était donc forcément amputé. Ça ne se voyait que sur les images plutôt
   verticales : mini2 et slide2 (722x600). Les deux autres slides sont panoramiques
   et n'atteignaient jamais le plafond.

   Correctif : on annule le dépassement vers le bas pour ce slide et on plafonne à
   384 px. Résultat 462x384, avec 8 px de dégagement en haut comme en bas — l'iPad
   est entier. On perd 43 px de large sur les 505 précédents : un visuel complet un
   peu plus petit vaut mieux qu'un grand visuel tronqué. */
/* Le dépassement vers le bas est annulé dès 481 px : à 700 px il restait encore
   5 px rognés. En dessous de 481 px le visuel est bridé par la LARGEUR (146 px de
   rendu), il ne touche jamais le plafond de hauteur, donc rien n'est coupé et on
   garde le léger décalage vers le bas qui remplit mieux la carte. */
@media (min-width: 481px) {
  .hero-slide[data-slide="slide2"] .slide-image { margin-bottom: 0; }
}
@media (min-width: 769px) {
  .hero-slide[data-slide="slide2"] .slide-image img { max-height: 384px; }
}

/* ===== Avis clients ===== */

/* L'étoile vide est une étoile PLEINE grisée, pas `far fa-star` : le site
   n'embarque que les familles solid et brands (voir tools/build-icons.py),
   une icône `far` sortirait invisible. */
.etoiles { color: #c8830b; display: inline-flex; gap: 2px; font-size: 13px; }
.etoiles .vide { color: #d8dee6; }
.etoiles.grandes { font-size: 18px; }

/* Note moyenne sous le titre du produit */
.note-resume { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 10px; text-decoration: none; color: #444; font-size: 13px; }
.note-resume:hover { color: #1976d2; }
.note-resume strong { font-weight: 800; color: #1a1a1a; }
.note-resume span { color: #667; }

.avis-chargement { color: #64748b; font-size: 14px; padding: 6px 0; }

.avis-entete { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #eef1f5; }
.avis-moyenne { display: flex; align-items: baseline; gap: 3px; }
.avis-moyenne strong { font-size: 34px; font-weight: 900; line-height: 1; color: #1a1a1a; }
.avis-moyenne span { font-size: 13px; color: #64748b; }
.avis-compte { font-size: 13px; color: #667; margin: 4px 0 0; }

.avis-liste { display: flex; flex-direction: column; gap: 12px; }
.avis-carte { background: #f8fafc; border: 1px solid #eef1f5; border-radius: 10px; padding: 12px 14px; }
.avis-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.avis-nom { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.avis-date { font-size: 12px; color: #64748b; white-space: nowrap; }
/* Un avis client peut contenir un mot très long ou une URL collée : sans ça,
   la carte s'élargirait et ferait déborder toute la page horizontalement. */
.avis-texte { font-size: 14px; line-height: 1.55; color: #333; margin: 7px 0 0; overflow-wrap: anywhere; }
.avis-vide { color: #64748b; font-size: 14px; margin: 0; }

.avis-form { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef1f5; display: flex; flex-direction: column; gap: 10px; }
.avis-form h3 { font-size: 15px; font-weight: 800; margin: 0; color: #1a1a1a; }
.avis-notes { display: flex; gap: 4px; }
.etoile-btn { background: none; border: none; cursor: pointer; padding: 4px; font-size: 24px; color: #d8dee6; line-height: 1; transition: color .12s, transform .12s; }
.etoile-btn.actif { color: #c8830b; }
.etoile-btn:active { transform: scale(.88); }

/* 16px minimum : en dessous, iOS zoome tout seul sur le champ à la mise au point
   et le client se retrouve avec une page décalée qu'il doit repincer. */
.avis-form input, .avis-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border: 1.5px solid #dde3ea; border-radius: 9px; background: #fff; color: #1a1a1a; }
.avis-form input:focus, .avis-form textarea:focus { outline: none; border-color: #1976d2; }
.avis-form textarea { resize: vertical; min-height: 72px; }

.btn-avis-envoyer { background: #1976d2; color: #fff; border: none; border-radius: 9px; padding: 12px 20px; font-size: 15px; font-weight: 700; cursor: pointer; align-self: flex-start; transition: background .2s; }
.btn-avis-envoyer:hover:not(:disabled) { background: #145ea8; }
.btn-avis-envoyer:disabled { opacity: .6; cursor: default; }

.avis-erreur { color: #c62828; font-size: 13px; margin: 0; font-weight: 600; }
.avis-note-bas { font-size: 12px; color: #64748b; margin: 0; }
.avis-merci { margin-top: 18px; padding: 12px 14px; background: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 9px; color: #1b5e20; font-size: 14px; font-weight: 600; }
.avis-merci i { margin-right: 6px; }

@media (max-width: 480px) {
  .btn-avis-envoyer { align-self: stretch; }   /* cible large au pouce */
  .avis-moyenne strong { font-size: 28px; }
}

/* ===== Produit retiré du catalogue =====
   Affichée quand un lien vise un produit qui n'existe plus. Cas concret : la
   bascule du domaine renvoie vers ici 10 adresses Shopify encore référencées par
   Google. Le visiteur vient d'une recherche, il veut acheter — on lui donne une
   porte de sortie au lieu d'un message d'erreur. */
.produit-absent { text-align: center; padding: 70px 20px; }
.produit-absent i { font-size: 46px; color: #cbd5e1; margin-bottom: 18px; }
.produit-absent h1 { font-size: 21px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px; }
.produit-absent p { font-size: 14.5px; color: #667; margin: 0 0 24px; }
.produit-absent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.produit-absent-actions a { display: inline-block; padding: 12px 24px; border-radius: 9px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s; }
.produit-absent-actions .btn-brand { background: #1976d2; color: #fff; }
.produit-absent-actions .btn-brand:hover { background: #145ea8; color: #fff; }
.produit-absent-actions .btn-secondaire { background: #fff; color: #1a1a1a; border: 1.5px solid #dde3ea; }
.produit-absent-actions .btn-secondaire:hover { background: #f1f5f9; }
@media (max-width: 480px) {
  .produit-absent-actions { flex-direction: column; }   /* cibles pleine largeur au pouce */
  .produit-absent-actions a { width: 100%; }
}

/* ===== [hidden] doit toujours gagner =====
   Piège du HTML : la règle par défaut du navigateur est `[hidden] { display: none }`,
   mais toute classe qui pose un display explicite l'écrase — même spécificité, et
   la classe passe après. Un élément masqué en JavaScript restait donc AFFICHÉ.
   Constaté deux fois : le lien « Mot de passe oublié ? » qui ne disparaissait pas,
   et le bouton « Supprimer » qui apparaissait sur un produit encore inexistant.
   Cette règle règle le problème une fois pour toutes, pour toutes les classes. */
[hidden] { display: none !important; }

/* ===== Filtre par budget (page catalogue) ===== */
/* Des boutons plutôt qu'un curseur : au doigt, un curseur à deux poignées est
   pénible et imprécis. Ces cibles font 36 px de haut, on les touche du premier coup. */
.filtre-budget { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-titre { font-size: 13px; font-weight: 700; color: #667; }
.fb-choix { display: flex; gap: 7px; flex-wrap: wrap; }
.fb-btn { background: #fff; border: 1.5px solid #dde3ea; border-radius: 999px; padding: 8px 14px; min-height: 36px; font: inherit; font-size: 13px; font-weight: 600; color: #334; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.fb-btn:hover { border-color: #1976d2; color: #1976d2; }
.fb-btn.actif { background: #1976d2; border-color: #1976d2; color: #fff; }
.fb-btn span { opacity: .65; font-weight: 500; margin-left: 3px; }
.fb-btn.actif span { opacity: .8; }

@media (max-width: 700px) {
  /* La barre passe en colonne : le filtre a besoin de toute la largeur pour que
     ses tranches restent lisibles sans être coupées. */
  .collection-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .filtre-budget { flex-direction: column; align-items: flex-start; gap: 7px; }
  /* Les tranches passent à la ligne au lieu de défiler horizontalement.
     Mesuré : 567 px de boutons pour 400 px disponibles — en défilement, la
     dernière tranche sortait de l'écran et le client pouvait ne jamais la voir.
     Deux lignes coûtent 40 px de hauteur et montrent tout. */
  .fb-choix { width: 100%; flex-wrap: wrap; }
}