/* ==========================================================================
   Cartes d'annonces et pages de listing.
   Chargée après base.css / custom.css : les règles ci-dessous affinent
   l'existant sans renommer une seule classe.
   ========================================================================== */

:root {
   --lst-blue: #0044BB;
   --lst-ink: #1b1f2a;
   --lst-muted: #6b7280;
   --lst-line: #e9ecf2;
}

/* --- Carte annonce -------------------------------------------------------- */

.product-card {
   /* Pas de height:100% : dans un carrousel slick en variableWidth, la hauteur
      de slide est figée et la carte se retrouvait rognée. La régularité vient
      du ratio d'image fixe et du titre sur deux lignes. */
   height: auto;
   /* 10px, comme la gouttière horizontale de `.grid-padding` : sans cette
      marge les rangées des grilles se touchaient. */
   margin-bottom: 10px !important;
   border: 1px solid var(--lst-line) !important;
   border-radius: 14px !important;
   background: #fff;
   overflow: hidden;
}

.product-card:hover {
   box-shadow: 0 8px 22px rgba(20, 24, 40, .10);
}

/* custom.css impose height:200px et min-height:150/200px sur ce bloc :
   la hauteur venait alors de là et non de l'image, d'où une bande grise
   sous la photo. C'est le ratio de `.product-img` qui doit commander. */
.product-card .product-media {
   position: relative;
   height: auto !important;
   min-height: 0 !important;
   margin: 0;
   background: #f4f6fa;
}

/* Le dégradé décoratif `.product-media::before` est en z-index 1 et devient
   visible au survol — donc au premier appui sur mobile, où il interceptait le
   clic vers la fiche. Il ne doit jamais capter d'événement, et le lien passe
   au-dessus. */
.product-card .product-media::before {
   pointer-events: none;
}

.product-card .product-img-link {
   position: relative;
   z-index: 2;
   display: block;
}

/* Ratio constant : les cartes d'une même rangée s'alignent enfin. */
.product-card .product-img {
   position: relative;
   height: auto !important;
   padding-top: 78%;
   overflow: hidden;
}

.product-card .product-img img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100% !important;
   object-fit: cover;
}

.product-card .product-type {
   position: absolute;
   top: 8px;
   left: 8px;
   z-index: 2;
   margin: 0;
}

.product-card .product-type .flat-badge {
   display: inline-block;
   padding: 3px 8px;
   border-radius: 20px;
   font-size: 10px !important;
   font-weight: 600;
   line-height: 1.5;
}

.product-discount {
   position: absolute;
   left: 8px;
   bottom: 8px;
   z-index: 2;
   padding: 3px 8px;
   border-radius: 20px;
   background: #d92d20;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.5;
}

.product-fav {
   position: absolute;
   top: 6px;
   right: 6px;
   z-index: 3;
}

.product-fav a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .92);
   box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
   color: var(--lst-muted);
   font-size: 14px;
   transition: all .15s ease;
}

.product-fav a:hover {
   background: #fff;
   color: #d92d20;
}

.product-fav .fas.fa-heart {
   color: #d92d20;
}

.product-card .product-content {
   padding: 10px 12px 12px !important;
}

.product-card .product-price {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: 6px;
   margin: 0 0 2px;
   font-size: 15px !important;
   font-weight: 700;
   line-height: 1.3;
   white-space: nowrap;
}

.product-card .product-price strong {
   font-weight: 700;
}

.product-card .product-price .del {
   font-size: 12px !important;
   font-weight: 400;
   color: #98a0ae !important;
}

/* Deux lignes puis ellipsis : plus lisible qu'une coupe à 20 caractères. */
.product-card .product-title {
   margin: 0;
   min-height: 2.6em;
}

.product-card .product-title a {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   font-size: 13px !important;
   font-weight: 500 !important;
   line-height: 1.3;
   color: var(--lst-ink);
   /* Une règle globale impose break-all et coupait les mots en plein milieu. */
   word-break: normal;
   overflow-wrap: break-word;
}

.product-card .product-title a:hover {
   color: var(--lst-blue);
}

.product-card .product-meta {
   display: flex;
   align-items: center;
   margin: 2px 0 0 !important;
   padding: 0 !important;
}

.product-card .product-meta span {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: 11px !important;
   color: var(--lst-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.product-card .product-meta i {
   font-size: 11px !important;
}

.product-card .mobile-cat {
   display: inline-block;
   margin: 8px 0 0;
   padding: 4px 9px;
   border-radius: 20px;
   background: #f2f4f8;
   color: var(--lst-muted) !important;
   font-size: 11px;
   font-weight: 500;
   line-height: 1.5;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.product-card .mobile-cat:hover {
   background: #eaf0ff;
   color: var(--lst-blue) !important;
}

@media (max-width: 575px) {
   .product-card .product-price {
      font-size: 14px !important;
   }

   .product-card .product-content {
      padding: 8px 10px 10px !important;
   }
}

/* --- Tuile « Tout voir » en fin de carrousel ------------------------------ */

.product-card.hight-custom {
   height: auto !important;
   line-height: normal !important;
}

.product-card.hight-custom a {
   display: flex !important;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 300px;
   padding: 20px;
   color: var(--lst-blue);
   text-align: center;
}

.product-card.hight-custom a span {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #eaf0ff;
   font-size: 16px;
}

.product-card.hight-custom a strong {
   margin: 0 !important;
   font-size: 13px;
}

/* --- Bandeau des pages de catalogue -------------------------------------- */

.catalogue-hero {
   position: relative;
   margin-bottom: 12px;
   padding: 14px 0;
   background: linear-gradient(135deg, #0b2f7a 0%, var(--lst-blue) 55%, #2f6bdc 100%);
   color: #fff;
   overflow: hidden;
}

.catalogue-hero::after {
   position: absolute;
   content: "";
   right: -60px;
   top: -70px;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .07);
}

.catalogue-hero h1 {
   margin: 0 0 4px;
   font-size: 19px;
   font-weight: 700;
   line-height: 1.25;
   color: #fff;
}

/* La phrase d'accroche est décorative : on la garde pour les grands écrans,
   où la hauteur ne se dispute pas. */
.catalogue-hero p {
   display: none;
   margin: 0 0 10px;
   font-size: 13px;
   color: rgba(255, 255, 255, .82);
   max-width: 620px;
}

.catalogue-hero .breadcrumb {
   margin: 0;
   padding: 0;
   background: none;
   font-size: 12px;
}

.catalogue-hero .breadcrumb-item,
.catalogue-hero .breadcrumb-item a,
.catalogue-hero .breadcrumb-item.active {
   color: rgba(255, 255, 255, .75) !important;
}

.catalogue-hero .breadcrumb-item a:hover {
   color: #fff !important;
}

.catalogue-hero .breadcrumb-item + .breadcrumb-item::before {
   color: rgba(255, 255, 255, .45);
}

@media (min-width: 768px) {
   .catalogue-hero {
      padding: 36px 0;
      margin-bottom: 16px;
   }

   .catalogue-hero h1 {
      font-size: 30px;
      margin-bottom: 6px;
   }

   .catalogue-hero p {
      display: block;
   }
}

/* --- Rangées par catégorie ------------------------------------------------ */

.categorie-bloc {
   margin-bottom: 18px;
   padding: 14px;
   background: #fff;
   border: 1px solid var(--lst-line);
   border-radius: 16px;
   box-shadow: 0 2px 10px rgba(20, 24, 40, .04);
}

.categorie-bloc-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 12px;
}

.categorie-bloc-head h2 {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 15px;
   font-weight: 700;
   color: var(--lst-ink);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.categorie-bloc-head .compte {
   flex: 0 0 auto;
   font-size: 11px;
   font-weight: 500;
   color: var(--lst-muted);
}

.categorie-voir {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 13px;
   border-radius: 20px;
   background: #eaf0ff;
   color: var(--lst-blue) !important;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   transition: all .15s ease;
}

.categorie-voir:hover {
   background: var(--lst-blue);
   color: #fff !important;
   text-decoration: none;
}

/* slick est en variableWidth sur mobile : on se contente d'espacer les
   diapositives, sans toucher au modèle de mise en page qu'il installe. */
.recomend-slider .slick-slide {
   height: auto;
   padding: 0 5px;
}

/* Une seule rangée dans un carrousel : la marge basse n'y servirait à rien. */
.recomend-slider .product-card,
.related-slider .product-card,
.suggest-slider .product-card {
   margin-bottom: 0 !important;
}

/* --- Raccourcis de catégories -------------------------------------------- */

.categorie-chips {
   display: flex;
   gap: 8px;
   margin-bottom: 16px;
   padding-bottom: 4px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}

.categorie-chips::-webkit-scrollbar {
   display: none;
}

.categorie-chip {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   border: 1px solid var(--lst-line);
   border-radius: 20px;
   background: #fff;
   color: var(--lst-ink) !important;
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   transition: all .15s ease;
}

.categorie-chip:hover {
   border-color: var(--lst-blue);
   background: #eaf0ff;
   color: var(--lst-blue) !important;
   text-decoration: none;
}

/* --- Page annonce : bloc vendeur ----------------------------------------- */

.vendeur-ligne {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: var(--lst-muted);
}

/* Auparavant `img-fluid rounded-circle` : l'avatar s'étirait en grande ellipse. */
.vendeur-avatar {
   flex: 0 0 auto;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   object-fit: cover;
   border: 1px solid var(--lst-line);
   background: #f4f6fa;
}

.vendeur-ligne strong {
   color: var(--lst-ink);
}

/* Prix de l'annonce : le prix promotionnel passe devant, l'ancien est barré. */
.ad-details-price .del,
.price .del {
   font-size: .62em !important;
   font-weight: 400 !important;
   opacity: .7;
   margin-left: 6px;
}

/* --- Carrousels : repérage et navigation sur mobile ----------------------- */

.recomend-slider {
   position: relative;
}

/* Flèches ajoutées par carousel-nav.js là où slick n'en pose pas (≤ 600px). */
.carousel-nav {
   position: absolute;
   top: 60px;
   z-index: 5;
   display: none;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: rgba(255, 255, 255, .96);
   box-shadow: 0 2px 8px rgba(20, 24, 40, .22);
   color: var(--lst-ink);
   font-size: 13px;
   transition: opacity .15s ease;
}

.carousel-nav--prev {
   left: 6px;
}

.carousel-nav--next {
   right: 6px;
}

.carousel-nav[disabled] {
   opacity: 0;
   pointer-events: none;
}

/* Voile dégradé sur le bord droit : signale qu'il reste des annonces. */
.recomend-slider::after {
   position: absolute;
   content: "";
   top: 0;
   right: 0;
   width: 34px;
   height: 100%;
   z-index: 4;
   pointer-events: none;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92));
   opacity: 0;
   transition: opacity .2s ease;
}

.recomend-slider.a-suivre::after {
   opacity: 1;
}

@media (max-width: 600px) {

   .carousel-nav {
      display: flex;
   }

   /* Le carrousel déborde jusqu'aux bords de l'écran : deux cartes entières
      tiennent alors dans la largeur, et la troisième dépasse franchement. */
   .categorie-bloc {
      padding-left: 0;
      padding-right: 0;
   }

   .categorie-bloc-head {
      padding: 0 14px;
   }

   .categorie-bloc .recomend-slider {
      margin: 0 -15px;
   }

   .categorie-bloc .recomend-slider .slick-list {
      padding-left: 14px !important;
   }

   /* 250px : une carte entière occupe l'essentiel de la largeur et la
      suivante déborde d'environ 90px — on voit clairement qu'il y en a une
      autre, sans qu'une troisième vienne s'entasser au bord. */
   .recomend-slider .product-card {
      width: 250px !important;
   }

   /* Une carte large mérite une image plus panoramique, sinon elle devient
      trop haute pour l'écran. */
   .recomend-slider .product-img {
      padding-top: 62%;
   }

   /* À cette largeur le prix promotionnel tient sur une seule ligne : plus
      besoin de réserver deux lignes comme sur les cartes étroites. */
   .recomend-slider .product-price {
      font-size: 16px !important;
   }

   .recomend-slider .product-title a {
      font-size: 14px !important;
   }
}

/* --- Bannière d'accueil --------------------------------------------------- */

/* Les bannières d'origine (`img/banner*.svg`) sont des mosaïques de 32 à 40
   photos en pleine résolution encodées en base64 : 6 Mo transférés sur mobile,
   7,3 Mo sur bureau, pour une zone affichée de 390x533 px. C'était l'élément
   LCP de la page d'accueil. Ces versions aplaties en WebP à la résolution
   d'affichage pèsent 88 Ko et 173 Ko.
   Le suffixe .v1 est le cache-buster : pour remplacer la bannière, déposer un
   .v2 et changer les deux références (ici et le préchargement du gabarit),
   sinon les navigateurs garderont l'ancienne un an. 
   Le `!important` reprend celui de la règle d'origine dans custom.css. */
.banner-part {
   background-image: url('/img/banner.v1.webp') !important;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

@media (max-width: 600px) {
   .banner-part {
      background-image: url('/img/banner-mobile.v1.webp') !important;
   }
}