/* =====================================================================
   AUTO PARTS — thème enfant PrestaShop 8.x (parent : classic)
   Header sombre, accent rouge industriel, typo condensée.
   Design 100% original — aucun fichier de thème commercial copié.

   Sommaire
     1. Tokens & base
     2. Header
     3. Recherche  (correctifs fonctionnels)
     4. Menu principal
     5. Boutons & formulaires  (correctifs fonctionnels)
     6. Colonne gauche / catégories
     7. Produits (grille + fiche)
     8. Accueil (hero, promos, catégories, réassurance)
     9. Footer
    10. Éléments injectés par custom.js
    11. Responsive
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ==================================================================
   1. TOKENS & BASE
   ================================================================== */
:root{
  --ap-red:       #E4002B;
  --ap-red-dark:  #b80022;
  --ap-red-soft:  rgba(228,0,43,.10);
  --ap-dark:      #14171d;
  --ap-dark-2:    #1e232c;
  --ap-gray:      #f4f5f7;
  --ap-gray-2:    #eceef2;
  --ap-border:    #e3e6eb;
  --ap-text:      #1f2530;
  --ap-muted:     #6b7280;
  --ap-yellow:    #ffc400;

  --ap-radius:    10px;
  --ap-radius-sm: 6px;
  --ap-shadow:    0 1px 2px rgba(20,23,29,.05), 0 4px 14px rgba(20,23,29,.06);
  --ap-shadow-lg: 0 14px 32px rgba(20,23,29,.16);
  --ap-ease:      .18s cubic-bezier(.4,0,.2,1);

  --ap-title-font: 'Oswald', 'Arial Narrow', 'Segoe UI', sans-serif;
  --ap-body-font:  'Roboto', -apple-system, 'Segoe UI', Arial, sans-serif;
}

body{
  font-family: var(--ap-body-font);
  color: var(--ap-text);
  background: var(--ap-gray);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,
.page-title,
.product-title,
.featured-products .h2,
.products-section-title,
#main .page-header h1{
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
}

a{ color: var(--ap-red); transition: color var(--ap-ease); }
a:hover{ color: var(--ap-red-dark); }

/* Focus clavier visible partout (accessibilité) sans bordure parasite à la souris */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--ap-red);
  outline-offset: 2px;
}

/* ==================================================================
   2. HEADER
   ================================================================== */
#header{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  border-bottom: 3px solid var(--ap-red);
  /* Indispensable : sinon la liste d'autocomplétion de la recherche
     et les sous-menus sont rognés. */
  overflow: visible;
}
#header .header-top,
#header .header-nav,
.header-top{ overflow: visible; }

#header .header-top,
.header-top{ background: var(--ap-dark); }

#header .header-top a,
#header .header-top .header-nav,
.header-top .user-info a,
.header-top #_desktop_user_info a,
.header-top .currency-selector a,
.header-top .language-selector a{ color:#cfd4dd !important; }
#header .header-top a:hover{ color:#fff !important; }

#_desktop_logo img,
.header-logo img{ max-height: 60px; width: auto; }

/* panier */
.blockcart.cart-preview{ font-family: var(--ap-title-font); }
.blockcart .header a,
#_desktop_cart a{ color: var(--ap-text); }
.blockcart .cart-products-count{
  background: var(--ap-red);
  color:#fff;
  border-radius: 50%;
  padding: 1px 7px;
  font-size: 12px;
}

/* ==================================================================
   3. RECHERCHE — correctifs fonctionnels + placement
   Problèmes corrigés :
     - overflow:hidden sur le <form> rognait le panneau de suggestions ;
     - le bouton submit de classic est en position:absolute et passait
       sous le champ dès qu'on retouchait les paddings ;
     - classic met float:right sur #search_widget : dans la ligne flex du
       header, un élément flotté n'est plus aligné avec le logo et le menu
       et retombe souvent sur sa propre ligne. On annule le float et on
       aligne au flex.
   ================================================================== */

/* la ligne du header-top passe en alignement vertical centré :
   logo, menu et recherche sur la même ligne de base */
.header-top > .container > .row,
#header .header-top .row{
  align-items: center;
}

/* conteneur de la recherche (colonne générée par ps_searchbar) */
#_desktop_search_widget,
.header-top .search-widgets,
#header .search-widgets{
  float: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0;
  margin: 0;
}

#search_widget,
.search-widget,
.search-widgets{
  position: relative;   /* ancre du panneau de suggestions */
  z-index: 30;
  float: none;          /* annule le float:right de classic */
}

/* placement : uniquement dans l'en-tête */
#header #search_widget,
#header .search-widget,
#_desktop_search_widget #search_widget{
  display: block;
  width: 100%;
  max-width: 420px;
  min-width: 200px;
  margin: 0 0 0 auto;   /* colle la barre à droite de sa colonne */
}

/* la même barre est réaffichée dans la page « aucun résultat » :
   là elle doit rester centrée, pas collée à droite */
#content .search-widget,
.page-content .search-widget,
#products .search-widget{
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

#search_widget form,
.search-widget form{
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  height: 42px;         /* hauteur fixe : champ et bouton alignés */
  margin: 0;
  background: #fff;
  /* la barre est posée sur le bandeau sombre : bordure claire, pas noire */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ap-radius-sm);
  overflow: visible;    /* NE PAS remettre hidden : rogne l'autocomplétion */
  transition: border-color var(--ap-ease), box-shadow var(--ap-ease);
}
#search_widget form:focus-within,
.search-widget form:focus-within{
  border-color: var(--ap-red);
  box-shadow: 0 0 0 3px var(--ap-red-soft);
}

/* LOUPE
   Sur PrestaShop 8.x, l'icône n'est PAS dans le bouton : c'est un
   <i class="material-icons search"> frère du champ, placé en absolute
   par classic. Dès qu'on repasse le formulaire en flex, elle se
   superpose au texte saisi. On la remet dans le flux comme premier
   élément flex. */
#search_widget form > i,
#search_widget form i.material-icons,
#search_widget form i.search,
.search-widget form > i,
.search-widget form i.material-icons{
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 14px;
  margin: 0;
  font-size: 20px;
  line-height: 1;
  color: var(--ap-muted);
  pointer-events: none;   /* la loupe ne doit pas voler le clic au champ */
}

#search_widget form input[type="text"],
#search_widget form input[type="search"],
.search-widget form input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
  width: auto;          /* annule le width:100% de classic dans un flex */
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 12px 0 10px;   /* la loupe occupe déjà l'espace à gauche */
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: var(--ap-text);
  height: 100%;
}
#search_widget form input::placeholder{ color:#9aa1ad; }
#search_widget form input:focus{ outline: none; box-shadow: none; }

/* BOUTON
   PrestaShop 8.x masque le bouton de soumission (.d-none / .hidden-xs-up)
   et compte uniquement sur la touche Entrée : d'où une barre sans aucun
   bouton visible. On le réaffiche. */
#search_widget form button[type="submit"],
#search_widget form button[type="submit"].d-none,
#search_widget form button[type="submit"].hidden-xs-up,
#search_widget form button[type="submit"].hidden-xl-down,
.search-widget form button[type="submit"],
.search-widget form button[type="submit"].d-none{
  display: flex !important;
  /* classic place ce bouton en position:absolute (bottom/right) : il
     chevauche le champ. On le remet dans le flux du flex. */
  position: static;
  bottom: auto;
  right: auto;
  top: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  min-width: 46px;
  padding: 0 14px;
  margin: 0;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: var(--ap-red);
  color: #fff;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background var(--ap-ease);
}
#search_widget form button[type="submit"]:hover,
#search_widget form button[type="submit"]:focus{ background: var(--ap-red-dark); }
/* icône DANS le bouton : blanche, sans le padding réservé à la loupe de gauche */
#search_widget form button[type="submit"] i,
#search_widget form button[type="submit"] .search,
#search_widget form button[type="submit"] svg,
.search-widget form button[type="submit"] i{
  padding: 0;
  margin: 0;
  color:#fff;
  fill: none;
  stroke:#fff;
}

/* panneau de suggestions (jQuery UI autocomplete de ps_searchbar) */
.ui-autocomplete,
#search_widget .ui-autocomplete{
  position: absolute;
  z-index: 1000;
  margin: 4px 0 0;
  padding: 6px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  box-shadow: var(--ap-shadow-lg);
  max-height: 60vh;
  overflow-y: auto;
}
.ui-autocomplete .ui-menu-item{ border-bottom: 1px solid #f2f4f7; }
.ui-autocomplete .ui-menu-item:last-child{ border-bottom: 0; }
.ui-autocomplete .ui-menu-item a,
.ui-autocomplete .ui-menu-item > div{
  display: block;
  padding: 9px 14px;
  color: var(--ap-text);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.ui-autocomplete .ui-menu-item a:hover,
.ui-autocomplete .ui-menu-item > div:hover,
.ui-autocomplete .ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active{
  background: var(--ap-gray);
  color: var(--ap-red);
  border: 0;
  margin: 0;
}

/* recherche mobile de classic (bandeau replié) */
#_mobile_search_widget,
#mobile_top_menu_wrapper .search-widgets{
  display: block;
  padding: 10px 12px;
}
#_mobile_search_widget #search_widget,
#mobile_top_menu_wrapper #search_widget{
  max-width: none;
  min-width: 0;
  margin: 0;
}

/* page de résultats de recherche */
#search #js-product-list-header,
#search .page-header h1{ margin-bottom: 1rem; }

/* ==================================================================
   4. MENU PRINCIPAL
   ================================================================== */
#_desktop_top_menu,
.header-top #_desktop_top_menu{
  background: var(--ap-dark-2);
  border-radius: var(--ap-radius-sm);
}
.menu > ul,
#top-menu{ display: flex; flex-wrap: wrap; }

#top-menu .top-menu a,
.menu .top-menu a{
  color:#e7eaef !important;
  text-transform: uppercase;
  font-family: var(--ap-title-font);
  font-weight: 500;
  letter-spacing:.4px;
  padding: 12px 18px !important;
  transition: background var(--ap-ease), color var(--ap-ease);
}
#top-menu .top-menu a:hover,
#top-menu .top-menu li:hover > a,
.menu .top-menu a[data-depth="0"]:hover{
  background: var(--ap-red) !important;
  color:#fff !important;
}
.top-menu .sub-menu{
  border-top: 3px solid var(--ap-red);
  box-shadow: var(--ap-shadow-lg);
  border-radius: 0 0 var(--ap-radius-sm) var(--ap-radius-sm);
}
.top-menu ul[data-depth="1"] a{ color: var(--ap-text) !important; text-transform:none; }
.top-menu ul[data-depth="1"] a:hover{ color: var(--ap-red) !important; background: transparent !important; }

/* ==================================================================
   5. BOUTONS & FORMULAIRES — correctifs fonctionnels
   ================================================================== */
.btn{ cursor: pointer; }

.btn-primary,
.btn-primary:visited,
#submit-login,
.product-add-to-cart .btn,
.checkout .btn-primary,
button.btn.btn-primary,
.cart-detailed-actions .btn-primary{
  background: var(--ap-red);
  border-color: var(--ap-red);
  color:#fff;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing:.5px;
  font-weight: 600;
  border-radius: var(--ap-radius-sm);
  box-shadow: 0 2px 8px rgba(228,0,43,.22);
  transition: background var(--ap-ease), box-shadow var(--ap-ease), transform var(--ap-ease);
}
.btn-primary:hover,
.btn-primary:focus,
.product-add-to-cart .btn:hover,
button.btn.btn-primary:hover{
  background: var(--ap-red-dark);
  border-color: var(--ap-red-dark);
  color:#fff;
  box-shadow: 0 6px 16px rgba(228,0,43,.30);
  transform: translateY(-1px);
}
.btn-primary:active,
button.btn.btn-primary:active{ transform: translateY(0); box-shadow: 0 2px 6px rgba(228,0,43,.25); }

/* Un bouton désactivé doit *avoir l'air* désactivé (rupture de stock, etc.) */
.btn-primary:disabled,
.btn-primary.disabled,
.btn:disabled{
  background: #b9bec7;
  border-color: #b9bec7;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  opacity: 1;
}

.btn-secondary,
.btn-outline-secondary,
.btn-tertiary{
  border-radius: var(--ap-radius-sm);
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing:.4px;
  transition: background var(--ap-ease), color var(--ap-ease), border-color var(--ap-ease);
}
.btn-secondary:hover,
.btn-outline-secondary:hover{
  background: var(--ap-dark);
  border-color: var(--ap-dark);
  color:#fff;
}

/* champs de formulaire */
.form-control,
.form-control:not(.is-invalid),
select.form-control,
textarea.form-control{
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  background: #fff;
  transition: border-color var(--ap-ease), box-shadow var(--ap-ease);
}
.form-control:focus{
  border-color: var(--ap-red);
  box-shadow: 0 0 0 3px var(--ap-red-soft);
  outline: none;
}

/* sélecteur de quantité de la fiche produit */
.product-quantity .qty .input-group{ border-radius: var(--ap-radius-sm); overflow: hidden; }
.product-quantity .bootstrap-touchspin .btn-touchspin{ background:#fff; border:1px solid var(--ap-border); }
.product-quantity .bootstrap-touchspin .btn-touchspin:hover{ background: var(--ap-gray-2); }

/* ==================================================================
   6. COLONNE GAUCHE / CATÉGORIES
   ================================================================== */
#left-column{ padding-top: 0; }

#left-column .block-categories,
#left-column #search_filters_wrapper,
#left-column .block,
#right-column .block{
  background:#fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 0 0 8px;
  margin-bottom: 18px;
  box-shadow: var(--ap-shadow);
  overflow: hidden;
}

/* en-tête sombre type "menu pièces" */
#left-column .block-categories > .block-category-title,
#left-column .block-categories .h6:first-child,
#left-column #search_filters .h6,
#left-column .block .title_block,
#left-column .block h4:first-child{
  display: block;
  background: var(--ap-dark);
  color:#fff;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing:.5px;
  padding: 12px 16px;
  margin: 0 0 6px;
  font-size: 15px;
  border-bottom: 3px solid var(--ap-red);
}

#left-column .block-categories .category-top-menu{ padding: 4px 14px 10px; margin: 0; }
#left-column .block-categories .category-sub-menu{ list-style:none; margin:0; padding-left:12px; }
#left-column .block-categories li{ border-bottom: 1px solid #f0f2f5; }
#left-column .block-categories li:last-child{ border-bottom: 0; }
#left-column .block-categories a{
  display: block;
  padding: 9px 4px;
  color: var(--ap-text);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: color var(--ap-ease), padding-left var(--ap-ease), border-color var(--ap-ease);
}
#left-column .block-categories a:hover{
  color: var(--ap-red);
  padding-left: 10px;
  border-left-color: var(--ap-red);
}
#left-column .block-categories .navbar-toggler{ color: var(--ap-red); }

/* filtres à facettes */
#search_filters .facet .facet-title{ font-family: var(--ap-title-font); text-transform: uppercase; }
#search_filters .facet .custom-checkbox input:checked + span{ border-color: var(--ap-red); }

/* ==================================================================
   7. PRODUITS
   ================================================================== */
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container{
  background:#fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow);
  transition: box-shadow var(--ap-ease), transform var(--ap-ease), border-color var(--ap-ease);
  overflow: hidden;
}
.product-miniature .thumbnail-container:hover{
  box-shadow: var(--ap-shadow-lg);
  transform: translateY(-3px);
  border-color: var(--ap-red);
}
.product-miniature .product-title a{
  font-family: var(--ap-title-font);
  font-weight: 500;
  color: var(--ap-text);
  text-transform: none;
}
.product-miniature .product-title a:hover{ color: var(--ap-red); }
.product-miniature .product-price-and-shipping .price,
.product-price .current-price .price,
.product-prices .current-price span{
  color: var(--ap-red);
  font-family: var(--ap-title-font);
  font-weight: 700;
}
.product-miniature .regular-price{ color: var(--ap-muted); }

.product-flag{
  background: var(--ap-dark);
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(20,23,29,.2);
}
.product-flag.discount,
.product-flag.on-sale{ background: var(--ap-red); }
.product-flag.new{ background: var(--ap-yellow); color: var(--ap-dark); }

/* fiche produit */
.product-prices .current-price .price{ font-size: 2rem; }
.product-add-to-cart{ border-top: 1px solid var(--ap-border); padding-top: 1rem; }
#product .product-information .product-description{ line-height: 1.7; }
.product-reference,
.product-quantities{ font-family: var(--ap-title-font); }
.tabs .nav-tabs .nav-link{ color: var(--ap-muted); font-family: var(--ap-title-font); text-transform: uppercase; }
.tabs .nav-tabs .nav-link.active{
  color: var(--ap-red);
  border-bottom: 3px solid var(--ap-red);
}

/* titres de sections (produits vedettes, etc.) */
.featured-products .products-section-title,
.products-section-title,
#content .products-section-title{
  text-align: center;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 28px;
}
.products-section-title::after{
  content:'';
  display: block;
  width: 70px;
  height: 4px;
  background: var(--ap-red);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* slider */
.slick-slider img,
#index .carousel img{ border-radius: var(--ap-radius); }
.carousel .direction .carousel-control{ color:#fff; }

/* ==================================================================
   8. ACCUEIL
   ================================================================== */
.ap-home svg{
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------- hero */
.ap-hero{
  position: relative;
  margin: 4px 0 22px;
  border-radius: var(--ap-radius);
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 85% 20%, rgba(228,0,43,.35) 0%, rgba(228,0,43,0) 55%),
    linear-gradient(115deg, #10131a 0%, #1e232c 55%, #2a3040 100%);
  color:#fff;
}
.ap-hero::after{
  content:'';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
  pointer-events: none;   /* sinon le calque bloque les clics du hero */
}
.ap-hero-inner{ position: relative; z-index: 1; padding: 54px 44px; max-width: 660px; }

.ap-hero-eyebrow{
  display: inline-block;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  color:#ffb3bf;
  border: 1px solid rgba(255,255,255,.25);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.ap-hero-title{
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  margin: 0 0 12px;
  color:#fff;
}
.ap-hero-sub{ font-size: 16px; color:#dfe3ea; margin-bottom: 22px; max-width: 480px; }

/* recherche du hero */
.ap-hero-search{
  display: flex;
  align-items: stretch;
  background:#fff;
  border-radius: var(--ap-radius-sm);
  overflow: hidden;
  max-width: 540px;
  margin-bottom: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.ap-hero-search input[type="text"]{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 14px 16px;
  font-size: 15px;
  color: var(--ap-text);
  background: transparent;
}
.ap-hero-search input[type="text"]:focus{ outline: none; }
.ap-hero-search button{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: var(--ap-red);
  color:#fff;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing:.5px;
  font-size: 14px;
  padding: 0 22px;
  cursor: pointer;
  transition: background var(--ap-ease);
}
.ap-hero-search button:hover{ background: var(--ap-red-dark); }
.ap-hero-search button svg{ width: 18px; height: 18px; }

/* Boutons décoratifs (span, non cliquables) : pas de curseur main,
   pas de survol qui laisse croire à une action. */
.ap-hero-btn{
  display: inline-block;
  background: transparent;
  color:#fff;
  text-decoration: none;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing:.5px;
  padding: 12px 28px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: var(--ap-radius-sm);
  cursor: default;
  user-select: none;
}

/* ---------------------------------------------------------- promos */
.ap-promos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.ap-promo{
  display: flex;
  align-items: center;
  gap: 14px;
  background:#fff;
  border: 1px solid var(--ap-border);
  border-left: 4px solid var(--ap-red);
  border-radius: var(--ap-radius);
  padding: 16px 18px;
  color: var(--ap-text);
  box-shadow: var(--ap-shadow);
}
.ap-promo-ic{ font-size: 26px; color: var(--ap-red); line-height: 1; }
.ap-promo-txt{ display: block; }
.ap-promo strong{ display: block; font-family: var(--ap-title-font); text-transform: uppercase; font-size: 15px; }
.ap-promo small{ color: var(--ap-muted); }
.ap-promo-link{
  margin-left: auto;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-size: 12px;
  color: var(--ap-red);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

/* ---------------------------------------------------------- titre de section */
.ap-section-title{
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  text-align: center;
  font-size: 25px;
  padding-bottom: 12px;
  margin: 6px 0 26px;
  position: relative;
}
.ap-section-title::after{
  content:'';
  display: block;
  width: 70px;
  height: 4px;
  background: var(--ap-red);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* ---------------------------------------------------------- grille catégories */
.ap-cat-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 34px;
}
.ap-cat-card{
  display: flex;
  flex-direction: column;
  background:#fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 24px 20px 20px;
  text-align: center;
  box-shadow: var(--ap-shadow);
  transition: box-shadow var(--ap-ease), transform var(--ap-ease), border-color var(--ap-ease);
}
.ap-cat-card:hover{
  box-shadow: var(--ap-shadow-lg);
  transform: translateY(-3px);
  border-color: var(--ap-red);
}
.ap-cat-ic{
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-gray);
  border-radius: 50%;
  color: var(--ap-red);
  transition: background var(--ap-ease), color var(--ap-ease);
}
.ap-cat-ic svg{ width: 30px; height: 30px; }
.ap-cat-card:hover .ap-cat-ic{ background: var(--ap-red); color:#fff; }
.ap-cat-card h3{
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-size: 17px;
  margin-bottom: 10px;
}
.ap-cat-card ul{ list-style: none; padding: 0; margin: 0 0 16px; }
.ap-cat-card li{ color: var(--ap-muted); font-size: 13.5px; line-height: 1.9; }
.ap-cat-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  align-self: center;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing:.4px;
  color:#fff;
  background: var(--ap-dark);
  padding: 9px 20px;
  border-radius: var(--ap-radius-sm);
  text-decoration: none;
  cursor: default;
  user-select: none;
  transition: background var(--ap-ease);
}
.ap-cat-link svg{ width: 15px; height: 15px; }
/* la carte reste décorative : le survol colore le bouton, sans promesse de clic */
.ap-cat-card:hover .ap-cat-link{ background: var(--ap-red); }

/* ---------------------------------------------------------- réassurance */
.ap-trust{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 38px;
  padding: 20px;
  background:#fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
}
.ap-trust-item{ display: flex; align-items: center; gap: 12px; }
.ap-trust-item svg{ width: 28px; height: 28px; color: var(--ap-red); flex: 0 0 auto; }
.ap-trust-item strong{
  display: block;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  font-size: 14px;
}
.ap-trust-item small{ color: var(--ap-muted); font-size: 12.5px; }

/* ==================================================================
   9. FOOTER
   ================================================================== */
#footer{
  background: var(--ap-dark);
  color:#c3c9d3;
  padding-top: 40px;
}
#footer .footer-container{ background: transparent; }
#footer h3,
#footer .h3,
#footer .title,
.footer-container .h3{
  color:#fff;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
}
#footer a,
.footer-container li a{ color:#aab2bf; }
#footer a:hover{ color: var(--ap-red); }
#footer .links .collapse{ display: block; }
.footer-container{ border-top: 3px solid var(--ap-red); }

#footer .ps-emailsubscription input[type="email"]{ border-radius: var(--ap-radius-sm) 0 0 var(--ap-radius-sm); border: 0; }
#footer .ps-emailsubscription .btn{ border-radius: 0 var(--ap-radius-sm) var(--ap-radius-sm) 0; }

/* ==================================================================
   10. ÉLÉMENTS INJECTÉS PAR custom.js
   ================================================================== */
.ap-topbar{
  background: var(--ap-red);
  color:#fff;
  text-align: center;
  font-family: var(--ap-title-font);
  text-transform: uppercase;
  letter-spacing:.6px;
  font-size: 13px;
  padding: 7px 12px;
}
.ap-topbar strong{ font-weight: 700; }

#ap-back-to-top{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ap-dark);
  color:#fff;
  border: 0;
  border-radius: var(--ap-radius-sm);
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--ap-ease), transform var(--ap-ease), background var(--ap-ease);
  z-index: 900;   /* sous les modales Bootstrap (1050) */
  box-shadow: var(--ap-shadow-lg);
}
#ap-back-to-top.show{ opacity: 1; visibility: visible; transform: translateY(0); }
#ap-back-to-top:hover{ background: var(--ap-red); }

/* ==================================================================
   11. DIVERS & RESPONSIVE
   ================================================================== */
.page-header,
#main .page-header{ margin-bottom: 1.2rem; }
.breadcrumb{ background: transparent; font-size: 13px; }
.breadcrumb a{ color: var(--ap-muted); }
.alert-success{ border-left: 4px solid var(--ap-red); }

#wrapper{ background: var(--ap-gray); }
#main .page-content,
#main .page-header,
#main .page-footer{ background: transparent; }

@media (min-width: 992px){
  /* header collant : z-index sous les modales pour ne rien bloquer */
  #header{ position: sticky; top: 0; z-index: 90; }
}

@media (max-width: 991px){
  .ap-cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .ap-trust{ grid-template-columns: repeat(2, 1fr); }
  .ap-promos{ grid-template-columns: 1fr; }
}

@media (max-width: 767px){
  .ap-cat-grid{ grid-template-columns: 1fr; }
  .ap-trust{ grid-template-columns: 1fr; }
  .ap-hero-title{ font-size: 34px; }
  .ap-hero-inner{ padding: 36px 22px; }
  .ap-hero-search{ flex-direction: column; }
  .ap-hero-search button{ padding: 14px 22px; justify-content: center; }
  #search_widget, .search-widget{ max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}