/* Surcharges CSS du thème eliquide.
   Chargé automatiquement par PrestaShop après theme.css (priorité 1000,
   cf. classes/controller/FrontController.php:966). Éditable sans recompiler le SCSS. */

/* Selects de déclinaison de la fiche produit.
   Le <select> natif est remplacé au chargement par un widget Choices.js : la boîte
   visible est .choices__inner, pas le <select>. Choices expose des variables CSS,
   dont --choices-border-radius qui vaut 0 par défaut, d'où les angles droits.
   On aligne bordure et arrondi sur le champ quantité (.quantity-button__group). */
.product__card .product-variant .choices {
  --choices-border-radius: .3125rem;
  --choices-keyline-color: var(--gris, #bebebe);
}

/* Le menu déroulant reprend le même arrondi */
.product__card .product-variant .choices__list--dropdown {
  border-radius: .3125rem;
}

/* Bloc des modules greffés sur displayFooterBefore (lien de révocation des cookies).
   Déplacé après le bandeau réassurance, il se retrouve dans le conteneur bleu
   .footer-eliquide : on lui redonne le fond blanc du bandeau pour rester lisible. */
.footer-eliquide .footer__before {
  background: var(--bs-white);
  color: var(--bs-body-color);
}

/* Alertes du site masquées par le module Minimum Qty & Sell by X Units.
   Ce module injecte en pied de page `div.alert { position: fixed; z-index: -9999 }`
   et ne révèle ses propres alertes qu'avec la classe `.in` (convention Bootstrap 3,
   absente de Bootstrap 5 utilisé par le thème). Toutes les alertes de PrestaShop
   — erreurs de connexion, messages du panier, confirmations — se retrouvaient
   derrière la page. On rend le flux normal à toutes les alertes SAUF les siennes.
   Le sélecteur est plus spécifique que celui du module : aucun !important requis. */
div.alert:not(.minqty) {
  position: static;
  z-index: auto;
  top: auto;
  right: auto;
  text-align: inherit;
}

/* Bootstrap positionne les alertes avec bouton de fermeture en relatif */
div.alert.alert-dismissible:not(.minqty) {
  position: relative;
}

/* Le module ajoute aussi un retrait aux paragraphes de toute alerte */
div.alert:not(.minqty) p {
  padding-left: 0;
}

/* Picto camion « Suivi colis » du header, plus grand que les autres (20px) :
   le dessin est allongé, il paraît plus petit à taille égale. La marge négative
   compense l'agrandissement pour garder le libellé aligné avec Compte et Panier. */
.header-main .header-block__svg.icon--tracking {
  width: 26px;
  height: 26px;
  margin: -3px;
}

/* Détail de commande : les références produit longues et sans espace
   (ex. PODFRAISGLAELFAPRO2x220mg) débordaient du cadre sur mobile.
   Les cellules en grille/flex ne rétrécissent pas sous la largeur de leur contenu
   (min-width: auto) : on les autorise à rétrécir, et on permet la coupure du mot. */
.order-product,
.order-product__infos,
.order-product__content {
  min-width: 0;
}

.order-product__content small {
  overflow-wrap: anywhere;
}

/* Accueil, mobile et tablette : pas de flèches sur les carrousels produits.
   La navigation se fait au doigt, et la carte suivante dépasse déjà pour
   indiquer le défilement. Seuil aligné sur le passage au header mobile (1024px). */
@media (max-width: 1023.98px) {
  .home-products__arrow {
    display: none;
  }
}

/* Espace client, desktop : rétablir le bouton « Retour à votre compte ».
   Le thème le masque au-delà de 1024px (theme.css), le menu latéral gauche
   faisant office de retour. Demande client : le conserver sur toutes les
   largeurs, en complément du menu.
   inline-flex et non flex : sur un lien, flex donne un bloc qui occupe toute
   la largeur. En mobile c'est le comportement voulu, en desktop le bouton doit
   se limiter à son contenu. */
@media (min-width: 1024px) {
  .account-menu__back {
    display: inline-flex;
    align-items: center;
    width: auto;
  }
}