/* ==========================================================================
   A4W THEME - Custom Styles
   Charte graphique personnalisee

   ORGANISATION DU FICHIER
     A. TOKENS      - le socle de variables (2 blocs :root, voir ci-dessous)
     B. BASE        - typographie, liens, formulaires
     C. COMPOSANTS  - boutons, header, footer, produits, modules, page CMS
     D. RESPONSIVE  - redefinition des tokens par palier

   DEUX BLOCS :root, ET C'EST VOULU
     Le module BO a4w_customisation ne lit QUE le premier :root de premier
     niveau du fichier (A4WCustomisation_ThemeVariablesParser). Il refuse par
     ailleurs toute valeur contenant var() ou calc().
       :root n°1 = REGLAGES    -> valeurs litterales, editables depuis le BO
       :root n°2 = DERIVEES    -> calc()/var(), appliquees par le navigateur,
                                  invisibles du BO, donc jamais proposees a
                                  l'edition ni cassees a l'enregistrement.
     Surcharger un reglage du bloc n°1 (via theme-vars-overrides.css) propage
     automatiquement aux derivees du bloc n°2.
   ========================================================================== */

/* ==========================================================================
   1. POLICES — charte v2 (refs#6694, GEN-01)
   - Gelasio : titres, boutons, menu
   - Noto Sans : texte courant
   Servies par le theme (assets/fonts, @fontsource 5.3.0, licence OFL 1.1,
   sous-ensemble latin) : aucune requete vers un service tiers (regle C10).
   Le nom de fichier commence par la famille : a4w_themeeditor reconnait ainsi
   une police servie en local et ne la demande pas a Google Fonts.
   ========================================================================== */
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/gelasio-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/gelasio-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Gelasio';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/gelasio-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Gelasio';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Gelasio';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/gelasio-latin-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-latin-700-normal.woff2") format("woff2");
}

/* ==========================================================================
   A. TOKENS - 2.1 REGLAGES
   Premier :root : c'est CE bloc que le BO expose a l'edition.
   Uniquement des valeurs litterales. Ne jamais y mettre de var() ni de calc().
   ========================================================================== */
:root {
  /* Palette - couleurs de marque (charte v2 Gumuche du 2026-10-28)
     signature = identite (titres, encre)   primaire  = fond d'action (creme)
     secondaire = appui (fonds doux)        tertiaire = rose signature
     Rose signature : fonds uniquement (bandeau, appel de marque, etat actif),
     jamais en texte. Framboise : badges promo uniquement. */
  --signature-color: #1D191B;
  --primary-color: #FAF7F4;
  --secondary-color: #FAF7F4;
  --tertiary-color: #FFEAF7;
  --promo-color: #A33362;
  /* Or : soulignement des liens et pictos ; or texte : annees, numeros,
     asterisques (le seul or lisible sur fond clair). */
  --link-decoration-color: #B68A56;
  --accent-text-color: #8C6634;

  /* Palette - etats de survol
     Chaque couleur de marque a son etat hover. Les composants ne doivent
     jamais assombrir une couleur a la main : ils pointent sur ces tokens.
     Le survol de la primaire colore aussi des TEXTES (liens d'en-tete, fil
     d'Ariane, menus) : il reste une encre. */
  --signature-hover-color: #1D191B;
  --primary-hover-color: #1D191B;
  --secondary-hover-color: #FFEAF7;
  --tertiary-hover-color: #FFEAF7;
  --focus-ring-color: rgba(29, 25, 27, 0.25);

  /* Couleurs - neutres et fonds
     encre = titres, texte fort, appel d'achat ; encre 2 = texte courant ;
     encre 3 = legendes, mentions, sur-titres. */
  --background-color: #FFFFFF;
  --white-color: #FFFFFF;
  --text-color: #1D191B;
  --text-dark-color: #1D191B;
  --dark-color: #1D191B;
  --light-bg: #FAF7F4;
  --light-gray: #FAF7F4;
  --medium-gray: #565254;
  --dark-gray: #565254;
  --muted-color: #6C6A6B;
  --button-text-color: #1D191B;

  /* Espace client - fond du panneau de contenu et rayon de ses angles
     (maquette Gumuche du 2026-10-15, rayon ramene a la charte v2 : 3 px
     partout). */
  --account-bg-color: #FAF7F4;
  --account-panel-radius: 3px;

  /* Couleurs - bordures : filet des separateurs et cartes, filet des champs */
  --border-color: #E4E3E4;
  --input-border-color: #8E8C8D;

  /* Couleurs - alertes
     Une alerte porte sa propre semantique : elle ne dit pas « action », elle
     dit reussite, attente ou erreur. Le rouge est reserve aux erreurs. La
     charte n'a pas de teinte « information » : elle s'ecrit en encre 2 sur
     fond creme. */
  --alert-success-color: #2F6B4F;
  --alert-success-bg-color: #EEF5F1;
  --alert-info-color: #565254;
  --alert-info-bg-color: #FAF7F4;
  --alert-warning-color: #8A5A00;
  --alert-warning-bg-color: #FBF4E6;
  --alert-danger-color: #9B2C2C;

  /* Typographie - familles */
  --font-family-base: 'Noto Sans', sans-serif;
  --font-family-title: 'Gelasio', serif;

  /* Typographie - corps */
  --font-size: 16px;
  --line-height: 1.6;
  --font-size-small: 13px;
  --font-size-medium: 18px;
  --font-size-large: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 30px;
  /* Titre d'ouverture : taille desktop de la charte v2 (61 px) ; les paliers
     de la section D la ramenent a 39 px sur mobile. */
  --font-size-hero: 61px;
  --font-size-price: 32px;
  --product-title-size: 16px;

  /* Typographie - echelle des titres
     H6 = --font-size-title-base, puis chaque niveau est multiplie par
     --type-scale-step. Le pas est la RACINE du ratio choisi : applique
     directement, le nombre d'or donnerait 177px en H1 sur 6 niveaux.
       Nombre d'or    1.618 -> pas 1.272
       Perfect Fourth 1.333 -> pas 1.155
       Major Third    1.25  -> pas 1.118  (charte v2 Gumuche)
     Les deux tokens vont ensemble : changer l'un sans l'autre desynchronise
     la regle affichee et le rendu.
     Charte v2 : H1 a H3 ont des tailles fluides fixees par la charte (bloc
     n°2) ; l'echelle ne regle plus que H4 a H6 (16, 18, 20 px). */
  --font-size-title-base: 16px;
  --type-scale-ratio: 1.25;
  --type-scale-step: 1.118;
  --title-font-weight: 600;

  /* Typographie - style par niveau
     Chaque niveau porte sa police, sa graisse et sa casse. La TAILLE, elle,
     vient toujours de l'echelle ci-dessus : la regler ici viderait l'echelle
     de son sens.
     Ces valeurs sont litterales et non derivees de --font-family-title, parce
     que le premier bloc :root n'accepte que du litteral. Consequence assumee :
     changer --font-family-title ne repercute plus sur les titres, seulement sur
     les composants qui la consomment (reassurance, footer, page CMS). Le module
     BO offre un « appliquer a tous les niveaux » pour ne pas avoir a saisir
     sept fois la meme police. */
  --h1-font-family: 'Gelasio', serif;
  --h1-font-weight: 600;
  --h1-text-transform: none;
  --h2-font-family: 'Gelasio', serif;
  --h2-font-weight: 600;
  --h2-text-transform: none;
  --h3-font-family: 'Gelasio', serif;
  --h3-font-weight: 600;
  --h3-text-transform: none;
  --h4-font-family: 'Gelasio', serif;
  --h4-font-weight: 600;
  --h4-text-transform: none;
  --h5-font-family: 'Gelasio', serif;
  --h5-font-weight: 600;
  --h5-text-transform: none;
  --h6-font-family: 'Gelasio', serif;
  --h6-font-weight: 600;
  --h6-text-transform: none;
  --p-font-family: 'Noto Sans', sans-serif;
  --p-font-weight: 400;
  --p-text-transform: none;

  /* Interligne des titres. Aucun n'etait declare : les titres heritaient du
     1.6 du corps, beaucoup trop lache pour un H1. Reglage par niveau, parce
     qu'un H6 de 16px et un H1 de 42px ne respirent pas pareil. */
  --h1-line-height: 1.15;
  --h2-line-height: 1.2;
  --h3-line-height: 1.25;
  --h4-line-height: 1.3;
  --h5-line-height: 1.35;
  --h6-line-height: 1.4;

  /* Niveau « tiny » : mentions legales, unites, notes de bas de carte. Il
     etait rendu partout avec --font-size-small sans jamais pouvoir etre
     regle comme un niveau a part entiere. */
  --tiny-font-weight: 400;
  --tiny-text-transform: none;
  --tiny-line-height: 1.5;

  /* CTA - geometrie et graisse. La teinte des CTA est derivee de la palette
     dans le bloc n°2.
     ATTENTION : le module BO range chaque variable dans un onglet d'apres les
     MOTS DE CE COMMENTAIRE. Ne jamais y employer un terme de teinte ni le mot
     b-o-u-t-o-n, sous peine de deporter ces tokens hors de l'onglet typo. */
  --btn-radius: 3px;
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-font-size: 1.125rem;
  --btn-font-weight: 500;
  --btn-line-height: 1.2;
  --btn-border-width: 1px;
  --btn-text-transform: none;
  --btn-min-height: 50px;

  /* CTA - teintes de l'etat presse (charte v2, planche des etats). Le presse
     de l'achat est un noir franc ; celui des autres styles est un fond creme
     plus soutenu que le survol. */
  --btn-primary-active-bg: #000000;
  --pressed-bg-color: #F0EAE4;

  /* Formes et effets (charte v2 : rayon de 3 px partout) */
  --border-radius: 3px;
  --border-radius-lg: 3px;
  --border-radius-round: 3px;
  --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s ease;

  /* Largeur conteneur (A4W + synchro PrestaShop) — charte v2 : 1280 px de
     contenu, gouttieres de 40 px comprises dans la largeur (16 px sur mobile,
     section D) : 1360 px, comme .wrap de la maquette (recette du 28/10). */
  --a4w-container-xxl-max-width: 1360px;
  --a4w-container-narrow-max-width: 1200px;
  --a4w-container-gutter: 40px;
  --a4w-carousel-text-max-width: 840px;

  /* Footer */
  --footer-title-color: #1D191B;
  --footer-text-color2: #1D191B;
  --footer-bg-color: #FAF7F4;
  --footer-border-color: #E4E3E4;

  /* Bootstrap - formes */
  --bs-card-border-radius: 3px;

  /* Bootstrap - couleurs en composantes RVB.
     Bootstrap en a besoin pour ses rgba(). CSS ne sait pas extraire les
     composantes d'un hexadecimal : ces valeurs doivent etre tenues
     synchronisees a la main. --bs-primary suit l'encre d'accent (bloc n°2),
     pas la primaire ; les trois suivantes suivent les alertes. */
  --bs-primary-rgb: 29, 25, 27;
  --bs-secondary-rgb: 250, 247, 244;
  --bs-success-rgb: 47, 107, 79;
  --bs-warning-rgb: 138, 90, 0;
  --bs-danger-rgb: 155, 44, 44;
}

/* ==========================================================================
   A. TOKENS - 2.2 DERIVEES ET COMPATIBILITE
   Second :root : invisible du module BO (il ne lit que le premier).
   NE PAS EDITER a la main : tout se regle depuis le bloc n°1.
   ========================================================================== */
:root {
  /* Echelle typographique derivee
     H1 a H3 : tailles fluides de la charte v2 Gumuche (refs#6694, GEN-01),
     de l'ecran mobile (390 px) a l'ecran large (1440 px) :
       H1 31 -> 39 px   H2 25 -> 31 px   H3 20 -> 25 px
     Une taille detachee depuis le back-office est une valeur fixe qui
     l'emporte sur tous les paliers : la rattacher rend la taille fluide. */
  --font-size-h6: var(--font-size-title-base);
  --font-size-h5: calc(var(--font-size-h6) * var(--type-scale-step));
  --font-size-h4: calc(var(--font-size-h5) * var(--type-scale-step));
  --font-size-h3: clamp(1.25rem, 1.14rem + 0.469vw, 1.5625rem);
  --font-size-h2: clamp(1.5625rem, 1.43rem + 0.563vw, 1.9375rem);
  --font-size-h1: clamp(1.9375rem, 1.761rem + 0.751vw, 2.4375rem);

  /* Couleur par niveau. Alias de la signature : tant qu'aucune n'est
     detachee depuis le back-office, le rendu est celui d'avant, ou les six
     niveaux prenaient color: var(--signature-color) sur une regle commune. */
  --h1-color: var(--signature-color);
  --h2-color: var(--signature-color);
  --h3-color: var(--signature-color);
  --h4-color: var(--signature-color);
  --h5-color: var(--signature-color);
  --h6-color: var(--signature-color);

  --tiny-font-family: var(--font-family-base);
  --tiny-color: var(--muted-color);
  --font-size-tiny: var(--font-size-small);

  /* Les CTA prennent la police des titres (charte v2 : Gelasio 500). */
  --btn-font-family: var(--font-family-title);

  /* CTA primaire (achat) - derive de la palette : encre pleine, le survol
     passe au rose signature, le presse au noir franc. */
  --btn-primary-bg: var(--text-color);
  --btn-primary-color: var(--white-color);
  --btn-primary-border-color: var(--text-color);
  --btn-primary-hover-bg: var(--tertiary-color);
  --btn-primary-hover-color: var(--text-color);
  --btn-primary-hover-border-color: var(--text-color);
  --btn-primary-active-border-color: var(--btn-primary-active-bg);
  --btn-primary-active-color: var(--white-color);

  /* CTA secondaire - derive de la palette : fond blanc, filet d'encre ; le
     survol creme, le presse creme soutenu. Jamais de fond transparent. */
  --btn-secondary-bg: var(--white-color);
  --btn-secondary-color: var(--text-color);
  --btn-secondary-border-color: var(--text-color);
  --btn-secondary-hover-bg: var(--light-bg);
  --btn-secondary-hover-color: var(--text-color);
  --btn-secondary-hover-border-color: var(--text-color);
  --btn-secondary-active-bg: var(--pressed-bg-color);

  /* CTA de marque (S'abonner, Enregistrer, Envoyer) : rose signature au
     repos, blanc au survol, rose de nouveau une fois presse. */
  --btn-brand-bg: var(--tertiary-color);
  --btn-brand-color: var(--text-color);
  --btn-brand-border-color: var(--text-color);
  --btn-brand-hover-bg: var(--white-color);
  --btn-brand-active-bg: var(--tertiary-color);

  /* CTA desactive : meme rendu pour les trois styles. */
  --btn-disabled-bg: var(--light-bg);
  --btn-disabled-color: var(--muted-color);
  --btn-disabled-border-color: var(--border-color);

  /* Compatibilite - noms historiques du theme */
  --button-hover-color: var(--primary-hover-color);
  --announcement-bg-color: var(--tertiary-color);
  --border-color-light: var(--border-color);
  --container-width: var(--a4w-container-xxl-max-width);
  --container-width-lg: var(--a4w-container-xxl-max-width);

  /* Compatibilite - noms consommes par les modules a4w */
  --font-family: var(--font-family-base);
  --font-body: var(--font-family-base);
  --font-title: var(--font-family-title);
  --a4w-color-primary: var(--primary-color);
  --a4w-color-heading: var(--signature-color);
  --a4w-color-text: var(--text-color);
  --a4w-color-text-muted: var(--medium-gray);
  --a4w-color-bg: var(--background-color);
  --a4w-border-radius: var(--border-radius);
  --a4w-transition: var(--transition);

  /* Encre d'accent : la couleur foncee qui s'ecrit sur fond clair — prix, liens,
     filets, bordures de bouton contour. Le role manquait, et les modules
     prenaient --primary-color faute de mieux ; sur un site qui donne a la
     primaire une valeur de fond, tout ce qu'ils ecrivaient disparaissait.
     Derivee de la signature : sur un theme ou signature et primaire sont la
     meme couleur, le rendu ne bouge pas. Detachable depuis le back-office. */
  --accent-ink-color: var(--signature-color);

  /* Couleur des liens, et son etat de survol. Jusqu'ici les liens partageaient
     l'encre d'accent avec les prix et les filets, et leur survol venait de la
     couleur d'action : impossible de regler les uns sans deplacer les autres.
     Derives de ce que les liens rendaient — sur un theme qu'on ne touche pas,
     le rendu ne bouge pas. Detachables depuis le back-office. */
  --link-color: var(--accent-ink-color);
  --link-hover-color: var(--primary-hover-color);

  /* Compatibilite - Bootstrap 5 */
  /* Encre d'accent et non Primaire : Bootstrap l'emploie en encre et en état actif (badges,
     cases cochées, pagination), la Primaire est une couleur de fond (crème sur gumuchev2). */
  --bs-primary: var(--accent-ink-color);
  --bs-secondary: var(--secondary-color);
  --bs-body-color: var(--text-color);
  --bs-body-bg: var(--background-color);
  --bs-link-color: var(--link-color);
  --bs-link-hover-color: var(--link-hover-color);
  --bs-focus-ring-color: var(--focus-ring-color);

  /* Compatibilite - Bootstrap 5, couleurs semantiques (charte v2, GEN-01).
     Alertes, textes .text-danger / .text-success et retours de formulaire
     lisent ces variables : le rouge, le vert et l'ambre de Bootstrap cedent la
     place a ceux de la charte. L'information n'a pas de teinte propre. */
  --bs-success: var(--alert-success-color);
  --bs-success-text-emphasis: var(--alert-success-color);
  --bs-success-bg-subtle: var(--alert-success-bg-color);
  --bs-success-border-subtle: var(--alert-success-color);
  --bs-warning: var(--alert-warning-color);
  --bs-warning-text-emphasis: var(--alert-warning-color);
  --bs-warning-bg-subtle: var(--alert-warning-bg-color);
  --bs-warning-border-subtle: var(--alert-warning-color);
  --bs-danger: var(--alert-danger-color);
  --bs-danger-text-emphasis: var(--alert-danger-color);
  --bs-danger-bg-subtle: var(--background-color);
  --bs-danger-border-subtle: var(--alert-danger-color);
  --bs-info-text-emphasis: var(--alert-info-color);
  --bs-info-bg-subtle: var(--alert-info-bg-color);
  --bs-info-border-subtle: var(--border-color);
  --bs-form-valid-color: var(--alert-success-color);
  --bs-form-valid-border-color: var(--alert-success-color);
  --bs-form-invalid-color: var(--alert-danger-color);
  --bs-form-invalid-border-color: var(--alert-danger-color);

  /* Rayons Bootstrap (alertes, cartes, champs, listes) : 3 px partout. Les
     pilules et les cercles gardent les leurs. */
  --bs-border-radius: var(--border-radius);
  --bs-border-radius-sm: var(--border-radius);
  --bs-border-radius-lg: var(--border-radius-lg);
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xs,
  .container-xxl {
    max-width: var(--a4w-container-xxl-max-width);
    /* Gouttière de la maquette (40 px) au lieu des 12 px de Bootstrap : contenu de 1280 px. */
    padding-right: var(--a4w-container-gutter, 40px);
    padding-left: var(--a4w-container-gutter, 40px);
  }
}

/* ==========================================================================
   B. BASE - 3. TYPOGRAPHIE
   ========================================================================== */

/* Corps de texte */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: var(--line-height);
}

p, .paragraph, .product-description {
  font-size: var(--font-size);
  font-family: var(--p-font-family);
  font-weight: var(--p-font-weight);
  text-transform: var(--p-text-transform);
}

/* Titres - Tous niveaux.
   La couleur n'est plus posee ici : chaque niveau porte la sienne, en alias
   de la signature tant qu'on ne la detache pas. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-family-title);
  font-weight: var(--title-font-weight);
}

/* Titres - echelle modulaire (cf. --type-scale-step) et style par niveau.
   La taille vient de l'echelle, la police/graisse/casse et la couleur/
   interligne du niveau. */
h1, .h1 {
  font-size: var(--font-size-h1);
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  text-transform: var(--h1-text-transform);
  color: var(--h1-color);
  line-height: var(--h1-line-height);
}

h2, .h2,
.section-title,
.page-title,
.block-title {
  font-size: var(--font-size-h2);
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  text-transform: var(--h2-text-transform);
  color: var(--h2-color);
  line-height: var(--h2-line-height);
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  text-transform: var(--h3-text-transform);
  color: var(--h3-color);
  line-height: var(--h3-line-height);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-family: var(--h4-font-family);
  font-weight: var(--h4-font-weight);
  text-transform: var(--h4-text-transform);
  color: var(--h4-color);
  line-height: var(--h4-line-height);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  text-transform: var(--h5-text-transform);
  color: var(--h5-color);
  line-height: var(--h5-line-height);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  text-transform: var(--h6-text-transform);
  color: var(--h6-color);
  line-height: var(--h6-line-height);
}

/* Niveau « tiny » : mentions, unites, notes.
   Restreint a .tiny : le theme emploie <small> nu ailleurs (disponibilite
   produit, recap des totaux du panier) et styler l'element HTML changerait
   leur rendu — hors du seul changement annonce par cette version. */
.tiny {
  font-size: var(--font-size-tiny);
  font-family: var(--tiny-font-family);
  font-weight: var(--tiny-font-weight);
  text-transform: var(--tiny-text-transform);
  color: var(--tiny-color);
  line-height: var(--tiny-line-height);
}

/* Titres produits */
.product-title,
.product-miniature__title,
.product-miniature .card-title,
.product-miniature h3,
.card-title {
  font-size: var(--product-title-size) !important;
  font-family: var(--font-family-base);
  font-weight: 500;
  /* Pas de couleur ici : la balise (h2/h3 selon contexte) porte deja la sienne. */
}

.a4w-block-title {
  color: var(--dark-color);
}

/* Titre du heros en police de corps : choix de design, pas un oubli. Le h2 du carousel
   n'est pas un niveau H de page (sa taille vient du BO du module, --a4w-carousel-title-size). */
/* .a4w-carousel-title : titre du carrousel, h1 sur l'accueil depuis a4w_carousel 1.8.2 (h2 avant). */
#a4wcarousel .carousel-caption .a4w-carousel-title, #a4wcarousel .carousel-caption h2, #a4wcarousel .carousel-caption .carousel-prefix {
  font-family: var(--font-family-base);
}

/* ==========================================================================
   B. BASE - 11. LIENS
   ========================================================================== */

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover-color);
}

/* Liens du texte courant : soulignes or (charte v2, refs#6694). Depuis GEN-01
   les liens sont a l'encre, comme le texte : sans soulignement, ils ne se
   distinguaient plus. Portee limitee au texte courant ; menus, cartes et
   liens-boutons restent nus. Le reste des regles de liens vient avec GEN-03. */
:where(p, .rich-text li, .page-content li, .product-description li) a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

:where(p, .rich-text li, .page-content li, .product-description li) a:not(.btn):hover {
  text-decoration-thickness: 2px;
}

/* ==========================================================================
   B. BASE - 10. FORMULAIRES
   ========================================================================== */

/* Bordure des champs : filet de champ de la charte v2 (contraste 3,4:1 sur
   blanc). Elle suivait --secondary-color, une couleur de fond : creme sur
   creme, les champs n'avaient plus de contour visible. */
.form-control,
.form-select {
  border-color: var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius);
  color: var(--text-color, #1D191B);
}

.form-control:focus {
  border-color: var(--accent-ink-color);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}

/* Composants Bootstrap restés sur le bleu d'origine (#0d6efd et son halo) : theme.css les
   compile en dur, ils ne suivaient donc ni la palette ni le Thème Editor. Chaque règle reprend
   le sélecteur exact de theme.css : même spécificité, custom.css est chargé après et l'emporte.
   Focus : halo --focus-ring-color, bordure --accent-ink-color, comme .form-control:focus. */
.form-select:focus,
.form-check-input:focus {
  border-color: var(--accent-ink-color, #1D191B);
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--accent-ink-color, #1D191B);
  border-color: var(--accent-ink-color, #1D191B);
}

/* Pseudo-éléments propres à un moteur : une règle chacun, sinon le moteur qui ne connaît pas
   l'autre ignore toute la règle. */
.form-range::-webkit-slider-thumb {
  background-color: var(--accent-ink-color, #1D191B);
}

.form-range::-moz-range-thumb {
  background-color: var(--accent-ink-color, #1D191B);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px var(--white-color, #fff), 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px var(--white-color, #fff), 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.btn-primary,
.btn-outline-primary,
.btn-link {
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.header__bottom #search_widget input:focus,
.search__offcanvas #search_widget input:focus {
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.btn-close {
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.pagination {
  --bs-pagination-active-bg: var(--accent-ink-color, #1D191B);
  --bs-pagination-active-border-color: var(--accent-ink-color, #1D191B);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--accent-ink-color, #1D191B);
}

.list-group {
  --bs-list-group-active-bg: var(--accent-ink-color, #1D191B);
  --bs-list-group-active-border-color: var(--accent-ink-color, #1D191B);
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--accent-ink-color, #1D191B);
}

.carousel-indicators [data-bs-target] {
  background-color: var(--accent-ink-color, #1D191B);
}

/* Pastilles de couleur des déclinaisons (sélectionnée ou survolée) et adresse choisie dans le
   tunnel : seule la couleur du filet change, son épaisseur reste celle de theme.css. */
.custom-checkbox input[type=checkbox]+span.color.active,
.custom-checkbox input[type=checkbox]+span.color:hover,
.variant-links .color.active,
.variant-links .color:hover,
label .color.active,
label .color:hover,
.step .address.selected {
  border-color: var(--accent-ink-color, #1D191B);
}

.form-label {
  color: var(--accent-ink-color);
  font-weight: 500;
}

/* ==========================================================================
   C. COMPOSANTS - 4. BOUTONS (charte v2, planche « Styles de boutons - etats »)
   Trois styles : achat (.btn-primary, encre pleine), secondaire
   (.btn-secondary, fond blanc filet d'encre), marque (.btn-brand, rose
   signature). .btn-outline-primary et .btn-outline-light rendent le style
   secondaire : plus aucun fond transparent. Geometrie commune dans les
   jetons --btn-* ; teintes dans le second bloc :root. Pas de majuscules,
   transition de 150 ms sur fond, texte et filet, aucun mouvement.
   Focus clavier : l'anneau d'encre de la « Passe de proprete » (fin de
   fichier), sans le halo de Bootstrap.
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-brand,
.btn-outline-primary,
.btn-outline-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-min-height, 50px);
  padding: var(--btn-padding-y, 12px) var(--btn-padding-x, 24px);
  border: var(--btn-border-width, 1px) solid;
  border-radius: var(--btn-radius, 3px);
  font-family: var(--btn-font-family, 'Gelasio', serif);
  font-size: var(--btn-font-size, 1.125rem);
  font-style: normal;
  font-weight: var(--btn-font-weight, 500);
  line-height: var(--btn-line-height, 1.2);
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  text-transform: var(--btn-text-transform, none);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.btn-sm.btn-primary,
.btn-sm.btn-secondary,
.btn-sm.btn-brand,
.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-light {
  min-height: 44px;
  font-size: var(--btn-font-size, 1.125rem);
}

/* --- Achat : repos, survol, presse ------------------------------------- */
.btn-primary,
.btn.btn-primary {
  background-color: var(--btn-primary-bg, #1D191B) !important;
  border-color: var(--btn-primary-border-color, #1D191B) !important;
  color: var(--btn-primary-color, #FFFFFF) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--btn-primary-hover-bg, #FFEAF7) !important;
  border-color: var(--btn-primary-hover-border-color, #1D191B) !important;
  color: var(--btn-primary-hover-color, #1D191B) !important;
}

.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--btn-primary-active-bg, #000000) !important;
  border-color: var(--btn-primary-active-border-color, #000000) !important;
  color: var(--btn-primary-active-color, #FFFFFF) !important;
}

/* --- Secondaire (et contours, rendus en secondaire) -------------------- */
.btn-secondary,
.btn.btn-secondary,
.btn-outline-primary,
.btn.btn-outline-primary,
.btn-outline-light,
.btn.btn-outline-light {
  background-color: var(--btn-secondary-bg, #FFFFFF) !important;
  border-color: var(--btn-secondary-border-color, #1D191B) !important;
  color: var(--btn-secondary-color, #1D191B) !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline-primary:hover,
.btn.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn.btn-outline-light:hover {
  background-color: var(--btn-secondary-hover-bg, #FAF7F4) !important;
  border-color: var(--btn-secondary-hover-border-color, #1D191B) !important;
  color: var(--btn-secondary-hover-color, #1D191B) !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary.active,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active,
.btn.btn-outline-light:active,
.btn.btn-outline-light.active {
  background-color: var(--btn-secondary-active-bg, #F0EAE4) !important;
}

/* --- Marque : S'abonner, Enregistrer, Envoyer --------------------------- */
.btn-brand,
.btn.btn-brand {
  background-color: var(--btn-brand-bg, #FFEAF7) !important;
  border-color: var(--btn-brand-border-color, #1D191B) !important;
  color: var(--btn-brand-color, #1D191B) !important;
}

.btn-brand:hover,
.btn.btn-brand:hover {
  background-color: var(--btn-brand-hover-bg, #FFFFFF) !important;
}

.btn.btn-brand:active,
.btn.btn-brand.active {
  background-color: var(--btn-brand-active-bg, #FFEAF7) !important;
}

/* --- Focus clavier : anneau d'encre seul, sans halo -------------------- */
.btn:focus,
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: none;
}

/* --- Desactive : meme rendu pour les trois styles ---------------------- */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-secondary:disabled,
.btn.btn-secondary.disabled,
.btn.btn-brand:disabled,
.btn.btn-brand.disabled,
.btn.btn-outline-primary:disabled,
.btn.btn-outline-primary.disabled,
.btn.btn-outline-light:disabled,
.btn.btn-outline-light.disabled,
fieldset:disabled .btn.btn-primary {
  background-color: var(--btn-disabled-bg, #FAF7F4) !important;
  border-color: var(--btn-disabled-border-color, #E4E3E4) !important;
  color: var(--btn-disabled-color, #6C6A6B) !important;
  opacity: 1;
}

button.btn:disabled,
input.btn:disabled {
  cursor: not-allowed;
  pointer-events: auto;
}

/* --- Bouton rond (listes de favoris, fleches de carrousel) : 44 x 44 --- */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--btn-border-width, 1px) solid var(--btn-secondary-border-color, #1D191B);
  border-radius: 50%;
  background-color: var(--btn-secondary-bg, #FFFFFF);
  color: var(--btn-secondary-color, #1D191B);
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.btn-round:hover {
  background-color: var(--btn-secondary-hover-bg, #FAF7F4);
}

.btn-round:active {
  background-color: var(--btn-secondary-active-bg, #F0EAE4);
}

/* Tous les boutons - taille par defaut */
.btn {
  font-size: var(--font-size-medium);
}

.btn-primary,
.btn-secondary,
.btn-brand,
.btn-outline-primary,
.btn-outline-light {
  font-size: var(--btn-font-size, 1.125rem);
}

.page-product .product__images__modal-opener {
  display:none;
}

#product .thumbnails__container {
  display:none;
}

.thumbnails__container .thumbnail.active img {
  border: var(--btn-border-width) solid var(--accent-ink-color);
}

/* ==========================================================================
   C. COMPOSANTS - 6. HEADER
   ========================================================================== */

.header,
#header {
  background-color: var(--background-color);
  border-bottom: 1px solid var(--secondary-color);
}

.header-top,
.header__top {
  background-color: var(--light-bg);
}

.header-bottom,
.header__bottom {
  background-color: var(--background-color);
}

/* Liens header */
.header a,
#header a,
.header-top a,
.header-bottom a {
  color: var(--accent-ink-color);
}

.header a:hover,
#header a:hover,
.header-top a:hover,
.header-bottom a:hover {
  color: var(--primary-hover-color);
}

/* ==========================================================================
   C. COMPOSANTS - 7. BARRE D'ANNONCE
   Fond tertiaire (--announcement-bg-color derive de --tertiary-color)
   ========================================================================== */

.header__banner a,
.announcement-bar a,
.promo-bar a {
  color: var(--accent-ink-color);
  text-decoration: underline;
}

.header__banner a:hover,
.announcement-bar a:hover,
.promo-bar a:hover {
  color: var(--primary-hover-color);
}

/* ==========================================================================
   C. COMPOSANTS - 8. FOOTER
   ========================================================================== */

.footer,
#footer {
  background-color: var(--primary-color);
  color: var(--btn-primary-color);
}

.footer a,
#footer a {
  color: var(--link-color);
}

.footer a:hover,
#footer a:hover {
  color: var(--link-hover-color);
}

.footer h3,
.footer h4,
.footer .h3,
.footer .h4,
#footer h3,
#footer h4 {
  font-family: var(--font-family-title);
}

.footer__before,
.footer-before {
  background-color: var(--light-bg);
}

/* Bandeau newsletter : theme.css le peint en gris Bootstrap (--bs-gray-100), qui masquait le
   fond doux posé ci-dessus. */
.footer__before .email-subscription {
  background-color: transparent;
}

/* Footer main section */
.footer .footer__main {
  border-top: 1px solid var(--footer-border-color);
  border-bottom: 1px solid var(--footer-border-color);
  background: var(--footer-bg-color);
}

/* Footer titles */
.footer__block__title,
.title-custom-footer {
  color: var(--footer-title-color);
}

/* Footer links and text
   ATTENTION : cette regle porte aussi sur p, .paragraph et .product-description,
   donc sur TOUTE la boutique et pas seulement le footer. Comportement historique
   conserve tel quel ; a arbitrer separement. */
.footer a,
#footer a,
.contact__infos,
p,
.paragraph,
.product-description {
  color: var(--footer-text-color2);
}

.footer .footer__block__title, .footer .footer__block__title a {
  color: var(--footer-title-color);
}

/* Titre en lien (« Votre compte ») : « #footer a » (1,0,1) l'emportait sur la règle ci-dessus. */
#footer .footer__block__title a {
  color: var(--footer-title-color);
}

/* ==========================================================================
   C. COMPOSANTS - 9. FONDS ET SECTIONS
   ========================================================================== */

/* Wrapper principal */
.wrapper,
#wrapper,
main,
#main {
  background-color: var(--background-color);
}

/* Cartes */
.card {
  background-color: var(--background-color);
  border-color: var(--secondary-color);
  border-radius: var(--bs-card-border-radius);
}

/* Miniatures produits */
.product-miniature .card {
  background-color: var(--background-color);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.product-miniature .card:hover {
  box-shadow: none;
  filter: none;
}

/* Product flags */
.product-flags {
  flex-direction: column;
}

/* Sections accent */
.section-accent,
.featured-products,
.new-products,
.bestsellers,
.products-section {
  background-color: var(--background-color);
  padding: 40px 0;
}

/* ==========================================================================
   C. COMPOSANTS - 12. PRIX
   ========================================================================== */

.product-price,
.product-miniature__price,
.current-price,
.price {
  color: var(--accent-ink-color);
  font-weight: 700;
}

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

.product-miniature__infos__top,
.product-miniature__title,
.product-miniature__title-link {
  text-align: left;
}

.product-miniature__infos__row {
  display: flex;
  align-items: flex-start;
  z-index: 1;
  background: var(--white-color);
}

.product-miniature__title {
  margin: 0;
}

.product-miniature__prices,
.product-miniature__price,
.product-miniature__discount-price,
.product-miniature__regular-price {
  text-align: right;
}

.product-miniature__infos__col--right .product-miniature__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 8px;
}

.badge {
  margin: 5px 0px;
}

#a4w_popularproduct .product-flags {
  margin-left: 0px;
}

.product-flags {
  padding: 0px;
}

@media (max-width: 767.98px) {
  .product-miniature__prices,
  .product-miniature__price,
  .product-miniature__discount-price,
  .product-miniature__regular-price {
    text-align: left;
  }

  .product-miniature__infos__col--right .product-miniature__prices {
    align-items: flex-start;
  }
}

/* ==========================================================================
   C. COMPOSANTS - 13. FIL D'ARIANE
   ========================================================================== */

.breadcrumb {
  background-color: transparent;
}

/* Style de la maquette (charte v2, GEN-03) : 13 px, liens en encre 2, separateur « › » or,
   page courante en encre, semi-grasse. Le reste (maillon Accueil masque) : section GEN-03, en fin de fichier. */
.breadcrumb {
  --bs-breadcrumb-font-size: 0.8125rem;
  --bs-breadcrumb-divider: "\203A";
  --bs-breadcrumb-divider-color: var(--link-decoration-color, #B68A56);
  --bs-breadcrumb-item-padding-x: 0.625rem;
}

.breadcrumb a {
  color: var(--medium-gray, #565254);
}

.breadcrumb a:hover {
  color: var(--text-color, #1D191B);
}

.breadcrumb-item:last-child {
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

/* ==========================================================================
   C. COMPOSANTS - 14. ALERTES
   ========================================================================== */

/* Ces alertes prenaient --primary-color : un copier-coller, sans rapport avec
   la couleur d'action. Une alerte porte sa propre semantique, et cette
   semantique est un token comme les autres : jamais une litterale figee ici. */
.alert-success {
  background-color: var(--alert-success-bg-color, #EEF5F1);
  border-color: var(--alert-success-color, #2F6B4F);
  color: var(--alert-success-color, #2F6B4F);
}

.alert-info {
  background-color: var(--alert-info-bg-color, #FAF7F4);
  border-color: var(--alert-info-color, #565254);
  color: var(--alert-info-color, #565254);
}

/* Attente et erreur : fonds et encres de la charte v2 (le rouge est reserve
   aux erreurs). Les variables --bs-*-subtle du bloc n°2 couvrent le reste. */
.alert-warning {
  background-color: var(--alert-warning-bg-color, #FBF4E6);
  border-color: var(--alert-warning-color, #8A5A00);
  color: var(--alert-warning-color, #8A5A00);
}

.alert-danger {
  background-color: var(--background-color, #FFFFFF);
  border-color: var(--alert-danger-color, #9B2C2C);
  color: var(--alert-danger-color, #9B2C2C);
}

/* ==========================================================================
   C. COMPOSANTS - 15. QUANTITE
   ========================================================================== */

.quantity-button,
.input-group-btn-vertical {
  border-color: var(--secondary-color);
  border-radius: var(--border-radius);
}

.quantity-button button,
.bootstrap-touchspin .btn {
  background-color: var(--light-bg);
  color: var(--accent-ink-color);
  border: none;
}

.quantity-button button:hover,
.bootstrap-touchspin .btn:hover {
  background-color: var(--secondary-color);
}
/* Sélecteurs de quantité harmonisés (retour client gumuchev2, maquette du 2026-09-25) : même
   cadre partout — 48 px de haut, bordure de la couleur primaire, rayon des boutons.
   - fiche produit : liste 1 à 10 puis « 11+ » (.quantity-select__input, liste ou champ libre) ;
   - page panier : compteur − / + (components/qty-input.tpl) ;
   - panneau panier (a4w_cartflow) : mêmes bordure et rayon, par ses variables. */
/* Filet et pictos sur l'ENCRE d'accent, pas sur la couleur primaire : le Theme Editor
   de gumuchev2 règle `--primary-color` en blanc cassé (#FAF7F4, fond des boutons
   secondaires) — la bordure devenait invisible et les « − » / « + » illisibles
   (retour client 2026-09-28). */
.quantity-select__input {
  box-sizing: border-box;
  height: 48px;
  min-width: 104px;
  padding: 0 16px;
  border: 1px solid var(--accent-ink-color, #1D191B);
  border-radius: var(--btn-radius, 12px);
  background-color: var(--background-color, #fff);
  color: var(--text-color, inherit);
}

/* Fiche produit : la liste prend la hauteur du bouton « Ajouter au panier », qui dépend
   de son rembourrage et de la taille du prix. La ligne était centrée
   (`align-items-center`, utilitaire en !important, 0,1,0) : elle s'étire désormais,
   et la liste remplit sa colonne. */
.row:has(> .product-actions__quantity) {
  align-items: stretch !important;
}

/* Libellé « Qté » à gauche de la liste (CAT-02) : la colonne passe en ligne, la liste remplit
   la hauteur du bouton. Sous 575.98 px le libellé n'est plus affiché (CAT-05, section en fin de fichier). */
.product-actions__quantity {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
}

.quantity-select__label {
  align-self: center;
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.product-actions__quantity > select.quantity-select__input {
  flex: 1 1 auto;
  height: auto;
  min-height: 48px;
}

/* Page panier : compteur − / + à sa largeur utile, et non plus toute la colonne. */
.quantity-button .input-group {
  box-sizing: border-box;
  width: 140px;
  max-width: 100%;
  height: 48px;
  border: 1px solid var(--accent-ink-color, #1D191B);
  border-radius: var(--btn-radius, 12px);
  overflow: hidden;
  background-color: var(--background-color, #fff);
}

.quantity-button .input-group .btn {
  width: 44px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--accent-ink-color, #1D191B);
}

.quantity-button .input-group .btn:hover {
  background-color: var(--light-bg, #FAF7F4);
}

.quantity-button .input-group .form-control {
  height: 100%;
  border: 0;
  box-shadow: none;
  text-align: center;
  background-color: transparent;
}

.a4w-cf-host {
  --a4w-cf-qty-border: var(--accent-ink-color, #1D191B);
  --a4w-cf-qty-radius: var(--btn-radius, 12px);
  --a4w-cf-qty-size: 2.5rem;
}

/* ==========================================================================
   C. COMPOSANTS - 16. BADGES PRODUITS
   ========================================================================== */

.product-flag,
.discount,
.new,
.on-sale,
.product-miniature__flag {
  background-color: var(--secondary-color);
  color: var(--accent-ink-color);
  border-radius: 0;
  font-family: var(--font-family-base);
  font-weight: 600;
  text-transform: uppercase;
  padding: 8px 20px;
  font-size: var(--font-size-small);
  letter-spacing: 1px;
}

/* ==========================================================================
   C. COMPOSANTS - 17. PAGINATION
   ========================================================================== */

.page-link {
  color: var(--accent-ink-color);
  border-color: var(--secondary-color);
}

.page-link:hover {
  background-color: var(--secondary-color);
  border-color: var(--accent-ink-color);
  color: var(--accent-ink-color);
}

.page-item.active .page-link {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--btn-primary-color);
}

/* ==========================================================================
   C. COMPOSANTS - 18. MENU PRINCIPAL
   ========================================================================== */

.ps-mainmenu a,
#_desktop_top_menu a,
.top-menu a {
  color: var(--accent-ink-color);
  font-family: var(--font-family-base);
  font-weight: 500;
}

.ps-mainmenu a:hover,
#_desktop_top_menu a:hover,
.top-menu a:hover {
  color: var(--primary-hover-color);
}

/* Menus deroulants */
.dropdown-menu {
  background-color: var(--background-color);
  border-color: var(--secondary-color);
  border-radius: var(--border-radius);
}

.dropdown-item {
  color: var(--accent-ink-color);
}

.dropdown-item:hover {
  background-color: var(--light-bg);
  color: var(--primary-hover-color);
}

/* ==========================================================================
   C. COMPOSANTS - 19. PANIER
   ========================================================================== */

.cart-summary,
.cart-detailed-totals {
  background-color: var(--background-color);
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius-lg);
}

/* Mobile : centrer verticalement le nom + prix du produit avec sa vignette
   dans le panier détaillé (la ligne est en align-items:stretch par défaut, donc
   le nom reste collé en haut de l'image qui est plus haute). */
@media (max-width: 575.98px) {
  .cart__item .product-line {
    align-items: center;
  }
}

/* ==========================================================================
   C. COMPOSANTS - RECHERCHE ET HEADER (desktop)
   ========================================================================== */

@media (min-width: 768px) {
  #_desktop_search .search-desktop-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 1040;
    min-width: 24rem;
    padding: .75rem;
    margin-top: .5rem;
    background: var(--white-color);
    border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
  }

  #_desktop_search .search-desktop-panel #search_widget {
    margin-bottom: 0;
    width: 100%;
  }

  #_desktop_user_info.desktop-user-icon-only {
    width: 3%;
    min-width: 3%;
    display: flex;
    justify-content: center;
  }

  #_desktop_cart.desktop-cart-icon-only {
    width: 3%;
    min-width: 3%;
    display: flex;
    justify-content: center;
  }

  #_desktop_cart .header-block__action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #_desktop_cart .header-block__badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(0%, -35%);
    margin-left: 0;
    z-index: 1;
    line-height: 1.3;
    min-width: 20px;
    height: 20px;
  }
}

@media (max-width: 767.98px) {
  #desktopSearchPanel {
    display: block !important;
    position: static;
    min-width: auto;
    padding: 0;
    margin: 0;
    border: 0;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  /* Header sur une seule ligne : megamenu à gauche, logo au centre,
     loupe / mon compte / panier à droite. */
  .header-bottom__container {
    /* Charte v2 GEN-04 : 12px de respiration au-dessus du logo de 72px ; celle du bas est portée
       par la ligne, pour que le panneau du méga-menu s'ouvre contre le filet de l'en-tête. */
    padding-top: 12px;
    padding-bottom: 0;
  }

  .header-bottom__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    /* Le logo étant hors flux (voir plus bas), il ne dicte plus la hauteur de
       la ligne : elle doit donc être réservée ici, sinon il déborde du header.
       Charte v2 GEN-04 : logo de 72px + 12px de respiration en bas. */
    min-height: 84px;
    padding-bottom: 12px;
  }

  /* À gauche : le megamenu (le hamburger sous XL). Il absorbe tout l'espace
     libre de la ligne, ce qui met les icônes en butée à droite. */
  .header-bottom__row > .main-menu {
    order: 0 !important;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    justify-content: flex-start;
  }

  /* Au centre : le logo, sorti du flux. Son centrage se fait ainsi sur la
     largeur du header et non sur l'espace restant entre le menu et les icônes,
     qui n'ont aucune raison d'avoir la même largeur.
     La hauteur du logo est bornée plus bas, sur l'image elle-même. */
  .header-bottom__row > .logo {
    order: 1 !important;
    position: absolute;
    left: 50%;
    /* Charte v2 GEN-04 : le logo repose sur le bas de la ligne (72px, la hauteur de
       la ligne) ; le menu et les icônes s'alignent sur sa ligne de base plus bas. */
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: center;
  }

  /* À droite : loupe, mon compte, panier. */
  .header-bottom__row > #_desktop_search {
    order: 20 !important;
    margin-left: 0 !important;
  }

  .header-bottom__row > #_desktop_user_info {
    order: 21 !important;
    margin-left: 0 !important;
  }

  .header-bottom__row > #_desktop_cart {
    order: 22 !important;
  }
}

/* ==========================================================================
   C. COMPOSANTS - DIVERS HEADER / FICHE PRODUIT
   ========================================================================== */

/* Hauteur du logo du header.
   La borne doit porter sur l'IMAGE, pas sur son conteneur : `renderLogo`
   (`templates/_partials/helpers.tpl`) intercale un `a.navbar-brand` entre le
   `div.logo` du header et l'image. Le `max-height: inherit` que `theme.css`
   pose sur `.logo` (l'image) hérite donc de cette ancre, qui n'a pas de
   max-height — une borne posée sur le conteneur reste sans effet. */
.header-bottom .navbar-brand .logo {
  max-height: 72px;
  width: auto;
}

@media (max-width: 991.98px) {
  .header-bottom .navbar-brand .logo {
    max-height: 56px;
  }
}

/* Icônes header (recherche, compte, panier, burger) en 24px : charte v2 GEN-04 */
.header-block__icon {
  width: 24px;
  height: 24px;
}

/* Croix de recherche en gris foncé */
.search-widgets .clear,
#search_widget .clear,
.js-search-input + .clear,
input.js-search-input ~ .clear {
  color: var(--dark-gray) !important;
}

/* Croix native du navigateur pour input search */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-ms-clear {
  display: none;
}

/* Product variants - selects en ligne avec width fit-content */
.product__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.product__variants .variant {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-direction: column;
}

.product__variants .variant .form-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.product__variants .variant .form-select {
  width: fit-content;
  min-width: auto;
}

/* Bouton Add to cart avec prix */
.add-to-cart--with-price {
  width: 100%;
}

/* Libelle, separateur et prix : une seule ligne centree, le prix suit la
   declinaison et la quantite (le bloc est reaffiche par le coeur). */
.add-to-cart__price {
  white-space: nowrap;
}

/* Select quantité produit */
.quantity-select__input {
  width: auto;
  min-width: 70px;
  overflow-y: auto;
}

.quantity-select__input option {
  padding: 5px 10px;
}

.header-top {
  display: none;
}

/* ==========================================================================
   C. COMPOSANTS - FLECHES SWIPER (style Bootstrap Carousel)
   Repos : secondaire. Survol : primaire.
   ========================================================================== */

.a4w-popularproduct-prev,
.a4w-popularproduct-next,
.a4w-popularindispensables-prev,
.a4w-popularindispensables-next,
.a4w-similar-prev,
.a4w-similar-next,
.swiper-button-prev,
.swiper-button-next {
  width: 64px;
  height: 64px;
  background-color: var(--secondary-color);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  opacity: 0.8;
}

.a4w-popularproduct-prev:hover,
.a4w-popularproduct-next:hover,
.a4w-popularindispensables-prev:hover,
.a4w-popularindispensables-next:hover,
.a4w-similar-prev:hover,
.a4w-similar-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: var(--primary-color);
  opacity: 1;
}

.a4w-popularproduct-prev::after,
.a4w-popularproduct-next::after,
.a4w-popularindispensables-prev::after,
.a4w-popularindispensables-next::after,
.a4w-similar-prev::after,
.a4w-similar-next::after,
.swiper-button-prev::after,
.swiper-button-next::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.a4w-popularproduct-prev::after,
.a4w-popularindispensables-prev::after,
.a4w-similar-prev::after,
.swiper-button-prev::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.a4w-popularproduct-next::after,
.a4w-popularindispensables-next::after,
.a4w-similar-next::after,
.swiper-button-next::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Cacher les icônes Material existantes dans les boutons swiper */
.a4w-popularproduct-prev .material-icons,
.a4w-popularproduct-next .material-icons,
.a4w-popularindispensables-prev .material-icons,
.a4w-popularindispensables-next .material-icons,
.a4w-similar-prev .material-icons,
.a4w-similar-next .material-icons {
  display: none;
}

/* Padding des wrappers carousel */
.a4w-popularproduct-carousel-wrapper,
.a4w-popularindispensables-carousel-wrapper,
.a4w-similar-carousel-wrapper {
  padding: 0 25px;
}

.product-miniature .product-miniature__infos__bottom {
  margin-bottom: 5px;
}

/* ==========================================================================
   C. COMPOSANTS - 21. BLOC REASSURANCE
   ========================================================================== */

#block-reassurance {
  padding: 60px 0;
  background-color: var(--background-color);
}

#block-reassurance .container {
  border-top: 1px solid var(--dark-color);
}

.block-reassurance-header {
  text-align: center;
  margin: 25px auto;
}

.block-reassurance-title {
  font-family: var(--font-family-title);
  /* Taille du niveau h2, comme les autres titres de section (« Vous aimerez aussi »…) : la
     taille h1 (68 px) le rendait plus grand qu'eux et l'étalait sur 3-4 lignes en mobile
     (retour Gumuche 2026-10-12, T-0078). */
  font-size: var(--font-size-h2);
  font-weight: 600;
  /* Couleur non redeclaree : c'est un h2, la regle de niveau suffit. */
  margin-bottom: 8px;
}

.block-reassurance-subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-size);
  color: var(--medium-gray);
  margin: 0;
}

.block-reassurance-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 30px;
}

.block-reassurance-item {
  flex: 1 1 calc(25% - 30px);
  min-width: 200px;
  text-align: center;
  padding: 20px;
}

.block-reassurance-icon {
  margin-bottom: 20px;
}

.block-reassurance-icon img {
  width: 140px;
  height: 140px;
}

.block-reassurance-item-title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Ce h3 herite de sa propre regle de niveau, pas de couleur a poser ici. */
  margin-bottom: 12px;
}

.block-reassurance-item-desc {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  color: var(--medium-gray);
  line-height: 1.5;
  margin: 0;
}

.reassurance-cart-checkout {
    flex-direction: column;
}

/* Responsive */
@media (max-width: 991.98px) {
  .block-reassurance-list {
    gap: 20px;
  }

  .block-reassurance-item {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 575.98px) {
  #block-reassurance {
    padding: 40px 0;
  }

  .block-reassurance-item {
    flex: 1 1 100%;
  }

  .block-reassurance-header {
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   C. COMPOSANTS - 22. BLOC REASSURANCE - FICHE PRODUIT (icon + titre uniquement)
   ========================================================================== */

.blockreassurance_product .reassurance-product-page {
  display: flex;
  flex-wrap: wrap;
}

.blockreassurance_product .reassurance-product-page .reassurance-block-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.blockreassurance_product .reassurance-product-page .reassurance-block-item .item-product {
  flex-shrink: 0;
}

/* 32px -> 48px (T-0057, refs#6510) */
.blockreassurance_product .reassurance-product-page .reassurance-block-item .item-product img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.blockreassurance_product .reassurance-product-page .reassurance-block-item .block-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: 400;
  margin: 0;
  color: var(--accent-ink-color);
}

/* ==========================================================================
   C. COMPOSANTS - 23. BLOC REASSURANCE - PANIER/CHECKOUT
   (icon + titre + description en colonne)
   ========================================================================== */

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15px;
  gap: 8px;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .item-product {
  margin-bottom: 5px;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .item-product img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .block-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: 600;
  margin: 0;
  color: var(--accent-ink-color);
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .block-description {
  font-family: var(--font-family-base);
  font-size: var(--font-size-small);
  font-weight: 400;
  margin: 0;
  color: var(--medium-gray);
  line-height: 1.4;
}

/* ==========================================================================
   C. COMPOSANTS - FICHE PRODUIT ET ACCORDEON
   ========================================================================== */

.breadcrumb__wrapper {
  background: var(--white-color);
}
/* Ces alertes prenaient --primary-color : un copier-coller, sans rapport avec
   la couleur d'action. Une alerte porte sa propre semantique, et cette
   semantique est un token comme les autres : jamais une litterale figee ici. */
.alert-info {
  background-color: var(--white-color);
  border-color: var(--alert-info-color, #565254);
  color: var(--alert-info-color, #565254);
  border-radius: var(--border-radius, 3px);
}
.info.accordion-item {
  border-top: 1px solid var(--dark-color);
}
#product-infos-accordion {
  border-top: 1px solid var(--dark-color);
}
.page-product .product__infos .accordion-button {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--dark-color);
}
.rich-text p, .rich-text ul {
  font-size: var(--font-size-small);
}

.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-end {
  display: flex;
  align-items: flex-end;
}

.product__unit-price {
  color: var(--text-color);
}
.product__current-price {
  font-weight: 700;
}

/* ==========================================================================
   STICKY PRODUCT INFOS (desktop only)
   La colonne droite (titre, prix, ajout au panier) suit le scroll pendant que
   la colonne gauche (image + accordeon) defile.
   --header-height est defini par assets/js/custom.js
   ========================================================================== */

@media (min-width: 992px) {
  .page-product .product__col {
    position: sticky;
    top: calc(var(--header-height, 80px) + 1rem);
    align-self: flex-start;
  }
}

/* ==========================================================================
   C. COMPOSANTS - 24. CMS page
   ========================================================================== */
/* CONTENEUR GLOBAL */

.a4w-about {
    font-family: inherit;
    line-height: var(--line-height);
}

/* CONTAINER */

.a4w-about-container{
    max-width: var(--a4w-container-narrow-max-width);
    margin:auto;
    padding:80px 20px;
}

/* INTRO */

.a4w-about-intro{
    text-align:center;
    background: var(--light-bg);
}

.a4w-about-logo{
    max-width:120px;
    margin-bottom:20px;
}

.a4w-about-subtitle{
    font-size: var(--font-size-xl);
    margin-bottom:20px;
    color: var(--accent-ink-color);
}

/* GRID */

.a4w-about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
}

/* IMAGE */

.a4w-about-image img{
    width:100%;
    height:auto;
    display:block;
}

.a4w-about-content {
  padding: 30px;
  background-color: var(--light-bg);
}

/* TITRES */

.a4w-about-content h3{
    font-size: var(--font-size-h1);
    margin-bottom:20px;
    /* h3 : la couleur suit deja --h3-color via la regle de niveau. */
}

/* YEAR */

.a4w-about-year{
    display:block;
    font-size: var(--font-size-h1);
    font-weight:700;
    color: var(--accent-text-color);
    margin-bottom:10px;
}

.a4w-about-today{
    color: var(--accent-text-color);
    text-transform:uppercase;
}

/* REVERSE */

.a4w-about-reverse .a4w-about-grid{
    direction:rtl;
}

.a4w-about-reverse .a4w-about-content{
    direction:ltr;
}

/* SPECIALITY */

.a4w-about-speciality{
    background: var(--light-bg);
}

.a4w-about-sub{
    text-transform:uppercase;
    font-size: var(--font-size-small);
    letter-spacing:2px;
    color: var(--medium-gray);
}

/* VIDEO
   Placeholder : fond gris moyen pour que le glyphe blanc reste lisible
   (il etait blanc sur #cfcfcf, soit un contraste de 1.9:1). */

.a4w-about-video-placeholder{
    background: var(--medium-gray);
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:60px;
    color: var(--white-color);
}

/* BUTTON */

.a4w-about-btn{
    display:inline-block;
    margin-top:20px;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    text-decoration:none;
    border-radius: var(--btn-radius);
}

.a4w-about-btn:hover{
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-hover-color);
}

/* MOBILE */

@media (max-width: 991.98px){

    .a4w-about-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .a4w-about-container{
        padding:50px 20px;
    }

    .a4w-about-content h3{
        font-size: var(--font-size-h2);
    }

    .a4w-about-year{
        font-size: var(--font-size-h2);
    }
}

/* ==========================================================================
   C. COMPOSANTS - FICHE PRODUIT - Masquer Reference / UPC / EAN13 / MPN
   ========================================================================== */

.product__details .detail--reference,
.product__details .detail--upc,
.product__details .detail--ean13,
.product__details .detail--ean-13,
.product__details .detail--mpn {
    display: none !important;
}
/* ==========================================================================
   C. COMPOSANTS - FICHE PRODUIT - Détails du produit et fiche technique en grille
   Libellé discret au-dessus, valeur en gras ; 3 colonnes, 2 sur tablette, 1 sur mobile.
   Balisage du thème inchangé (a4w_weightcalculator lit .detail__title et .detail__right).
   ========================================================================== */

.product__details,
.product__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: transparent;
}

.product__details .detail,
.product__features .detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 0;
    border: 0;
}

/* Le thème met le libellé en gras et sa colonne à 50 % : en grille, il est discret et pleine largeur.
   Taille relative : elle suit le corps, qui descend à 12 px sous 992 px. */
.product__details .detail__left,
.product__features .detail__left {
    width: auto;
}

.product__details .detail__title,
.product__features .detail__title {
    color: var(--medium-gray, #565254);
    font-size: 0.875em;
    font-weight: 400;
}

.product__details .detail__right,
.product__features .detail__right {
    font-weight: 600;
    overflow-wrap: break-word;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    .product__details,
    .product__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .product__details,
    .product__features {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (hover: none) and (pointer: coarse) {
    .product-miniature .product-miniature__quickview_touch {
        display: none;
    }
}

/* Sous-menu du megamenu (T-0011, 2026-09-25).
   Le module rend le <nav> positionné : le panneau de 1240px se centrait sur
   ce nav, qui n'occupe que la gauche de l'en-tête, et débordait de 320px
   hors de l'écran à gauche en recouvrant le logo. Le nav redevient statique :
   le panneau se cale sur la ligne d'en-tête (position: relative plus haut),
   s'ouvre sous elle et en prend toute la largeur, d'un bord à l'autre de
   l'en-tête (2026-09-28 : la largeur du contenu laissait un panneau étroit
   à gauche). Les niveaux 3 et suivants s'ouvrent dans ce panneau, sans rien
   déplacer. Le ::before comble les 23px entre le lien et le panneau, sans
   quoi le survol se perd. */
@media (min-width: 1200px) {
    .header-bottom__row .a4w-megamenu {
        position: static;
    }

    .a4w-megamenu .main-menu__tree > li > .menu-container.dropdown-menu2 {
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
    }

    .a4w-megamenu .main-menu__tree > li > .menu-container.dropdown-menu2::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: 32px;
    }
}

/* ==========================================================================
   C. COMPOSANTS - 25. ESPACE CLIENT
   Charte v2 Gumuche (refs#6694, retour du 29/10 ; maquettes Infos, Main,
   Commandes, Details, Avoirs, Bons, Donnees, Listes). Colonne de menu de 260 a
   300 px et contenu sur fond blanc, separes de 56 px. En-tete du contenu :
   titre a la taille H1, chapo, compteur a droite, filet. Vaut pour toute page
   qui etend customer/page.tpl : informations, adresses, commandes, avoirs,
   bons, RGPD (psgdpr), Mes listes (a4w_lists), Mon compte. Sous 768 px, une
   seule colonne et le menu en liste deroulante (section CPT-07, plus bas).
   ========================================================================== */

.account-layout {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin: 0 0 96px;
}

/* Mon compte : la page est le menu, centree, sans colonne laterale. */
.account-layout--menu-page {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.account-layout__aside,
.account-layout__main {
  min-width: 0;
}

.account-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Menu : carte « Mon compte », liens, Deconnexion apres un filet. Les regles
   de theme.css (.account-menu > a, .link-item) sont reprises a specificite
   egale, custom.css est charge apres. */
.account-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-color, #1D191B);
}

.account-menu__profile {
  margin: 0 0 18px;
  padding: 20px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
}

.account-menu__kicker {
  margin: 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.account-menu__name {
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
  overflow-wrap: break-word;
}

/* Les liens accroches par des modules (psgdpr, a4w_lists) sont ramenes a la
   meme ligne que ceux du theme. */
.account-menu > a,
.account-menu__signout > a {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--border-radius, 3px);
  color: var(--medium-gray, #565254);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.account-menu .link-item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
}

.account-menu .link-item i {
  margin-right: 0;
}

/* Pictos a l'or, a l'encre sur la page en cours. */
.account-menu__svg {
  flex: 0 0 auto;
  width: 1.125em;
  height: 1.125em;
  color: var(--link-decoration-color, #B68A56);
}

.account-menu a .material-icons {
  flex: 0 0 auto;
  width: 1em;
  margin: 0;
  font-size: 1.125em;
  line-height: 1;
  color: var(--link-decoration-color, #B68A56);
}

.account-menu > a:hover,
.account-menu__signout > a:hover {
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.account-menu > a.active,
.account-menu > a[aria-current="page"] {
  background-color: var(--tertiary-color, #FFEAF7);
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

.account-menu > a.active .account-menu__svg,
.account-menu > a[aria-current="page"] .account-menu__svg,
.account-menu > a.active .material-icons,
.account-menu > a[aria-current="page"] .material-icons {
  color: currentColor;
}

.account-menu > a:focus-visible,
.account-menu__signout > a:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: -2px;
}

.account-menu__signout {
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

/* Page Mon compte : le menu sert de contenu, sans la carte (le titre salue deja). */
.account-menu.account-menu--embedded {
  display: flex;
  max-width: 480px;
}

/* En-tete du contenu : titre H1 et chapo a gauche, compteur a droite, filet. */
.account-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.account-header__text {
  min-width: 0;
}

.account-layout .account-header h1 {
  margin: 0;
  font-family: var(--h1-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h1, 2.4375rem);
  font-weight: var(--h1-font-weight, 600);
  line-height: 1.15;
  text-transform: var(--h1-text-transform, none);
  color: var(--text-color, #1D191B);
}

.account-intro {
  margin: 10px 0 0;
  color: var(--medium-gray, #565254);
  line-height: 1.6;
}

.account-count {
  flex: none;
  padding: 7px 12px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* Formulaires (informations, adresse) : libelle de 14 px gras, astérisque a
   l'or, champ de 48 px. La page Mes informations les range en encadres
   (section CPT-05, plus bas). */
.page-customer .form-label {
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.page-customer .form-label.required::after {
  content: "*";
  margin-left: 2px;
  color: var(--accent-text-color, #8C6634);
}

.page-customer form input.form-control,
.page-customer form .form-select,
.page-customer form .input-group {
  max-width: 360px;
}

.page-customer form .form-control,
.page-customer form .form-select {
  min-height: 48px;
  padding: 10px 14px;
  border-color: var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
  color: var(--text-color, #1D191B);
}

.page-customer form .form-control:focus,
.page-customer form .form-select:focus {
  border-color: var(--text-color, #1D191B);
}

.page-customer .form-check-input {
  border-color: var(--text-color, #1D191B);
}

.page-customer .form-check-input:not(:checked) {
  background-color: var(--white-color, #FFFFFF);
}

.page-customer .form-check-label em {
  font-size: var(--font-size-tiny, 12px);
  color: var(--muted-color, #6C6A6B);
}

.page-customer .form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 32px;
}

/* Mes listes (a4w_lists 1.6.0) : le module reconstruit sa grille (colonnes
   Bootstrap .a4w-mylists-layout, bloc des listes au-dessus du menu). Elle est
   ramenee ici a celle de customer/page.tpl, sans toucher au gabarit du module
   (F4). */
.a4w-mylists-layout {
  --bs-gutter-x: 0;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin: 0 0 96px;
}

.a4w-mylists-layout > [class*="col-"] {
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
}

.a4w-mylists-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.a4w-mylists-layout .page-header {
  margin: 0 0 32px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.a4w-mylists-layout .page-header h1 {
  margin: 0;
  font-family: var(--h1-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h1, 2.4375rem);
  font-weight: var(--h1-font-weight, 600);
  line-height: 1.15;
  color: var(--text-color, #1D191B);
}

@media (max-width: 991.98px) {
  .account-layout,
  .a4w-mylists-layout {
    grid-template-columns: minmax(240px, 260px) minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 767.98px) {
  .account-layout,
  .account-layout--menu-page,
  .a4w-mylists-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 64px;
  }

  .account-layout__aside,
  .a4w-mylists-layout__aside {
    gap: 16px;
  }

  .account-header,
  .a4w-mylists-layout .page-header {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   D. RESPONSIVE - 20. PALIERS DE TOKENS
   Echelle Bootstrap 5 stricte : 1399.98 / 1199.98 / 991.98 / 767.98 / 575.98.
   Le corps (--font-size) et les titres (--font-size-title-base) ont chacun
   leur courbe : les titres ne sont pas indexes sur la taille du corps.
   Charte v2 Gumuche (refs#6694, GEN-01) : le texte courant reste a 16 px a
   toutes les largeurs (il descendait a 12 puis 11 px) ; H1 a H3 sont fluides
   (bloc n°2) ; le titre d'ouverture suit la meme courbe sous 1400 px, de 39 a
   61 px. Rien sous 12 px.
   ========================================================================== */

/* Grand écran (retour du 29/10) : le conteneur suit l'écran au-delà de 1440 px, de 1360 px
   (maquette) à 1680 px atteints à 1920 px, puis plafonne. Toute la page suit ce jeton : en-tête,
   blocs de l'accueil, listes, pied. */
@media (min-width: 1440px) {
  :root {
    --a4w-container-xxl-max-width: clamp(1360px, 66.667vw + 400px, 1680px);
  }
}

@media (max-width: 1399.98px) {
  :root {
    --font-size-hero: clamp(2.4375rem, 1.953rem + 2.066vw, 3.8125rem);
  }
}

@media (max-width: 991.98px) {
  :root {
    --font-size-title-base: 14.6px;  /* H4 a H6 */
    --font-size-medium: 16px;
    --product-title-size: 13px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --font-size-title-base: 13px;  /* H4 a H6, 12 px au moins */
    --font-size-medium: 14px;
    --product-title-size: 12px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --font-size-title-base: 12px;  /* H4 a H6, plancher de 12 px */
    --font-size-medium: 14px;
    --product-title-size: 12px;
  }
}

/* Favori à côté du nom du produit (T-0056, refs#6510).
   Le bouton a4w_lists passe en pastille ronde, comme sur les vignettes ;
   son libellé reste lu par les lecteurs d'écran. */
.product__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.product__header > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.product__header .a4w-lists-button--page {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Cœur seul, sans pastille (T-0119) : ni bordure ni fond, au repos comme au survol ou une
   fois en favori (le cœur plein suffit) ; la cible reste de 44 px. */
.product__header .a4w-lists-trigger,
.product__header .a4w-lists-trigger:hover,
.product__header .a4w-lists-trigger:focus-visible,
.product__header .a4w-lists-trigger.a4w-lists-trigger--active {
  width: 44px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
}

.product__header .a4w-lists-trigger:focus-visible {
  outline: 2px solid var(--accent-ink-color, #1D191B);
  outline-offset: 2px;
}

.product__header .a4w-lists-trigger__icon {
  width: 32px;
  height: 32px;
}

/* Survol sans fond : le cœur se remplit légèrement (déjà plein une fois en favori). */
.product__header .a4w-lists-trigger:not(.a4w-lists-trigger--active):hover .a4w-lists-trigger__icon path {
  fill: currentColor;
  fill-opacity: 0.2;
}

.product__header .a4w-lists-trigger > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Fiche produit : espacements (T-0059, refs#6510).
   Rythme de la maquette Produit-B : 96 px au-dessus de chaque bloc du pied de fiche (64 px sous
   768 px), comme les recettes (a4w_recipe) et la réassurance ; la marge du bas reste pour le
   dernier bloc avant le pied de page. Entre deux blocs, les marges se confondent : l'écart ne
   dépend plus de l'ordre des modules (recettes puis « Découvrez aussi » : 0 px, retour du 29/10).
   Réassurance alignée sur la colonne (la rangée gardait sa marge négative de -12 px). */
#product .product.js-product-container {
  margin-bottom: 64px;
}

#product #content-wrapper > .product-accessories,
#product #content-wrapper > .a4w-fragrances,
#product #content-wrapper > .background-medium {
  margin-top: 96px;
  margin-bottom: 64px;
}

#product #content-wrapper > .product-accessories .section-title {
  margin-top: 0;
  margin-bottom: 32px;
}

#product #content-wrapper > .a4w-fragrances .a4w-fragrances__title {
  margin-bottom: 24px;
}

/* Titre « Produits consultés » centré, comme celui des parfums (T-0118, refs#6510).
   « Vous aimerez aussi » (.product-accessories) est aligné à gauche depuis refs#6731. */
.viewed-products .section-title {
  text-align: center;
}

.blockreassurance_product {
  margin-top: 32px;
}

.blockreassurance_product .reassurance-product-page {
  margin-right: 0;
  margin-left: 0;
}

.blockreassurance_product .reassurance-product-page .reassurance-block-item {
  gap: 16px;
  padding: 8px 16px 8px 0;
}

@media (max-width: 991.98px) {
  #product .product.js-product-container {
    --bs-gutter-y: 40px;
  }
}

@media (max-width: 767.98px) {
  #product .product.js-product-container,
  #product #content-wrapper > .product-accessories,
  #product #content-wrapper > .a4w-fragrances,
  #product #content-wrapper > .background-medium {
    margin-bottom: 40px;
  }

  #product #content-wrapper > .product-accessories,
  #product #content-wrapper > .a4w-fragrances,
  #product #content-wrapper > .background-medium {
    margin-top: 64px;
  }

  #product #content-wrapper > .product-accessories .section-title {
    margin-bottom: 24px;
  }
}

/* La boîte du picto suit l'image de 48 px (front.css du module la fige à 35 px, flottante). */
.blockreassurance_product .reassurance-product-page .reassurance-block-item .item-product {
  float: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
}

/* Réassurance du panier et du tunnel de commande (T-0062, refs#6510).
   Liste compacte alignée sur le récapitulatif : picto 40 px à gauche,
   titre puis description à droite, 16 px entre les lignes. */
.blockreassurance_product .reassurance-cart-checkout {
  flex-direction: column;
  gap: 16px;
  margin: 0 0 64px;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  width: 100%;
  padding: 0;
  text-align: left;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .item-product {
  grid-row: span 2;
  float: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
}

.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .block-title,
.blockreassurance_product .reassurance-cart-checkout .reassurance-cart-item .block-description {
  grid-column: 2;
  line-height: 1.5;
}

@media (max-width: 767.98px) {
  .blockreassurance_product .reassurance-cart-checkout {
    margin-bottom: 40px;
  }
}

/* Boutons « retour » du tunnel en liens soulignés (T-0063, refs#6510).
   Le bouton garde .js-back et data-step : seul l'habillage change. */
.checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link-color, #1D191B);
  font: inherit;
  font-size: var(--btn-font-size, 14px);
  cursor: pointer;
}

.checkout-back-link > span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.checkout-back-link .material-icons {
  font-size: 1.25em;
}

.checkout-back-link:hover {
  color: var(--link-hover-color, #1D191B);
}

.checkout-back-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Étapes du tunnel à la couleur du site au lieu du vert (T-0064, refs#6510).
   Bootstrap y lit --bs-success : redéfini sur la seule barre d'étapes. */
.checkout__steps {
  --bs-success: var(--accent-ink-color, #1D191B);
}

.checkout__steps .checkout__steps__ring {
  color: var(--accent-ink-color, #1D191B);
}

/* Nom de la personne en gras sur les cartes d'adresse (T-0065, refs#6510) :
   première ligne du format d'adresse, « firstname lastname » en FR, BE, CH, LU, MC. */
address.address__content::first-line {
  font-weight: 600;
}

/* ==========================================================================
   Passe de propreté du site (T-0014 et T-0009, refs#6510, relevé du 2026-10-09)
   ========================================================================== */

/* Focus clavier visible partout : hummingbird retire l'anneau des accordéons,
   des flèches du carrousel, du tri, du code promo et des boutons de quantité. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible {
  outline: 2px solid var(--accent-ink-color, #1D191B);
  outline-offset: 2px;
}

/* Pied de page : les icônes du bloc contact prenaient le gris clair de Bootstrap
   (--footer-text-color) et la flèche des rubriques mobiles était forcée en blanc,
   toutes deux sur le fond clair du pied de page. */
.footer .footer__block__content .material-icons,
#footer .contact__infos .material-icons,
.footer .footer__block__toggle i {
  color: var(--accent-ink-color, #1D191B);
}

/* Titres des contenus riches (texte personnalisé, pages CMS, descriptions) :
   hummingbird les forçait en gris Bootstrap (--bs-gray-800) au lieu des
   réglages du Thème Editor. */
.rich-text h1, .rich-text .h1 { color: var(--h1-color); font-weight: var(--h1-font-weight); }
.rich-text h2, .rich-text .h2 { color: var(--h2-color); font-weight: var(--h2-font-weight); }
.rich-text h3, .rich-text .h3 { color: var(--h3-color); font-weight: var(--h3-font-weight); }
.rich-text h4, .rich-text .h4 { color: var(--h4-color); font-weight: var(--h4-font-weight); }
.rich-text h5, .rich-text .h5 { color: var(--h5-color); font-weight: var(--h5-font-weight); }
.rich-text h6, .rich-text .h6 { color: var(--h6-color); font-weight: var(--h6-font-weight); }

/* Contenus collés depuis Word ou l'ancien éditeur : polices figées en style en
   ligne (Trebuchet, Times, Geneva, OptimaLight). Elles suivent la charte ; les
   titres retrouvent leurs jetons. !important : seul moyen de passer devant un
   style en ligne ou une règle d'identifiant du CMS Builder. */
.rich-text span:not([class*="material"]):not([class*="icon"]),
.rich-text strong,
.rich-text b,
.rich-text em,
.rich-text u,
.rich-text font,
.rich-text ins,
.rich-text del,
.rich-text small,
.rich-text mark,
.rich-text sub,
.rich-text sup,
.rich-text a,
.rich-text i:not([class*="material"]):not([class*="icon"]) {
  font-family: inherit !important;
}

.rich-text p,
.rich-text li,
.rich-text td,
.rich-text blockquote,
.rich-text div[style*="font-family"] {
  font-family: var(--p-font-family, inherit) !important;
}

.rich-text h1[style] { font-family: var(--h1-font-family) !important; color: var(--h1-color) !important; }
.rich-text h2[style] { font-family: var(--h2-font-family) !important; color: var(--h2-color) !important; }
.rich-text h3[style] { font-family: var(--h3-font-family) !important; color: var(--h3-color) !important; }
.rich-text :is(h1, h2, h3, h4, h5, h6) [style*="color"] { color: inherit !important; }

/* Vidéos intégrées (On parle de nous) : elles débordaient de l'écran en mobile. */
.rich-text iframe,
.page-content iframe {
  max-width: 100%;
}

/* Page Qui sommes-nous : le CSS collé dans le CMS Builder écrit ses textes avec
   --signature-color, qui sur Gumuche est le rose pâle des fonds. Encre d'accent à
   la place (la source corrigée du dépôt n'utilise plus ce jeton). */
.qsn {
  --signature-color: var(--accent-ink-color, #1D191B);
}

/* Fiche produit (SEO T-0078, refs#6510) : la colonne du titre passe en tête du code pour que
   le h1 précède les h2 des accordéons ; la colonne images + accordéons reste affichée en
   premier (à gauche en desktop, au-dessus en mobile). */
#product .product.js-product-container > .product__left {
  order: -1;
}

/* ==========================================================================
   OUVERTURE / FERMETURE EN + / − (retour Gumuche 2026-10-09, T-0080, refs#6510)
   Tout élément repliable du site affiche « + » fermé et « − » ouvert, au lieu
   des chevrons de Bootstrap et des flèches Material :
   - accordéons Bootstrap (.accordion-button) : fiche produit, filtres de
     ps_facetedsearch, résumé de commande mobile, code promo, magasins, arbre
     des catégories ;
   - rubriques repliables du pied de page en mobile ;
   - « Afficher les détails » du résumé de panier.
   Les signes sont des masques remplis en currentColor : ils prennent la
   couleur du libellé, sans rotation. Le nom de l'icône Material (texte de
   ligature, aria-hidden) est masqué par font-size: 0.
   ========================================================================== */
.accordion-button::after,
.footer .footer__block__toggle i,
.cart-summary__show i {
  --a4w-toggle-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --a4w-toggle-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8h11' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: var(--a4w-toggle-plus) center / contain no-repeat;
  mask: var(--a4w-toggle-plus) center / contain no-repeat;
  transform: none;
}

.accordion-button:not(.collapsed)::after {
  -webkit-mask-image: var(--a4w-toggle-minus);
  mask-image: var(--a4w-toggle-minus);
}

.footer .footer__block__toggle i,
.footer .footer__block__toggle:not(.collapsed) i,
.cart-summary__show i {
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  font-size: 0;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--a4w-toggle-plus) center / contain no-repeat;
  mask: var(--a4w-toggle-plus) center / contain no-repeat;
  transform: none;
}

.footer .footer__block__toggle:not(.collapsed) i,
.cart-summary__show[aria-expanded="true"] i {
  -webkit-mask-image: var(--a4w-toggle-minus);
  mask-image: var(--a4w-toggle-minus);
}

/* Le « + » des détails du panier prenait --bs-primary (#FFF9F9 sur Gumuche) :
   encre d'accent, comme les autres signes. */
.cart-summary__show i {
  margin-left: 8px;
  color: var(--accent-ink-color, #1D191B);
}

/* === Charte v2 — GEN-03 Liens, suppressions, fil d'Ariane (refs#6694) === */

/* 1. Liens de texte soulignes or : portee de la regle GEN-01 etendue aux liens de texte
   qui ne sont pas dans un <p> (mentions des formulaires, case a cocher des CGV, alertes,
   « Mot de passe oublie »). Menus, listes de pied de page, cartes produit, logos et boutons
   restent nus. */
:where(.form-text, .form-check-label, .js-terms, .alert, .login__forgot-password) a:not(.btn, .link-more) {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

:where(.form-text, .form-check-label, .js-terms, .alert, .login__forgot-password) a:not(.btn, .link-more):hover {
  text-decoration-thickness: 2px;
}

/* Focus clavier : contour en encre (contraste 16:1 sur creme et sur blanc), le souligne or
   seul (2,6:1) ne suffit pas a signaler le focus. */
:where(p, .rich-text li, .page-content li, .product-description li, .form-text, .form-check-label, .js-terms, .alert, .login__forgot-password) a:not(.btn):focus-visible,
a.link-more:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 3px;
  border-radius: var(--border-radius, 3px);
  text-decoration-thickness: 2px;
}

/* 2. Lien de section « Voir tout → » : texte + fleche, sans soulignement. La fleche est un
   masque CSS (pas de markup a ajouter) ; elle avance de 3 px au survol, comme la maquette. */
a.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: none;
}

a.link-more::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

a.link-more:hover {
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

a.link-more:hover::after {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  a.link-more::after {
    transition: none;
  }

  a.link-more:hover::after {
    transform: none;
  }
}

/* 3. « Supprimer / Retirer » : encre, jamais rouge (le rouge est reserve aux erreurs). */
.address__delete,
.remove-from-cart,
.js-remove-email-alert,
.cart-voucher__item [data-link-action="remove-voucher"] {
  color: var(--text-color, #1D191B);
}

.address__delete:hover,
.remove-from-cart:hover,
.js-remove-email-alert:hover,
.cart-voucher__item [data-link-action="remove-voucher"]:hover {
  color: var(--text-color, #1D191B);
}

/* Panier : « Retirer » comme la maquette (corbeille + texte semi-gras, cible 44 px). Le
   soulignement du parent est retire, le survol dessine un filet de champ. */
.cart__item .product-line__actions .remove-from-cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--border-radius, 3px);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.cart__item .product-line__actions .remove-from-cart::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cart__item .product-line__actions .remove-from-cart::after {
  display: none;
}

.cart__item .product-line__actions .remove-from-cart:hover {
  border-color: var(--input-border-color, #8E8C8D);
}

/* 4. Fil d'Ariane : le maillon « Accueil » n'est plus rendu (breadcrumb.tpl, #6721) ; il reste dans le
   BreadcrumbList JSON-LD (position 1). */

/* Lien d'évitement (#6721, RGAA 12.7) : masqué par .visually-hidden-focusable de Bootstrap, posé
   au-dessus de l'en-tête collant (z-index 1030) quand il prend le focus. */
.a4w-skip-link:focus,
.a4w-skip-link:focus-within {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 1090;
  padding: 8px 16px;
  background: var(--dark-color, #1D191B);
  color: var(--white-color, #fff);
  font-weight: 600;
  text-decoration: underline;
  box-shadow: 0 0 0 0.25rem var(--focus-ring-color, rgba(29, 25, 27, 0.25));
}

/* Fiche produit : la maquette garde le nom du produit en dernier maillon (le theme parent
   le masquait). */
.page-product .breadcrumb-item:last-child {
  display: list-item;
}

/* === Charte v2 — GEN-04 Header : logo, icônes, menu (refs#6694) ===
   Logo de 72px (56px sous 992px) et icônes de 24px : corrigés sur place plus haut (règles
   `.header-bottom .navbar-brand .logo`, `.header-block__icon`, mise en page de l'en-tête).
   Ici : alignement sur la ligne de base du logo, typographie du menu, soulignement de la page
   courante (`aria-current`, posé par a4w_megamenu 1.18.0), puces or, et bandeau a4w_pre_header
   (fond, taille, interlettrage) sans toucher au module. */

@media (min-width: 1200px) {
  /* Le menu et les icônes reposent sur la ligne de base du logotype (maquette : menu à
     -7.5px, icônes à -3px du bas de la ligne). */
  .header-bottom__row {
    align-items: flex-end;
  }

  .header-bottom__row > .main-menu {
    align-self: flex-end;
    margin-bottom: -7.5px;
  }

  .header-bottom__row > #_desktop_search,
  .header-bottom__row > #_desktop_user_info,
  .header-bottom__row > #_desktop_cart {
    align-self: flex-end;
    margin-bottom: -3px;
  }

  /* Entrées du menu principal : Gelasio, capitales (réglage « Titres du premier niveau en
     majuscules » = Oui), .8125rem, interlettrage .12em. Cible de 44px de haut. */
  #header .a4w-megamenu .nav > .nav-item > .nav-link {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
    color: var(--text-color, #1D191B);
    font-family: var(--font-family-title, Georgia, serif);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    transition: text-decoration-color 0.15s ease;
  }

  #header .a4w-megamenu .nav > .nav-item > .nav-link:hover,
  #header .a4w-megamenu .nav > .nav-item > .nav-link:focus-visible {
    color: var(--text-color, #1D191B);
    text-decoration-color: var(--link-decoration-color, #B68A56);
  }

  #header .a4w-megamenu .nav > .nav-item > .nav-link[aria-current="page"],
  #header .a4w-megamenu .nav > .nav-item > .nav-link[aria-expanded="true"] {
    text-decoration-color: var(--text-color, #1D191B);
  }

  /* Puces entre les entrées : points or de 5px, à 18px d'écart. */
  #header .a4w-megamenu .nav-item:not(:last-child) {
    margin-right: 18px;
  }

  #header .a4w-megamenu .nav-item:not(:last-child) > .nav-link::after {
    order: 2;
    width: 5px;
    height: 5px;
    margin-left: 18px;
    /* E-Shop porte .dropdown-toggle : sans border: 0, le triangle de Bootstrap noircissait sa puce. */
    border: 0;
    background: var(--link-decoration-color, #B68A56);
  }

  /* Recette 28/10 (maquette) : entrées en capitales, chevron de 12 px après une entrée à panneau.
     Le chevron est le ::before, rangé après le texte (order: 1) et avant la puce (order: 2). */
  #header .a4w-megamenu .nav > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
  }

  #header .a4w-megamenu .nav > .nav-item.has-dropdown > .nav-link::before {
    content: "";
    order: 1;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.15s ease;
  }

  #header .a4w-megamenu .nav > .nav-item.has-dropdown:hover > .nav-link::before,
  #header .a4w-megamenu .nav > .nav-item.has-dropdown > .nav-link[aria-expanded="true"]::before {
    transform: rotate(180deg);
  }
}

/* Recette 28/10 (maquette .hd-ico) : recherche, compte, panier dans des cibles rondes de 44 px,
   pictogrammes au trait de 22 px, 6 px d'écart ; pastille du panier encre, 16 px, en haut à droite.
   La recherche est servie par a4w_searchbar (.a4w-sb), pas par #_desktop_search : elle restait
   hors de l'alignement des deux autres. */
@media (min-width: 768px) {
  .header-bottom__row > .a4w-sb,
  .header-bottom__row > #_desktop_user_info,
  .header-bottom__row > #_desktop_cart {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    margin-left: 6px;
    padding-right: 0;
    padding-left: 0;
  }

  /* Rangée sans gouttière Bootstrap (gx-2 la faisait déborder de 4 px de chaque côté : le panier
     finissait à 4 px au-delà du contenu) ; le compte retrouve ses 6 px, qu'une règle d'ordre plus
     ancienne (« margin-left: 0 !important ») lui retirait. */
  .header-bottom__row {
    --bs-gutter-x: 0;
  }

  .header-bottom__row > #_desktop_user_info {
    margin-left: 6px !important;
  }

  #header .header-bottom__row .header-block__action-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    transition: background-color 0.15s ease;
  }

  #header .header-bottom__row .header-block__action-btn:hover {
    background-color: var(--light-bg, #FAF7F4);
  }

  /* Client connecté : le compte est un menu déroulant (.dropdown-toggle). Le triangle de Bootstrap
     se logeait dans la cible de 44 px, poussait le picto vers la loupe et écartait le panier ; la
     maquette n'en a pas. Le menu s'ouvre toujours au clic. */
  #header #_desktop_user_info .dropdown-toggle::after {
    display: none;
  }

  #header .header-bottom__row .header-block__icon {
    width: 22px;
    height: 22px;
    margin: 0;
  }

  #header #_desktop_cart .header-block__badge {
    top: 4px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    transform: none;
    background-color: var(--text-color, #1D191B);
    color: #FFFFFF;
    /* Maquette : 11 px ; plancher de 12 px du site (GEN-09). */
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 16px;
    text-align: center;
  }
}

@media (min-width: 1200px) {
  .header-bottom__row > .a4w-sb {
    align-self: flex-end;
    height: auto;
    margin-bottom: -3px;
  }
}

/* Mobile : mêmes pictogrammes de 22 px et pastille de 16 px que la maquette (à 390 px la
   pastille de 20 px couvrait le haut du sac). */
@media (max-width: 767.98px) {
  #header .header-block__icon {
    width: 22px;
    height: 22px;
  }

  #header .header-block__badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: var(--text-color, #1D191B);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header .a4w-megamenu .nav > .nav-item > .nav-link {
    transition: none;
  }
}

/* Bandeau a4w_pre_header : fin, centré, fond rose signature, 12px, interlettrage .1em. Les
   réglages du module (couleurs, hauteur, taille) sont écrits en ligne dans la page ; l'identifiant
   les surpasse. */
#custom-preheader.pre-header {
  background-color: var(--tertiary-color, #FFEAF7);
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-base, sans-serif);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
}

#custom-preheader .pre-header__inner {
  height: auto;
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 6px;
}

#custom-preheader .pre-header-zone--center {
  justify-content: center;
}

#custom-preheader .pre-header-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 0;
  border-radius: 50%;
  color: var(--text-color, #1D191B);
  font-size: 1.25rem;
  line-height: 1;
}

#custom-preheader .pre-header-close:hover {
  background-color: var(--background-color, #FFFFFF);
}

/* Mobile : le module fige le texte sur une ligne (nowrap + overflow hidden) ; à 390 px la phrase
   était coupée au milieu d'un mot. Elle passe à la ligne, centrée. */
@media (max-width: 575.98px) {
  #custom-preheader.pre-header {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  #custom-preheader .pre-header-block--text,
  #custom-preheader .pre-header-block__link {
    overflow: visible;
    white-space: normal;
    text-align: center;
  }
}

/* === Charte v2 — GEN-07 / GEN-08 Pied de page : colonnes, accordéons mobile, ligne légale (refs#6694) === */

/* Colonnes (desktop, ≥ 768 px). Les blocs de displayFooter (ps_linklist, ps_contactinfo,
   ps_customeraccountlinks, a4w_footer_customtext) portent encore leurs classes de colonnes
   Bootstrap (col-md-2 / col-md-3) : la grille les remplace, quel que soit leur nombre. */
@media (min-width: 768px) {
  .footer__main__top.row {
    --bs-gutter-x: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin: 0;
    padding: 40px 0 36px;
  }

  .footer__main__top.row > * {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .footer .footer__main__top > .footer__block {
    margin-bottom: 0;
  }
}

/* Typographie des colonnes (toutes largeurs) : titres en capitales, texte secondaire à l'encre 2. */
.footer .footer__main__top .footer__block__title {
  margin: 0 0 14px;
  color: var(--footer-title-color, #1D191B);
  font-family: var(--font-family-base);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
}

.footer .footer__main__top .footer__block__content {
  padding-top: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer .footer__main__top .footer__block__content p {
  margin: 0;
  color: inherit;
}

.footer .footer__main__top .footer__block__content-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer__main__top .footer__block__content-list a {
  padding: 2px 0;
  color: var(--medium-gray, #565254);
}

.footer .footer__main__top .footer__block__content-list a:hover {
  color: var(--text-color, #1D191B);
}

/* Colonne « La Boutique Atelier » : horaires puis lien Itinéraire (souligné or par la règle des
   liens de texte). */
.footer .contact__hours + .contact__directions {
  margin-top: 10px;
}

.footer .contact__directions a {
  font-weight: 600;
}

/* Colonne « La Confiserie Gumuche » (a4w_footer_customtext) : le texte saisi au BO est un lot de
   blocs (liens, adresse, téléphone, labels). Son conteneur est « aplati » pour que les labels
   (.footer-labels, saisis dans le texte) et les pictos des réseaux (hors du texte) tiennent sur
   la même ligne. */
.custom-text-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.custom-text-footer__inner > .text-custom-with-logo-footer {
  display: contents;
}

.custom-text-footer__inner > .text-custom-with-logo-footer > *,
.custom-text-footer__inner > .footer-socials {
  margin: 0;
}

.custom-text-footer__inner > .text-custom-with-logo-footer > * {
  flex: 0 0 100%;
}

.custom-text-footer__inner .footer-links {
  padding: 0;
  list-style: none;
}

.custom-text-footer__inner .footer-links a {
  display: inline-block;
  padding: 2px 0;
  color: var(--medium-gray, #565254);
}

.custom-text-footer__inner .footer-links a:hover {
  color: var(--text-color, #1D191B);
}

.custom-text-footer__inner a[href^="tel:"] {
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: none;
}

.custom-text-footer__inner .footer-labels,
.custom-text-footer__inner .footer-socials {
  flex: 0 0 auto;
  margin-top: 6px;
}

.custom-text-footer__inner .footer-labels {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.custom-text-footer__inner .footer-labels img {
  display: block;
  width: auto;
  height: 44px;
}

/* Pictos des réseaux : monochromes (encre), cible de 44 px. */
.footer .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--text-color, #1D191B);
}

.footer .footer-social-link:hover {
  color: var(--accent-text-color, #8C6634);
}

.footer .footer-social-link svg {
  width: 24px;
  height: 24px;
}

/* Ligne de bas de page : © boutique à gauche, CGV et signature à droite. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--footer-border-color, #E4E3E4);
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

.footer .footer__legal p {
  margin: 0;
  color: inherit;
}

.footer__legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer .footer__legal a {
  color: var(--muted-color, #6C6A6B);
}

.footer .footer__legal a:hover {
  color: var(--text-color, #1D191B);
}

.footer .footer__legal__credit a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__legal__heart {
  vertical-align: -1px;
}

/* --- Recette du 28/10 : pied et newsletter remis à la maquette (Accueil, « Bas de page ») ---
   Ordre des colonnes de la maquette, quel que soit l'ordre des modules sur displayFooter :
   La Confiserie Gumuche (a4w_footer_customtext), La Boutique Atelier (ps_contactinfo), les listes
   de liens (ps_linklist, dont Nos produits), Votre compte (ps_customeraccountlinks). */
.footer__main__top > .footer__block {
  order: 2;
}

.footer__main__top > .block-contact {
  order: 1;
}

.footer__main__top > #custom-text-footer {
  order: 0;
}

.footer__main__top > #block-myaccount-infos {
  order: 3;
}

/* Le texte saisi (adresse, horaires, téléphone) héritait des 16 px de « p » : 14 px comme la
   maquette ; idem pour la ligne légale (12 px). */
.footer .footer__main__top .footer__block__content p,
.footer .footer__legal p {
  font-size: inherit;
}

/* a4w_footer_customtext peut insérer le bloc ps_contactinfo dans sa colonne (réglage « Afficher le
   bloc Informations ») : il ferait doublon avec la colonne « La Boutique Atelier », qui a sa place. */
#custom-text-footer .block-contact {
  display: none;
}

/* « Votre compte » : un titre, pas un lien souligné. */
.footer .footer__block__title a {
  text-decoration: none;
}

/* Liens des listes à l'encre 2 (maquette) : « #footer a » (1,0,1) l'emportait sur la règle de
   classes plus haut et les laissait à l'encre. */
#footer .footer__main__top .footer__block__content-list a,
#footer .custom-text-footer__inner .footer-links a {
  color: var(--medium-gray, #565254);
}

#footer .footer__main__top .footer__block__content-list a:hover,
#footer .custom-text-footer__inner .footer-links a:hover {
  color: var(--text-color, #1D191B);
}

/* « Itinéraire » à 10 px des horaires : la remise à zéro des marges des « p » de colonne
   (0,3,1) l'emportait sur la règle des horaires. */
.footer .footer__block__content .contact__hours + .contact__directions {
  margin-top: 10px;
}

/* Horaires (pied de page et page Contact, _partials/shop-hours.tpl) : jour en gras à l'encre,
   créneau à l'encre 2, sur deux colonnes ; une ligne libre occupe la rangée. */
.contact__hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  margin: 0;
}

/* #6721 : <dl> / <dt> / <dd> ; on annule les marges et la graisse par défaut de Bootstrap. */
.contact__hours dd {
  margin: 0;
}

.contact__hours abbr[title] {
  text-decoration: none;
  cursor: inherit;
}

.contact__hours-day {
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

.contact__hours-line {
  grid-column: 1 / -1;
  font-weight: inherit;
}

/* Filets : un filet sur toute la largeur en haut du pied ; entre la newsletter et les colonnes,
   un filet à la largeur du contenu (posé par la newsletter), plus celui du pied principal. */
#footer {
  border-top: 1px solid var(--footer-border-color, #E4E3E4);
}

.footer .footer__main {
  border-top: 0;
}

/* Newsletter (ps_emailsubscription, surcharge du thème). */
.footer__before .email-subscription {
  padding: 0;
}

/* theme.css (hummingbird) bornait le bloc à 906 px centrés : il prend la largeur du conteneur. */
.footer__before .email-subscription .email-subscription__content {
  max-width: none;
  margin: 0;
}

.email-subscription__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 36px 0;
  border-bottom: 1px solid var(--footer-border-color, #E4E3E4);
}

.email-subscription__intro {
  flex: 1 1 380px;
  min-width: 0;
}

.footer .email-subscription__label {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: 600;
  line-height: 1.3;
}

.footer .email-subscription__lead {
  margin: 4px 0 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.email-subscription__form {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 520px;
  margin: 0;
}

.email-subscription__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-subscription__inputs .form-control {
  flex: 1 1 200px;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: #FFFFFF;
  color: var(--text-color, #1D191B);
  font-size: 1rem;
}

.email-subscription__inputs .form-control::placeholder {
  color: var(--muted-color, #6C6A6B);
  opacity: 1;
}

.email-subscription__inputs .btn {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 10px 24px;
}

.footer .email-subscription__infos p {
  margin: 8px 0 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

.footer .email-subscription__conditions a {
  color: inherit;
  font-weight: 400;
}

/* GEN-08 — Mobile uniquement (≤ 767.98 px) : les quatre colonnes deviennent des accordéons
   fermés par défaut ; la newsletter reste au-dessus et la ligne légale reste visible. */
@media (max-width: 767.98px) {
  .footer__main__top.row {
    --bs-gutter-x: 0;
    display: block;
    margin: 0;
    padding: 8px 0 24px;
  }

  .footer__main__top.row > * {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .footer .footer__main__top > .footer__block {
    margin-bottom: 0;
    border-bottom: 1px solid var(--footer-border-color, #E4E3E4);
  }

  .footer .footer__block__toggle {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--footer-title-color, #1D191B);
    font: inherit;
    text-align: left;
    cursor: pointer;
    gap: 16px;
  }

  .footer .footer__block__toggle:focus-visible {
    outline: 2px solid var(--accent-ink-color, #1D191B);
    outline-offset: 2px;
  }

  .footer .footer__block__toggle .footer__block__title {
    margin: 0;
  }

  .footer .footer__main__top .footer__block__content {
    padding-bottom: 20px;
  }

  /* Chevron qui pivote (maquette) à la place du « + / − » des autres accordéons : masque rempli
     en currentColor, comme le motif --a4w-toggle-* ci-dessus. */
  .footer .footer__block__toggle i,
  .footer .footer__block__toggle:not(.collapsed) i {
    --a4w-footer-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask: var(--a4w-footer-chevron) center / contain no-repeat;
    mask: var(--a4w-footer-chevron) center / contain no-repeat;
    transform: none;
    transition: transform 0.2s ease;
  }

  .footer .footer__block__toggle:not(.collapsed) i {
    transform: rotate(180deg);
  }

  /* Cibles de 44 px. */
  .footer .footer__main__top .footer__block__content-list a,
  .custom-text-footer__inner .footer-links a,
  .custom-text-footer__inner .text-custom-with-logo-footer p a,
  .footer .contact__directions a,
  .footer__legal__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer .footer__main__top .footer__block__content-list a {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer__block__toggle i {
    transition: none;
  }
}

/* === Charte v2 — GEN-09 Corrections mobiles transverses (refs#6694) ===
   Mobile uniquement : rien ne change au-dessus de 767.98 px (gouttières : au-dessus de 575.98 px).
   Gouttières : la maquette passe à 16 px à 600 px (Design-System : 40 px desktop / 16 px mobile) ;
   point de rupture du thème le plus proche : 575.98 px. Entre 576 et 767.98 px la maquette garde
   encore 40 px, on ne touche donc à rien.
   Ce qui pose réellement la marge : le padding du .container Bootstrap (--bs-gutter-x / 2 = 12 px,
   non réglé par --a4w-container-gutter) et, pour les blocs a4w_* qui se centrent seuls, la largeur
   calc(100% - var(--a4w-container-gutter)). */
@media (max-width: 575.98px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Blocs qui lisent --a4w-container-gutter (carrousel, populaires, similaires...) : 2 × 16 px.
     Posé sur body (pas de :root nouveau) ; le jeton du premier :root reste à 40 px au-dessus. */
  body {
    --a4w-container-gutter: 32px;
  }
}

@media (max-width: 767.98px) {
  /* Tableaux du compte (historique, détail, avoirs, bons) : en attendant les cartes de CPT-07,
     un tableau trop large défile dans son cadre au lieu d'élargir la page. */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mes listes : un nom ou un libellé long sans espace ne doit pas élargir la carte. */
  .a4w-mylists__name,
  .a4w-mylists__meta,
  .a4w-mylists-layout .page-header h1 {
    overflow-wrap: anywhere;
  }

  /* Le libellé d'une déclinaison peut être long : il passe à la ligne au lieu de pousser. */
  .product__variants .variant .form-label {
    white-space: normal;
  }

  /* Filet de sécurité : tout ce qui dépasse encore est rogné à la largeur de l'écran au lieu de
     créer un défilement horizontal de la page. `clip` (et non `hidden`) ne crée pas de conteneur
     de défilement : `position: sticky` continue de fonctionner et les panneaux `fixed` ne sont
     pas coupés. Ne dispense pas de corriger la cause : à retirer pour mesurer. */
  body {
    overflow-x: clip;
  }

  /* Textes de 12 px au minimum (capitales, légendes, pastilles). Le méga-menu descendait à
     11 px : mêmes sélecteurs que les siens, le thème est chargé après (priorité 1000), à
     reprendre dans a4w_megamenu à sa prochaine évolution. Les autres modules d'abord visés
     ici sont corrigés à la source (instagram 1.0.3, pre_header 1.7.0, productbundle 2.0.0,
     recipe 1.8.0, tagproduct 2.3.3) : leurs sélecteurs ont été retirés. */
  .header-block__badge {
    font-size: 0.75rem;
    height: 1.5em;
    min-width: 1.5em;
    line-height: 1.5;
  }

  .noui-value-sub,
  .a4w-megamenu .menu-item-count,
  .a4w-megamenu .mg-title,
  .a4w-megamenu .mg-title-parent > .mg-title {
    font-size: 0.75rem;
  }
}

/* === Charte v2 — TUN-01 Panier : ligne en promotion (refs#6694) ===
   Desktop et mobile. Prix unitaire de la ligne en légende, comme la maquette (« 29,65 € l'unité »,
   encre 2) ; produit remisé : badge « −10 % » framboise (blanc sur #A33362 : 6,55:1, AA en petit
   texte), prix de base barré (encre 3 sur blanc : 5,37:1) à côté du prix remisé (encre, semi-gras).
   Le total de la ligne n'affiche que le prix remisé. Récapitulatif (panier et tunnel) : la ligne
   de remise reste à l'encre, la framboise est réservée aux badges.
   theme.css passe tous les span de .product-line__current en 600 et .price en 700 : remis à 400
   ici, d'où les sélecteurs à trois classes du badge et du prix remisé (0,3,0 > 0,2,1). */
.cart__item .product-line__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--medium-gray, #565254);
  font-variant-numeric: tabular-nums;
}

.cart__item .product-line__current span {
  font-weight: 400;
}

.cart__item .product-line__current .price {
  color: inherit;
}

.cart__item .product-line__current .product-line__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--promo-color, #A33362);
  color: var(--white-color, #FFFFFF);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.cart__item .product-line__current .product-line__regular {
  color: var(--muted-color, #6C6A6B);
  text-decoration: line-through;
}

.cart__item .product-line__prices--promo .price {
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

.cart__item .product-line__total {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-summary__line--discount,
.cart-summary__line--discount .cart-summary__label,
.cart-summary__line--discount .cart-summary__value {
  color: var(--text-color, #1D191B);
}

/* === Charte v2 — TUN-03 Panier mobile : ordre et bouton collant (refs#6694) ===
   Mobile uniquement (≤ 767.98 px) ; au-dessus, rien ne change : le bouton collant reste en
   display: none et .cart-grid__mobile-after reste vide (custom.js n'y range les blocs que sous
   767.98 px et les remet à leur place au-dessus).
   Ordre : articles → récapitulatif → « Mis de côté » (TUN-02) → ajout rapide → « Continuer mes
   achats ». Écarts de la maquette : 32 px entre blocs, 48 px avant « Mis de côté ».
   Bouton « Commander · total » : visible tant que le bouton du récapitulatif est sous l'écran,
   masqué dès qu'il y entre ; sa hauteur est réservée (bas de page, défilement vers un champ). */

/* Zone « Mis de côté » (hook displayShoppingCartSavedForLater) : vide, elle n'existe pas. */
.cart-grid__saved:empty {
  display: none;
}

/* Inactif partout tant que custom.js ne l'a pas armé (panier commandable). */
.cart-sticky-checkout {
  display: none;
}

@media (max-width: 767.98px) {
  .cart-grid__mobile-after {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  .cart-grid__mobile-after:not(:empty) {
    margin-top: 32px;
  }

  .cart-grid__mobile-after > .cart-grid__saved {
    align-self: stretch;
    margin-top: 16px;
  }

  /* Ajout rapide (a4w_cartsearch) : pleine largeur, l'écart vient du gap (le module pose 32 px
     en bas). */
  .cart-grid__mobile-after > .a4w-cs {
    align-self: stretch;
    margin: 0;
  }

  .cart-sticky-checkout.is-active {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background-color: var(--background-color, #FFFFFF);
    border-top: 1px solid var(--border-color, #E4E3E4);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .cart-sticky-checkout.is-active.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  .cart-sticky-checkout__btn {
    width: 100%;
  }

  /* Hauteur réservée (mesurée par custom.js) : un champ qui prend le focus défile au-dessus de
     la barre, et le bas de la page n'est jamais sous elle. */
  html.has-cart-sticky-checkout {
    scroll-padding-bottom: var(--cart-sticky-checkout-height, 83px);
  }

  html.has-cart-sticky-checkout #wrapper {
    padding-bottom: var(--cart-sticky-checkout-height, 83px);
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .cart-sticky-checkout.is-active,
  .cart-sticky-checkout.is-active.is-shown {
    transition: none;
  }
}

/* === Charte v2 — TUN-04 Tunnel : en-tête et pied allégés, drawer latéral (refs#6694) ===
   En-tête (checkout-header.tpl) : retour au panier, logo 56 px, « Paiement sécurisé », téléphone.
   Pied (checkout-footer.tpl) : © boutique et quatre liens légaux qui ouvrent le drawer.
   Drawer (components/drawer.tpl, window.a4wDrawer dans custom.js) : composant générique, réutilisé
   par TUN-05 (choix d'adresse). Les sélecteurs d'en-tête et de pied portent #header / #footer : les
   règles « #header a » et « .footer a » du thème (couleur des liens) ont sinon l'avantage. */

/* --- En-tête du tunnel --- */
.checkout-header {
  background-color: var(--background-color, #FFFFFF);
}

.checkout-header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

#header .checkout-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  text-decoration: none;
}

#header .checkout-header__back:hover {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.checkout-header__logo {
  display: flex;
  justify-content: center;
}

.checkout-header__logo .navbar-brand {
  padding: 0;
}

.checkout-header__logo img.logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: 56px;
  max-height: none;
}

.checkout-header__aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.checkout-header__secure,
#header .checkout-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.checkout-header__secure {
  color: var(--medium-gray, #565254);
}

#header .checkout-header__phone {
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: none;
}

#header .checkout-header__phone:hover {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.checkout-header__icon {
  flex: none;
}

/* --- Pied du tunnel --- */
#footer .checkout-footer {
  border-top: 1px solid var(--border-color, #E4E3E4);
  color: var(--muted-color, #6C6A6B);
  font-size: 0.8125rem;
}

.checkout-footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  padding-bottom: 24px;
}

#footer .checkout-footer__copy {
  margin: 0;
  color: inherit;
}

.checkout-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .checkout-footer__link {
  display: inline-flex;
  align-items: center;
  color: var(--muted-color, #6C6A6B);
  text-decoration: none;
}

#footer .checkout-footer__link:hover {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 3px;
}

/* --- Drawer latéral générique (.a4w-drawer) ---
   Caché par visibility (et non display) pour que la glissade de sortie se joue. z-index 1080 : au-
   dessus des modales (1055), du voile Bootstrap (1050), de la barre collante du panier (1030) ;
   son voile est le sien. */
.a4w-drawer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.a4w-drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}

.a4w-drawer [hidden] {
  display: none !important;
}

.a4w-drawer__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay-bg-color, rgba(29, 25, 27, 0.45));
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.a4w-drawer.is-open .a4w-drawer__overlay {
  opacity: 1;
}

.a4w-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  background-color: var(--background-color, #FFFFFF);
  box-shadow: -1px 0 0 var(--border-color, #E4E3E4);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  outline: none;
}

.a4w-drawer.is-open .a4w-drawer__panel {
  transform: none;
}

.a4w-drawer__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.a4w-drawer__title {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}

.a4w-drawer__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-color, #1D191B);
  cursor: pointer;
}

.a4w-drawer__close:hover {
  background-color: var(--light-bg, #FAF7F4);
}

.a4w-drawer__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.a4w-drawer__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.a4w-drawer__content {
  height: 100%;
  padding: 20px 24px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.a4w-drawer__loading {
  position: absolute;
  top: 40px;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--medium-gray, #565254);
}

.a4w-drawer__foot {
  flex: none;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.a4w-drawer__foot-close {
  width: 100%;
}

/* Page bloquée derrière le drawer ; la largeur de la barre de défilement est compensée. */
html.a4w-drawer-open,
html.a4w-drawer-open body {
  overflow: hidden;
}

html.a4w-drawer-open {
  padding-right: var(--a4w-drawer-scrollbar, 0px);
}

@media (max-width: 575.98px) {
  .a4w-drawer__head {
    padding-left: 16px;
  }

  .a4w-drawer__content {
    padding-right: 16px;
    padding-left: 16px;
  }

  .a4w-drawer__foot {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a4w-drawer,
  .a4w-drawer__overlay,
  .a4w-drawer__panel {
    transition: none;
  }
}

/* Page CMS chargée dans le drawer (?content_only=1, layout-content-only.tpl) : le titre de la page
   est celui du drawer, il reste lu mais n'est plus affiché ; marges latérales (pas de .container). */
body#cms .wrapper__content-content-only .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrapper__content-content-only {
  padding-right: 24px;
  padding-left: 24px;
}

@media (max-width: 575.98px) {
  .wrapper__content-content-only {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* === Charte v2 — TUN-08 Tunnel mobile : barre « Voir ma commande », en-tête compact (refs#6694) ===
   Mobile uniquement (≤ 767.98 px) ; au-dessus, rien ne change (la barre porte d-md-none, le bouton
   d'origine « Récapitulatif de la commande » reste pour 768-991 px, les classes de grille d'origine
   s'appliquent). Sous 768 px : la section #js-checkout-summary (repliée par défaut) passe en tête de
   la grille, juste sous la barre ; la réassurance reste en bas. */
.checkout-summary-bar__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--text-color, #1D191B);
  font: inherit;
  text-align: left;
}

.checkout-summary-bar {
  border-bottom: 1px solid var(--border-color, #E4E3E4);
  background-color: var(--background-color, #FFFFFF);
}

.checkout-summary-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.checkout-summary-bar__chevron {
  flex: none;
  transition: transform 0.2s ease;
}

.checkout-summary-bar__toggle[aria-expanded="true"] .checkout-summary-bar__chevron {
  transform: rotate(180deg);
}

.checkout-summary-bar__total {
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
  /* En-tête compact : flèche seule (libellé lu, non affiché), logo 44 px, cadenas, téléphone. */
  .checkout-header__in {
    gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .checkout-header__back-label,
  .checkout-header__secure-label,
  .checkout-header__phone-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #header .checkout-header__back,
  #header .checkout-header__phone {
    justify-content: center;
    min-width: 44px;
  }

  .checkout-header__aside {
    gap: 4px;
  }

  .checkout-header__secure {
    min-width: 28px;
    justify-content: center;
  }

  .checkout-header__logo img.logo {
    height: 44px;
  }

  /* Pied : cibles de 44 px. */
  .checkout-footer__in {
    gap: 8px 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  #footer .checkout-footer__link {
    min-height: 44px;
  }

  /* Grille : récapitulatif (replié) en tête, formulaire, puis réassurance. Le conteneur de droite
     disparaît de la grille (display: contents) : ses deux enfants deviennent des éléments de la
     ligne, avec les gouttières que .row > * leur donnait. */
  .checkout-grid {
    padding-top: 16px;
  }

  .checkout-grid .cart-grid-right {
    display: contents;
  }

  .checkout-grid .checkout-summary,
  .checkout-grid .checkout-reassurance {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  }

  .checkout-grid .checkout-summary {
    order: -1;
  }

  .checkout-grid .checkout-summary .accordion-item {
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkout-summary-bar__chevron {
    transition: none;
  }
}

/* === Charte v2 — TUN-05 Adresses : adresse retenue + drawer (refs#6694) ===
   Étape Adresses du tunnel : seule l'adresse retenue est affichée (.a4w-addr), la liste est dans le
   drawer (a4wDrawer, TUN-04). Gabarits : address-chooser.tpl, address-selector-block.tpl ; le
   comportement est dans custom.js (« TUN-05 »). Sans JavaScript, .is-enhanced n'est jamais posée :
   la liste reste en ligne avec ses radios visibles. */
.a4w-addr {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--background-color, #FFFFFF);
}

.a4w-addr + .a4w-addr {
  margin-top: 16px;
}

.a4w-addr__cap {
  margin: 0;
  color: var(--muted-color, #6C6A6B);
  font-family: var(--font-family-base, 'Noto Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.a4w-addr__current address,
.a4w-addr-card address {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-style: normal;
  line-height: 1.6;
}

.a4w-addr-card__alias {
  display: block;
  color: var(--text-color, #1D191B);
  font-weight: 700;
  line-height: 1.6;
}

.a4w-addr__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 4px;
}

.a4w-addr__edit,
.a4w-addr-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.a4w-addr__edit:hover,
.a4w-addr-card__link:hover {
  color: var(--text-color, #1D191B);
  text-decoration-color: var(--text-color, #1D191B);
  text-decoration-thickness: 2px;
}

.a4w-addr__edit[hidden] {
  display: none;
}

/* Liste (en ligne sans JavaScript, dans le drawer sinon). */
.a4w-addr__picker,
.a4w-addr__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.a4w-addr-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--background-color, #FFFFFF);
  transition: border-color 150ms ease;
}

.a4w-addr-card:hover {
  border-color: var(--input-border-color, #8E8C8D);
}

.a4w-addr-card.is-selected {
  padding: 19px;
  border: 2px solid var(--text-color, #1D191B);
}

.a4w-addr-card__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.a4w-addr-card__radio {
  flex: none;
  margin-top: 4px;
  accent-color: var(--text-color, #1D191B);
}

.a4w-addr-card__text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.a4w-addr-card__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.a4w-addr-card__choose,
.a4w-addr-card__badge {
  display: none;
}

.a4w-addr-card__badge {
  color: var(--accent-text-color, #8C6634);
  font-size: 0.875rem;
  font-weight: 600;
}

.a4w-addr__add {
  width: 100%;
}

/* Mode enhanced par custom.js : adresse retenue seule dans la page, radios remplacées par le
   bouton « Choisir cette adresse ». */
.a4w-addr.is-enhanced > .a4w-addr__picker {
  display: none;
}

.a4w-addr__picker.is-enhanced .a4w-addr-card__radio {
  display: none;
}

.a4w-addr__picker.is-enhanced .a4w-addr-card__choose {
  display: inline-flex;
}

.a4w-addr__picker.is-enhanced .a4w-addr-card.is-selected .a4w-addr-card__badge {
  display: inline-block;
}

.a4w-addr__picker.is-enhanced .a4w-addr-card__choose[aria-pressed="true"] {
  background-color: var(--pressed-bg-color, #F0EAE4);
}

@media (max-width: 575.98px) {
  .a4w-addr {
    padding: 20px 16px;
  }

  .a4w-addr__change {
    width: 100%;
  }
}

/* === Charte v2 — TUN-06 Paiement : bouton, mentions, rappel Livraison / Facturation (refs#6694) ===
   Gabarits : steps/payment.tpl, cart-summary.tpl. Le bouton reste le bouton du cœur
   (#payment-confirmation button) : seul l'habillage change (achat encre, cadenas, total TTC). */
.payment__secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  line-height: 1.5;
}

.payment__secure-icon {
  flex: 0 0 auto;
  color: var(--link-decoration-color, #B68A56);
}

.payment__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.payment__submit-icon {
  flex: 0 0 auto;
}

/* Mention des CGV (a4w_terms), sous la rangée d'actions, hors de #payment-confirmation. */
.payment__terms .a4w-terms {
  margin: 12px 0 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: right;
}

.payment__terms .a4w-terms a {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 3px;
}

.payment__terms .a4w-terms a:hover {
  text-decoration-color: var(--text-color, #1D191B);
}

.payment__terms .a4w-terms a:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .payment__terms .a4w-terms {
    text-align: center;
  }
}

/* Rappel Livraison / Facturation du récapitulatif (latéral et barre repliable mobile). */
.cart-summary__recap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Le bloc porte un border-top sans padding : le libelle LIVRAISON etait
     colle au trait. */
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.cart-summary__recap-label {
  margin: 0 0 2px;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cart-summary__recap-text {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  line-height: 1.5;
}

.cart-summary__recap-edit {
  display: inline;
  min-height: 24px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color, #1D191B);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart-summary__recap-edit:hover {
  text-decoration-color: var(--text-color, #1D191B);
}

.cart-summary__recap-edit:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .cart-summary__recap-edit {
    min-height: 44px;
  }
}

/* === Charte v2 — TUN-07 Confirmation de commande : une colonne (refs#6694) ===
   Gabarit : checkout/order-confirmation.tpl. Colonne de 760 px centrée, sans bouton facture. */
.order-confirmation__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0 64px;
}

@media (min-width: 768px) {
  .order-confirmation__inner {
    padding-top: 56px;
    padding-bottom: 96px;
  }
}

.order-confirmation__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--alert-success-bg-color, #EEF5F1);
  color: var(--alert-success-color, #2F6B4F);
}

.order-confirmation__title {
  margin: 20px 0 0;
  font-family: var(--font-family-title, Gelasio, Georgia, serif);
  font-size: var(--font-size-h1, 2rem);
  font-weight: 600;
  line-height: 1.15;
}

.order-confirmation__lead {
  margin: 8px 0 0;
  color: var(--medium-gray, #565254);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.order-confirmation__lead strong {
  color: var(--text-color, #1D191B);
}

.order-confirmation__section-title {
  margin: 0;
  font-family: var(--font-family-title, Gelasio, Georgia, serif);
  font-size: var(--font-size-h3, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
}

.order-confirmation__next {
  padding: 24px;
  border: 1px solid var(--light-bg, #FAF7F4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
}

.order-confirmation__next-list {
  margin: 16px 0 0;
  padding-left: 20px;
  color: var(--medium-gray, #565254);
  line-height: 1.7;
}

.order-confirmation__next-list strong {
  color: var(--text-color, #1D191B);
}

.order-confirmation__hours {
  display: block;
  font-size: 0.875rem;
}

.order-confirmation__box {
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--background-color, #FFFFFF);
}

.order-confirmation__details .order-confirmation__box {
  margin-top: 16px;
}

.order-confirmation__account-transformation {
  padding: 24px;
}

.order-confirmation__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  margin: 0;
  padding: 20px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.order-confirmation__meta dt {
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  font-weight: 400;
}

.order-confirmation__meta dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.order-confirmation__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-confirmation__item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 20px;
}

.order-confirmation__item + .order-confirmation__item {
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.order-confirmation__thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--border-radius, 3px);
}

.order-confirmation__item-name {
  display: block;
  font-family: var(--font-family-title, Gelasio, Georgia, serif);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
}

.order-confirmation__item-meta {
  display: block;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.order-confirmation__item-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.order-confirmation__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 0;
  margin: 0;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--border-color, #E4E3E4);
  font-variant-numeric: tabular-nums;
}

.order-confirmation__totals dt {
  color: var(--medium-gray, #565254);
  font-weight: 400;
}

.order-confirmation__totals dd {
  margin: 0;
  padding-left: 24px;
  text-align: right;
}

.order-confirmation__totals .order-confirmation__totals-big {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #E4E3E4);
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, Gelasio, Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.order-confirmation__totals .order-confirmation__totals-vat {
  grid-column: 1 / -1;
  padding-left: 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

.order-confirmation__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.order-confirmation__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.order-confirmation__link:hover {
  text-decoration-color: var(--text-color, #1D191B);
}

.order-confirmation__link:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

@media (max-width: 575.98px) {
  .order-confirmation__item {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .order-confirmation__thumb img {
    width: 56px;
    height: 56px;
  }

  .order-confirmation__item-total {
    grid-column: 2;
  }

  .order-confirmation__actions .btn {
    width: 100%;
  }
}

/* === Charte v2 — CAT-05 Fiche produit mobile : ordre, réassurance, barre d'achat (refs#6694) ===
   MOBILE UNIQUEMENT (≤ 767.98 px) : au-dessus rien ne change.
   Ordre : galerie → titre, description courte, déclinaisons, quantité + bouton → réassurance →
   accordéons. La colonne images + accordéons (.product__left) se « dissout » (display: contents) :
   ses deux enfants deviennent des éléments de la ligne et sont ordonnés par `order`, sans toucher
   au DOM (les blocs que le cœur réaffiche restent en place). Hors de .row, ces enfants perdent la
   règle `.row > *` de Bootstrap : largeur, gouttière et écart vertical sont redonnés ici.
   Barre d'achat (product.tpl + initProductBuyBar dans custom.js) : réservée à ce palier. */
.product-buybar {
  display: none;
}

@media (max-width: 767.98px) {
  #product .product.js-product-container > .product__left {
    display: contents;
  }

  #product .product.js-product-container > .product__left > .product__images,
  #product .product.js-product-container > .product__left > .product__infos {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    margin-top: var(--bs-gutter-y, 0);
  }

  #product .product.js-product-container > .product__left > .product__images {
    order: 1;
  }

  #product .product.js-product-container > .product__col {
    order: 2;
  }

  #product .product.js-product-container > .product__left > .product__infos {
    order: 3;
  }

  /* Quantité + bouton sur UNE ligne : la quantité à sa largeur utile, le bouton prend le reste. */
  .product__actions .product-actions__quantity {
    flex: 0 0 auto;
    width: auto;
  }

  .product__actions .product-actions__button {
    min-width: 0;
  }

  /* Réassurance : une ligne par item (au lieu de 2 × 2). */
  .blockreassurance_product .reassurance-product-page .reassurance-block-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }

  /* --- Barre d'achat collante (même motif que le « Commander · total » du panier, TUN-03) --- */
  .product-buybar.is-active {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background-color: var(--background-color, #FFFFFF);
    border-top: 1px solid var(--border-color, #E4E3E4);
    box-shadow: 0 -4px 16px color-mix(in srgb, var(--text-color, #1D191B) 6%, transparent);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }

  .product-buybar.is-active.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.3s ease, visibility 0s;
  }

  .product-buybar__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .product-buybar__name {
    overflow: hidden;
    color: var(--text-color, #1D191B);
    font-family: var(--font-family-title, serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-buybar__variant {
    overflow: hidden;
    color: var(--medium-gray, #565254);
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-buybar__variant:empty {
    display: none;
  }

  .product-buybar__btn {
    flex: 0 0 auto;
    gap: 8px;
    min-height: 48px;
    padding: 10px 18px;
    font-size: 1rem;
    white-space: nowrap;
  }

  /* Hauteur réservée en bas de page tant que la barre est affichée (mesurée par custom.js) :
     le pied de page n'est jamais sous elle, un champ qui prend le focus défile au-dessus. */
  html.has-product-buybar {
    scroll-padding-bottom: var(--product-buybar-height, 72px);
  }

  html.has-product-buybar-shown #wrapper {
    padding-bottom: var(--product-buybar-height, 72px);
  }
}

/* Sous 575.98 px : « Qté » n'est plus affiché mais reste lu par les lecteurs d'écran, pour que
   « Ajouter au panier · 25,50 € » tienne sur une ligne. */
@media (max-width: 575.98px) {
  .quantity-select__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Bouton compact (comme la maquette : 17 px, marges réduites, sans pictogramme) pour tenir sur une ligne. */
  .product__actions .add-to-cart--with-price {
    gap: 8px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 1.0625rem;
  }

  .product__actions .add-to-cart--with-price > .material-icons {
    display: none;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .product-buybar.is-active,
  .product-buybar.is-active.is-shown {
    transition: none;
  }
}
/* === Charte v2 — CAT-08 Cartes produit : image carrée, 2e photo, pastilles, prix, encart, FAQ (refs#6694) ===
   Concerne toutes les listes qui incluent catalog/_partials/miniatures/product.tpl (catégorie,
   recherche, meilleures ventes, accueil, blocs de modules). AUCUN zoom : le parent agrandit l'image
   de 10 % au survol (theme.css), neutralisé ici avec le même sélecteur. Pastilles : promotion =
   blanc sur framboise (--promo-color, 6,55:1) ; toutes les autres = encre sur crème avec filet
   (--text-color sur --light-bg, plus de 15:1). Les drapeaux a4w_tagproduct (.a4w-flag) gardent
   les couleurs saisies en BO (attribut style), seule la géométrie est alignée. */
.products.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 3rem;
}

.product-miniature {
  margin-bottom: 0;
}

.product-miniature .card {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.product-miniature .product-miniature__link {
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.product-miniature .product-miniature__image-container {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
  transition: none;
}

.product-miniature .product-miniature__link:hover .product-miniature__image-container {
  border-radius: var(--border-radius, 3px);
}

.product-miniature .product-miniature__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: none;
}

/* Jamais de zoom (même sélecteur que theme.css, chargé avant). */
.product-miniature .product-miniature__link:hover .product-miniature__image {
  transform: none;
}

/* 2e photo : masquée partout, affichée en fondu au survol d'une souris (écran tactile : jamais,
   elle n'est même pas téléchargée). Sans transition si l'utilisateur réduit les animations. */
.product-miniature .product-miniature__image-alt-picture {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-miniature .product-miniature__image-alt-picture {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .product-miniature .product-miniature__image-alt {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-miniature:hover .product-miniature__image-alt-picture,
  .product-miniature .product-miniature__link:focus-visible .product-miniature__image-alt-picture {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-miniature .product-miniature__image-alt-picture {
    transition: none;
  }
}

/* Sans photo : fond crème et « Photo à venir » (aucune image externe). Le macaron Gumuche, quand
   le fichier sera fourni, se règle ici (background-image du .product-miniature__placeholder). */
.product-miniature .product-miniature__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: var(--light-bg, #FAF7F4);
  text-align: center;
}

.product-miniature .product-miniature__placeholder-text {
  color: var(--medium-gray, #565254);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Pastilles, en haut à gauche de l'image, empilées. */
.product-miniature .product-flags {
  top: 12px;
  left: 12px;
  z-index: 2;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 6px;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.product-miniature .product-flags .badge,
.product-miniature .product-flags .a4w-flag:not(.a4w-flag-image) {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
  box-shadow: none;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-base, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: none;
}

.product-miniature .product-flags .badge.discount {
  border-color: var(--promo-color, #A33362);
  background-color: var(--promo-color, #A33362);
  color: var(--white-color, #FFFFFF);
  letter-spacing: 0.1em;
}

.product-miniature .product-flags .a4w-flag:not(.a4w-flag-image) {
  border-color: transparent;
}

/* Texte sous l'image : nom, puis prix (barré + remisé, ou « dès » quand un module le fournit). */
.product-miniature .product-miniature__infos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 0;
  background-color: transparent;
}

.product-miniature .product-miniature__title-link {
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.product-miniature .product-miniature__title {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}

.product-miniature:hover .product-miniature__title {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.product-miniature .product-miniature__prices {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0 8px;
  padding: 0;
  text-align: left;
}

.product-miniature .product-miniature__price {
  margin-right: 0 !important;
  color: var(--text-color, #1D191B);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.product-miniature .product-miniature__price-from {
  color: var(--medium-gray, #565254);
  font-weight: 400;
}

.product-miniature .product-miniature__regular-price {
  color: var(--muted-color, #6C6A6B);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: left;
  text-decoration: line-through;
}

/* Produit non commandable (« Bientôt disponible ») : prix discret. */
.product-miniature:has(.product-flag--unavailable) .product-miniature__price {
  color: var(--muted-color, #6C6A6B);
  font-weight: 400;
}

/* Encart publicitaire de la grille (a4w_ads, injecté par son script dans une cellule de produit) :
   carte de la maquette — fond rose signature, image en haut, texte dessous, appel « texte + ligne ».
   Le module dessine une affiche (image en fond, voile, bouton blanc) ; le thème la remet au style
   du site, sans toucher au module. Contenu, lien, position et largeur (1 colonne) : BO a4w_ads.
   Les couleurs saisies en BO s'écrivent en ligne sur le titre et le texte : les laisser vides. */
.products > [data-a4-injected] {
  display: flex;
}

.products > [data-a4-injected] .a4w-ad {
  flex-direction: column;
  width: 100%;
  min-height: 0;
  border-radius: var(--border-radius, 3px);
  background-color: var(--tertiary-color, #FFEAF7);
  box-shadow: none;
  color: var(--text-color, #1D191B);
}

/* L'image garde sa hauteur naturelle (220 px au plus) : c'est le texte qui prend le reste de la carte,
   centré dans la hauteur (refs#6723). Sans image, le texte est centré dans toute la carte. */
.products > [data-a4-injected] .a4w-ad__picture {
  position: static;
  display: block;
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
}

.products > [data-a4-injected] .a4w-ad__img {
  max-height: 220px;
  mix-blend-mode: multiply;
}

.products > [data-a4-injected] .a4w-ad__overlay {
  position: static;
  flex: 1 1 auto;
  justify-content: center;
  gap: 6px;
  padding: 20px 20px 24px;
  background: none;
  color: var(--text-color, #1D191B);
}

/* Alignement horizontal choisi en BO (« Position du texte » : gauche, centre, droite) : le thème
   l'imposait à gauche (refs#6723). Titre, texte et bouton suivent ensemble. */
.products > [data-a4-injected] .a4w-ad--align-left .a4w-ad__overlay {
  align-items: flex-start;
  text-align: left;
}

.products > [data-a4-injected] .a4w-ad--align-center .a4w-ad__overlay {
  align-items: center;
  text-align: center;
}

.products > [data-a4-injected] .a4w-ad--align-right .a4w-ad__overlay {
  align-items: flex-end;
  text-align: right;
}

.products > [data-a4-injected] .a4w-ad__title {
  font-family: var(--font-family-title, serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.products > [data-a4-injected] .a4w-ad__text {
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  line-height: 1.5;
}

.products > [data-a4-injected] .a4w-ad__text p {
  margin: 0;
}

.products > [data-a4-injected] .a4w-ad__cta {
  position: relative;
  z-index: 3;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-color, #1D191B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.products > [data-a4-injected] .a4w-ad__cta::after {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background-color: currentColor;
  transition: width 0.2s ease;
}

.products > [data-a4-injected] .a4w-ad__cta:hover,
.products > [data-a4-injected] .a4w-ad__cta:focus-visible {
  background: none;
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.products > [data-a4-injected] .a4w-ad:hover .a4w-ad__cta::after,
.products > [data-a4-injected] .a4w-ad__cta:focus-visible::after {
  width: 40px;
}

.products > [data-a4-injected] .a4w-ad__cta:focus-visible,
.products > [data-a4-injected] .a4w-ad__link:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .products > [data-a4-injected] .a4w-ad__cta::after {
    transition: none;
  }
}

/* Description de la catégorie : deux tiers de la largeur au plus (retour du 28/10 ; la maquette
   borne l'intro à 760 px). Toute la largeur sous 768 px. Plafond de 856 px (sa largeur à 1440 px) :
   le conteneur s'élargit sur grand écran et les lignes dépassaient 120 caractères. */
@media (min-width: 768px) {
  .block-category #category-description,
  .block-category #category-additional-description {
    max-width: min(calc(100% * 2 / 3), 856px);
  }
}

/* Description longue sous la FAQ (refs#6722, retour du 08/11) : même écart que la FAQ. */
.block-category--after-faq {
  margin-top: 64px;
}

/* FAQ de la catégorie (a4w_faq) : titre + « une autre question ? » à gauche, questions à droite
   (≥ 992 px) ; une colonne en dessous. Espace entre sections 96 px desktop / 64 px mobile. Le
   surtitre du module est masqué (redondant avec le titre). */
.a4w-category-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "title"
    "help"
    "list";
  align-items: start;
  gap: 0;
  margin-top: 64px;
}

.a4w-category-faq .a4w-faq {
  display: contents;
}

.a4w-category-faq .a4w-faq__kicker {
  display: none;
}

.a4w-category-faq .a4w-faq__title {
  grid-area: title;
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, serif);
  font-size: var(--font-size-h2, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

.a4w-category-faq .a4w-faq-list {
  grid-area: list;
  margin-top: 24px;
}

.a4w-category-faq__help {
  grid-area: help;
  margin: 8px 0 0;
  color: var(--medium-gray, #565254);
  line-height: 1.6;
}

.a4w-category-faq__phone {
  font-weight: 600;
  white-space: nowrap;
}

.a4w-category-faq__link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.a4w-category-faq__link:hover {
  text-decoration-color: var(--text-color, #1D191B);
  text-decoration-thickness: 2px;
}

.a4w-category-faq .a4w-faq .faq-item {
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.a4w-category-faq .a4w-faq .faq-item:last-child {
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.a4w-category-faq .a4w-faq .faq-header {
  min-height: 60px;
  padding: 12px 0;
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.a4w-category-faq .a4w-faq .faq-content {
  padding: 0 0 24px;
  color: var(--medium-gray, #565254);
  line-height: 1.65;
}

@media (min-width: 992px) {
  .a4w-category-faq {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "title list"
      "help list";
    column-gap: 64px;
    margin-top: 96px;
  }

  .a4w-category-faq .a4w-faq-list {
    margin-top: 0;
  }
}

/* Fiche produit (a4w_faq greffé sur displayFooterProduct, product.tpl) : la FAQ suit « Nos
   parfums » ; les blocs suivants (Découvrez aussi…) n'ont pas de marge haute, d'où la marge basse. */
.a4w-product-faq {
  margin-bottom: 64px;
}

@media (min-width: 992px) {
  .a4w-product-faq {
    margin-bottom: 96px;
  }
}

@media (max-width: 575.98px) {
  .products.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 2rem;
  }

  .product-miniature .product-miniature__title {
    font-size: 1rem;
  }

  .products > [data-a4-injected] .a4w-ad__overlay {
    padding: 16px 16px 20px;
  }

  .products > [data-a4-injected] .a4w-ad__title {
    font-size: 1.125rem;
  }

  .products > [data-a4-injected] .a4w-ad__cta {
    font-size: 0.75rem;
  }
}


/* === Charte v2 — CAT-09 Accueil : refonte (refs#6694) ===
   Le thème, chargé après les modules (priorité 1000), reprend ici le style des blocs de l'accueil :
   carrousel (hero), a4w_popularproduct (sélection), a4w_contenthomeblock (récit sur fond rose),
   ps_customtext (ourson), a4w_homespecialties (onglets, son CSS propre porte les onglets),
   a4w_contenthomeblock2 (histoire sur fond crème), a4w_homecategory (univers), blockreassurance.
   Portée : body#index. Espaces entre sections 96 px (64 px sous 767.98 px), conteneur 1280 px,
   rayon 3 px, aucun zoom au survol. Couleurs par jetons du thème avec repli. */

/* 1. Rythme vertical : chaque bloc de l'accueil est un enfant direct de #content. */
#index .page-home > * {
  margin-top: 96px;
  margin-bottom: 0;
}

#index .page-home > *:first-child {
  margin-top: 0;
}

#index .page-home .background-medium {
  background-color: transparent;
}

#index .page-home #a4w_popularproduct,
#index .page-home #a4w_popularproduct .featured-products-inner {
  padding: 0;
  background-color: transparent;
}

/* 2. Titres de section : Gelasio, alignés à gauche. */
#index .page-home #a4w_popularproduct .products-section-title,
#index .page-home .a4w-hs__title,
#index .page-home .a4w-home-category__title,
#index .page-home #a4w_homeblock .products-section-title,
#index .page-home #a4w_homeblock2 .products-section-title,
#index .page-home .a4w-hm-ours h2 {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h2);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
  color: var(--text-color, #1D191B);
}

#index .page-home #a4w_popularproduct .center {
  align-items: flex-start;
}

/* Le module pose le titre hors de son .container : sans cette ligne il collait au bord (x = 0). */
#index .page-home #a4w_popularproduct .center,
#index .page-home #a4w_popularproduct .container,
#index .page-home .a4w-hs .container,
#index .page-home .a4w-home-category .container {
  width: 100% !important;
  max-width: var(--a4w-container-xxl-max-width, 1280px);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--a4w-container-gutter, 40px);
  padding-left: var(--a4w-container-gutter, 40px);
  box-sizing: border-box;
}

#index .page-home #a4w_popularproduct .container {
  padding-bottom: 0;
}

/* 3. Hero (a4w_carousel) : légende en Gelasio, étiquette en capitales sans pastille. */
#index #a4wcarousel .carousel-caption .a4w-carousel-title {
  font-family: var(--font-family-title, Georgia, serif);
  font-weight: 600;
  line-height: 1.15;
}

#index #a4wcarousel .carousel-description {
  font-family: var(--font-family-title, Georgia, serif);
  font-size: 1.375rem;
  line-height: 1.4;
}

/* #6752 : le préfixe était en Noto Sans, livré sans italique (faux oblique du navigateur, à peine
   visible) ; Gelasio a une vraie italique 400 dans assets/fonts. */
#index #a4wcarousel .carousel-caption .carousel-prefix {
  font-family: var(--font-family-title, Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

#index #a4wcarousel .carousel-tag {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 4. Sélection du moment : 4 cartes (2 sous 991.98 px), grille CSS à la place des colonnes Bootstrap. */
#index .page-home #a4w_popularproduct .a4w-popularproduct-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
  margin: 32px 0 0;
}

#index .page-home #a4w_popularproduct .a4w-popularproduct-grid > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* 5. Blocs éditoriaux (récit fondants sur fond rose, histoire sur fond crème). */
/* height: auto — le CSS des deux modules fige la section à 650 px entre 1460 et 1920 px : avec
   l'overflow masqué, l'image était rognée en bas et le texte paraissait décentré (1920 px). */
#index .page-home #a4w_homeblock,
#index .page-home #a4w_homeblock2 {
  width: 100% !important;
  height: auto;
  margin: 96px 0 0 !important;
  padding: 96px 0;
  overflow: hidden !important;
}

#index .page-home #a4w_homeblock {
  background-color: var(--tertiary-color, #FFEAF7);
}

#index .page-home #a4w_homeblock2 {
  background-color: var(--light-bg, #FAF7F4);
}

#index .page-home #a4w_homeblock > .row,
#index .page-home #a4w_homeblock2 > .row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
  width: 100% !important;
  max-width: var(--a4w-container-xxl-max-width, 1280px);
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 var(--a4w-container-gutter, 40px) !important;
  box-sizing: border-box;
  background: transparent;
}

#index .page-home #a4w_homeblock > .row > .auto-none,
#index .page-home #a4w_homeblock2 > .row > .auto-none {
  display: none !important;
}

/* Bloc sans image (contenthomeblock 1.4.0 : image retirée en BO) : le texte seul, sur une colonne
   bornée à une longueur de ligne lisible. */
#index .page-home #a4w_homeblock.a4w-homeblock--no-image > .row,
#index .page-home #a4w_homeblock2.a4w-homeblock2--no-image > .row {
  grid-template-columns: minmax(0, 1fr);
}

#index .page-home .a4w-homeblock--no-image .p-text,
#index .page-home .a4w-homeblock2--no-image .p-text {
  max-width: 760px;
}

#index .page-home #a4w_homeblock > .row > [class*="col-"],
#index .page-home #a4w_homeblock2 > .row > [class*="col-"] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#index .page-home #a4w_homeblock .display-center,
#index .page-home #a4w_homeblock2 .display-center {
  display: block;
  margin: 0;
}

#index .page-home #a4w_homeblock img.img-contenthomeblock,
#index .page-home #a4w_homeblock2 img.img-contenthomeblock2 {
  display: block;
  float: none;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--border-radius, 3px);
  box-shadow: none;
}

#index .page-home #a4w_homeblock2 img.img-contenthomeblock2 {
  aspect-ratio: 4 / 3;
}

#index .page-home #a4w_homeblock .p-text div,
#index .page-home #a4w_homeblock .p-text h2,
#index .page-home #a4w_homeblock2 .p-text div,
#index .page-home #a4w_homeblock2 .p-text h2 {
  padding-right: 0;
  padding-left: 0;
}

/* Sur-titre : légende en capitales (le module le sort en p.h3.text-red-bdx). */
#index .page-home #a4w_homeblock .p-text .h3,
#index .page-home #a4w_homeblock2 .p-text .h3,
#index .page-home .a4w-hm-cap,
#index .page-home .a4w-home-category__subtitle {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-family-base, sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted-color, #6C6A6B);
}

#index .page-home #a4w_homeblock .p-text h2,
#index .page-home #a4w_homeblock2 .p-text h2 {
  margin: 10px 0 20px;
}

#index .page-home #a4w_homeblock .p-text p,
#index .page-home #a4w_homeblock2 .p-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--medium-gray, #565254);
}

/* Lien du bloc (le module sort un bouton) : texte + flèche, comme « Voir tout → » (GEN-03).
   Fond, filet et encre en !important : la règle d'achat .btn.btn-primary (section C.4) les pose
   en !important, et sans cela le lien sortait en pavé noir sans marge intérieure. */
#index .page-home #a4w_homeblock .p-text a.btn,
#index .page-home #a4w_homeblock2 .p-text a.btn,
#index .page-home .a4w-hm-ours__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none !important;
  border-color: transparent !important;
  box-shadow: none;
  color: var(--text-color, #1D191B) !important;
  font-family: var(--font-family-base, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

#index .page-home #a4w_homeblock .p-text a.btn::after,
#index .page-home #a4w_homeblock2 .p-text a.btn::after,
#index .page-home .a4w-hm-ours__link::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

#index .page-home #a4w_homeblock .p-text a.btn:hover,
#index .page-home #a4w_homeblock2 .p-text a.btn:hover,
#index .page-home #a4w_homeblock .p-text a.btn:active,
#index .page-home #a4w_homeblock2 .p-text a.btn:active,
#index .page-home .a4w-hm-ours__link:hover {
  background: none !important;
  border-color: transparent !important;
  color: var(--text-color, #1D191B) !important;
  text-decoration: none;
}

#index .page-home #a4w_homeblock .p-text a.btn:hover::after,
#index .page-home #a4w_homeblock2 .p-text a.btn:hover::after,
#index .page-home .a4w-hm-ours__link:hover::after {
  transform: translateX(3px);
}

/* 6. Ourson guimauve (ps_customtext) : HTML saisi en BO, classes a4w-hm-ours*. */
#index .page-home #custom-text .container {
  max-width: var(--a4w-container-xxl-max-width, 1280px);
  padding-right: var(--a4w-container-gutter, 40px);
  padding-left: var(--a4w-container-gutter, 40px);
}

#index .page-home .a4w-hm-ours {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: center;
}

#index .page-home .a4w-hm-ours--solo {
  grid-template-columns: minmax(0, 1fr);
}

#index .page-home .a4w-hm-ours__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius, 3px);
}

#index .page-home .a4w-hm-ours p {
  margin: 0 0 14px;
  line-height: 1.75;
  color: var(--medium-gray, #565254);
}

#index .page-home .a4w-hm-ours h2 {
  margin: 10px 0 20px;
}

#index .page-home .a4w-hm-ours__price strong {
  margin-left: 8px;
  font-family: var(--font-family-title, Georgia, serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
}

#index .page-home .a4w-hm-ours .btn {
  margin-top: 8px;
}

/* 7. Nos spécialités : le module porte les onglets ; ici seulement la gouttière du titre. */
#index .page-home .a4w-hs {
  padding: 0;
}

/* Nos spécialités servies par a4w_populartheme : cartes à plat comme toutes les grilles du site.
   Le module pose une ombre (et une ombre plus forte au survol) sous la vignette : retirée. */
#index .page-home #a4w_populartheme .product-miniature .thumbnail-container,
#index .page-home #a4w_populartheme .product-miniature .thumbnail-container:hover,
#index .page-home #a4w_populartheme .product-card {
  box-shadow: none;
  transform: none;
}

/* 8. Notre univers gourmand : 3 cartes à plat, légende Gelasio, sans zoom. */
#index .page-home .a4w-home-category {
  padding: 0;
  text-align: left;
}

#index .page-home .a4w-home-category__title {
  margin-bottom: 0;
}

#index .page-home .a4w-home-category__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: none;
  margin: 32px 0 0;
  padding: 0;
}

#index .page-home .a4w-home-category__item {
  overflow: visible;
}

#index .page-home .a4w-home-category__link {
  align-items: stretch;
  gap: 14px;
}

#index .page-home .a4w-home-category__image-wrapper {
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
}

#index .page-home .a4w-home-category__name {
  margin-top: 0;
  font-family: var(--font-family-title, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  color: var(--text-color, #1D191B);
}

#index .page-home .a4w-home-category__item:hover .a4w-home-category__name {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

/* Gabarit « Univers » (layout 2, carrousel) remis à la maquette (recette du 28/10) : fond blanc
   quel que soit le réglage BO (couleur et image de fond posées en ligne), cartes sur toute la
   largeur du contenu, image carrée à coins de 3 px, libellé Gelasio à gauche ; le carrousel est
   conservé, ses flèches deviennent deux boutons ronds de 44 px à droite du titre (comme « Nos
   recettes »). */
#index .page-home .a4w-home-category--layout-2 .a4w-home-category__bg {
  padding: 0;
  background-color: transparent;
  background-image: none !important;
}

#index .page-home .a4w-home-category--layout-2 .a4w-home-category__title {
  margin: 0 104px 32px 0;
}

#index .page-home .a4w-univers-carousel {
  max-width: none;
}

#index .page-home .a4w-univers-card__link {
  gap: 14px;
  color: var(--text-color, #1D191B);
}

#index .page-home .a4w-univers-card__image {
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
}

#index .page-home .a4w-univers-card__link:hover .a4w-univers-card__image {
  opacity: 1;
}

#index .page-home .a4w-univers-card__name {
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 500;
  text-align: left;
}

#index .page-home .a4w-univers-card__link:hover .a4w-univers-card__name,
#index .page-home .a4w-univers-card__link:focus-visible .a4w-univers-card__name {
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

#index .page-home .a4w-univers-carousel__prev,
#index .page-home .a4w-univers-carousel__next {
  top: -76px;
  bottom: auto;
  left: auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: 50%;
  background-color: var(--background-color, #FFFFFF);
  color: var(--medium-gray, #565254);
  font-size: 1.5rem;
  line-height: 1;
  transform: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#index .page-home .a4w-univers-carousel__prev {
  right: 52px;
}

#index .page-home .a4w-univers-carousel__next {
  right: 0;
}

#index .page-home .a4w-univers-carousel__prev:hover,
#index .page-home .a4w-univers-carousel__next:hover {
  border-color: var(--text-color, #1D191B);
  color: var(--text-color, #1D191B);
  opacity: 1;
  transform: none;
}

#index .page-home .a4w-univers-carousel__prev[aria-disabled="true"],
#index .page-home .a4w-univers-carousel__next[aria-disabled="true"] {
  opacity: 0.4;
}

@media (max-width: 767.98px) {
  #index .page-home .a4w-univers-carousel {
    max-width: none;
  }
}

/* 9. Réassurance : une ligne de 4 engagements, sans titre de bloc. */
:is(#index, #product) #block-reassurance {
  margin-top: 96px;
  padding: 56px 0 0;
  background-color: transparent;
}

:is(#index, #product) #block-reassurance .block-reassurance-header {
  display: none;
}

:is(#index, #product) #block-reassurance .container {
  max-width: var(--a4w-container-xxl-max-width, 1280px);
  border-top: 1px solid var(--border-color, #E4E3E4);
  padding-top: 56px;
}

:is(#index, #product) #block-reassurance .block-reassurance-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

:is(#index, #product) #block-reassurance .block-reassurance-item {
  min-width: 0;
  padding: 0;
  text-align: left;
}

:is(#index, #product) #block-reassurance .block-reassurance-item {
  display: flex;
  align-items: center;
}

:is(#index, #product) #block-reassurance .block-reassurance-item-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-color, #1D191B);
}

:is(#index, #product) #block-reassurance .block-reassurance-icon {
  flex: 0 0 auto;
  margin: 0;
}

:is(#index, #product) #block-reassurance .block-reassurance-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

:is(#index, #product) #block-reassurance .block-reassurance-item-title {
  margin: 0;
  font-family: var(--font-family-base, sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

:is(#index, #product) #block-reassurance .block-reassurance-item-desc {
  display: none;
}

/* Tablette et mobile large : 2 colonnes. */
@media (max-width: 991.98px) {
  #index .page-home #a4w_popularproduct .a4w-popularproduct-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 16px;
  }

  :is(#index, #product) #block-reassurance .block-reassurance-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile : espaces de 64 px, colonnes empilées, hero image au-dessus du texte, univers en 1 colonne. */
@media (max-width: 767.98px) {
  #index .page-home > * {
    margin-top: 64px;
  }

  #index .page-home #a4w_popularproduct .container,
  #index .page-home .a4w-hs .container,
  #index .page-home .a4w-home-category .container,
  #index .page-home #custom-text .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  #index .page-home #a4w_homeblock,
  #index .page-home #a4w_homeblock2 {
    margin-top: 64px !important;
    padding: 64px 0;
  }

  #index .page-home #a4w_homeblock > .row,
  #index .page-home #a4w_homeblock2 > .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 0 16px !important;
  }

  /* Image d'abord (récit) ; l'histoire garde le texte puis l'image, comme la maquette mobile. */
  #index .page-home #a4w_homeblock > .row {
    display: flex;
    flex-direction: column;
  }

  #index .page-home #a4w_homeblock > .row > .col-md-6 {
    order: -1;
  }

  #index .page-home #a4w_homeblock .display-center,
  #index .page-home #a4w_homeblock2 .display-center {
    margin: 0;
  }

  #index .page-home #a4w_homeblock2 > .row > .col-md-6 {
    order: 2;
  }

  #index .page-home #a4w_homeblock .p-text,
  #index .page-home #a4w_homeblock2 .p-text {
    text-align: left;
  }

  #index .page-home .a4w-hm-ours {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  #index .page-home .a4w-home-category__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(#index, #product) #block-reassurance {
    margin-top: 64px;
  }

  :is(#index, #product) #block-reassurance .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* Hero : image de 260 px puis le texte sur fond rose, sans superposition. */
  #index #a4wcarousel .inner-carousel {
    height: auto;
    min-height: 0;
  }

  #index #a4wcarousel .carousel-item.carousel-layout-background {
    position: relative;
    height: auto;
    min-height: 0;
    background-color: var(--tertiary-color, #FFEAF7);
  }

  #index #a4wcarousel .carousel-item.carousel-layout-background.active {
    display: flex;
    flex-direction: column;
  }

  #index #a4wcarousel .carousel-layout-background picture,
  #index #a4wcarousel .carousel-layout-background picture img {
    height: 260px;
    min-height: 0;
  }

  #index #a4wcarousel .carousel-layout-background .carousel-caption {
    position: static;
    width: 100%;
    padding: 32px 16px 40px;
    transform: none;
    text-align: left;
    box-sizing: border-box;
  }

  #index #a4wcarousel .carousel-layout-background .carousel-caption .a4w-carousel-title {
    text-align: left;
  }

  #index #a4wcarousel .carousel-layout-background .carousel-cta {
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px) {
  :is(#index, #product) #block-reassurance .block-reassurance-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  #index .page-home #a4w_homeblock .p-text a.btn::after,
  #index .page-home #a4w_homeblock2 .p-text a.btn::after,
  #index .page-home .a4w-hm-ours__link::after {
    transition: none;
  }

  #index .page-home #a4w_homeblock .p-text a.btn:hover::after,
  #index .page-home #a4w_homeblock2 .p-text a.btn:hover::after,
  #index .page-home .a4w-hm-ours__link:hover::after {
    transform: none;
  }
}

/* === Charte v2 — CAT-01 Déclinaison indisponible : barrée, sélectionnable (refs#6694) ===
   product-variants.tpl : .is-unavailable sur la valeur épuisée ; l'entrée radio précède son libellé
   (sélecteur frère, pas de :has()). Le formulaire « Me prévenir » est rendu par a4w_alerts. */
.product__variants .radio-variants {
  list-style: none;
  padding: 0;
}

.product__variants .radio-variant {
  position: relative;
  margin: 0;
  padding: 0;
}

.product__variants .a4w-variant__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.product__variants .a4w-variant__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 48px;
  padding: 8px 14px;
  box-sizing: border-box;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--bs-body-bg, #FFFFFF);
  color: var(--text-color, #1D191B);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.product__variants .a4w-variant__chip:hover {
  border-color: var(--text-color, #1D191B);
}

.product__variants .radio-variant .a4w-variant__input:checked + .a4w-variant__chip {
  border-width: 2px;
  padding: 7px 13px;
  background-color: var(--light-bg, #FAF7F4);
  border-color: var(--text-color, #1D191B);
  font-weight: 700;
}

.product__variants .radio-variant .a4w-variant__input:focus-visible + .a4w-variant__chip {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

/* Indisponible : trait en diagonale (filet de champ), texte atténué ; coché, le texte redevient encre. */
.product__variants .radio-variant.is-unavailable .a4w-variant__chip {
  color: var(--muted-color, #6C6A6B);
  background-image: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--input-border-color, #8E8C8D) calc(50% - 0.5px), var(--input-border-color, #8E8C8D) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.product__variants .radio-variant.is-unavailable .a4w-variant__input:checked + .a4w-variant__chip {
  color: var(--text-color, #1D191B);
}

.product__variants .color-variant.is-unavailable .color {
  position: relative;
  overflow: hidden;
}

.product__variants .color-variant.is-unavailable .color::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--text-color, #1D191B) calc(50% - 1px), var(--text-color, #1D191B) calc(50% + 1px), transparent calc(50% + 1px));
}

.product__variants .form-select option.is-unavailable {
  color: var(--muted-color, #6C6A6B);
}

/* === Charte v2 — PAG-03 Page Contact (refs#6694) ===
   contact.tpl + modules/contactform/…/contactform.tpl. Champs a4w_contactextrafields : classes du
   thème (form-label, form-control) ; l'état d'erreur est porté par le module. */
.a4w-contact {
  padding-bottom: 96px;
}

.a4w-contact__head {
  max-width: 760px;
  padding-top: 48px;
}

.a4w-contact__cap {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text-color, #8C6634);
}

.a4w-contact__title {
  margin: 14px 0 0;
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: var(--font-size-h1, 2.4375rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-color, #1D191B);
}

.a4w-contact__lead {
  margin: 20px 0 0;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--medium-gray, #565254);
}

.a4w-contact__quick {
  display: none;
}

.a4w-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
  margin-top: 56px;
}

.a4w-contact-form__required {
  margin: 0 0 20px;
  font-size: 0.875rem;
  color: var(--medium-gray, #565254);
}

.a4w-contact-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}

.a4w-contact-form .form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
}

.a4w-contact-form .form-label span[aria-hidden="true"] {
  color: var(--accent-text-color, #8C6634);
}

.a4w-contact-form .a4w-contact-form__optional,
.a4w-contact-form .a4w-cef-optional {
  font-weight: 400;
  color: var(--medium-gray, #565254);
}

.a4w-contact-form textarea.form-control {
  min-height: 180px;
  resize: vertical;
}

.a4w-contact-form__legal {
  margin: 0 0 24px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--medium-gray, #565254);
}

.a4w-contact-form__legal a {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

/* Erreurs : jeton réservé aux erreurs (alerte du formulaire, champs signalés). */
.a4w-contact-form .alert-danger {
  margin-bottom: 24px;
  color: var(--alert-danger-color, #9B2C2C);
  border-color: var(--alert-danger-color, #9B2C2C);
}

.a4w-contact-form .alert-danger ul {
  padding-left: 1.25rem;
}

.a4w-contact-form .invalid-feedback,
.a4w-contact-form .a4w-cef-error {
  color: var(--alert-danger-color, #9B2C2C);
}

/* Colonne latérale. */
.a4w-contact__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 120px;
}

.a4w-contact__card {
  padding: 28px;
  background-color: var(--light-bg, #FAF7F4);
  border-radius: var(--border-radius, 3px);
}

.a4w-contact__card-title {
  margin: 0 0 16px;
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.a4w-contact__address {
  margin: 0;
  font-style: normal;
  line-height: 1.7;
  color: var(--medium-gray, #565254);
}

.a4w-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.a4w-contact__tel:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.a4w-contact__tel .material-icons,
.a4w-contact__quick-btn .material-icons,
.a4w-contact__map .material-icons {
  color: var(--link-decoration-color, #B68A56);
}

.a4w-contact__hours {
  line-height: 1.8;
  color: var(--medium-gray, #565254);
}

.a4w-contact__note {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--medium-gray, #565254);
}

.a4w-contact__map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  padding: 16px;
  box-sizing: border-box;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
  color: var(--text-color, #1D191B);
  text-align: center;
  text-decoration: none;
}

.a4w-contact__map:hover {
  border-color: var(--text-color, #1D191B);
}

.a4w-contact__map-title {
  font-family: var(--font-family-title, 'Gelasio', serif);
  font-size: 1.125rem;
  font-weight: 600;
}

.a4w-contact__map-text {
  font-size: 0.875rem;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
  color: var(--medium-gray, #565254);
}

.a4w-contact__directions {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.a4w-contact__directions .material-icons {
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .a4w-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 32px;
  }

  .a4w-contact__side {
    position: static;
  }
}

@media (max-width: 767.98px) {
  .a4w-contact {
    padding-bottom: 64px;
  }

  .a4w-contact__head {
    padding-top: 28px;
  }

  .a4w-contact__lead {
    font-size: 1rem;
  }

  .a4w-contact__quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }

  .a4w-contact__quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid var(--text-color, #1D191B);
    border-radius: var(--border-radius, 3px);
    background-color: var(--bs-body-bg, #FFFFFF);
    color: var(--text-color, #1D191B);
    font-family: var(--font-family-title, 'Gelasio', serif);
    font-weight: 500;
    text-decoration: none;
  }

  .a4w-contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .a4w-contact__card {
    padding: 20px;
  }

  .a4w-contact-form__send {
    width: 100%;
  }
}

/* === Charte v2 — TUN-02 Panier : « Mettre de côté » (refs#6694) ===
   Habillage, côté thème, du lien de a4w_lists 1.6.0 (hook du cœur displayCartExtraProductActions,
   rendu dans .product-line__actions juste après « Retirer »). Le markup du module n'est pas
   surchargé (F4) : seules des règles de thème le recalent sur « Retirer » (même hauteur 44 px,
   même graisse, même corps, même rayon). Retour à la ligne sous 767.98 px. */
.cart__item .product-line__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}

.cart__item .product-line__actions .a4w-sfl {
  align-items: center;
}

/* Le parent (.product-line__actions a) pose un retrait de −.5rem, un padding de .5rem et un
   soulignement ::after sur tout lien de la zone : le lien visiteur du module les reçoit aussi. */
.cart__item .product-line__actions .a4w-sfl-btn {
  min-height: 44px;
  margin-left: 0;
  padding: 0 10px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.cart__item .product-line__actions .a4w-sfl-btn::after {
  display: none;
}

/* Zone « Mis de côté » : 48 px au-dessus du bloc précédent en desktop, 32 px entre elle et l'ajout
   rapide qui la suit (maquette Panier ; il collait à son dernier filet, retour du 29/10). Sous
   768 px, custom.js range ces blocs dans .cart-grid__mobile-after, qui pose ses propres écarts
   (TUN-03) : les règles sont donc bornées au desktop. */
@media (min-width: 768px) {
  .cart-grid__saved:not(:empty) {
    margin-top: 48px;
  }

  .cart-grid__saved:not(:empty) + #a4w-cartsearch-block {
    margin-top: 32px;
  }
}

/* === Charte v2 — Tableaux du compte : commandes, avoirs, bons (refs#6694, retour du 29/10) ===
   Maquettes Commandes et Avoirs : tableau encadré, en-tête crème en petites capitales, lignes à
   filet. Sous 992 px (la colonne de menu prend la place), chaque ligne devient une carte dont les
   cellules affichent leur libellé (data-label) ; la première cellule sert de titre. */
.account-table {
  overflow-x: auto;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

.account-table__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.account-table__table th[scope="col"] {
  padding: 14px 16px;
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.account-table__table tbody th,
.account-table__table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
  color: var(--text-color, #1D191B);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}

.account-table__table tbody tr:last-child > th,
.account-table__table tbody tr:last-child > td {
  border-bottom: 0;
}

.account-table__table .account-table__head {
  font-weight: 700;
}

.account-table__table th.account-table__num,
.account-table__table td.account-table__num {
  text-align: right;
}

.account-table__table th.account-table__end,
.account-table__table td.account-table__end {
  text-align: right;
}

.account-table__table .account-table__strong {
  font-weight: 600;
}

.account-table__table .account-table__muted,
.account-table__muted {
  color: var(--medium-gray, #565254);
}

.account-table__table .account-table__nowrap {
  white-space: nowrap;
}

.account-table__table .account-table__code {
  letter-spacing: 0.04em;
}

/* Liens du tableau : n° de commande, PDF, « Commander à nouveau », avoir. */
a.order__link {
  color: var(--text-color, #1D191B);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

a.order__link:hover {
  color: var(--text-color, #1D191B);
  text-decoration-color: var(--text-color, #1D191B);
}

a.order__pdf,
a.order__reorder,
a.account-table__pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
  white-space: nowrap;
}

a.order__pdf:hover,
a.order__reorder:hover,
a.account-table__pdf:hover {
  color: var(--text-color, #1D191B);
  text-decoration-color: var(--text-color, #1D191B);
}

.order__reorder svg,
.account-table__pdf svg {
  flex: none;
  color: var(--link-decoration-color, #B68A56);
}

.account-table__table td.order__actions {
  text-align: right;
}

/* Pastilles de statut (customer/_partials/order-status.tpl). */
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid transparent;
  border-radius: var(--border-radius, 3px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.order-status svg {
  flex: none;
}

.order-status__icon {
  color: var(--link-decoration-color, #B68A56);
}

.order-status--success {
  border-color: var(--alert-success-color, #2F6B4F);
  background-color: var(--alert-success-bg-color, #EEF5F1);
  color: var(--alert-success-color, #2F6B4F);
}

.order-status--warning {
  border-color: var(--alert-warning-color, #8A5A00);
  background-color: var(--alert-warning-bg-color, #FBF4E6);
  color: var(--alert-warning-color, #8A5A00);
}

.order-status--neutral {
  border-color: var(--input-border-color, #8E8C8D);
  background-color: var(--white-color, #FFFFFF);
  color: var(--muted-color, #6C6A6B);
}

.order-status--refund {
  border-color: var(--link-decoration-color, #B68A56);
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
}

.order-status--error {
  border-color: var(--alert-danger-color, #9B2C2C);
  background-color: var(--white-color, #FFFFFF);
  color: var(--alert-danger-color, #9B2C2C);
}

.order-status--progress {
  border-color: var(--border-color, #E4E3E4);
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
}

@media (max-width: 991.98px) {
  .account-table__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .account-table__table,
  .account-table__table tbody,
  .account-table__table tr {
    display: block;
    width: 100%;
  }

  .account-table__table tr {
    padding: 16px;
    border-bottom: 1px solid var(--border-color, #E4E3E4);
  }

  .account-table__table tbody tr:last-child {
    border-bottom: 0;
  }

  .account-table__table tbody th,
  .account-table__table td,
  .account-table__table th.account-table__num,
  .account-table__table td.account-table__num,
  .account-table__table td.account-table__end {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    border: 0;
    text-align: right;
    white-space: normal;
  }

  .account-table__table tbody th::before,
  .account-table__table td::before {
    content: attr(data-label);
    color: var(--medium-gray, #565254);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
  }

  .account-table__table .account-table__head {
    display: block;
    padding: 0 0 8px;
    text-align: left;
  }

  .account-table__table .account-table__head::before,
  .account-table__table td[data-label=""]::before {
    content: none;
  }

  .account-table__table td[data-label=""] {
    justify-content: flex-end;
  }
}

/* === Charte v2 — CPT-03 Détail de commande (refs#6694, repris le 29/10, maquette Details) === */

/* En-tête : retour à l'historique au-dessus du titre, bouton « Commander à nouveau » à droite. */
.order__back {
  margin: 0 0 8px;
}

a.order__back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  text-decoration: none;
}

a.order__back-link:hover {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.order__number {
  color: var(--text-color, #1D191B);
  font-weight: 700;
}

.account-header .account-header__action {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1rem;
}

.account-header__action svg {
  color: var(--link-decoration-color, #B68A56);
}

/* Résumé : quatre cartes crème. */
.order__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}

.order__summary-item {
  min-width: 0;
  padding: 20px 16px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
}

.order__summary-item dt {
  margin: 0 0 8px;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.order__summary-item dd {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  overflow-wrap: break-word;
}

.order__summary-item--total dd {
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  line-height: 1.2;
}

.order__invoice-link {
  margin: 16px 0 0;
}

/* Sections : titre H3, 48 px entre deux sections. */
.order__section {
  margin-top: 48px;
}

.order__section-title {
  margin: 0 0 20px;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.order__section-intro {
  margin: -12px 0 20px;
  color: var(--medium-gray, #565254);
}

/* Suivi pas à pas : encadré, une ligne par état, puce pleine pour l'état en cours. */
.order-timeline {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  list-style: none;
}

.order-timeline__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.order-timeline__step:first-child {
  border-top: 0;
}

.order-timeline__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--link-decoration-color, #B68A56);
  border-radius: 50%;
}

.order-timeline__step--current .order-timeline__dot {
  border-color: var(--text-color, #1D191B);
  background-color: var(--text-color, #1D191B);
}

.order-timeline__date {
  min-width: 152px;
  font-variant-numeric: tabular-nums;
}

.order-timeline__time {
  color: var(--medium-gray, #565254);
  font-size: 0.8125rem;
}

/* Adresses : deux cartes (block-address.tpl en lecture seule), surtitre du type. */
.addresses.addresses--order {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.address__kind {
  margin: 0 0 12px;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Produits : vignette, nom en Gelasio, déclinaisons en légende ; pied crème des totaux. */
.order-products td {
  vertical-align: top;
}

.order-products td:first-child {
  width: 112px;
  padding-right: 0;
}

.order-products__image {
  display: block;
  max-width: 80px;
  height: auto;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
}

.order-products .order__item__name {
  margin: 0 0 4px;
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.order-products .order__item__name a,
.order__items .order__item__name a {
  color: var(--text-color, #1D191B);
  text-decoration: none;
}

.order-products .order__item__name a:hover,
.order__items .order__item__name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

.order__item__attr {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.order-products tbody td.account-table__num {
  white-space: nowrap;
}

.order-products tbody td:last-child {
  font-weight: 600;
}

.order-products tfoot td {
  padding: 6px 16px;
  border: 0;
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--medium-gray, #565254);
  text-align: right;
}

.order-products tfoot tr:first-child td {
  padding-top: 20px;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.order-products tfoot td.account-table__num {
  width: 1%;
  color: var(--text-color, #1D191B);
  white-space: nowrap;
}

.order-products tfoot tr:last-child td {
  padding-top: 12px;
  padding-bottom: 20px;
  color: var(--text-color, #1D191B);
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: 600;
}

/* N° de suivi cliquable : lien externe, picto décoratif. */
a.order__tracking-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
  white-space: nowrap;
}

.order__tracking-icon {
  flex: none;
  color: var(--accent-text-color, #8C6634);
}

.customer__message {
  border-color: var(--border-color, #E4E3E4) !important;
  border-radius: var(--border-radius, 3px) !important;
  background-color: var(--white-color, #FFFFFF);
}

/* « Nous écrire à propos de cette commande » : formulaire dans un encadré. */
.order-message-form__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
}

.order-message-form__required {
  margin: 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

.order-message-form .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.order-message-form .form-label.required::after {
  content: "*";
  margin-left: 2px;
  color: var(--accent-text-color, #8C6634);
}

.order-message-form__field--product {
  max-width: 296px;
}

.order-message-form .form-select,
.order-message-form .form-control {
  min-height: 48px;
  border-color: var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

.order-message-form .form-control {
  min-height: 120px;
}

.order-message-form .form-footer {
  display: flex;
  justify-content: flex-end;
  margin: 0;
}

@media (max-width: 991.98px) {
  .order__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .order__summary {
    gap: 12px;
  }

  .order__section {
    margin-top: 40px;
  }

  .order-timeline__step {
    padding: 12px 16px;
  }

  .order-message-form__panel {
    padding: 20px;
  }

  .order-message-form__field--product {
    max-width: none;
  }

  .account-header .account-header__action {
    width: 100%;
    justify-content: center;
  }
}

/* === Charte v2 — Adresses, Mes informations, états vides (refs#6694, retour du 29/10) ===
   Maquettes Main (adresses), Infos et Bons. */

/* Adresses : grille de cartes de 270 px minimum, carte d'ajout en pointillés. */
.addresses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}

.address__wrapper {
  display: flex;
  min-width: 0;
}

.account-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
  transition: border-color 0.15s ease;
}

.account-card:hover {
  border-color: var(--input-border-color, #8E8C8D);
}

.address__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 14px;
  padding: 24px;
}

.addresses .address__alias {
  margin: 0;
  font-family: var(--font-family-base, sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-color, #1D191B);
}

.address__name {
  margin: 2px 0 0;
  color: var(--text-color, #1D191B);
}

.address__company {
  margin: 2px 0 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  font-weight: 500;
}

.addresses .address__content {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
}

/* Le nom est au-dessus, hors de <address> : la première ligne n'est plus le nom (règle T-0065). */
.addresses address.address__content::first-line {
  font-weight: 400;
}

.address__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.address__phone-icon {
  flex: none;
  color: var(--link-decoration-color, #B68A56);
}

.address__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 12px 24px;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

/* Boutons secondaires compacts du compte (maquette .compact) : 44 px, texte à 1rem. */
.address__actions .address__edit,
.account-gdpr .account-gdpr__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1rem;
}

.address__actions .address__delete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--border-radius, 3px);
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.address__actions .address__delete:hover {
  border-color: var(--input-border-color, #8E8C8D);
  color: var(--text-color, #1D191B);
}

.addresses .addresses__new-address {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  padding: 24px;
  border: 1px dashed var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
  text-align: center;
  text-decoration: none;
}

.addresses .addresses__new-address:hover {
  border-color: var(--text-color, #1D191B);
  color: var(--text-color, #1D191B);
}

.addresses .new-address__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--tertiary-color, #FFEAF7);
  color: var(--text-color, #1D191B);
}

.addresses .new-address__text {
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Mes informations : trois encadrés à légende H3, champs pleine largeur. */
/* Chaque champ garde les 16 px de .mb-3 (utilitaire Bootstrap en !important) : 8 px d'écart
   en plus font les 24 px de la maquette, et le bas de l'encadré est réduit d'autant. */
.customer-form--identity .account-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0 0 24px;
  padding: 44px 28px 12px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
}

.customer-form--identity .account-form__legend {
  float: none;
  width: auto;
  margin: 0 0 0 -8px;
  padding: 0 8px;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.account-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.account-form__field--narrow {
  max-width: 280px;
}

.page-customer .customer-form--identity input.form-control,
.page-customer .customer-form--identity .input-group {
  max-width: none;
}

.form-label__optional {
  color: var(--medium-gray, #565254);
  font-weight: 400;
}

.page-customer .customer-form--identity .form-text {
  display: block;
  margin: 6px 0 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  line-height: 1.5;
}

.page-customer .customer-form--identity .form-text + .form-text {
  margin-top: 0;
}

/* Civilité : boutons radio de 20 px, cibles de 44 px. */
.customer-form--identity .form-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 24px 0 0;
  padding: 0;
}

.customer-form--identity .form-check-input {
  float: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}

.customer-form--identity .form-check-input:checked {
  border-color: var(--text-color, #1D191B);
  background-color: var(--text-color, #1D191B);
}

/* Bulletin : case de 20 px, libellé gras, mention alignée sur le libellé. */
.customer-form--identity .form-check:not(.form-check-inline) {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.customer-form--identity .form-check:not(.form-check-inline) .form-check-input {
  margin-top: 1px;
}

.customer-form--identity .form-check:not(.form-check-inline) .form-check-label {
  font-weight: 600;
}

.page-customer .customer-form--identity .form-check + .form-text--help {
  padding-left: 32px;
}

/* Œil du mot de passe : dans le champ, sans fond. */
.customer-form--identity .password-field {
  position: relative;
  display: block;
}

.customer-form--identity .password-field > .form-control {
  width: 100%;
  padding-right: 52px;
}

.customer-form--identity .password-field > .btn,
.customer-form--identity .password-field > .btn:hover,
.customer-form--identity .password-field > .btn:focus,
.customer-form--identity .password-field > .btn:active {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 0;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius, 3px);
  background-color: transparent;
  color: var(--text-color, #1D191B);
  box-shadow: none;
}

.customer-form--identity .password-field > .btn .material-icons {
  font-size: 1.25rem;
}

.customer-form--identity .password-field > .btn:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: -2px;
}

.customer-form--identity .form-footer {
  margin-top: 0;
}

/* Mes données personnelles (psgdpr, gabarit du thème) : deux encadrés à picto rond crème. */
.account-gdpr {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.account-gdpr__panel {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

.account-gdpr__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--link-decoration-color, #B68A56);
}

.account-gdpr__body {
  min-width: 0;
}

.account-gdpr__title {
  margin: 0;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.account-gdpr__text {
  margin: 10px 0 0;
  line-height: 1.65;
}

.account-gdpr__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

a.account-gdpr__link {
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

a.account-gdpr__link:hover {
  color: var(--text-color, #1D191B);
  text-decoration-color: var(--text-color, #1D191B);
  text-decoration-thickness: 2px;
}

/* État vide (Bons, Avoirs, Commandes) : encadré crème centré, rond rose. */
.account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 32px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
  text-align: center;
}

.account-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--tertiary-color, #FFEAF7);
}

.account-empty__icon .account-menu__svg {
  width: 26px;
  height: 26px;
  color: var(--text-color, #1D191B);
}

.account-empty__title {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-base, sans-serif);
  font-size: 1rem;
  font-weight: 700;
}

.account-empty__text {
  max-width: 420px;
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .customer-form--identity .account-form__group {
    padding: 40px 20px 4px;
  }

  .account-empty {
    padding: 40px 20px;
  }
}

/* === Charte v2 — Mes listes (a4w_lists 1.6.0), habillage du thème (refs#6694, retour du 29/10) ===
   Maquette Listes. Gabarits du module intacts (F4) : sélecteurs préfixés par .a4w-mylists-layout
   (0,2,0) pour passer devant les règles du module (0,1,0). Le bouton « Tout ajouter au panier » de
   l'en-tête est retiré : la maquette n'en garde qu'un, au pied de la liste. */
.a4w-mylists-layout .a4w-lists-nav {
  gap: 0;
  margin-bottom: 0;
  padding: 20px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

.a4w-mylists-layout .a4w-lists-nav__title {
  margin: 0 0 14px;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.a4w-mylists-layout .a4w-lists-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--border-radius, 3px);
  color: var(--medium-gray, #565254);
  text-decoration: none;
}

.a4w-mylists-layout .a4w-lists-nav__link:hover {
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
}

.a4w-mylists-layout .a4w-lists-nav__link.is-current {
  background-color: var(--tertiary-color, #FFEAF7);
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

.a4w-mylists-layout .a4w-lists-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: 11px;
  background-color: var(--white-color, #FFFFFF);
  font-size: 0.75rem;
}

.a4w-mylists-layout .a4w-lists-nav__new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px dashed var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background: none;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, serif);
  font-size: 1rem;
  font-weight: 500;
}

.a4w-mylists-layout .a4w-lists-nav__new:hover {
  border-color: var(--text-color, #1D191B);
}

/* En-tête de la liste : nom en H2, pastille « Par défaut » cerclée d'or, menu « … » sans cadre ;
   sans filet dessous, le tableau suit à 20 px. */
.a4w-mylists-layout .a4w-mylists {
  gap: 20px;
}

.a4w-mylists-layout .a4w-mylists__header {
  padding-bottom: 0;
  border-bottom: 0;
}

.a4w-mylists-layout .a4w-mylists__name {
  margin: 0;
  font-family: var(--h2-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: var(--h2-font-weight, 600);
  line-height: 1.2;
  color: var(--text-color, #1D191B);
}

.a4w-mylists-layout .a4w-mylists__badge {
  padding: 4px 10px;
  border: 1px solid var(--link-decoration-color, #B68A56);
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
  color: var(--text-color, #1D191B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.a4w-mylists-layout .a4w-mylists__meta {
  margin: 6px 0 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.a4w-mylists-layout .a4w-mylists__header .a4w-mylists__add-all {
  display: none;
}

.a4w-mylists-layout .a4w-mylists__menu-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: var(--border-radius, 3px);
  background: none;
}

.a4w-mylists-layout .a4w-mylists__menu-toggle:hover {
  border-color: var(--input-border-color, #8E8C8D);
}

/* Produits et total dans un même encadré : en-tête crème en petites capitales, pied crème. */
@media (min-width: 768px) {
  .a4w-mylists-layout .a4w-mylists__table {
    border: 1px solid var(--border-color, #E4E3E4);
    border-bottom: 0;
    border-radius: var(--border-radius, 3px) var(--border-radius, 3px) 0 0;
  }

  .a4w-mylists-layout .a4w-mylists__row {
    padding: 16px;
  }

  .a4w-mylists-layout .a4w-mylists__row--head {
    padding: 14px 16px;
    background-color: var(--account-bg-color, #FAF7F4);
    color: var(--muted-color, #6C6A6B);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .a4w-mylists-layout .a4w-mylists__summary {
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: 0 0 var(--border-radius, 3px) var(--border-radius, 3px);
  }

  /* Tableau et total d'un seul tenant : l'écart du conteneur du module est annulé. */
  .a4w-mylists-layout .a4w-mylists__table + .a4w-mylists__summary {
    margin-top: -20px;
  }
}

.a4w-mylists-layout .a4w-mylists__product {
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

.a4w-mylists-layout .a4w-mylists__summary {
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
}

.a4w-mylists-layout .a4w-mylists__summary-total {
  font-family: var(--h2-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: var(--h2-font-weight, 600);
  line-height: 1.2;
}

/* === Charte v2 — CPT-07 Espace client mobile : menu déroulant et cartes (refs#6694) ===
   Mobile uniquement (≤ 767.98 px) : au-dessus, le menu latéral et les tableaux restent ceux de la
   maquette bureau. Le menu est le même <nav> que celui du bureau, précédé d'un bouton
   (components/account-menu.tpl, assets/js/custom.js) ; sans JavaScript la liste reste affichée. */
@media (max-width: 767.98px) {
  .account-menu-wrap {
    margin: 0 0 16px;
  }

  .account-menu__toggle {
    display: none;
  }

  .account-menu-wrap.is-enhanced .account-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
    color: var(--text-color, #1D191B);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }

  .account-menu__toggle:focus-visible {
    outline: 2px solid var(--text-color, #1D191B);
    outline-offset: 2px;
  }

  .account-menu__toggle-text {
    display: block;
    min-width: 0;
  }

  .account-menu__toggle-kicker {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--medium-gray, #565254);
  }

  .account-menu__toggle-current {
    display: block;
    overflow-wrap: anywhere;
  }

  .account-menu__toggle-chevron {
    flex: 0 0 auto;
  }

  .account-menu-wrap.is-open .account-menu__toggle-chevron {
    transform: rotate(180deg);
  }

  /* Liste fermée : retirée de l'arbre d'accessibilité et de l'ordre de tabulation. */
  .account-menu-wrap.is-enhanced:not(.is-open) .account-menu {
    display: none;
  }

  .account-menu-wrap.is-enhanced {
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
  }

  .account-menu-wrap.is-enhanced .account-menu__toggle {
    border: 0;
  }

  .account-menu-wrap .account-menu {
    margin: 0;
    padding: 4px 8px 8px;
    border-top: 1px solid var(--border-color, #E4E3E4);
  }

  .account-menu-wrap .account-menu__signout {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .account-menu-wrap .account-menu > a,
  .account-menu-wrap .account-menu__signout > a {
    min-height: 44px;
    padding: 12px 14px;
    border-bottom: 0;
    border-radius: var(--border-radius, 3px);
  }

  .account-menu-wrap .account-menu > a.active,
  .account-menu-wrap .account-menu > a[aria-current="page"] {
    background-color: var(--tertiary-color, #FFEAF7);
  }

  /* « Mes listes » : le bloc de listes du module passe sous le menu déroulant, qui ouvre la page. */
  .a4w-mylists-layout__aside {
    display: flex;
    flex-direction: column;
  }

  .a4w-mylists-layout__aside .account-menu-wrap {
    order: -1;
  }

  /* Le retour « Mon compte » du module (a4w_lists) est remplacé par le menu déroulant. */
  a.account-menu__back {
    display: none;
  }

  /* Détail de commande : produits et suivi en cartes, au cadre des tableaux du compte. */
  .account-layout .order__items .order__item,
  .account-layout .shipping-lines .table-wrapper {
    width: 100%;
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
  }

  .account-layout .shipping-lines ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Détail de commande : produits (cartes .order__items), suivi (.shipping-lines), historique du statut. */
  .account-layout .order__items .order__item > .row,
  .account-layout .order__items .order__item__header {
    --bs-gutter-x: 0;
  }

  .account-layout .order__items .order__item__header > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .account-layout .order__items .order__item__header > .col-8 {
    padding-left: 12px;
  }

  .account-layout .order__item__line {
    --bs-gutter-x: 0;
    padding: 8px 0 0;
    margin: 8px 0 0;
    border-top: 1px solid var(--border-color, #E4E3E4);
  }

  .account-layout .order__item__label,
  .account-layout .shipping-lines .fw-bold {
    color: var(--muted-color, #6C6A6B);
    font-size: var(--font-size-small, 14px);
    font-weight: 400 !important;
  }

  .account-layout .shipping-lines li.row {
    --bs-gutter-x: 0;
    padding: 6px 0;
    border-top: 1px solid var(--border-color, #E4E3E4);
  }

  .account-layout .shipping-lines li.row:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .account-layout .shipping-lines li.row p {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .account-layout .order__items hr {
    margin: 16px 0;
    border-color: var(--border-color, #E4E3E4);
    opacity: 1;
  }

  .account-layout .order__items .order__total {
    --bs-gutter-x: 0;
    padding: 4px 0;
  }

  /* Tableau « Suivi du statut » du détail : une carte par ligne, libellés issus des data-label. */
  .order-history__table,
  .order-history__table tbody,
  .order-history__table tr,
  .order-history__table td {
    display: block;
    width: 100%;
  }

  .order-history__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .order-history__table tr {
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
  }

  .order-history__table td {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }

  .order-history__table td:first-child {
    font-family: var(--font-family-title, serif);
    font-size: var(--font-size-h5, 1.125rem);
    font-weight: 600;
  }

  .order-history__table td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #E4E3E4);
  }

  .order-history__table td[data-label]::before {
    content: attr(data-label);
    color: var(--muted-color, #6C6A6B);
    font-size: var(--font-size-small, 14px);
  }

  /* Mes listes (a4w_lists) : une carte par produit, au même cadre que les autres cartes du compte. */
  .a4w-mylists__table .a4w-mylists__row:not(.a4w-mylists__row--head) {
    margin: 0 0 12px;
    padding: 16px;
    border: 1px solid var(--border-color, #E4E3E4);
    border-radius: var(--border-radius, 3px);
    background-color: var(--white-color, #FFFFFF);
  }
}

/* === Fiche produit — maquette Produit-B (recette du 28/10, refs#6694) ===
   Colonne d'achat : titre H1, prix (rétabli sous le titre), description, déclinaisons, quantité et
   bouton de 56 px, ligne d'expédition, réassurance sur fond crème ; galerie et accordéons. Portée :
   body#product. Couleurs et tailles par jetons du thème avec repli. */

/* Titre et favori. */
#product .product__header {
  align-items: flex-start;
  gap: 16px;
}

#product .product__name {
  margin: 0;
  color: var(--h1-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h1, 2.4375rem);
  font-weight: 600;
  line-height: 1.15;
}

#product .product__header .a4w-lists-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--text-color, #1D191B);
  border-radius: 50%;
  background-color: var(--background-color, #FFFFFF);
  color: var(--text-color, #1D191B);
}

#product .product__header .a4w-lists-trigger:hover,
#product .product__header .a4w-lists-trigger.a4w-lists-trigger--active {
  background-color: var(--tertiary-color, #FFEAF7);
}

/* Prix : barré, prix en Gelasio, pastille de remise, poids · prix au kilo sur la même ligne. */
#product .product__prices {
  margin-top: 12px;
}

#product .product__prices .prices__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

#product .product__price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
}

#product .product__price-regular {
  color: var(--muted-color, #6C6A6B);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

#product .product__current-price {
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

#product .product__discount-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--promo-color, #A33362);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

#product .product__unit-price,
#product .product__pack-price,
#product .product__ecotax-price,
#product .product__price-taxless {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

/* Le prix est sous le titre : la pastille de remise de la galerie ferait doublon. */
#product .product__images .product-flags .discount,
#product .product__images .product-flags .discount-percentage,
#product .product__images .product-flags .discount-amount {
  display: none;
}

/* Description courte : première phrase en accroche, le reste à l'encre 2 ; filet dessous. */
#product .product__description-short {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

#product .product__description-short p {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
  line-height: 1.65;
}

#product .product__description-short p:first-child {
  color: var(--text-color, #1D191B);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

/* Déclinaisons. */
#product .product__variants {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px;
}

#product .product__variants .variant {
  gap: 8px;
}

#product .product__variants .form-label {
  display: block;
  margin-bottom: 0;
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Quantité : libellé « Qté » dans la même boîte que la liste, 56 px, comme le bouton. */
#product .product__add-to-cart {
  margin-top: 24px;
}

/* Le bloc de disponibilité vide gardait la marge « mb-3 » de Bootstrap (!important) au-dessus de la
   quantité ; une alerte de stock garde la sienne. */
#product .product__add-to-cart > .mb-3 {
  margin-bottom: 0 !important;
}

#product .product__add-to-cart .product-availability .alert {
  margin-bottom: 16px;
}

#product .product-actions__quantity.quantity-select {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  padding: 0 0 0 14px;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background-color: var(--background-color, #FFFFFF);
}

#product .product-actions__quantity .quantity-select__label {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#product .product-actions__quantity > select.quantity-select__input {
  min-height: 54px;
  padding: 0 36px 0 6px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

#product .add-to-cart--with-price {
  width: 100%;
  min-height: 56px;
  gap: 10px;
}

#product .add-to-cart__icon {
  flex-shrink: 0;
}

/* Mobile (maquette à 390 px) : bouton sur une ligne, boîte de quantité étroite (libellé lu
   seulement par les lecteurs d'écran, CAT-05). */
@media (max-width: 575.98px) {
  #product .add-to-cart--with-price {
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 1.0625rem;
    white-space: nowrap;
  }

  #product .add-to-cart--with-price .add-to-cart__label {
    flex: 0 1 auto;
  }

  #product .product-actions__quantity.quantity-select {
    padding-left: 0;
  }

  #product .product-actions__quantity > select.quantity-select__input {
    padding: 0 30px 0 14px;
  }
}

/* Sous le bouton : expédition (coche, vert succès) et livraison offerte (cadeau or). */
#product .product__shipping {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
  font-size: 0.875rem;
}

#product .product__shipping > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#product .product__shipping .product__delivery__information {
  color: var(--alert-success-color, #2F6B4F);
  font-weight: 600;
}

#product .product__free-shipping {
  color: var(--medium-gray, #565254);
}

#product .product__free-shipping svg {
  color: var(--link-decoration-color, #B68A56);
}

/* Réassurance : carte crème, deux colonnes, pictos de 45 px de large (hauteur libre, sans fond :
   refs#6725), texte de 14 px. */
#product .blockreassurance_product {
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--light-bg, #FAF7F4);
}

#product .blockreassurance_product .reassurance-product-page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin: 0;
}

#product .blockreassurance_product .reassurance-product-page > div {
  display: flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#product .blockreassurance_product .item-product {
  flex: 0 0 45px;
  width: 45px;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;
}

#product .blockreassurance_product .item-product img,
#product .blockreassurance_product .item-product svg {
  display: block;
  width: 45px;
  height: auto;
  background: none;
}

#product .blockreassurance_product .block-title {
  color: var(--text-color, #1D191B);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 575.98px) {
  #product .blockreassurance_product .reassurance-product-page {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Galerie : flèches rondes blanches de 48 px, chevron à l'encre. */
#product .product__images .carousel-control-prev,
#product .product__images .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 48px;
  height: 48px;
  margin: 0 16px;
  border-radius: 50%;
  background-color: var(--background-color, #FFFFFF);
  opacity: 1;
  transform: translateY(-50%);
}

#product .product__images .carousel-control-prev-icon,
#product .product__images .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  filter: invert(1) grayscale(1);
}

/* Accordéons : filets clairs (ils étaient à l'encre), intitulés Gelasio de 18 px. */
#product .product__infos,
#product #product-infos-accordion {
  --bs-accordion-border-color: var(--border-color, #E4E3E4);
  border-top: 0;
}

#product .product__infos .info.accordion-item {
  border: 0;
  border-top: 1px solid var(--border-color, #E4E3E4);
  background-color: transparent;
}

#product .product__infos .info.accordion-item:last-child {
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

#product .product__infos .accordion-button {
  min-height: 60px;
  padding-right: 0;
  padding-left: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: 1.125rem;
  font-weight: 600;
}

/* Contenu des accordéons : texte de 14 px, 24 px sous le contenu, sans retrait latéral. */
#product .product__infos .accordion-body {
  padding: 0 0 24px;
  line-height: 1.65;
}

/* Description longue à 16 px (.rich-text la descendait à 13 px), comme le texte des ingrédients. */
#product .product__description p,
#product .product__description li {
  font-size: 1rem;
  line-height: 1.65;
}

/* Ingrédients (a4w_productingredients) : « Allergènes » en étiquette (capitales, 12 px, encre 3). */
#product .a4w-product-ingredients__label {
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Détails du produit (dl) : libellé à l'encre 2 à gauche, valeur à droite, comme la maquette.
   Remplace la grille de 3 colonnes de l'ancien balisage (ul > li.detail). */
#product .product__details {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  gap: 10px 24px;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

#product .product__details dt {
  color: var(--medium-gray, #565254);
  font-weight: 400;
}

#product .product__details dd {
  margin: 0;
  color: var(--text-color, #1D191B);
  overflow-wrap: break-word;
}

/* a4w_weightcalculator (remplacé par a4w_unitprice, à désinstaller) ajoute ses propres lignes
   « li.detail » : elles feraient doublon avec le poids net et le prix au kilo. */
#product .product__details > li {
  display: none;
}

/* Valeurs nutritionnelles (a4w_productnutrition) : une colonne de 480 px au plus, filets au-dessus
   de chaque ligne, valeur à droite, « dont … » en retrait, référence en légende. */
#product .a4w-product-nutrition {
  gap: 8px;
  max-width: 480px;
}

#product .a4w-product-nutrition__reference {
  color: var(--medium-gray, #565254);
  font-size: 0.75rem;
}

#product .a4w-product-nutrition__grid {
  columns: 1;
}

#product .a4w-product-nutrition__label,
#product .a4w-product-nutrition__value {
  padding: 8px 0;
  border-top: 1px solid var(--border-color, #E4E3E4);
  border-bottom: 0;
  font-size: 0.875rem;
}

#product .a4w-product-nutrition__value {
  font-weight: 400;
}

#product .a4w-product-nutrition__label--sub {
  padding-left: 16px;
  color: var(--medium-gray, #565254);
}

/* Parfums (a4w_productfragrances) : section crème sur toute la largeur de l'écran (ombre portée
   pleine, sans effet sur la mise en page), titre Gelasio 600. */
#product .a4w-fragrances {
  margin-top: 96px;
  padding: 64px 0;
  background-color: var(--light-bg, #FAF7F4);
  box-shadow: 0 0 0 100vmax var(--light-bg, #FAF7F4);
  clip-path: inset(0 -100vmax);
}

#product .a4w-fragrances__title {
  color: var(--h2-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: 600;
}

/* Produits associés (a4w_similar) : comme « Dans la même catégorie » de la maquette — titre à
   gauche dans la gouttière du contenu, fond blanc, flèches rondes de 44 px à droite du titre. */
#product .background-medium {
  background-color: transparent;
}

#product #a4w_similar,
#product #a4w_similar .featured-products-inner {
  padding: 0;
  background-color: transparent;
}

/* La section est déjà dans le conteneur de la page : ni gouttière ni largeur propres (le module
   imposait sa largeur en !important). */
#product #a4w_similar .center,
#product #a4w_similar .container {
  width: 100% !important;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

#product #a4w_similar .center {
  display: block;
  margin-bottom: 32px;
  padding-right: 104px;
}

#product #a4w_similar .a4w-similar-carousel-wrapper {
  padding: 0;
}

#product #a4w_similar .a4w-similar-nav {
  position: static;
  transform: none;
}

#product #a4w_similar .products-section-title {
  margin: 0;
  color: var(--h2-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: 600;
  text-align: left;
}

#product #a4w_similar .a4w-similar-carousel-wrapper {
  position: relative;
}

#product #a4w_similar .a4w-similar-prev,
#product #a4w_similar .a4w-similar-next {
  position: absolute;
  top: -76px;
  left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: 50%;
  background-color: var(--background-color, #FFFFFF);
  box-shadow: none;
  color: var(--medium-gray, #565254);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#product #a4w_similar .a4w-similar-prev {
  right: 52px;
}

#product #a4w_similar .a4w-similar-next {
  right: 0;
}

#product #a4w_similar .a4w-similar-prev:hover,
#product #a4w_similar .a4w-similar-next:hover {
  border-color: var(--text-color, #1D191B);
  color: var(--text-color, #1D191B);
}

/* Le thème dessine ces chevrons en blanc (::after, pour un fond sombre) : ici, masque à la couleur
   du bouton. */
#product #a4w_similar .a4w-similar-prev::after,
#product #a4w_similar .a4w-similar-next::after {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  background-image: none;
}

#product #a4w_similar .a4w-similar-prev::after {
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") center / contain no-repeat;
}

#product #a4w_similar .a4w-similar-next::after {
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center / contain no-repeat;
}

/* === Carrousel à défilement natif : « Déjà vus » (ps_viewedproduct), recette du 28/10 ===
   Rangée en scroll-snap (4 cartes, 2 sous 992 px, 1 et l'amorce de la suivante sous 576 px) ;
   titre à gauche, flèches rondes de 44 px à droite (custom.js), masquées quand tout tient. */
.a4w-scroll-carousel {
  margin-top: 96px;
}

.a4w-scroll-carousel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.a4w-scroll-carousel .a4w-scroll-carousel__title {
  margin: 0;
  color: var(--h2-color, #1D191B);
  font-family: var(--font-family-title, Georgia, serif);
  font-size: var(--font-size-h2, 1.9375rem);
  font-weight: 600;
  line-height: 1.2;
}

.a4w-scroll-carousel__nav {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.a4w-scroll-carousel.is-static .a4w-scroll-carousel__nav {
  display: none;
}

.a4w-scroll-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: 50%;
  background-color: var(--background-color, #FFFFFF);
  color: var(--medium-gray, #565254);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.a4w-scroll-carousel__btn:hover:not(:disabled) {
  border-color: var(--text-color, #1D191B);
  color: var(--text-color, #1D191B);
}

.a4w-scroll-carousel__btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.a4w-scroll-carousel__btn:focus-visible,
.a4w-scroll-carousel__track:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

.a4w-scroll-carousel__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.a4w-scroll-carousel__track::-webkit-scrollbar {
  display: none;
}

.a4w-scroll-carousel .a4w-scroll-carousel__list {
  display: grid;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  grid-auto-flow: column;
  column-gap: 24px;
  margin: 0;
}

.a4w-scroll-carousel .a4w-scroll-carousel__item {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
}

@media (max-width: 991.98px) {
  .a4w-scroll-carousel .a4w-scroll-carousel__list {
    grid-auto-columns: calc((100% - 24px) / 2);
  }
}

@media (max-width: 767.98px) {
  .a4w-scroll-carousel {
    margin-top: 64px;
  }
}

@media (max-width: 575.98px) {
  .a4w-scroll-carousel .a4w-scroll-carousel__list {
    grid-auto-columns: 78%;
    column-gap: 16px;
  }
}

/* === Charte v2 — Panier et tunnel, reprise du 29/10 (refs#6694 ; maquettes Panier, Tunnel-*, Confirmation) ===
   Panier et tunnel : contenu + colonne de 380 px à 56 px ; titres de page à la taille H1 ; bandeau
   d'étapes crème (pastilles cerclées, coche sur les étapes faites) ; récapitulatif encadré avec son
   titre ; réassurance sur fond crème, une ligne par argument ; cartes des transporteurs et des
   moyens de paiement (cadre à l'encre sur le choix). Section placée en fin de fichier : elle passe
   devant les règles TUN-01 à TUN-08 de même spécificité. */

/* Grille : contenu + récapitulatif de 380 px. */
@media (min-width: 992px) {
  .cart-grid.row,
  .checkout-grid > .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 0 56px;
    align-items: start;
    margin-right: 0;
    margin-left: 0;
  }

  .cart-grid.row > .cart-grid__body,
  .cart-grid.row > .cart-grid__right,
  .checkout-grid > .row > .cart-grid-body,
  .checkout-grid > .row > .cart-grid-right {
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  .cart-grid.row > .cart-grid__mobile-after,
  .cart-grid.row > :not(.cart-grid__body):not(.cart-grid__right) {
    grid-column: 1 / -1;
  }
}

/* Titres de page : « Votre panier », titre de l'étape en cours. */
.cart-grid__title,
#checkout .step__title .step__title-left {
  margin: 0;
  font-family: var(--h1-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h1, 2.4375rem);
  font-weight: var(--h1-font-weight, 600);
  line-height: 1.15;
  text-transform: none;
  color: var(--text-color, #1D191B);
}

.cart-grid__title {
  margin: 8px 0 32px;
}

#checkout .step .step__title {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
}

/* Pas de filet sous le titre d'étape ni au-dessus de la réassurance (maquettes). */
#checkout .step__title hr,
#checkout .checkout-reassurance > hr {
  display: none;
}

/* Navigation des étapes : filet au-dessus, retour à gauche, suite à droite. */
#checkout .checkout-step__nav {
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

/* Cartes d'adresse du tunnel : nom de l'adresse en gras, le reste en encre 2 (la règle T-0065 qui
   mettait la première ligne en gras ne vaut plus ici), boutons compacts, « Modifier » souligné. */
#checkout .a4w-addr-card address.address__content,
#checkout .a4w-addr__current address.address__content {
  color: var(--medium-gray, #565254);
}

#checkout .a4w-addr-card address.address__content::first-line,
#checkout .a4w-addr__current address.address__content::first-line {
  font-weight: 400;
}

#checkout .a4w-addr__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

#checkout a.a4w-addr__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

#checkout .a4w-addr__acts .btn,
#checkout .a4w-addr-card .btn {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 1rem;
}

/* « Identique à l'adresse de livraison » : texte courant, pas un nom d'adresse (maquette). */
#checkout .a4w-addr-card__alias--same,
#checkout .a4w-addr__current .a4w-addr-card__alias--same {
  color: var(--medium-gray, #565254);
  font-weight: 400;
}

#checkout a.a4w-addr-card__link {
  color: var(--text-color, #1D191B);
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

/* Surtitres et chapô des étapes. */
.checkout-tag {
  margin: 0 0 8px;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.checkout-tag__req {
  margin-left: 2px;
  color: var(--accent-text-color, #8C6634);
}

.checkout-intro {
  margin: -8px 0 24px;
  color: var(--medium-gray, #565254);
}

.checkout-hint {
  margin: 6px 0 0;
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

/* Bandeau d'étapes : crème, libellés de 14 px, pastilles de 26 px cerclées ; étape faite = pastille
   pleine à la coche, étape en cours = cercle à l'encre et libellé gras, étape à venir = gris. */
#checkout .checkout__steps {
  border-bottom: 1px solid var(--border-color, #E4E3E4);
  background-color: var(--account-bg-color, #FAF7F4);
}

#checkout .checkout__steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--input-border-color, #8E8C8D);
  border-radius: 50%;
  background-color: var(--white-color, #FFFFFF);
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

#checkout .checkout__steps--current .checkout__steps__number {
  border-color: var(--text-color, #1D191B);
  color: var(--text-color, #1D191B);
}

#checkout .checkout__steps--success .checkout__steps__number {
  border-color: var(--text-color, #1D191B);
  background-color: var(--text-color, #1D191B);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  color: transparent;
}

#checkout .checkout__steps__text {
  color: var(--muted-color, #6C6A6B);
  font-family: var(--font-family-base, sans-serif);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
}

#checkout .checkout__steps--success .checkout__steps__text {
  color: var(--text-color, #1D191B);
}

#checkout .checkout__steps--current .checkout__steps__text {
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

/* Récapitulatif : encadré blanc, titre, « N articles · Afficher le détail + », lignes, total en
   Gelasio, livraison offerte en vert. */
.cart-grid__right .cart-summary,
#checkout .cart-summary {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
  box-shadow: none;
}

.cart-summary .card-block {
  padding: 0;
}

.cart-summary__title {
  margin: 0 0 20px;
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: var(--h3-font-weight, 600);
  line-height: 1.3;
  color: var(--text-color, #1D191B);
}

.cart-summary__products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.cart-summary__count {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

a.cart-summary__show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--medium-gray, #565254);
  text-decoration: none;
}

a.cart-summary__show:hover {
  color: var(--text-color, #1D191B);
}

.cart-summary__show-icon {
  transition: transform 0.15s ease;
}

a.cart-summary__show[aria-expanded="true"] .cart-summary__show-icon {
  transform: rotate(45deg);
}

.cart-summary .cart-summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 4px 0;
}

/* Rythme vertical du récapitulatif : 16px entre chaque bloc. Les lignes
   internes portent deja 4px de padding, les conteneurs sont donc regles a
   12px pour un ecart visuel homogene. */
.cart-summary .cart-detailed__subtotals,
.cart-summary .cart-summary__subtotals__container {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

.cart-summary .cart-summary__label {
  color: var(--medium-gray, #565254);
}

.cart-summary .cart-summary__value {
  color: var(--text-color, #1D191B);
}

.cart-summary .cart-summary__line--free .cart-summary__value {
  color: var(--alert-success-color, #2F6B4F);
  font-weight: 600;
}

/* Un seul filet entre « Livraison » et « Total TTC » : celui des sous-totaux (le thème en posait
   un second en haut du bloc du total, 12 px plus bas). */
.cart-summary .cart-summary__totals {
  margin-top: 0;
  padding: 12px 0;
  border-top: 0;
}

/* Rappel « Livraison / Facturation » sous le total : filet, puis 16 px avant le premier surtitre,
   12 px entre les deux rappels (maquette Paiement). */
.cart-summary .cart-summary__recap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border-color, #E4E3E4);
}

.cart-summary .cart-summary__recap-label {
  margin: 0 0 2px;
}

.cart-summary .cart-summary__recap-text {
  margin: 0;
}

.cart-summary .cart-total .cart-summary__label,
.cart-summary .cart-total .cart-summary__value {
  color: var(--text-color, #1D191B);
  font-family: var(--h3-font-family, var(--font-family-title, serif));
  font-size: var(--font-size-h3, 1.5625rem);
  font-weight: 600;
  line-height: 1.2;
}

.cart-summary .cart-summary__label--sub {
  color: var(--muted-color, #6C6A6B);
  font-size: 0.75rem;
}

/* Separateurs du bloc « Code promo » : le <hr> de Bootstrap est en
   currentColor a 25% d'opacite et a 12px/16px de marge, il tranchait avec les
   border-bottom des autres blocs. Marge basse a 12px : le bouton
   .accordion-button porte 4px de padding, l'ecart reste donc de 16px. */
.cart-summary .cart-voucher hr {
  margin: 16px 0 12px;
  border-top: 1px solid var(--border-color, #E4E3E4);
  opacity: 1;
}

/* Réassurance (blockreassurance) sous le récapitulatif : fond crème, une ligne par argument. */
.cart-grid__right .blockreassurance_product,
#checkout .checkout-reassurance .blockreassurance_product {
  margin: 20px 0 0;
  padding: 20px;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
}

.cart-grid__right .reassurance-cart-checkout,
#checkout .reassurance-cart-checkout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.cart-grid__right .reassurance-cart-item,
#checkout .reassurance-cart-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.cart-grid__right .reassurance-cart-item .item-product,
#checkout .reassurance-cart-item .item-product {
  flex: none;
  width: 30px;
  height: 30px;
  margin: 0;
}

.cart-grid__right .reassurance-cart-item img,
#checkout .reassurance-cart-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.cart-grid__right .reassurance-cart-item .block-title,
#checkout .reassurance-cart-item .block-title,
.cart-grid__right .reassurance-cart-checkout .reassurance-cart-item .block-title,
#checkout .reassurance-cart-checkout .reassurance-cart-item .block-title {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-size: 0.9375rem;
  font-weight: 400;
}

.cart-grid__right .reassurance-cart-item .block-description,
#checkout .reassurance-cart-item .block-description {
  display: none;
}

/* Lignes du panier : vignette, nom en Gelasio, déclinaisons et prix unitaire en légende ; quantité,
   « Mettre de côté » et « Retirer » sur une ligne ; total de la ligne en haut à droite. */
.cart-overview .product-line {
  display: grid;
  grid-template-columns: 98px auto minmax(0, 1fr) auto;
  grid-template-areas:
    "img content content total"
    "img qty actions actions";
  gap: 12px 18px;
  margin: 0;
  padding: 24px 0;
}

.cart-overview .product-line > [class*="col-"] {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.cart-overview .product-line > div:empty {
  display: none;
}

.cart-overview .product-line__image {
  grid-area: img;
}

.cart-overview .product-line__image img {
  width: 98px;
  height: 98px;
  object-fit: cover;
  border-radius: var(--border-radius, 3px);
  background-color: var(--account-bg-color, #FAF7F4);
}

.cart-overview .product-line__content {
  grid-area: content;
  min-width: 0;
}

.cart-overview .product-line__content .product-line__title {
  display: block;
  margin: 0 0 4px;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
}

.cart-overview .product-line__info,
.cart-overview .product-line__prices {
  margin: 0;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

.cart-overview .product-line__informations,
.cart-overview .product-line__informations > .row {
  display: contents;
}

.cart-overview .product-line__informations .quantity-button {
  grid-area: qty;
  width: auto;
  padding: 0;
}

.cart-overview .product-line__informations > .row > .col-12:last-child {
  grid-area: total;
  width: auto;
  padding: 0;
  text-align: right;
}

.cart-overview .product-line__total {
  color: var(--text-color, #1D191B);
  font-size: 1.125rem;
  font-weight: 700;
}

.cart-overview .product-line__actions {
  display: flex;
  flex-wrap: wrap;
  grid-area: actions;
  align-items: center;
  gap: 8px 24px;
}

/* « Mettre de côté » (a4w_lists) avant « Retirer », comme la maquette. */
.cart-overview .product-line__actions .remove-from-cart {
  order: 1;
}

/* Ligne étroite (576 à 767.98 px : conteneur de 540 px ; 992 à 1199.98 px : le récapitulatif
   occupe la droite) : la ligne fait 500 à 516 px et les actions n'ont plus la place à côté de la
   quantité. Comme la maquette, la quantité reste seule et « Mettre de côté » et « Retirer »
   passent dessous, côte à côte ; « Retirer » passait seul à la ligne (retour du 29/10). */
@media (min-width: 576px) and (max-width: 767.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .cart-overview .product-line {
    grid-template-areas:
      "img content content total"
      "img qty qty qty"
      "img actions actions actions";
  }

  .cart-overview .product-line__informations .quantity-button {
    justify-self: start;
  }
}

/* Actions sous la quantité (ligne étroite, mobile) : le bouton du module recule de sa marge
   intérieure, son pictogramme tombe sur le bord du sélecteur de quantité (maquette). */
@media (max-width: 767.98px), (min-width: 992px) and (max-width: 1199.98px) {
  .cart-overview .product-line__actions .a4w-sfl {
    margin-left: -10px;
  }
}

/* Ajout rapide et « Continuer mes achats » sous la liste (maquette Panier). */
a.cart-grid__continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 24px;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

a.cart-grid__continue:hover {
  color: var(--text-color, #1D191B);
  text-decoration-color: var(--text-color, #1D191B);
}

/* Transporteurs : une carte par option, nom en Gelasio, prix à droite, délai dessous. */
#checkout .delivery-options__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: none;
}

#checkout .delivery-options__item {
  padding: 20px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

#checkout .delivery-options__item:has(input:checked) {
  padding: 19px;
  border: 2px solid var(--text-color, #1D191B);
}

#checkout .delivery-options__item > label > .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "left right"
    "center center";
  gap: 4px 16px;
  margin: 0;
}

#checkout .delivery-options__item > label > .row > * {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

#checkout .delivery-option__left {
  grid-area: left;
}

#checkout .delivery-options__item > label > .row > .delivery-option__center {
  grid-area: center;
  padding-left: 36px;
  color: var(--medium-gray, #565254);
  font-size: 0.875rem;
}

#checkout .delivery-option__right {
  grid-area: right;
  color: var(--text-color, #1D191B);
  font-weight: 600;
}

/* Bouton radio et nom côte à côte (les colonnes Bootstrap internes les écartaient). */
#checkout .delivery-option__left > .row,
#checkout .delivery-option__left .carrier > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin: 0;
}

#checkout .delivery-option__left > .row > *,
#checkout .delivery-option__left .carrier > .row > * {
  width: auto;
  max-width: none;
  padding: 0;
}

#checkout #delivery .form-label {
  font-size: 0.875rem;
  font-weight: 600;
}

#checkout .delivery-options__item .carrier-name {
  margin: 0;
  color: var(--text-color, #1D191B);
  font-family: var(--font-family-title, serif);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Moyens de paiement : une carte par option. */
#checkout .payment__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#checkout .payment__option {
  padding: 20px;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
  background-color: var(--white-color, #FFFFFF);
}

#checkout .payment__option:has(input[type="radio"]:checked) {
  padding: 19px;
  border: 2px solid var(--text-color, #1D191B);
}

#checkout .payment__option .form-check-label {
  margin-bottom: 0;
  font-weight: 600;
}

/* Navigation des étapes : filet au-dessus, retour en lien fléché souligné. */
#checkout .checkout-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: none;
}

/* Seul le libellé est souligné : un soulignement du bouton entier passait aussi sous la flèche, en
   plus de celui du libellé (deux traits). */
#checkout .checkout-back-link span {
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

#checkout .checkout-back-link .material-icons {
  font-size: 1rem;
}

/* Confirmation : lien « Continuer mes achats » souligné (le a:not(.alert-link) du thème l'emportait). */
a.order-confirmation__link {
  color: var(--text-color, #1D191B);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--link-decoration-color, #B68A56);
  text-underline-offset: 4px;
}

@media (max-width: 575.98px) {
  /* Maquette Panier mobile : sous le nom, la quantité, puis « Mettre de côté » et « Retirer » côte à
     côte, puis le total de la ligne, le tout dans la colonne du texte. */
  .cart-overview .product-line {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas:
      "img content"
      ". qty"
      ". actions"
      ". total";
    gap: 12px 16px;
  }

  .cart-overview .product-line__informations .quantity-button {
    justify-self: start;
  }

  .cart-overview .product-line__image img {
    width: 72px;
    height: 72px;
  }

  .cart-overview .product-line__informations > .row > .col-12:last-child {
    text-align: left;
  }

  #checkout .delivery-options__item > label > .row > .delivery-option__center {
    padding-left: 0;
  }
}

/* === Charte v2 — GEN-04 Méga-menu du bureau (refs#6694, retour du 30/10) ===
   Maquette Accueil (.mega) : panneau crème d'un bord à l'autre de l'écran sous l'en-tête, filet en
   tête, page voilée dessous ; colonnes de 296 px séparées d'un filet, 32 px de part et d'autre ;
   entrées en Gelasio 17 px sur des lignes de 44 px, soulignées au survol ; chevron fin. En tête de
   colonne, le même intitulé partout : « Nos produits » (titre du bloc) puis le rappel de la
   catégorie parente (réglage « Rappeler la catégorie parente », lien vers elle), en capitales de
   14 px, sur une ligne de 44 px alignée sur les entrées (retour du 30/10 : le rappel déplacé en
   « Voir tout » de fin de colonne ne disait plus où l'on est). Sans image (décision du 30/10).
   Réglages du module par ses variables ; `#header` pour passer devant ses sélecteurs, et
   `!important` seulement là où le module ou Bootstrap en posent (padding-block, .shadow-sm). */
@media (min-width: 1200px) {
  #header .a4w-megamenu {
    --a4w-mm-border: var(--border-color, #E4E3E4);
    --a4w-mm-text: var(--text-color, #1D191B);
    --a4w-mm-text-muted: var(--text-color, #1D191B);
    --a4wmm-col-pad: 32px;
    --a4wmm-chevron: 16px;
  }

  /* La ligne d'en-tête qui porte le panneau est centrée : de 50 % − 50vw à 50 % + 50vw, il couvre
     l'écran ; son conteneur garde le contenu aligné sur le logo et le menu. Le voile part du bas du
     panneau ; le découpage laisse passer le pont de survol du module (32 px au-dessus). */
  #header .a4w-megamenu .main-menu__tree > li > .menu-container.dropdown-menu2 {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    min-height: 400px;
    padding: 40px 0;
    border: 0;
    border-top: 1px solid var(--border-color, #E4E3E4);
    border-radius: 0;
    background: var(--light-bg, #FAF7F4);
    box-shadow: 0 100vmax 0 100vmax rgba(29, 25, 27, 0.18) !important;
    clip-path: inset(-32px -100vmax -100vmax -100vmax);
  }

  /* Largeur des colonnes de la maquette : posée sur la rangée, car le module écrit la sienne
     (réglage « Largeur des colonnes ») en style en ligne sur le menu. */
  #header .a4w-megamenu .menu-container .mega-menu-row {
    --a4wmm-col-width: 296px;
    gap: 0;
  }

  #header .a4w-megamenu .menu-container .mega-menu-column > ul {
    display: flex;
    flex-direction: column;
  }

  #header .a4w-megamenu .menu-container .mega-menu-column .menu-item > a:has(.menu-item-label) {
    min-height: 44px;
    padding: 0 !important;
    background: none;
  }

  #header .a4w-megamenu .menu-container .mega-menu-column .menu-item:hover > a {
    background: none;
  }

  #header .a4w-megamenu .menu-container .menu-item-label {
    font-family: var(--font-family-title, Gelasio, Georgia, serif);
    font-size: 1.0625rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-color, #1D191B);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.15s ease;
  }

  #header .a4w-megamenu .menu-container .menu-item:hover > a .menu-item-label,
  #header .a4w-megamenu .menu-container .menu-item > a:focus-visible .menu-item-label,
  #header .a4w-megamenu .menu-container .menu-item > a[aria-current="page"] .menu-item-label {
    text-decoration-color: var(--text-color, #1D191B);
  }

  /* Chevron fin à l'encre, à la place du « > » du module. */
  #header .a4w-megamenu .menu-container .menu-item > .chevron {
    width: 16px;
    height: 16px;
    margin-left: 12px;
    font-size: 0;
    color: var(--text-color, #1D191B);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: none;
  }

  /* Intitulés de colonne : « Nos produits » (texte) et rappel de la catégorie parente (lien), même
     ligne de 44 px, alignés sur le bord des entrées, d'où des entrées alignées d'une colonne à
     l'autre. Le « ‹ » et le filet du module sont retirés. */
  #header .a4w-megamenu .menu-container .mega-menu-column .menu-item.mg-title-parent,
  #header .a4w-megamenu .menu-container .mega-menu-column .menu-item.mega-menu-column-header {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
  }

  #header .a4w-megamenu .menu-container .mega-menu-column .mg-title-parent > .mg-title,
  #header .a4w-megamenu .menu-container .mega-menu-column .menu-item.mega-menu-column-header > a .menu-item-label {
    margin: 0;
    padding: 0 !important;
    font-family: var(--font-family-base, "Noto Sans", sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-color, #1D191B);
    opacity: 1;
  }

  #header .a4w-megamenu .menu-container .mega-menu-column-header .menu-item-label::before {
    content: none;
  }
}

/* === Charte v2 — GEN-04 En-tête sous 1200 px (refs#6694, retour du 30/10) ===
   Maquette Accueil mobile : menu à gauche, logo de 56 px au centre de l'écran, recherche, compte et
   panier à droite en cibles de 44 px côte à côte ; 8 px au-dessus et au-dessous. Le logo suivait le
   burger à gauche. La rangée d'en-tête est centrée dans l'écran : le logo s'y centre en position
   absolue, sans toucher à l'ordre du gabarit (marge gauche de 4 px neutralisée : elle le décalait,
   et sa source n'est pas dans custom.css). Centré, il couvrirait la loupe sous 382 px : 48 px de
   haut de 375 à 389 px, et retour dans le flux sous 375 px. */
@media (max-width: 1199.98px) {
  #header .header-bottom__row {
    position: relative;
    padding-block: 8px;
  }

  #header .header-bottom__row > .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    padding: 0;
    transform: translate(-50%, -50%);
  }

  #header .header-bottom__row .header-block__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  #header .header-bottom__row > .a4w-sb,
  #header .header-bottom__row > #_mobile_user_info,
  #header .header-bottom__row > #_mobile_cart {
    padding-inline: 0;
  }
}

@media (max-width: 389.98px) {
  #header .header-bottom__row > .logo img {
    height: 48px;
    width: auto;
  }
}

@media (max-width: 374.98px) {
  #header .header-bottom__row > .logo {
    position: static;
    transform: none;
  }
}

/* === Charte v2 — Barre de tri de la catégorie (refs#6694, retour du 30/10) ===
   Maquette Categorie : « 33 produits » (le nombre en gras, à l'encre) à gauche, « Trier par » et une
   liste de 220 × 48 px à droite, entre deux filets, à 40 px du texte d'intro et de la grille. Sous
   la largeur d'une ligne, le tri passe sous le compteur. Le menu Bootstrap du thème est conservé
   (les liens rechargent la liste en AJAX) et habillé comme le .select de la maquette. */
#js-product-list-top.products-selection {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 40px 0;
  padding: 16px 0;
  border-top: 1px solid var(--border-color, #E4E3E4);
  border-bottom: 1px solid var(--border-color, #E4E3E4);
}

#js-product-list-top .total-products {
  margin: 0;
  font-size: 0.875rem;
  line-height: normal;
  color: var(--medium-gray, #565254);
}

#js-product-list-top .total-products strong {
  color: var(--text-color, #1D191B);
}

#js-product-list-top .sort-by-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

#js-product-list-top .sort-by {
  font-size: 0.875rem;
  line-height: normal;
  color: var(--medium-gray, #565254);
}

#js-product-list-top .products-sort-order {
  position: relative;
}

#js-product-list-top .select-title {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  min-width: 220px;
  min-height: 48px;
  margin: 0;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--input-border-color, #8E8C8D);
  border-radius: var(--border-radius, 3px);
  background: var(--background-color, #FFFFFF);
  color: var(--text-color, #1D191B);
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
}

#js-product-list-top .select-title:hover {
  border-color: var(--text-color, #1D191B);
}

#js-product-list-top .select-title:focus-visible {
  outline: 2px solid var(--text-color, #1D191B);
  outline-offset: 2px;
}

#js-product-list-top .select-title__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  transition: transform 0.15s ease;
  pointer-events: none;
}

#js-product-list-top .select-title[aria-expanded="true"] .select-title__chevron {
  transform: translateY(-50%) rotate(180deg);
}

#js-product-list-top .products-sort-order .dropdown-menu {
  min-width: 100%;
  padding: 8px 0;
  border: 1px solid var(--border-color, #E4E3E4);
  border-radius: var(--border-radius, 3px);
}

#js-product-list-top .products-sort-order .dropdown-item {
  padding: 10px 14px;
  color: var(--text-color, #1D191B);
  font-size: 1rem;
}

#js-product-list-top .products-sort-order .dropdown-item:hover,
#js-product-list-top .products-sort-order .dropdown-item:focus-visible {
  background: var(--light-bg, #FAF7F4);
}

#js-product-list-top .products-sort-order .dropdown-item.current {
  background: none;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  #js-product-list-top .select-title__chevron {
    transition: none;
  }
}

/* === Pages CMS charte v2 construites au CMS Builder (refs#6694, 30/10) ===
   CSS propre aux pages Notre histoire (CMS 4), Nos fondants (CMS 11) et CGV (CMS 3), sorti des
   fichiers d'import : il n'est plus envoyé par « Enregistrer » du builder (le pare-feu du serveur
   refusait l'envoi en 406). Chaque règle est limitée à sa page par body.cms-id-N (le canvas du
   builder porte la même classe depuis a4w_cmsbuilder 1.11.2) ; body ajoute une spécificité qui
   passe devant le CSS des blocs et la règle mobile .a4w-section de blocks.js. Les blocs Récit
   gardent leurs propres règles, posées par le module. */

/* --- Notre histoire (CMS 4) --- */
body.cms-id-4 #content-wrapper .page-header {display:none}
body.cms-id-4 .nh-cap {display:block;margin:0 0 8px;font-family:var(--font-family-base,'Noto Sans',sans-serif);font-size:0.75rem;font-weight:600;line-height:1.5;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted-color,#6C6A6B)}
body.cms-id-4 .nh-story__grid {display:grid;grid-template-columns:180px minmax(0,1fr);gap:64px;align-items:start}
body.cms-id-4 .nh-quote {margin-top:96px;padding:96px 0;background:var(--tertiary-color,#FFEAF7);box-shadow:0 0 0 100vmax var(--tertiary-color,#FFEAF7);clip-path:inset(0 -100vmax)}
body.cms-id-4 .nh-quote__figure {max-width:860px;margin:0 auto;text-align:center}
body.cms-id-4 .nh-quote__quote {margin:0;padding:0;border:0}
body.cms-id-4 .nh-quote__text {font-family:var(--font-family-title,'Gelasio',serif);font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:400;line-height:1.45;color:var(--text-color,#1D191B)}
body.cms-id-4 .nh-quote__author {margin:24px 0 0;font-size:1rem;font-weight:600;line-height:1.5;color:var(--text-color,#1D191B)}
body.cms-id-4 .nh-quote__thanks {display:block;margin-top:8px;font-weight:400;color:var(--medium-gray,#565254)}
body.cms-id-4 .nh-h2 {margin:0 0 24px;font-family:var(--font-family-title,'Gelasio',serif);font-size:var(--font-size-h2,1.9375rem);font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--h2-color,#1D191B)}
body.cms-id-4 .nh-press {margin-top:96px}
body.cms-id-4 .nh-press__list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.cms-id-4 .nh-press__card {position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 32px;border:1px solid var(--border-color,#E4E3E4);border-radius:var(--border-radius,3px);background:var(--background-color,#FFFFFF);transition:border-color .15s ease}
body.cms-id-4 .nh-press__card:hover {border-color:var(--text-color,#1D191B)}
body.cms-id-4 .nh-press__card .nh-cap {margin:0}
body.cms-id-4 .nh-press__title {margin:0;font-family:var(--font-family-title,'Gelasio',serif);font-size:1.375rem;font-weight:500;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--text-color,#1D191B)}
body.cms-id-4 .nh-press__link {color:var(--text-color,#1D191B);text-decoration:none}
body.cms-id-4 .nh-press__link:hover {color:var(--text-color,#1D191B);text-decoration:none}
body.cms-id-4 .nh-press__link:focus-visible {outline:none}
body.cms-id-4 .nh-press__link::after {content:"";position:absolute;inset:0;border-radius:var(--border-radius,3px)}
body.cms-id-4 .nh-press__link:focus-visible::after {outline:2px solid var(--text-color,#1D191B);outline-offset:2px}
body.cms-id-4 .nh-press__more {display:flex;align-items:center;gap:8px;margin:0;font-size:0.875rem;font-weight:600;line-height:1.5;color:var(--text-color,#1D191B)}
body.cms-id-4 .nh-press__more::after {content:"";flex:0 0 14px;width:14px;height:14px;background-color:var(--accent-text-color,#8C6634);-webkit-mask:url("/themes/gumuchev2/assets/img/cms/icone-lien-externe.svg") center/contain no-repeat;mask:url("/themes/gumuchev2/assets/img/cms/icone-lien-externe.svg") center/contain no-repeat}
body.cms-id-4 .nh-visit {margin-top:96px;margin-bottom:96px;padding-top:56px;border-top:1px solid var(--border-color,#E4E3E4)}
body.cms-id-4 .nh-visit__grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
body.cms-id-4 .nh-visit__text {margin:0;font-size:1rem;line-height:1.7;color:var(--medium-gray,#565254)}
body.cms-id-4 .nh-visit__text a {color:var(--text-color,#1D191B);font-weight:600}
body.cms-id-4 .nh-sr {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (max-width:1199.98px) {
  body.cms-id-4 .nh-story__grid {grid-template-columns:minmax(0,1fr)}
}
@media (max-width:991.98px) {
  body.cms-id-4 .nh-press__list {grid-template-columns:minmax(0,1fr)}
  body.cms-id-4 .nh-visit__grid {grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:767.98px) {
  body.cms-id-4 .a4w-section {padding:0}
  body.cms-id-4 .a4w-container {padding:0}
  body.cms-id-4 .nh-quote {margin-top:64px;padding:64px 0}
  body.cms-id-4 .nh-press {margin-top:64px}
  body.cms-id-4 .nh-press__card {padding:24px}
  body.cms-id-4 .nh-visit {margin-top:64px;margin-bottom:64px;padding-top:48px}
}
body.cms-id-4 .a4w-section.a4w-story-chapter.nh-hero {padding-top:48px}
body.cms-id-4 .nh-chaps {display:flex;flex-direction:column;max-width:860px}
body.cms-id-4 .nh-chaps > .a4w-section.a4w-story-chapter:last-child {margin-bottom:0}
body.cms-id-4 .a4w-section.a4w-story-videotext.nh-fond {margin:96px 0 0}
@media (max-width:1199.98px) {
  body.cms-id-4 .nh-story__grid > .a4w-story-toc {display:none}
}
@media (max-width:767.98px) {
  body.cms-id-4 .a4w-section.a4w-story-chapter.nh-hero {padding-top:24px}
  body.cms-id-4 .a4w-section.a4w-story-videotext.nh-fond {margin-top:64px}
}

/* --- Nos fondants (CMS 11) --- */
body.cms-id-11 #content-wrapper .page-header {display:none}
body.cms-id-11 #wrapper {overflow-x:clip}
body.cms-id-11 .nf-bleed {margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
body.cms-id-11 .nf-kicker {margin:0;font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-color,#6C6A6B)}
body.cms-id-11 .nf-h2 {margin:10px 0 20px;font-family:var(--font-family-title,'Gelasio',serif);font-size:var(--font-size-h2,clamp(1.5625rem,1.43rem + .563vw,1.9375rem));font-weight:600;line-height:1.2;color:var(--h2-color,#1D191B)}
body.cms-id-11 .nf-text {margin:0 0 14px;font-size:1rem;line-height:1.75;color:var(--medium-gray,#565254)}
body.cms-id-11 .nf-hero__text {max-width:520px}
body.cms-id-11 .nf-manifest {margin-top:96px;padding:0;text-align:center}
body.cms-id-11 .nf-manifest__inner {padding:0}
body.cms-id-11 .nf-lead {max-width:900px;margin:0 auto;font-family:var(--font-family-title,'Gelasio',serif) !important;font-size:clamp(1.5rem,2.8vw,2.25rem);font-weight:400;line-height:1.45;color:var(--text-color,#1D191B)}
body.cms-id-11 .nf-manifest__text {max-width:640px;margin:28px auto 0}
body.cms-id-11 .nf-link {margin-top:6px}
body.cms-id-11 .nf-flavours {margin:20px 0 0;padding:0;list-style:none;font-size:1rem}
body.cms-id-11 .nf-flavour {display:flex;align-items:center;gap:14px;margin:0;padding:12px 0;border-bottom:1px solid var(--border-color,#E4E3E4)}
body.cms-id-11 .nf-flavour:first-child {border-top:1px solid var(--border-color,#E4E3E4)}
body.cms-id-11 .nf-dot {flex-shrink:0;width:18px;height:18px;border:1px solid var(--border-color,#E4E3E4);border-radius:50%}
body.cms-id-11 .nf-dot--vanille {background-color:#F4F1EA}
body.cms-id-11 .nf-dot--framboise {background-color:#F2A7C3}
body.cms-id-11 .nf-dot--orange {background-color:#F3A35C}
body.cms-id-11 .nf-dot--citron {background-color:#F2DC5D}
body.cms-id-11 .nf-dot--poire {background-color:#A9D46F}
body.cms-id-11 .nf-flavour__name {min-width:110px;font-family:var(--font-family-title,'Gelasio',serif) !important;font-size:1.125rem;font-weight:500;color:var(--text-color,#1D191B)}
body.cms-id-11 .nf-flavour__colour {font-size:.875rem;color:var(--muted-color,#6C6A6B)}
body.cms-id-11 .nf-faq {margin-top:96px;padding:0}
body.cms-id-11 .nf-faq__grid {display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start;padding:0}
body.cms-id-11 .nf-tel {font-weight:600;color:var(--text-color,#1D191B);white-space:nowrap}
body.cms-id-11 .nf-faq__list .a4w-faq--block {margin:0}
body.cms-id-11 .nf-faq__list .a4w-faq__kicker,
body.cms-id-11 .nf-faq__list .a4w-faq__title {display:none}
body.cms-id-11 .nf-faq__list .faq-item {border-top:1px solid var(--border-color,#E4E3E4)}
body.cms-id-11 .nf-faq__list .faq-item:last-child {border-bottom:1px solid var(--border-color,#E4E3E4)}
body.cms-id-11 .nf-faq__list .faq-header {min-height:60px;padding:16px 0;font-family:var(--font-family-title,'Gelasio',serif);font-size:1.125rem;font-weight:600;line-height:1.4;color:var(--text-color,#1D191B)}
body.cms-id-11 .nf-faq__list .faq-content {padding:0 0 24px;color:var(--medium-gray,#565254)}
body.cms-id-11 .nf-faq__list .faq-content p {margin:0 0 12px;font-size:1rem;line-height:1.7;color:inherit}
body.cms-id-11 .nf-shop {margin-top:96px;padding:0 0 96px;background-color:var(--background-color,#FFFFFF)}
body.cms-id-11 .nf-shop__inner {padding:0}
body.cms-id-11 .nf-shop__head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
body.cms-id-11 .nf-shop__title {margin:10px 0 0}
body.cms-id-11 .nf-btn {gap:10px;font-family:var(--btn-font-family,var(--font-family-title,'Gelasio',serif)) !important}
body.cms-id-11 .nf-btn::after {content:"";flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url("/themes/gumuchev2/assets/img/cms/icone-fleche.svg") center/contain no-repeat;mask:url("/themes/gumuchev2/assets/img/cms/icone-fleche.svg") center/contain no-repeat;transition:transform .2s ease}
body.cms-id-11 .nf-btn:hover::after {transform:translateX(3px)}
body.cms-id-11 .nf-shop .a4w-cms-products {margin-top:32px}
@media (max-width:991.98px) {
  body.cms-id-11 .nf-faq__grid {grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:767.98px) {
  body.cms-id-11 .nf-manifest,
  body.cms-id-11 .nf-faq {margin-top:64px;padding:0}
  body.cms-id-11 .nf-shop {margin-top:64px;padding:0 0 64px}
  body.cms-id-11 .nf-manifest__inner,
  body.cms-id-11 .nf-faq__grid,
  body.cms-id-11 .nf-shop__inner {padding:0}
  body.cms-id-11 .nf-kicker {font-size:.75rem}
}
@media (max-width:575.98px) {
  body.cms-id-11 .nf-shop .products > .product-miniature {width:50%}
}
@media (prefers-reduced-motion:reduce) {
  body.cms-id-11 .nf-btn::after {transition:none}
  body.cms-id-11 .nf-btn:hover::after {transform:none}
}
body.cms-id-11 .a4w-story-hero--light.nf-hero .a4w-story-hero__inner {padding:72px 0}
body.cms-id-11 .nf-hero .a4w-story-hero__sub {font-family:var(--font-family-title,'Gelasio',serif) !important}
body.cms-id-11 .a4w-section.a4w-story-chapter.nf-chapter {margin:96px 0 0}
body.cms-id-11 .nf-chapter .a4w-story-chapter__year {font-family:var(--font-family-title,'Gelasio',serif) !important}
body.cms-id-11 .a4w-section.a4w-story-videotext.nf-band {margin:96px 0 0}
body.cms-id-11 .a4w-story-chapter__body .nf-link {margin-top:20px}
@media (max-width:991.98px) {
  body.cms-id-11 .a4w-story-hero--light.nf-hero .a4w-story-hero__inner {padding:32px 0 40px}
  body.cms-id-11 .a4w-story-chapter.nf-chapter .a4w-story-chapter__year {font-size:4rem}
}
@media (max-width:767.98px) {
  body.cms-id-11 .a4w-section.a4w-story-chapter.nf-chapter {margin-top:64px}
  body.cms-id-11 .a4w-section.a4w-story-videotext.nf-band {margin-top:64px}
}

/* --- CGV (CMS 3) --- */
body.cms-id-3 #content-wrapper .page-header {display:none}
body.cms-id-3 .cg-page.a4w-section {padding:48px 0 96px}
body.cms-id-3 .cg-page__inner.a4w-container {max-width:none;margin:0;padding:0}
body.cms-id-3 .cg-head {max-width:760px}
body.cms-id-3 .cg-kicker {margin:0;font-family:var(--font-family-base,'Noto Sans',sans-serif);font-size:.6875rem;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-color,#6C6A6B)}
body.cms-id-3 .cg-title {margin:14px 0 0;font-family:var(--font-family-title,'Gelasio',serif);font-size:var(--font-size-h1,clamp(1.9375rem,1.761rem + 0.751vw,2.4375rem));font-weight:600;line-height:1.15;color:var(--h1-color,#1D191B)}
body.cms-id-3 .cg-meta {display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:20px 0 0;font-size:.9375rem;line-height:1.5;color:var(--medium-gray,#565254)}
body.cms-id-3 .cg-pdf {display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:600;color:var(--text-color,#1D191B);text-decoration:underline;text-decoration-color:var(--link-decoration-color,#B68A56);text-decoration-thickness:1px;text-underline-offset:4px}
body.cms-id-3 .cg-pdf:hover {color:var(--text-color,#1D191B);text-decoration-color:var(--text-color,#1D191B);text-decoration-thickness:2px}
body.cms-id-3 .cg-pdf::before {content:"";flex:none;width:16px;height:16px;background-color:currentColor;-webkit-mask:url("/themes/gumuchev2/assets/img/cms/icone-telecharger.svg") center/contain no-repeat;mask:url("/themes/gumuchev2/assets/img/cms/icone-telecharger.svg") center/contain no-repeat}
body.cms-id-3 .cg-grid {display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start;margin-top:56px;scroll-margin-top:calc(var(--header-height,120px) + 16px)}
body.cms-id-3 .cg-body {max-width:760px;font-size:1rem;line-height:1.75;color:var(--medium-gray,#565254)}
body.cms-id-3 .cg-art {margin:0 0 32px;padding:0 0 32px;border-bottom:1px solid var(--border-color,#E4E3E4);scroll-margin-top:calc(var(--header-height,120px) + 24px)}
body.cms-id-3 .cg-art--last {border-bottom:0}
body.cms-id-3 .cg-art__title {margin:0 0 12px;font-family:var(--font-family-title,'Gelasio',serif);font-size:var(--font-size-h3,clamp(1.25rem,1.14rem + 0.469vw,1.5625rem));font-weight:600;line-height:1.3;color:var(--h2-color,#1D191B)}
body.cms-id-3 .cg-art__sub {margin:24px 0 8px;font-family:var(--font-family-title,'Gelasio',serif);font-size:1.125rem;font-weight:500;line-height:1.3;color:var(--h3-color,#1D191B)}
body.cms-id-3 .cg-art p {margin:0 0 10px;font-size:1rem;line-height:1.75;color:var(--medium-gray,#565254)}
body.cms-id-3 .cg-help {margin-top:8px;padding:24px 28px;border-radius:var(--border-radius,3px);background-color:var(--light-bg,#FAF7F4);color:var(--medium-gray,#565254)}
body.cms-id-3 .cg-help__title {margin:0 0 4px;font-family:var(--font-family-title,'Gelasio',serif);font-size:1.125rem;font-weight:600;line-height:1.3;color:var(--h2-color,#1D191B)}
body.cms-id-3 .cg-help__text {margin:0;font-size:1rem;line-height:1.75;color:var(--medium-gray,#565254)}
body.cms-id-3 .cg-help__tel {font-weight:600;color:var(--text-color,#1D191B);text-decoration:none;white-space:nowrap}
body.cms-id-3 .cg-help__tel:hover {color:var(--text-color,#1D191B);text-decoration:underline;text-decoration-color:var(--link-decoration-color,#B68A56);text-underline-offset:4px}
body.cms-id-3 .cg-help__link {font-weight:600;color:var(--text-color,#1D191B);text-decoration:underline;text-decoration-color:var(--link-decoration-color,#B68A56);text-decoration-thickness:1px;text-underline-offset:4px}
body.cms-id-3 .cg-help__link:hover {color:var(--text-color,#1D191B);text-decoration-color:var(--text-color,#1D191B);text-decoration-thickness:2px}
@media (max-width:991.98px) {
  body.cms-id-3 .cg-grid {grid-template-columns:minmax(0,1fr);gap:24px;margin-top:28px}
  body.cms-id-3 .cg-art {scroll-margin-top:calc(var(--header-height,72px) + 16px)}
}
@media (max-width:767.98px) {
  body.cms-id-3 .cg-page.a4w-section {padding:28px 0 64px}
  body.cms-id-3 .cg-kicker {font-size:.75rem}
  body.cms-id-3 .cg-meta {gap:8px 20px}
  body.cms-id-3 .cg-help {padding:20px}
}