/* ============================================================
   BelgoMaxStore — Feuille de style partagée
   Couleurs : bleu (principal), rouge (accent), vert (secondaire)
   ============================================================ */

/* Un élément portant l'attribut « hidden » doit vraiment disparaître.
   Sans cette règle, un « display: grid » d'auteur (les grilles .products,
   par exemple) l'emporte sur le « display: none » du navigateur et le
   conteneur masqué reste visible — les articles des deux univers
   Ordinateurs / Bureautique s'affichaient alors en double. */
[hidden] {
  display: none !important;
}

:root {
  /* Palette officielle BelgoMaxStore (extraite du logo) */
  --bleu: #00349A;
  --bleu-clair: #1E62C8;
  --bleu-fonce: #002B7C;
  --rouge: #ED3340;
  --rouge-fonce: #C4202C;
  --vert: #008651;
  --vert-fonce: #006B41;
  --accent: #4BE0A0;
  --blanc: #ffffff;
  --gris-clair: #f4f6f9;
  --gris: #6b7280;
  --noir: #111827;
  --bordure: #e5e7eb;

  /* Fond de page — modifié par les thèmes saisonniers (js/themes.js) */
  --fond: #f4f6f9;
  --theme-img: url('../images/hero.svg');

  /* Typographies (Google Fonts chargées dans le <head> de chaque page) */
  --police-titres: "Outfit", "Segoe UI", "Trebuchet MS", system-ui, sans-serif;
  --police-texte: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--police-texte);
  background: var(--fond);
  color: var(--noir);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.logo,
.btn,
.price,
.produit-prix,
.section-title h2 {
  font-family: var(--police-titres);
}

h1, h2, h3 {
  letter-spacing: -0.01em;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== Application mono-page (sections) ===== */
.page {
  display: none;
}
.page.active {
  display: block;
}

/* ===== Bandeau supérieur ===== */
.top-bar {
  background: var(--bleu-fonce);
  color: var(--blanc);
  font-size: 0.8rem;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.top-bar .promo {
  font-weight: 600;
}

.top-bar .promo span {
  color: var(--accent);
}

/* ===== En-tête principal ===== */
.header {
  background: var(--blanc);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--bleu);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--bleu);
  white-space: nowrap;
}

.logo-img {
  height: 64px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.footer-logo {
  height: 72px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}

.logo em,
.logo .nm-rouge {
  color: var(--rouge);
  font-style: normal;
}

.logo .max,
.logo .nm-vert {
  color: var(--vert);
}

.logo .nm-bleu {
  color: var(--bleu);
}

.logo-nom {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.search-bar {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  background: var(--gris-clair);
  border: 2px solid var(--bordure);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.search-bar:focus-within {
  border-color: var(--bleu);
}

.search-bar input {
  flex: 1;
  border: none;
  outline: none;
  padding: 12px 18px;
  font-size: 0.95rem;
  background: transparent;
}

.search-bar button {
  background: var(--bleu);
  color: var(--blanc);
  border: none;
  padding: 12px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.search-bar button:hover {
  background: var(--bleu-fonce);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn {
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: 0.2s;
  white-space: nowrap;
}

.btn-connexion {
  background: transparent;
  border: 2px solid var(--bleu);
  color: var(--bleu);
}

.btn-connexion:hover {
  background: var(--bleu);
  color: var(--blanc);
}

.btn-inscription {
  background: var(--rouge);
  color: var(--blanc);
}

.btn-inscription:hover {
  background: var(--rouge-fonce);
}

.btn-panier {
  background: var(--vert);
  color: var(--blanc);
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-panier:hover {
  background: var(--vert-fonce);
}

/* ===== Barre de navigation : onglets sobres type « dossier » ===== */
.navbar {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-bottom: 1px solid #e8edf5;
  box-shadow: 0 6px 22px rgba(0, 17, 64, 0.05);
  position: relative;
  z-index: 40;
}

.nav-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 14px;
  margin: 0 auto;
  max-width: 1440px;
}

/* Onglets modernes : pastilles arrondies, survol qui monte, voile
   vertical (haut → bas) et indicateur qui descend du haut. */
.nav-tab {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 15px;
  border-radius: 14px;
  background: var(--blanc);
  border: 1px solid #e8edf5;
  color: #4b5563;
  font-weight: 600;
  font-size: 0.71rem;
  line-height: 1.15;
  white-space: nowrap;
  flex: 0 0 auto;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.36s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.26s ease,
              border-color 0.26s ease;
  animation: apparitionOnglet 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--rang, 0) * 45ms);
}

@keyframes apparitionOnglet {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

/* Voile qui descend du haut au survol */
.nav-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(237, 51, 64, 0.12), rgba(237, 51, 64, 0));
  opacity: 0;
  transform: translateY(-100%);
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}

.nav-tab:hover::before {
  transform: translateY(0);
  opacity: 1;
}

/* Indicateur qui tombe du haut de l'onglet */
.nav-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--rouge), #FF7A5C);
  transform: translateX(-50%);
  transition: width 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-tab:hover::after,
.nav-tab.active::after {
  width: 64%;
}

.nav-tab .nav-ico {
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-tab .nav-txt {
  letter-spacing: 0.01em;
}

.nav-tab:hover {
  transform: translateY(-5px);
  background: var(--blanc);
  border-color: rgba(237, 51, 64, 0.32);
  color: var(--rouge-fonce);
  box-shadow: 0 14px 26px rgba(237, 51, 64, 0.16);
}

.nav-tab:hover .nav-ico {
  transform: translateY(-3px) scale(1.14);
}

.nav-tab.active {
  background: linear-gradient(160deg, var(--bleu-fonce), var(--bleu) 65%, var(--bleu-clair));
  border-color: transparent;
  color: var(--blanc);
  box-shadow: 0 12px 24px rgba(0, 52, 154, 0.26);
  transform: translateY(-2px);
}

.nav-tab.active .nav-ico {
  transform: scale(1.1);
}

/* Pastille « nouveau » discrète dans le coin de l'onglet */
.nav-tab .nav-new {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 50%;
  background: var(--rouge);
  color: transparent;
  font-size: 0;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--blanc);
}

/* ===== Sélecteur de langue ===== */
.top-bar-droite {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.langue-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 2px;
}

.langue-btn {
  border: 0;
  background: transparent;
  color: #DCE6F7;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.langue-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--blanc);
}

.langue-btn.active {
  background: var(--blanc);
  color: var(--bleu-fonce);
}

/* ===== Blocs « famille » (logiciels Windows / macOS, multimédia) ===== */
.soft-bloc {
  margin-bottom: 34px;
}

.soft-bloc:last-child {
  margin-bottom: 0;
}

.soft-bloc-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--bordure);
}

.soft-bloc-entete h3 {
  font-size: 1.15rem;
  color: var(--bleu-fonce);
  display: flex;
  align-items: center;
  gap: 8px;
}

.soft-bloc-desc {
  color: var(--gris);
  font-size: 0.88rem;
  margin-bottom: 18px;
}

.soft-compteur {
  margin-left: auto;
  background: var(--gris-clair);
  border: 1px solid var(--bordure);
  color: var(--gris);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}

/* Bandeau d'information réutilisable */
.info-bloc {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--blanc);
  border-left: 6px solid var(--rouge);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-bloc .icon {
  font-size: 1.6rem;
  line-height: 1;
}

.info-bloc h3 {
  font-size: 1rem;
  color: var(--bleu-fonce);
  margin-bottom: 4px;
}

.info-bloc p {
  font-size: 0.88rem;
  color: var(--gris);
}

/* Grille des familles de la page Média & Jeux vidéo */
.familles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.famille-card {
  background: var(--blanc);
  border: 2px solid var(--bordure);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: 0.2s;
  cursor: pointer;
}

.famille-card:hover,
.famille-card.active {
  border-color: var(--bleu);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.09);
}

.famille-card.active {
  background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu));
  color: var(--blanc);
}

.famille-card.active .famille-desc {
  color: rgba(255, 255, 255, 0.85);
}

/* Sous-famille sans article (ex. « Acer » chez les ordinateurs) : le bouton
   reste visible pour montrer le rayon, mais grisé et non cliquable. */
.famille-card.vide,
.famille-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.famille-card.vide:hover,
.famille-card:disabled:hover {
  transform: none;
  border-color: var(--bordure);
  box-shadow: none;
}

.famille-ico {
  font-size: 1.6rem;
  line-height: 1;
}

.famille-nom {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--police-titres);
  line-height: 1.25;
}

.famille-desc {
  display: block;
  font-size: 0.76rem;
  color: var(--gris);
  line-height: 1.3;
}

/* ===== Bannière héro ===== */
.hero {
  background: linear-gradient(120deg, var(--bleu-fonce) 0%, var(--bleu) 60%, var(--bleu-clair) 100%);
  color: var(--blanc);
  padding: 50px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.hero-text h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  margin-bottom: 12px;
}

.hero-text h1 .rouge {
  color: #FF8A92;
}

.hero-text h1 .vert {
  color: var(--accent);
}

.hero-text p {
  font-size: 1.05rem;
  opacity: 0.92;
  max-width: 520px;
  margin-bottom: 20px;
}

.hero-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.badge {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-image {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 18px;
  font-size: 4rem;
  max-width: 430px;
}

.hero-illustration {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
}

/* ===== Bannière de page (catégories) ===== */
.page-banner {
  background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu));
  color: var(--blanc);
  padding: 40px 24px;
}

/* Message affiché dans une grille de produits vide (ex. Fashion & Beauty
   avant que le premier article soit ajouté depuis l'espace administrateur). */
.grille-vide {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--gris);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 36px 16px;
  background: var(--blanc);
  border: 1px dashed #d7dee8;
  border-radius: 14px;
}

.page-banner .inner {
  max-width: 1560px;
  margin: 0 auto;
}

.page-banner h1 {
  font-size: 2rem;
  margin-bottom: 8px;
}

.page-banner p {
  opacity: 0.9;
  max-width: 640px;
}

.breadcrumb {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-bottom: 14px;
}

.breadcrumb a {
  text-decoration: underline;
}

/* ===== Sections ===== */
.section {
  padding: 40px 24px;
  max-width: 1560px;
  margin: 0 auto;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.section-title h2 {
  font-size: 1.5rem;
  color: var(--bleu-fonce);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title h2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 26px;
  background: var(--rouge);
  border-radius: 4px;
}

.voir-tout {
  color: var(--rouge);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ===== Filtres ===== */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--bordure);
  background: var(--blanc);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

.chip:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.chip.active {
  background: var(--bleu);
  border-color: var(--bleu);
  color: var(--blanc);
}

/* ===== Grille de catégories ===== */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.category-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 26px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
}

.category-card .cat-photo {
  width: calc(100% + 32px);
  margin: -26px -16px 12px;
  height: 96px;
  object-fit: cover;
  display: block;
}

/* Vraies photos des rubriques (2026-09-28) : on leur donne plus de place
   qu'aux anciennes illustrations. Les fichiers sont carres (800 x 800), donc
   « cover » garde le sujet visible quel que soit la largeur de la carte. */
.category-card .cat-photo[src*="categories/"] {
  height: 150px;
  background: linear-gradient(135deg, #eef2f7, #dde6f0);
}

.category-card:hover {
  border-color: var(--bleu);
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.category-card .icon {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.category-card h3 {
  font-size: 1rem;
  color: var(--noir);
}

.category-card p {
  font-size: 0.8rem;
  color: var(--gris);
}

/* ===== Grille de produits ===== */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

.product-card {
  background: var(--blanc);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: 0.2s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.product-image {
  height: 170px;
  background: linear-gradient(135deg, #eef2f7, #dde6f0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  position: relative;
  overflow: hidden;
}

.product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.product-card:hover .product-photo {
  transform: scale(1.06);
}

.product-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--blanc);
  text-transform: uppercase;
}

.tag-neuf {
  background: var(--vert);
}

.tag-occasion {
  background: var(--rouge);
}

.tag-promo {
  background: var(--bleu);
}

.product-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-body h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.product-body .spec {
  font-size: 0.8rem;
  color: var(--gris);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--bleu);
}

.add-btn {
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 1.3rem;
  cursor: pointer;
  transition: 0.2s;
}

.add-btn:hover {
  background: var(--rouge-fonce);
}

/* ===== Cartes vouchers (cartes cadeaux) ===== */
.vouchers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.voucher-card {
  border-radius: 16px;
  overflow: hidden;
  color: var(--blanc);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  transition: 0.2s;
  position: relative;
}

.voucher-card:hover {
  transform: translateY(-4px);
}

.voucher-head {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voucher-head .logo-marque {
  font-size: 1.4rem;
  font-weight: 800;
}

.voucher-head .icon {
  font-size: 2.2rem;
}

.voucher-body {
  background: var(--blanc);
  color: var(--noir);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.voucher-body h3 {
  font-size: 1rem;
}

.voucher-body .spec {
  font-size: 0.8rem;
  color: var(--gris);
}

.voucher-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.voucher-price .price {
  color: var(--rouge);
}

/* Couleurs des marques */
.vc-netflix { background: #e50914; }
.vc-youtube { background: #ff0000; }
.vc-prime { background: #00a8e1; }
.vc-spotify { background: #1db954; }
.vc-disney { background: #113ccf; }
.vc-apple { background: #555555; }
.vc-google { background: #4285f4; }
.vc-playstation { background: #003791; }
.vc-xbox { background: #107c10; }
.vc-autres { background: linear-gradient(120deg, #00349A, #008651); }

/* ===== Cartes logiciels ===== */
.software-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--blanc);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
}

.software-banner .icon {
  font-size: 2.6rem;
}

.software-banner h3 {
  color: var(--bleu-fonce);
}

.software-banner p {
  font-size: 0.9rem;
  color: var(--gris);
}

/* ===== Tableau pièces détachées ===== */
.parts-table-wrap {
  overflow-x: auto;
  background: var(--blanc);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.parts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: 0.9rem;
}

.parts-table th {
  background: var(--bleu-fonce);
  color: var(--blanc);
  text-align: left;
  padding: 12px 16px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.parts-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}

.parts-table tr:last-child td {
  border-bottom: none;
}

.parts-table .dispo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.dispo-oui {
  background: #d8f2e6;
  color: var(--vert-fonce);
}

.dispo-commande {
  background: #e2eaf7;
  color: var(--bleu);
}

/* ===== Bandeau confiance ===== */
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.trust-item {
  background: var(--blanc);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.trust-item .icon {
  font-size: 2rem;
  color: var(--vert);
}

.trust-item h3 {
  font-size: 0.95rem;
}

.trust-item p {
  font-size: 0.8rem;
  color: var(--gris);
}

/* ===== Pied de page ===== */
.footer {
  background: var(--noir);
  color: #d1d5db;
  padding: 40px 24px 20px;
}

.footer-grid {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding-bottom: 24px;
}

.footer h3 {
  color: var(--blanc);
  font-size: 1rem;
  margin-bottom: 12px;
}

.footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
}

.footer ul a:hover {
  color: var(--bleu);
}

.footer-bottom {
  border-top: 1px solid #374151;
  padding-top: 16px;
  text-align: center;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* Lien d'accès au back-office : volontairement discret */
.lien-admin {
  font-size: 0.82rem;
  opacity: 0.6;
  letter-spacing: 0.02em;
}

.lien-admin:hover {
  opacity: 1;
}

/* ===== Fenêtres modales ===== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-overlay.open {
  display: flex;
}

.modal {
  background: var(--blanc);
  border-radius: 20px;
  max-width: 420px;
  width: 100%;
  padding: 28px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal .close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--gris);
}

.modal h2 {
  color: var(--bleu-fonce);
  margin-bottom: 6px;
}

.modal .subtitle {
  font-size: 0.85rem;
  color: var(--gris);
  margin-bottom: 18px;
}

.modal form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal label {
  font-size: 0.8rem;
  font-weight: 600;
}

.modal input {
  padding: 12px 14px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}

.modal input:focus {
  border-color: var(--bleu);
}

.modal .btn-submit {
  background: var(--bleu);
  color: var(--blanc);
  border: none;
  padding: 13px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: 6px;
}

.modal .btn-submit:hover {
  background: var(--bleu-fonce);
}

.modal .switch {
  text-align: center;
  font-size: 0.85rem;
  margin-top: 12px;
  color: var(--gris);
}

.modal .switch a {
  color: var(--rouge);
  font-weight: 600;
  cursor: pointer;
}

/* ===== Page produit ===== */
.produit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--blanc);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.produit-media {
  background: linear-gradient(135deg, #eef2f7, #dde6f0);
  border-radius: 16px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.produit-icone {
  font-size: 7rem;
}

.produit-photo {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 16px;
  display: block;
}

.produit-infos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.produit-infos h1 {
  font-size: 1.7rem;
  color: var(--bleu-fonce);
}

.produit-prix {
  font-size: 2rem;
  font-weight: 800;
  color: var(--bleu);
}

.produit-qte {
  display: flex;
  align-items: center;
  gap: 12px;
}

.produit-qte button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 2px solid var(--bordure);
  background: var(--blanc);
  font-size: 1.2rem;
  cursor: pointer;
  font-weight: 700;
}

.produit-qte button:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.produit-qte span {
  font-size: 1.2rem;
  font-weight: 700;
  min-width: 30px;
  text-align: center;
}

.btn-ajouter-panier {
  background: var(--rouge);
  color: var(--blanc);
  border: none;
  padding: 14px 22px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.btn-ajouter-panier:hover {
  background: var(--rouge-fonce);
}

/* ===== Événements & Séjours =====
   Ce ne sont pas des articles de stock : la réservation (places, dates) se fait
   sur WhatsApp, à côté du panier pour ceux qui veulent régler la place. */
.produit-reservation {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin: 12px 0 2px;
}

.btn-reserver {
  background: var(--vert);
  color: var(--blanc);
  border: none;
  padding: 13px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: 0.2s;
}

.btn-reserver:hover {
  background: var(--vert-fonce);
}

.btn-reserver.desactive {
  background: #c7ced6;
  cursor: not-allowed;
}

.produit-reservation .note {
  font-size: 0.78rem;
  color: var(--gris);
}

.produit-avantages {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--gris);
}

.produit-desc h2 {
  font-size: 1.1rem;
  color: var(--bleu-fonce);
  margin-bottom: 8px;
}

.produit-desc p {
  color: var(--gris);
  font-size: 0.95rem;
}

/* ===== Page panier ===== */
.panier-ligne {
  display: grid;
  grid-template-columns: 2fr auto auto auto;
  align-items: center;
  gap: 18px;
  background: var(--blanc);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.panier-prod {
  display: flex;
  align-items: center;
  gap: 14px;
}

.panier-prod .icon {
  font-size: 2.2rem;
}

.panier-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--gris-clair);
}

.panier-prod h3 {
  font-size: 0.95rem;
}

.panier-qte {
  display: flex;
  align-items: center;
  gap: 10px;
}

.panier-qte button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid var(--bordure);
  background: var(--blanc);
  cursor: pointer;
  font-weight: 700;
}

.panier-qte button:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.panier-prix {
  font-weight: 800;
  color: var(--bleu);
  min-width: 80px;
  text-align: right;
}

.panier-retirer {
  background: none;
  border: none;
  color: var(--rouge);
  font-size: 1.1rem;
  cursor: pointer;
}

.panier-vide {
  text-align: center;
  padding: 50px 20px;
  background: var(--blanc);
  border-radius: 20px;
}

.panier-vide .icon {
  font-size: 4rem;
}

.panier-vide h2 {
  color: var(--bleu-fonce);
  margin: 12px 0 6px;
}

.panier-vide p {
  color: var(--gris);
  margin-bottom: 18px;
}

.panier-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--blanc);
  border-radius: 16px;
  padding: 20px 22px;
  margin-top: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.panier-resume .total-label {
  font-weight: 700;
  color: var(--bleu-fonce);
}

.panier-resume .total {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--bleu);
}

/* ===== Boutiques / contact ===== */
.boutiques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
}

.boutique-card {
  background: var(--blanc);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border-top: 5px solid var(--bleu);
}

.boutique-card.togo {
  border-top-color: var(--vert);
}

.boutique-card h2 {
  color: var(--bleu-fonce);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.boutique-card .ville {
  color: var(--rouge);
  font-weight: 700;
  margin-bottom: 14px;
}

.boutique-info {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
}

.boutique-info li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.boutique-info a {
  color: var(--bleu);
  word-break: break-word;
}

.boutique-info .label {
  font-weight: 700;
  color: var(--noir);
  min-width: 110px;
}

.horaires {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--gris);
  border-top: 1px solid var(--bordure);
  padding-top: 12px;
}

.horaires table {
  width: 100%;
  border-collapse: collapse;
}

.horaires td {
  padding: 2px 0;
}

.horaires .ferme {
  color: var(--rouge);
}

.btn-maps {
  display: inline-block;
  margin-top: 16px;
  background: var(--bleu);
  color: var(--blanc);
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.btn-maps:hover {
  background: var(--bleu-fonce);
}

/* --- Boutiques : en-tête, actions, localisation --- */
.boutique-card {
  display: flex;
  flex-direction: column;
}

.boutique-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.boutique-logo {
  height: 44px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.boutique-entete h2 {
  margin-bottom: 0;
}

.boutique-drapeau {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
}

.boutique-card.togo .boutique-drapeau {
  background: var(--vert);
}

.boutique-info {
  margin-top: 10px;
}

.boutique-info li > span:last-child,
.boutique-info li > a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.boutique-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: 0.2s;
}

.btn-action.appel {
  background: var(--bleu);
  color: var(--blanc);
}

.btn-action.appel:hover {
  background: var(--bleu-fonce);
}

.btn-action.whatsapp {
  background: var(--vert);
  color: var(--blanc);
}

.btn-action.whatsapp:hover {
  background: var(--vert-fonce);
}

.btn-action.email {
  background: var(--rouge);
  color: var(--blanc);
}

.btn-action.email:hover {
  background: var(--rouge-fonce);
}

.btn-action.maps,
.btn-action.facebook {
  background: var(--blanc);
  color: var(--bleu);
  border-color: var(--bleu);
}

.btn-action.maps:hover,
.btn-action.facebook:hover {
  background: var(--bleu);
  color: var(--blanc);
}

/* --- Photo de la boutique (carte Bénin et carte Togo) --- */
.boutique-photo {
  margin: 16px 0 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bordure);
  background: var(--gris-clair);
}

/* Cadre de la galerie : même encombrement qu'une photo seule */
.boutique-photo .galerie-piste {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: 420px;
  overflow: hidden;
  background: var(--gris-clair);
}

.boutique-photo .galerie-piste img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transition: opacity 0.6s ease, transform 0.4s ease;
}

/* Sans JavaScript : la première photo s'affiche normalement */
.boutique-photo .galerie-piste img:first-child {
  opacity: 1;
}

/* Galerie défilante (au moins deux photos) : fondu d'une photo à l'autre */
.boutique-photo.galerie-active .galerie-piste img {
  opacity: 0;
}

.boutique-photo.galerie-active .galerie-piste img.active {
  opacity: 1;
}

.boutique-photo:hover .galerie-piste img.active {
  transform: scale(1.03);
}

/* Commandes de la galerie */
.galerie-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--blanc);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.galerie-fleche:hover {
  background: rgba(0, 0, 0, 0.6);
}

.galerie-fleche.precedent {
  left: 10px;
}

.galerie-fleche.suivant {
  right: 10px;
}

.galerie-points {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.galerie-point {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.2s;
}

.galerie-point.active {
  background: var(--rouge);
}

.boutique-photo figcaption {
  padding: 9px 12px;
  font-size: 0.78rem;
  color: var(--gris);
  line-height: 1.4;
}

.boutique-map {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--bordure);
  line-height: 0;
  background: var(--gris-clair);
}

.boutique-map iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}

.boutique-note {
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--gris);
}

/* Information retirée depuis l'espace admin (onglet Boutiques) */
.boutique-card .info-masquee {
  display: none !important;
}

/* ===== Moyens de paiement ===== */
.paiements {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.paiements .paiements-label {
  color: #9ca3af;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.paiements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.paiement-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blanc);
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.paiement-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

@media (max-width: 800px) {
  .produit-layout {
    grid-template-columns: 1fr;
  }
  .panier-ligne {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 600px) {
  .hero-text h1,
  .page-banner h1 {
    font-size: 1.6rem;
  }
  .logo {
    font-size: 1.2rem;
  }
  .logo-img {
    height: 48px;
  }
  .boutique-map iframe {
    height: 180px;
  }
  .boutique-photo .galerie-piste {
    max-height: 260px;
  }
  .boutique-info .label {
    min-width: 92px;
  }
  /* Sur petit écran, le monogramme (large) ne laisse pas assez de place au
     titre à côté : on empile le logo au-dessus du nom pour éviter tout
     débordement horizontal. */
  .boutique-entete {
    flex-wrap: wrap;
  }
  .boutique-logo {
    height: 40px;
  }
}

/* ============================================================
   THÈMES SAISONNIERS (moteur : js/themes.js)
   ============================================================ */

/* Bandeau saisonnier affiché sous la barre d'onglets */
.theme-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 18px;
  background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu));
  color: var(--blanc);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: filter 0.2s;
}

.theme-ribbon:hover {
  filter: brightness(1.08);
}

.theme-ribbon-ico {
  font-size: 1.1rem;
  line-height: 1;
}

.theme-ribbon-nom {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Décorations flottantes de la saison */
.theme-deco {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.theme-deco span {
  position: absolute;
  left: calc(6% + (var(--i) * 15%));
  top: -40px;
  font-size: 1.5rem;
  opacity: 0;
  animation: themeFalling 16s linear infinite;
  animation-delay: calc(var(--i) * -2.4s);
}

@keyframes themeFalling {
  0% {
    transform: translateY(-40px) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 0.5;
  }
  88% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(105vh) rotate(220deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-deco {
    display: none;
  }
}

/* Illustration de la saison dans les bannières de page */
.page-banner {
  position: relative;
  overflow: hidden;
}

.page-banner .inner {
  position: relative;
  z-index: 1;
}

.page-banner::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -6px;
  width: 250px;
  height: 165px;
  background-image: var(--theme-img);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 900px) {
  .page-banner::after {
    display: none;
  }
}

/* ============================================================
   ANNONCES (moteur : js/annonces.js — édition : admin.html)
   ============================================================ */
.annonces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
}

.annonce {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: 14px;
  overflow: hidden;
  border-left: 6px solid var(--bleu);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.annonce.promo {
  border-left-color: var(--rouge);
}

.annonce.urgent {
  border-left-color: #b91c1c;
}

.annonce.nouveau {
  border-left-color: var(--vert);
}

.annonce-img {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.annonce-corps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}

.annonce-type {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

.annonce h3 {
  font-size: 1.05rem;
  color: var(--bleu-fonce);
}

.annonce p {
  font-size: 0.9rem;
  color: var(--gris);
}

.annonce-date {
  font-size: 0.75rem;
  color: var(--gris);
}

.annonce-lien {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bleu);
}

/* ============================================================
   CARROUSEL PUBLICITAIRE (moteur : js/annonces.js)
   Bandes défilantes inspirées des grandes places de marché
   ============================================================ */
.carrousel {
  position: relative;
  overflow: hidden;
  background: var(--blanc);
  outline-offset: -3px;
}

.carrousel-piste {
  display: grid;
  position: relative;
  z-index: 1;
}

/* Toutes les diapositives occupent la MÊME cellule : la plus haute
   donne la hauteur, aucune n'est rognée. */
.carrousel-slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 76px;
  color: var(--bleu-fonce);
  opacity: 0;
  transform: translateX(6%) scale(0.99);
  transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}

.carrousel-slide.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
}

.carrousel-slide.promo {
  background: linear-gradient(135deg, #FFF1F3 0%, #FFE2E7 45%, #FFD8C6 100%);
}

.carrousel-slide.nouveau {
  background: linear-gradient(135deg, #EFFCF6 0%, #D9F6EA 55%, #D3F0FF 100%);
}

.carrousel-slide.urgent {
  background: linear-gradient(135deg, #FFF0F0 0%, #FFDADA 60%, #FFD3B8 100%);
}

.carrousel-slide.info {
  background: linear-gradient(135deg, #F0F5FF 0%, #E0EAFE 55%, #FFE9EC 100%);
}

/* Halos décoratifs animés, propres à chaque diapositive */
.carrousel-slide::before,
.carrousel-slide::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.carrousel-slide::before {
  width: 280px;
  height: 280px;
  right: -60px;
  top: -110px;
  background: radial-gradient(circle, rgba(237, 51, 64, 0.22), transparent 68%);
  animation: derive 12s ease-in-out infinite;
}

.carrousel-slide::after {
  width: 200px;
  height: 200px;
  right: 180px;
  bottom: -120px;
  background: radial-gradient(circle, rgba(255, 179, 71, 0.32), transparent 70%);
  animation: derive 16s ease-in-out infinite reverse;
}

.carrousel-slide h2 {
  color: var(--rouge-fonce);
}

.carrousel-slide.nouveau h2 {
  color: var(--vert-fonce);
}

.carrousel-slide.info h2 {
  color: var(--bleu-fonce);
}

.carrousel-slide p {
  color: #374151;
}

.slide-texte {
  max-width: 660px;
}

.slide-badge {
  display: inline-block;
  background: linear-gradient(120deg, var(--rouge), #FF7A5C);
  border: 0;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--blanc);
  box-shadow: 0 6px 16px rgba(237, 51, 64, 0.28);
  animation: rebondDoux 3.2s ease-in-out infinite;
}

.carrousel-slide.nouveau .slide-badge {
  background: linear-gradient(120deg, var(--vert-fonce), var(--vert));
  box-shadow: 0 6px 16px rgba(0, 134, 81, 0.26);
}

.carrousel-slide.info .slide-badge {
  background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu-clair));
  box-shadow: 0 6px 16px rgba(0, 52, 154, 0.24);
}

.carrousel-slide h2 {
  font-size: 1.75rem;
  line-height: 1.2;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.carrousel-slide p {
  font-size: 1rem;
  opacity: 0.94;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.slide-cta {
  display: inline-block;
  background: linear-gradient(120deg, var(--rouge) 0%, #FF6B4A 100%);
  color: var(--blanc);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 22px rgba(237, 51, 64, 0.3);
  animation: lueur 2.8s ease-in-out infinite;
}

.slide-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(237, 51, 64, 0.4);
}

.slide-date {
  display: block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--gris);
}

.slide-visuel {
  font-size: 5.5rem;
  line-height: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 18px rgba(237, 51, 64, 0.22));
  animation: jouer 3.6s ease-in-out infinite;
}

/* Barre de progression : la durée doit rester alignée sur DUREE_DIAPO
   (js/annonces.js — 7000 ms). */
.slide-duree {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--rouge), #FFB347);
}

.carrousel-slide.active .slide-duree {
  animation: progression var(--duree-diapo, 7s) linear forwards;
}

.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 2px solid rgba(237, 51, 64, 0.2);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--rouge);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.12);
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.carrousel-fleche:hover {
  background: var(--rouge);
  color: var(--blanc);
  transform: translateY(-50%) scale(1.09);
}

.carrousel-fleche.precedent {
  left: 14px;
}

.carrousel-fleche.suivant {
  right: 14px;
}

.carrousel-points {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 4;
}

.carrousel-point {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 43, 124, 0.2);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.carrousel-point.active {
  width: 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rouge), #FF7A5C);
}

@keyframes flottement {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

/* Mouvements joyeux : rebond léger, jeu du visuel, halo qui respire */
@keyframes rebondDoux {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes jouer {
  0%, 100% { transform: translateY(0) rotate(-4deg) scale(1); }
  35% { transform: translateY(-16px) rotate(5deg) scale(1.06); }
  70% { transform: translateY(-4px) rotate(-2deg) scale(1.02); }
}

@keyframes lueur {
  0%, 100% { box-shadow: 0 10px 22px rgba(237, 51, 64, 0.3); }
  50% { box-shadow: 0 14px 30px rgba(237, 51, 64, 0.5); }
}

@keyframes derive {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-26px, 18px) scale(1.12); }
}

@keyframes progression {
  from { width: 0; }
  to { width: 100%; }
}

/* ===== Ruban d'avantages qui défile en continu ===== */
.ruban-anim {
  overflow: hidden;
  background: linear-gradient(90deg, #FFF7F8, #FFFDF7 50%, #FFF7F8);
  border-bottom: 1px solid #FFDCE1;
}

.ruban-piste {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  padding: 9px 0;
  animation: rubanDefile 38s linear infinite;
}

.ruban-anim:hover .ruban-piste {
  animation-play-state: paused;
}

.ruban-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--rouge-fonce);
  white-space: nowrap;
}

.ruban-item.ruban-annonce {
  color: var(--bleu-fonce);
}

.ruban-ico {
  font-size: 1rem;
}

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

/* ============================================================
   ANIMATIONS D'APPARITION (moteur : js/animations.js)
   La classe « js-anim » n'est posée que si JavaScript est actif :
   sans JS, tout le contenu reste visible.
   ============================================================ */
html.js-anim .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.2, 0.7, 0.3, 1),
              transform 0.65s cubic-bezier(0.2, 0.7, 0.3, 1);
  transition-delay: var(--delai, 0ms);
  will-change: opacity, transform;
}

html.js-anim .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Aide & Contact flottante (toutes les pages) */
.aide-flottante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--vert-fonce), var(--vert));
  color: var(--blanc);
  font-family: var(--police-texte);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0, 107, 65, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.aide-flottante:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 32px rgba(0, 107, 65, 0.42);
}

.aide-flottante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(75, 224, 160, 0.75);
  animation: pulsation 2.8s ease-out infinite;
  pointer-events: none;
}

@keyframes pulsation {
  0% { transform: scale(1); opacity: 0.7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.aide-panneau {
  position: fixed;
  right: 16px;
  bottom: 130px;
  z-index: 899;
  width: min(380px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
  overflow-y: auto;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: 0 22px 54px rgba(0, 17, 64, 0.26);
  padding: 16px;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}

.aide-panneau.ouvert {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.aide-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.aide-entete h2 {
  font-size: 1.1rem;
  color: var(--bleu-fonce);
}

.aide-entete p {
  font-size: 0.8rem;
  color: var(--gris);
}

.aide-fermer {
  border: 0;
  background: var(--gris-clair);
  color: var(--noir);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
}

.aide-stats {
  display: flex;
  gap: 10px;
  margin: 12px 0 14px;
}

.aide-stat {
  flex: 1;
  background: var(--gris-clair);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}

.aide-stat b {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.25rem;
  color: var(--bleu);
  line-height: 1.1;
}

.aide-stat span {
  font-size: 0.7rem;
  color: var(--gris);
}

.aide-boutique {
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--bleu);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.aide-boutique.togo {
  border-left-color: var(--vert);
}

.aide-boutique h3 {
  font-size: 0.95rem;
  color: var(--bleu-fonce);
  margin-bottom: 2px;
}

.aide-ville {
  font-size: 0.76rem;
  color: var(--gris);
  margin-bottom: 8px;
}

.aide-ligne {
  display: flex;
  gap: 8px;
  font-size: 0.8rem;
  margin-bottom: 5px;
}

.aide-ligne .aide-cle {
  color: var(--gris);
  min-width: 74px;
}

.aide-ligne a {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: none;
}

.aide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.aide-bouton {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--blanc);
  background: var(--bleu);
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.aide-bouton:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.aide-bouton.whatsapp { background: #25D366; color: #06301B; }
.aide-bouton.appel { background: var(--bleu-fonce); }
.aide-bouton.maps { background: var(--rouge); }

/* Grille « Aide & Contact » de la page d'accueil */
.aide-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 18px;
}

.aide-carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-left: 5px solid var(--bleu);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease;
}

.aide-carte:hover {
  box-shadow: 0 14px 30px rgba(0, 17, 64, 0.13);
}

.aide-carte.togo {
  border-left-color: var(--vert);
}

.aide-carte h3 {
  font-size: 1.02rem;
  color: var(--bleu-fonce);
  margin-bottom: 3px;
}

/* ============================================================
   BARRE SUPÉRIEURE — menu « Aide & Contact »
   ============================================================ */
.top-aide {
  position: relative;
}

.top-aide summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-weight: 700;
  color: var(--blanc);
  white-space: nowrap;
  transition: background 0.2s ease;
}

.top-aide summary::-webkit-details-marker {
  display: none;
}

.top-aide summary:hover {
  background: rgba(255, 255, 255, 0.26);
}

.top-aide[open] summary {
  background: var(--rouge);
  border-color: var(--rouge);
}

.top-aide-panneau {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1000;
  width: min(330px, calc(100vw - 32px));
  background: var(--blanc);
  color: var(--noir);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(0, 17, 64, 0.28);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  animation: apparitionPanneau 0.22s ease;
}

@keyframes apparitionPanneau {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.top-aide-groupe {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 7px 0 3px;
  font-family: var(--police-titres);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--rouge-fonce);
}

.top-aide-badge {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 800;
}

.top-aide-badge.togo {
  background: var(--vert);
}

.top-aide-panneau a {
  color: var(--bleu);
  font-size: 0.82rem;
  text-decoration: none;
  padding: 2px 0;
}

.top-aide-panneau a:hover {
  color: var(--rouge);
}

.top-aide-chat {
  margin-top: 10px;
  border: 0;
  cursor: pointer;
  background: linear-gradient(120deg, var(--rouge), #FF7A5C);
  color: var(--blanc);
  font-family: var(--police-texte);
  font-weight: 800;
  font-size: 0.84rem;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(237, 51, 64, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-aide-chat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(237, 51, 64, 0.38);
}

/* ============================================================
   ASSISTANT D'AIDE (moteur : js/animations.js)
   ============================================================ */
.assistant-flottant {
  position: fixed;
  right: 16px;
  bottom: 74px;
  z-index: 900;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--bleu), var(--bleu-clair));
  color: var(--blanc);
  font-size: 1.3rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 52, 154, 0.34);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.assistant-flottant:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 14px 30px rgba(0, 52, 154, 0.44);
}

.assistant-panneau {
  position: fixed;
  right: 16px;
  bottom: 130px;
  z-index: 901;
  width: min(400px, calc(100vw - 32px));
  max-height: min(76vh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 18px;
  box-shadow: 0 24px 58px rgba(0, 17, 64, 0.3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}

.assistant-panneau.ouvert {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.assistant-entete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu));
  color: var(--blanc);
}

.assistant-titre {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 0.98rem;
}

.assistant-sous {
  font-size: 0.72rem;
  opacity: 0.88;
  display: flex;
  align-items: center;
  gap: 6px;
}

.assistant-pastille {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: clignote 1.8s ease-in-out infinite;
}

@keyframes clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.assistant-fermer {
  margin-left: auto;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: var(--blanc);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
}

.assistant-fil {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--gris-clair);
  min-height: 150px;
}

.assistant-message {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.45;
  animation: apparitionMessage 0.3s ease;
}

.assistant-message.bot {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.assistant-message.moi {
  background: var(--bleu);
  color: var(--blanc);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.assistant-message a {
  color: var(--rouge);
  font-weight: 700;
}

.assistant-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 0;
  background: var(--blanc);
}

.assistant-suggestion {
  border: 1px solid #FFD3D8;
  background: #FFF3F4;
  color: var(--rouge-fonce);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--police-texte);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.assistant-suggestion:hover {
  background: #FFE3E6;
  transform: translateY(-1px);
}

.assistant-saisie {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--blanc);
  border-top: 1px solid var(--bordure);
}

.assistant-saisie input {
  flex: 1;
  min-width: 0;
  border: 2px solid var(--bordure);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--police-texte);
  font-size: 0.85rem;
  outline: none;
}

.assistant-saisie input:focus {
  border-color: var(--rouge);
}

.assistant-saisie button {
  border: 0;
  border-radius: 999px;
  padding: 0 16px;
  font-family: var(--police-texte);
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(120deg, var(--rouge), #FF7A5C);
  color: var(--blanc);
  box-shadow: 0 8px 18px rgba(237, 51, 64, 0.28);
}

.assistant-saisie button:hover {
  filter: brightness(1.07);
}

/* Produits trouvés par l'assistant : vignettes cliquables vers la fiche */
.assistant-message .assistant-produits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.assistant-produit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--bordure);
  border-radius: 12px;
  background: var(--blanc);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.assistant-produit:hover {
  border-color: var(--rouge);
  box-shadow: 0 4px 12px rgba(0, 17, 64, 0.1);
}

.assistant-produit-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}

.assistant-produit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.assistant-produit-nom {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
}

.assistant-produit-prix {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--bleu);
}

.assistant-produit-prix .prix-barre {
  color: var(--gris);
  font-weight: 500;
  text-decoration: line-through;
}

/* Bouton « Parler à un conseiller » affiché dans une réponse */
.assistant-message .assistant-conseiller {
  display: inline-block;
  margin-top: 8px;
  background: linear-gradient(120deg, var(--vert), var(--vert-fonce));
  color: var(--blanc);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.8rem;
  text-decoration: none;
}

.assistant-message .assistant-conseiller:hover {
  filter: brightness(1.08);
}

/* Pastille « Conseiller » de la rangée de suggestions */
.assistant-suggestion.conseiller {
  border-color: #bce7d4;
  background: #e8f7f0;
  color: var(--vert-fonce);
  text-decoration: none;
}

.assistant-suggestion.conseiller:hover {
  background: #d8f1e6;
}

@media (max-width: 640px) {
  .assistant-flottant {
    right: 16px;
    bottom: 72px;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .assistant-panneau,
  .aide-panneau {
    bottom: 126px;
    max-height: 62vh;
  }
}

/* Retour en haut de page */
.haut-page {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--bleu-fonce);
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 17, 64, 0.2);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.haut-page.visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.haut-page:hover {
  background: var(--bleu-fonce);
  color: var(--blanc);
}

/* Micro-interactions : le zoom et l'élévation des cartes produits
   existent déjà plus haut dans cette feuille ; on ajoute le même
   effet aux cartes de catégories, qui n'en avaient pas. */
.category-card .cat-photo {
  transition: transform 0.35s ease;
}

.category-card:hover .cat-photo {
  transform: scale(1.08) rotate(-1.5deg);
}

.trust-item:hover .icon {
  animation: rebond 0.6s ease;
}

@keyframes rebond {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-8px); }
  60% { transform: translateY(2px); }
}

/* ===== Adaptations mobiles ===== */
@media (max-width: 900px) {
  .carrousel-slide {
    padding: 24px 56px;
  }
  .carrousel-slide h2 {
    font-size: 1.45rem;
  }
  .slide-visuel {
    font-size: 4rem;
  }
}

@media (max-width: 640px) {
  .carrousel-slide {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 44px 34px;
  }
  .carrousel-slide h2 {
    font-size: 1.2rem;
    -webkit-line-clamp: 4;
  }
  .carrousel-slide p {
    font-size: 0.86rem;
    -webkit-line-clamp: 3;
  }
  .slide-visuel {
    font-size: 2.6rem;
    align-self: flex-end;
    margin-top: -34px;
  }
  .slide-cta {
    padding: 10px 16px;
    font-size: 0.84rem;
  }
  .carrousel-fleche {
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
  }
  .carrousel-fleche.precedent { left: 6px; }
  .carrousel-fleche.suivant { right: 6px; }
  .ruban-item {
    font-size: 0.74rem;
  }
  .aide-flottante span.aide-texte {
    display: none;
  }
  .aide-flottante {
    padding: 14px;
  }
}

/* ===== Accessibilité : animations réduites demandées par le système ===== */
@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .carrousel-slide {
    transition: none;
  }
  .carrousel-slide.active .slide-duree {
    animation: none;
  }
  .slide-visuel,
  .ruban-piste,
  .aide-flottante::after,
  .trust-item:hover .icon {
    animation: none;
  }
  .slide-cta:hover,
  .aide-flottante:hover,
  .aide-bouton:hover {
    transform: none;
  }
}

/* ============================================================
   BARRE DE RUBRIQUES : elle descend et reste sous la barre de
   recherche ; les bandes animées se rangent vers le haut dès que
   la souris s'en approche.
   ============================================================ */
:root {
  --jaune: #FFC02E;
  --orange: #FF7A18;
  --vert-vif: #00A86B;
}

/* La barre de rubriques descend et se colle sous l'en-tête : elle ne
   disparaît plus quand on descend dans la page. */
.navbar {
  position: sticky;
  top: var(--haut-entete, 96px);
  z-index: 45;
}

/* Chaque clic sur une rubrique rejoue une petite descente de la barre */
html.nav-cliquee .navbar {
  animation: descendreNav 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes descendreNav {
  from { transform: translateY(-14px); }
  to { transform: none; }
}

/* Le contenu de la rubrique arrive en descendant, la page ne remonte pas */
.page.active {
  animation: descendrePage 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes descendrePage {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: none; }
}

/* Les bandes animées (publicité + avantages) restent en place : on a
   annulé le repli au survol, jugé trop lent et pas assez lisible. */

/* ============================================================
   RÉSULTATS DE RUBRIQUE : plus de couleurs, moins de bleu foncé
   ============================================================ */
.page-banner {
  background: linear-gradient(120deg, #00349A 0%, #ED3340 32%, #FFC02E 60%, #00A86B 100%);
  box-shadow: inset 0 -7px 0 rgba(255, 255, 255, 0.22);
}

.page-banner h1 {
  text-shadow: 0 3px 12px rgba(120, 20, 10, 0.28);
}

.page-banner p,
.page-banner .breadcrumb {
  opacity: 1;
  font-weight: 600;
}

.section-title h2 {
  color: var(--noir);
}

.section-title h2::before {
  width: 8px;
  height: 30px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--rouge), var(--jaune) 50%, var(--vert));
  box-shadow: 0 4px 12px rgba(237, 51, 64, 0.22);
}

.chip:hover {
  border-color: var(--orange);
  color: var(--rouge-fonce);
}

.chip.active {
  background: linear-gradient(120deg, var(--rouge), var(--orange));
  border-color: transparent;
  color: var(--blanc);
  box-shadow: 0 8px 18px rgba(237, 51, 64, 0.26);
}

/* Chaque carte produit prend une couleur différente : bleu, rouge, vert,
   jaune, orange... le catalogue devient plus gai et plus lisible. */
.product-card {
  border-top: 4px solid #ED3340;
}

.product-card:nth-child(5n+2) { border-top-color: #00349A; }
.product-card:nth-child(5n+3) { border-top-color: #00A86B; }
.product-card:nth-child(5n+4) { border-top-color: #FFC02E; }
.product-card:nth-child(5n+5) { border-top-color: #FF7A18; }

.product-image {
  background: linear-gradient(135deg, #FFF2F4, #FFE7CE);
}

.product-card:nth-child(5n+2) .product-image {
  background: linear-gradient(135deg, #EEF3FF, #DCE6FF);
}

.product-card:nth-child(5n+3) .product-image {
  background: linear-gradient(135deg, #EFFCF6, #D6F5E7);
}

.product-card:nth-child(5n+4) .product-image {
  background: linear-gradient(135deg, #FFF9E0, #FFECA8);
}

.product-card:nth-child(5n+5) .product-image {
  background: linear-gradient(135deg, #FFF1E6, #FFDCBB);
}

/* Le prix reste dans les tons vifs : rouge, bleu, vert, jaune foncé, orange.
   Couleurs fixes pour rester éclatantes quel que soit le thème choisi. */
.price { color: #E6303C; }
.product-card:nth-child(5n+2) .price { color: #00349A; }
.product-card:nth-child(5n+3) .price { color: #008651; }
.product-card:nth-child(5n+4) .price { color: #C07900; }
.product-card:nth-child(5n+5) .price { color: #F26A0D; }

.tag-promo { background: var(--orange); }
.tag-neuf { background: var(--vert-vif); }

.product-card:hover {
  box-shadow: 0 14px 28px rgba(237, 51, 64, 0.16);
}

/* ============================================================
   PHOTOS AUTHENTIQUES
   ============================================================ */
/* Bannière d'accueil : vraie photo de fond, assombrie pour que le
   texte reste parfaitement lisible. */
.hero {
  /* Photo de la boutique de Cotonou (images/fond-accueil-cotonou.jpg),
     recouverte d'un voile bleu dégradé : le texte reste lisible même
     sur les parties claires de la photo (plafond, sol).
     L'image est préparée à 2× la largeur affichée (agrandissement Lanczos
     + accentuation, voir tools/ameliorer-photo-fond.py) : le navigateur la
     réduit au lieu de l'agrandir, ce qui donne un affichage plus net. */
  background-image:
    linear-gradient(118deg,
      rgba(0, 27, 76, 0.92) 0%,
      rgba(0, 43, 124, 0.74) 42%,
      rgba(0, 43, 124, 0.30) 100%),
    url("../images/fond-accueil-cotonou.jpg?v=20260925b");
  background-size: cover, cover;
  background-position: center, center 42%;
  background-repeat: no-repeat, no-repeat;
  background-color: var(--bleu-fonce);
  text-shadow: 0 1px 3px rgba(0, 20, 60, 0.45);
}

/* Présentation type fiche produit : la photo est posée sur un fond
   blanc, entièrement visible, jamais rognée. */
.product-image,
.product-card:nth-child(n) .product-image {
  background: var(--blanc);
  padding: 10px;
}

.product-photo {
  object-fit: contain;
  background: var(--blanc);
}

.produit-photo {
  background: var(--blanc);
}


/* ============================================================
   PUBLICITÉS : photos d'objets en noir et blanc en fond
   ============================================================ */
.carrousel-slide {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 32% auto;
}

.carrousel-slide.promo {
  background-image:
    linear-gradient(90deg, #FFF1F3 0%, rgba(255, 241, 243, 0.94) 48%, rgba(255, 241, 243, 0.45) 100%),
    url('../images/pub/pub-1.jpg');
}

.carrousel-slide.nouveau {
  background-image:
    linear-gradient(90deg, #EFFCF6 0%, rgba(239, 252, 246, 0.94) 48%, rgba(239, 252, 246, 0.45) 100%),
    url('../images/pub/pub-2.jpg');
}

.carrousel-slide.urgent {
  background-image:
    linear-gradient(90deg, #FFF0F0 0%, rgba(255, 240, 240, 0.94) 48%, rgba(255, 240, 240, 0.45) 100%),
    url('../images/pub/pub-3.jpg');
}

.carrousel-slide.info {
  background-image:
    linear-gradient(90deg, #F0F5FF 0%, rgba(240, 245, 255, 0.94) 48%, rgba(240, 245, 255, 0.45) 100%),
    url('../images/pub/pub-4.jpg');
}

@media (max-width: 700px) {
  .carrousel-slide { background-size: 44% auto; background-position: right top; }
}

/* ============================================================
   PRIX DÉTAILLÉS (façon flyer) : Neuf / Occasion / Reconditionné
   ============================================================ */
.prix-niveaux {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
}

.prix-niveaux .niveau {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f4f6f9;
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.7rem;
}

.prix-niveaux .niveau em {
  font-style: normal;
  color: var(--gris);
}

.caps-dispo {
  font-size: 0.7rem;
  color: var(--gris);
  margin-bottom: 4px;
}

.btn-prevenir {
  display: inline-block;
  margin: 4px 0 2px;
  background: linear-gradient(120deg, #25D366, #128C7E);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: 999px;
  text-decoration: none;
}


.pastilles {
  display: flex;
  gap: 5px;
  margin: 2px 0 6px;
}

.pastilles i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
}


.grades {
  font-size: 0.68rem;
  color: var(--gris);
  margin: 2px 0 4px;
}

.compatibles {
  margin: 4px 0 6px;
  font-size: 0.72rem;
}

.compatibles summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bleu);
}

.compatibles ul {
  margin: 6px 0 2px;
  padding-left: 16px;
  display: grid;
  gap: 3px;
}

.compatibles li b {
  color: var(--rouge-fonce);
}

.compatibles small {
  color: var(--gris);
  font-size: 0.66rem;
}


/* ===== Bandeau de services (au-dessus du pied de page) ===== */
.services-bande {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 34px;
  background: linear-gradient(120deg, var(--bleu-fonce), var(--bleu));
  color: var(--blanc);
  padding: 16px 20px;
}

.services-bande .service-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
}

.services-bande .service-ico {
  font-size: 1.2rem;
}

.services-bande strong {
  display: block;
}

.services-bande em {
  font-style: normal;
  opacity: 0.85;
  font-size: 0.72rem;
}

#rubriqueAvenir .product-card {
  border-top-color: var(--orange);
}


/* ===== Choix du pays et de la devise ===== */
.choix-pays select {
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.choix-pays select option {
  color: #111827;
}

/* Barre de recherche : barre longue comme avant, seul le champ est réduit */
.search-bar {
  flex: 1 1 auto;
  max-width: none;
  margin-left: 0;
}

.search-bar input,
.search-bar #searchInput {
  max-width: 430px;
}


/* ===== En-tête : barre du haut supprimée, outils à droite de la recherche ===== */
.top-bar {
  display: none;
}

.header {
  gap: 14px;
}

.header .logo-img {
  height: 78px;
}

.barre-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

.menu-langue {
  position: relative;
}

.menu-langue summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gris-clair);
  border: 1px solid var(--bordure);
  font-size: 0.8rem;
  font-weight: 600;
}

.menu-langue summary::-webkit-details-marker {
  display: none;
}

.menu-langue .menu-liste {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  display: flex;
  gap: 6px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

.search-bar input,
.search-bar #searchInput {
  max-width: 300px;
}


/* ============================================================
   EN-TÊTE : logo + recherche à gauche, outils à droite
   ============================================================ */
.header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 24px;
}

.header .logo {
  order: 1;
  flex: 0 0 auto;
}

.search-bar {
  order: 2;
  margin-left: 6px;
  flex: 0 1 auto;
}

.search-bar input,
.search-bar #searchInput {
  max-width: 240px;
}

.barre-outils {
  order: 3;
  margin-left: auto;
  gap: 10px;
  padding: 6px 0 14px;
}

/* Mon compte — accès à l'espace client, construit par js/animations.js.
   Le bouton se trouve dans .header-actions (juste à gauche du panier) : même
   allure « pastille » que les éléments de la barre d'outils. Les deux sélecteurs
   sont conservés pour les pages qui n'ont pas de .header-actions. */
.barre-outils .btn-compte,
.header-actions .btn-compte {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.barre-outils .btn-compte:hover,
.header-actions .btn-compte:hover {
  color: var(--bleu);
  border-color: var(--bleu-clair);
}

@media (max-width: 700px) {
  /* En-tête étroit : le pictogramme suffit (le libellé reste dans le pied de page). */
  .barre-outils .btn-compte .compte-texte,
  .header-actions .btn-compte .compte-texte {
    display: none;
  }
}

.barre-outils summary,
.choix-pays select,
.top-aide > summary {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.barre-outils summary:hover,
.choix-pays select:hover,
.top-aide > summary:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

/* ===== Onglets de rubriques plus compacts ===== */
.nav-rail {
  gap: 5px;
  padding: 8px 12px;
}

.nav-tab {
  padding: 6px 10px;
  border-radius: 12px;
}

.nav-tab .nav-ico {
  font-size: 1.05rem;
}

.nav-tab .nav-txt {
  font-size: 0.78rem;
}

/* ===== Publicités : le visuel du SUJET est le fond de la diapositive =====
   ⚠️ Ce bloc redonne TOUTES les propriétés utiles du fond (couleur, image,
   taille, position, répétition). Plus haut dans cette feuille, les règles
   `.carrousel-slide.<type>` utilisent le raccourci `background`, qui remet
   `background-size`, `background-position` et `background-repeat` à leurs
   valeurs initiales : l'image s'affichait alors en taille réelle, collée en
   haut à gauche et répétée en mosaïque. Ces règles-ci étant en fin de feuille,
   elles reprennent la main.
   Le fond de la diapositive reste TRANSPARENT : le ruban de photos de produits
   (voir `.carrousel-defile` plus bas) défile derrière.
   Le voile pastel, lui, ne couvre que la gauche, là où se trouve le texte. */
.carrousel-slide.promo,
.carrousel-slide.nouveau,
.carrousel-slide.urgent,
.carrousel-slide.info {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 100%;
}

/* Voile pastel propre au TYPE d'annonce : il ne couvre que la gauche de la
   diapositive (là où se trouve le texte) et s'efface vers 84 %. */
.carrousel-slide.promo   { --voile: 255, 241, 243; }
.carrousel-slide.nouveau { --voile: 239, 252, 246; }
.carrousel-slide.urgent  { --voile: 255, 240, 240; }
.carrousel-slide.info    { --voile: 240, 245, 255; }

/* Un fond par SUJET : js/annonces.js ajoute la classe .fond-xxx d'après les
   mots du titre et du texte, pour que l'image montre toujours ce qui est
   annoncé (livraison → moto et camionnette, cartes cadeaux → cartes, etc.).
   Les fichiers sont déclarés ici, donc les chemins restent valables depuis
   index.html comme depuis details/.
   ⚠️ Depuis le 2026-09-25 ces visuels ne sont plus affichés : le fond de la
   bannière est le ruban de photos de produits (`.carrousel-defile`). Les
   déclarations restent pour pouvoir revenir en arrière (`var(--fond)` à
   remettre dans le `background-image` des diapositives). */
.carrousel-slide { --fond: url('../images/pub/pub-2.jpg'); }
.carrousel-slide.fond-livraison   { --fond: url('../images/pub/livraison.svg'); }
.carrousel-slide.fond-cartes      { --fond: url('../images/pub/cartes-cadeaux.svg'); }
.carrousel-slide.fond-telephones  { --fond: url('../images/pub/pub-2.jpg'); }
.carrousel-slide.fond-ordinateurs { --fond: url('../images/produits-blanc/macbook-air-13-m2.jpg'); }
.carrousel-slide.fond-tablettes   { --fond: url('../images/photos-blanc/tablettes.jpg'); }
.carrousel-slide.fond-multimedia  { --fond: url('../images/produits-blanc/gopro-hero-12-black.jpg'); }
.carrousel-slide.fond-accessoires { --fond: url('../images/pub/pub-4.jpg'); }
.carrousel-slide.fond-occasion    { --fond: url('../images/produits-blanc/lenovo-thinkpad-x1.jpg'); }

/* Voile posé sur le ruban de produits : deux calques seulement.
   • en haut (1er calque) : la teinte pastel du TYPE d'annonce, en bandeau
     sur la gauche — elle garde l'identité visuelle de la diapositive ;
   • en dessous (2e calque) : un lavis blanc qui s'estompe vers 66 %, là où
     se trouve le texte. Du blanc plutôt qu'une couleur opaque, pour que les
     produits restent visibles (atténués) derrière le texte et parfaitement
     nets sur la droite de la bannière. */
.carrousel-slide.promo,
.carrousel-slide.nouveau,
.carrousel-slide.urgent,
.carrousel-slide.info {
  background-image:
    linear-gradient(90deg, rgba(var(--voile, 240, 245, 255), 0.9) 0%, rgba(var(--voile, 240, 245, 255), 0.35) 20%, rgba(var(--voile, 240, 245, 255), 0) 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.78) 30%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0) 74%);
}

/* ===== Ruban de photos de produits qui défile derrière la bannière =====
   La bande (images/pub/defile-produits.jpg) est un long ruban de produits sur
   fond blanc, fabriqué avec tools/decouper-cartes.py --bande. Elle est répétée
   plusieurs fois côte à côte puis décalée d'exactement une bande : la boucle
   est donc parfaitement continue. Le décalage (largeur affichée d'une bande)
   est mesuré en JavaScript et posé dans la variable --bande, car il dépend de
   la hauteur de la bannière. Le ruban va de la GAUCHE vers la DROITE. */
.carrousel-defile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: var(--blanc);
  pointer-events: none;
}

.defile-piste {
  display: flex;
  align-items: flex-end;
  height: 100%;
  width: max-content;
  animation: defile-droite 110s linear infinite;
  will-change: transform;
}

.defile-img {
  display: block;
  height: 100%;
  width: auto;
  flex: 0 0 auto;
}

@keyframes defile-droite {
  from { transform: translate3d(calc(-1 * var(--bande, 0px)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Sens inverse : le ruban repart de la droite vers la gauche */
.defile-piste.sens-gauche {
  animation-direction: reverse;
}

@media (prefers-reduced-motion: reduce) {
  .defile-piste { animation: none; }
}

/* La photo remplace le gros émoji qui occupait la droite de la diapositive
   (l'émoji du type reste affiché dans la pastille colorée de l'annonce). */
.carrousel-slide .slide-visuel {
  display: none;
}

@media (max-width: 860px) {
  /* Bannière étroite : on réduit le ruban (posé en bas) pour que plusieurs
     produits restent visibles. Le JavaScript remesure la largeur affichée. */
  .defile-piste { animation-duration: 90s; }
  .defile-img { height: 52%; }
}

/* ============================================================
   EN-TÊTE ULTRA-COMPACT
   logo tout à gauche, recherche juste après ; langue/pays/devise
   poussés à droite (margin-left: auto) et panier à l'extrême droite
   ============================================================ */
.header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 12px;
}

/* Le logo est le premier élément de la ligne */
.header .logo {
  order: 1;
  flex: 0 0 auto;
}

/* Barre de recherche : largeur fixe et modérée — elle ne s'étire plus sur
   toute la ligne. Le champ remplit la pastille jusqu'au bouton (pas de vide
   entre le texte et le bouton). */
.search-bar {
  order: 2;
  flex: 0 1 auto;
  margin: 0;
  width: 400px;
  max-width: 100%;
}

.search-bar input,
.search-bar #searchInput {
  max-width: none;
  padding: 7px 14px;
  font-size: 0.85rem;
}

.search-bar button {
  padding: 8px 18px;
  font-size: 0.85rem;
}

.header .logo-img {
  height: 56px;
}

.barre-outils {
  order: 3;
  margin-left: auto;
  gap: 6px;
  padding: 0;
}

/* Le panier passe APRÈS les outils : l'ordre (order) l'emporte sur l'ordre
   du document, sinon .header-actions restait en tête de ligne. */
.header-actions {
  order: 4;
}

.barre-outils summary,
.choix-pays select,
.top-aide > summary {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--gris-clair);
  border: 1px solid var(--bordure);
  box-shadow: none;
}

.barre-outils summary:hover,
.choix-pays select:hover,
.top-aide > summary:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

/* ============================================================
   PETITS ÉCRANS : la recherche passe sous le logo
   Sans cette règle, l'en-tête (flex-wrap: nowrap) débordait
   horizontalement sur téléphone ET sur tablette (de 701 à 815 px
   environ, le logo + recherche + outils + panier ne tenaient pas
   sur une seule ligne : débordement mesuré jusqu'à 63 px).
   ============================================================ */
@media (max-width: 820px) {
  .header {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .search-bar {
    flex: 1 1 100%;
    min-width: 0;
  }

  .search-bar input,
  .search-bar #searchInput {
    max-width: none;
    min-width: 0;
  }

  /* Quand l'en-tête passe à la ligne, « Mon compte » et le panier forment
     leur propre ligne : on les colle à droite, comme la barre d'outils
     au-dessus. */
  .header-actions {
    margin-left: auto;
  }
}

/* ============================================================
   BARRE DE RUBRIQUES — refonte « pastilles » (2026-09-25)
   ------------------------------------------------------------
   Demande client : toutes les rubriques sur UNE SEULE LIGNE, aucun
   onglet renvoyé à la ligne du dessous, style plus moderne et chic.

   Principe
   • .nav-rail : rangée unique (`flex-wrap: nowrap`), alignée au centre.
     Les pastilles se partagent la largeur disponible (`flex: 1 1 auto`) :
     aucune ne passe sous une autre, et toutes ont la MÊME HAUTEUR
     (`align-items: stretch`) donc le même alignement.
   • Sur écran étroit, la barre devient DÉFILABLE horizontalement
     (`overflow-x: auto`) : elle reste sur une seule ligne au lieu
     d'empiler les rubriques.
   • .nav-tab : pastille plate, icône + libellé côte à côte ; survol =
     fond blanc + ombre douce ; onglet actif = dégradé bleu de la marque.
   • Aucun décalage vertical : ni `translateY` au survol, ni `order`.
   ============================================================ */
.navbar {
  background: linear-gradient(180deg, rgba(247, 250, 254, 0.98) 0%, rgba(238, 244, 251, 0.95) 100%);
  border-bottom: 1px solid rgba(0, 52, 154, 0.10);
  box-shadow: 0 10px 30px rgba(0, 17, 64, 0.06);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
}

.nav-rail {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  justify-content: safe center;
  gap: 4px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 8px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.nav-rail::-webkit-scrollbar {
  height: 0;
}

.nav-tab {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 84px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(0, 52, 154, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #46536b;
  font-weight: 600;
  font-size: 0.735rem;
  line-height: 1.15;
  letter-spacing: 0.004em;
  text-align: center;
  white-space: normal;
  overflow: visible;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 17, 64, 0.04);
  transition: background-color 0.24s ease, color 0.24s ease,
              border-color 0.24s ease, box-shadow 0.24s ease;
  animation: apparitionPastille 0.5s ease backwards;
  animation-delay: calc(var(--rang, 0) * 26ms);
}

@keyframes apparitionPastille {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Les décors de l'ancienne version (voile rouge qui descend du haut,
   indicateur vertical) sont neutralisés : plus aucun mouvement vertical. */
.nav-tab::before,
.nav-tab::after {
  content: none;
}

.nav-tab .nav-ico {
  flex: 0 0 auto;
  font-size: 0.9rem;
  line-height: 1;
  transform: none;
}

.nav-tab .nav-txt {
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1.15;
  /* ⚠️ Le libellé reste sur UNE seule ligne, dans toutes les langues et pour
     toutes les polices : sans `nowrap`, un libellé plus large que sa pastille
     se coupe au milieu d'un mot (« Ordinateu-rs »). Comme la largeur minimale
     d'un élément `nowrap` est celle de son texte, la pastille ne peut pas
     rétrécir en dessous : elle s'élargit pour remplir la barre, ou bien la
     barre défile si la place manque (jamais de retour à la ligne). */
  white-space: nowrap;
}

.nav-tab:hover {
  background: var(--blanc);
  border-color: rgba(0, 52, 154, 0.22);
  color: var(--bleu);
  box-shadow: 0 8px 18px rgba(0, 52, 154, 0.14);
  transform: none;
}

.nav-tab:hover .nav-ico {
  transform: none;
}

.nav-tab:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.nav-tab.active {
  background: linear-gradient(135deg, var(--bleu-fonce) 0%, var(--bleu) 58%, var(--bleu-clair) 100%);
  border-color: transparent;
  color: var(--blanc);
  box-shadow: 0 8px 20px rgba(0, 52, 154, 0.30);
  transform: none;
}

.nav-tab.active .nav-ico {
  transform: none;
}

/* Écrans intermédiaires : on resserre les pastilles pour que la rangée
   reste unique sans défilement. */
@media (max-width: 1180px) {
  .nav-rail {
    gap: 3px;
    padding: 7px 8px;
  }

  .nav-tab {
    gap: 4px;
    padding: 7px 8px;
    font-size: 0.70rem;
  }

  .nav-tab .nav-ico {
    font-size: 0.88rem;
  }
}

/* Écrans intermédiaires (portables 1280-1400, tablettes) : les icônes sont
   masquées. Elles occupent ~20 px chacune — soit près de 300 px pour la
   rangée — et c'est ce qui obligeait les libellés à se couper sur deux
   lignes. Sans elles, les douze libellés entiers tiennent à l'aise, sur UNE
   seule ligne, sans défilement. */
@media (max-width: 1400px) {
  .nav-tab {
    min-width: 78px;
  }

  .nav-tab .nav-ico {
    display: none;
  }
}

/* Zone défilante (tablette et téléphone) : les pastilles gardent une largeur
   lisible et le rail défile latéralement — une seule ligne, jamais deux. La
   barre de défilement fine indique que l'on peut faire glisser et l'onglet
   actif est amené dans la zone visible (voir centrerOngletActif). */
@media (max-width: 1079px) {
  .nav-tab {
    flex: 0 0 auto;
    min-width: 88px;
  }

  .nav-rail {
    justify-content: flex-start;
    scrollbar-width: thin;
  }

  .nav-rail::-webkit-scrollbar {
    height: 5px;
  }

  .nav-rail::-webkit-scrollbar-thumb {
    background: rgba(0, 52, 154, 0.26);
    border-radius: 99px;
  }

  .nav-rail::-webkit-scrollbar-track {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-tab {
    animation: none;
  }
}

/* ============================================================
   Bouton « Afficher plus » des grilles de produits
   ------------------------------------------------------------
   Le catalogue dépasse 1 200 articles : chaque grille n'affiche que
   60 cartes à la fois, puis ce bouton ajoute le paquet suivant.
   ============================================================ */
.products .btn-plus {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 20px auto 4px;
  padding: 12px 26px;
  border: 1px solid rgba(0, 52, 154, 0.18);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--bleu);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 17, 64, 0.08);
  transition: background-color 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.products .btn-plus:hover {
  background: var(--bleu);
  color: var(--blanc);
  box-shadow: 0 8px 20px rgba(0, 52, 154, 0.24);
}


/* ============================================================
   NEUF / OCCASION : chaque rubrique est coupée en deux blocs
   (les blocs sont créés par le JS, sans balisage dans les pages)
   ============================================================ */
.blocs-type { margin: 2px 0 6px; }

.bloc-type { margin-bottom: 30px; }
.bloc-type[hidden] { display: none; }

.bloc-type .section-title { margin-bottom: 14px; }
.bloc-type .section-title h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-left: 12px;
  border-left: 5px solid var(--vert);
}
.bloc-type[data-type="occasion"] .section-title h2 { border-left-color: var(--rouge); }

.bloc-type .compte {
  font-size: 0.62em;
  font-weight: 700;
  color: #4b5563;
  background: #eef2f7;
  border-radius: 999px;
  padding: 3px 12px;
}
.bloc-type[data-type="neuf"] .compte { color: var(--vert-fonce); background: #e6f5ee; }
.bloc-type[data-type="occasion"] .compte { color: var(--rouge-fonce); background: #fdeaec; }

.bloc-type .bloc-desc {
  font-size: 0.5em;
  font-weight: 500;
  color: #6b7280;
}

@media (max-width: 600px) {
  .bloc-type .section-title h2 { gap: 8px; padding-left: 9px; border-left-width: 4px; }
  .bloc-type .bloc-desc { display: none; }
}


/* ============================================================
   MARQUES : Apple · Samsung · Autres marques (dans chaque rubrique)
   La barre est construite par le JS, selon les marques réellement présentes.
   ============================================================ */
.marques {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.marque-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--police-titres);
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  background: var(--blanc);
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.marque-btn:hover { border-color: var(--bleu-clair); color: var(--bleu); transform: translateY(-1px); }
.marque-btn.active { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.marque-btn.vide { opacity: .5; cursor: not-allowed; }
.marque-btn.vide:hover { transform: none; border-color: #dbe2ea; color: #334155; }

.marque-compte {
  font-size: 0.78em;
  font-weight: 700;
  background: #eef2f7;
  color: #4b5563;
  border-radius: 999px;
  padding: 2px 9px;
}
.marque-btn.active .marque-compte { background: rgba(255, 255, 255, .22); color: var(--blanc); }

@media (max-width: 600px) {
  .marques { gap: 8px; }
  .marque-btn { font-size: 0.88rem; padding: 8px 14px; }
}

/* ============================================================
   VERSION DU SITE — téléphone / tablette / ordinateur
   ------------------------------------------------------------
   Bloc construit par js/animations.js en bas de page. Il n'est
   proposé que sur un écran de téléphone ou de tablette (et toujours
   quand un mode forcé est actif, pour pouvoir revenir en arrière).
   Le changement de mode se fait par la balise viewport : voir
   js/affichage.js. Les couleurs sont claires car le pied de page
   est bleu foncé sur tout le site.
   ============================================================ */
.affichage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.affichage-titre {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.affichage-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.affichage-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}

.affichage-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.affichage-btn.actif {
  background: #fff;
  border-color: #fff;
  color: var(--bleu-fonce);
}

/* ============================================================
   TÉLÉPHONE ET TABLETTE — confort d'usage (2026-09-27)
   ------------------------------------------------------------
   Mesuré sur les pages réelles (320 à 1280 px) : aucun débordement
   horizontal, mais deux défauts bien réels sur téléphone.

   1. LES CHAMPS DE SAISIE FONT MOINS DE 16 px (recherche 13,6 px,
      devise du pays 12 px, formulaire du compte 15,2 px). Or iOS fait
      un ZOOM AUTOMATIQUE dès qu'un champ mesure moins de 16 px, et il
      laisse la page zoomée : le visiteur doit dézoomer à la main.
      On impose donc 16 px aux champs.

      `!important` est volontaire et n'est utilisé QUE ici : le fichier
      contient beaucoup de règles plus anciennes (dont une avec un
      identifiant) qui l'emporteraient autrement, et un correctif
      d'accessibilité doit gagner quoi qu'il arrive.

   2. LES ZONES TACTILES SONT TROP PETITES : les boutons de langue
      mesuraient 34×24 px, les flèches du carrousel 32×32 px, le bouton
      « + » des fiches produit une trentaine de pixels. La recommandation
      est de 44×44 px (Apple) — en dessous, on rate son geste, surtout
      avec deux boutons voisins.
   ============================================================ */
@media (max-width: 768px) {

  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Flèches du carrousel publicitaire et des galeries de boutiques */
  .carrousel-fleche,
  .galerie-fleche {
    width: 44px;
    height: 44px;
  }

  /* Bouton « + » des fiches produit : la cible la plus utilisée du site */
  .add-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Boutons − / + et croix de retrait du panier */
  .panier-qte button,
  .panier-retirer {
    min-width: 40px;
    min-height: 40px;
  }

  /* Barre d'outils de l'en-tête : langue, devise, compte */
  .barre-outils summary,
  .choix-pays select,
  .top-aide > summary,
  .menu-liste button,
  .menu-liste a,
  .btn-compte,
  [data-langue] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Le sélecteur de pays se dimensionne sur son option la plus longue
     (« Émirats arabes unis (AED) »). À 16 px il mesurait 233 px : la barre
     d'outils ne tenait plus sur une ligne et l'en-tête passait de 219 à
     284 px de haut. On le borne : le nom long est coupé, mais la liste
     déroulante affiche toujours les pays en entier. */
  .choix-pays select {
    max-width: 150px;
    text-overflow: ellipsis;
  }

  /* Rubriques : la barre défile déjà horizontalement, on rend
     simplement les pastilles plus faciles à viser. */
  .nav-tab {
    min-height: 44px;
  }

  /* Filtres par marque */
  .marque-btn {
    min-height: 44px;
  }

  /* Le libellé du ruban saisonnier était à 10,6 px : trop petit */
  .theme-ribbon-nom {
    font-size: 0.8rem;
  }

  /* Choix de la version du site : boutons faciles à viser au doigt */
  .affichage-btn {
    min-height: 40px;
  }

  /* Boutons de langue du menu déroulant : 33 px de large, trop étroit */
  .langue-btn {
    min-width: 44px;
  }

  /* Croix de fermeture du panneau d'aide et de l'assistant (27 à 30 px) */
  .aide-fermer,
  .assistant-fermer {
    width: 44px;
    height: 44px;
  }

  /* Points du carrousel : 10 px, impossibles à viser au doigt. On les
     agrandit sans les rendre énormes — les flèches (44 px) et le balayage
     restent les commandes principales. */
  .carrousel-point {
    width: 14px;
    height: 14px;
  }

  .carrousel-point.active {
    width: 34px;
  }

  .carrousel-points {
    gap: 12px;
  }
}

/* ============================================================
   PROMOTIONS ET CHOIX DU TÉLÉPHONE (2026-09-28)
   ------------------------------------------------------------
   • prix barré + pastille de remise, sur les cartes comme sur les fiches ;
   • rubrique Téléphones : une carte par famille de modèle (iPhone 17,
     Galaxy S24…), puis une fiche où l'on choisit le modèle, la capacité et
     la couleur, avec les caractéristiques de l'appareil.
   ============================================================ */

/* ---------- Prix barré et remise ---------- */
.prix-barre {
  color: #6e6e73;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-size: 0.86rem;
  font-weight: 600;
}

.pastille-promo {
  background: var(--rouge);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-row .prix-barre,
.tel-prix .prix-barre {
  margin-left: 2px;
}

/* ---------- Téléphones : cartes des familles ---------- */
.familles-tel {
  margin: 6px 0 26px;
}

.familles-tel-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.familles-tel-compte {
  color: #6e6e73;
  font-size: 0.85rem;
  font-weight: 600;
}

.familles-tel-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 14px;
}

.famille-tel-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.famille-tel-carte:hover {
  transform: translateY(-3px);
  border-color: var(--bleu);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.09);
}

.famille-tel-img {
  width: 100%;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2f7, #dde6f0);
  border-radius: 12px;
  overflow: hidden;
}

.famille-tel-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.famille-tel-nom {
  font-weight: 700;
  font-size: 0.95rem;
}

.famille-tel-infos {
  font-size: 0.8rem;
  color: #6e6e73;
}

/* ---------- Téléphones : fiche d'une famille ---------- */
.tel-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tel-entete h2 {
  margin: 0;
  font-size: 1.35rem;
}

.tel-compte {
  color: #6e6e73;
  font-size: 0.85rem;
  font-weight: 600;
}

.tel-retour {
  background: var(--gris-clair);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.tel-retour:hover {
  border-color: var(--bleu);
  color: var(--bleu);
}

.tel-corps {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 22px;
  align-items: start;
}

.tel-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 260px;
  padding: 18px;
  background: linear-gradient(135deg, #eef2f7, #dde6f0);
  border-radius: 16px;
}

.tel-media img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.tel-couleurs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tel-pastilles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.tel-pastille {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.14);
  cursor: pointer;
}

.tel-pastille.active {
  outline: 2px solid var(--bleu);
  outline-offset: 2px;
}

.tel-choix {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tel-groupe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tel-libelle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6e6e73;
}

.tel-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tel-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 15px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.tel-btn:hover {
  border-color: var(--bleu);
}

.tel-btn.active {
  border-color: var(--bleu);
  background: #eef4ff;
  color: var(--bleu-fonce);
}

/* État indisponible pour ce modèle : bouton visible mais grisé */
.tel-btn.vide,
.tel-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.tel-btn.vide:hover,
.tel-btn[disabled]:hover {
  border-color: var(--bordure);
}

.tel-btn-prix {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6e6e73;
}

/* Groupe à liste longue (35 disques, 18 boîtiers…) : une liste déroulante est
   plus lisible qu'une rangée de boutons. */
.tel-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
}

.tel-select:hover,
.tel-select:focus {
  border-color: var(--bleu);
}

.tel-prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.tel-prix .price {
  font-size: 1.7rem;
}

/* Nom de la couleur retenue, sous les pastilles de la fiche console */
.tel-couleur-nom {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6e6e73;
}

/* Détail du prix quand on ajoute des manettes ou plusieurs consoles :
   « 549 € × 2 + 69 € × 2 manette(s) » */
.tel-prix-detail {
  flex-basis: 100%;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6e6e73;
}

.tel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tel-ajouter {
  min-height: 44px;
  padding: 12px 22px;
  background: var(--bleu);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.tel-ajouter:hover {
  background: var(--bleu-fonce);
}

.tel-fiche-lien {
  color: var(--bleu);
  font-weight: 600;
  text-decoration: underline;
}

.tel-specs-titre {
  margin: 4px 0 0;
  font-size: 1rem;
}

.tel-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tel-specs th {
  text-align: left;
  white-space: nowrap;
  vertical-align: top;
  font-weight: 600;
  color: #6e6e73;
  padding: 7px 12px 7px 0;
  border-bottom: 1px solid var(--bordure);
}

.tel-specs td {
  padding: 7px 0;
  border-bottom: 1px solid var(--bordure);
}

.tel-mention {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: #6e6e73;
}

@media (max-width: 700px) {
  .tel-corps {
    grid-template-columns: 1fr;
  }

  .familles-tel-grille {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .famille-tel-img {
    height: 92px;
  }

  .tel-btn {
    min-height: 44px;
  }
}

/* ===== Pièces & Composants : cartes plus compactes (2026-09-28) =====
   Demande client : « réduire un peu la taille des catégories et un peu plus
   des sous-catégories ». Les appareils (1er niveau : .pieces-appareils)
   perdent un peu de hauteur, les pièces et composants (2e niveau :
   .pieces-types) davantage. Les deux classes sont posées par js/familles.js
   (rendrePieces) : la fiche détaillée et les autres rubriques ne changent pas. */

/* --- 1er niveau : les appareils --- */
.pieces-appareils {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.pieces-appareils .famille-card {
  gap: 9px;
  padding: 11px 13px;
  border-radius: 12px;
}

.pieces-appareils .famille-ico {
  font-size: 1.3rem;
}

.pieces-appareils .famille-nom {
  font-size: 0.84rem;
}

.pieces-appareils .famille-desc {
  font-size: 0.7rem;
}

/* --- 2e niveau : les pièces et composants (plus compact) --- */
.pieces-types .familles-tel-titre {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.pieces-types .familles-tel-grille {
  grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
  gap: 10px;
}

.pieces-types .famille-tel-carte {
  gap: 4px;
  padding: 9px;
  border-radius: 13px;
}

.pieces-types .famille-tel-img {
  height: 70px;
  border-radius: 9px;
}

.pieces-types .famille-tel-img .famille-ico {
  font-size: 1.45rem;
}

.pieces-types .famille-tel-nom {
  font-size: 0.82rem;
}

.pieces-types .famille-tel-infos {
  font-size: 0.71rem;
}

@media (max-width: 700px) {
  .pieces-types .familles-tel-grille {
    grid-template-columns: 1fr 1fr;
  }

  .pieces-types .famille-tel-img {
    height: 58px;
  }
}

/* ===== Accessoires et Jeux vidéo : sous-catégories illustrées (2026-09-28) =====
   Demande client : « réorganiser la sélection des produits comme dans Téléphone
   et Tablettes » et afficher de vraies images sur les sous-catégories. Les deux
   niveaux (appareil, type d'accessoire ou rayon de jeux) utilisent donc les
   cartes de famille des téléphones, avec la photo d'un article représentatif.
   Classes posées par js/familles.js : .appareils-accessoires, .types-accessoires,
   .types-jeux. */
.appareils-accessoires .familles-tel-grille,
.types-accessoires .familles-tel-grille,
.types-jeux .familles-tel-grille {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 12px;
}

.appareils-accessoires .famille-tel-img,
.types-accessoires .famille-tel-img,
.types-jeux .famille-tel-img {
  height: 96px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
}

.appareils-accessoires .famille-tel-img img,
.types-accessoires .famille-tel-img img,
.types-jeux .famille-tel-img img {
  padding: 4px;
}

/* Sous-catégorie choisie : même repère visuel que les boutons de la fiche */
.famille-tel-carte.active {
  border-color: var(--bleu);
  background: #eef4ff;
}

/* Rayon annoncé mais encore vide (Mini PC, Unité centrale…) : carte visible
   mais grisée, comme les familles sans article des autres rubriques. */
.famille-tel-carte.vide,
.famille-tel-carte[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.famille-tel-carte.vide:hover {
  transform: none;
  border-color: var(--bordure);
  box-shadow: none;
}

.types-accessoires .famille-tel-nom,
.types-jeux .famille-tel-nom,
.appareils-accessoires .famille-tel-nom {
  font-size: 0.9rem;
}

@media (max-width: 700px) {
  .appareils-accessoires .familles-tel-grille,
  .types-accessoires .familles-tel-grille,
  .types-jeux .familles-tel-grille {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .appareils-accessoires .famille-tel-img,
  .types-accessoires .famille-tel-img,
  .types-jeux .famille-tel-img {
    height: 74px;
  }
}

/* ===== Ruban saisonnier « Rentrée » : style moderne (2026-09-28) =====
   Demande client : « change-moi un autre style beaucoup plus moderne de la
   partie Rentrée ». La refonte est ciblée sur le thème Rentrée
   ([data-theme-id="rentree"]) : les autres saisons gardent leur ruban.
   Structure posée par js/themes.js : icône, nom (sur-titre), message,
   sous-titre, bouton d'action et bouton de fermeture. */

/* --- Base commune, utile à toutes les saisons --- */
.theme-ribbon-texte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.theme-ribbon-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--bleu-fonce);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}

.theme-ribbon-fleche {
  transition: transform 0.2s;
}

.theme-ribbon:hover .theme-ribbon-fleche {
  transform: translateX(3px);
}

.theme-ribbon-fermer {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: inherit;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.theme-ribbon-fermer:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}

/* --- Rentrée : ruban compact (une seule ligne, comme les autres saisons) --- */
.theme-ribbon[data-theme-id="rentree"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 16px;
  text-align: center;
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(245, 197, 24, 0.18) 0%, rgba(245, 197, 24, 0) 55%),
    linear-gradient(100deg, var(--bleu-fonce) 0%, var(--bleu) 55%, var(--bleu-clair) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Nom, message et sous-titre sur la même ligne que le reste du ruban */
.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-texte {
  display: contents;
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-txt {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-sous {
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-cta {
  padding: 5px 13px;
  font-size: 0.74rem;
  background: linear-gradient(120deg, var(--accent), #ffd964);
  color: var(--bleu-fonce);
  box-shadow: 0 4px 10px rgba(245, 197, 24, 0.28);
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(245, 197, 24, 0.38);
}

.theme-ribbon[data-theme-id="rentree"] .theme-ribbon-fermer {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 780px) {
  .theme-ribbon[data-theme-id="rentree"] {
    gap: 8px;
    padding: 6px 12px;
  }

  /* Le sous-titre est trop long sur mobile : on ne garde que l'essentiel */
  .theme-ribbon[data-theme-id="rentree"] .theme-ribbon-sous {
    display: none;
  }
}

/* ===== Catégories et sous-catégories plus compactes (2026-09-28) =====
   Demande client : « réduire la taille des catégories et des sous-catégories,
   c'est un peu trop large à l'écran, réduire bien la taille des
   sous-catégories aussi ». Deux niveaux :
     1. les CATÉGORIES (barre des familles : Média & Jeux vidéo, appareils
        d'Accessoires et de Pièces) = .familles / .pieces-appareils ;
     2. les SOUS-CATÉGORIES (rayons et types, cartes illustrées) =
        .familles-tel-grille et ses variantes.
   Le bloc est en fin de feuille : il passe devant toutes les règles de même
   spécificité écrites plus haut. Les fiches détaillées (téléphones, pièces,
   consoles) ne changent pas.
   Mesures : 1440 px → catégories 218 px de large (7/ligne) et sous-catégories
   162 × 184 px (image 96 px) ; après réglage : ~130 px et ~112 × 128 px. */

/* ---------- 1. Les catégories ---------- */
.familles {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.familles .famille-card {
  padding: 10px 11px;
  gap: 8px;
  border-radius: 12px;
  border-width: 1px;
}

.familles .famille-ico { font-size: 1.3rem; }
.familles .famille-nom { font-size: 0.82rem; }
.familles .famille-desc { font-size: 0.68rem; }

/* Les appareils de Pièces & Composants : encore un cran plus petits */
.pieces-appareils {
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 9px;
  margin-bottom: 18px;
}

.pieces-appareils .famille-card {
  gap: 7px;
  padding: 9px 11px;
  border-radius: 11px;
}

.pieces-appareils .famille-ico { font-size: 1.1rem; }
.pieces-appareils .famille-nom { font-size: 0.77rem; }
.pieces-appareils .famille-desc { font-size: 0.63rem; }

/* ---------- 2. Les sous-catégories (rayons et types) ---------- */
.familles-tel { margin: 4px 0 20px; }

.familles-tel-titre {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.familles-tel-grille,
.appareils-accessoires .familles-tel-grille,
.types-accessoires .familles-tel-grille,
.types-jeux .familles-tel-grille {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}

.famille-tel-carte {
  gap: 3px;
  padding: 7px;
  border-radius: 11px;
}

.famille-tel-img,
.appareils-accessoires .famille-tel-img,
.types-accessoires .famille-tel-img,
.types-jeux .famille-tel-img {
  height: 72px;
  border-radius: 8px;
}

.famille-tel-nom,
.appareils-accessoires .famille-tel-nom,
.types-accessoires .famille-tel-nom,
.types-jeux .famille-tel-nom {
  font-size: 0.76rem;
  line-height: 1.2;
}

.famille-tel-infos {
  font-size: 0.66rem;
  line-height: 1.25;
}

/* Sous-catégories de Pièces & Composants : les plus compactes */
.pieces-types .familles-tel-grille {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 7px;
}

.pieces-types .famille-tel-carte { padding: 6px; gap: 2px; border-radius: 10px; }
.pieces-types .famille-tel-img { height: 54px; }
.pieces-types .famille-tel-img .famille-ico { font-size: 1.25rem; }
.pieces-types .famille-tel-nom { font-size: 0.73rem; }
.pieces-types .famille-tel-infos { font-size: 0.63rem; }

/* ---------- 3. Petits écrans : trois sous-catégories par ligne ---------- */
@media (max-width: 700px) {
  .familles,
  .pieces-appareils {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .familles-tel-grille,
  .appareils-accessoires .familles-tel-grille,
  .types-accessoires .familles-tel-grille,
  .types-jeux .familles-tel-grille,
  .pieces-types .familles-tel-grille {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .famille-tel-carte { padding: 6px; }

  .famille-tel-img,
  .appareils-accessoires .famille-tel-img,
  .types-accessoires .famille-tel-img,
  .types-jeux .famille-tel-img,
  .pieces-types .famille-tel-img {
    height: 58px;
  }

  .famille-tel-nom { font-size: 0.7rem; }
  .famille-tel-infos { font-size: 0.61rem; }
}

/* ===== Sous-catégories en pastilles (2026-09-28, 2ᵉ passe) =====
   Demande client : « réduire la taille des sous-catégories pour qu'elles ne
   prennent pas trop de place au-dessus des produits ». Les rayons de
   Média & Jeux vidéo (.types-jeux) et les types d'Accessoires
   (.types-accessoires) passent de cartes illustrées à des pastilles
   horizontales : petite image ronde + nom + nombre d'articles, sur une seule
   ligne qui se replie. Les produits remontent d'autant. */
.types-jeux .familles-tel-grille,
.types-accessoires .familles-tel-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.types-jeux .famille-tel-carte,
.types-accessoires .famille-tel-carte {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border-radius: 999px;
  text-align: left;
}

.types-jeux .famille-tel-img,
.types-accessoires .famille-tel-img {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: var(--gris-clair);
}

.types-jeux .famille-tel-img img,
.types-accessoires .famille-tel-img img {
  padding: 3px;
}

.types-jeux .famille-tel-nom,
.types-accessoires .famille-tel-nom {
  font-size: 0.78rem;
  line-height: 1.15;
}

.types-jeux .famille-tel-infos,
.types-accessoires .famille-tel-infos {
  font-size: 0.66rem;
  white-space: nowrap;
}

/* Petits écrans : les pastilles restent en ligne et se replient */
@media (max-width: 700px) {
  .types-jeux .familles-tel-grille,
  .types-accessoires .familles-tel-grille {
    gap: 7px;
  }

  .types-jeux .famille-tel-carte,
  .types-accessoires .famille-tel-carte {
    padding: 4px 12px 4px 4px;
  }

  .types-jeux .famille-tel-img,
  .types-accessoires .famille-tel-img {
    width: 28px;
    height: 28px;
  }

  .types-jeux .famille-tel-infos,
  .types-accessoires .famille-tel-infos {
    display: none;
  }
}

/* ===== Sous-familles d'Ordinateurs & Bureautique en pastilles (2026-09-28) =====
   Même traitement que les rayons de Média & Jeux vidéo : les sous-familles
   (MacBook Air, MacBook Pro, iMac, PC portables / Imprimantes, Multifonctions,
   Copieurs, Scanners) passent de cartes à des pilules horizontales, pour ne
   pas pousser les produits vers le bas. */
[id$="-sousfamilles"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

[id$="-sousfamilles"] .famille-card {
  border-width: 1px;
  border-radius: 999px;
  padding: 6px 14px;
  gap: 8px;
  transform: none;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

[id$="-sousfamilles"] .famille-card:hover,
[id$="-sousfamilles"] .famille-card.active {
  transform: none;
  box-shadow: none;
}

[id$="-sousfamilles"] .famille-ico {
  font-size: 1rem;
}

/* Nom et compteur sur une seule ligne, séparés par un point */
[id$="-sousfamilles"] .famille-nom {
  display: inline;
  font-size: 0.8rem;
  line-height: 1.2;
}

[id$="-sousfamilles"] .famille-nom::after {
  content: " · ";
}

[id$="-sousfamilles"] .famille-desc {
  display: inline;
  font-size: 0.68rem;
  line-height: 1.2;
}

/* ============================================================
   EN-TÊTE SUR TÉLÉPHONE : SÉLECTEURS RACCOURCIS (2026-09-29)
   ------------------------------------------------------------
   Demande client : « le site n'affiche pas trop bien sur
   smartphone, réduis un peu la longueur des sélections de
   langues, pays/devises, mon compte ».

   • langue  : « 🌐 Langue » sur ordinateur, « 🌐 FR » sur
     téléphone (le mot est masqué, le code de la langue reste).
   • pays/devise : pastille bornée plus court.
   • mon compte : pastille plus étroite (le libellé est déjà
     masqué sous 700 px).

   Effet : logo + outils tiennent enfin sur la PREMIÈRE ligne du
   téléphone (auparavant la barre d'outils occupait sa propre
   ligne) — l'en-tête perd une rangée.
   ============================================================ */
.menu-langue summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.langue-code {
  display: none;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Un <select> se dimensionne sur son option la PLUS LONGUE — ici
   « Verenigde Arabische Emiraten (AED) » en néerlandais, soit ~230 px : sans
   borne, la barre d'outils changeait de largeur selon la langue et faisait
   déborder l'en-tête (mesuré : 23 px de débordement à 900 px de large en
   néerlandais). La liste déroulante, elle, affiche toujours les noms en
   entier (voir .choix-pays select option). */
.choix-pays select {
  max-width: 150px;
  text-overflow: ellipsis;
}

/* Ordre FIXE de l'en-tête étroit : logo + outils sur la 1re ligne, puis la
   recherche, puis compte + panier. Sans cela, c'est la largeur du libellé du
   panier (« Panier » / « Cart » / « Carrito » / « Winkelwagen ») qui décidait
   du nombre de lignes : l'en-tête mesurait 174 px en anglais et 222 px en
   français et en espagnol, pour la même page. */
@media (max-width: 820px) {
  .header .logo { order: 1; }
  .barre-outils { order: 2; }
  .search-bar { order: 3; }
  .header-actions { order: 4; }
}

@media (max-width: 620px) {
  .menu-langue .langue-nom {
    display: none;
  }

  .menu-langue .langue-code {
    display: inline;
  }

  .menu-langue summary {
    padding: 5px 9px;
    gap: 4px;
  }

  /* Le nom choisi reste lisible (« Bénin (XOF) ») ; les noms les plus
     longs sont coupés, la liste déroulante les affiche en entier. */
  .choix-pays select {
    max-width: 108px;
    padding: 3px 6px;
  }

  .header-actions .btn-compte,
  .barre-outils .btn-compte {
    padding: 6px 10px;
  }
}

/* Téléphones très étroits (320-400 px) : on gagne les quelques pixels qui
   permettent à « logo + outils » de tenir sur la première ligne. */
@media (max-width: 400px) {
  .header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .choix-pays select {
    max-width: 104px;
  }
}

/* ============================================================
   APPLICATION INSTALLABLE (PWA) — 2026-09-29
   ------------------------------------------------------------
   • .pwa-installer : bloc du pied de page (pied foncé) construit
     par js/pwa.js, affiché seulement si le navigateur sait
     installer l'application (ou sur iPhone/iPad, avec la marche
     à suivre) ;
   • .pwa-hors-ligne : pastille discrète en bas à gauche, affichée
     uniquement quand la connexion est perdue.
   ============================================================ */
.pwa-installer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 720px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}

.pwa-installer[hidden] {
  display: none !important;
}

.pwa-installer-ico {
  font-size: 1.4rem;
  line-height: 1;
}

.pwa-installer-texte {
  text-align: left;
}

.pwa-installer-texte strong {
  display: block;
  font-size: 0.95rem;
}

.pwa-installer-texte em {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  opacity: 0.78;
}

.pwa-installer-bouton {
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pwa-installer-bouton:hover {
  background: var(--rouge-fonce);
}

.pwa-hors-ligne {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.pwa-hors-ligne[hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .pwa-installer {
    padding: 12px 14px;
    gap: 8px 10px;
  }

  .pwa-installer-bouton {
    width: 100%;
  }

  .pwa-hors-ligne {
    left: 10px;
    bottom: 10px;
    font-size: 0.74rem;
  }
}

/* ============================================================
   Mode application (webview Capacitor, adresses avec ?app=1)
   ------------------------------------------------------------
   L'application Android fournit sa propre barre d'onglets native.
   On masque donc la coque du site qui ferait double emploi :
   rubriques (pastilles horizontales), ruban saisonnier, pied de
   page, boutons flottants (aide, assistant, retour en haut) et le
   bloc « version du site ». L'en-tête (logo, recherche, langue,
   compte, panier) reste : il est fonctionnel dans l'application.
   ============================================================ */
html.mode-app .navbar,
html.mode-app .theme-ribbon,
html.mode-app footer,
html.mode-app #aideFlottante,
html.mode-app #assistantFlottant,
html.mode-app #hautPage,
html.mode-app .affichage {
  display: none !important;
}

/* L'en-tête du site est collant ; le masquage du ruban saisonnier et des
   rubriques ne doit pas laisser de marge morte en haut de la page. */
html.mode-app body {
  padding-top: 0 !important;
}

/* (THÈME SOMBRE DE L'APPLICATION retiré le 2026-10-01 : l'application est
   revenue au style « premium clair » ; le contenu du site garde donc son
   thème clair d'origine en mode application.) */

/* ============================================================
   RESTYLAGE MODERNE & CHIC (2026-10-01)
   ------------------------------------------------------------
   Sélection de produit façon Back Market (modèle → capacité →
   couleur) et touches de modernité : cartes plus nettes, ombres
   douces, sélection « remplie », typographie affinée.
   Ajouté EN FIN de feuille pour surcharger proprement les règles
   d'origine (même spécificité, ordre d'apparition gagnant).
   ============================================================ */

/* --- Cartes des familles (iPhone 18, Galaxy S24…) --- */
.famille-tel-carte {
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.famille-tel-carte:hover {
  transform: translateY(-4px);
  border-color: var(--bleu);
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
}
.famille-tel-img {
  border-radius: 14px;
}
.famille-tel-nom {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* --- Fiche de sélection (variante / état / capacité / couleur) --- */
.tel-corps {
  gap: 28px;
}

.tel-media {
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--bordure);
}

.tel-libelle {
  letter-spacing: 0.06em;
}

.tel-btn {
  border-radius: 14px;
  padding: 9px 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tel-btn:hover:not(.vide):not([disabled]) {
  transform: translateY(-1px);
  border-color: var(--bleu);
  box-shadow: 0 6px 14px rgba(0, 52, 154, 0.12);
}
.tel-btn.active {
  border-color: var(--bleu);
  background-color: var(--bleu);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 52, 154, 0.22);
}
.tel-btn.active .tel-btn-prix {
  color: rgba(255, 255, 255, 0.85);
}

.tel-pastille {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tel-pastille:hover {
  transform: scale(1.08);
}
.tel-pastille.active {
  outline: none;
  box-shadow: 0 0 0 2px var(--bleu), 0 0 0 4px rgba(0, 52, 154, 0.18);
}

.tel-couleur-nom {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6e6e73;
}

.tel-prix .price {
  font-size: 1.9rem;
  letter-spacing: -0.02em;
}

.tel-ajouter {
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 52, 154, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.tel-ajouter:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 52, 154, 0.3);
}

.tel-specs th {
  color: #4b5563;
}
.tel-specs td {
  font-weight: 500;
}

/* --- Touches de modernité générales --- */
.section-title h2 {
  letter-spacing: -0.01em;
}

.category-card {
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

.product-card {
  border-radius: 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.product-card:hover {
  box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12);
}

.btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* Badges du hero : devenus des liens cliquables vers les rubriques. */
.hero-badges a.badge {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.hero-badges a.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  border-color: var(--blanc);
}

/* ============================================================
   EN-TÊTE MOBILE SUR UNE SEULE LIGNE (2026-10-01)
   ------------------------------------------------------------
   Demande client : sur smartphone, la recherche, la langue, etc.
   doivent être SUR LA MÊME LIGNE que le logo. On compresse donc
   l'en-tête en une rangée unique : logo compact, recherche qui
   absorbe l'espace restant, langue en code, compte en picto,
   panier en picto + compteur. Placé en fin de feuille pour
   surcharger les règles « recherche sous le logo » (≤820 px).
   ============================================================ */
@media (max-width: 700px) {
  .header {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .header .logo {
    order: 1;
    flex: 0 0 auto;
  }

  .header .logo-img {
    height: 40px;
    width: auto;
  }

  .search-bar {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .search-bar input,
  .search-bar #searchInput {
    max-width: none;
    min-width: 0;
    padding: 7px 10px;
    font-size: 0.85rem;
  }

  /* Bouton de recherche réduit à l'icône (le libellé disparaît). */
  .search-bar button {
    padding: 7px 10px;
    font-size: 0;
  }
  .search-bar button::before {
    content: "\1F50D";
    font-size: 0.95rem;
    line-height: 1;
  }

  .barre-outils {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    gap: 6px;
    padding: 0;
  }

  .header-actions {
    order: 4;
    flex: 0 0 auto;
    margin-left: 0;
  }

  /* Panier : pictogramme + compteur seulement. */
  .btn-panier span:not(#panierCount) {
    display: none;
  }

  /* Sélecteur de pays/devise resserré (la liste garde les noms entiers). */
  .choix-pays select {
    max-width: 92px;
    padding: 5px 8px;
  }

  .barre-outils summary,
  .barre-outils .btn-compte,
  .header-actions .btn-compte {
    padding: 6px 9px;
  }
}

@media (max-width: 400px) {
  .header .logo-img {
    height: 36px;
  }
  .header {
    gap: 6px;
    padding: 8px 10px;
  }
  .barre-outils {
    gap: 4px;
  }
  .choix-pays select {
    max-width: 74px;
  }
}

/* Sur les plus petits téléphones (≤480 px), la place manque pour tout
   afficher : le sélecteur de pays/devise sort de la ligne (le visiteur
   garde la devise par défaut, Bénin XOF) et l'icône 🌐 de la langue est
   retirée (seul le code FR/EN/ES/NL reste) pour laisser la recherche
   respirer. */
@media (max-width: 480px) {
  .choix-pays {
    display: none;
  }
  .menu-langue .langue-ico {
    display: none;
  }
  .header .logo-img {
    height: 36px;
  }
  .btn-panier {
    padding: 7px 9px;
    gap: 5px;
  }
  .header-actions {
    gap: 6px;
  }
}

/* ============================================================
   ÉTAT DES PRODUITS D'OCCASION (note sur 5, façon Back Market)
   ============================================================ */
.produit-etat-occasion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.76rem;
  font-weight: 600;
}

/* Code P / B / M du système d'état des occasions. */
.produit-etat-code,
.tel-etat-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: #9a3412;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.produit-etat-occasion .produit-etat-etoiles {
  color: #f59e0b;
  letter-spacing: 1px;
}

.produit-etat-occasion em {
  font-style: normal;
  opacity: 0.7;
  font-weight: 500;
}

.tel-etat-occasion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 0.85rem;
  font-weight: 600;
}

.tel-etat-occasion .tel-etat-etoiles {
  color: #f59e0b;
  letter-spacing: 2px;
  font-size: 0.95rem;
}

.tel-etat-occasion em {
  font-style: normal;
  opacity: 0.7;
  font-weight: 500;
}

/* ------------------------------------------------------------
   Accessoires compatibles d'une fiche produit : chaque ligne est un
   lien vers l'accessoire (sa fiche, ou sa rubrique avec la bonne famille).
   ------------------------------------------------------------ */
.compatibles li a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.compatibles li a:hover,
.compatibles li a:focus-visible {
  color: var(--bleu);
  border-bottom-color: var(--bleu);
}
.compatibles .prix-occasion {
  color: var(--rouge);
  font-size: .92em;
}

/* ------------------------------------------------------------
   Application Android : petit lien discret, sur la meme rangee
   que les moyens de paiement, tout a droite de la page.
   ------------------------------------------------------------ */
/* La rangee de paiements s'aligne sur le reste du pied de page
   (comme .footer-grid et .footer-bottom, qui sont a 24 px du bord). */
footer .paiements {
  padding: 0 0 24px;
}

.lien-app {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Placé juste après « Apple Pay », dans la même rangée : ni collé au bord
     droit de la page, ni près du bouton d'aide flottant. */
  margin-left: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  color: #d1d5db;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lien-app:hover,
.lien-app:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
}
/* ============================================================
   Choix du mode de paiement
   Bloc construit par js/paiements.js : affiche dans le panier
   (site) et sur la page de validation (espace client).
   ============================================================ */
.panier-paiement {
  margin-top: 26px;
}

.paiement-titre {
  font-family: var(--police-titres);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--noir);
  margin: 0 0 10px;
}

.paiement-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 10px;
}

.paiement-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--bordure);
  border-radius: 12px;
  background: var(--blanc);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.paiement-option:hover {
  border-color: var(--bleu-clair);
}

.paiement-option.actif {
  border-color: var(--bleu);
  background: #f2f6ff;
  box-shadow: 0 6px 16px rgba(0, 52, 154, .12);
}

.paiement-option input {
  flex: 0 0 auto;
  margin: 3px 0 0;
  accent-color: var(--bleu);
}

.paiement-boite {
  display: block;
}

.paiement-boite strong {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--noir);
}

.paiement-boite em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--gris);
}

.paiement-note {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--gris);
}
/* ============================================================
   Page « Infos » : boutons d'action et transporteurs partenaires
   ============================================================ */
.info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1.5px solid var(--bleu);
  border-radius: 10px;
  background: var(--bleu);
  color: var(--blanc);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.btn-action.clair {
  background: var(--blanc);
  color: var(--bleu);
}

.btn-action:hover,
.btn-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 52, 154, .18);
}

.btn-action.clair:hover,
.btn-action.clair:focus-visible {
  background: var(--bleu);
  color: var(--blanc);
}

.livreurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.livreur-zone {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .04);
}

.livreur-zone h3 {
  margin: 0 0 12px;
  font-size: .98rem;
  color: var(--bleu);
}

.livreur-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.livreur {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  color: var(--noir);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.livreur:hover,
.livreur:focus-visible {
  border-color: var(--bleu);
  background: #f6f9ff;
  transform: translateX(2px);
}

.livreur .ico {
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1.3;
}

.livreur .txt {
  min-width: 0;
}

.livreur .txt strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
}

.livreur .txt em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: .77rem;
  line-height: 1.35;
  color: var(--gris);
}
/* ============================================================
   Bandeau d'accueil : les textes et l'illustration a gauche,
   le lecteur video seul a droite (rempli par js/videos.js).
   ============================================================ */
.hero-text {
  flex: 1 1 470px;
  min-width: 0;
}

/* Illustration : a gauche, juste sous les boutons du bandeau. */
.hero-image {
  margin-top: 26px;
}

/* Boutons du bandeau : plus courts, pour tenir sur une seule ligne. */
.hero-badges .badge {
  padding: 6px 11px;
  font-size: .78rem;
}

/* Colonne de droite : uniquement le lecteur video. */
.hero-media {
  flex: 0 1 560px;
  min-width: 0;
}

.hero-video[hidden] {
  display: none;
}

.video-panneau {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 20px;
  padding: 12px;
}

.video-cadre {
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

/* Aucun texte sur le lecteur : les sous-titres eventuels s'affichent dans
   l'image, comme sur n'importe quelle video. */
.video-lecteur {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

/* Plusieurs videos : une rangee de vignettes, sans aucun texte visible
   (le titre n'apparait que dans l'info-bulle). */
.video-vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.video-vignette {
  width: 76px;
  height: 43px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .16);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: .62;
  transition: opacity .15s ease, border-color .15s ease;
}

.video-vignette:hover,
.video-vignette:focus-visible {
  opacity: .92;
}

.video-vignette.actif {
  border-color: var(--blanc);
  opacity: 1;
}

@media (max-width: 900px) {
  .hero-text,
  .hero-media {
    flex: 1 1 100%;
  }
}