/* ==========================================================
   AreaPure — Add to Cart (final nettoyé)
   ========================================================== */

/* --- Layout 2 colonnes --- */
.page-template-page-add-to-cart-php .product-detail,
.page-template-page-add-to-cart .product-detail,
.product-detail {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 36px;
}

/* Colonnes (image un peu plus petite) */
.page-template-page-add-to-cart-php .product-left,
.page-template-page-add-to-cart .product-left,
.product-left {
  position: relative;           /* ancrage badge */
  flex: 0 0 51% !important;
  max-width: 51% !important;
  float: none !important;
}
.page-template-page-add-to-cart-php .product-right,
.page-template-page-add-to-cart .product-right,
.product-right {
  flex: 0 0 49% !important;
  max-width: 49% !important;
  min-width: 0;
  float: none !important;
}

/* Image propre + léger décalage à droite */
.product-left img.product-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  margin-left: 6px;             /* petit push à droite */
}

/* Badge -85% (au-dessus de l’image) */
.discount-tag{
  position:absolute; top:12px; right:12px;
  background:#3b82f6;
  color:#fff;
  font-weight:800;
  font-size:12px;
  line-height:1;
  padding:6px 10px;
  border-radius:8px;
  border:none;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  z-index:3;
}

/* Mobile: 1 colonne */
@media (max-width: 991px) {
  .page-template-page-add-to-cart-php .product-detail,
  .page-template-page-add-to-cart .product-detail,
  .product-detail {
    flex-wrap: wrap !important;
    gap: 20px;
  }
  .product-left, .product-right {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* --- Best Seller plus petit --- */
.page-template-page-add-to-cart-php .badge.best-seller,
.page-template-page-add-to-cart .badge.best-seller,
.badge.best-seller {
  background:#ef4444;
  color:#fff !important;
  font-weight:800 !important;
  font-size:11px !important;
  padding:4px 6px !important;
  border-radius:6px !important;
  border:none;
}

/* --- Ligne stock / quantité / CTA --- */
.page-template-page-add-to-cart-php .cart-row,
.page-template-page-add-to-cart .cart-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;         /* espace entre “stock” et bloc qty+CTA */
  flex-wrap: wrap;
  min-height: 10px;
}

/* Bloc quantité + CTA compact (ADD TO CART à droite du +) */
.page-template-page-add-to-cart-php .cart-action,
.page-template-page-add-to-cart .cart-action {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;            /* aucun espace entre + et CTA */
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
.page-template-page-add-to-cart-php .cart-action > *,
.page-template-page-add-to-cart .cart-action > * { margin:0 !important; }

/* Sélecteur quantité “capsule” collé au CTA */
.page-template-page-add-to-cart-php .quantity-selector,
.page-template-page-add-to-cart .quantity-selector {
  display: inline-flex !important;
  align-items: center;
  height: 82px !important;
  border: 1px solid #d1d5db;
  border-right: 0 !important;           /* pas de trait entre qty et CTA */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden;
}
.quantity-selector .qty-btn{
  width: 18px; height: 12px;
  background:#f3f4f6;
  border:0;
  font-size:18px;
  color:#111827 !important;      /* noir */
  font-weight:800 !important;    /* gras */
  cursor:pointer;
}
.quantity-selector input{
  width: 52px;
  text-align:center;
  border:0; outline:none;
  font-size:16px;
  color:#111827;
  background:transparent;
  -moz-appearance: textfield;
}
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* CTA vert, collé à droite du + */
.page-template-page-add-to-cart-php .btn-cart,
.page-template-page-add-to-cart .btn-cart {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:42px !important;
  line-height:42px !important;
  padding:0 18px !important;
  margin:0 !important;
  white-space:nowrap !important;
  width:auto !important; max-width:none !important;

  background:#22c55e;
  color:#fff !important;
  font-weight:800 !important;
  font-size:16px;
  border:none !important;
  outline:none !important;
  border-top-left-radius:0 !important;   /* joint propre avec qty */
  border-bottom-left-radius:0 !important;
  border-top-right-radius:8px;
  border-bottom-right-radius:8px;
  box-shadow:0 8px 18px rgba(34,197,94,.22);
  transition: transform .08s ease, background .2s ease, box-shadow .2s ease;
}
.page-template-page-add-to-cart-php .btn-cart:hover,
.page-template-page-add-to-cart .btn-cart:hover { background:#16a34a; }
.page-template-page-add-to-cart-php .btn-cart:focus-visible,
.page-template-page-add-to-cart .btn-cart:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(34,197,94,.35);
}
.page-template-page-add-to-cart-php .btn-cart:active,
.page-template-page-add-to-cart .btn-cart:active { transform: translateY(1px); }

/* Mobile : autoriser le wrap si l’espace manque */
@media (max-width: 991px){
  .page-template-page-add-to-cart-php .cart-action,
  .page-template-page-add-to-cart .cart-action {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .page-template-page-add-to-cart-php .btn-cart,
  .page-template-page-add-to-cart .btn-cart {
    border-top-left-radius:8px !important;
    border-bottom-left-radius:8px !important;
    width:100% !important;      /* plein écran si besoin */
  }
}

/* === Patch WooCommerce — garder qty + CTA côte à côte === */

/* 1) Neutraliser les styles Woo par défaut */
.woocommerce form.cart,
.woocommerce .cart {
  display: contents !important;     /* on ignore leur layout */
}
.woocommerce form.cart div.quantity {
  float: none !important;
  margin: 0 !important;
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  width: auto !important;           /* pas de 100% */
  margin: 0 !important;             /* pas d'écart parasite */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 2) Forcer notre bloc compact : [ - | 1 | + ][ ADD TO CART ] */
.cart-row {                          /* ton conteneur existant */
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;              /* espace entre “stock” et [qty+cta] */
  flex-wrap: wrap;
}
.cart-action {                        /* ton <form class="cart-action"> */
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0 !important;                 /* aucun espace entre + et CTA */
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

/* 3) Quantité collée au CTA (coins partagés) */
.quantity-selector {
  display: inline-flex !important;
  align-items: center;
  height: 42px !important;
  border: 1px solid #d1d5db;
  border-right: 0 !important;        /* pas de trait entre qty et bouton */
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  overflow: hidden;
}
.quantity-selector .qty-btn {
  width: 38px; height: 42px;
  background: #f3f4f6;
  border: 0;
  font-size: 18px;
  color: #111827 !important;         /* noir */
  font-weight: 800 !important;       /* gras */
  cursor: pointer;
}
.quantity-selector input,
.woocommerce .quantity .qty {
  width: 52px !important;
  text-align: center;
  border: 0 !important;
  outline: none !important;
  font-size: 16px;
  color: #111827;
  background: transparent;
  -moz-appearance: textfield;
}
.quantity-selector input::-webkit-outer-spin-button,
.quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 4) Bouton vert (collé à droite du +) — override contre .woocommerce .button */
.btn-cart,
.woocommerce .cart .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  width: auto !important; max-width: none !important;

  background: #22c55e !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border: none !important;
  outline: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  box-shadow: 0 8px 18px rgba(34,197,94,.22) !important;
}
.btn-cart:hover,
.woocommerce .cart .button:hover { background: #16a34a !important; }

/* Mobile: autoriser le retour à la ligne si l'espace manque */
@media (max-width: 991px){
  .cart-action { flex-wrap: wrap !important; gap: 10px !important; }
  .btn-cart   {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    width: 100% !important;
  }
}

/* Décalage du texte à partir de "BUY THE LATEST VERSION OF MICROSOFT OS AT A LOW PRICE" */
.buy-latest-version-section {
  margin-left: 25px;
}

/* Décaler tout le contenu APRÈS le 1er <p> (le <p><strong>BUY THE LATEST...</strong></p>) */
.product-description p:first-of-type ~ p,
.product-description p:first-of-type ~ ul,
.product-description p:first-of-type ~ ol,
.product-description p:first-of-type ~ h3,
.product-description p:first-of-type ~ h4,
.product-description p:first-of-type ~ h5,
.product-description p:first-of-type ~ li {
  margin-left: 40px; /* ← ajuste ici si tu veux plus/moins */
}

/* Optionnel : un peu d’air côté droit sans casser la mise en page */
.product-description p:first-of-type ~ p,
.product-description p:first-of-type ~ ul,
.product-description p:first-of-type ~ ol {
  margin-right: 12px;
}

/* ===== Lisibilité globale : léger décalage horizontal du texte ===== */

/* 1) Un peu d'air sur tout le contenu principal */
.full-width { 
  padding-left: 10px !important; 
  padding-right: 8px !important; 
}

/* 2) Décaler en douceur les éléments textuels de la colonne droite
      (on exclut explicitement le formulaire qty + CTA) */
.product-right > :not(.stock-cart-block):not(.cart-action) {
  padding-left: 40px !important;  /* ajuste 6–14px selon ton œil */
}

/* 3) Description produit : décalage sur le texte uniquement */
.product-description {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.product-description p,
.product-description ul,
.product-description ol,
.product-description h3,
.product-description h4,
.product-description h5 {
  margin-left: 18px !important;   /* augmente à 22–24px si tu veux plus d'air */
}

/* 4) Ne JAMAIS décaler le bloc quantité + bouton */
.product-right .cart-action { 
  margin-left: 0 !important; 
  padding-left: 0 !important; 
}


/* Décaler tout le contenu vers le bas pour lisibilité */
.full-width {
  padding-top: 20px !important; /* ajuste la valeur à ton goût */
}

/* Décaler uniquement la partie description sous le bouton ADD TO CART */
.product-description {
  margin-top: 90px; /* ajuste la valeur pour plus ou moins d'espace */
}


/* Espacement entre les lignes du texte */
.product-description p,
.product-description li {
  line-height: 1.8; /* plus grand = plus d’espace entre les lignes */
}

/* Espacement uniquement entre les lignes des paragraphes */
.product-description p {
  line-height: 1.3; /* Ajuste la valeur selon ton goût */
}

/* Remonter légèrement l'ancien prix */
.price-block .old-price {
  display: inline-block;
  transform: translateY(8px); /* ajuste -2px à -8px selon ton œil */
}
@media (max-width: 991px){
  .price-block .old-price { transform: translateY(-2px); }
}


/* Effet zoom sur la première image du produit */
.product-left img.product-image {
  transition: transform 0.4s ease; /* animation fluide */
}

.product-left img.product-image:hover {
  transform: scale(1.05); /* zoom léger */
}


/* ====== Full-bleed TOPBAR / NAVBAR / FOOTER ====== */
/* Déborde proprement les conteneurs centrés */
.topbar,
.navbar,
.footer {
  position: relative;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

/* Optionnel : largeur interne maîtrisée + padding homogène */
.topbar > *, .navbar > *, .footer > * {
  max-width: 1200px;      /* ajuste si tu veux plus large */
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
  box-sizing: border-box;
}

/* Assure une bonne base d’affichage (si tu n’as pas déjà ces styles) */
.topbar { display: flex; justify-content: space-between; align-items: center; }
.navbar { display: flex; justify-content: space-between; align-items: center; }
.footer { display: block; }

/* Pour éviter qu’un parent .full-width ajoute des paddings parasites */
.full-width .topbar,
.full-width .navbar,
.full-width .footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* ===== TOPBAR full-width avec contenu gauche/droite ===== */
.topbar {
  display: flex;
  justify-content: space-between; /* gauche / droite */
  align-items: center;
  background: #111827; /* exemple couleur fond */
  color: #fff;         /* couleur texte */
  font-size: 14px;
  padding: 8px 18px;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}



/* ===== TOPBAR : texte gauche / texte droite ===== */
.topbar {
  display: flex !important;
  justify-content: space-between !important; /* sépare gauche et droite */
  align-items: center !important;
  background: #111827; /* ou la couleur de ton choix */
  color: #fff;
  padding: 6px 20px; /* un peu d’air autour du texte */
  font-size: 14px;
  flex-wrap: wrap; /* permet de passer à la ligne sur petit écran */
}

.topbar .support {
  text-align: left !important;
}

.topbar .delivery {
  text-align: right !important;
}

/* Responsive : sur petit écran, le texte se met l’un sous l’autre */
@media (max-width: 600px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start; /* tout aligné à gauche en mobile */
    gap: 4px;
  }
  .topbar .delivery {
    text-align: left !important;
  }
}





/* ===== NAVBAR : logo à gauche, menu à l'extrême droite ===== */
.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* on laisse le logo à gauche */
  gap: 16px;
}

/* Le logo reste à gauche et pousse le reste vers la droite */
.navbar .logo {
  margin-right: auto !important;
  flex: 0 0 auto;
}

/* UL menu : full right + reset thème (float, block, etc.) */
.navbar .nav-links {
  margin-left: auto !important;       /* pousse complètement à droite */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin-top: 0; 
  margin-bottom: 0;
  float: none !important;
  width: auto;
  max-width: 100%;
  text-align: right;                   /* au cas où un style global centre */
}

.navbar .nav-links li {
  list-style: none;
  float: none !important;
  display: inline-flex;
}

.navbar .nav-links a {
  display: inline-block;
  text-decoration: none;
  /* garde ton style actuel si tu en as déjà (couleur, hover, etc.) */
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .navbar {
    flex-wrap: wrap;                   /* permet au menu de passer à la ligne */
  }
  .navbar .nav-links {
    width: 100%;
    justify-content: flex-end !important; /* reste à droite même sur mobile */
    gap: 18px;
    margin-top: 8px;                   /* un peu d’air sous la ligne du logo */
  }
}

/* ===== Anti-conflits possibles (thèmes qui centrent/contraignent) ===== */
.page-template-page-add-to-cart .navbar .nav-links,
.page-template-page-add-to-cart-php .navbar .nav-links {
  margin-left: auto !important;
  justify-content: flex-end !important;
  text-align: right !important;
}





/* ===== TOPBAR : extrême gauche / extrême droite ===== */
.topbar {
  display: flex !important;
  justify-content: space-between !important; /* espace maximum */
  align-items: center !important;
  padding: 6px 18px;
  width: 100% !important; /* prend toute la largeur */
  box-sizing: border-box;
}

.topbar .support {
  text-align: left !important;
  white-space: nowrap;
}

.topbar .delivery {
  text-align: right !important;
  white-space: nowrap;
}

/* Mobile : empile */
@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    gap: 4px;
  }
  .topbar .support,
  .topbar .delivery {
    white-space: normal;
    text-align: center !important;
  }
}


/* ================= FULL-BLEED (plein écran) ================= */
.topbar,
.navbar,
.footer {
  position: relative;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

/* Si tu avais auparavant un "inner" centré, on l'annule */
.topbar > *, .navbar > *, .footer > * {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================= TOPBAR : gauche / droite ================= */
.topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* sépare aux extrêmes */
  padding: 6px 24px; /* ajuste l’air aux bords */
  gap: 0 !important;
}

.topbar > * {
  flex: 0 0 auto !important; /* empêche l’étirement des enfants */
}

.topbar .support {
  text-align: left !important;
  white-space: nowrap;           /* évite le retour à la ligne */
}

.topbar .delivery {
  text-align: right !important;
  white-space: nowrap;
}

/* ================= NAVBAR : menu à l’extrême droite ================= */
.navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* logo à gauche */
  padding: 10px 24px;
  gap: 16px;
}

.navbar .logo {
  margin-right: auto !important; /* pousse le reste à droite */
  flex: 0 0 auto;
}

.navbar .nav-links {
  margin-left: auto !important;     /* colle à droite */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  float: none !important;
  width: auto;
  max-width: 100%;
  text-align: right !important;
}

.navbar .nav-links li {
  list-style: none;
  float: none !important;
  display: inline-flex;
}

.navbar .nav-links a {
  display: inline-block;
  text-decoration: none;
}

/* ================= ANTI-CONFLITS : parents qui ajoutent du padding ================= */
.full-width .topbar,
.full-width .navbar,
.full-width .footer {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
  .topbar { padding: 8px 16px; }
  .navbar { flex-wrap: wrap; padding: 10px 16px; }
  .navbar .nav-links {
    width: 100%;
    justify-content: flex-end !important; /* reste à droite en mobile */
    gap: 16px;
    margin-top: 8px;
  }
}

/* ================= DEBUG (optionnel, à retirer après vérif) ================= */
/* Pour vérifier visuellement le full-bleed :
.topbar { background: #111827; color: #fff; }
*/




/* === Petits décalages précis (desktop) === */
@media (min-width: 992px) {
  /* TOPBAR : le texte support un peu vers la droite */
  .topbar .support {
    margin-left: 16px !important;   /* ajuste 8–24px si besoin */
  }

  /* TOPBAR : le texte delivery un peu vers la gauche (donc éloigné du bord droit) */
  .topbar .delivery {
    margin-right: 16px !important;  /* ajuste 8–24px si besoin */
  }

  /* NAVBAR : logo un peu vers la droite */
  .navbar .logo {
    margin-left: 16px !important;   /* ajuste 8–24px si besoin */
  }
}




/* Décalage horizontal uniquement du menu (pas du logo) */
.navbar .nav-links {
  position: relative;      /* nécessaire pour utiliser left */
  left: -40px;               /* vers la droite (mettre négatif pour gauche) */
}

/* Version responsive */
@media (max-width: 768px) {
  .navbar .nav-links {
    left: 10px;             /* moins de décalage sur mobile */
  }
}



/* === Best Seller : position verticale contrôlée (robuste) === */
.page-template-page-add-to-cart-php .badge.best-seller,
.page-template-page-add-to-cart .badge.best-seller,
.badge.best-seller{
  display: inline-block !important;   /* pour que margin/position s’appliquent bien */
  position: relative !important;      /* on peut utiliser 'top' */
  top: -8px !important;               /* ↓ ajuste : négatif = monte / positif = descend */
  margin-bottom: 6px !important;      /* espace sous le badge si besoin */
  


  /* style existant */
  background:#ef4444;
  color:#fff !important;
  font-weight:800 !important;
  font-size:11px !important;
  padding:4px 8px !important;
  border-radius:6px !important;
  border:none;
}

/* Option alternative (si tu préfères sans 'top', commente la ligne top ci-dessus) */
/*
.page-template-page-add-to-cart-php .badge.best-seller,
.page-template-page-add-to-cart .badge.best-seller,
.badge.best-seller{
  transform: translateY(-8px) !important;  // négatif = monte / positif = descend
}
*/


/* ADD TO CART : styliser $28.99 (nouveau prix) */
.page-template-page-add-to-cart .price-block .new-price,
.page-template-page-add-to-cart-php .price-block .new-price,
.price-block .new-price{
  font-size: 1.4rem !important;   /* ← agrandis ici */
  font-weight: 800 !important;
  position: relative !important;
  top: 10px !important;            /* ← positif = descend / négatif = monte */
  line-height: 1.1 !important;
}

/* (optionnel) ajuster l’ancien prix pour l’alignement */
.page-template-page-add-to-cart .price-block .old-price,
.page-template-page-add-to-cart-php .price-block .old-price,
.price-block .old-price{
  position: relative;
  top: 0;                         /* mets -2px, +2px si besoin */
  margin-right: 10px;
}




/* === Product Features === */
.product-features {
  padding-top: 10px;   /* espace haut */
  padding-bottom: 10px;/* espace bas */
  padding-left: 5px;   /* espace gauche */
  padding-right: 5px;  /* espace droite */
  line-height: 1.6;    /* interlignage (espacement entre les lignes) */
}

/* === You Save === */
.you-save {
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
}

/* === Stars (avis clients) === */
.stars {
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 3px;
  padding-right: 3px;
}





/* === Contrôle complet Best Seller === */
.page-template-page-add-to-cart .badge.best-seller,
.page-template-page-add-to-cart-php .badge.best-seller,
.badge.best-seller {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ef4444 !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  padding: 4px 6px !important;
  border-radius: 8px !important; /* Coins arrondis */
  border: none !important;

  /* Contrôles ajustables */
  top: -15px !important;   /* Décalage vertical : négatif = monte, positif = descend */
  left: 40px !important;  /* Décalage horizontal : négatif = gauche, positif = droite */
  width: auto !important; /* Largeur */
  height: auto !important; /* Hauteur */
}


/* Responsive ajustements */
@media (max-width: 767px) {
  .badge.best-seller {
    font-size: 9px !important; /* plus petit sur mobile */
    padding: 3px 5px !important;
    top: 2px !important; /* ajuste position verticale */
    left: 0px !important; /* ajuste position horizontale */
  }
}


/* === ADVANTAGES en full-bleed (plein écran) === */
.full-width .advantages{
  /* sort de la contrainte du conteneur centré */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* un peu d'air sur les côtés */
  padding-left: 5vw;
  padding-right: 5vw;
}

/* Optionnel : joli layout fluide sur toute la largeur */
.full-width .advantages{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 24px;
  align-items: center;
}
.full-width .advantages .advantage-item{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Responsive : passe en 2 colonnes puis 1 colonne */
@media (max-width: 1024px){
  .full-width .advantages{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .full-width .advantages{ grid-template-columns: 1fr; }
}