/* =====================================================================
   AID Remorques — Styles communs à toutes les listes de produits
   À déposer par FTP dans : themes/aidremorques-child/assets/css/aid-cards.css
   Puis à charger sur TOUT le site, via le même bloc Content Anywhere
   que aid-fonts.css (hook displayAfterBodyOpeningTag) :

     <link rel="stylesheet" href="/themes/aidremorques-child/assets/css/aid-cards.css">

   Pourquoi ce fichier : la vignette produit (miniatures/product.tpl) est
   utilisée par les pages catégorie, la recherche, les pages fabricants et
   les nouveautés. Or son style vivait dans category-header.tpl, qui ne
   s'affiche QUE sur les pages catégorie. Partout ailleurs, la vignette
   sortait sans aucun style — d'où la flèche « Voir la fiche » affichée
   en 332 px de haut sur la page de résultats de recherche.
   ===================================================================== */


/* ==== Vignette produit AID (miniatures/product.tpl) ==== */
.aid-card{width:100%;height:100%;background:#fff;border:1px solid #E0E0E0;transition:.2s;font-family:"Roboto",Arial,sans-serif}
.aid-card:hover{border-color:#E87B1E;transform:translateY(-4px);box-shadow:0 12px 28px rgba(26,26,26,.10)}
.aid-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.aid-card__img{position:relative;aspect-ratio:4/3;background:#F5F5F5;overflow:hidden}
.aid-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.aid-card__tag{position:absolute;top:10px;left:10px;z-index:1;font-family:"Roboto Condensed",Arial,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background:#E87B1E;color:#fff;padding:4px 9px}
.aid-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.aid-card__title{font-family:"Roboto Condensed",Arial,sans-serif;font-size:17px;font-weight:600;color:#2C2C2C;margin:0 0 8px;transition:color .2s}
.aid-card:hover .aid-card__title{color:#E87B1E}
.aid-card__desc{font-size:13px;color:#6B6B6B;margin:0 0 14px;flex:1}
.aid-card__more{font-family:"Roboto Condensed",Arial,sans-serif;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#A04D14;display:inline-flex;align-items:center;gap:6px}
.aid-card__more svg{width:15px;height:15px;stroke:currentColor;fill:none;transition:transform .2s}
.aid-card:hover .aid-card__more svg{transform:translateX(4px)}

/* Filet de sécurité : aucune icône de vignette ne peut plus s'étirer,
   même si une classe venait à changer un jour. */
.aid-card svg{max-width:24px;max-height:24px}


/* ==== Menu latéral (module Arbre de catégories) ==== */
.block-categories{font-family:"Roboto",Arial,sans-serif;background:transparent;border:0;padding:0}
.block-categories .block-title,.block-categories h2,.block-categories .title_block{font-family:"Roboto Condensed",Arial,sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#2C2C2C;border-bottom:2px solid #E87B1E;padding:0 0 10px;margin:0 0 6px}
.block-categories ul{list-style:none;margin:0;padding:0}
.block-categories .category-top-menu > li{border-bottom:1px solid #E0E0E0}
.block-categories a{display:block;color:#3C3C3C;text-decoration:none;padding:10px 2px;font-size:14.5px;transition:color .15s,padding .15s}
.block-categories a:hover{color:#A04D14;padding-left:6px}
.block-categories .category-top-menu > li > a{font-family:"Roboto Condensed",Arial,sans-serif;font-weight:600;color:#2C2C2C}
.block-categories li li a{padding-left:14px;font-size:14px;color:#6B6B6B}
.block-categories li li a:hover{color:#A04D14}
.block-categories .currentCategory > a,.block-categories a.current,.block-categories li.current > a{color:#A04D14;font-weight:600}
.block-categories .collapse-icons,.block-categories .collapse-icons .add,.block-categories .collapse-icons .remove,.block-categories .navbar-toggler{color:#E87B1E}
.block-categories .collapse-icons .material-icons{color:#E87B1E}


/* ==== Pagination — couleurs AID ==== */
.pagination a,.pagination .page-link,.page-list a,.pagination i,.pagination svg{color:#A04D14!important;border-color:#E0E0E0}
.pagination a:hover,.pagination .page-link:hover,.page-list a:hover{color:#E87B1E!important}
.pagination .disabled a,.pagination .disabled span,.page-list .disabled span{color:#B0B0B0!important}
.pagination .current a,.pagination .current span,.page-list .current a,.page-list .current span,.pagination .page-item.active .page-link,.pagination li.active a{color:#fff!important;background:#E87B1E!important;border-color:#E87B1E!important;font-weight:600}


/* ==== Variante « bandeau » du bloc illustré ====================================
   Image pleine largeur au-dessus du texte, au lieu des deux colonnes.
   Utilisée par la description de la catégorie Occasions.

   Pourquoi ici et pas en style="" dans la description : l'éditeur du back-office
   filtre les propriétés de mise en page. Testé le 11/09/2026 — il conserve
   border, padding, margin, background et height, mais supprime display, width,
   object-fit et aspect-ratio. La mise en page doit donc venir d'une feuille de style.

   Usage : <div class="aid-bloc aid-bloc--banner">
   Les sélecteurs sont volontairement doublés en classe pour l'emporter sur les
   règles .aid-bloc de category-header.tpl, quel que soit l'ordre de chargement.
   ============================================================================ */
.aid-bloc.aid-bloc--banner{display:block;border-bottom:0;padding-bottom:0;margin-bottom:0}
.aid-bloc--banner .aid-bloc__img{margin:0 0 20px;background:#F5F5F5;border:1px solid #E0E0E0}
.aid-bloc--banner .aid-bloc__img img{
  display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill;
}