/* =============================================================================
   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:      #234d86; /* 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:     #696969; /* ratio sur #fff : 5.08:1 ✓ AA — était #7a7a7a (4.29:1 ✗) */
  --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: "sinter", 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É
   ============================================================================= */

/* Masquage accessible — RGAA 10.7 : visible AT, invisible visuellement */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; 
  border: 0;
  color: inherit; /* évite faux positif contraste Asqatasun — élément non visible */
}

/* 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)
   - #696969 sur #fff :  5.1:1 ✓ AA   (texte secondaire — était #7a7a7a à 4.29:1 ✗)
   - #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);
}

/* Focus visible sur le lien image — RGAA 10.7
   overflow:hidden sur .thumbnail-container coupe le outline natif,
   on remonte le focus sur la carte via :focus-within */
.product-miniature .thumbnail-container:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* Supprime l'outline natif du lien (la carte le porte déjà) */
.product-miniature .product-thumbnail:focus,
.product-miniature .product-thumbnail:focus-visible {
  outline: none;
}

/* 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 */


/* 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);
  text-align: left;
}

/* 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="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);
}

/* Label quantité : visible pour les AT, masqué visuellement */
.qty-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* fieldset variantes : reset visuel + même apparence que le label select */
.product-variants-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.product-variants-fieldset legend {
  display: block;
  float: none;
  width: 100%;
  padding: 0;
  margin-bottom: 0.375rem;
  font-size: 0.875rem; 
  font-weight: 700;
  color: var(--color-text);
}

/* input[type="number"] hors touchspin uniquement */
input[type="number"]:not(#quantity_wanted) {
  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);
  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;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-xs) 0;
}

/* Focus visible sur custom-checkbox / custom-radio — RGAA 10.7
   Le thème parent masque l'input natif (opacity:0, position:absolute).
   On reporte le focus sur le span visuel via le sélecteur adjacent.
   !important nécessaire : le parent a déjà .custom-checkbox input:focus+span { border-color:#7a7a7a }
   à spécificité identique, et notre global *:focus:not(:focus-visible){outline:none} peut interférer. */
.custom-checkbox input[type="checkbox"]:focus + span,
.custom-checkbox input[type="checkbox"]:focus-visible + span,
.custom-radio   input[type="radio"]:focus   + span,
.custom-radio   input[type="radio"]:focus-visible + span {
  outline: var(--focus-outline) !important;
  outline-offset: var(--focus-offset) !important;
  border-radius: var(--radius-sm) !important;
  border-color: var(--color-focus) !important; 
}

/* Supprime l'outline natif sur l'input masqué pour éviter le double anneau */
.custom-checkbox input[type="checkbox"]:focus,
.custom-radio   input[type="radio"]:focus {
  outline: none !important;
}


/* =============================================================================
   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) !important;
  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::after {
  color: var(--color-text-muted);
  margin: 0 var(--space-xs);
}

.breadcrumb li:last-child::after {
  content: ""; 
}

.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 */
}

/* Bouton hamburger mobile — reset visuel, focusable au clavier (RGAA 12.11) */
#menu-icon button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  line-height: 50px;
}
#menu-icon button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* 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-primary);
  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 */
#block_myaccount_infos .h3 a {
  display: inline;
  min-height: auto;
  padding: 0;
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

#block_myaccount_infos .h3 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 : sera écrasé par .footer-row ci-dessous */
#footer .links {
  flex: 0 0 25%;
  max-width: 25%;
}

/* =============================================================================
   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);
  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;
}
.product-add-to-cart i.material-icons.shopping-cart{
  transform: translateY(-7px);
}
/* 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:hover,
.btn-cta:hover,
.btn-secondary,
.btn-cta {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary) !important; /* ratio 4.6:1 ✓ */
}



/* 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;
}


/* Lien déclaration d'accessibilité en footer */
.footer-accessibility-link {
  color: var(--color-text-on-dark-muted);
  font-size: var(--text-sm);
  text-decoration: underline;
}
.footer-accessibility-link:hover,
.footer-accessibility-link:focus {
  color: #ffffff;
  outline: 2px 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.
   ============================================================================= */

/* --- Surcharge #7a7a7a → #696969 (RGAA 3.2.1 — contraste 5.08:1 ✓)
   Le thème Classic hardcode #7a7a7a. On cible les sélecteurs exacts du parent
   avec !important pour garantir la surcharge quelle que soit la spécificité. --- */

/* Texte courant : règle Classic ".page-content.page-cms ul,p{color:#7a7a7a}" */
p, li { color: #696969 !important; }
.page-content.page-cms ul,
.page-content.page-cms p { color: #696969 !important; }

/* Classe utilitaire Bootstrap */
.text-muted { color: #696969 !important; }

/* Sous-menu nav — règle Classic ".top-menu a:not([data-depth='0']){color:#7a7a7a}" */
.top-menu a:not([data-depth="0"]) { color: #696969 !important; }

/* Liens footer — règle Classic ".block-contact,.footer-container li a{color:#7a7a7a}" */
.block-contact,
.footer-container li a { color: #696969 !important; }

/* Liens compte/panier header — règle Classic "#header .header-nav .blockcart a,.account-list a{color:#7a7a7a}" */
#header .header-nav .blockcart a,
.account-list a { color: #696969 !important; }

/* Nav items — règle Classic ".nav-item .nav-link,.nav-item .nav-separtor{color:#7a7a7a}" */
.nav-item .nav-link,
.nav-item .nav-separtor { color: #696969 !important; }

/* Liens footer/nav additionnels */
.cms-page-link,
.footer-container a,
.links a,
.hidden-sm-down,
.cart-products-count,
.form-control-comment { color: #696969; }

/* Bloc contact info */
#contact-infos,
#contact-infos a { color: #696969 !important; }

/* Fil d'ariane */
.breadcrumb [aria-current="page"] { color: #696969; }

/* sr-only : color:inherit ne suffit pas quand le parent est blanc sur blanc.
   On force transparent pour qu'Asqatasun ne détecte aucune couleur de texte. */
.sr-only { color: transparent !important; }

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


/* --- Boutons Bootstrap primary (+ état disabled via classe JS — RGAA 3.2) --- */
.btn-primary,
.btn-primary:hover,
.btn-primary.disabled,
.btn-primary.disabled.focus,
.btn-primary.disabled:focus,
.btn-primary:disabled,
.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 !important;
}

.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;
}

/* --- Focus sur les titres de step (RGAA 10.7) --- */
body#checkout .step-title[tabindex]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Activation au clavier : Enter déclenche le clic comme un bouton */

/* --- 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); }

/* Bouton tri : s'adapte à son contenu */
.products-sort-order .select-title {
  width: auto;
  min-width: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-height: 35px;
}

/* Dropdown tri : largeur automatique, au moins aussi large que le bouton */
.products-sort-order .dropdown-menu {
  min-width: 100%;
  width: max-content;
}
 
/* --- 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) !important; 
color: var(--color-text-on-dark) !important;}

/* --- 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); }

/* Vignettes produit : forcer le layout horizontal */
ul.product-images {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  gap: .5rem;
}

/* --- 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); }

/* --- Footer : colonnes uniformes sur une seule row (4 blocs) --- */

/* La row displayFooter est en flex grâce au .row Bootstrap */
.footer-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Chaque bloc enfant direct = 1 colonne sur 4, espacement horizontal */
.footer-row > * {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  padding: 0 var(--space-md) !important;
  box-sizing: border-box !important;
}

/* Bloc wrapper interne : supprimer le padding redondant */
.footer-row .wrapper {
  padding: 0;
}

/* Responsive : empiler les colonnes sous 768px */
@media (max-width: 767px) {
  .footer-row {
    flex-wrap: wrap;
  }
  .footer-row > * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* --- Réseaux sociaux — icônes --- */
 
/* Liste des icônes : flex horizontal */
.social-follow__list.collapse {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-follow__item {
  display: flex;
}

/* Lien icône Font Awesome — isolation des règles footer globales */
/* .links a et .footer-container a imposent min-height:44px → on écrase ici */
.footer-container li a.social-follow__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  max-height: 2.25rem !important;
  padding: 0 !important;
  border-radius: var(--radius-sm);
  background-color: var(--color-primary) !important;
  color: #ffffff !important;
  font-size: 1rem;
  text-decoration: none !important;
  transition: background-color var(--transition), transform var(--transition);
}

/* Le li ne doit pas s'étirer */
.social-follow__item {
  display: flex !important;
  align-items: flex-start !important;
  height: 2.25rem !important;
}

.social-follow__link:hover,
.social-follow__link:focus {
  background-color: var(--color-secondary) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

.social-follow__link:focus-visible { 
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Neutralise les anciens sélecteurs du thème parent */
.block-social ul li { background-color: transparent; }
.block-social ul li:hover { background-color: transparent; }




/*** PERSO CSS ***/

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

/* =============================================================================
   CARROUSEL RGAA — slider-rgaa
   ============================================================================= */

.slider-rgaa {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Piste */ 
.slider-rgaa__track {
  display: flex;
  transition: none; /* Bootstrap gère la transition */
}

/* Diapositive */
.slider-rgaa__slide {
  flex: 0 0 100%;
  width: 100%;
}

.slider-rgaa__figure {
  position: relative;
  margin: 0;
  line-height: 0;
}

.slider-rgaa__figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* Boutons prev/next — neutralise les styles Bootstrap carousel-control-prev/next
   qui imposent width:15%, opacity:0.5, et un positionnement absolu concurrent */
.slider-rgaa__btn.carousel-control-prev,
.slider-rgaa__btn.carousel-control-next {
  width: 44px;
  opacity: 1;
}

.slider-rgaa__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;  /* RGAA 13.9 : zone de clic ≥ 44px */
  height: 44px;
  background-color: rgba(35, 77, 134, 0.75);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}

.slider-rgaa__btn--prev { left: 1rem; }
.slider-rgaa__btn--next { right: 1rem; }

.slider-rgaa__btn svg {
  fill: #ffffff;
  width: 24px;
  height: 24px;
}

.slider-rgaa__btn:hover {
  background-color: rgba(35, 77, 134, 1);
}

/* Focus visible — RGAA 10.7 */
.slider-rgaa__btn:focus-visible {
  outline: 3px solid #0057b8;
  outline-offset: 3px;
  border-color: #ffffff;
}

/* Indicateurs — décoratifs uniquement */
.slider-rgaa__bullets {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.slider-rgaa__bullet {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
}

.slider-rgaa__bullet--active {
  background-color: #ffffff;
}

/* Respect de prefers-reduced-motion — RGAA 13.8 */
@media (prefers-reduced-motion: reduce) {
  .slider-rgaa__btn {
    transition: none;
  }
}

#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{
  margin-top: -90px;
}
.featured-products .products-section-title{
  margin-top: 15px;
}
#search_widget form i {
    padding-top: 0.8rem;
}
.product-miniature .thumbnail-container:focus .product-description::after, .product-miniature .thumbnail-container:hover .product-description::after{
  border-top: none;
}

 
/* =============================================================================
   SECTION ADMD — ps_customtext
   ============================================================================= */

/* Section pleine largeur sur fond primary */
.admd-about {
  background-color: var(--color-primary);
  padding: var(--space-2xl) 0;
  margin-left: -15px;
  margin-right: -15px;
}

/* Flex : image flex 1, contenu prend le reste */
.admd-about__inner {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}

/* Visuel décoratif — flex 1 */
.admd-about__visual {
  flex: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  min-height: 320px;
}

.admd-about__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
}

/* Colonne droite — prend l'espace restant */
.admd-about__content {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

/* Titre — RGAA 9.1 hiérarchie Hn */
.admd-about__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
}

/* Intro */
p.admd-about__intro,.admd-about__intro li ,.admd-about__intro p, .admd-about__intro  {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: var(--text-base);
  line-height: 1.7;
  margin: 0;
}

/* Liste des valeurs */
.admd-about__values {
  list-style: none;
  padding: 0; 
  margin: 0;
  display: flex; 
  flex-direction: column; 
  gap: var(--space-sm); 
} 
 
.admd-about__values li {
  padding-left: var(--space-md);
  border-left: 3px solid #fff;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.admd-about__values strong {
  color: #ffffff;
}

/* Texte CTA */
.admd-about__cta-text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: var(--text-sm);
  margin: 0;
}

/* Conteneur des deux boutons */
.admd-about__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
}

/* Base commune des boutons CTA */
.admd-about__cta {
  font-weight: 600;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  min-height: 44px; /* RGAA 13.9 */
  display: inline-flex;
  align-items: center;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.admd-about__cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* Bouton principal — Faire un don */
.admd-about__cta--primary {
    background-color: white;
  border-color: #fff !important; 
  color: var(--color-primary) !important; 
}

.admd-about__cta--primary:hover {
    background-color: var(--color-primary);
  border-color: #fff;
  color: #fff !important; 
}

/* Bouton secondaire — Découvrir l'ADMD (contour blanc sur fond primary) */
.admd-about__cta--secondary {
  background-color: transparent;
  border-color: #ffffff;
  color: #ffffff !important;
}

.admd-about__cta--secondary:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: var(--color-primary) !important;
}

/* Mobile — empilement vertical */
@media (max-width: 767px) {
  .admd-about__inner {
    flex-direction: column;
  }

  .admd-about__visual {
    min-height: 200px;
  }

  .admd-about__title {
    font-size: var(--text-2xl);
  }
}

/* =============================================================================
   NEWSLETTER — ps_emailsubscription
   ============================================================================= */

.newsletter-block {
  padding: var(--space-3xl, 5rem) 0;
  background-color: var(--color-surface, #f8f9fb);
  border-top: 1px solid var(--color-border, #e4e9f0);
}

/* Inner : centré, max-width réduit pour confort de lecture */
.newsletter-block__inner {
  max-width: 640px;
  margin: 0 auto; 
  text-align: center;
}

/* En-tête : icône + titre + description */
.newsletter-block__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.newsletter-block__icon {
  color: var(--color-secondary);
  flex-shrink: 0;
}

.newsletter-block__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.newsletter-block__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

/* Champ + bouton en ligne */
.newsletter-block__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  text-align: left;
}

.newsletter-block__input-row {
  display: flex;
  gap: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.newsletter-block__input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.65rem var(--space-md);
  border: 2px solid var(--color-border, #d0d7e3);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: #ffffff;
  transition: border-color var(--transition), box-shadow var(--transition);
  min-height: 44px; /* RGAA 13.9 */
}

.newsletter-block__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(35, 77, 134, 0.2);
}

.newsletter-block__input::placeholder { 
  color: var(--color-text-muted);
  opacity: 1;
}

.newsletter-block__btn {
  flex-shrink: 0;
  padding: 0 var(--space-xl);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border: 2px solid var(--color-secondary);
  background-color: var(--color-secondary);
  color: #ffffff;
  font-weight: 600;
  font-size: var(--text-sm);
  min-height: 44px; /* RGAA 13.9 */
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
  white-space: nowrap;
}

.newsletter-block__btn:hover {
  background-color: #a83e1f;
  border-color: #a83e1f;
  color: #ffffff;
}

.newsletter-block__btn:focus,
.newsletter-block__btn:focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* Variante empilée (colonne) */
.newsletter-block__input-row--stacked {
  flex-direction: column;
  border-radius: var(--radius-sm);
  overflow: visible;
  box-shadow: none;
}

.newsletter-block__input-row--stacked .newsletter-block__input {
  border: 2px solid var(--color-border, #d0d7e3);
  border-radius: var(--radius-sm);
}

.newsletter-block__input-row--stacked .newsletter-block__btn {
  border-radius: var(--radius-sm);
  width: 100%;
  margin-top: var(--space-xs);
}

/* Indice sous le champ */
.newsletter-block__hint {
  margin: var(--space-xs) 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted);
}

/* Message de confirmation / erreur */
.newsletter-block__msg {
  margin-top: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* Conditions / RGPD */
.newsletter-block__conditions {
  margin-top: var(--space-sm);
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-muted);
}

/* Version footer sombre si besoin */
.newsletter-block--on-dark .newsletter-block__title,
.newsletter-block--on-dark .newsletter-block__label {
  color: #ffffff;
}

.newsletter-block--on-dark .newsletter-block__desc,
.newsletter-block--on-dark .newsletter-block__hint,
.newsletter-block--on-dark .newsletter-block__conditions {
  color: rgba(255, 255, 255, 0.75);
}

/* =============================================================================
   BLOC RÉASSURANCE — blockreassurance
   ============================================================================= */

.reassurance-block {
  padding: var(--space-2xl) 0;
  background-color: #ffffff;
  border-top: 1px solid var(--color-border, #e4e9f0);
}

/* Liste horizontale centrée */
.reassurance-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl) var(--space-2xl);
}

/* Chaque item — s'étale équitablement */
.reassurance-block__item {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Conteneur sans lien */
.reassurance-block__item-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
  width: 100%;
  padding: var(--space-lg) var(--space-md);
}

/* Lien avec hover */
.reassurance-block__link {
  display: flex; 
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-md);
  justify-content: center;
  align-items: center;
  transition: color var(--transition), transform var(--transition);
}

.reassurance-block__link:hover {
  color: var(--color-primary); 
  transform: translateY(-3px);
}

.reassurance-block__link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* Icône */
.reassurance-block__icon {
  width: 64px;
  height: 64px; 
  object-fit: contain;
  flex-shrink: 0;
  /* Teinte primary via filtre si icônes SVG monochromes */
  filter: brightness(0) saturate(100%) invert(23%) sepia(52%) saturate(542%) hue-rotate(185deg) brightness(88%) contrast(95%);
  transition: filter var(--transition);
}

.reassurance-block__link:hover .reassurance-block__icon {
  filter: brightness(0) saturate(100%) invert(36%) sepia(74%) saturate(500%) hue-rotate(342deg) brightness(95%) contrast(92%);
}

/* Bloc texte */
.reassurance-block__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Titre */
.reassurance-block__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}
 
/* Sous-titre */
.reassurance-block__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.reassurance-block__link:hover .reassurance-block__title {
  color: var(--color-primary); 
}

.reassurance-block__link:hover .reassurance-block__desc {
  color: var(--color-primary);
  opacity: 0.8;
}

/* Mobile : 2 colonnes */
@media (max-width: 575px) {
  .reassurance-block__list {
    gap: var(--space-lg) var(--space-xl);
  }

  .reassurance-block__item-inner,
  .reassurance-block__link {
    max-width: 120px;
  }

  .reassurance-block__icon { 
    width: 40px;
    height: 40px;
  }
}
#header .header-nav .user-info{
  display: flex;
  align-items: center;
  padding-bottom: 8px;
}

/* =============================================================================
   MON COMPTE — Design épuré liste verticale
   ============================================================================= */

/* Masque l'ancien style PS sur .links */
#content .links { display: block; }

.account-nav {
  max-width: 640px;
  margin: 0 auto;
}

.account-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.account-nav__item {
  border-bottom: 1px solid var(--color-border);
}

.account-nav__item:first-child {
  border-top: 1px solid var(--color-border);
}

.account-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 1rem 0.5rem 1rem 0;
  color: var(--color-text);
  text-decoration: none !important;
  border-left: 3px solid transparent;
  padding-left: var(--space-md);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.account-nav__link:hover,
.account-nav__link:focus-visible {
  border-left-color: var(--color-secondary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.account-nav__link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.account-nav__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.account-nav__icon .material-icons {
  font-size: 1.5rem;
}

.account-nav__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.account-nav__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}

.account-nav__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.account-nav__link:hover .account-nav__title,
.account-nav__link:focus-visible .account-nav__title {
  color: var(--color-primary);
}

.account-nav__arrow {
  color: var(--color-border-strong);
  flex-shrink: 0;
  transition: transform var(--transition), color var(--transition);
}

.account-nav__link:hover .account-nav__arrow,
.account-nav__link:focus-visible .account-nav__arrow {
  transform: translateX(4px);
  color: var(--color-secondary);
}

/* Déconnexion */
.account-signout {
  margin-top: var(--space-xl);
  text-align: center;
}

.account-signout__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.account-signout__link:hover,
.account-signout__link:focus-visible {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

.account-signout__link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.account-signout__link .material-icons {
  font-size: 1rem;
}

/* =============================================================================
   HISTORIQUE DES COMMANDES — Cartes épurées
   ============================================================================= */

.order-history__intro {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-lg);
}

.order-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.order-history__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow var(--transition);
}

.order-history__card:hover {
  box-shadow: 0 4px 16px rgba(35,77,134,0.10);
}

/* En-tête */
.order-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-md);
  flex-wrap: wrap;
}

.order-history__ref {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-base);
  color: var(--color-primary);
}

.order-history__ref .material-icons {
  font-size: 1.1rem;
}

.order-history__date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Corps */
.order-history__body {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.75rem 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-border);
}

.order-history__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
  min-width: 120px;
  padding: 0.25rem 1rem 0.25rem 0;
}

.order-history__meta + .order-history__meta {
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
}

.order-history__meta-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.order-history__meta-value {
  font-size: var(--text-base);
  color: var(--color-text);
}

.order-history__total {
  font-weight: 700;
  color: var(--color-primary);
}

/* Badge statut */
.order-history__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ffffff;
  width: fit-content;
}

/* Actions */
.order-history__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: 0.6rem 1rem;
  flex-wrap: wrap;
}

.order-history__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  transition: background var(--transition), color var(--transition);
}

.order-history__action .material-icons {
  font-size: 1rem;
}

.order-history__action--ghost {
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
  background: transparent;
}

.order-history__action--ghost:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.order-history__action--primary {
  color: #ffffff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.order-history__action--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
}

.order-history__action:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Mobile */
@media (max-width: 575px) {
  .order-history__body {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .order-history__meta {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    width: 100%;
  }
  .order-history__meta:first-child {
    border-top: none;
    padding-top: 0;
  }
  .order-history__actions {
    justify-content: stretch;
  }
  .order-history__action {
    flex: 1;
    justify-content: center;
  }
}

/* =============================================================================
   CARTE PRODUIT — Design éditorial minimal
   Liseré orange top + shadow hover
   ============================================================================= */

/* ----- Reset : annule les anciens styles .product-miniature ----- */
.pm {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.pm:hover { box-shadow: none; }
.pm .thumbnail-container,
.pm .thumbnail-top,
.pm .product-description { all: unset; }

/* ----- Éléments communs ----- */
.pm__img-wrap {
  position: relative;
  overflow: visible; /* l'overlay swatches doit pouvoir déborder vers le bas */
}
/* Clip uniquement sur le lien image, pas sur le conteneur */
.pm__img-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.pm__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.pm:hover .pm__img-wrap img { transform: scale(1.04); }
.pm__flags {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 2;
}
.pm__name {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.35; 
}
.pm__name a {
  color: inherit;
  text-decoration: none;
}
.pm__name a:hover { text-decoration: underline; }
.pm__price-block {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pm__price {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
}
.pm__price-old {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.pm__badge--discount {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--color-secondary);
  color: #fff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* Focus RGAA : outline sur la carte entière via :focus-within */
.pm:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.pm .pm__img-link:focus,
.pm .pm__img-link:focus-visible { outline: none; }

/* ============================================================
   DESIGN — Éditorial minimal, liseré orange top, shadow hover
   ============================================================ */
.pm--d4 {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-secondary);
  border-radius: var(--radius-md);
  overflow: visible; /* permet à l'overlay swatches de sortir du body sans être clippé */
  box-shadow: 0 1px 4px rgba(35,77,134,0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.pm--d4:hover {
  box-shadow: 0 8px 24px rgba(35,77,134,0.13);
  transform: translateY(-3px);
}
.pm--d4 .pm__img-wrap {
  height: 260px;
  flex-shrink: 0;
}
.pm--d4 .pm__body {
  padding: 0.8rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pm--d4 .pm__name { 
  color: var(--color-text); 
  min-height: 40px;
}
.pm--d4 .pm__name a {
  position: relative;
  color: var(--color-text);
}
.pm--d4 .pm__name a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-secondary);
  transition: width 0.25s ease;
}
.pm--d4:hover .pm__name a::after,
.pm--d4:focus-within .pm__name a::after { width: 100%; }


/* =============================================================================
   SWATCHES COULEURS — overlay bas d'image (RGAA 1.3 / 3.1 / 10.7)
   Position absolute dans pm__img-wrap. Glisse depuis le bas de l'image
   au survol ou focus-within de la carte. Hauteur de carte inchangée.
   Liens focusables avec aria-label complet — RGAA 10.7 garanti.
   ============================================================================= */

/* Bandelette swatches — accrochée au bas de l'image */
.pm__swatches {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--color-border);

  /* Masquée par défaut : translation vers le bas + opacité 0 */
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.2s ease, transform 0.2s ease;

  /* Les liens sont dans le DOM mais visuellement hors champ :
     pointer-events coupés pour ne pas intercepter les clics sur l'image */
  pointer-events: none;
}

/* Révélée au survol ou dès qu'un swatch reçoit le focus */
.pm--d4:hover .pm__swatches,
.pm--d4:focus-within .pm__swatches {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Respect de prefers-reduced-motion — RGAA 13.8 */
@media (prefers-reduced-motion: reduce) {
  .pm__swatches {
    transition: none;
  }
}

/* Pastille individuelle */
.pm__swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pm__swatch:hover {
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.15);
}

/* Focus visible — RGAA 10.7 */
.pm__swatch:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 50%;
}

/* Compteur "+N" */
.pm__swatch-more {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1;
  margin-left: 0.1rem;
}

/* =============================================================================
   PAGE PRODUIT — corrections RGAA
   ============================================================================= */

/* 8.9.1 — div.product-minimal-quantity vide masqué via aria-hidden dans le TPL. */
.product-minimal-quantity[aria-hidden="true"] {
  display: none;
}
.product-minimal-quantity.error {
  display: block;
}

/* =============================================================================
   VARIANTES PRODUIT — focus visible (RGAA 10.7)
   Les inputs radio .input-color et .input-radio sont masqués par le thème Classic
   (opacity:0, position:absolute). On reporte le focus sur le span visuel adjacent.
   ============================================================================= */

/* Couleurs */
.input-color:focus + span,
.input-color:focus-visible + span {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px !important;
  border-radius: 50%;
}

/* Tailles / radio texte */
.input-radio:focus + .radio-label,
.input-radio:focus-visible + .radio-label {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 3px !important;
  border-radius: var(--radius-sm);
}

/* Supprime l'outline natif sur les inputs masqués */
.input-color:focus,
.input-radio:focus {
  outline: none !important;
}

/* 3.2.3 — séparateurs du timer précommande aria-hidden, décoratifs :
   on les rend invisibles visuellement (Asqatasun les détecte malgré aria-hidden) */
.preorder-timer__sep[aria-hidden="true"] {
  color: transparent;
}

/* orange sur fond blanc : 3.24:1 — icône aria-hidden donc décorative,
   on la masque visuellement pour éviter tout faux positif */
.preorder-timer__label .material-icons[aria-hidden="true"] {
  display: none;
}

.input-group .input-group-btn>.btn[data-action=show-password]{
  background-color: var(--color-primary);
}
#products .all-product-link, .featured-products .all-product-link, .product-accessories .all-product-link{
  color: #696969 !important;
}