/* =============================================================================
   ADMD — Boutique de goodies
   Thème enfant child_classic / PrestaShop
   Conformité : RGAA 4.1
   =============================================================================

   TABLE DES MATIÈRES
   1.  Variables CSS (design tokens)
   2.  Reset & base accessibilité
   3.  Focus visible (RGAA 10.7)
   4.  Typographie (piepie / sinter)
   5.  Surfaces & contrastes (RGAA 3.2)
   6.  Liens (RGAA 6.1)
   7.  Formulaires & champs (RGAA 11)
   8.  Navigation principale (RGAA 12)
   9.  Header
   10. Footer
   11. Boutons & CTA
   12. Messages d'état (RGAA 10)
   13. Médias & images (RGAA 1)
   14. Skip links (RGAA 12.7)
   ============================================================================= */


/* =============================================================================
   1. VARIABLES CSS
   ============================================================================= */

:root {
  /* Couleurs de marque */
  --color-primary:        #234d86; /* bleu — ratio sur #fff : 7.1:1 ✓ AAA */
  --color-primary-dark:   #1a3a65; /* bleu foncé hover — ratio sur #fff : 10.5:1 ✓ */
  --color-primary-light:  #e8eff9; /* bleu très pâle — fond teinté */
  --color-secondary:      #c94f28; /* orange foncé — ratio sur #fff : 4.6:1 ✓ AA */
  --color-secondary-light:#fff0eb; /* orange très pâle — fond teinté */

  /* Surfaces (fond blanc, comme le Classic) */
  --color-bg:             #ffffff;
  --color-bg-alt:         #f6f6f6; /* gris très léger — identique au Classic */
  --color-surface:        #ffffff;
  --color-surface-dark:   #234d86; /* bleu primaire — fond footer */
  --color-border:         #e8e8e8; /* bordures légères */
  --color-border-strong:  #c8d3e0;

  /* Texte */
  --color-text:           #232323; /* identique au Classic */
  --color-text-muted:     #7a7a7a; /* identique au Classic */
  --color-text-on-dark:   #ffffff;
  --color-text-on-dark-muted: #c8d8f0;

  /* Focus */
  --color-focus:          #0057b8; /* bleu vif — visible sur fond blanc et foncé */
  --focus-outline:        3px solid var(--color-focus);
  --focus-offset:         3px;

  /* Typographie */
  --font-display: "piepie", Georgia, serif;
  --font-body:    "sinter", Arial, sans-serif;

  /* Tailles (base 16px — RGAA 10.4) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3rem;

  /* Espacement */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(35, 77, 134, 0.12);
  --shadow-md: 0 4px 12px rgba(35, 77, 134, 0.15);

  /* Transitions */
  --transition: 200ms ease-in-out;
}


/* =============================================================================
   2. RESET & BASE ACCESSIBILITÉ
   ============================================================================= */

/* Mouvement réduit — RGAA 13.8 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: 100%; /* RGAA 10.4 : texte redimensionnable */
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6; /* RGAA 10.4 : interligne ≥ 1.5 */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* bloque le scroll horizontal causé par le carousel full-width */
}

#wrapper {
  overflow-x: hidden; /* empêche le débordement des éléments full-width hors container */
}

p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
}

/* Correction : ne pas contraindre .container qui appartient au thème parent */
.page-content {
  max-width: 80rem; /* pleine largeur gérée par Bootstrap/Classic */
}


/* =============================================================================
   3. FOCUS VISIBLE (RGAA 10.7)
   ============================================================================= */

*:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.btn:focus-visible,
a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 5px rgba(0, 87, 184, 0.25);
}


/* =============================================================================
   4. TYPOGRAPHIE
   ============================================================================= */

/* Hiérarchie Hn — RGAA 9.1 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* Grands titres : police display piepie */
h1,
.page-header h1,
.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

/* Titres sur fond coloré (header, bannière) */
.header-top h1,
.banner-title,
.hero-on-dark h1 {
  font-family: var(--font-display);
  color: var(--color-text-on-dark);
}


/* =============================================================================
   5. SURFACES & CONTRASTES
   ============================================================================= */

/*
   Ratios de contraste (fond blanc #ffffff) :
   - #232323 sur #fff : 17.0:1 ✓ AAA  (texte principal)
   - #7a7a7a sur #fff :  4.6:1 ✓ AA   (texte secondaire — identique au Classic)
   - #234d86 sur #fff :  7.1:1 ✓ AAA  (primaire)
   - #c94f28 sur #fff :  4.6:1 ✓ AA   (secondaire — liens, prix réduit)
   - #fff   sur #234d86 : 7.1:1 ✓ AAA (footer, sous-menus)
   - #5b3d8f sur #fff :  7.2:1 ✓ AAA  (liens visités)
*/

/* Fond général */
#wrapper,
.page-wrapper {
  background-color: var(--color-bg);
}


/* Cartes produits */
.product-miniature,
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: box-shadow var(--transition);
}

.product-miniature:hover {
  box-shadow: var(--shadow-md);
}

/* Prix */
.price,
.product-price {
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-lg);
}

.regular-price {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.discount-percentage,
.has-discount .price {
  color: var(--color-secondary);
}

/* Bannière accent (barre d'information) */
.banner-info,
.promo-banner {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-weight: 600;
}


/* =============================================================================
   6. LIENS (RGAA 6.1)
   ============================================================================= */

/* Liens courants : soulignés + couleur distincte */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}

a:hover,
a:active {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Lien visité distingué — RGAA 6.1 */
a:visited {
  color: #5b3d8f; /* violet — ratio sur #fff : 7.2:1 ✓ */
}

/* Liens de navigation (sans soulignement, mais indicateur visible) */
.header-nav a,
.nav-link,
#_desktop_top_menu a {
  text-decoration: none;
}


/* =============================================================================
   7. FORMULAIRES & CHAMPS (RGAA 11)
   ============================================================================= */

/* Labels — RGAA 11.1 */
label,
.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* Champ obligatoire */
label .required,
.form-label .required {
  color: #b91c1c; /* rouge foncé — ratio sur #fff : 5.9:1 ✓ */
  margin-left: var(--space-xs);
}

/* Champs de saisie */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.form-control {
  background-color: #ffffff;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input::placeholder,
textarea::placeholder {
  color: #6b7280; /* ratio sur #fff : 4.6:1 ✓ */
  opacity: 1;
}

/* Focus champs — RGAA 10.7 */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--color-focus);
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 4px rgba(0, 87, 184, 0.15);
}

/* État invalide — RGAA 11.10 */
input:invalid,
.form-control.is-invalid {
  border-color: #b91c1c;
}

/* Message d'erreur — RGAA 11.10 */
.form-error,
.invalid-feedback {
  color: #b91c1c; /* ratio sur #fff : 5.9:1 ✓ */
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Checkbox & radio — zone de clic ≥ 44px (RGAA 13.9) */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.custom-checkbox label,
.custom-radio label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-xs) 0;
}


/* =============================================================================
   8. NAVIGATION PRINCIPALE (RGAA 12)
   ============================================================================= */

/* Même logique que le Classic : fond blanc, couleur primaire en touche hover/actif */
#_desktop_top_menu .top-menu,
.top-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

#_desktop_top_menu .top-menu > li > a,
.top-nav > li > a {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  min-height: 44px; /* RGAA 13.9 */
  text-decoration: none;
  transition: color var(--transition);
}

/* Touche couleur primaire au survol */
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li > a:focus,
.top-nav > li > a:hover {
  color: var(--color-primary);
}

/* Page courante — RGAA 12.2 */
#_desktop_top_menu .top-menu > li.current > a,
#_desktop_top_menu .top-menu > li > a[aria-current="page"] {
  color: var(--color-primary);
}

/* Sous-menu — disposition en colonne */
.top-menu .sub-menu,
.popover.sub-menu {
  background-color: #ffffff;
  border: 1px solid var(--color-border-strong);
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

/* Annule le float:left du thème parent qui met les items en ligne */
#_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"] > li,
.top-menu .sub-menu ul[data-depth="1"] > li {
  float: none;
  margin: 0;
  display: block;
}

/* Colonne propre pour tous les niveaux */
#_desktop_top_menu .top-menu .sub-menu ul,
.top-menu .sub-menu ul {
  display: flex;
  flex-direction: column;
  padding: var(--space-sm) 0;
  margin: 0;
  list-style: none;
}

/* Sous-menu : largeur auto calée sur le contenu, positionné sous la catégorie parente */
#_desktop_top_menu .top-menu .sub-menu,
.top-menu .sub-menu {
  position: absolute;
  width: auto;
  min-width: 180px;
  max-width: 320px;
  white-space: nowrap;
  left: 0;
  top: 100%;
}

/* Le li parent doit être en position relative pour ancrer le sous-menu */
#_desktop_top_menu .top-menu[data-depth="0"] > li {
  position: relative;
}

.sub-menu a {
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.sub-menu a:hover,
.sub-menu a:focus {
  color: var(--color-primary);
  background-color: var(--color-primary-light); /* bleu très pâle */
}

/* Fil d'Ariane — RGAA 12.6 */
.breadcrumb {
  background-color: transparent;
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
}

.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--color-text-muted);
  margin-right: var(--space-xs);
}

.breadcrumb a {
  color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text-muted);
  font-weight: 600;
}


/* =============================================================================
   9. HEADER
   ============================================================================= */

/* Fond blanc comme le Classic, box-shadow légère */
#header {
  background-color: #ffffff;
  color: var(--color-text);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11); /* identique au Classic */
}

/* Barre de navigation supérieure (langue, compte, panier) */
.header-nav {
  border-bottom: 2px solid var(--color-bg-alt); /* #f6f6f6 — discret */
}

/* Filet de couleur primaire uniquement sous le header-top */
.header-top {
  border-bottom: 2px solid var(--color-primary); /* seule touche bleue */
}

/* Logo */
#_desktop_logo a {
  display: inline-flex;
  align-items: center;
}

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

/* --- Right-nav : alignement uniforme connexion + panier --- */

/* Conteneur : flex, centré verticalement, hauteur fixe */
#header .header-nav .right-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  gap: var(--space-md);
}

#header .header-nav .user-info i{
  transform: translateY(-7px);
}
/* Reset des margin-top parasites du thème parent */
#header .header-nav .user-info,
#header .header-nav .language-selector {
  margin-top: 0;
  white-space: nowrap;
}

#header .header-nav .user-info {
  margin-left: 0;
  text-align: right;

}

/* Lien connexion */
#header .header-nav .user-info a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  min-height: 44px;
  padding: 0 var(--space-sm);
  padding-top: 9px;
  transition: color var(--transition);
}

#header .header-nav .user-info a:hover {
  color: var(--color-primary);
}

/* Panier : reset total du bloc du thème parent */
#header .header-nav .blockcart {
  display: inline-flex;
  align-items: center;
  height: auto;
  min-height: 44px;
  padding: 0 var(--space-sm);
  margin-left: 0;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

/* .header interne du panier : reset margin-top + alignement */
#header .header-nav .blockcart .header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 0;
}

/* Icône panier alignée */
#header .header-nav .cart-preview .shopping-cart {
  vertical-align: middle;
  line-height: 1;
  color: var(--color-text-muted);
}

/* Couleurs panier : identiques au lien connexion */
#header .header-nav .blockcart a,
#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i,
#header .header-nav .blockcart.active a:hover {
  color: var(--color-text-muted);
}

#header .header-nav .blockcart a:hover,
#header .header-nav .blockcart.active a:hover {
  color: var(--color-primary);
}

/* Pas de background sur le panier (vide ou plein) */
#header .header-nav .cart-preview.active,
#header .header-nav .blockcart.active {
  background: transparent;
}

/* Compteur panier : texte simple, pas de badge */
#header .header-nav .blockcart .cart-products-count,
.cart-products-count {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Barre de recherche */
#search_widget input[type="text"],
.search-widget input {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  transition: background-color var(--transition), border-color var(--transition);
}

#search_widget input:focus,
.search-widget input:focus {
  background-color: #ffffff;
  border-color: var(--color-primary);
}

#search_widget input::placeholder,
.search-widget input::placeholder {
  color: var(--color-text-muted);
}

/* Bouton recherche : touche orange */
#search_widget button,
.search-widget button {
  background-color: var(--color-secondary);
  color: #ffffff;
  border: 1px solid var(--color-secondary);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  transition: background-color var(--transition);
}

#search_widget button:hover,
.search-widget button:hover {
  background-color: #a83e1f;
  border-color: #a83e1f;
}


/* =============================================================================
   10. FOOTER
   ============================================================================= */

#footer {
  background-color: var(--color-bg);
  border-top: 3px solid var(--color-secondary);
  color: var(--color-text);
  padding-top: var(--space-2xl);
}

/* Titres footer — tous unifiés à 1rem comme le thème parent */
.footer-container h3,
.footer-container h4,
.footer-container .h3,
.footer-container .h4,
.links .h3,
.links .title,
.block-contact-title,
.blockcms-title,
.myaccount-title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  line-height: 1.5;
}

.myaccount-title a {
  border-bottom: none;
}

/* Lien dans le titre "Votre compte" : annuler le flex/min-height hérité de .footer-container a */
.footer-container .myaccount-title a,
#block_myaccount_infos .myaccount-title a {
  display: inline;
  min-height: auto;
  padding: 0;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.footer-container .myaccount-title a:hover,
#block_myaccount_infos .myaccount-title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.footer-container a,
.links a {
  color: var(--color-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-xs) 0;
  transition: color var(--transition);
}

.footer-container a:hover,
.links a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.footer-bottom {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.footer-bottom a {
  color: var(--color-text-muted);
}

.footer-bottom a:hover {
  color: var(--color-primary);
}

/* ps_linklist : forcer col-4 au lieu du col-6 généré par le back-office */
#footer .links {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

/* =============================================================================
   11. BOUTONS & CTA (RGAA 11.9 + 13.9)
   ============================================================================= */

.btn,
button:not([class]),
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

/* Bouton principal */
.btn-primary,
.add-to-cart {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff; /* ratio 7.1:1 ✓ */
}

.btn-primary:hover,
.add-to-cart:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
}

/* Bouton CTA orange */
.btn-secondary,
.btn-cta {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #ffffff; /* ratio 4.6:1 ✓ */
}

.btn-secondary:hover,
.btn-cta:hover {
  background-color: #a83e1f;
  border-color: #a83e1f;
  color: #ffffff;
}

/* Bouton outline */
.btn-outline-primary {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary); /* ratio 7.1:1 ✓ */
}

.btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}

/* État désactivé */
.btn:disabled,
.btn[aria-disabled="true"],
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* =============================================================================
   12. MESSAGES D'ÉTAT (RGAA 10 — jamais par couleur seule)
   ============================================================================= */

.alert,
.notifications-container .alert {
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
  border-left: 5px solid;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

/* Succès */
.alert-success {
  background-color: #f0fdf4;
  border-left-color: #16a34a;
  color: #14532d; /* ratio sur #f0fdf4 : 9.2:1 ✓ */
}

/* Erreur */
.alert-danger,
.alert-error {
  background-color: #fef2f2;
  border-left-color: #dc2626;
  color: #7f1d1d; /* ratio sur #fef2f2 : 8.4:1 ✓ */
}

/* Avertissement */
.alert-warning {
  background-color: #fffbeb;
  border-left-color: #d97706;
  color: #78350f; /* ratio sur #fffbeb : 9.5:1 ✓ */
}

/* Info */
.alert-info {
  background-color: #eff6ff;
  border-left-color: var(--color-primary);
  color: #1e3a5f; /* ratio sur #eff6ff : 9.8:1 ✓ */
}


/* =============================================================================
   13. MÉDIAS & IMAGES (RGAA 1)
   ============================================================================= */

/* alt="" obligatoire en HTML pour les images décoratives */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.product-cover img,
.product-miniature img,
.thumb-container img {
  border-radius: var(--radius-md);
  transition: transform var(--transition);
}

.product-miniature:hover .product-cover img,
.product-miniature:hover .thumb-container img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .product-miniature:hover .product-cover img,
  .product-miniature:hover .thumb-container img {
    transform: none;
  }
}


/* =============================================================================
   14. SKIP LINKS — LIENS D'ÉVITEMENT (RGAA 12.7)
   ============================================================================= */

.skip-links,
#skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  list-style: none;
  padding: 0;
  margin: 0;
}

.skip-links a,
#skip-links a {
  position: absolute;
  top: -999px;
  left: -999px;
  background-color: var(--color-primary);
  color: #ffffff; /* ratio 7.1:1 ✓ */
  font-weight: 700;
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.skip-links a:focus,
#skip-links a:focus {
  position: fixed;
  top: 0;
  left: var(--space-md);
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}


/* =============================================================================
   15. SURCHARGE COULEURS THÈME PARENT
   Remplacement de #24b9d7 (cyan Classic) et #f39d72 (orange clair Classic)
   par les couleurs de la charte ADMD.
   ============================================================================= */

/* --- Liens --- */
a { color: var(--color-primary); }
a:hover,
#header a:hover,
#header .top-menu a[data-depth="0"]:hover { color: var(--color-primary-dark); }
a:visited { color: #5b3d8f; }

/* --- Boutons Bootstrap primary --- */
.btn-primary,
.btn-primary:hover,
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary:disabled.focus,
.btn-primary:disabled:focus,
.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.active,
.btn-outline-primary:active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-link { color: var(--color-primary); }

/* --- Dropdown actif --- */
.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover {
  background-color: var(--color-primary);
}
.dropdown-item:focus,
.dropdown-item:hover { color: var(--color-primary); }

/* --- Nav pills --- */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover {
  background-color: var(--color-primary);
}

/* --- Cards Bootstrap --- */
.card-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.card-outline-primary,
.card-outline-secondary { border-color: var(--color-primary); }

/* --- Pagination --- */
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.page-link { color: var(--color-primary); }
.pagination .current a { color: var(--color-primary); }

/* --- Tags, list-group --- */
.tag-primary { background-color: var(--color-primary); }
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* --- Utilitaires Bootstrap --- */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }

/* --- Focus outline (formulaires) --- */
.form-control:focus { outline: 0.1875rem solid var(--color-primary); }
.input-group.focus { outline: 0.1875rem solid var(--color-primary); }
.search-widget form input[type="text"]:focus { outline: 3px var(--color-primary) solid; }
.block_newsletter form input[type="text"]:focus { outline: 3px var(--color-primary) solid; }
.block_newsletter form input[type="email"]:focus { border: 3px var(--color-primary) solid; }
.product-customization .product-message:focus { outline: 0.1875rem solid var(--color-primary); }

/* --- Icônes & interactions header --- */
.block_newsletter form input[type="text"]:focus + button .search,
.btn-unstyle:focus .expand-more,
.search-widget form input[type="text"]:focus + button .search { color: var(--color-primary); }

/* --- Spinner quantité produit --- */
.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default { background: var(--color-primary); }

/* --- Radio custom --- */
.custom-radio input[type="radio"]:checked + span { background-color: var(--color-primary); }

/* --- Menus & dropdowns --- */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.page-my-account #content .links a:hover i,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover { color: var(--color-primary); }

/* --- Checkout adresse sélectionnée --- */
body#checkout section.checkout-step .address-item.selected {
  border: var(--color-primary) 3px solid;
}

/* --- Miniature produit quick-view --- */
.product-miniature .highlighted-informations .quick-view:hover { color: var(--color-primary); }

/* --- Tris & filtres --- */
.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover { background: var(--color-primary); }
.facet-dropdown.open > .select-title { border: 3px solid var(--color-primary); }
.facet-dropdown .select-list:hover { background: var(--color-primary); }

/* --- Catégories & panier --- */
#subcategories ul li .subcategory-name:hover,
.block-categories .arrows .arrow-down:hover,
.block-categories .arrows .arrow-right:hover,
.block-categories .collapse-icons .add:hover,
.block-categories .collapse-icons .remove:hover,
.cart-grid-body a.label:hover { color: var(--color-primary); }
#subcategories ul li:hover .subcategory-image a { border: 5px solid var(--color-primary); }

/* --- Prix produit normal --- */
.product-price { color: var(--color-primary); }

/* --- Prix réduit & badges discount (#f39d72 → orange charte) --- */
.has-discount p,
.has-discount.product-price,
.has-discount .page-content.page-cms ul,
.page-content.page-cms .has-discount ul { color: var(--color-secondary); }

.has-discount .discount { background: var(--color-secondary); color: #ffffff; }

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage { background-color: var(--color-secondary); }

.product-flags li.product-flag.on-sale { background: var(--color-secondary); }

/* --- Badge produit "nouveau" (reste primaire) --- */
.product-flags li.product-flag { background: var(--color-primary); }

/* --- Onglets produit --- */
.tabs .nav-tabs .nav-link.active { color: var(--color-primary); }
.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover { border-bottom: var(--color-primary) 3px solid; }

/* --- Modal produit & thumbnails --- */
#product-modal .modal-content .modal-body .product-images img:hover { border: var(--color-primary) 3px solid; }
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover { border: var(--color-primary) 3px solid; }
#blockcart-modal .product-name { color: var(--color-primary); }

/* --- Code promo --- */
.block-promo .promo-input + button { border: 2px solid var(--color-primary); }
.block-promo .promo-code-button.cancel-promo { color: var(--color-primary); }

/* --- Compte --- */
.account-list a:hover { color: var(--color-primary); }

/* --- Réseaux sociaux footer --- */
.block-social ul li:hover { background-color: var(--color-secondary); }



/*** PERSO CSS ***/

#index #wrapper{
  padding-top: 0;
}
.carousel .carousel-inner {
    height: auto;
}

#products .products, .featured-products .products, .product-accessories .products {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    row-gap: 30px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
#index #content-wrapper{
  padding: 15px 35px;
  margin-top: -120px;
  margin-bottom: 50px;
  background-color: #fff;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}
.featured-products .products-section-title{
  margin-top: 15px;
}
#search_widget form i {
    padding-top: 0.8rem;
}