/* ------------------------------------
    1. BASE & RESET
    ------------------------------------ */

/* Utilisation du box-sizing: border-box pour simplifier le layout (UX/Dev Experience) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variables CSS Globales (Mises à jour pour Good Geek) */
:root {
  /* Couleurs Good Geek (Basées sur la maquette : Noir, Jaune, Blanc) */
  --color-primary: #000000;
  /* Noir (Base du site, Texte principal) */
  --color-secondary: #ffff00;
  /* Jaune Vif (Action, Boutons, Prix, Call to Action) */
  --color-text: #000000;
  --color-background: #ffffff;
  --color-light-bg: #f8f9fa;
  /* Pour les sections de fond clair */

  /* Typographie (Similaire à Google Sans, Roboto ou une police web standard) */
  --font-family-base: "Roboto", "Arial", sans-serif;
  /* Pensez à l'inclure via Google Fonts plus tard */
  --font-size-base: 16px;
}

/* -----------------------------------------------------------
   FIX SCROLLBAR & STICKY FOOTER
   Approche simplifiée pour éviter la double barre de défilement.
----------------------------------------------------------- */
html {
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: scroll !important; /* Force a single main scrollbar */
}

body, html { max-width: 100%; overflow-x: hidden !important; } .site-wrapper { max-width: 100%; overflow-y: visible !important; }

html {
  margin: 0;
  padding: 0;
}

body {
  /* Laisse le body grandir naturellement */
  margin: 0;
  padding: 0;
  position: relative;

  font-family: var(--font-family-base);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Wrapper global pour gérer le Sticky Footer proprement */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }

.site-main {
  flex: 1 0 auto;
  padding: 20px 50px;
}

/* Sémantique et SEO : Améliorer le contraste des liens */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary);
  /* text-decoration: underline; */
}

.button.alt {
  padding: 15px 20px;
  font-size: 1clamp (0.9rem, 1.8vw, 1.1rem);
  font-weight: 900;
  text-transform: uppercase;
  background-color: var(--color-secondary) !important;
  /* Jaune vif */
  color: var(--color-primary) !important;
  /* Texte noir */
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Boutons CTA  */
.woocommerce .button,
a.button,
button[type="submit"] {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--color-secondary);
  color: var(--color-primary) !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  transition: background-color 0.3s ease;
}

.woocommerce .button:hover,
a.button:hover,
button[type="submit"]:hover {
  background-color: #ffda6a;
  /* Jaune légèrement plus clair au survol */
}



@media (max-width: 768px) {
  .site-main {
    padding: 20px 10px;
  }
}

/* ------------------------------------
    HEADER & NAVIGATION
    ------------------------------------ */

.container {
  max-width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }
}

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================================
   1. TOP BAR (JAUNE)
   ========================================= */
.top-bar-announcement {
  background-color: var(--color-secondary);
  color: #000000 !important;
  text-align: center;
  padding: 8px 0;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin: 0 !important;
  /* Colle au header */
  border: none !important;
  line-height: 1.2;
}

.delivery-text {
  margin: 0 !important;
  justify-content: space-between;
  gap: 20px;
}

/* =========================================
   2. SITE HEADER (NOIR & STICKY)
   ========================================= */
.site-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  padding: 10px 0;
  width: 100%;
  margin-top: 0 !important;

  /* Sticky & Z-Index Fix */
  position: sticky;
  top: 0;
  z-index: 9999 !important;
  /* Au-dessus du carrousel, en-dessous de la barre Admin (99999) */
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- A. Logo --- */
.site-branding a {
  text-decoration: none;
  color: #fff;
}

.site-branding img {
  display: block;
  max-height: 50px;
  width: auto;
}

/* --- B. Menu Principal (Centré) --- */
.main-navigation {
  flex: 1;
  display: flex;
  justify-content: center;
}

#primary-menu {
  display: flex;
  list-style: none;
  /* Enlève les points */
  margin: 0;
  padding: 0;
  gap: 30px;
}

/* Style général des liens */
#primary-menu>li>a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
}

#primary-menu>li>a:hover {
  opacity: 0.8;
}

/* --- 🎨 COULEURS SPÉCIFIQUES (Adaptées pour le nouveau menu) --- */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item>a.mega-menu-link {
  color: inherit;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:nth-child(1)>a.mega-menu-link {
  color: #4289f4 !important;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:nth-child(2)>a.mega-menu-link {
  color: #ffc107 !important;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:nth-child(3)>a.mega-menu-link {
  color: #e44b8d !important;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:nth-child(4)>a.mega-menu-link {
  color: #28a745 !important;
}

#mega-menu-wrap-primary-menu #mega-menu-primary-menu>li.mega-menu-item:nth-child(5)>a.mega-menu-link {
  color: #ffff00 !important;
}

li.mega-menu-item-232>a.mega-menu-link {
  background-color: var(--color-secondary) !important;
  color: black !important;
  border-radius: 4px !important;
}

/* --- C. Header Right Group (Droite) --- */
.header-right-group {
  display: flex;
  flex-direction: column;
  /* Texte en haut, icones en bas */
  align-items: flex-end;
  /* Calé à droite */
  gap: 5px;
}

/* Liens textes (Haut) */
.header-text-links {
  display: flex;
  gap: 15px;
}

.header-text-links a {
  color: #cccccc;
  font-size: 11px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
}

.header-text-links a:hover {
  color: #fff;
}

/* Ligne Icônes + Recherche (Bas) */
.header-icons-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Recherche FiboSearch */
.header-search-wrapper {
  min-width: 200px;
}

/* Icônes JAUNES */
.header-icon-link {
  color: var(--color-secondary);
  /* Force le JAUNE */
  font-size: 22px;
  text-decoration: none;
  display: flex;
  align-items: center;
  position: relative;
  transition: transform 0.2s;
}

.header-icon-link i {
  color: var(--color-secondary);
  /* Force FontAwesome en jaune */
}

.header-icon-link:hover {
  transform: scale(1.1);
}

/* Compteur Panier */
.header-cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #fff;
  color: #000;
  font-size: 10px;
  font-weight: 800;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================
   3. BARRE PROMO ACF (BLANCHE)
   ========================================= */
.acf-promo-bar {
  background-color: #ffffff;
  color: #000000;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

/* =========================================
   HEADER MOBILE
   ========================================= */
@media (max-width: 992px) {

  /* 1. CONTENEUR GLOBAL : Doit prendre 100% de la largeur */
  .site-header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: 100% !important;
    /* ⚠️ CRUCIAL : Force la largeur totale */
    justify-content: flex-start !important;
  }

  /* 2. LOGO : À gauche + "Pousse-tout-à-droite" */
  .site-branding {
    order: 1;
    flex-shrink: 0;
    /* 👇 C'est cette ligne qui fait la magie */
    margin-right: auto !important;
    display: block;
  }

  .site-branding img {
    max-height: 40px;
    width: auto;
  }

  /* 3. GROUPE ICÔNES (Recherche, User, Panier) */
  .header-right-group {
    order: 2;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px;
    /* Espacement entre les icônes */
    margin-left: 0 !important;
    /* On reset les marges */
    margin-right: 15px !important;
    /* Espace avant le burger */
  }

  /* 4. RECHERCHE (Optimisation place) */
  .header-search-wrapper {
    width: auto !important;
    min-width: unset !important;
  }

  .dgwt-wcas-search-wrapp {
    margin: 0 !important;
    width: auto !important;
    min-width: unset !important;
  }

  /* 5. MENU BURGER (Tout à droite) */
  .main-navigation {
    order: 3;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }

  /* Reset du background burger */
  .mega-menu-toggle {
    background: transparent !important;
  }

  /* Cache les textes inutiles */
  .header-text-links {
    display: none !important;
  }
}

/* =========================================
   HERO SLIDER - MANGA READER
   ========================================= */

/* --- 1. CONTENEUR PRINCIPAL --- */
.home-hero-slider-section {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
}

/* --- 2. SWIPER & SLIDES --- */
.slider_Manga_Reader {
  width: 100%;
  height: auto;
  /* Laisse le contenu définir la hauteur */
}

.slider_Manga_Reader .swiper-wrapper {
  height: 100%;
}

/* Force le slide à s'adapter à l'image sans hauteur fixe */
.slider_Manga_Reader .swiper-slide {
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- 3. IMAGES & LIENS (RESPONSIVE & NO-CROP) --- */
.box_item,
.bg_item_link {
  width: 100%;
  display: block;
  line-height: 0;
  /* Supprime l'espace fantôme sous l'image */
}

/* Classe spécifique pour l'image responsive générée par WP */
img.hero-img-responsive {
  width: 100%;
  /* Prend toute la largeur */
  height: auto;
  /* Garde son ratio naturel -> Fini le cropping */
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Optionnel : Zoom léger au survol */
.bg_item_link:hover img.hero-img-responsive {
  /* transform: scale(1.01); */
}

/* --- 4. NAVIGATION (FLÈCHES) --- */
/* Conteneur pour centrer verticalement les flèches */
.boox_bt {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

/* Style commun des flèches (Gauche & Droite) */
.slider_Manga_Reader .swiper-button,
.slider_Manga_Reader .swiper-bt-prev,
.slider_Manga_Reader .swiper-bt-next {
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* Design */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffc107;
  /* Jaune */

  /* Typo flèches */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  /* Ajusté pour centrer le caractère */
  line-height: 1;
  padding-bottom: 4px;
  /* Petit ajustement optique du caractère */

  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 20;
}

/* Positionnement spécifique */
.slider_Manga_Reader .swiper-bt-prev {
  left: 12px;
}

.slider_Manga_Reader .swiper-bt-next {
  right: 12px;
}

/* Effet Hover */
.slider_Manga_Reader .swiper-bt-prev:hover,
.slider_Manga_Reader .swiper-bt-next:hover {
  background: rgba(0, 0, 0, 0.75);
  transform: translateY(-50%) scale(1.1);
  color: #fff;
  /* Devient blanc au survol (optionnel, sinon garder jaune) */
}

/* --- 5. PAGINATION (POINTS) --- */
.slider_Manga_Reader .swiper-pagination {
  position: absolute;
  bottom: 15px !important;
  width: 100%;
  z-index: 15;
  text-align: center;
  /* Empêche les clics accidentels sur la barre entière, seuls les points seront cliquables */
  pointer-events: none;
}

.slider_Manga_Reader .swiper-pagination-bullet {
  /* Visuel du point (reste petit) */
  width: 10px;
  height: 10px;
  background: rgba(255, 193, 7, 0.5);
  opacity: 1;

  /* Espacement augmenté pour éviter le chevauchement des zones tactiles */
  margin: 0 8px !important;

  transition: all 0.3s ease;
  position: relative;
  /* Important pour positionner la zone invisible */
  pointer-events: auto;
  /* Réactive le clic sur le point */
}

/* 🔥 LA MAGIE : Zone de clic invisible de 48px par dessus le point */
.slider_Manga_Reader .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  /* Largeur cible tactile Google */
  height: 48px;
  /* Hauteur cible tactile Google */
  background: transparent;
  /* Invisible */
  cursor: pointer;
  z-index: 10;
}

.slider_Manga_Reader .swiper-pagination-bullet-active {
  background: #ffc107;
  transform: scale(1.3);
}

/* =========================================
   RESPONSIVE HERO FIX (CSS ONLY)
   ========================================= */
@media (max-width: 768px) {

  /* 1. On impose une hauteur décente sur mobile */
  .slider_Manga_Reader .swiper-slide {
    height: 300px !important;
    /* Ajuste selon tes besoins (250px à 400px) */
  }

  /* 2. L'image remplit la hauteur mais est coupée sur les côtés (Zoom) */
  img.hero-img-responsive {
    height: 100% !important;
    object-fit: cover !important;
    /* C'est la clé : Cover au lieu de Contain */
    object-position: center center;
    /* On garde le centre de l'image */
  }

  /* 3. On cache les flèches sur mobile (UX : on swipe avec le doigt) */
  .boox_bt {
    display: none !important;
  }

  /* 4. On remonte un peu la pagination */
  .slider_Manga_Reader .swiper-pagination {
    bottom: 10px !important;
  }
}

/* ------------------------------------
    AVANTAGES/SERVICES
    ------------------------------------ */

.advantages-section {
  padding: 30px 0;
  background-color: #ffffff;
  /* Fond blanc comme sur la maquette */
}

.advantages-grid {
  /* Utilise CSS Grid pour une mise en page parfaite en 4 colonnes */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 colonnes de taille égale */
  gap: 20px;
  text-align: center;
  /* Assure que la grille ne dépasse pas les bords du conteneur */
  padding: 0 15px;
}

.advantage-item {
  padding: 10px;
  border-right: 2px solid grey;
}

.advantage-item:last-child {
  border-right: none;
}

.advantage-icon {
  /* Le conteneur d'icône force une petite marge vers le bas */
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  /* Centre l'icône horizontalement */
  align-items: center;
}

.advantage-icon img {
  /* Taille fixe pour les icônes (ajustez si besoin) */
  width: 60px;
  height: 60px;
  /* Assure que l'image elle-même est en noir (si elle est SVG/PNG transparent) */
  filter: invert(0%);
}

.advantage-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: #000;
}

.advantage-description {
  font-size: 0.85rem;
  color: #444;
  line-height: 1.3;
  /* Sécurité pour le texte long, il s'adaptera sur plusieurs lignes sans casser la box */

  word-break: break-word;
}

/* PRODUITS ACCUEIL */


.products-accueil {
  padding-top: 25px;
}

.product-frontpage>h2 {
  padding-bottom: 25px;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-block;
  position: relative;
  padding-left: 20px;
}

.product-frontpage>h2::before {
  content: "";
  display: block;
  height: 70%;
  width: 6px;
  position: absolute;
  top: 0;
  left: 0;
}

/* Couleurs des barres titres */
.product-frontpage .nos-precommandes::before {
  background-color: #ffa500;
}

.product-frontpage .nos-nouveautes::before {
  background-color: blue;
}

.product-frontpage .nos-secondemain::before {
  background-color: #1b703e;
}

/* 1. Reset des marges du shortcode */
.products-accueil:nth-child(1) .products {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Centre les éléments */
  gap: 20px;
  /* Gestion moderne de l'espacement */
}

/* 2. CIBLAGE PRÉCOMMANDES (Desktop Only)
   On applique les 4 colonnes SEULEMENT si l'écran est grand (> 1024px)
*/
@media (min-width: 1025px) {
  .products-accueil:has(.nos-precommandes) .products li.product {
    width: calc(25% - 20px) !important;
    /* 4 par ligne */
    margin: 0 !important;
    /* Le gap du parent gère l'espacement */
  }
}

/* 3. CIBLAGE PRÉCOMMANDES (Tablette / Mobile Large)
   Entre 481px et 1024px -> 2 colonnes
*/
@media (max-width: 1024px) {
  .products-accueil:has(.nos-precommandes) .products li.product {
    width: calc(50% - 20px) !important;
    /* 2 par ligne */
    margin: 0 !important;
  }
}

/* 4. CIBLAGE PRÉCOMMANDES (Mobile Standard)
   En dessous de 480px -> 1 colonne pleine largeur
*/
@media (max-width: 480px) {
  .products-accueil:has(.nos-precommandes) .products li.product {
    width: 100% !important;
    /* 1 par ligne */
    margin: 0 0 20px 0 !important;
  }
}

@media only screen and (max-width: 900px) {
  .advantages-grid {
    /* Passe à 2 colonnes sur les tablettes et petits desktops */
    grid-template-columns: repeat(2, 1fr);
  }

  .advantage-item {
    border-right: none !important;
  }
}

@media only screen and (max-width: 550px) {
  .advantages-grid {
    /* Passe à 1 colonne sur les très petits écrans/mobiles */
    grid-template-columns: 1fr;
  }

  .advantages-section {
    padding: 20px 0;
  }
}

/* ------------------------------------
    SECTION LOTERIE / PROMOTION
    ------------------------------------ */

.loterie-banner-inner {
  /* Utilise Flexbox pour centrer le lien à l'intérieur du conteneur */
  display: flex;
  justify-content: center;
  align-items: center;
}

.loterie-link {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.loterie-banner-img {
  width: 100%;
  height: auto;
  display: block;
}

/* =======================================================
    Bannière d'adhésion membre
    ======================================================= */

.membership-banner {
  /* Utilise la variable CSS définie en PHP, avec une couleur de fallback */
  background-image: var(--background-image-url, none);
  background-color: #000000;
  /* Fallback si l'image ne charge pas ou n'est pas définie */
  background-size: cover;
  /* Couvre toute la zone sans déformer l'image */
  background-position: center center;
  /* Centre l'image dans l'arrière-plan */
  background-repeat: no-repeat;
  /* Empêche la répétition de l'image */

  padding: 30px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  overflow: hidden;
  margin: 30px auto;
}

.membership-banner__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.membership-banner__main-content {
  flex: 1 1 45%;
  min-width: 300px;
  text-align: center;
}

.membership-banner__title {
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  font-weight: bold;
  line-height: 1.2;

  .highlight {
    color: var(--color-secondary);
  }
}

#membership-banner_simple {
  padding-bottom: 40px;
}

.membership-banner__image-wrapper {
  img {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
  }
}

.membership-banner__benefits-cta {
  flex: 1 1 50%;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.membership-banner__benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px 0;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  line-height: 1.6;

  li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.link-more-info {
  color: #ffd700;
  text-decoration: underline;

  &:hover {
    color: #ffe566;
  }
}

.membership-banner__cta-button {
  padding: clamp(10px, 2vw, 15px) clamp(12px, 3vw, 20px);
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  font-weight: 900;
  text-transform: uppercase;
  background-color: var(--color-secondary) !important;
  /* Jaune vif */
  color: var(--color-primary) !important;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 8px 15px rgba(0, 0, 0, 0.2);
}

.membership-button {
  /* Règle CLÉ 1: Forcer l'élément à prendre toute la largeur disponible dans le Flex parent */
  flex: 1 1 100%;

  /* Règle CLÉ 2: Centrer le contenu inline (le bouton <a>) */
  text-align: center;

  /* Espacement (pour séparer le bouton du contenu au-dessus) */
  padding-bottom: 25px;
}

/* ============================================================
   🏁 OPTIMISATION RESPONSIVE FRONT-PAGE (MOBILE & TABLETTE)
   ============================================================ */

/* ------------------------------------------------------------
   TABLETTE & MOBILE (Max 1024px et en dessous)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

  /* Container global plus aéré */
  .site-main {
    padding: 20px 15px;
  }

  .container {
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   MOBILE STANDARD (Max 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* --- 1. HERO SLIDER (Format plus carré) --- */
  .slider_Manga_Reader,
  .home-hero-slider-section {
    /* On passe de 16/6 (trop fin) à 16/10 pour voir l'image */
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 220px;
    border-radius: 0;
  }

  /* Flèches plus discrètes */
  .slider_Manga_Reader .swiper-bt-prev,
  .slider_Manga_Reader .swiper-bt-next {
    width: 35px;
    height: 35px;
    font-size: 40px;
    background: rgba(0, 0, 0, 0.4);
  }

  /* --- 2. AVANTAGES (Grille 2x2) --- */
  .advantages-grid {
    /* 2 colonnes au lieu d'une liste verticale infinie */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .advantage-item {
    border: none !important;
    /* On retire les bordures latérales */
    /* background: #f9f9f9; On met un fond léger pour délimiter */
    border-radius: 8px;
    padding: 15px 5px !important;
  }

  .advantage-icon img {
    width: 45px;
    height: 45px;
    /* Icônes un peu réduites */
  }

  .advantage-title {
    font-size: 0.95rem;
    margin-bottom: 3px;
  }

  .advantage-description {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  /* --- 3. BANNIÈRES MEMBRES --- */
  .membership-banner {
    padding: 25px 15px;
    margin: 20px 0;
    background-position: center center;
  }

  .membership-banner__container {
    flex-direction: column;
    text-align: center;
  }

  .membership-banner__title {
    font-size: 1.6rem;
    /* Titre réduit */
    margin-bottom: 15px;
  }

  .membership-banner__image-wrapper img {
    max-width: 80%;
    /* Image plus grande sur mobile */
  }

  .membership-banner__benefits-list {
    text-align: left;
    /* Liste reste alignée à gauche pour lisibilité */
    display: inline-block;
    font-size: 0.95rem;
    padding-left: 0;
  }

  .membership-banner__cta-button {
    width: 100%;
    /* Bouton pleine largeur */
    display: block;
    box-sizing: border-box;
  }
}

.woocommerce-result-count {
  padding-top: 20px;
  font-weight: 700;
}

.woocommerce-ordering {
  padding-top: 20px;
}

/* Produit UNIQUE */

/* = Conteneur centralisé pour fiche produit (compact) */
.product-container {
  max-width: 80%;
  /* largeur compacte, centrée */
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.product-main-details {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.product-gallery-wrap {
  flex: 1 1 45%;
  position: relative;
}

.product-summary-wrap {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

/* === FIL D’ARIANE === */
.woocommerce-breadcrumb {
  font-size: 0.9rem;
  margin-bottom: 25px;
  color: #777;
}

.woocommerce-breadcrumb a {
  color: #555;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  text-decoration: underline;
}

/* === TITRE & RATING === */
.product_title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 5px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Force le titre produit en noir (écrase le style du blog) */
.single-product h1.product_title,
.single-product .entry-title {
  color: var(--color-primary) !important;
  /* Noir */
  text-shadow: none;
  /* Enlève d'éventuels effets de texte du blog */
}

/* Force aussi les titres des onglets et sections en noir */
.single-product h2,
.single-product h3 {
  color: var(--color-primary);
}

.woocommerce-product-rating .star-rating span:before {
  color: #f5b400;
  /* étoiles jaunes */
}

/* === SKU === */
.product-sku {
  font-size: 0.95rem;
  color: #666;
}

/* === PRIX === */
.product-price {
  font-size: 1.8rem;
  font-weight: 900;
  color: #222;
  margin-bottom: 10px;
}

.product-price del {
  color: #999;
  margin-right: 5px;
}

.product-price ins {
  color: #d32f2f;
  text-decoration: none;
}

/* === STOCK & PRÉCOMMANDE === */
.stock {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
}

.stock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.stock-green .stock-dot {
  background: #4caf50;
}

.stock-red .stock-dot {
  background: #d32f2f;
}

.stock-orange .stock-dot {
  background: #ff9800;
}

.preorder-box {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  border-radius: 8px;
  padding: 15px;
  font-size: 0.95rem;
  color: #795548;
  margin: 10px 0;
}

.preorder-box strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1rem;
}

.preorder-date {
  font-weight: 600;
  color: #333;
  margin-top: 5px;
}

/* === AJOUT AU PANIER === */
/* ========== 🛒 Ligne quantité + panier + favoris ========== */
.add-to-cart-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.quantity-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.quantity-wrapper input.qty {
  width: 55px;
  text-align: center;
  border: none;
  background: #fff;
  font-weight: 600;
  font-size: 15px;
}

.quantity-wrapper button.plus,
.quantity-wrapper button.minus {
  background: #f5f5f5;
  border: none;
  width: 35px;
  height: 35px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.2s ease;
}

.quantity-wrapper button.plus:hover,
.quantity-wrapper button.minus:hover {
  background: #eaeaea;
}

/* Bouton Ajouter au panier */
.add-to-cart-section .single_add_to_cart_button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 900 !important;
  background-color: var(--color-secondary) !important;
  /* Jaune vif */
  color: var(--color-primary) !important;
  /* Texte noir */
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 8px 15px rgba(0, 0, 0, 0.2) !important;
}

.add-to-cart-section .single_add_to_cart_button:hover {
  background-color: #000;
  color: #fff;
}

.add-to-cart-section .single_add_to_cart_button i {
  font-size: 16px;
}

/* Bouton favoris */
.wishlist-button {
  width: 44px;
  height: 44px;
  border: 2px solid #ffcb05;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wishlist-button i {
  color: #000;
  font-size: 18px;
}

.wishlist-button:hover {
  background-color: #ffcb05;
}

.wishlist-button:hover i {
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .add-to-cart-section {
    flex-direction: column;
    align-items: stretch;
  }

  .add-to-cart-section .single_add_to_cart_button {
    width: 100%;
  }

  .wishlist-button {
    width: 100%;
    height: 44px;
  }
}

/* === PAIEMENT SÉCURISÉ === */
/* .secure-payment {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 15px;
  background: #fafafa;
  font-size: 0.95rem;
}
.secure-payment i {
  color: #0073e6;
  margin-right: 6px;
} */

/* === RÉASSURANCE === */
.ecom-note-block {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.ecom-note-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ecom-note-icon img {
  width: 35px;
  height: auto;
}

.ecom-note-text {
  font-size: 0.95rem;
  color: #333;
}

/* === DESCRIPTION COURTE === */
.product-short-description {
  border-top: 1px solid #eee;
  padding-top: 15px;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* === CATÉGORIES & LICENCE === */
.product_meta,
.product-licence {
  font-size: 0.95rem;
  color: #555;
}

.product_meta a,
.product-licence a {
  color: #e63200;
  text-decoration: none;
}

.product_meta a:hover,
.product-licence a:hover {
  text-decoration: underline;
}

/* === PARTAGE RÉSEAUX SOCIAUX === */
.product-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.95rem;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #333;
  transition: all 0.2s;
}

.share-btn:hover {
  background: #0073e6;
  color: #fff;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .product-main-details {
    flex-direction: column;
  }

  .product-gallery-wrap,
  .product-summary-wrap {
    flex: 1 1 100%;
  }

  .add-to-cart-section {
    flex-direction: column;
    align-items: stretch;
  }

  .add-to-cart-section button.single_add_to_cart_button {
    width: 100%;
  }

  .ecom-note-block {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* ---------------------------- */
/* ONGLET PRODUIT (TABS)     */
/* ---------------------------- */

/* Conteneur global */
.woocommerce-tabs {
  margin-top: 40px;
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

/* Barre des onglets */
.woocommerce-tabs ul.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 40px;
  padding: 0;
  margin: 0 auto 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  /* ✅ défilement horizontal si manque de place */
  scrollbar-width: none;
  /* cache la barre sur Firefox */
}

.woocommerce-tabs ul.tabs::-webkit-scrollbar {
  display: none;
}

/* Onglet individuel */
.woocommerce-tabs ul.tabs li {
  position: relative;
  background: none;
  border: none;
  margin: 0;
  padding: 8px 0;
  flex: 0 0 auto;
  /* ✅ évite que les onglets se compressent trop */
}

/* Lien de l’onglet */
.woocommerce-tabs ul.tabs li a {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.3s ease;
  white-space: nowrap;
}

/* Survol */
.woocommerce-tabs ul.tabs li a:hover {
  color: red;
}

/* Onglet actif */
.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-primary);
}

/* Barre colorée sous l’onglet actif */
.woocommerce-tabs ul.tabs li.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 4px;
  background-color: var(--color-secondary);
  border-radius: 2px;
}

/* Supprime les triangles WooCommerce par défaut */
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

/* Contenu de l’onglet */
.woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 25px 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #222;
  max-width: 900px;
  margin: 0 auto;
}

/* ✅ Supprime les titres H2 des contenus d’onglets */
.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  display: none !important;
}

/* Texte et paragraphes */
.woocommerce-tabs .woocommerce-Tabs-panel p {
  margin-bottom: 1em;
  line-height: 1.7;
}

/* Listes */
.woocommerce-tabs .woocommerce-Tabs-panel ul {
  list-style: disc;
  margin-left: 20px;
  line-height: 1.6;
}

/* Responsive : conserve l’alignement horizontal */
@media (max-width: 768px) {
  .woocommerce-tabs ul.tabs {
    gap: 24px;
    justify-content: flex-start;
    /* pour éviter le centrage quand il y a scroll */
  }

  .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 15px 10px;
  }
}

/*
 * ----------------------------------------
 * E-commerce Notes Block (Livraison, Officiel, etc.)
 * ----------------------------------------
 */
.ecom-note-block {
  margin-top: 15px;
  /* Marge supérieure pour l'espacement */
  margin-bottom: 15px;
}

.ecom-note-item {
  /* Utilisation de Flexbox pour aligner l'icône et le texte */
  display: flex;
  align-items: center;
  /* **CRUCIAL : Centre les éléments verticalement** */
  margin-bottom: 8px;
  /* Espace entre les deux lignes */
}

.ecom-note-icon {
  /* Conteneur pour définir la taille exacte de l'icône et s'assurer qu'elle ne bouge pas */
  flex-shrink: 0;
  /* Empêche l'icône de rétrécir */
  width: 30px;
  /* Taille fixe pour le conteneur */
  height: 30px;
  /* Taille fixe */
  margin-right: 8px;
  /* Espace entre l'icône et le texte */
}

.ecom-note-icon img {
  /* L'image elle-même prend 100% de son conteneur pour la taille */
  display: block;
  width: 100%;
  height: auto;
}

.ecom-note-text {
  /* Style du texte */
  flex-grow: 1;
  /* Permet au texte de prendre l'espace restant */
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0;
  /* Réinitialise la marge par défaut des balises <p> */
}

/* Optionnel : style pour le texte mis en évidence */
.ecom-note-text strong {
  color: #000;
  /* Peut-être un noir plus prononcé pour attirer l'oeil */
}

/* Product meta */
.product_meta {
  margin-top: 18px;
  color: #666;
}

/* Share buttons */
.product-share {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-share span {
  font-weight: 700;
  margin-right: 8px;
}

.product-share a {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}

.product-share a:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
}

/* ======================================================
   SECTION PRODUITS LIÉS & VUS RÉCEMMENT
   ====================================================== */

/* 1. Le conteneur global */
.product-related-section {
  display: block;
  width: 100%;
  margin-top: 50px;
  clear: both;
}

/* 2. STYLE DES TITRES DE SECTION (H2)
   L'astuce est ici : on cible les h2 MAIS on exclut (:not) 
   ceux qui ont la classe des titres de produits */
.product-related-section h2:not(.woocommerce-loop-product__title) {
  display: inline-block;
  background: var(--color-secondary);
  /* Jaune */
  color: var(--color-primary);
  /* Noir */
  padding: 5px 15px;
  font-weight: 800;
  margin: 30px 0 30px 0;
  width: auto;
  font-size: 1.6rem;
  line-height: 1.2;
}

/* Sécurité : On s'assure que les titres produits restent normaux
   (Au cas où un style hérité traînerait) */
.product-related-section .woocommerce-loop-product__title {
  background: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  display: block !important;
  min-height: 3.6em;
  /* Garde l'alignement */
}

/* 3. FORCE LA GRILLE DE PRODUITS */
.product-related-section ul.products {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 4. STYLE DES CARTES PRODUITS (CORRECTION ESPACEMENT) */
.product-related-section ul.products li.product {
  /* Padding interne important pour décoller le bouton du bord */
  padding: 20px !important;
  box-sizing: border-box;

  /* Flexbox vertical pour tout aligner */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  /* Centre horizontalement le bouton */
  justify-content: space-between;

  /* Uniformité */
  height: auto;
  min-height: 400px;
  background: #fff;

  /* Annule le "Toute la largeur" */
  width: auto !important;
  min-width: 150px;
  /* Taille minimale harmonieuse */

  /* Style visuel */
  padding: 12px 15px;
  border-radius: 8px;
}

/* 6. Responsive Mobile */
@media (max-width: 768px) {
  .product-related-section h2:not(.woocommerce-loop-product__title) {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  .product-related-section ul.products li.product {
    width: 46%;
    /* 2 par ligne */
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  .product-related-section ul.products li.product {
    width: 100%;
    /* 1 par ligne */
  }
}

/* ======================================================
    GALERIE PRODUIT - VERSION FINALE GOOD GEEK
    ====================================================== */

/* --------- Suppression des doublons de loupe / zoom --------- */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger+.woocommerce-product-gallery__trigger {
  display: none !important;
}

.woocommerce-product-gallery .zoom-icon+.zoom-icon {
  display: none !important;
}

.header-zoom,
.search-zoom {
  display: none !important;
}

/* --------- Structure de base --------- */
.woocommerce-product-gallery {
  opacity: 1 !important; /* Prevent invisible images when JS is delayed */
  display: flex;
  flex-direction: column;
  /* miniatures sous l’image */
  align-items: center;
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
  gap: 12px;
  position: relative;
}

.woocommerce-product-gallery__wrapper {
  width: 100%;
  position: relative;
}

.woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: contain;
}

/* --------- Loupe de zoom WooCommerce --------- */
.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  text-decoration: none;
  color: #000;
  transition: background 0.15s ease, transform 0.12s ease;
}

.woocommerce-product-gallery .woocommerce-product-gallery__trigger:hover {
  background: #ffcb05;
  /* Jaune Good Geek */
  transform: scale(1.05);
}

/* --------- Miniatures --------- */
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  list-style: none;
  padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  width: 120px !important;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.3s ease;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border: 2px solid #ffcb05;
  transform: scale(1.05);
}

/* --------- Responsive --------- */
@media (max-width: 880px) {
  .product-main-details {
    flex-direction: column;
    gap: 20px;
  }

  .product-gallery-wrap,
  .product-summary-wrap {
    width: 100%;
    max-width: none;
  }

  .woocommerce-product-gallery .flex-control-thumbs li {
    width: 65px !important;
  }

  .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    top: 8px;
    right: 8px;
  }

  .product-container {
    padding: 12px;
  }

  .price {
    font-size: 1.6rem;
  }

  .product_title {
    font-size: 1.6rem;
  }

  .quantity input.qty {
    width: 48px;
    height: 34px;
  }

  .quantity .minus,
  .quantity .plus {
    width: 34px;
    height: 34px;
  }
}

/* --------- Accessibilité et z-index --------- */
.woocommerce-product-gallery__trigger {
  z-index: 30;
}

/* Supprime toute numérotation inutile sur les miniatures */
.flex-control-thumbs li a .count {
  display: none !important;
}

/* ------------------------------------
    STYLES GÉNÉRAUX DES PRODUITS WOOCOMMERCE (GRILLE)
------------------------------------ */

/* Grille générale */
.products {
  list-style: none;
  margin: 0 -15px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

/* ---------- CARD PRODUIT ---------- */
.products li.product {
  width: 23%;
  margin: 0 1% 30px;
  padding: 20px !important;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  /* Nécessaire pour positionner le badge */
  overflow: hidden;
}

.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image produit */
.products li.product .woocommerce-loop-product__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  overflow: hidden;
  margin-bottom: 15px;
  width: 100%;
}

.products li.product .woocommerce-loop-product__link img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Titre et texte produit */
.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.3;
  /* Hauteur de ligne importante pour le calcul */

  /* --- GESTION DES 3 LIGNES MAX + "..." --- */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* Limite à 3 lignes */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* On définit une hauteur max pour éviter les sauts de layout */
  /* 1.3em (line-height) * 3 lignes = 3.9em */
  max-height: 3.9em;
  min-height: 3.9em;
  /* Force l'alignement même si le titre est court */

  width: 100%;
}

/* Prix produit */
.products li.product .price {
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: var(--color-primary) !important;
  margin: 10px 0 15px;
  text-align: center;
  width: 100%;
}

.products li.product .price,
.products li.product .product-action-wrap {
  display: block !important;
  /* Force chaque élément à prendre sa propre ligne */
  width: 100%;
}

/* Bouton "Ajouter au panier" */
.products li.product .button {
  margin-top: auto;
  padding: 12px 15px;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  width: auto;
  min-width: 150px;
  font-weight: 900;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  align-self: center;
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4), 0 8px 15px rgba(0, 0, 0, 0.2);
  text-decoration: none !important;
}

.products li.product .button:hover {
  background-color: var(--color-primary);
  color: #fff !important;
}

/* ---------- Badge produit ---------- */
.products li.product .product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
}

/* Style du badge */
.products li.product .badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Couleurs selon statut produit */
.products li.product .badge-instock {
  background-color: #2ecc71;
  /* vert */
}

.badge-preorder {
  background: #ff8c00;
  /* orange */
  color: #fff;
}

.badge-secondemain {
  background: #1b703e;
  /* gris pour distinguer la seconde main */
  color: #fff;
}

.products li.product .badge-outofstock {
  background-color: #e74c3c;
  /* rouge */
}

.badge-subtext {
  font-size: 0.75rem;
  opacity: 0.9;
  text-transform: none;
  margin-top: 2px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 15px;
}

.products-accueil li.product .woocommerce-loop-product__link img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Cible le nouvel enveloppeur de bouton */
.products li.product .product-button-wrap {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}

/* S'assurer que le prix est un bloc */
.products li.product .price {
  display: block !important;
  margin-bottom: 10px;
}

/* S'assurer que le bouton d'action lui-même est centré */
.products li.product .button {
  align-self: center;
  margin-top: 0 !important;
}

.products-accueil li.product .button:hover {
  background-color: var(--color-primary);
  color: var(--color-background) !important;
}

/* Responsive cohérent */
@media (max-width: 992px) {
  .products-accueil li.product {
    width: 30%;
  }
}

@media (max-width: 768px) {
  .products-accueil li.product {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .products-accueil li.product {
    width: 90%;
    margin: 0 auto 20px;
  }
}

/* ---------- RESPONSIVE ---------- */
@media only screen and (max-width: 1200px) {
  .products li.product {
    width: 30%;
  }
}

@media only screen and (max-width: 768px) {
  .products {
    margin: 0;
    /* retire le négatif pour éviter les bords collés */
    justify-content: space-evenly;
    /* espace fluide entre les cards */
  }

  .products li.product {
    width: 45%;
    /* 2 produits par ligne */
    margin-bottom: 25px;
  }

  .products li.product .woocommerce-loop-product__link {
    height: auto;
  }
}

@media only screen and (max-width: 480px) {
  .products {
    justify-content: center;
  }

  .products li.product {
    width: 90% !important;
    /* 1 produit par ligne */
    margin: 0 auto 25px;
  }
}

/* TAXONOMIES */

/* =======================================================
    AGENCEMENT FOOTER SEO : Texte en Float autour de l'Image
    (CORRIGÉ pour éliminer l'espace blanc)
    ======================================================= */

.archive-header-banner-wrapper img {
  width: 100%;
}

.archive-content-footer--seo-image {
  /* Styles généraux inchangés */
  overflow: hidden;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0;
  margin-top: 20px;
  border-top: 1px solid #eee;
}

/* 1. Image Flottante (inchangé) */
.archive-content-footer--seo-image .seo-image-wrapper {
  float: right;
  margin: 0 0 20px 40px;
  width: 350px;
  max-width: 35%;
}

.archive-content-footer--seo-image .seo-image-illustration {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* 2. CORRECTION CLÉ : Forcer les titres à ne pas être bloqués par le float */

/* Nous ciblons tous les éléments de bloc qui suivent le float (H2, H3, P) */
.archive-content-footer--seo-image>p,
.archive-content-footer--seo-image>h2,
.archive-content-footer--seo-image>h3 {
  /* Le 'clear: both;' est la raison pour laquelle le titre passait en dessous.
        Nous devons le retirer et utiliser l'overflow pour gérer le texte. */
  clear: none !important;
  /* Annule tout effet de "clear" */

  /* Le texte s'enroule naturellement, nous devons juste assurer qu'il soit un bloc */
  display: block;
}

/* Règle spécifique pour le premier bloc d'introduction (qui est le plus long) */
.archive-content-footer--seo-image>p:first-of-type {
  /* On donne une marge à droite plus grande pour un meilleur habillage */
  margin-right: 40px;
}

/* =========================================
   FOOTER STYLES - GOOD GEEK THEME
   ========================================= */

/* Variables CSS locales pour maintenance facile */
:root {
  --color-bg-black: #000000;
  --color-bg-dark: #111111;
  --color-bg-darker: #0a0a0a;
  --color-text-white: #ffffff;
  --color-text-grey: #b3b3b3;
  --color-accent: #ffffff;
  /* Ou une couleur geek/pop si besoin */
  --font-main: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container-width: 1200px;
}

.site-footer {
  font-family: var(--font-main);
  color: var(--color-text-grey);
  font-size: 15px;
  line-height: 1.6;
}

.site-footer a {
  color: var(--color-text-white);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer a:hover {
  color: var(--color-text-grey);
  text-decoration: underline;
}

/* Container commun */
.site-footer .container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* -----------------------------------------
   SECTION 1: NEWSLETTER (FOND NOIR)
   ----------------------------------------- */
.footer-newsletter-section {
  background-color: var(--color-bg-black);

  border-top: 1px solid #222;
}

.newsletter-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

/* Logo & Socials */
.footer-brand {
  flex: 1;
  min-width: 250px;
}

.footer-logo img {
  display: block;
  max-width: 180px;
  height: auto;
  padding-top: 20px;
}

.footer-socials {
  display: flex;
  gap: 15px;
  padding: 20px 0;
  justify-content: space-between;
}

.footer-socials a {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-secondary);
}

.footer-socials a:hover {
  color: var(--color-text-white);
  text-decoration: none;
}

/* Formulaire Newsletter */
.footer-subscribe {
  flex: 1.5;
  min-width: 300px;
  text-align: right;
  /* Aligner vers la droite comme sur la maquette */
}

/* Sur mobile, on remet à gauche */
@media (max-width: 768px) {
  .footer-subscribe {
    text-align: left;
  }
}

.footer-subscribe h3 {
  color: var(--color-secondary);
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.footer-subscribe p {
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* Style du formulaire */
.newsletter-form .input-group {
  display: flex;
  gap: 0;
  /* Les éléments sont collés */
  justify-content: flex-end;
  /* Aligné droite */
}

@media (max-width: 768px) {
  .newsletter-form .input-group {
    justify-content: flex-start;
  }
}

.newsletter-form input[type="email"] {
  padding: 12px 15px;
  border: 1px solid #333;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 14px;
  min-width: 250px;
  outline: none;
}

.newsletter-form input[type="email"]:focus {
  border-color: #555;
}

.newsletter-form button.btn-newsletter {
  padding: 12px 25px;
  background-color: var(--color-text-white);
  color: var(--color-bg-black);
  border: 1px solid var(--color-text-white);
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button.btn-newsletter:hover {
  background-color: transparent;
  color: var(--color-text-white);
}

.privacy-check {
  margin-top: 10px;
  font-size: 0.8rem;
  color: #666;
  display: flex;
  justify-content: flex-end;
  /* Aligné droite */
  align-items: center;
}

@media (max-width: 768px) {
  .privacy-check {
    justify-content: flex-start;
  }
}

.privacy-check input {
  margin-right: 8px;
}

/* -----------------------------------------
   SECTION 2: WIDGETS (FOND GRIS FONCÉ)
   ----------------------------------------- */
.footer-widgets-section {
  background-color: var(--color-bg-black);
  padding: 60px 0;
  border-top: 1px solid #222;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  /* La col 1 est plus large */
  gap: 30px;
}

.widget-title {
  color: var(--color-text-white);
  font-size: 1.1rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-left: 3px solid var(--color-secondary);
  padding-left: 10px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

/* Colonne Contact spécifique */
.footer-contact .contact-item {
  display: block;
  margin-bottom: 15px;
  color: var(--color-text-grey);
}

.footer-contact strong {
  color: var(--color-text-white);
  display: block;
  /* Met le label au dessus */
  font-size: 0.9rem;
}

/* -----------------------------------------
   SECTION 3: COPYRIGHT
   ----------------------------------------- */
.footer-copyright {
  background-color: var(--color-secondary);
  padding: 20px 0;
  font-size: 0.85rem;
  color: black;
  text-align: left;
  border-top: 1px solid #222;

  margin-bottom: 0 !important;
  /* Force le collage au bas */
}

/* Configuration Standard Sticky Footer */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  /* Fond blanc, propre */
  overflow-x: hidden;
}



/* -----------------------------------------
   RESPONSIVE MOBILE
   ----------------------------------------- */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    /* 2 colonnes sur tablette */
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    /* 1 colonne sur mobile */
  }

  .newsletter-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-subscribe {
    width: 100%;
  }

  .newsletter-form input[type="email"] {
    width: 100%;
    min-width: auto;
  }
}

/* =======================================================
    Styles pour les pages d'annuaire (A-Z)
   (Licences, Fabricants, etc.)
    ======================================================= */

/* 1. Navigation A-Z (Boutons) */
/* Cible la classe générique .az-nav */
.az-nav {
  text-align: center;
  margin: 30px 0;
  padding: 10px 0;
}

/* .az-button est déjà générique, rien à changer */
.az-button {
  display: inline-block;
  padding: 8px 12px;
  margin: 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
  transition: all 0.2s ease;
}

.az-button.active {
  background-color: #f0f0f0;
}

.az-button.active:hover {
  background-color: #e0e0e0;
  border-color: #aaa;
}

.az-button.disabled {
  background-color: #f9f9f9;
  color: #aaa;
  cursor: not-allowed;
  border-style: dashed;
}

/* 2. Groupement des Termes */
/* Cible la classe générique .az-group */
.az-group {
  margin-bottom: 50px;
}

/* Cible la classe générique .az-group-title */
.az-group-title {
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* 3. Grille des Vignettes */
/* Cible la classe générique .az-grid */
.az-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 20px;
  /* Espace entre les lignes et les colonnes */
  justify-content: flex-start;
  /* Aligner les éléments à gauche */
}

/* Cible la classe générique .az-vignette */
.az-vignette {
  /* Définit la taille des vignettes (ex: 5 vignettes par ligne) */
  flex: 0 0 calc(20% - 16px);
  /* 20% moins l'espace de la gouttière */
  display: block;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.az-vignette:hover {
  transform: translateY(-5px);
  /* Petit effet de soulèvement */
}

.az-vignette-image-wrapper {
  height: 150px;
  /* Hauteur fixe pour l'image (ajuster si besoin) */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.az-vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* L'image s'ajuste sans être coupée */
}

.az-vignette-title {
  font-size: 1em;
  font-weight: bold;
  color: #e74c3c;
  /* Couleur rouge pour le titre */
  margin: 5px 0 3px 0;
}

.az-vignette-count {
  font-size: 0.8em;
  color: #666;
  margin: 0;
}

/* Responsivité (3 colonnes sur tablette, 2 sur mobile) */
@media (max-width: 1200px) {
  .az-vignette {
    flex: 0 0 calc(25% - 15px);
    /* 4 vignettes par ligne */
  }
}

@media (max-width: 768px) {
  .az-vignette {
    flex: 0 0 calc(33.333% - 13px);
    /* 3 vignettes par ligne */
  }
}

@media (max-width: 550px) {
  .az-vignette {
    flex: 0 0 calc(50% - 10px);
    /* 2 vignettes par ligne */
  }
}

/* =======================================================
   STYLE "DARK MODE" FULL WIDTH POUR BLOC SEO (FINAL V2)
   Cible le bloc DANS le conteneur et le force en full-width
   ======================================================= */

/* 1. La bande noire FULL-WIDTH (Conteneur externe) */
.archive-content-footer--seo-image {
  background-color: var(--color-primary);
  /* Fond noir */
  color: #ffffff;
  /* Texte blanc par défaut */

  /* Force la sortie du conteneur parent */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* Espacement */
  margin-top: 50px;
  /* Espace au-dessus */
  margin-bottom: -50px;
  /* Colle au footer (compense le padding du .site-main) */
  padding: 40px 0;
  /* Padding vertical, horizontal géré par l'enfant */

  /* Nettoyage */
  border-top: none;
  border-radius: 0;
  max-width: 100vw;
  /* Assure de ne pas dépasser */
  box-sizing: border-box;
  /* Important pour la gestion de la largeur */
}

/* 2. Le conteneur INTERNE (qui centre le contenu) */
.archive-content-footer__inner-container {
  max-width: 1200px;
  /* Largeur max de votre site */
  margin: 0 auto;
  /* Centre ce conteneur */
  padding: 0 20px;
  /* Empêche de coller aux bords sur mobile */
  overflow: hidden;
  /* Contient les floats */
  box-sizing: border-box;
}

/* 3. L'image flottante (style de votre mockup) */
.archive-content-footer--seo-image .seo-image-wrapper {
  float: right;
  margin: 0 0 20px 40px;
  width: 350px;
  max-width: 35%;
  background: #fff;
  /* Fond blanc pour images transparentes */
  border-radius: 8px;
  overflow: hidden;
  /* Assure que l'image respecte le radius */
}

.archive-content-footer--seo-image .seo-image-wrapper img {
  display: block;
  /* Empêche les espaces sous l'image */
  width: 100%;
}

/* 4. Le contenu texte (qui wrappe) */
.archive-content-footer--seo-image .seo-content-wrapper {
  /* Le texte s'adapte naturellement au float */
}

/* 5. Titres et Liens DANS le bloc */
.archive-content-footer--seo-image h2,
.archive-content-footer--seo-image h3 {
  color: var(--color-secondary);
  /* Jaune */
  margin-top: 0;
}

.archive-content-footer--seo-image a {
  color: var(--color-secondary);
  /* Jaune */
  text-decoration: underline;
}

.archive-content-footer--seo-image a:hover {
  color: #ffffff;
}

/* 6. Responsive pour l'image flottante */
@media (max-width: 768px) {

  /* Sur mobile, on annule le float */
  .archive-content-footer--seo-image .seo-image-wrapper {
    float: none;
    margin: 0 auto 25px;
    /* Centre l'image */
    width: 100%;
    max-width: 400px;
    /* Limite la taille de l'image */
  }
}

/* Page.php */

/* =========================================
   Style spécifique pour les pages standards
   (Mentions légales, CGV, etc.)
   ========================================= */

/* Conteneur principal : Centre et limite la largeur */
.page-container {
  max-width: 1400px;
  /* Largeur max confortable pour la lecture sur grand écran */
  margin: 0 auto;
  /* Centre le bloc horizontalement */
  padding: 60px 20px;
  /* 60px haut/bas pour aérer, 20px gauche/droite pour mobile */
  background-color: #fff;
  /* Optionnel : fond blanc si ton site est gris */
}

/* Titre de la page (H1) */
.page-container .entry-header .entry-title {
  font-size: 2.5rem;
  /* H1 bien visible */
  margin-bottom: 40px;
  /* Espace sous le titre */
  text-align: left;
  /* Ou center, selon ton goût */
  color: #222;
  /* Couleur sombre pour le contraste */
  line-height: 1.2;
  border-bottom: 2px solid #eee;
  /* Petit soulignement esthétique */
  padding-bottom: 20px;
}

/* Contenu texte (Mentions légales, etc.) */
.page-container .entry-content {
  font-size: 1.1rem;
  /* Texte légèrement plus grand pour le confort */
  line-height: 1.8;
  /* Interligne aéré pour éviter l'effet "pâté" */
  color: #444;
}

/* Espacement entre les paragraphes pour la clarté */
.page-container .entry-content p {
  margin-bottom: 1.5rem;
}

/* Titres H2, H3 dans le contenu */
.page-container .entry-content h2,
.page-container .entry-content h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #111;
}

/* RESPONSIVE : Adaptation pour mobile */
@media (max-width: 768px) {
  .page-container {
    padding: 40px 15px;
    /* Réduit le padding sur petits écrans */
  }

  .page-container .entry-header .entry-title {
    font-size: 2rem;
  }
}

/* =========================================
   SINGLE POST BLOG STYLES
   ========================================= */

:root {
  --post-bg: #111111;
  --post-text: #e0e0e0;
  --post-accent: #ffff00;
  /* Jaune Néon */
}

.single-post-container {
  background-color: var(--color-bg-black);
  /* Fond global noir */
  color: var(--post-text);
  padding-bottom: 60px;
}

/* --- HEADER --- */
.entry-header {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumbs {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.breadcrumbs a {
  color: #888;
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--post-accent);
}

.breadcrumbs .current {
  color: var(--post-accent);
}

.entry-title {
  font-size: 3rem;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
}

.entry-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #333;
  padding-bottom: 20px;
  margin-bottom: 30px;
  font-size: 0.9rem;
  color: #aaa;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-item.author img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  border: 1px solid var(--post-accent);
}

.meta-item .dashicons {
  color: var(--post-accent);
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  /* Légèrement arrondi style tech */
  margin-bottom: 40px;
}

/* --- LAYOUT GRID (2/3 - 1/3) --- */
.entry-content-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* 2/3 Contenu, 1/3 Sidebar */
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* --- COLONNE GAUCHE (CONTENU) --- */
.entry-content-col {
  font-size: 1.1rem;
  line-height: 1.8;
}

.entry-content-col h2 {
  font-size: 2rem;
  color: #fff;
  margin-top: 40px;
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 4px solid var(--post-accent);
  /* Ligne jaune à gauche */
}

.entry-content-col h3 {
  font-size: 1.5rem;
  color: #fff;
  margin-top: 30px;
}

.entry-content-col p {
  margin-bottom: 20px;
}

.entry-content-col a {
  color: var(--post-accent);
  text-decoration: underline;
}

/* --- COLONNE DROITE (SIDEBAR STICKY) --- */
.entry-sidebar-col {
  position: relative;
}

.sticky-sidebar-inner {
  position: sticky;
  top: 40px;
  /* Reste collé à 40px du haut lors du scroll */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.sidebar-widget {
  background-color: #161616;
  padding: 25px;
  border: 1px solid #333;
  border-radius: 8px;
}

.sidebar-widget .widget-title {
  font-size: 1.1rem;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 2px solid var(--post-accent);
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: inline-block;
}

/* Widget Sommaire (TOC) */
#toc-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#toc-container li {
  margin-bottom: 10px;
}

#toc-container li.h2 {
  font-weight: bold;
}

#toc-container li.h3 {
  margin-left: 15px;
  font-size: 0.9em;
  opacity: 0.8;
}

#toc-container a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.2s;
}

#toc-container a:hover {
  color: var(--post-accent);
  padding-left: 5px;
  /* Petit effet de mouvement */
}

/* Widget Auteur */
.author-box-inner {
  text-align: center;
}

.author-box-inner img {
  border-radius: 50%;
  border: 2px solid var(--post-accent);
  margin-bottom: 15px;
}

.author-box-inner h5 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.author-box-inner p {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 15px;
}

.author-link {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: bold;
  color: var(--post-accent);
}

/* Widget Partage */
.share-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  /* Centré dans la sidebar */
}

.share-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
  border: 1px solid #444;
  color: #fff;
  border-radius: 4px;
  transition: all 0.3s;
}

.share-btn:hover {
  background: var(--post-accent);
  color: #000;
  border-color: var(--post-accent);
}

/* Widget Newsletter Mini */
.newsletter-widget-mini {
  text-align: center;
  background: #000;
  /* Plus noir pour ressortir */
  border: 1px dashed var(--post-accent);
}

.btn-newsletter-mini {
  background: var(--post-accent);
  color: #000;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  width: 100%;
  text-transform: uppercase;
}

/* --- RESPONSIVE --- */
@media (max-width: 992px) {
  .entry-content-wrapper {
    grid-template-columns: 1fr;
    /* 1 seule colonne */
  }

  .entry-sidebar-col {
    order: 2;
    /* Passe en dessous sur mobile */
  }

  .entry-title {
    font-size: 2rem;
  }
}

/* =========================================
   BAS D'ARTICLE : AUTEUR & ARTICLES CONNEXES
   ========================================= */

/* --- 1. BOX AUTEUR --- */
.author-bio-section {
  background-color: #161616;
  /* Fond gris foncé */
  border: 1px solid #333;
  border-radius: 12px;
  padding: 30px;
  margin-top: 60px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.author-avatar-large img {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 3px solid var(--post-accent);
  /* Cercle jaune */
  display: block;
}

.author-info-text {
  flex: 1;
  /* Prend l'espace restant */
}

.author-info-text h3.author-name {
  color: #fff;
  font-size: 1.4rem;
  margin-bottom: 10px;
  margin-top: 0;
}

.author-desc {
  color: #aaa;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Box Auteur */
@media (max-width: 600px) {
  .author-bio-section {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
}

/* --- 2. HEADER SECTION CONNEXE & POINT JAUNE --- */
.related-posts-section {
  margin-top: 40px;
  border-top: 1px solid #222;
  padding-top: 40px;
}

.related-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.related-header h3 {
  font-size: 1.3rem;
  color: #fff;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Le Point Jaune Lumineux */
.blue-dot {
  width: 12px;
  height: 12px;
  background-color: var(--post-accent);
  /* Jaune Néon */
  border-radius: 50%;
  display: inline-block;
  margin-right: 12px;
  /* Espace avec le texte */
  box-shadow: 0 0 8px var(--post-accent), 0 0 15px rgba(255, 255, 0, 0.4);
}

/* Flèches de navigation */
.related-arrows {
  display: flex;
  gap: 10px;
}

.arrow-btn {
  background: #161616;
  border: 1px solid #333;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.arrow-btn:hover {
  background: var(--post-accent);
  color: #000;
  border-color: var(--post-accent);
}

.arrow-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  background: #111;
  color: #555;
  border-color: #222;
}

/* --- 3. SLIDER CAROUSEL --- */
.related-slider-viewport {
  width: 100%;
  overflow: hidden;
  /* Masque ce qui dépasse */
  position: relative;
}

.related-slider-track {
  display: flex;
  gap: 30px;
  /* Espace entre les cartes */
  transition: transform 0.4s ease-out;
  /* Glissement fluide */
  width: 100%;
}

.related-card {
  /* Force l'affichage sur 2 colonnes exactement */
  flex: 0 0 calc(50% - 15px);
  max-width: calc(50% - 15px);

  background-color: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.related-card:hover {
  border-color: var(--post-accent);
}

.related-thumb-link {
  display: block;
  height: 200px;
  overflow: hidden;
}

.related-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-card:hover .related-thumb-link img {
  transform: scale(1.05);
}

.related-content {
  padding: 20px;
}

.related-meta-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.cat-badge {
  border: 1px solid var(--post-accent);
  color: var(--post-accent);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.related-date {
  color: #777;
}

.related-title {
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.related-title a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;
}

.related-title a:hover {
  color: var(--post-accent);
}

.related-excerpt {
  font-size: 0.9rem;
  color: #aaa;
  margin: 10px 0;
  line-height: 1.5;
}

.related-author-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #888;
  border-top: 1px solid #2a2a2a;
  padding-top: 15px;
  margin-top: 15px;
}

.related-author-mini img {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.related-author-mini strong {
  color: #fff;
}

/* Responsive Mobile : 1 carte visible */
@media (max-width: 768px) {
  .related-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================================
   PAGE BLOG HOME (home.php)
   ========================================= */
/* =========================================
   1. CONFIGURATION GLOBALE & VARIABLES
   ========================================= */
:root {
  /* Palette des Catégories */
  --col-guides: #2980b9;
  /* Bleu */
  --col-actu: #e67e22;
  /* Orange */
  --col-food: #27ae60;
  /* Vert */
  --col-media: #8e44ad;
  /* Violet */

  /* Rappel variables thème */
  --post-accent: #ffff00;
  /* Jaune Néon */
}

.site-main .dark-mode-content {
  background-color: #000;
}

/* --- HEADER DU BLOG --- */
.blog-header {
  text-align: center;
  padding: 60px 0 40px;
}

.blog-header .page-title {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 10px;
}

.highlight {
  color: var(--post-accent);
}

.blog-subtitle {
  font-size: 1.1rem;
  color: #aaa;
}

/* =========================================
   2. NAVIGATION CATÉGORIES (Haut de page)
   ========================================= */

.blog-categories-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4 colonnes Desktop */
  gap: 20px;
  margin-bottom: 60px;
}

/* --- LA TUILE COLORÉE --- */
.cat-nav-card {
  background-color: #161616;
  border: 1px solid #333;
  border-radius: 12px;
  /* Padding généreux pour aérer */
  padding: 40px 20px 30px 20px;

  text-decoration: none;
  transition: all 0.3s ease;

  /* Flexbox vertical centré */
  display: flex;
  flex-direction: column;
  align-items: center;

  min-height: 320px;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

/* Couleurs spécifiques */
.cat-nav-card.style-guides {
  background-color: var(--col-guides);
  border-color: var(--col-guides);
}

.cat-nav-card.style-actu {
  background-color: var(--col-actu);
  border-color: var(--col-actu);
}

.cat-nav-card.style-food {
  background-color: var(--col-food);
  border-color: var(--col-food);
}

.cat-nav-card.style-media {
  background-color: var(--col-media);
  border-color: var(--col-media);
}

/* Survol */
.cat-nav-card:hover {
  transform: translateY(-5px);
  filter: brightness(1.1);
}

/* --- ICÔNE --- */
.cat-icon {
  font-size: 32px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  flex-shrink: 0;
}

/* --- TEXTE --- */
.cat-info {
  width: 100%;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cat-nav-card h3 {
  font-size: 1.2rem;
  color: #fff;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1.2;
}

.cat-nav-card p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
}

/* --- BOUTON "VOIR LES ARTICLES" --- */
.btn-cat-view {
  margin-top: auto;
  /* Continue de pousser le bouton vers le bas de la carte */

  background: rgba(0, 0, 0, 0.25);
  color: #fff;

  /* Padding interne du bouton pour que le texte respire */
  padding: 14px 0;

  width: 100%;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 6px;
  transition: background 0.3s;
  display: block;
  text-align: center;
}

.cat-nav-card:hover .btn-cat-view {
  background: rgba(0, 0, 0, 0.5);
}

/* =========================================
   3. CARTES ARTICLES (Bas de page & Single)
   ========================================= */
/* C'est ce bloc qui manquait et qui répare tes articles du bas */

.blog-feed {
  margin-bottom: 80px;
}

.feed-title {
  color: #fff;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Style de la carte (Commun à Single et Home) */
.related-card {
  background-color: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Spécifique grille blog (override le flex du slider) */
.blog-card {
  width: 100%;
  flex: none;
  max-width: none;
}

.related-card:hover {
  transform: translateY(-5px);
  border-color: var(--post-accent);
}

.related-thumb-link {
  display: block;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.related-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.related-card:hover .related-thumb-link img {
  transform: scale(1.05);
}

.related-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.related-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.8rem;
}

/* Badges colorés */
.cat-badge {
  border: 1px solid #555;
  color: #aaa;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: bold;
}

.cat-badge.term-guides-conseils {
  color: var(--col-guides);
  border-color: var(--col-guides);
}

.cat-badge.term-actu-pop-culture {
  color: var(--col-actu);
  border-color: var(--col-actu);
}

.cat-badge.term-food-deco-geek {
  color: var(--col-food);
  border-color: var(--col-food);
}

.cat-badge.term-communaute-media {
  color: var(--col-media);
  border-color: var(--col-media);
}

.related-date {
  color: #777;
}

.related-title {
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.related-title a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;
}

.related-title a:hover {
  color: var(--post-accent);
}

.related-excerpt {
  font-size: 0.9rem;
  color: #aaa;
  margin-bottom: 15px;
  line-height: 1.5;
  flex: 1;
  /* Pousse l'auteur vers le bas */
}

.related-author-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #888;
  border-top: 1px solid #2a2a2a;
  padding-top: 15px;
  margin-top: auto;
  /* Aligné en bas */
}

.related-author-mini img {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.related-author-mini strong {
  color: #fff;
}

/* Pagination */
.blog-pagination {
  margin-top: 50px;
  text-align: center;
}

.nav-links .page-numbers {
  background: #161616;
  color: #fff;
  padding: 10px 15px;
  border: 1px solid #333;
  text-decoration: none;
  margin: 0 5px;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  background: var(--post-accent);
  color: #000;
  border-color: var(--post-accent);
}

/* =========================================
   4. RESPONSIVE (Tablette & Mobile)
   ========================================= */
@media (max-width: 992px) {

  /* Nav Catégories : 2 colonnes */
  .blog-categories-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 40px;
  }

  .cat-nav-card {
    padding: 30px 15px 20px 15px;
    min-height: 260px;
  }

  .cat-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-bottom: 15px;
  }

  .cat-nav-card h3 {
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .cat-nav-card p {
    font-size: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .btn-cat-view {
    padding: 10px 0;
    font-size: 0.75rem;
  }

  /* Flux Articles : 1 colonne */
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .blog-header .page-title {
    font-size: 2rem;
  }
}

/* Hide the small AJAX "Voir le panier" / "View cart" link appended by WooCommerce when products are added via AJAX.
   We keep this hidden because Merchant provides its own wishlist/cart UI next to the product.
*/
.added_to_cart {
  display: none !important;
}

/* Merchant & quantity small improvements */
.add-to-cart-section {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.quantity-wrapper {
  display: flex;
  align-items: center;
}

.quantity-wrapper input.qty {
  width: 56px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}

.quantity-wrapper button.plus,
.quantity-wrapper button.minus {
  background: #fff;
  border: 1px solid #e6e6e6;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
}

.quantity-wrapper button.plus:hover,
.quantity-wrapper button.minus:hover {
  background: #f6f6f6;
}

.merchant-wishlist-wrapper {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.merchant-wishlist-wrapper .merchant-wishlist-button,
.merchant-wishlist-wrapper .merchant-wishlist {
  margin-left: 8px;
}

/* Layout: mettre quantité + bouton + wishlist sur une seule ligne et occuper toute la largeur */
.add-to-cart-section {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.add-to-cart-section .cart {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

/* Quantity control : un ensemble compact et accessible */
.quantity-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e9e9e9;
  padding: 4px;
  border-radius: 8px;
}

.quantity button.minus,
.quantity button.plus,
.quantity-wrapper button.minus,
.quantity-wrapper button.plus {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  color: #222;
  font-size: 18px;
  cursor: pointer;
}

.quantity button.minus:hover,
.quantity button.plus:hover,
.quantity-wrapper button.minus:hover,
.quantity-wrapper button.plus:hover {
  background: #f3f3f3;
}

.quantity-wrapper input.qty {
  width: 56px;
  height: 36px;
  text-align: center;
  border: none;
  background: transparent;
  font-weight: 600;
}

.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button,
.quantity-wrapper input.qty::-webkit-outer-spin-button,
.quantity-wrapper input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input.qty,
.quantity-wrapper input.qty {
  -moz-appearance: textfield;
}

.quantity button.minus:focus,
.quantity button.plus:focus,
.quantity-wrapper button.minus:focus,
.quantity-wrapper button.plus:focus {
  outline: none;
  box-shadow: none;
}

/* CTA occupy remaining space to make the whole line look like a single control */
.single_add_to_cart_button {
  flex: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 8px;
}

/* Merchant wishlist stays to the right of the CTA */
.merchant-wishlist-wrapper {
  display: flex;
  align-items: center;
}

/* Responsive: on small screens, stack vertically for usability */
@media (max-width: 680px) {
  .add-to-cart-section {
    flex-direction: column;
    align-items: stretch;
  }

  .add-to-cart-section .cart {
    flex-direction: row;
    width: 100%;
  }

  .single_add_to_cart_button {
    width: 100%;
    flex: none;
  }
}

/* PLUGIN MERCHANT */

/* =========================================
   WISHLIST STYLE "IMAGE 2" (HOME)
   ========================================= */

/* 1. Sécurité Positionnement */
.home .product,
.home ul.products li.product {
  position: relative !important;
  overflow: visible !important;
  z-index: 1;
}

/* 2. Le Bouton (Invisible, sert juste de zone de clic) */
.home .merchant-wishlist-button {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 20 !important;

  background: transparent !important;
  /* Pas de fond blanc */
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;

  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 3. L'Icône (Le dessin du cœur) */
.home .merchant-wishlist-button svg {
  width: 22px !important;
  height: 22px !important;

  /* Contour NOIR, Intérieur VIDE */
  stroke: #000000 !important;
  fill: transparent !important;
  stroke-width: 1.5px !important;

  transition: transform 0.2s;
}

/* 4. État ACTIF (Déjà dans la liste) */
.home .merchant-wishlist-button.active svg {
  fill: #ffc107 !important;
  /* Intérieur JAUNE */
  stroke: #ffc107 !important;
  /* Contour JAUNE */
}

/* 5. Survol */
.home .merchant-wishlist-button:hover svg {
  transform: scale(1.2);
}

/* Animation de chargement native du plugin */
.merchantAnimRotate {
  animation: merchantRotate 2s infinite linear;
  stroke: #ffc107 !important;
  /* Devient jaune pendant le chargement */
}

@keyframes merchantRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

/* Fiche mon compte woocommerce */
/* =========================================
   RPG DASHBOARD (Fiche Personnage)
   ========================================= */

/* Conteneur Global */
.rpg-dashboard-container {
  background-color: #1a1a1a;
  /* Gris très sombre */
  border: 1px solid #333;
  border-radius: 8px;
  padding: 30px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  /* Ou ta police Geek */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* --- EN-TÊTE --- */
.rpg-char-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #333;
}

/* Avatar Hexagonal / Rond */
.rpg-avatar-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

.rpg-avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #ffc107;
  /* Jaune Good Geek */
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
  /* Lueur jaune */
  overflow: hidden;
}

.rpg-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Petit bouton edit photo */
.rpg-edit-avatar {
  position: absolute;
  bottom: 0;
  right: 5px;
  background: #ffc107;
  color: #000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.2s;
}

.rpg-edit-avatar:hover {
  transform: scale(1.1);
}

/* Infos Texte */
.rpg-username {
  font-size: 28px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rpg-rank-badge {
  color: #aaa;
  font-size: 14px;
  margin-bottom: 15px;
}

/* Le shortcode GamiPress */
.gamipress-user-rank {
  color: #ffc107;
  font-weight: bold;
  display: inline-block;
}

/* Barre d'XP */
.rpg-xp-container {
  max-width: 300px;
}

.rpg-xp-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  margin-bottom: 5px;
}

.rpg-xp-bar-bg {
  width: 100%;
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
}

.rpg-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffc107, #ffdb73);
  border-radius: 4px;
}

/* --- STATS GRID (HUD) --- */
.rpg-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.rpg-stat-card {
  background: #252525;
  padding: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-left: 3px solid #ffc107;
  transition: transform 0.2s;
}

.rpg-stat-card:hover {
  transform: translateY(-5px);
  background: #2a2a2a;
}

.rpg-stat-icon {
  font-size: 24px;
  color: #666;
}

.rpg-stat-content {
  display: flex;
  flex-direction: column;
}

.rpg-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  color: #888;
  letter-spacing: 0.5px;
}

.rpg-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.text-yellow {
  color: #ffc107;
}

/* --- BADGES / SUCCÈS --- */
.rpg-achievements-section {
  background: #252525;
  padding: 25px;
  border-radius: 6px;
  margin-bottom: 30px;
}

.rpg-section-title {
  color: #ffc107;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 18px;
}

/* Grille des badges GamiPress */
.gamipress-achievements {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.gamipress-achievement {
  background: transparent !important;
  border: none !important;
  text-align: center;
}

.gamipress-achievement-image img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* Rond */
  background: #1a1a1a;
  padding: 5px;
  border: 1px solid #444;
}

/* Badges Verrouillés (Grisés) */
.rpg-badges-locked .gamipress-achievement-image img {
  filter: grayscale(100%) opacity(0.4);
  border-color: #333;
}

.rpg-next-objectives h4 {
  color: #666;
  font-size: 14px;
  margin: 20px 0 10px;
}

/* --- FOOTER BUTTON --- */
.rpg-button-action {
  display: inline-block;
  background: #ffc107;
  color: #000;
  padding: 12px 30px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
  text-transform: uppercase;
  transition: all 0.3s;
}

.rpg-button-action:hover {
  background: #fff;
  color: #000;
  transform: translateX(5px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .rpg-char-header {
    flex-direction: column;
    text-align: center;
  }

  .rpg-stats-grid {
    grid-template-columns: 1fr;
  }

  .rpg-xp-container {
    margin: 0 auto;
  }
}

/* =========================================
   MENU LATÉRAL STYLE RPG
   ========================================= */

/* Le conteneur du menu */
.woocommerce-MyAccount-navigation {
  background-color: #121212;
  border-right: 2px solid #333;
  min-height: 100%;
  padding: 20px 0;
  border-radius: 8px 0 0 8px;
}

/* Les liens du menu */
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 15px 20px;
  color: #888;
  /* Gris par défaut */
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  /* Ta police geek */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  /* Bordure invisible pour l'état actif */
  background: linear-gradient(90deg, transparent, transparent);
  /* Ajout d'icônes (si tu utilises FontAwesome) - Optionnel */
  display: flex;
  align-items: center;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style-type: none !important;
  /* Sécurité double */
}

/* Espace pour l'icône avant le texte */
.woocommerce-MyAccount-navigation ul li a:before {
  margin-right: 12px;
  font-size: 16px;
}

/* Effet au survol */
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), transparent);
  border-left-color: #ffc107;
  /* Jaune Good Geek */
}

/* --- ÉTAT ACTIF (L'onglet sélectionné) --- */
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #ffc107;
  /* Jaune */
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.2), transparent);
  border-left-color: #ffc107;
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
  /* Effet néon */
}

/* SÉLECTEUR D'AVATAR DANS "DÉTAILS DU COMPTE" */
.rpg-avatar-selector-container {
  background: #1a1a1a;
  padding: 25px;
  border: 1px solid #333;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.rpg-avatar-selector-container h3 {
  color: #ffc107;
  margin-bottom: 10px;
}

.rpg-avatar-selector-container .description {
  color: #888;
  margin-bottom: 20px;
}

.rpg-avatar-grid-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rpg-avatar-option {
  position: relative;
  cursor: pointer;
  width: 90px;
  height: 90px;
}

/* On cache le vrai bouton radio */
.rpg-avatar-option input[type="radio"] {
  display: none;
}

/* L'image de l'avatar */
.rpg-avatar-option img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #333;
  /* Bordure par défaut */
  transition: all 0.3s ease;
  display: block;
}

/* L'anneau de sélection (effet lumineux) */
.rpg-avatar-option .selector-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: all 0.3s ease;
}

/* Effet au survol */
.rpg-avatar-option:hover img {
  border-color: #666;
}

/* ÉTAT SÉLECTIONNÉ */
.rpg-avatar-option.is-selected img {
  border-color: #ffc107;
  /* Bordure jaune sur l'image */
}

.rpg-avatar-option.is-selected .selector-ring {
  border-color: #ffc107;
  /* Anneau jaune extérieur */
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
  /* Lueur néon */
}

/* =========================================
   NOTIFICATIONS WOOCOMMERCE 
   ========================================= */

/* Cible les messages d'info, de succès et d'erreur */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background-color: #1a1a1a !important;
  /* Fond Gris Sombre */
  color: #fff !important;
  /* Texte Blanc */
  border-top: 3px solid #ffc107 !important;
  /* Barre Jaune en haut (remplace le bleu) */
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 20px 30px !important;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* L'icône devant le texte (le petit "i" ou le check) */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  color: #ffc107 !important;
  /* Icône Jaune */
  font-family: "Font Awesome 6 Free" !important;
  /* Si tu as FontAwesome */
  margin-right: 12px;
  font-size: 16px;
}

/* Effet au survol */
.woocommerce-MyAccount-navigation ul li a:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.1), transparent);
  border-left-color: #ffc107;
  /* Jaune Good Geek */
}

/* --- ÉTAT ACTIF (L'onglet sélectionné) --- */
.woocommerce-MyAccount-navigation ul li.is-active a {
  color: #ffc107;
  /* Jaune */
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.2), transparent);
  border-left-color: #ffc107;
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
  /* Effet néon */
}

/* SÉLECTEUR D'AVATAR DANS "DÉTAILS DU COMPTE" */
.rpg-avatar-selector-container {
  background: #1a1a1a;
  padding: 25px;
  border: 1px solid #333;
  border-radius: 8px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.rpg-avatar-selector-container h3 {
  color: #ffc107;
  margin-bottom: 10px;
}

.rpg-avatar-selector-container .description {
  color: #888;
  margin-bottom: 20px;
}

.rpg-avatar-grid-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.rpg-avatar-option {
  position: relative;
  cursor: pointer;
  width: 90px;
  height: 90px;
}

/* On cache le vrai bouton radio */
.rpg-avatar-option input[type="radio"] {
  display: none;
}

/* L'image de l'avatar */
.rpg-avatar-option img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #333;
  /* Bordure par défaut */
  transition: all 0.3s ease;
  display: block;
}

/* L'anneau de sélection (effet lumineux) */
.rpg-avatar-option .selector-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  transition: all 0.3s ease;
}

/* Effet au survol */
.rpg-avatar-option:hover img {
  border-color: #666;
}

/* ÉTAT SÉLECTIONNÉ */
.rpg-avatar-option.is-selected img {
  border-color: #ffc107;
  /* Bordure jaune sur l'image */
}

.rpg-avatar-option.is-selected .selector-ring {
  border-color: #ffc107;
  /* Anneau jaune extérieur */
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.6);
  /* Lueur néon */
}

/* =========================================
   NOTIFICATIONS WOOCOMMERCE 
   ========================================= */

/* Cible les messages d'info, de succès et d'erreur */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
  background-color: #1a1a1a !important;
  /* Fond Gris Sombre */
  color: #fff !important;
  /* Texte Blanc */
  border-top: 3px solid #ffc107 !important;
  /* Barre Jaune en haut (remplace le bleu) */
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 20px 30px !important;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* L'icône devant le texte (le petit "i" ou le check) */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  color: #ffc107 !important;
  /* Icône Jaune */
  font-family: "Font Awesome 6 Free" !important;
  /* Si tu as FontAwesome */
  font-weight: 900;
}

/* Le Bouton à l'intérieur (ex: "Parcourir les produits") */
.woocommerce-info .button,
.woocommerce-message .button {
  background-color: var(--color-secondary) !important;
  /* Bouton Jaune */
  color: #000 !important;
  /* Texte Noir */
  font-weight: 800 !important;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 10px 20px;
  float: right;
  border-bottom: 2px solid var(--color-secondary);
  /* Bordure Jaune */
  margin-bottom: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* --- A-Z Listing (Text Version) --- */
.az-layout-wrapper {
  position: relative;
  padding-top: 20px;
}

/* Sticky Navigation */
.az-nav.sticky-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  z-index: 90;
  background: #fff;
  padding: 10px 0;
  border-bottom: 2px solid var(--color-secondary);
  margin-bottom: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.az-nav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.az-button {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 800;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.az-button:hover,
.az-button.active {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.az-button.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
  background-color: #f9f9f9;
  border-color: #eee;
}

/* Text List Styles */
.az-group {
  margin-bottom: 40px;
  scroll-margin-top: 160px;
}

.az-group-title {
  font-size: 3em;
  color: var(--color-secondary);
  /* Jaune */
  /* Contour plus marqué pour le contraste */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    3px 3px 0 rgba(0, 0, 0, 0.2);
  border-bottom: 3px solid #000;
  padding-bottom: 10px;
  margin-bottom: 25px;
  font-weight: 900;
}

.az-text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.az-list-item {
  margin: 0;
}

.az-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-primary);
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.az-link:hover {
  background-color: #fff;
  border-color: #000;
  /* Bordure NOIRE au survol */
  transform: translateX(5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.az-term-name {
  font-weight: 600;
  font-size: 1.05em;
}

.az-term-count {
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75em;
  font-weight: 800;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .az-nav.sticky-nav {
    top: 60px;
    padding: 10px 15px;
  }

  .az-nav-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .az-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .az-button {
    flex: 0 0 auto;
    padding: 8px 15px;
  }

  .az-text-list {
    grid-template-columns: 1fr;
  }
}

/* === RELATED PRODUCTS & UPSELLS GRID FIX === */
.product-related-section>h2,
/* Direct child ONLY */
.product-related-section h2.section-title,
/* Specific H2 class if present */
section[class*="merchant-"]>h2.section-title,
/* Target the SECTION wrapper explicitly */
.merchant-recently-viewed-products-section>h2.section-title,
/* Explicit section wrapper H2 */
.up-sells>h2,
.related>h2 {
  font-size: 1.5rem;
  /* Reduced for harmony */
  margin-bottom: 20px;
  background-color: var(--color-secondary);
  /* Surlignage Jaune */
  color: #000;
  /* Texte Noir */
  display: inline-block;
  padding: 2px 10px;
  /* Espace autour du texte */
  text-transform: uppercase;
  border-bottom: none !important;
  /* Pas de soulignement */
  font-weight: 900;
}

.related.products ul.products,
.up-sells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.related.products ul.products li.product,
.up-sells.products ul.products li.product {
  width: auto !important;
  /* Override WooCommerce defaults */
  margin: 0 !important;
  float: none !important;
  clear: none !important;
  /* Fix specific issue where first item is pushed down */
  min-width: 0;
}

/* Specific override for the 'first' class often added by WooCommerce loop */
.related.products ul.products li.product.first,
.up-sells.products ul.products li.product.first {
  clear: none !important;
  margin-left: 0 !important;
}

/* Remove clearfix pseudo-elements which become grid items in CSS Grid */
.related.products ul.products::before,
.related.products ul.products::after,
.up-sells.products ul.products::before,
.up-sells.products ul.products::after {
  content: none !important;
  display: none !important;
}

/* 
 * HIDE NATIVE UP-SELLS SECTION 
 * Since we merged Upsells into the 'Related Products' logic, 
 * we hide the default WooCommerce Upsell section to avoid duplication.
 */
section.up-sells {
  display: none !important;
}

/* Responsive for Related Products */
@media (max-width: 1024px) {

  .related.products ul.products,
  .up-sells.products ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {

  .related.products ul.products,
  .up-sells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================
   GIFT CARD PAGE CSS (PW Plugin Styling)
   ========================================= */
.gift-card-page-wrapper {
  font-family: 'Roboto', sans-serif;
}

/* Force Grid Layout for Plugin Buttons */
.styled-wc-form .pwgc-amount-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

/* Style Plugin Buttons to look like 'Pretty Buttons' */
.styled-wc-form .pwgc-amount-button {
  padding: 15px !important;
  border: 2px solid #eee !important;
  background: #fff !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  width: 100% !important;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.styled-wc-form .pwgc-amount-button:hover {
  border-color: #000 !important;
}

/* Selected State */
.styled-wc-form .pwgc-amount-button.pwgc-selected-amount {
  background-color: #ffff00 !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* Hide standard labels if messy */
.styled-wc-form .pwgc-label {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

/* Input Custom Amount */
.styled-wc-form #pwgc-custom-amount {
  width: 100%;
  padding: 15px;
  border: 2px solid #eee;
  border-radius: 5px;
  margin-top: 5px;
  font-size: 1rem;
}

/* Add to Cart Button Override */
.styled-wc-form button.single_add_to_cart_button {
  width: 100%;
  padding: 18px;
  font-size: 1.2rem;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
  font-weight: 900;
  text-transform: uppercase;
  transition: background 0.3s;
}

.styled-wc-form button.single_add_to_cart_button:hover {
  background: #333;
}

/* Responsive Grid */
@media (max-width: 600px) {
  .styled-wc-form .pwgc-amount-buttons {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* =========================================
   MY ACCOUNT CUSTOM STYLING
   ========================================= */

/* 1. Global Reset for Account Pages (Remove global black override) */
/* REMOVED: .woocommerce-account .site-content { background-color: #000... } */

/* 2. SPECIFIC Dashboard Container Styling (Black Box) */
.rpg-dashboard-container {
  background-color: #000000;
  color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 3. Text Colors INSIDE the Dashboard Container */
.rpg-dashboard-container h2,
.rpg-dashboard-container h3,
.rpg-dashboard-container h4,
.rpg-dashboard-container .rpg-label.text-yellow,
.rpg-dashboard-container .rpg-stat-value.text-yellow {
  color: var(--color-secondary) !important;
  /* Yellow */
}

.rpg-dashboard-container span,
.rpg-dashboard-container p,
.rpg-dashboard-container div {
  color: #ffffff;
}

/* 4. Sidebar / Navigation (Keep Dark) */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  background: #111;
  border-radius: 5px;
}

.woocommerce-MyAccount-navigation ul li {
  border-bottom: 1px solid #333;
}

.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 15px;
  color: #ccc;
  text-decoration: none;
  transition: all 0.3s;
}

.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: #000;
  color: var(--color-secondary);
  padding-left: 20px;
}

/* 5. Generic WC Account Forms (Login/Register/Edit) - Keep readable defaults */
.woocommerce-MyAccount-content address {
  color: #333;
  /* Revert to standard for readability outside black box */
}





/* FIX MOBILE HEADER V3 (STICKY FIX) */
@media (max-width: 992px) {
  .site-header { position: sticky !important; top: 0; z-index: 99999 !important; background-color: #000000 !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7) !important; padding: 10px 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; }
  .site-header-inner { flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 15px !important; }
  .site-branding { margin-right: auto !important; display: flex !important; align-items: center !important; flex: 1 1 auto !important; }
  .header-right-group { order: 2 !important; width: auto !important; justify-content: flex-end !important; margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; gap: 15px !important; display: flex !important; align-items: center !important; flex: 0 0 auto !important; }
  .main-navigation { order: 3 !important; margin-left: 0 !important; display: block !important; flex: 0 0 auto !important; }
  .header-text-links { display: none !important; }
}


/* PROTECTION CONTRE MERCHANT PRO (MOBILE MENU CONFLICT) */
@media (max-width: 992px) {
  nav.main-navigation, .mega-menu-container, .mega-menu-toggle { display: block !important; visibility: visible !important; opacity: 1 !important; }
}


/* ==========================================================================
   AZ GRID LISTING (CATEGORIES)
   ========================================================================== */
.az-grid-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 40px;
}
@media (min-width: 768px) {
    .az-grid-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}
@media (min-width: 1024px) {
    .az-grid-list {
        grid-template-columns: repeat(5, 1fr);
    }
}

.az-grid-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 1 / 1;
    display: block;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--color-primary, #000);
}

.az-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(255, 255, 0, 0.2);
}

.az-grid-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}

.az-grid-item:hover .az-grid-image {
    transform: scale(1.05);
}

.az-grid-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    padding: 30px 10px 15px;
    text-align: center;
}

.az-grid-name {
    color: var(--color-secondary, #ffff00);
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}