/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
#header .main-header {

    background-color: #000000;
    }

    /* Zone CMS / contenu */
.page-cms .rte, 
.page-cms .cms-content, 
.page-content, 
#content {
  font-family: inherit;
}

/* Force le fallback emoji sur les paragraphes concernés */
.page-cms .rte p, 
.page-cms .rte span, 
.page-cms .rte a {
  font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
.page-cms .rte {
  font-family: inherit !important;
}
/* Footer: assurer l'affichage des emojis (tel, adresse, etc.) */
#footer, footer {
  font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
.footer-contact { line-height: 1.6; }
.footer-contact .fc-line { margin: 6px 0; }
.footer-contact .fc-ico { display:inline-flex; vertical-align: -2px; margin-right: 6px; color:#272727; }
.footer-contact a { text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
/* Couleur gris foncé pour tel & adresse */
.footer-contact a,
.footer-contact .fc-line {
  color: #555555;
}

/* Optionnel : garder les icônes en vert */
.footer-contact .fc-ico {
  color: #008306;
}
#header .checkout-header-version {
  background-color: #000000 !important;
}

/*
 * Refonte front-office — Aux Quatre Saisons
 * Palette client conservée : noir #000000, vert #008306, blanc et gris existants.
 * Les règles ci-dessous ne modifient pas le contenu configuré dans les modules ZOne.
 */
:root {
  --a4s-black: #000000;
  --a4s-green: #008306;
  --a4s-ink: #272727;
  --a4s-muted: #555555;
  --a4s-white: #ffffff;
}

/* En-tête : contraste plus net, logo intégré au fond noir et actions mieux lisibles. */
#header .main-header,
#header .header-main-menu {
  background-color: var(--a4s-black);
}

#header .header-logo img {
  max-height: 110px;
  object-fit: contain;
  mix-blend-mode: screen;
}

#header .header-main-menu {
  border-bottom: 2px solid var(--a4s-green);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
}

#amegamenu .anav-top {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

#amegamenu .anav-top .amenu-link {
  align-items: center;
  border-radius: 4px 4px 0 0;
  display: flex;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .035em;
  min-height: 48px;
  padding: 8px 12px;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}

#amegamenu .anav-top .amenu-item.plex > .amenu-link::after {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  content: '';
  display: inline-block;
  height: 6px;
  margin: -3px 1px 0 8px;
  transform: rotate(45deg);
  width: 6px;
}

#amegamenu .anav-top .amenu-item:hover > .amenu-link,
#amegamenu .anav-top .amenu-item:focus-within > .amenu-link {
  background-color: var(--a4s-green);
  color: var(--a4s-white);
}

/* Méga-menu : navigation courte à parcourir, colonnes et sous-catégories visibles. */
#amegamenu .adropdown {
  border: 1px solid rgba(0, 131, 6, .28);
  border-top: 3px solid var(--a4s-green);
  box-sizing: border-box;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
  max-width: calc(100vw - 24px);
  overflow: hidden;
  /* Annule la largeur historique par nombre de colonnes : elle laissait un
     panneau transparent après le contenu réel de certains déroulants. */
  width: min(762px, calc(100vw - 24px)) !important;
}

#amegamenu .dropdown-wrapper {
  box-sizing: border-box;
  max-width: none;
  padding: 16px;
  width: 100%;
}

#amegamenu .dropdown-content {
  max-width: 100%;
  width: 100%;
}

#amegamenu .acategory-content {
  column-gap: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 330px;
  overflow-y: auto;
  padding: 2px 7px 3px 0;
  row-gap: 14px;
  scrollbar-color: var(--a4s-green) transparent;
}

#amegamenu .acategory-content .category-title {
  font-size: .95rem;
  margin-bottom: 7px;
}

#amegamenu .acategory-content > .aitem {
  min-width: 0;
}

#amegamenu .acategory-content > .aitem.is-brand-hidden {
  display: none;
}

#amegamenu .acategory-content .category-title a {
  color: var(--a4s-ink);
  font-weight: 700;
}

#amegamenu .acategory-content .category-subs {
  display: grid;
  gap: 6px 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  line-height: 1.35;
  max-height: 294px;
  margin: 0;
  overflow-y: auto;
  padding: 2px 7px 3px 0;
  scrollbar-color: var(--a4s-green) transparent;
}

#amegamenu .acategory-content .category-subs a {
  color: var(--a4s-muted);
  display: block;
  font-size: .88rem;
  overflow: hidden;
  padding: 3px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#amegamenu .acategory-content .category-subs li {
  min-width: 0;
}

#amegamenu .acategory-content .category-subs li.is-brand-hidden {
  display: none;
}

#amegamenu .category-brand-finder {
  margin-bottom: 12px;
  max-width: none;
}

/* La colonne de recherche reste en tête du méga-menu : elle ne doit pas se
   retrouver centrée à côté d'une longue liste de marques. */
#amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
  grid-template-areas: "finder brands";
  grid-template-columns: 210px minmax(0, 1fr);
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-title {
  align-self: start;
  grid-area: finder;
  grid-column: auto;
  grid-row: auto;
  position: relative;
  z-index: 1;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-brand-finder {
  align-self: start;
  grid-area: finder;
  grid-column: auto;
  grid-row: auto;
  margin: 46px 0 0;
  max-width: 210px;
}

#amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs {
  grid-area: brands;
  grid-column: auto;
  grid-row: auto;
}

/* Les catégories fournisseur peuvent être rendues comme cartes directes au
   lieu d'une liste <ul>. Cette variante reprend exactement la même grille de
   trois colonnes et le même panneau de recherche. */
#amegamenu .anav-top .acategory-content.a4s-brand-list {
  align-content: start;
  display: grid !important;
  gap: 5px 18px;
  grid-area: brands;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-height: 310px;
  overflow-y: auto;
  padding: 1px 10px 2px 0;
  scrollbar-color: var(--a4s-green) transparent;
}

#amegamenu .anav-top .acategory-content.a4s-brand-list > .aitem {
  display: block !important;
  min-width: 0;
  padding: 2px 0;
}

#amegamenu .anav-top .acategory-content.a4s-brand-list .category-title {
  grid-area: auto;
  margin: 0;
  position: static;
}

#amegamenu .anav-top .acategory-content.a4s-brand-list .category-title a {
  color: var(--a4s-muted);
  display: block;
  font-size: .88rem;
  font-weight: 400;
  overflow: hidden;
  padding: 3px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Pages CMS : une lecture éditoriale cohérente pour la FAQ et les contenus
   juridiques, sans modifier leur texte ni leur hiérarchie. */
body[class*="cms-id-"] #content.page-cms {
  margin: 28px auto 52px;
  max-width: 1080px;
  padding: 0 20px;
}

body[class*="cms-id-"] #content.page-cms > .typo {
  background: var(--a4s-white);
  border: 1px solid rgba(0, 131, 6, .16);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
  color: var(--a4s-ink);
  padding: clamp(24px, 4vw, 48px);
}

body[class*="cms-id-"] .page-heading {
  color: var(--a4s-ink);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  letter-spacing: .025em;
  margin: 30px auto 0;
  max-width: 1040px;
  padding: 0 20px;
  text-align: left;
}

/* La FAQ possède déjà son propre titre éditorial dans son en-tête. */
body.cms-id-8 .page-heading {
  display: none;
}

/* Mentions légales et conditions : largeur de lecture confortable, repères
   visuels pour les titres et l'encadré important. */
body.cms-id-2 #content.page-cms .typo > .typo,
body.cms-id-3 #content.page-cms .typo > .typo {
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 860px;
}

body.cms-id-2 #content.page-cms address,
body.cms-id-3 #content.page-cms address {
  color: var(--a4s-ink) !important;
  font-style: normal;
  margin: 0 0 1rem;
}

body.cms-id-2 #content.page-cms ul {
  background: rgba(255, 255, 0, .34);
  border-left: 4px solid var(--a4s-green);
  border-radius: 0 8px 8px 0;
  color: var(--a4s-ink) !important;
  margin: 24px 0 !important;
  padding: 18px 22px !important;
  text-align: left !important;
}

body.cms-id-3 #content.page-cms strong,
body.cms-id-3 #content.page-cms b {
  color: var(--a4s-green);
}

/* FAQ : les styles sont pilotés par le thème, pas par du CSS en ligne. */
#aqs-faq {
  background: transparent !important;
  color: var(--a4s-ink) !important;
  font-family: inherit !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#aqs-faq .aqs-faq-wrap {
  margin: 0 auto;
  max-width: 960px;
}

#aqs-faq .aqs-faq-hero {
  border-bottom: 2px solid var(--a4s-green);
  margin-bottom: 26px;
  padding-bottom: 22px;
}

#aqs-faq .aqs-faq-badge {
  color: var(--a4s-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

#aqs-faq h1 {
  color: var(--a4s-ink) !important;
  font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
  margin: 0 0 8px !important;
}

#aqs-faq .aqs-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#aqs-faq .aqs-card {
  background: #fff;
  border: 1px solid rgba(0, 131, 6, .2);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .05);
  padding: 20px;
}

#aqs-faq .aqs-card h2 {
  color: var(--a4s-green);
  font-size: 1.1rem;
  margin: 0 0 16px;
}

#aqs-faq .aqs-item {
  border-top: 1px solid rgba(0, 131, 6, .18);
}

#aqs-faq .aqs-item:last-child {
  border-bottom: 1px solid rgba(0, 131, 6, .18);
}

#aqs-faq .aqs-question {
  color: var(--a4s-ink);
  cursor: pointer;
  display: block;
  font-size: .95rem;
  font-weight: 700;
  list-style: none;
  padding: 13px 28px 13px 0;
  position: relative;
  text-decoration: none;
}

#aqs-faq .aqs-question::after {
  color: var(--a4s-green);
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 2px;
  top: 11px;
}

#aqs-faq .aqs-item.is-open .aqs-question::after {
  content: '–';
}

#aqs-faq .aqs-question:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--a4s-green);
  outline-offset: -2px;
}

#aqs-faq .aqs-a {
  color: var(--a4s-muted);
  font-size: .94rem;
  margin: 0 0 14px;
}

#aqs-faq.aqs-interactive .aqs-a {
  display: none;
}

#aqs-faq.aqs-interactive .aqs-item.is-open .aqs-a {
  display: block;
}

.a4s-cms-hero {
  border-bottom: 2px solid var(--a4s-green);
  margin-bottom: 26px;
  padding-bottom: 22px;
}

.a4s-cms-eyebrow {
  color: var(--a4s-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.a4s-cms-hero h1 {
  color: var(--a4s-ink);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  margin: 0 0 8px;
}

.a4s-cms-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.a4s-cms-card {
  background: #fff;
  border: 1px solid rgba(0, 131, 6, .2);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .05);
  margin: 18px 0;
  padding: 22px;
}

.a4s-cms-grid .a4s-cms-card {
  margin: 0;
}

.a4s-cms-card h2 {
  color: var(--a4s-green);
  font-size: 1.1rem;
  margin: 0 0 14px;
}

.a4s-cms-card--accent {
  background: rgba(255, 255, 0, .3);
}

.a4s-cms-details {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.a4s-cms-details div {
  border-top: 1px solid rgba(0, 131, 6, .14);
  padding-top: 10px;
}

.a4s-cms-details dt {
  color: var(--a4s-green);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.a4s-cms-details dd {
  margin: 2px 0 0;
}

.a4s-cms-button {
  background: var(--a4s-green);
  border-radius: 5px;
  color: #fff !important;
  display: inline-block;
  font-weight: 700;
  padding: 9px 14px;
  text-decoration: none !important;
}

.a4s-cms-button:hover,
.a4s-cms-button:focus {
  background: var(--a4s-ink);
}

.a4s-cms-note {
  color: var(--a4s-muted);
  font-size: .9rem;
}

@media (max-width: 767.98px) {
  body[class*="cms-id-"] #content.page-cms {
    margin-top: 18px;
    padding: 0 12px;
  }

  body[class*="cms-id-"] #content.page-cms > .typo {
    border-radius: 10px;
    padding: 22px 18px;
  }

  #aqs-faq .aqs-grid {
    grid-template-columns: 1fr;
  }

  .a4s-cms-grid {
    grid-template-columns: 1fr;
  }
}

#amegamenu .acategory-content a:hover,
#amegamenu .acategory-content a:focus {
  color: var(--a4s-green);
  text-decoration: none;
}

/* Marques : recherche prédictive locale et liste bornée, sans page de défilement. */
.brand-finder {
  margin: 0 0 14px;
  max-width: 440px;
}

.brand-finder__label {
  color: var(--a4s-ink);
  display: block;
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.brand-finder__input {
  background: var(--a4s-white);
  border: 1px solid rgba(0, 131, 6, .45);
  border-radius: 5px;
  box-shadow: none;
  color: var(--a4s-ink);
  min-height: 42px;
  padding: 8px 12px;
  width: 100%;
}

.brand-finder__input:focus {
  border-color: var(--a4s-green);
  outline: 2px solid rgba(0, 131, 6, .2);
  outline-offset: 1px;
}

.brand-finder__status {
  color: var(--a4s-muted);
  display: block;
  font-size: .78rem;
  margin-top: 5px;
}

#amegamenu .amanufacturer-content {
  display: grid;
  gap: 8px 14px;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  max-height: 330px;
  overflow-y: auto;
  padding: 2px 5px 3px 0;
  scrollbar-color: var(--a4s-green) transparent;
}

#amegamenu .amanufacturer-content .aitem {
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 5px;
  min-width: 0;
  padding: 8px 10px;
}

#amegamenu .amanufacturer-content .aitem.is-brand-hidden {
  display: none;
}

#amegamenu .amanufacturer-content .brand-name a {
  color: var(--a4s-ink);
  display: block;
  font-size: .84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#amegamenu .amanufacturer-content .brand-name a:hover,
#amegamenu .amanufacturer-content .brand-name a:focus {
  color: var(--a4s-green);
}

/* Footer : les contenus actuels restent inchangés, la lecture gagne en rythme. */
#footer .footer-main {
  border-top: 3px solid var(--a4s-green);
}

#footer .footer-main .main-main,
#footer .hook-display-footer {
  row-gap: 26px;
}

#footer .footer-main h3,
#footer .footer-main .block-title,
#footer .footer-main .title {
  color: var(--a4s-ink);
  font-size: .93rem;
  font-weight: 800;
  letter-spacing: .055em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

#footer .footer-main a:hover,
#footer .footer-main a:focus {
  color: var(--a4s-green);
}

#footer .footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

/* CMS : une page éditoriale lisible sur desktop comme sur mobile. */
.page-cms #content.page-cms {
  color: var(--a4s-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.page-cms #content.page-cms .typo {
  margin: 0 auto;
  max-width: 960px;
}

.page-cms #content.page-cms h1,
.page-cms #content.page-cms h2,
.page-cms #content.page-cms h3 {
  color: var(--a4s-ink);
  font-weight: 800;
  line-height: 1.25;
}

.page-cms #content.page-cms h2 {
  border-left: 4px solid var(--a4s-green);
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
  padding-left: 12px;
}

.page-cms #content.page-cms h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 .65rem;
}

.page-cms #content.page-cms p,
.page-cms #content.page-cms ul,
.page-cms #content.page-cms ol {
  margin-bottom: 1.1rem;
}

.page-cms #content.page-cms a {
  color: var(--a4s-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-cms #content.page-cms table {
  border-collapse: separate;
  border-spacing: 0;
  display: block;
  margin: 1.4rem 0;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.page-cms #content.page-cms td,
.page-cms #content.page-cms th {
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  padding: 10px 12px;
}

.page-cms #content.page-cms th {
  background-color: var(--a4s-black);
  color: var(--a4s-white);
}

@media (max-width: 991.98px) {
  #header .header-logo img { max-height: 64px; }

  #mobile-amegamenu .anav-top .amenu-link {
    font-weight: 700;
    min-height: 47px;
  }

  #mobile-amegamenu .adropdown .dropdown-wrapper {
    padding: 10px 14px 14px;
  }

  #mobile-amegamenu .acategory-content .aitem {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: 10px 0;
  }

  #mobile-amegamenu .acategory-content .category-subs {
    grid-template-columns: 1fr 1fr;
    max-height: 260px;
  }

  #mobile-amegamenu .acategory-content {
    grid-template-columns: 1fr 1fr;
    max-height: 44vh;
  }

  #mobile-amegamenu .amanufacturer-content {
    max-height: 44vh;
    overflow-y: auto;
  }
}

@media (max-width: 575.98px) {
  .page-cms #content.page-cms { font-size: .95rem; }
  .page-cms #content.page-cms h2 { font-size: 1.12rem; margin-top: 1.6rem; }
  #footer .footer-main { padding-bottom: 24px; padding-top: 30px; }
}

/*
 * Finition éditoriale CMS + footer — octobre 2026
 * Les couleurs de la boutique restent inchangées ; cette couche ne touche
 * qu'aux espacements, à la hiérarchie et aux états d'interaction.
 */
body[class*="cms-id-"] #wrapper {
  background:
    linear-gradient(180deg, rgba(0, 131, 6, .055), transparent 260px),
    #f7f7f7;
}

body[class*="cms-id-"] #content.page-cms {
  margin-bottom: 64px;
  margin-top: 38px;
}

body[class*="cms-id-"] #content.page-cms > .typo {
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
  position: relative;
}

body[class*="cms-id-"] #content.page-cms > .typo::before {
  background: var(--a4s-green);
  border-radius: 99px;
  content: '';
  height: 5px;
  left: clamp(24px, 4vw, 48px);
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  top: 0;
}

#aqs-faq .aqs-faq-wrap { max-width: 100%; }

#aqs-faq .aqs-faq-hero {
  border-bottom: 0;
  margin-bottom: 30px;
  padding: 8px 0 0;
}

#aqs-faq .aqs-faq-badge {
  align-items: center;
  background: rgba(0, 131, 6, .09);
  border-radius: 99px;
  display: inline-flex;
  font-size: .72rem;
  gap: 7px;
  letter-spacing: .09em;
  padding: 7px 11px;
}

#aqs-faq .aqs-faq-badge::before {
  background: var(--a4s-green);
  border-radius: 50%;
  content: '';
  height: 7px;
  width: 7px;
}

#aqs-faq h1 {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  letter-spacing: -.035em;
  margin-top: 14px !important;
}

#aqs-faq .aqs-faq-hero > p {
  color: var(--a4s-muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  margin: 0;
  max-width: 650px;
}

#aqs-faq .aqs-grid {
  gap: 20px;
}

#aqs-faq .aqs-card {
  border-color: rgba(0, 131, 6, .16);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .055);
  overflow: hidden;
  padding: 0;
  transition: box-shadow .2s ease, transform .2s ease;
}

#aqs-faq .aqs-card:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, .09);
  transform: translateY(-2px);
}

#aqs-faq .aqs-card h2 {
  background: linear-gradient(90deg, rgba(0, 131, 6, .10), rgba(0, 131, 6, .025));
  border-bottom: 1px solid rgba(0, 131, 6, .14);
  color: var(--a4s-ink);
  font-size: .94rem;
  letter-spacing: .035em;
  margin: 0;
  padding: 15px 19px;
  text-transform: uppercase;
}

#aqs-faq .aqs-item {
  border-color: rgba(39, 39, 39, .10);
  margin: 0 19px;
}

#aqs-faq .aqs-item:last-child { border-bottom: 0; }

#aqs-faq .aqs-question {
  font-size: .96rem;
  line-height: 1.35;
  padding: 16px 34px 16px 0;
  transition: color .18s ease;
}

#aqs-faq .aqs-question:hover { color: var(--a4s-green); }

#aqs-faq .aqs-question::after {
  align-items: center;
  background: rgba(0, 131, 6, .10);
  border-radius: 50%;
  display: flex;
  height: 22px;
  justify-content: center;
  right: 0;
  top: 13px;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
  width: 22px;
}

#aqs-faq .aqs-item.is-open .aqs-question::after {
  background: var(--a4s-green);
  color: var(--a4s-white);
  transform: rotate(180deg);
}

#aqs-faq .aqs-a {
  background: rgba(0, 131, 6, .045);
  border-left: 3px solid var(--a4s-green);
  border-radius: 0 7px 7px 0;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 16px;
  padding: 10px 12px;
}

#aqs-faq .aqs-faq-contact {
  background: var(--a4s-black);
  border-radius: 12px;
  color: var(--a4s-white);
  margin: 26px 0 0;
  padding: 17px 20px;
}

#aqs-faq .aqs-faq-contact a {
  color: var(--a4s-white) !important;
  text-decoration-color: var(--a4s-green) !important;
  text-decoration-thickness: 2px !important;
}

/* Footer : trois zones lisibles (marque/contact, liens, inscription) dans
   une même signature sombre, sans modifier les modules existants. */
#footer {
  background: var(--a4s-black);
  color: rgba(255, 255, 255, .78);
  margin-top: 0;
}

#footer .footer-main {
  background:
    radial-gradient(circle at 8% 0, rgba(0, 131, 6, .35), transparent 270px),
    var(--a4s-black);
  border-top: 4px solid var(--a4s-green);
  padding: 48px 0 34px;
}

#footer .footer-main .main-main,
#footer .footer-main .hook-display-footer {
  align-items: flex-start;
  row-gap: 32px;
}

#footer .footer-main .footer-left {
  border-right: 1px solid rgba(255, 255, 255, .16);
  padding-right: clamp(22px, 3vw, 44px);
}

#footer .footer-main .footer-left img {
  display: block;
  height: auto;
  margin-bottom: 18px;
  max-height: 230px;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

#footer .footer-main h3,
#footer .footer-main .block-title,
#footer .footer-main .title {
  color: var(--a4s-white);
  font-size: .78rem;
  letter-spacing: .10em;
  margin-bottom: 14px;
  position: relative;
}

#footer .footer-main h3::after,
#footer .footer-main .block-title::after,
#footer .footer-main .title::after {
  background: var(--a4s-green);
  content: '';
  display: block;
  height: 3px;
  margin-top: 8px;
  width: 28px;
}

#footer .footer-main p,
#footer .footer-main .footer-contact,
#footer .footer-main .footer-contact a,
#footer .footer-main .footer-contact .fc-line {
  color: rgba(255, 255, 255, .73);
}

#footer .footer-main .footer-contact .fc-ico { color: #63c767; }

#footer .footer-main ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#footer .footer-main li + li { margin-top: 7px; }

#footer .footer-main a {
  color: rgba(255, 255, 255, .76);
  text-decoration: none;
  transition: color .18s ease, padding-left .18s ease;
}

#footer .footer-main a:hover,
#footer .footer-main a:focus {
  color: var(--a4s-white);
  padding-left: 4px;
}

#footer .block-social ul,
#footer .social-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#footer .block-social a,
#footer .social-links a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}

#footer .block-social a:hover,
#footer .block-social a:focus,
#footer .social-links a:hover,
#footer .social-links a:focus {
  background: var(--a4s-green);
  border-color: var(--a4s-green);
  padding-left: 0;
}

#footer .block_newsletter form,
#footer .block-email-subscription form,
#footer #blockEmailSubscription_displayFooterRight form {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  max-width: 430px;
}

#footer .block_newsletter input,
#footer .block-email-subscription input,
#footer #blockEmailSubscription_displayFooterRight input {
  background: rgba(255, 255, 255, .96);
  border: 0;
  border-radius: 7px;
  color: var(--a4s-ink);
  min-height: 42px;
  padding: 9px 12px;
}

#footer .block_newsletter button,
#footer .block-email-subscription button,
#footer #blockEmailSubscription_displayFooterRight button {
  background: var(--a4s-green);
  border: 1px solid var(--a4s-green);
  border-radius: 7px;
  color: var(--a4s-white);
  font-weight: 700;
  min-height: 42px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* PrestaShop place parfois la mention RGPD dans le même formulaire : elle
   doit rester sous les champs, et non les recouvrir. */
#footer .block_newsletter .newsletter-conditions,
#footer .block_newsletter .conditions,
#footer .block-email-subscription .newsletter-conditions,
#footer .block-email-subscription .conditions,
#footer #blockEmailSubscription_displayFooterRight .newsletter-conditions,
#footer #blockEmailSubscription_displayFooterRight .conditions,
#footer #blockEmailSubscription_displayFooterRight .psgdpr_consent_message,
#footer #blockEmailSubscription_displayFooterRight .gdpr_consent {
  color: rgba(255, 255, 255, .54);
  font-size: .77rem;
  grid-column: 1 / -1;
  line-height: 1.45;
  margin: 2px 0 0;
}

#footer .footer-bottom {
  background: #111;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .54);
  font-size: .82rem;
  padding: 18px 0;
}

#footer .footer-bottom a { color: rgba(255, 255, 255, .74); }

/* Structure réelle du module Newsletter ZOne : le message RGPD est un frère
   du bloc de saisie, et non un enfant direct de la grille du formulaire. */
#footer #blockEmailSubscription_displayFooterRight .js-subscription-form {
  display: block;
}

#footer #blockEmailSubscription_displayFooterRight .newsletter-form {
  display: block;
  max-width: 430px;
}

#footer #blockEmailSubscription_displayFooterRight .input-wrapper {
  align-items: stretch;
  display: flex;
  gap: 8px;
}

#footer #blockEmailSubscription_displayFooterRight .input-wrapper .form-control {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

#footer #blockEmailSubscription_displayFooterRight .input-btn {
  display: block;
  flex: 0 0 auto;
  position: static;
}

#footer #blockEmailSubscription_displayFooterRight .input-btn .btn {
  position: static;
}

@media (min-width: 992px) {
  #footer #blockEmailSubscription_displayFooterRight .input-btn .d-none.d-lg-inline-block {
    display: inline-flex !important;
  }

  #footer #blockEmailSubscription_displayFooterRight .input-btn .d-inline-block.d-lg-none {
    display: none !important;
  }
}

/* Accueil mobile (iOS et Android) : le thème conservait une largeur de
   conteneur desktop, d'où de grandes bandes latérales. Le contenu éditorial
   utilise maintenant toute la largeur utile de l'écran, avec une respiration
   régulière de 12 px seulement. */
@media (max-width: 767.98px) {
  body.page-index #wrapper .container,
  body.page-index #content-wrapper .container,
  body.page-index .center-wrapper,
  body.page-index .aone-homepage.home-blocks-middle {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  body.page-index .a4s-home-editorial {
    box-sizing: border-box !important;
    margin: 0 0 38px !important;
    max-width: none !important;
    padding: 14px 12px 0 !important;
    width: 100% !important;
  }

  body.page-index .a4s-home-hero,
  body.page-index .a4s-home-card,
  body.page-index .a4s-home-collection,
  body.page-index .a4s-home-story {
    max-width: 100% !important;
  }
}

#footer #blockEmailSubscription_displayFooterRight .newsletter-message {
  clear: both;
  margin: 9px 0 0;
  max-width: 430px;
}

#footer #blockEmailSubscription_displayFooterRight .newsletter-message .conditons {
  color: rgba(255, 255, 255, .54);
  font-size: .77rem;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 991.98px) {
  #footer .footer-main .footer-left {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    border-right: 0;
    padding-bottom: 26px;
    padding-right: 12px;
  }
}

@media (max-width: 767.98px) {
  body[class*="cms-id-"] #content.page-cms {
    margin-bottom: 38px;
    margin-top: 22px;
    padding: 0 12px;
  }

  body[class*="cms-id-"] #content.page-cms > .typo { padding: 28px 18px; }
  #aqs-faq .aqs-grid { gap: 14px; }
  #aqs-faq .aqs-card:hover { transform: none; }
  #footer .footer-main { padding: 34px 0 24px; }
  #footer .block_newsletter form,
  #footer .block-email-subscription form,
  #footer #blockEmailSubscription_displayFooterRight form {
    grid-template-columns: 1fr;
  }
  #footer .block_newsletter input,
  #footer .block-email-subscription input,
  #footer #blockEmailSubscription_displayFooterRight input { width: 100%; }
  #footer .block_newsletter button,
  #footer .block-email-subscription button,
  #footer #blockEmailSubscription_displayFooterRight button { width: 100%; }
  #footer #blockEmailSubscription_displayFooterRight .input-wrapper { display: block; }
  #footer #blockEmailSubscription_displayFooterRight .input-btn { margin-top: 8px; }
  #footer #blockEmailSubscription_displayFooterRight .input-btn .d-none.d-lg-inline-block { display: none !important; }
  #footer #blockEmailSubscription_displayFooterRight .input-btn .d-inline-block.d-lg-none { display: inline-flex !important; }
}

/*
 * Direction visuelle accueil — noir, framboise & rose poudré
 * Octobre 2026. Cette couche finale remplace les anciens accents verts et
 * jaunes fluorescents, sans changer les contenus catalogue ni les liens.
 */
:root {
  --a4s-black: #0b0a0b;
  --a4s-green: #c93655; /* nom historique conservé pour ne pas casser les règles précédentes */
  --a4s-raspberry: #c93655;
  --a4s-raspberry-dark: #9f213d;
  --a4s-blush: #f7e9eb;
  --a4s-ivory: #fff8f7;
  --a4s-ink: #2d2527;
  --a4s-muted: #6b5d61;
}

/* En-tête et navigation : contraste premium, sans vert ni jaune fluorescent. */
#header .desktop-header-version .page-heading {
  background: var(--a4s-blush) !important;
  color: var(--a4s-raspberry-dark) !important;
}

/* Le thème applique certaines couleurs directement sur les conteneurs
   parents : ces règles les neutralisent aussi, sans toucher aux contenus. */
#header .desktop-header-version {
  background-color: var(--a4s-black) !important;
  background-image: none !important;
}

#header .desktop-header-version .page-heading,
body.page-index #header .page-heading {
  background-color: var(--a4s-blush) !important;
  background-image: none !important;
  color: var(--a4s-raspberry-dark) !important;
}

/* Bandeau injecté par displayBanner : le thème lui attribuait son jaune
   historique en ligne. Il adopte la teinte rose poudré de la nouvelle gamme. */
#header .desktop-header-version .header-banner,
#header .desktop-header-version .header-banner > *,
#header .desktop-header-version .header-banner * {
  background-color: var(--a4s-blush) !important;
  background-image: none !important;
  color: var(--a4s-raspberry-dark) !important;
}

#header .header-main-menu {
  border-bottom-color: var(--a4s-raspberry) !important;
}

#amegamenu .anav-top .amenu-link {
  color: rgba(255, 248, 247, .88) !important;
}

#amegamenu .anav-top .amenu-item:hover > .amenu-link,
#amegamenu .anav-top .amenu-item:focus-within > .amenu-link,
#amegamenu .anav-top .amenu-item.active > .amenu-link {
  background: var(--a4s-raspberry) !important;
  color: #fff !important;
}

#amegamenu .adropdown {
  border-color: rgba(201, 54, 85, .28) !important;
  border-top-color: var(--a4s-raspberry) !important;
}

#amegamenu .dropdown-wrapper {
  background: var(--a4s-ivory) !important;
}

/* Tous les menus de marques adoptent le modèle : recherche + trois colonnes. */
#amegamenu .dropdown-content:has(> .brand-finder + .acategory-content),
#amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) {
  align-items: start;
  column-gap: 24px;
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
}

#amegamenu .dropdown-content:has(> .brand-finder + .acategory-content) > .brand-finder,
#amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .brand-finder {
  align-self: center;
  grid-column: 1;
  margin: 0;
}

#amegamenu .dropdown-content:has(> .brand-finder + .acategory-content) > .acategory-content,
#amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .amanufacturer-content {
  grid-column: 2;
  max-height: 318px;
}

#amegamenu .dropdown-content:has(> .brand-finder + .acategory-content) > .acategory-content.a4s-brand-list,
#amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .amanufacturer-content {
  display: grid !important;
  gap: 7px 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#amegamenu .brand-finder__input {
  border-color: rgba(201, 54, 85, .42) !important;
  border-radius: 8px;
}

#amegamenu .brand-finder__input:focus {
  border-color: var(--a4s-raspberry) !important;
  outline-color: rgba(201, 54, 85, .18) !important;
}

#amegamenu .brand-search-highlight {
  background: rgba(201, 54, 85, .13) !important;
  box-shadow: inset 0 -2px 0 var(--a4s-raspberry) !important;
  color: var(--a4s-raspberry-dark) !important;
}

/* Footer : conserve le noir et remplace les derniers accents verts. */
#footer .footer-main {
  background:
    radial-gradient(circle at 8% 0, rgba(201, 54, 85, .34), transparent 270px),
    var(--a4s-black) !important;
  border-top-color: var(--a4s-raspberry) !important;
}

#footer .footer-main .footer-contact .fc-ico,
#footer .footer-main h3::after,
#footer .footer-main .block-title::after,
#footer .footer-main .title::after,
#footer .block-social a:hover,
#footer .social-links a:hover,
#footer .block_newsletter button,
#footer .block-email-subscription button,
#footer #blockEmailSubscription_displayFooterRight button {
  background-color: var(--a4s-raspberry) !important;
  border-color: var(--a4s-raspberry) !important;
  color: #fff !important;
}

#footer .footer-main .footer-contact .fc-ico { background: transparent !important; color: #f18aa0 !important; }

/* Réseaux sociaux : le thème positionnait les <li> en inline-block, ce qui
   créait un décalage vertical entre les vignettes selon chaque pictogramme. */
#footer .block-social .social-links {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0 !important;
  padding: 0 !important;
}

#footer .block-social .social-links > li {
  align-items: center !important;
  display: flex !important;
  flex: 0 0 42px;
  height: 42px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  vertical-align: top !important;
  width: 42px !important;
}

#footer .block-social .social-links > li > a {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: inherit !important;
  display: flex !important;
  height: 100% !important;
  justify-content: center !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Menu supérieur : les photos restent dans le flux du module (indispensable
   à son calcul de grille), mais leurs fonds blancs se fondent dans la couleur
   du menu grâce au mode de fusion. */
@media (min-width: 992px) {
  #amegamenu .anav-top .amenu-link > img {
    background-color: var(--a4s-black) !important;
    border-radius: 5px;
    filter: brightness(2.15) contrast(.9) saturate(1.25);
    mix-blend-mode: multiply;
    opacity: .9;
  }

  #amegamenu .anav-top .amenu-item:hover > .amenu-link > img,
  #amegamenu .anav-top .amenu-item.active > .amenu-link > img,
  #amegamenu .anav-top .amenu-item:focus-within > .amenu-link > img {
    background-color: var(--a4s-raspberry) !important;
    filter: brightness(1.2) contrast(1) saturate(1.1);
    opacity: 1;
  }
}

/* Zone copyright : le jaune historique est remplacé par un rappel framboise. */
#footer .footer-bottom,
#footer .footer-bottom > .container,
#footer .footer-bottom .container > * {
  background-color: var(--a4s-raspberry) !important;
  background-image: none !important;
  color: #fff !important;
}

#footer .footer-bottom a,
#footer .footer-bottom strong { color: #fff !important; }

/* Harmonisation finale des méga-menus : aucune « encoche » claire autour des
   onglets actifs et un panneau de recherche visuellement centré, quel que soit
   le mode de génération du menu (catégories historiques ou listes automatiques). */
@media (min-width: 992px) {
  /* Le parent porte l'anti-crénelage des angles : il doit être noir lui aussi,
     sans overflow hidden afin de ne jamais couper le panneau déroulant. */
  #amegamenu .anav-top .amenu-item {
    background-color: var(--a4s-black) !important;
    border-radius: 9px 9px 0 0 !important;
  }

  #amegamenu .anav-top .amenu-item > .amenu-link {
    background-color: var(--a4s-black) !important;
    background-clip: padding-box;
    border-radius: 7px 7px 0 0 !important;
    overflow: hidden;
  }

  #amegamenu .anav-top .amenu-item:hover > .amenu-link,
  #amegamenu .anav-top .amenu-item:focus-within > .amenu-link,
  #amegamenu .anav-top .amenu-item.active > .amenu-link {
    background-color: var(--a4s-raspberry) !important;
    /* Ce liseré noir absorbe les pixels blancs de bordure des visuels ZOne
       et fond l'onglet arrondi dans le fond noir du menu. */
    box-shadow: 0 0 0 2px var(--a4s-black) !important;
  }

  /* Menus automatiques : recherche à gauche, marques réparties sur trois
     colonnes. La hauteur fixe de référence rend le centrage identique dans
     Maquillage, Parfum, Cheveux, Corps & Bain, etc. */
  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content),
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) {
    align-items: stretch !important;
    min-height: 318px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) > .brand-finder,
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .brand-finder {
    align-self: center !important;
    margin: 0 !important;
  }

  /* Modèle historique de Soin visage : le titre reste en haut, le bloc de
     recherche se cale au centre exact de sa première colonne. */
  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
    grid-template-areas: "finder brands" !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    min-height: 318px;
    position: relative;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-title {
    grid-area: auto !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: absolute !important;
    top: 2px;
    left: 0;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-brand-finder {
    align-self: center !important;
    grid-area: finder !important;
    margin: 0 !important;
  }
}

/* Ajustement du modèle historique : titre et recherche ne doivent jamais
   partager la même case de grille. La recherche garde sa position médiane. */
@media (min-width: 992px) {
  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
    grid-template-areas:
      "title brands"
      "finder brands" !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-title {
    align-self: start !important;
    grid-area: title !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-brand-finder {
    align-self: center !important;
    grid-area: finder !important;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs {
    grid-area: brands !important;
  }

  /* Les visuels fournis comportent un fond blanc. Dans l'onglet actif, le
     mode multiply fond ce fond dans le framboise, sans changer l'image source. */
  #amegamenu .anav-top .amenu-item:hover > .amenu-link img,
  #amegamenu .anav-top .amenu-item:focus-within > .amenu-link img,
  #amegamenu .anav-top .amenu-item.active > .amenu-link img {
    mix-blend-mode: multiply;
  }
}

/* Règle volontairement finale : priorité sur les anciennes couleurs Z.One. */
@media (min-width: 992px) {
  #amegamenu .anav-top .amenu-item > .amenu-link {
    color: #e32d4f !important;
    font-size: 1rem !important;
    letter-spacing: .012em;
  }
}

/* Dernière règle du footer : elle reste volontairement tout à la fin de la
   feuille afin de passer après les couleurs injectées par les modules ZOne. */
#footer .footer-main,
#footer .footer-main *,
#footer .footer-main a,
#footer .footer-main a:visited,
#footer .footer-main .fc-ico {
  color: #d9c2c8 !important;
}

#footer .footer-main a:hover,
#footer .footer-main a:focus {
  color: #f3dfe3 !important;
}

/* V5 — le groupe d'actions est borné à la largeur du header. */
@media (min-width: 992px) {
  #header,
  #header .main-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  #header .desktop-header-version .main-header .header-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #header .desktop-header-version .header-logo {
    flex: 0 0 300px !important;
  }

  #header .desktop-header-version .header-right {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #header .desktop-header-version .header-right .display-top {
    overflow: hidden !important;
  }

  #header .desktop-header-version .header-right .searchbar-wrapper {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Recherche volontairement plus compacte : largeur confortable sans
     étirer le bandeau jusqu'au bord droit. */
  #header .desktop-header-version .header-right .searchbar-wrapper {
    flex: 0 1 400px !important;
    width: 400px !important;
    max-width: 400px !important;
  }
}

/* Fond d'écran final : rose taupe apaisé, volontairement plus soutenu que
   l'ivoire. Placé à la fin pour neutraliser les fonds du thème ZOne. */
:root { --a4s-page-bg-final: #d9c2c8; }

body,
body.page-index,
body.page-index #wrapper,
body.page-index .main-content,
body.page-index #content-wrapper,
body.page-index .center-wrapper,
body.page-index .aone-homepage,
body.page-index .aone-homepage.home-blocks-middle,
body.page-index #content-wrapper .aone-homepage,
body.page-index .center-wrapper .aone-homepage,
body#category #wrapper,
body#category .main-content,
body#category #content-wrapper,
body#category .center-wrapper,
body#category .page-content,
body[class*="category-id-"] #wrapper,
body[class*="category-id-"] .main-content,
body[class*="category-id-"] #content-wrapper,
body[class*="category-id-"] .center-wrapper,
body[class*="category-id-"] .page-content,
.breadcrumb-wrapper {
  background-color: var(--a4s-page-bg-final) !important;
  background-image: none !important;
}

/* Ajustement final demandé : un rose ancien, plus soutenu que le blanc cassé,
   pour les grands aplats autour des contenus. Les cartes restent lumineuses. */
:root { --a4s-page-bg: #e7d4d8; }

body,
#wrapper,
.breadcrumb-wrapper,
body.page-index #wrapper,
body.page-index .main-content,
body.page-index #content-wrapper,
body.page-index .center-wrapper,
body.page-index .aone-homepage,
body.page-index .aone-homepage.home-blocks-middle,
body#category #wrapper,
body#category .main-content,
body#category #content-wrapper,
body#category .center-wrapper,
body#category .page-content,
body[class*="category-id-"] #wrapper,
body[class*="category-id-"] .main-content,
body[class*="category-id-"] #content-wrapper,
body[class*="category-id-"] .center-wrapper,
body[class*="category-id-"] .page-content {
  background-color: var(--a4s-page-bg) !important;
}

/* Footer : même rouge franc que les intitulés de la navigation. */
#footer .footer-main,
#footer .footer-main *,
#footer .footer-main a,
#footer .footer-main .fc-ico {
  color: #e32d4f !important;
}

/* La recherche est un élément prioritaire de la barre d'en-tête : son bloc
   reçoit un espace dédié et ne peut plus être écrasé entre le compte et le
   panier. */
@media (min-width: 992px) {
  #header .desktop-header-version .display-top > #search_widget,
  #header .desktop-header-version .display-top > .searchbar-wrapper {
    flex: 1 1 420px !important;
    min-width: 320px !important;
    width: auto !important;
  }

  #header .desktop-header-version #search_widget,
  #header .desktop-header-version #search_widget .searchbar-wrapper,
  #header .desktop-header-version #search_widget .search-widget {
    min-width: 0 !important;
    width: 100% !important;
  }

  #header .desktop-header-version #search_widget .search-widget {
    max-width: none !important;
  }

  #header .desktop-header-version #search_widget .search-widget form input[type="text"] {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Grille de l'en-tête sur grand écran : évite que le logo recouvre les
   actions et maintient la recherche large sans masquer la connexion. */
@media (min-width: 992px) {
  #header .desktop-header-version .main-header .header-wrapper {
    align-items: center !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 30%) minmax(0, 1fr) !important;
  }

  #header .desktop-header-version .header-logo {
    grid-column: 1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #header .desktop-header-version .header-right {
    grid-column: 2 !important;
    margin: 7px 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #header .desktop-header-version .display-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px;
    min-width: 0 !important;
  }

  #header .desktop-header-version .display-top > div {
    margin-left: 0 !important;
  }

  #header .desktop-header-version .display-top > #search_widget {
    flex: 1 1 420px !important;
    min-width: 300px !important;
  }

  #header .desktop-header-version .display-top > div:not(#search_widget) {
    flex: 0 0 auto !important;
  }
}

/* Barre de recherche de l'en-tête : le champ ne doit jamais se réduire à
   quelques pixels lorsque les blocs connexion et panier prennent leur place.
   Le bouton conserve une largeur fixe ; le reste de la barre est réservé à
   la saisie. */
@media (min-width: 992px) {
  #header .desktop-header-version .searchbar-wrapper,
  #header .desktop-header-version .search-widget {
    min-width: 0 !important;
    width: 100% !important;
  }

  #header .desktop-header-version .search-widget {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 520px;
  }

  #header .desktop-header-version .search-widget form {
    display: block !important;
    min-width: 0 !important;
    position: relative !important;
    width: 100% !important;
  }

  #header .desktop-header-version .search-widget form input[type="text"] {
    box-sizing: border-box !important;
    display: block !important;
    min-width: 0 !important;
    padding-right: 68px !important;
    width: 100% !important;
  }

  #header .desktop-header-version .search-widget form [type="submit"] {
    box-sizing: border-box !important;
    right: 0 !important;
    width: 58px !important;
  }
}

/* Fond général : rose poudré discret, pour habiller les espaces hors cartes
   sans retirer la clarté des fiches produit et des blocs de contenu. */
:root { --a4s-page-bg: #f4e7e9; }

body,
#wrapper,
.breadcrumb-wrapper,
body.page-index #wrapper,
body.page-index .main-content,
body.page-index #content-wrapper,
body.page-index .center-wrapper,
body.page-index .aone-homepage,
body#category #wrapper,
body#category .main-content,
body#category #content-wrapper,
body#category .center-wrapper,
body#category .page-content,
body[class*="category-id-"] #wrapper,
body[class*="category-id-"] .main-content,
body[class*="category-id-"] #content-wrapper,
body[class*="category-id-"] .center-wrapper,
body[class*="category-id-"] .page-content {
  background-color: var(--a4s-page-bg) !important;
}

/* Lisibilité du menu supérieur : rouge plus franc, proche de la signature
   du logo, et taille légèrement majorée sans modifier les menus mobiles. */
@media (min-width: 992px) {
  #amegamenu .anav-top .amenu-item > .amenu-link {
    color: #e32d4f !important;
    font-size: 1rem !important;
    letter-spacing: .012em;
  }
}

/* Menus de marques automatiques : Maquillage, Parfum, Cheveux, Corps & Bain,
   Protection solaire et Nutricosmétique reprennent le repère visuel de Soin
   visage. Les libellés sont portés par le lien parent afin de ne jamais
   modifier les contenus ni les liens configurés dans Z.One Mega Menu. */
@media (min-width: 992px) {
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="3834-maquillage"]) { --a4s-brand-menu-title: "MAQUILLAGE"; }
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="3831-parfum"]) { --a4s-brand-menu-title: "PARFUM"; }
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="3835-cheveux"]) { --a4s-brand-menu-title: "CHEVEUX"; }
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="3832-corps-bain"]) { --a4s-brand-menu-title: "CORPS & BAIN"; }
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="3836-protection-solaire"]) { --a4s-brand-menu-title: "PROTECTION SOLAIRE"; }
  #amegamenu .anav-top .amenu-item:has(> .amenu-link[href*="6561-nutricosmetique"]) { --a4s-brand-menu-title: "NUTRICOSMÉTIQUE"; }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) {
    position: relative;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content)::before {
    color: var(--a4s-ink);
    content: var(--a4s-brand-menu-title, "");
    font-size: 1rem;
    font-weight: 800;
    left: 0;
    letter-spacing: .02em;
    line-height: 1.15;
    position: absolute;
    text-transform: uppercase;
    top: 0;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) > .acategory-content.a4s-brand-list .category-title a {
    align-items: center;
    color: var(--a4s-raspberry-dark) !important;
    display: flex !important;
    font-size: .88rem !important;
    font-weight: 400 !important;
    gap: 0;
    line-height: 1.25 !important;
  }

  /* Même cadence de grille que la liste <ul> de Soin visage. */
  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) > .acategory-content.a4s-brand-list {
    gap: 5px 18px !important;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) > .acategory-content.a4s-brand-list .category-title a::before {
    background: var(--a4s-ink);
    border: 0;
    border-radius: 999px;
    content: "";
    flex: 0 0 2px;
    height: 36px;
    margin-right: 12px;
    width: 2px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu:has(> .brand-finder + .acategory-content) > .acategory-content.a4s-brand-list .category-title a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Rubriques à accès direct : ces entrées n'ont pas besoin d'un sous-menu.
   Le lien principal reste actif et ouvre immédiatement la page catégorie. */
#amegamenu .amenu-item:has(> .amenu-link[href="/"]) > .adropdown,
#amegamenu .amenu-item:has(> .amenu-link[href$="/3830-homme"]) > .adropdown,
#amegamenu .amenu-item:has(> .amenu-link[href$="/3837-cadeaux"]) > .adropdown,
#amegamenu .amenu-item:has(> .amenu-link[href$="/3838-farmaci"]) > .adropdown,
#amegamenu .amenu-item:has(> .amenu-link[href$="/3845-hygiene-beaute"]) > .adropdown,
#mobile-amegamenu .amenu-item:has(> .amenu-link[href="/"]) > .adropdown,
#mobile-amegamenu .amenu-item:has(> .amenu-link[href$="/3830-homme"]) > .adropdown,
#mobile-amegamenu .amenu-item:has(> .amenu-link[href$="/3837-cadeaux"]) > .adropdown,
#mobile-amegamenu .amenu-item:has(> .amenu-link[href$="/3838-farmaci"]) > .adropdown,
#mobile-amegamenu .amenu-item:has(> .amenu-link[href$="/3845-hygiene-beaute"]) > .adropdown {
  display: none !important;
}

/* Newsletter : l'icône d'enveloppe et le libellé du bouton forment un seul
   groupe visuellement centré, quel que soit le markup injecté par le module. */
#footer #blockEmailSubscription_displayFooterRight .input-btn .btn,
#footer .block_newsletter button,
#footer .block-email-subscription button {
  align-items: center !important;
  display: inline-flex !important;
  gap: 8px;
  justify-content: center !important;
  line-height: 1 !important;
}

#footer #blockEmailSubscription_displayFooterRight .input-btn .btn::before,
#footer .block_newsletter button::before,
#footer .block-email-subscription button::before {
  display: block;
  line-height: 1;
  margin: 0 !important;
}

#footer #blockEmailSubscription_displayFooterRight .input-btn .btn i,
#footer #blockEmailSubscription_displayFooterRight .input-btn .btn .material-icons,
#footer .block_newsletter button i,
#footer .block_newsletter button .material-icons,
#footer .block-email-subscription button i,
#footer .block-email-subscription button .material-icons {
  font-size: 20px;
  line-height: 1 !important;
  margin: 0 !important;
}


/* Menus automatiques (Maquillage, Parfum, Cheveux, Corps & Bain, etc.) :
   leur HTML est distinct de Soin visage. On impose donc explicitement la
   même grille, plutôt que de dépendre du sélecteur conditionnel :has(). */
@media (min-width: 992px) {
  #amegamenu .dropdown-content.a4s-auto-category-menu {
    align-items: stretch !important;
    display: grid !important;
    grid-template-areas: "finder brands" !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    min-height: 318px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu > .brand-finder {
    align-self: center !important;
    grid-area: finder !important;
    margin: 0 !important;
    max-width: 210px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu > .acategory-content {
    grid-area: brands !important;
    grid-column: auto !important;
    max-height: 318px;
  }
}

/* Page d'accueil : les anciens blocs texte sont gardés en base mais retirés
   de l'affichage au profit du bloc éditorial a4s-home-editorial. */
body.page-index .aone-homepage.home-blocks-middle {
  background: var(--a4s-ivory) !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: none !important;
  width: 100% !important;
}

body.page-index #wrapper,
body.page-index .main-content,
body.page-index #content-wrapper,
body.page-index .center-wrapper,
body.page-index .aone-homepage,
body.page-index #content-wrapper .aone-homepage,
body.page-index .center-wrapper .aone-homepage {
  background-color: var(--a4s-ivory) !important;
  background-image: none !important;
}

body.page-index .center-wrapper {
  max-width: none !important;
  width: 100% !important;
}

/* Catalogue : les colonnes doivent rester lisibles sur le même fond ivoire
   que l'accueil, au lieu du vert appliqué historiquement à l'enveloppe. */
body#category #wrapper,
body#category .main-content,
body#category #content-wrapper,
body#category .center-wrapper,
body#category .page-content,
body[class*="category-id-"] #wrapper,
body[class*="category-id-"] .main-content,
body[class*="category-id-"] #content-wrapper,
body[class*="category-id-"] .center-wrapper,
body[class*="category-id-"] .page-content {
  background-color: var(--a4s-ivory) !important;
  background-image: none !important;
}

body#category #left-column .block,
body[class*="category-id-"] #left-column .block {
  background: #fff !important;
  border: 1px solid rgba(201, 54, 85, .12);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(45, 20, 27, .06);
}

body.page-index .aone-homepage.home-blocks-middle > .block_id_28,
body.page-index .aone-homepage.home-blocks-middle > .block_id_29,
body.page-index .aone-homepage.home-blocks-middle > .block_id_30,
body.page-index .aone-homepage.home-blocks-middle > .block_id_31,
body.page-index .aone-homepage.home-blocks-middle > .block_id_32,
body.page-index .aone-homepage.home-blocks-middle > .block_id_33,
body.page-index .aone-homepage.home-blocks-middle > .block_id_34,
body.page-index .aone-homepage.home-blocks-middle > .block_id_35,
body.page-index .aone-homepage.home-blocks-middle > .block_id_36,
body.page-index .aone-homepage.home-blocks-middle > .block_id_37,
body.page-index .aone-homepage.home-blocks-middle > .block_id_38,
body.page-index .aone-homepage.home-blocks-middle > .block_id_39,
body.page-index .aone-homepage.home-blocks-middle > .block_id_40,
body.page-index .aone-homepage.home-blocks-middle > .block_id_41,
body.page-index .aone-homepage.home-blocks-middle > .block_id_42,
body.page-index .aone-homepage.home-blocks-middle > .block_id_43,
body.page-index .aone-homepage.home-blocks-middle > .block_id_44 {
  display: none;
}

body.page-index .aone-homepage.home-blocks-middle > .a4s-home-editorial {
  order: -1;
}

body.page-index .a-banner { display: none; }

.a4s-home-editorial {
  margin: 0 auto 64px;
  max-width: 1440px;
  padding: 26px 20px 0;
  width: min(calc(100% - 48px), 1440px);
}

.a4s-home-hero {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(11, 10, 11, .98) 0%, rgba(11, 10, 11, .86) 34%, rgba(11, 10, 11, .12) 72%),
    url('../img/a4s-hero-beaute-framboise-v1.png') center / cover no-repeat;
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(43, 13, 21, .18);
  color: #fff;
  display: flex;
  min-height: clamp(340px, 37vw, 490px);
  overflow: hidden;
  padding: clamp(30px, 6vw, 84px);
}

.a4s-home-hero__content { max-width: 470px; }
.a4s-home-kicker { color: #f5a5b5; font-size: .78rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 13px; text-transform: uppercase; }
.a4s-home-hero h2 { color: #fff; font-size: clamp(2.15rem, 4vw, 4.15rem); letter-spacing: -.045em; line-height: .98; margin: 0 0 18px; }
.a4s-home-hero p:not(.a4s-home-kicker) { color: rgba(255, 255, 255, .78); font-size: 1.04rem; line-height: 1.6; margin: 0 0 28px; }
.a4s-home-button { background: var(--a4s-raspberry); border-radius: 7px; color: #fff !important; display: inline-flex; font-size: .9rem; font-weight: 800; gap: 10px; padding: 13px 17px; text-decoration: none !important; transition: background .2s ease, transform .2s ease; }
.a4s-home-button:hover, .a4s-home-button:focus { background: #e1506e; transform: translateY(-2px); }

.a4s-home-categories { margin: 56px 0 0; }
.a4s-home-section-head { align-items: end; display: flex; gap: 22px; justify-content: space-between; margin: 0 0 20px; }
.a4s-home-section-head h2 { color: var(--a4s-ink); font-size: clamp(1.65rem, 2.6vw, 2.35rem); letter-spacing: -.025em; margin: 0; }
.a4s-home-section-head p { color: var(--a4s-muted); margin: 0; max-width: 430px; }
.a4s-home-card-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a4s-home-card { background: var(--a4s-ivory); border: 1px solid rgba(201, 54, 85, .13); border-radius: 14px; color: var(--a4s-ink) !important; min-height: 175px; overflow: hidden; padding: 22px; position: relative; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease; }
.a4s-home-card::before { background: linear-gradient(135deg, rgba(201, 54, 85, .18), transparent 58%); content: ''; inset: 0; position: absolute; }
.a4s-home-card:nth-child(2n) { background: #f2dce1; }
.a4s-home-card:nth-child(3n) { background: #211a1c; color: #fff !important; }
.a4s-home-card:hover, .a4s-home-card:focus { box-shadow: 0 14px 30px rgba(55, 21, 30, .16); transform: translateY(-4px); }
.a4s-home-card__eyebrow { color: var(--a4s-raspberry); display: block; font-size: .72rem; font-weight: 800; letter-spacing: .11em; position: relative; text-transform: uppercase; }
.a4s-home-card:nth-child(3n) .a4s-home-card__eyebrow { color: #f6a5b5; }
.a4s-home-card strong { display: block; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.025em; line-height: 1.05; margin-top: 11px; position: relative; }
.a4s-home-card span:last-child { bottom: 19px; font-size: 1.15rem; font-weight: 700; position: absolute; right: 20px; }

.a4s-home-collections { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 15px; }
.a4s-home-collection { background: var(--a4s-black); border-radius: 12px; color: #fff !important; min-height: 125px; padding: 24px; position: relative; text-decoration: none !important; transition: box-shadow .2s ease, transform .2s ease; }
.a4s-home-collection:hover, .a4s-home-collection:focus { box-shadow: 0 14px 30px rgba(55, 21, 30, .20); transform: translateY(-4px); }
.a4s-home-collection::after { background: var(--a4s-raspberry); border-radius: 99px; content: ''; height: 7px; position: absolute; right: 24px; top: 27px; width: 7px; }
.a4s-home-collection span { color: #f1a0b0; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.a4s-home-collection strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; margin-top: 9px; }

/* Bloc éditorial d'accueil : présentation de la sélection Aux Quatre Saisons. */
.a4s-home-story {
  background: linear-gradient(120deg, #23191b 0%, #382126 100%);
  border: 1px solid rgba(201, 54, 85, .42);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(55, 21, 30, .12);
  color: rgba(255, 248, 247, .86);
  margin: 30px 0 38px;
  overflow: hidden;
  padding: 34px 38px;
  position: relative;
}
.a4s-home-story::after { background: var(--a4s-raspberry); border-radius: 50%; content: ''; height: 190px; opacity: .14; position: absolute; right: -70px; top: -85px; width: 190px; }
.a4s-home-story__eyebrow { color: #f3a1b1; font-size: .74rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 14px; position: relative; text-transform: uppercase; z-index: 1; }
.a4s-home-story__grid { align-items: start; display: grid; gap: 44px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); position: relative; z-index: 1; }
.a4s-home-story h2 { color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.65rem); letter-spacing: -.035em; line-height: 1.06; margin: 0 0 15px; }
.a4s-home-story p { font-size: 1rem; line-height: 1.65; margin: 0; }
.a4s-home-story__detail { border-left: 1px solid rgba(255, 248, 247, .24); padding-left: 34px; }
.a4s-home-story__promise { color: #fff; margin-top: 19px !important; }
.a4s-home-story__promise strong { color: #f3a1b1; }

@media (max-width: 991.98px) {
  #amegamenu .dropdown-content:has(> .brand-finder + .acategory-content),
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) { display: block; }
  #amegamenu .dropdown-content:has(> .brand-finder + .acategory-content) > .brand-finder,
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .brand-finder { margin-bottom: 15px; max-width: 340px; }
  .a4s-home-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .a4s-home-editorial { margin-bottom: 38px; padding: 14px 12px 0; }
  .a4s-home-hero { background-position: 64% center; border-radius: 12px; min-height: 420px; padding: 28px 22px; }
  .a4s-home-section-head { align-items: start; display: block; }
  .a4s-home-section-head p { margin-top: 8px; }
  .a4s-home-card-grid, .a4s-home-collections { grid-template-columns: 1fr; }
  .a4s-home-story { border-radius: 14px; margin: 24px 0 30px; padding: 26px 23px; }
  .a4s-home-story__grid { gap: 21px; grid-template-columns: 1fr; }
  .a4s-home-story__detail { border-left: 0; border-top: 1px solid rgba(255, 248, 247, .24); padding: 20px 0 0; }
  .a4s-home-card { min-height: 142px; }
}

/* Correctif final de palette : ZOne génère après custom.css un style en ligne
   avec le jaune/vert historique. Ces règles ciblent exactement ces zones et
   restent volontairement en fin de fichier afin de stabiliser la cascade. */
#header .header-event-banner,
#header .header-bottom,
#header #header-main-menu-sticky-wrapper,
#header .desktop-sticky-wrapper {
  background-color: var(--a4s-black) !important;
  background-image: none !important;
}

#header .header-event-banner,
#header .header-event-banner * {
  background-color: var(--a4s-blush) !important;
  color: var(--a4s-raspberry-dark) !important;
}

#wrapper,
body.page-index #wrapper,
body#category #wrapper,
body[class*="category-id-"] #wrapper,
.breadcrumb-wrapper {
  background-color: var(--a4s-ivory) !important;
  background-image: none !important;
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.btn.btn-primary,
.btn.btn-primary.disabled,
.btn.btn-primary:disabled,
.add-to-cart,
.add-to-cart.disabled,
.add-to-cart:disabled,
#header .cart-link.btn-primary,
#header .mobile-header-version .mobile-menu-icon {
  background-color: var(--a4s-raspberry) !important;
  border-color: var(--a4s-raspberry) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.add-to-cart:hover,
.add-to-cart:focus {
  background-color: var(--a4s-raspberry-dark) !important;
  border-color: var(--a4s-raspberry-dark) !important;
}

#amegamenu .anav-top .amenu-link,
#amegamenu .anav-top .adropdown,
#amegamenu .anav-top .acategory-content .category-title,
#amegamenu .anav-top .amanufacturer-content .brand-name,
#amegamenu .anav-top .acategory-content .category-subs li a {
  color: var(--a4s-raspberry-dark) !important;
}

#amegamenu .anav-top .amenu-item:hover > .amenu-link,
#amegamenu .anav-top .amenu-item:focus-within > .amenu-link,
#amegamenu .anav-top .amenu-item.active > .amenu-link {
  color: #fff !important;
}

#footer,
#footer .footer-bottom {
  background-color: var(--a4s-black) !important;
  background-image: none !important;
}

#footer .footer-main,
#footer .footer-main p,
#footer .footer-main li,
#footer .footer-main a,
#footer .footer-main label,
#footer .footer-main .label {
  color: rgba(255, 248, 247, .78) !important;
}

#footer .footer-main h3,
#footer .footer-main .block-title,
#footer .footer-main .title,
#footer .footer-main .footer-contact .fc-ico,
#footer .footer-main a:hover {
  color: #f18aa0 !important;
}

#footer .footer-bottom,
#footer .footer-bottom > .container,
#footer .footer-bottom .container > * {
  background-color: var(--a4s-raspberry) !important;
  color: #fff !important;
}

body#category .product-list,
body#category .products,
body#category #left-column .block,
body[class*="category-id-"] #left-column .block {
  background-color: #fff !important;
}

/* FAQ : neutralise le fond vert injecté par l'ancien bloc CMS et reprend
   les cartes ivoire / framboise du front-office modernisé. */
body#cms #content.page-cms-8,
body#cms #content.page-cms-8 .typo {
  background: var(--a4s-ivory) !important;
}

body#cms #aqs-faq {
  background: transparent !important;
  color: var(--a4s-ink) !important;
  padding: clamp(1rem, 2.5vw, 2.5rem) !important;
}

body#cms #aqs-faq .aqs-faq-wrap {
  margin: 0 auto;
  max-width: 1180px;
}

body#cms #aqs-faq .aqs-faq-hero {
  background: linear-gradient(135deg, #f7e9eb, #fff8f7) !important;
  border: 1px solid rgba(201, 54, 85, .22);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(45, 37, 39, .08);
  color: var(--a4s-ink) !important;
  margin-bottom: 20px;
  padding: clamp(1.5rem, 3vw, 2.75rem);
}

body#cms #aqs-faq .aqs-faq-badge {
  background: rgba(201, 54, 85, .1) !important;
  border-radius: 999px;
  color: var(--a4s-raspberry-dark) !important;
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .45rem .75rem;
  text-transform: uppercase;
}

body#cms #aqs-faq .aqs-faq-hero h1,
body#cms #aqs-faq .aqs-faq-hero p,
body#cms #aqs-faq .aqs-card h2 {
  color: var(--a4s-ink) !important;
}

body#cms #aqs-faq .aqs-grid { gap: 20px; }

body#cms #aqs-faq .aqs-card {
  background: #fff !important;
  border: 1px solid rgba(201, 54, 85, .16);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(45, 37, 39, .06);
}

body#cms #aqs-faq .aqs-a {
  background: #fff8f7 !important;
  border-left-color: var(--a4s-raspberry) !important;
  color: #675b5e !important;
}

/* Correctif méga-menu (doit rester en dernier) : onglets sans pixels clairs
   aux coins et recherche centrée dans la première colonne sur chaque menu. */
@media (min-width: 992px) {
  #amegamenu .anav-top .amenu-item > .amenu-link {
    background-color: var(--a4s-black) !important;
    background-clip: padding-box;
    border-radius: 7px 7px 0 0 !important;
    overflow: hidden;
  }

  #amegamenu .anav-top .amenu-item:hover > .amenu-link,
  #amegamenu .anav-top .amenu-item:focus-within > .amenu-link,
  #amegamenu .anav-top .amenu-item.active > .amenu-link {
    background-color: var(--a4s-raspberry) !important;
    box-shadow: 0 0 0 2px var(--a4s-black) !important;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu,
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) {
    align-items: stretch !important;
    display: grid !important;
    grid-template-areas: "finder brands" !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    min-height: 318px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu > .brand-finder,
  #amegamenu .dropdown-content:has(> .brand-finder + .amanufacturer-content) > .brand-finder {
    align-self: center !important;
    grid-area: finder !important;
    margin: 0 !important;
    max-width: 210px;
  }

  #amegamenu .dropdown-content.a4s-auto-category-menu > .acategory-content {
    grid-area: brands !important;
    grid-column: auto !important;
    max-height: 318px;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) {
    grid-template-areas:
      "title brands"
      "finder brands" !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    min-height: 318px;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-title {
    align-self: start !important;
    grid-area: title !important;
    grid-column: auto !important;
    grid-row: auto !important;
    position: static !important;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-brand-finder {
    align-self: center !important;
    grid-area: finder !important;
    margin: 0 !important;
  }

  #amegamenu .anav-top .acategory-content:has(.category-brand-finder) .category-subs {
    grid-area: brands !important;
  }

  #amegamenu .anav-top .amenu-item:hover > .amenu-link img,
  #amegamenu .anav-top .amenu-item:focus-within > .amenu-link img,
  #amegamenu .anav-top .amenu-item.active > .amenu-link img {
    mix-blend-mode: multiply;
  }
}

/* Fond d'écran final : rose taupe apaisé, volontairement plus soutenu que
   l'ivoire. Cette règle passe après toutes les définitions de fond du thème. */
:root { --a4s-page-bg-final: #d9c2c8; }

body,
body.page-index,
body.page-index #wrapper,
body.page-index .main-content,
body.page-index #content-wrapper,
body.page-index .center-wrapper,
body.page-index .aone-homepage,
body.page-index .aone-homepage.home-blocks-middle,
body.page-index #content-wrapper .aone-homepage,
body.page-index .center-wrapper .aone-homepage,
body#category #wrapper,
body#category .main-content,
body#category #content-wrapper,
body#category .center-wrapper,
body#category .page-content,
body[class*="category-id-"] #wrapper,
body[class*="category-id-"] .main-content,
body[class*="category-id-"] #content-wrapper,
body[class*="category-id-"] .center-wrapper,
body[class*="category-id-"] .page-content,
.breadcrumb-wrapper {
  background-color: var(--a4s-page-bg-final) !important;
  background-image: none !important;
}

/* Correctif structurel de l'en-tête desktop : les modules sont directement
   rendus par le hook displayTop. La recherche est donc searchbar-wrapper,
   et non toujours #search_widget ; cette distinction supprimme le rognage du
   compte et redonne un champ réellement saisissable. */
@media (min-width: 992px) {
  #header .desktop-header-version .main-header .header-wrapper {
    align-items: center !important;
    display: flex !important;
    gap: 20px;
    min-width: 0 !important;
  }

  #header .desktop-header-version .header-logo {
    flex: 0 1 clamp(220px, 24vw, 340px) !important;
    grid-column: auto !important;
    max-width: clamp(220px, 24vw, 340px) !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #header .desktop-header-version .header-right {
    flex: 1 1 auto !important;
    grid-column: auto !important;
    margin: 7px 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  #header .desktop-header-version .display-top {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2;
  }

  #header .desktop-header-version .display-top > div {
    margin-left: 0 !important;
  }

  #header .desktop-header-version .display-top > .customer-signin-module,
  #header .desktop-header-version .display-top > .shopping-cart-module {
    flex: 0 0 auto !important;
  }

  #header .desktop-header-version .display-top > .searchbar-wrapper,
  #header .desktop-header-version .display-top > #search_widget {
    flex: 1 1 260px !important;
    min-width: 240px !important;
    width: auto !important;
  }

  #header .desktop-header-version .searchbar-wrapper,
  #header .desktop-header-version #search_widget,
  #header .desktop-header-version .search-widget,
  #header .desktop-header-version .search-widget form {
    min-width: 0 !important;
    width: 100% !important;
  }

  #header .desktop-header-version .search-widget {
    margin: 0 !important;
    max-width: none !important;
  }

  #header .desktop-header-version .search-widget form input[type="text"] {
    cursor: text !important;
    pointer-events: auto !important;
    position: relative !important;
    width: 100% !important;
    z-index: 2;
  }

  #header .desktop-header-version .search-widget form [type="submit"] {
    z-index: 3;
  }
}

/* Interaction de recherche : le bouton ne doit jamais couvrir tout le champ.
   Cette couche est placée au-dessus du logo et des éventuels calques du thème
   pour que le curseur puisse toujours entrer dans la zone de saisie. */
@media (min-width: 992px) {
  #header .desktop-header-version .header-logo {
    z-index: 1 !important;
  }

  #header .desktop-header-version .header-right {
    padding-left: 24px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  #header .desktop-header-version .display-top > .searchbar-wrapper {
    flex: 1 1 420px !important;
    min-width: 360px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  #header .desktop-header-version .searchbar-wrapper,
  #header .desktop-header-version #search_widget,
  #header .desktop-header-version .search-widget,
  #header .desktop-header-version .search-widget form {
    display: block !important;
    position: relative !important;
    width: 100% !important;
  }

  #header .desktop-header-version .search-widget form input[type="text"] {
    box-sizing: border-box !important;
    cursor: text !important;
    pointer-events: auto !important;
    position: relative !important;
    padding-right: 74px !important;
    width: 100% !important;
    z-index: 11 !important;
  }

  #header .desktop-header-version .search-widget form [type="submit"] {
    pointer-events: auto !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 58px !important;
    z-index: 12 !important;
  }
}

/* Finitions du champ de recherche et du bandeau : le texte saisi reste
   contrasté sur fond clair et le logo ne peut plus déborder sur les actions. */
@media (min-width: 992px) {
  #header .desktop-header-version .main-header .header-wrapper {
    gap: 32px !important;
  }

  #header .desktop-header-version .header-logo {
    flex: 0 0 300px !important;
    max-width: 300px !important;
    width: 300px !important;
  }

  #header .desktop-header-version .header-logo img,
  #header .desktop-header-version .header-logo .svg-logo {
    max-width: 300px !important;
    width: 300px !important;
  }

  #header .desktop-header-version .header-right {
    padding-left: 0 !important;
  }

  #header .desktop-header-version .search-widget form input[type="text"] {
    background-color: #ffffff !important;
    caret-color: #e32d4f !important;
    color: #2d2527 !important;
  }

  #header .desktop-header-version .search-widget form input[type="text"]::placeholder {
    color: #806f73 !important;
    opacity: 1 !important;
  }
}

/* Correctif V4 du bandeau : deux zones réellement séparées sur ordinateur.
   Le logo ne recouvre plus les actions et la saisie garde sa couleur, même
   quand le navigateur applique -webkit-text-fill-color. */
@media (min-width: 992px) {
  #header .desktop-header-version .main-header .header-wrapper {
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    column-gap: 32px !important;
    align-items: center !important;
  }

  #header .desktop-header-version .header-logo {
    grid-column: 1 !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: auto !important;
  }

  #header .desktop-header-version .header-logo img,
  #header .desktop-header-version .header-logo .svg-logo {
    display: block !important;
    width: 300px !important;
    max-width: 300px !important;
  }

  #header .desktop-header-version .header-right {
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 7px 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #header .desktop-header-version .header-right .display-top {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #header .desktop-header-version .customer-signin-module,
  #header .desktop-header-version .shopping-cart-module {
    flex: 0 0 auto !important;
  }

  #header .desktop-header-version .header-right .searchbar-wrapper {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 320px !important;
    margin: 0 !important;
  }

  #header .desktop-header-version .header-right .searchbar-wrapper,
  #header .desktop-header-version .header-right #search_widget,
  #header .desktop-header-version .header-right .search-widget,
  #header .desktop-header-version .header-right .search-widget form {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #header .desktop-header-version #search_widget input.form-control[name="s"],
  #header .desktop-header-version #search_widget input[name="s"] {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 74px !important;
    background: #ffffff !important;
    color: #2d2527 !important;
    -webkit-text-fill-color: #2d2527 !important;
    caret-color: #e32d4f !important;
    opacity: 1 !important;
    cursor: text !important;
    pointer-events: auto !important;
  }

  #header .desktop-header-version #search_widget input.form-control[name="s"]:focus,
  #header .desktop-header-version #search_widget input[name="s"]:focus {
    color: #2d2527 !important;
    -webkit-text-fill-color: #2d2527 !important;
    caret-color: #e32d4f !important;
  }

  #header .desktop-header-version #search_widget input[name="s"]::placeholder {
    color: #806f73 !important;
    -webkit-text-fill-color: #806f73 !important;
    opacity: 1 !important;
  }

  #header .desktop-header-version .search-widget form [type="submit"] {
    width: 58px !important;
    right: 0 !important;
    pointer-events: auto !important;
  }
}

/* V6 — borne finale du groupe logo / actions (après toutes les règles du thème). */
@media (min-width: 992px) {
  #header,
  #header .main-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  #header .desktop-header-version .main-header .header-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  #header .desktop-header-version .header-logo {
    flex: 0 0 300px !important;
  }

  #header .desktop-header-version .header-right {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #header .desktop-header-version .header-right .display-top {
    overflow: hidden !important;
  }

  /* Recherche compacte sur desktop, sans compromettre les petits écrans. */
  #header .desktop-header-version .header-right .searchbar-wrapper {
    flex: 0 1 400px !important;
    width: 400px !important;
    min-width: 0 !important;
    max-width: 400px !important;
  }
}

/* Bandeau tout en haut : teinte rose taupe demandée pour le nom du site. */
#header .desktop-header-version .page-heading,
body.page-index #header .page-heading,
#header .desktop-header-version .header-banner,
#header .desktop-header-version .header-banner > * {
  background-color: #d9c2c8 !important;
  background-image: none !important;
}

/* Le titre est injecté par Zone Theme Manager dans ce sous-conteneur. */
#header .desktop-header-version .header-event-banner,
#header .desktop-header-version .header-event-banner > .container,
#header .desktop-header-version .header-event-banner-wrapper {
  background-color: #d9c2c8 !important;
  background-image: none !important;
}

#header .desktop-header-version .header-event-banner-wrapper * {
  background-color: #d9c2c8 !important;
  background-image: none !important;
}

/* Pages produit : même fond rose taupe que l'accueil et les catégories. */
body#product,
body#product #wrapper,
body#product .main-content,
body#product #content-wrapper,
body#product .center-wrapper,
body#product .product-page,
body.page-product,
body.page-product #wrapper,
body.page-product .main-content,
body.page-product #content-wrapper,
body.page-product .center-wrapper {
  background-color: #d9c2c8 !important;
  background-image: none !important;
}

/* Certains gabarits ZOne appliquent le blanc au niveau de #page et du
   conteneur produit : on harmonise ces surfaces, pas les cartes produit. */
body#product #page,
body#product #page .main-content,
body#product #page .main-content > .container,
body#product #content-wrapper,
body#product #content-wrapper > .center-wrapper,
body.page-product #page,
body.page-product #page .main-content,
body.page-product #page .main-content > .container,
body.page-product #content-wrapper,
body.page-product #content-wrapper > .center-wrapper {
  background-color: #d9c2c8 !important;
  background-image: none !important;
}

/* Encadrés de la fiche produit : même teinte, selon la demande client. */
body#product .main-product-details,
body#product .main-product-bottom .block-content,
body#product .main-product-bottom .box-bg,
body#product .module-product-comments-list,
body#product .product-comments-list,
body.page-product .main-product-details,
body.page-product .main-product-bottom .block-content,
body.page-product .main-product-bottom .box-bg,
body.page-product .module-product-comments-list,
body.page-product .product-comments-list {
  background-color: #d9c2c8 !important;
  background-image: none !important;
  border-color: rgba(177, 38, 75, .28) !important;
}

/* Méga-menu desktop : tous les panneaux déroulants reprennent le rose taupe. */
@media (min-width: 992px) {
  #amegamenu .adropdown,
  #amegamenu .adropdown .dropdown-wrapper,
  #amegamenu .adropdown .dropdown-content,
  #amegamenu .adropdown .acategory-content,
  #amegamenu .adropdown .amanufacturer-content {
    background-color: #d9c2c8 !important;
    background-image: none !important;
  }

  #amegamenu .adropdown {
    border-color: rgba(177, 38, 75, .55) !important;
    border-top-color: #b1264b !important;
  }
}

/* Footer : rose framboise clair, inspiré du bouton S'abonner et lisible sur noir. */
#footer .footer-main,
#footer .footer-main *,
#footer .footer-main a,
#footer .footer-main a:visited,
#footer .footer-main .fc-ico {
  color: #ff8aa4 !important;
}

#footer .footer-main a:hover,
#footer .footer-main a:focus {
  color: #ffd1da !important;
}