/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* =========================================================================
   FICHE PRODUIT — declinaisons et quantite sur une meme ligne
   Ajoute le 31/07/2026.

   Contexte : .product-variants et .product-add-to-cart sont freres dans le
   meme <form>, et le bloc quantite porte deja la classe .product-variants-item.
   On aplatit ces deux conteneurs (display: contents) pour que les selecteurs
   de declinaison et le champ quantite deviennent freres dans une meme ligne
   flex.

   Principe : tout passe en pleine largeur par defaut, puis on fait remonter
   sur la ligne uniquement les selecteurs de declinaison et la quantite.
   Ainsi, un nouveau groupe d'attributs (Contenance, Taux de nicotine...)
   s'aligne automatiquement, sans retoucher ce fichier.
   ========================================================================= */

.product-actions form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    /* Pas d'ecart vertical : le theme pose deja 23px de marge basse sur
       chaque bloc, un gap en plus creusait l'espace entre les rangees. */
    gap: 0 0.75rem;
}

/* On aplatit les deux conteneurs pour que leurs enfants deviennent
   directement des elements flex du formulaire. */
.product-actions .product-variants,
.product-actions .product-add-to-cart {
    display: contents;
}

/* Par defaut, chaque bloc occupe toute la largeur : bouton panier,
   disponibilite, mentions, moyens de paiement restent sur leur ligne.
   L'ordre 3 les renvoie sous la ligne des selecteurs. */
.product-actions form > *,
.product-actions .product-variants > *,
.product-actions .product-add-to-cart > * {
    flex: 1 0 100%;
    min-width: 0;
    order: 3;
}

/* Les remises degressives restent au-dessus des selecteurs.
   Sans cet ordre explicite, cette section - souvent vide mais toujours
   en pleine largeur - s'intercale entre les declinaisons et la quantite
   et casse la ligne. */
.product-actions .product-discounts {
    order: 1;
}

/* Seules exceptions : les selecteurs de declinaison et la quantite,
   qui se placent cote a cote.

   Les selecteurs se dimensionnent sur leur contenu (flex: 0 1 auto) et se
   regroupent a gauche : etires a parts egales, « 10 ml » et « 3 mg »
   occupaient 188px chacun pour trois caracteres de texte.

   Le max-width evite l'exces inverse : un libelle long comme
   « Fraise Pasteque Chewing-Gum » monopoliserait sinon toute la ligne. */
.product-actions .product-variants-item {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 220px;
    order: 2;
}

.product-actions .product-variants-item select {
    width: 100%;
    max-width: 100%;
}

/* Le theme pose une marge basse de 23px sur ses selecteurs de declinaison,
   avec une specificite qu'on ne peut pas depasser proprement. Plutot que de
   surencherir, on donne la meme marge a la quantite : l'alignement par le bas
   (align-items: flex-end) porte sur la boite de marge, donc les trois blocs
   se calent alors exactement sur la meme base. */
.product-actions .product-quantity {
    margin-bottom: 23px;
}

/* La quantite garde une largeur fixe : elle n'a pas besoin de s'etirer. */
.product-actions .product-quantity {
    flex: 0 0 auto;
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    order: 2;
}

/* -------------------------------------------------------------------------
   FICHE PRODUIT — marque sur sa propre ligne, au-dessus du nom
   Le bloc est genere par templates/catalog/product.tpl.
   ------------------------------------------------------------------------- */

.product-brand-line {
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
    /* Meme taille que le h1 du theme (30px). L'interlettrage est reduit et
       la graisse ramenee a celle du titre : a cette taille, un texte tres
       espace et tres gras ecraserait le nom du produit. */
    font-size: 30px;
    font-weight: 400;
}

.product-brand-line a {
    text-decoration: none;
}

.product-brand-line a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------------------------------
   FICHE PRODUIT — carrousel de miniatures masque
   Le visuel principal reste, seule la navigation entre images disparait.
   ------------------------------------------------------------------------- */

.productblock-image .an_productpage-slider-nav,
.productblock-image .an_productpage-slider-holder {
    display: none;
}

/* -------------------------------------------------------------------------
   FICHE PRODUIT — bloc « Paiement securise » masque
   Genere par le module ps_checkout, sous le bouton d'ajout au panier.
   ------------------------------------------------------------------------- */

#ps_checkout-payment-method-logo-block-container {
    display: none;
}

/* -------------------------------------------------------------------------
   FICHE PRODUIT — mention « TTC » masquee sous le prix
   ------------------------------------------------------------------------- */

.product-prices .tax-shipping-delivery-label {
    display: none;
}

/* -------------------------------------------------------------------------
   FICHE PRODUIT — visuel principal reduit
   L'image occupait toute la demi-colonne. On la plafonne et on la centre,
   sans toucher a la grille : la colonne de droite garde sa largeur.
   ------------------------------------------------------------------------- */

.productblock-image .images-container {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    /* Sur telephone, le visuel occupait 400px de haut, soit la moitie de
       l'ecran avant meme d'avoir vu le prix. On le ramene a une taille qui
       laisse le titre, le prix et l'achat accessibles rapidement. */
    .productblock-image .images-container {
        max-width: 240px;
    }
}

/* =========================================================================
   FICHE PRODUIT — mise en page mobile

   Constat avant correction (ecran 375x812) : il fallait descendre a 706px,
   soit presque un ecran entier, pour atteindre « Ajouter au panier ».
   Trois postes se cumulaient : un titre a 30px occupant 74px, la marque a
   la meme taille, et declinaison + quantite empilees sur toute la largeur.

   On agit sur les trois, sans rien masquer.
   ========================================================================= */

@media (max-width: 767px) {
    /* Titre et marque redimensionnes ensemble : ils doivent rester de meme
       taille, comme sur grand ecran. */
    .productblock-content h1.h1,
    .productblock-content .product-brand-line {
        font-size: 21px;
        line-height: 1.25;
    }

    .product-brand-line {
        margin-bottom: 0.15rem;
    }
}

@media (max-width: 575px) {
    /* Les selecteurs de declinaison prennent toute la largeur : leurs
       libelles sont longs. */
    .product-actions .product-variants-item:not(.product-quantity) {
        flex: 1 0 100%;
        max-width: none;
    }

    /* La quantite et le bouton d'ajout partagent une meme ligne, ce qui
       economise une rangee entiere et rapproche l'achat. */
    .product-actions .product-quantity {
        flex: 0 0 110px;
        width: 110px;
        min-width: 110px;
        max-width: 110px;
        margin-bottom: 0;
    }

    .product-actions .quantity_availability {
        flex: 1 1 0;
        order: 2;
        min-width: 0;
    }

    /* Le bouton porte une largeur minimale qui l'empechait de rentrer a cote
       de la quantite : on l'autorise a se reduire a l'espace disponible. */
    .product-actions .quantity_availability .add,
    .product-actions .quantity_availability .add-to-cart {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================================
   FICHE PRODUIT — titre et bouton favori sur une meme ligne
   Le coeur vient du hook displayProductAdditionalInfo2, deplace depuis la
   colonne image vers la colonne de droite dans product.tpl.
   ========================================================================= */

.product-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.product-title-row h1.h1 {
    flex: 1 1 auto;
    margin-bottom: 0;
}

.product-title-row .an_wishlist-mini {
    flex: 0 0 auto;
    margin: 0;
    position: static;
}

/* =========================================================================
   FICHE PRODUIT — un seul message de rupture de stock

   Trois affichages coexistaient :
     1. le badge sur l'image        (li.product-flag.out_of_stock)
     2. la disponibilite native     (span#product-availability)
     3. le module d'urgence Anvanto (div.an_hurry_up)

   On masque le troisieme : il ne fait que repeter le deuxieme, qui est le
   mecanisme natif de PrestaShop et se met a jour au changement de
   declinaison. Pour faire l'inverse, masquer .product-availability-wrap
   a la place de .an_hurry_up.
   ========================================================================= */

.product-actions .an_hurry_up {
    display: none;
}

/* =========================================================================
   FICHE PRODUIT — prix aligne avec le bouton d'ajout au panier
   Le prix est descendu dans le formulaire (product.tpl) pour partager sa
   ligne : prix a gauche, bouton repousse a droite et resserre.
   ========================================================================= */

/* Rupture de ligne : premier element du groupe d'ordre 3, il occupe toute
   la largeur et force le prix a demarrer une nouvelle ligne. */
.product-actions .va-flex-break {
    flex: 1 0 100%;
    order: 3;
    height: 0;
    margin: 0;
    padding: 0;
}

/* Le prix s'etire pour occuper l'espace libre : c'est lui qui repousse le
   bouton vers la droite, sans dependre d'une marge automatique que le theme
   ecrase. */
.product-actions .product-prices {
    flex: 1 1 auto;
    order: 3;
    margin-bottom: 0;
}

.product-actions .quantity_availability {
    flex: 0 0 280px;
    order: 3;
    width: 280px;
    max-width: 280px;
    min-width: 0;
}

.product-actions .quantity_availability .add,
.product-actions .quantity_availability .add-to-cart {
    width: 100%;
}

/* Ce bloc doit rester en fin de fichier : il annule les largeurs fixes
   posees juste au-dessus pour le grand ecran. Place plus haut, il serait
   ecrase par elles. */
@media (max-width: 575px) {
    /* Sur telephone, le prix passe au-dessus des declinaisons : la ligne
       quantite + bouton est deja dense. */
    .product-actions .product-prices {
        flex: 1 0 100%;
        order: 1;
    }

    /* La rupture de ligne n'a plus lieu d'etre, le prix occupant deja sa
       propre rangee. */
    .product-actions .va-flex-break {
        display: none;
    }

    /* Le bouton reprend sa place a cote de la quantite : il faut remettre
       flex a zero, la largeur fixe de 280px du grand ecran l'en empechait. */
    .product-actions .quantity_availability {
        flex: 1 1 0;
        order: 2;
        margin-left: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* =========================================================================
   PAGE CATEGORIE — confort de selection des produits

   Inspire de lepetitvapoteur.com. Quatre changements :
     1. le selecteur « produits par ligne » est retire ;
     2. la colonne de filtres est resserree, les cartes s'elargissent ;
     3. le prix passe en pastille en haut a gauche de l'image ;
     4. le bloc d'achat rapide (declinaisons + panier) n'apparait qu'au
        survol, ce qui allege fortement la grille au repos.
   ========================================================================= */

/* --- 1. Selecteur du nombre de produits par ligne ---------------------- */
.collection-view {
    display: none;
}

/* --- 2. Filtres resserres, cartes elargies ----------------------------- */
/* Cibler #left-column nommement : les cartes produit portent elles aussi
   col-lg-3 et vivent dans un .row, un selecteur par classe les attrapait
   et cassait la grille. */
@media (min-width: 992px) {
    .page-category #left-column {
        flex: 0 0 220px;
        max-width: 220px;
    }

    .page-category #content-wrapper {
        flex: 0 0 calc(100% - 220px);
        max-width: calc(100% - 220px);
    }
}

/* Trois cartes par ligne au-dela de 1200px.

   Retabli le 02/08/2026 : avec les selecteurs de contenance et de nicotine
   affiches en permanence, quatre cartes par ligne ne laissaient que ~190px
   utiles, ou les libelles et les valeurs en ml devenaient illisibles.
   Trois cartes portent la zone utile a ~265px. */
@media (min-width: 1200px) {
    .page-category .products.row > .product-miniature.col-lg-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}


/* --- 3. Prix en pastille sur l'image ----------------------------------- */
/* .thumbnail-container est en position relative et .product-description en
   position static : la pastille s'ancre donc sur la carte entiere. */
.product-miniature .thumbnail-container .product-miniature-prices {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    margin: 0;
    padding: 4px 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    font-weight: 600;
    line-height: 1.3;
    pointer-events: none;
}

/* Le libelle « Prix » est superflu dans une pastille. */
.product-miniature .product-miniature-prices .sr-only,
.product-miniature .product-miniature-prices .price-label {
    display: none;
}

/* --- 4. Achat rapide au survol ----------------------------------------- */
/* Uniquement sur les appareils dotes d'un vrai survol : sur mobile et
   tablette le bloc reste visible en permanence, sinon il serait
   inatteignable. */
/* Revision du 02/08/2026 : le bloc de selection reste visible en
   permanence sur grand ecran. L'apparition au survol obligeait a viser la
   carte avant de pouvoir lire les options, et masquait l'information la
   plus utile a la comparaison entre produits.

   Sur telephone en revanche, il est retire des pages categorie : la place
   manque pour deux selecteurs lisibles, et le client passe par la fiche
   produit pour choisir sa declinaison. */
@media (max-width: 767px) {
    .page-category .product-miniature .an_productattributes {
        display: none;
    }
}

/* -------------------------------------------------------------------------
   ETIQUETTES « Rupture de stock » et « Nouveau » retirees

   Regle par classe, donc valable pour tous les produits, y compris ceux
   crees plus tard. Les autres etiquettes eventuelles (promo, pack) restent
   affichees : seules ces deux-la sont visees.
   ------------------------------------------------------------------------- */

.product-flag.out_of_stock,
.product-flag.new {
    display: none;
}

/* -------------------------------------------------------------------------
   PAGE CATEGORIE — visuel resserre et nom remonte
   ------------------------------------------------------------------------- */

/* Ne PAS poser de max-width sur .thumbnail-container-image : la vignette
   contient un carrousel Slick qui calcule ses largeurs en JavaScript, et
   une largeur en pourcentage le fait s'effondrer a zero.
   Le retour a quatre cartes par ligne reduit deja le visuel de 255x340 a
   environ 184x223. Si un resserrement supplementaire est souhaite, il
   faudra passer par la configuration du carrousel, pas par le CSS. */

/* Le theme pose la marge du titre via « #products .product-title », un
   selecteur d'identifiant : il faut au moins un ID pour le depasser. */
#products .product-miniature .product-title,
.featured-products .product-miniature .product-title {
    margin-top: 5px;
}

/* -------------------------------------------------------------------------
   SELECTION RAPIDE — sans quantite

   Le module propose aussi un reglage « display_quantity » en back-office,
   qui est la voie propre. Cette regle assure le resultat en attendant, et
   reste sans effet une fois le reglage bascule.
   ------------------------------------------------------------------------- */

.product-miniature .an_productattributes-qty-container {
    display: none;
}

/* -------------------------------------------------------------------------
   SELECTION RAPIDE — declinaisons separees sur une meme ligne

   S'applique lorsque le module est bascule sur son mode « standart »
   (Modules > an_productattributes > Configurer > type d'affichage), qui rend
   un selecteur par groupe d'attributs au lieu d'un menu combine.

   Ces regles sont posees d'avance : elles n'ont aucun effet tant que le
   mode « select » est actif.
   ------------------------------------------------------------------------- */

/* Toute la chaine doit s'etirer, sinon les selecteurs restent a l'etroit :
   .an_productattributes est un element flex qui ne grandissait pas (184px
   dans un parent de 229), et le formulaire retombait a 164px. */
.product-miniature .an_productattributes {
    flex: 1 1 auto;
    width: 100%;
}

.product-miniature .an_productattributesForm,
.product-miniature .js-an_productattributes-standart {
    width: 100%;
}

.product-miniature .an_pa_product-variants {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 0.5rem;
    width: 100%;
}

.product-miniature .an_pa_product-variants .product-variants-item {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

.product-miniature .an_pa_product-variants .product-variants-item select {
    width: 100%;
    max-width: 100%;
}

/* Les libelles restent lisibles mais discrets dans une vignette. */
.product-miniature .an_pa_product-variants .control-label {
    font-size: 12px;
    margin-bottom: 2px;
}

/* -------------------------------------------------------------------------
   VIGNETTE — coeur et loupe retires

   Portee limitee a .product-miniature : le bouton favori de la FICHE
   produit, deplace a cote du titre, n'est pas concerne.
   ------------------------------------------------------------------------- */

.product-miniature .an_wishlist-mini,
.product-miniature .quick-view,
/* Le theme declare la loupe via .highlighted-informations : il faut
   reprendre le meme chemin pour ne pas etre distance en specificite. */
.product-miniature .highlighted-informations .quick-view {
    display: none;
}

/* -------------------------------------------------------------------------
   PAGE CATEGORIE — cartes detachees sur fond gris clair

   La grille etait blanche sur blanc : rien ne delimitait les produits.
   Le fond passe en gris clair, les cartes restent blanches avec un leger
   relief qui s'accentue au survol.
   ------------------------------------------------------------------------- */

.page-category #products {
    padding: 14px 6px;
}

.page-category .product-miniature .thumbnail-container {
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 6px;
    padding: 10px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}

.page-category .product-miniature:hover .thumbnail-container {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
}

/* La pastille de prix se recale sur le nouveau rembourrage. */
.page-category .product-miniature .thumbnail-container .product-miniature-prices {
    top: 18px;
    left: 18px;
}