/* ==========================================================================
   Deleage — correctif mise en page des listings produits          v1.1
   Cible : resultats de recherche, categories, produits lies / upsells,
           page Boutique. Charge APRES le CSS agrege Enfold
           (uploads/dynamic_avia/mrseo-enfold.css), donc non ecrase par
           les regenerations du theme.

   Corrige :
     1. grille en float + clear desynchronise (cassures de rangees)
     2. cartes de hauteurs inegales, bas d'images desalignes
     3. textes et prix tronques (overflow:hidden + min-height figee)
     4. prix ferre en bas de carte, avec un vrai ecart sous le titre
     5. typographies heterogenes (page-title-splitter, 4 familles melangees)
     6. conflit des deux regles .number (-25px vs +5px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GRILLE — flex au lieu des floats Enfold
   Le nombre de colonnes suit la classe WooCommerce (columns-N) au lieu d'une
   largeur en % fixee a la main : largeurs et gouttieres totalisent toujours
   exactement 100 %, quel que soit le viewport.
   -------------------------------------------------------------------------- */
#top ul.products {
    --cols: 4;
    --gap: 2.4%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 30px var(--gap);
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    clear: both;
}

#top ul.products.columns-1 { --cols: 1; }
#top ul.products.columns-2 { --cols: 2; }
#top ul.products.columns-3 { --cols: 3; }
#top ul.products.columns-4 { --cols: 4; }
#top ul.products.columns-5 { --cols: 5; }
#top ul.products.columns-6 { --cols: 6; }

/* Neutralise le float Enfold (woocommerce-mod.css:308) et la largeur figee
   a 19.70 % posee uniquement sur la page Boutique (mrseo-enfold.css:9152). */
#top ul.products > li.product,
body.page-id-22990 #top ul.products > li.product,
body.page-id-22990 #top div .products .product {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0;
    width: auto !important;
    height: auto !important;
    display: flex;
    align-items: stretch;
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
    max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* --------------------------------------------------------------------------
   2. PLUS RIEN N'EST TRONQUE
   Enfold rogne tout depassement : .inner_product { overflow:hidden }
   (woocommerce-mod.css:1984). Combine a la hauteur figee ci-dessous, c'est
   ce qui coupait les prix longs ("A partir de 1.679 EUR ht") et les titres
   de 4 lignes.
   -------------------------------------------------------------------------- */
#top ul.products > li.product .inner_product,
#top ul.products > li.product .inner_product_header,
#top ul.products > li.product .inner_product_header_table,
#top ul.products > li.product .inner_product_header_cell {
    overflow: visible !important;
}

/* Hauteur du bloc texte : Enfold la figeait a 114px et rognait le reste
   (#top .inner_product_header { min-height:114px !important },
   mrseo-enfold.css:8593). On garde une hauteur MINIMALE — c'est elle qui
   donne l'effet "domino" : la moitie texte occupe la meme hauteur sur
   toutes les cartes de la page, pas seulement au sein d'une rangee.
   Calibree pour un titre de 4 lignes + le numero + le prix. Combinee a
   overflow:visible, un contenu plus long agrandit la carte au lieu
   d'etre coupe. */
#top ul.products > li.product .inner_product_header {
    min-height: 168px !important;
    height: auto !important;
    border-top: 1px solid #e6e6e6;
}

/* --------------------------------------------------------------------------
   3. CARTES — hauteurs egales, prix ferre en bas
   Chaine flex construite avec flex:1 1 auto (et non height:100%, qui ne se
   propage pas de facon fiable a travers les blocs table/table-cell d'Enfold).
   -------------------------------------------------------------------------- */
#top ul.products > li.product > .inner_product {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

#top ul.products > li.product > .inner_product > a,
#top ul.products > li.product > .inner_product > a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

#top ul.products .thumbnail_container {
    flex: 0 0 auto;
    line-height: 0;
}

/* Enfold empile deux wrappers en display:table / table-cell entre le bloc
   texte et son contenu :
       .inner_product_header > .inner_product_header_table
                             > .inner_product_header_cell
                             > .number + h2 + .price
   Ces deux wrappers intermediaires cassent la chaine flex : la hauteur
   disponible ne descend pas jusqu'au prix, donc un "margin-top:auto" pose
   sur le prix reste sans effet et le prix reste colle sous le titre.

   display:contents les retire de la mise en page sans toucher au HTML :
   .number, le titre et le prix deviennent enfants flex DIRECTS du bloc
   texte. Le ferrage bas devient alors fiable. */
#top ul.products .inner_product_header_table,
#top ul.products .inner_product_header_cell {
    display: contents !important;
}

#top ul.products .inner_product_header {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    padding: 12px 10px 16px;
    text-align: center !important;
}

/* Le numero garde sa largeur naturelle : un enfant flex est "blockifie",
   son fond gris s'etalerait sinon sur toute la largeur de la carte. */
#top ul.products .number {
    align-self: center;
}

/* Le prix est pousse en bas du bloc texte. Comme ce bloc a la meme hauteur
   sur toutes les cartes (min-height + etirement de la rangee), les prix
   s'alignent sur une meme ligne — montants comme mentions
   "sur devis uniquement". */
/* Le bloc prix est ferre en bas du bloc texte. Comme ce bloc a la meme
   hauteur sur toutes les cartes (min-height + etirement de la rangee), les
   prix tombent sur une meme ligne — montants comme mentions
   "sur devis uniquement".

   Pour une partie du catalogue, le prix est saisi a la main en base et la
   mention de location vit DANS le meme .price, derriere un <br/> :

     <span class="price">A partir de 1.679 EUR <span style="...">ht</span><br/>
       <a href="/location/..."><span style="...">location possible</span></a></span>

   IMPORTANT : ce bloc reste en display:block. Le passer en flex blockifie
   ses enfants inline (le montant et le suffixe "ht"), qui s'empilent alors
   sur trois lignes au lieu de rester sur une seule.

   La mise en page tient donc en deux lignes de flux normal :
     - ligne 1 : le montant (ou "sur devis uniquement")
     - ligne 2 : la mention de location, mise en bloc pour passer a la ligne
   et min-height reserve la place de la ligne 2 y compris sur les cartes qui
   n'ont pas de mention : l'espace vide equivalent garde tous les montants
   alignes entre eux. */
#top ul.products .inner_product_header > .price,
#top ul.products .inner_product_header .price {
    display: block;
    margin-top: auto;
    padding-top: 16px;
    min-height: 39px;
    width: 100%;
}

/* Le <br/> ferait doublon avec la mise en bloc du lien ci-dessous. */
#top ul.products .inner_product_header .price br {
    display: none;
}

/* La mention passe sur sa propre ligne, sous le montant. */
#top ul.products .inner_product_header .price > a {
    display: block;
    line-height: 1.3;
}

/* Variante de markup : sur une partie du catalogue — precisement les fiches
   qui portent la mention "location possible" — le prix est enveloppe dans un
   lien supplementaire a l'interieur du bloc texte :

     .inner_product_header_cell > a.woocommerce-LoopProduct-link > .price

   C'est alors CE LIEN qui est l'element a ferrer en bas : un margin-top:auto
   pose sur le prix agirait a l'interieur du lien, ou il n'y a aucun espace
   libre a distribuer — le prix restait donc colle sous le titre. */
#top ul.products .inner_product_header_cell > a:has(.price),
#top ul.products .inner_product_header > a:has(.price) {
    display: contents;
}

/* --------------------------------------------------------------------------
   3 ter. LIGNE DU BAS RESERVEE POUR "LOCATION POSSIBLE"

   La mention se presente sous deux formes selon la fiche :
     - un lien frere du bloc prix, directement dans le bloc texte ;
     - un lien place a l'interieur du .price, derriere un <br/>.

   Dans les deux cas elle est ancree en bas du bloc texte, et le bloc texte
   reserve la hauteur correspondante pour TOUTES les cartes (padding-bottom).
   Les fiches sans mention gardent donc l'espace vide equivalent, ce qui
   aligne tous les montants entre eux — avec ou sans mention.
   -------------------------------------------------------------------------- */
#top ul.products .inner_product_header {
    padding-bottom: 50px;
}

#top ul.products .inner_product_header .price > a,
#top ul.products .inner_product_header_cell > a:not(:has(.price)):not(:empty) {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   4. IMAGE — format constant (evite les sauts de hauteur d'une carte a l'autre)
   -------------------------------------------------------------------------- */
#top ul.products .thumbnail_container {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
}

/* height:auto et NON 100% : lorsque width et height sont tous deux fixes,
   aspect-ratio est ignore, et height:100% retombe sur auto si le conteneur
   n'est pas dimensionne — l'image reprenait alors sa hauteur naturelle.
   Avec width:100% + aspect-ratio + height:auto, la zone est carree dans
   tous les cas, conteneur dimensionne ou non. */
#top ul.products > li.product img,
#top ul.products > li.product a img,
#top ul.products .thumbnail_container img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #fff;
    margin: 0 !important;
    display: block;
}

/* --------------------------------------------------------------------------
   5. TITRE — plus de min-height figee a 2 lignes (mrseo-enfold.css:9173),
      et neutralisation du decoupage page-title-splitter qui donnait une
      typo differente a chaque carte.
   -------------------------------------------------------------------------- */
#top ul.products h2.woocommerce-loop-product__title,
#top ul.products .woocommerce-loop-product__title {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0;
    font-family: 'light', 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #333;
    hyphens: none;
    overflow-wrap: break-word;
}

/* page-title-splitter emboite des <span class="pt_splitter-N"> stylees
   differemment : on les ramene toutes a la typo du titre. */
#top ul.products h2.woocommerce-loop-product__title span,
#top ul.products h2.woocommerce-loop-product__title .pt_splitter,
#top ul.products h2.woocommerce-loop-product__title .pt_splitter-1,
#top ul.products h2.woocommerce-loop-product__title .pt_splitter-2,
#top ul.products h2.woocommerce-loop-product__title .pt_splitter-3 {
    display: inline !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --------------------------------------------------------------------------
   6. PRIX — jamais coupe entre le montant, le symbole et le suffixe "ht"
   -------------------------------------------------------------------------- */
/* NB : ne pas redeclarer ici display ni margin — cette regle vient apres la
   section 3 avec la meme specificite et ecraserait le display:flex et le
   margin-top:auto qui assurent le ferrage bas du prix. Typographie seulement. */
#top ul.products .price,
#top ul.products .inner_product_header_cell .price {
    font-family: 'regular', 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: #7E9A47;
}

/* Le montant, le symbole monetaire et le suffixe restent solidaires. */
#top ul.products .price .woocommerce-Price-amount,
#top ul.products .price bdi,
#top ul.products .price .woocommerce-Price-currencySymbol {
    white-space: nowrap;
}

/* Restaure la taille reduite du suffixe, ecrasee par
   .inner_product_header_cell .price * { font-size:18px !important }
   (mrseo-enfold.css:9324). */
#top ul.products .price .woocommerce-price-suffix,
#top ul.products .inner_product_header_cell .price .woocommerce-price-suffix,
#top ul.products .inner_product_header_cell .price small {
    font-family: 'light', 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    white-space: nowrap;
}

/* Mentions libres saisies en base ("sur devis uniquement", "location
   possible") : meme corps que le reste, plus de gras aleatoire. */
#top ul.products .inner_product_header_cell .price strong,
#top ul.products .inner_product_header_cell .price b {
    font-weight: 400 !important;
    font-size: inherit !important;
}

/* --------------------------------------------------------------------------
   7. NUMERO — arbitre le conflit entre les deux regles .number
      (mrseo-enfold.css:9119 margin-bottom:-25px  vs  :10156 margin-bottom:5px)
   -------------------------------------------------------------------------- */
#top ul.products .number {
    display: inline-block;
    margin: 0 0 8px !important;
    padding: 1px 8px !important;
    background: #f4f4f4;
    border-radius: 3px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.6;
    color: #666;
    flex: 0 0 auto;
}

/* Le <br/> injecte apres le numero n'ajoute plus de hauteur.
   (Filet de securite : le <br/> est aussi retire cote PHP.) */
#top ul.products .inner_product_header_cell .number + br,
#top ul.products .number + br {
    display: none;
}

/* Fleche decorative Enfold : sans objet dans cette mise en page. */
#top ul.products .inner_product_header .avia-arrow {
    display: none;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE — memes selecteurs, donc meme specificite que plus haut
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {
    #top ul.products.columns-5,
    #top ul.products.columns-6 { --cols: 4; }
}

@media only screen and (max-width: 989px) {
    #top ul.products.columns-4,
    #top ul.products.columns-5,
    #top ul.products.columns-6 { --cols: 3; }
}

@media only screen and (max-width: 767px) {
    #top ul.products,
    #top ul.products.columns-3,
    #top ul.products.columns-4,
    #top ul.products.columns-5,
    #top ul.products.columns-6 {
        --cols: 2;
        --gap: 3%;
        gap: 22px var(--gap);
    }

    #top ul.products h2.woocommerce-loop-product__title { font-size: 14px !important; }
    #top ul.products .price,
    #top ul.products .inner_product_header_cell .price { font-size: 15px !important; }
    #top ul.products .inner_product_header_cell .price { padding-top: 12px; }
}