/* ==========================================================================
   Thème Excelia — feuille principale
   Reprise de la feuille écrite pour Le Dressing de Shana, préfixe renommé.
   Les deux variables ci-dessous venaient de Dawn ; elles sont redéfinies ici
   pour que la feuille soit autonome sur PrestaShop.
   ========================================================================== */
:root{
  --page-width: 1280px;
  --color-background: 255,255,255;
}



/* ==========================================================================
   Le Dressing de Shana — couche de design par-dessus Dawn
   Tokens + composants sur mesure. Équivalents CSS des classes Tailwind
   citées au brief (rounded-xl = 12px, rounded-2xl = 16px, shadow-sm/md…).
   ========================================================================== */

:root {
  /* — Marque : rose poudré / aquarelle — */
  --exc-rose-50:  #FDF4F2;
  --exc-rose-100: #FBE0DC;   /* fond doux */
  --exc-rose-200: #F6C9C4;   /* rose poudré, ~bg-rose-200 */
  --exc-rose-400: #D98C86;
  --exc-rose-600: #9E504B;   /* CTA rose — 5,67:1 sur blanc, AA validé */
  --exc-rose-700: #8C3F3A;   /* survol */

  /* — Fonds de section — */
  --exc-white:  #FFFFFF;
  --exc-peach:  #F9ECE4;     /* beige/pêche de l'ancien site */
  --exc-peach-deep: #F2DFD4;

  /* — Texte — */
  --exc-ink:    #111827;     /* ~text-gray-900 */
  --exc-body:   #4B5563;     /* ~text-gray-600 */
  /* #9CA3AF ne donnait que 2,5:1 sur blanc — sous le minimum de 4,5:1.
     #5F656F passe sur les trois fonds : blanc 5,9, pêche 5,1, rose 4,7. */
  --exc-muted:  #5F656F;
  --exc-line:   #ECE7E3;

  /* — CTA noir — */
  --exc-black:  #111111;

  /* — Rayons — */
  --exc-r-md: 10px;
  --exc-r-xl: 12px;          /* rounded-xl */
  --exc-r-2xl: 16px;         /* rounded-2xl */
  --exc-r-3xl: 24px;
  --exc-r-full: 999px;

  /* — Ombres douces — */
  --exc-shadow-sm: 0 1px 2px rgba(17, 24, 39, .05), 0 1px 3px rgba(17, 24, 39, .06);
  --exc-shadow-md: 0 4px 6px -1px rgba(17, 24, 39, .08), 0 10px 24px -6px rgba(17, 24, 39, .10);
  --exc-shadow-lg: 0 12px 32px -8px rgba(17, 24, 39, .16);
  --exc-shadow-nav: 0 -4px 6px -1px rgba(0, 0, 0, .05);

  /* — Typo — */
  --exc-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --exc-font-display: 'Instrument Serif', Georgia, serif;

  /* — Hauteur de la barre mobile — */
  --exc-bottomnav-h: 60px;
  --exc-bottomnav-marge: 12px;

  --exc-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Base typographique ---------------------------------------- */

/* Une classe qui pose display: … bat la règle [hidden] du navigateur.
   On rétablit la priorité une fois pour toutes. */
[hidden] { display: none !important; }

/* Supprime le délai de 300 ms au tap sur mobile. Posé sur les éléments
   interactifs seulement : sur le document entier, ça désactiverait aussi
   le zoom à deux doigts. */
button,
a,
label,
summary,
[role='button'] { touch-action: manipulation; }

body,
.shopify-section {
  font-family: var(--exc-font);
}

h1, h2, h3, h4, h5,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--exc-font);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--exc-ink);
}

.exc-eyebrow {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--exc-rose-600);
  margin: 0 0 1.2rem;
}

.exc-serif-accent {
  font-family: var(--exc-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

/* Titre de section commun */
.exc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3.2rem;
}
.exc-section-head__title {
  margin: 0;
  font-size: clamp(2.6rem, 4vw, 4rem);
  line-height: 1.1;
}
.exc-section-head__sub {
  margin: .8rem 0 0;
  color: var(--exc-body);
  font-size: 1.5rem;
  max-width: 52ch;
}
.exc-section-head__link {
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--exc-ink);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
@media screen and (max-width: 749px) {
  .exc-section-head { flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-bottom: 2.4rem; }
}

/* ---------- Boutons --------------------------------------------------- */

.exc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.5rem 3.2rem;
  border: 0;
  border-radius: var(--exc-r-xl);
  font-family: var(--exc-font);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--exc-ease), background-color .25s var(--exc-ease),
              box-shadow .25s var(--exc-ease);
}
.exc-btn--black  { background: var(--exc-black); color: #fff; }
.exc-btn--black:hover  { background: #000; }
.exc-btn--rose   { background: var(--exc-rose-600); color: #fff; }
.exc-btn--rose:hover   { background: var(--exc-rose-700); }
.exc-btn--ghost  { background: rgba(255,255,255,.92); color: var(--exc-ink); }
.exc-btn--ghost:hover  { background: #fff; }
.exc-btn--lg     { padding: 1.8rem 4rem; font-size: 1.6rem; }
.exc-btn:hover   { transform: scale(1.05); box-shadow: var(--exc-shadow-md); }
.exc-btn:active  { transform: scale(1.01); }

@media (prefers-reduced-motion: reduce) {
  .exc-btn:hover { transform: none; }
}

/* ==========================================================================
   1. Navigation — barre basse mobile (façon app native)
   ========================================================================== */

.exc-bottomnav {
  /* Barre flottante : les extrémités ne touchent jamais les bords de l'écran.
     Le doigt attrape la barre, pas le bord de la dalle — et le contenu qui
     défile dessous reste visible, ce qui donne la profondeur. */
  position: fixed;
  left: var(--exc-bottomnav-marge);
  right: var(--exc-bottomnav-marge);
  bottom: calc(var(--exc-bottomnav-marge) + env(safe-area-inset-bottom));
  z-index: 50;
  display: none;
  border-radius: var(--exc-r-full);
  /* Verre liquide : le fond laisse passer la page, saturé pour que le rose
     poudré qui défile dessous vienne teinter la barre. */
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  /* le liseré clair fait l'arête de verre, l'ombre portée le décollement */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(17, 24, 39, .06),
    0 8px 28px -6px rgba(17, 24, 39, .18),
    0 2px 8px -2px rgba(17, 24, 39, .10);
  overflow: hidden;
  isolation: isolate;
}
/* Reflet spéculaire : la lumière tombe sur le haut de la barre. Sans lui,
   le flou seul donne du dépoli, pas du verre. */
.exc-bottomnav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  pointer-events: none;
}
/* Repli : sans flou d'arrière-plan, une barre translucide devient illisible
   dès qu'une photo sombre passe dessous. On repasse en blanc plein. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .exc-bottomnav { background: #fff; }
}

.exc-bottomnav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-bottomnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  height: var(--exc-bottomnav-h);
  text-decoration: none;
  /* --exc-body et non --exc-muted : sur un fond translucide posé au-dessus
     d'une photo sombre, le gris clair tombait à 3,9:1. */
  color: var(--exc-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s var(--exc-ease);
}
.exc-bottomnav__link svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s var(--exc-ease);
}
/* icône et libellé au-dessus de la pastille active, sans jouer du z-index
   négatif : la pile reste lisible */
.exc-bottomnav__link svg,
.exc-bottomnav__link > span:not(.exc-bottomnav__badge) { position: relative; }
.exc-bottomnav__link:active svg { transform: scale(.88); }
.exc-bottomnav__link[aria-current='page'],
.exc-bottomnav__link.is-active { color: var(--exc-rose-600); }
/* Pastille active : sur une barre arrondie, le trait collé en haut n'a plus
   de bord auquel s'accrocher. La goutte de rose derrière l'icône le remplace. */
.exc-bottomnav__link.is-active::before {
  content: '';
  position: absolute;
  inset: 5px 6px;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-100);
}
.exc-bottomnav__badge {
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.exc-bottomnav__badge[hidden] { display: none; }

@media screen and (max-width: 989px) {
  .exc-bottomnav { display: block; }
  /* on libère la place en bas de page : la barre + son décollement */
  body {
    padding-bottom: calc(
      var(--exc-bottomnav-h) + var(--exc-bottomnav-marge) * 2 + env(safe-area-inset-bottom)
    );
  }
}

/* Header Dawn : minimal sur desktop, allégé sur mobile */
.header {
  border-bottom: 1px solid var(--exc-line);
}
.header__heading-logo { border-radius: 0; }
.header__menu-item,
.header__menu-item span {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.header__menu-item:hover span { text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- Header collant ------------------------------------------- */

.header-wrapper {
  transition: box-shadow .3s var(--exc-ease);
}

@media screen and (min-width: 990px) {
  /* L'ombre n'apparaît qu'une fois la page défilée : au repos le header
     reste plat, posé sur la page. */
  .section-header.scrolled-past-header .header-wrapper {
    box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 10px 28px -14px rgba(17, 24, 39, .22);
  }
}

@media screen and (max-width: 989px) {
  /* Sur mobile la navigation vit déjà dans la barre du bas. Un header collant
     en plus amputerait la hauteur utile des deux côtés : on le laisse défiler.
     Pour l'activer aussi sur mobile, supprimer cette règle. */
  .section-header.shopify-section-header-sticky { position: static; }
}

@media screen and (max-width: 989px) {
  /* Toute la navigation vit dans la barre du bas : on retire le hamburger,
     le panier et le compte du header pour ne pas doubler le menu. */
  header-drawer { display: none !important; }
  .header__icons .header__icon--account,
  .header__icons .header__icon--cart { display: none; }

  /* colonnes latérales de largeur égale → le logo tombe pile au centre */
  .header {
    grid-template-columns: 4.8rem 1fr 4.8rem;
    column-gap: .8rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
  }
  .header > .header__search { justify-self: start; margin-left: -.6rem; }
  .header__icons { justify-self: end; }
  .header__heading,
  .header__heading-link { justify-self: center; text-align: center; }
  .header__heading-link {
    font-size: 1.8rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */

.exc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.exc-hero--sm { min-height: 52svh; }
.exc-hero--md { min-height: 72svh; }
.exc-hero--lg { min-height: 88svh; }
.exc-hero--full { min-height: 100svh; }

.exc-hero__media,
.exc-hero__media img,
.exc-hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Deux réglages qui ne font pas le même travail : le voile en dégradé creuse
   le coin où se pose le texte, ce filtre-ci calme toute la photo. Sur une
   image très lumineuse, le second évite de devoir pousser le premier au point
   de ternir l'ensemble. */
.exc-hero__media img,
.exc-hero__media video {
  filter: brightness(var(--exc-hero-lum, 1)) saturate(var(--exc-hero-sat, 1));
}
.exc-hero__placeholder {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(135deg, var(--exc-rose-100) 0%, var(--exc-peach) 55%, var(--exc-rose-200) 100%);
}
.exc-hero__placeholder svg { width: 100%; height: 100%; opacity: .12; }

.exc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Deux voiles superposés plutôt qu'un seul plus opaque. Le texte est en bas
     à gauche : on assombrit ce coin-là et on laisse les mannequins en pleine
     lumière. Un voile uniforme assez fort pour la lisibilité ternirait toute
     la photo — mesuré sur la photo d'arrivage, le texte blanc tombait à 2,1:1. */
  background:
    linear-gradient(to top, rgba(17,24,39,.86) 0%, rgba(17,24,39,.44) 50%, rgba(17,24,39,0) 84%),
    linear-gradient(to right, rgba(17,24,39,.76) 0%, rgba(17,24,39,.48) 42%, rgba(17,24,39,.08) 70%, rgba(17,24,39,0) 86%);
}
/* Titre centré : plus de coin à protéger, le voile redevient vertical mais
   remonte plus haut. */
.exc-hero--center .exc-hero__overlay {
  background: linear-gradient(to top, rgba(17,24,39,.80) 0%, rgba(17,24,39,.44) 50%, rgba(17,24,39,.14) 100%);
}

.exc-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem 7rem;
}
.exc-hero__content { max-width: 62rem; }
.exc-hero--center .exc-hero__inner { text-align: center; }
.exc-hero--center .exc-hero__content { max-width: 72rem; margin: 0 auto; }

.exc-hero__eyebrow {
  display: inline-block;
  padding: .7rem 1.6rem;
  margin-bottom: 2rem;
  border-radius: var(--exc-r-full);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  color: var(--exc-ink);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.exc-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(3.6rem, 6.5vw, 7.2rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-hero__title em {
  font-family: var(--exc-font-display);
  font-style: italic;
  font-weight: 400;
}
.exc-hero__text {
  margin: 2rem 0 0;
  color: rgba(255,255,255,.92);
  font-size: clamp(1.6rem, 1.8vw, 1.9rem);
  line-height: 1.55;
  max-width: 48ch;
  text-wrap: pretty;
}
.exc-hero--center .exc-hero__text { margin-inline: auto; }
.exc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 3.2rem;
}
.exc-hero--center .exc-hero__actions { justify-content: center; }

/* variante fond clair (sans image) */
.exc-hero--light .exc-hero__overlay { display: none; }
.exc-hero--light .exc-hero__title { color: var(--exc-ink); }
.exc-hero--light .exc-hero__text { color: var(--exc-body); }

@media screen and (max-width: 749px) {
  .exc-hero--md, .exc-hero--lg { min-height: 78svh; }
  .exc-hero__inner { padding: 0 2rem 4.4rem; }
}

/* ==========================================================================
   3. Barre de réassurance
   ========================================================================== */

.exc-reassurance {
  border-top: 1px solid rgba(17,24,39,.06);
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.exc-reassurance__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 3.2rem 5rem;
}
.exc-reassurance__item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 1.6rem;
}
.exc-reassurance__item + .exc-reassurance__item {
  border-left: 1px solid rgba(17,24,39,.09);
}
.exc-reassurance__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-reassurance__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--exc-ink);
  text-wrap: balance;
}
.exc-reassurance__text {
  margin: .4rem 0 0;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--exc-body);
  text-wrap: balance;
}

@media screen and (max-width: 989px) {
  .exc-reassurance__grid { padding: 2.6rem 2.4rem; gap: 1rem; }
  .exc-reassurance__item { gap: 1.2rem; padding: 0 1rem; }
}

/* Barre compacte sur mobile : trois colonnes, icône au-dessus du texte.
   L'info est secondaire — elle ne doit pas manger le premier écran
   (règle content-priority) — mais elle reste lisible sans troncature. */
@media screen and (max-width: 749px) {
  .exc-reassurance__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 2rem 1.2rem;
  }
  .exc-reassurance__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .9rem;
    padding: 0 .7rem;
  }
  .exc-reassurance__item + .exc-reassurance__item {
    border-left: 1px solid rgba(17,24,39,.09);
  }
  .exc-reassurance__icon { width: 21px; height: 21px; }
  .exc-reassurance__title {
    font-size: 1.05rem;
    letter-spacing: .05em;
    line-height: 1.2;
  }
  .exc-reassurance__text {
    margin-top: .3rem;
    font-size: 1.15rem;
    line-height: 1.3;
  }
}

/* — variante défilante (bandeau continu) — */

.exc-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(17,24,39,.06);
  border-bottom: 1px solid rgba(17,24,39,.06);
}

/* dégradés aux deux bords : le texte entre et sort sans coupure nette */
.exc-marquee::before,
.exc-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6rem;
  z-index: 2;
  pointer-events: none;
}
.exc-marquee::before {
  left: 0;
  background: linear-gradient(to right, rgb(var(--color-background)) 0%, rgba(var(--color-background), 0) 100%);
}
.exc-marquee::after {
  right: 0;
  background: linear-gradient(to left, rgb(var(--color-background)) 0%, rgba(var(--color-background), 0) 100%);
}

.exc-marquee__track {
  display: flex;
  width: max-content;
  animation: exc-marquee var(--exc-marquee-duration, 30s) linear infinite;
}
.exc-marquee--reverse .exc-marquee__track { animation-direction: reverse; }

/* on suspend au survol et au focus clavier pour laisser lire */
.exc-marquee:hover .exc-marquee__track,
.exc-marquee:focus-within .exc-marquee__track { animation-play-state: paused; }

@keyframes exc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.exc-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.exc-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  white-space: nowrap;
}
/* pastille de séparation, elle porte aussi l'espacement entre arguments */
.exc-marquee__item::after {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin: 0 2.8rem;
  border-radius: 50%;
  background: var(--exc-rose-400);
}

.exc-marquee__icon {
  flex: none;
  width: 19px;
  height: 19px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-marquee__title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--exc-ink);
}
.exc-marquee__text {
  font-size: 1.3rem;
  color: var(--exc-body);
}

@media screen and (max-width: 749px) {
  .exc-marquee { padding: 1.3rem 0; }
  .exc-marquee::before,
  .exc-marquee::after { width: 3rem; }
  .exc-marquee__item::after { margin: 0 2rem; }
  .exc-marquee__icon { width: 17px; height: 17px; }
  .exc-marquee__title { font-size: 1.1rem; }
  .exc-marquee__text { font-size: 1.2rem; }
}

/* Sans animation : bandeau figé, défilable au doigt. */
@media (prefers-reduced-motion: reduce) {
  .exc-marquee { overflow-x: auto; scrollbar-width: none; }
  .exc-marquee::-webkit-scrollbar { display: none; }
  .exc-marquee__track { animation: none; }
  .exc-marquee__group + .exc-marquee__group { display: none; }
}

/* ==========================================================================
   3 bis. Grille de collections
   ========================================================================== */

.exc-cols { padding: 7rem 0; }
.exc-cols__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}
.exc-cols__grid {
  display: grid;
  grid-template-columns: repeat(var(--exc-cols-n, 4), minmax(0, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.exc-cols__card {
  position: relative;
  display: block;
  aspect-ratio: var(--exc-cols-ratio, 4 / 5);
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  background: var(--exc-rose-50);
  box-shadow: var(--exc-shadow-sm);
  text-decoration: none;
  transition: box-shadow .35s var(--exc-ease), transform .35s var(--exc-ease);
}
.exc-cols__card:hover { box-shadow: var(--exc-shadow-md); transform: translateY(-3px); }

.exc-cols__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--exc-ease);
}
.exc-cols__card:hover img { transform: scale(1.05); }
.exc-cols__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach) 60%, var(--exc-rose-200));
}
.exc-cols__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%);
}

.exc-cols__meta {
  position: absolute;
  left: 1.8rem;
  right: 5.6rem;
  bottom: 1.7rem;
  z-index: 2;
  color: #fff;
}
.exc-cols__title {
  display: block;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-wrap: balance;
}
.exc-cols__count {
  display: block;
  margin-top: .3rem;
  font-size: 1.2rem;
  color: rgba(255,255,255,.8);
}
.exc-cols__arrow {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--exc-r-full);
  background: rgba(255,255,255,.92);
  transition: transform .3s var(--exc-ease), background-color .3s var(--exc-ease);
}
.exc-cols__arrow svg { width: 15px; height: 15px; stroke: var(--exc-ink); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.exc-cols__card:hover .exc-cols__arrow { background: #fff; transform: translateX(3px); }

@media screen and (max-width: 989px) {
  .exc-cols__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 749px) {
  .exc-cols { padding: 4.4rem 0; }
  .exc-cols__inner { padding: 0 2rem; }
  .exc-cols__grid { grid-template-columns: repeat(var(--exc-cols-n-mobile, 2), minmax(0, 1fr)); gap: 1.2rem; }
  .exc-cols__meta { left: 1.2rem; right: 1.2rem; bottom: 1.2rem; }
  .exc-cols__title { font-size: 1.5rem; }
  .exc-cols__count { font-size: 1.1rem; }
  .exc-cols__arrow { display: none; }
}

/* ==========================================================================
   3 ter. Le drop de la semaine
   ========================================================================== */

.exc-drop { padding: 7rem 0; }
.exc-drop__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}

.exc-drop__aside { position: sticky; top: 12rem; }

.exc-drop__date {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.4rem;
  margin-bottom: 1.8rem;
  border-radius: var(--exc-r-full);
  background: rgba(255,255,255,.72);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--exc-ink);
}
.exc-drop__pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exc-rose-600);
}
.exc-drop__pulse::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--exc-rose-600);
  animation: exc-pulse 2s ease-out infinite;
}
@keyframes exc-pulse {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.7); opacity: 0; }
}

.exc-drop__title {
  margin: 0;
  font-size: clamp(2.8rem, 3.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-drop__title em {
  font-family: var(--exc-font-display);
  font-style: italic;
  font-weight: 400;
}
.exc-drop__text {
  margin: 1.6rem 0 0;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--exc-body);
  text-wrap: pretty;
}
.exc-drop__actions { margin-top: 2.8rem; }

.exc-drop__grid {
  display: grid;
  grid-template-columns: repeat(var(--exc-drop-n, 3), minmax(0, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 1099px) {
  .exc-drop__inner { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3.2rem; }
}
@media screen and (max-width: 899px) {
  .exc-drop__inner { grid-template-columns: 1fr; gap: 3.2rem; }
  .exc-drop__aside { position: static; }
}
@media screen and (max-width: 749px) {
  .exc-drop { padding: 4.4rem 0; }
  .exc-drop__inner { padding: 0 0 0 2rem; gap: 2.8rem; }
  .exc-drop__aside { padding-right: 2rem; }
  /* les nouveautés défilent au doigt plutôt que de s'empiler */
  .exc-drop__grid {
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    grid-template-columns: none;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: 2rem;
  }
  .exc-drop__grid::-webkit-scrollbar { display: none; }
  .exc-drop__grid > * { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-drop__pulse::after { animation: none; }
  .exc-cols__card:hover { transform: none; }
  .exc-cols__card:hover img { transform: none; }
}

/* filet entre les vidéos et le pied de page quand les deux sont sur pêche */
.footer { border-top: 1px solid rgba(17, 24, 39, .06); }

/* ==========================================================================
   3 quater. Retrait en boutique
   ========================================================================== */

.exc-pickup { padding: 7rem 0; }
.exc-pickup__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}

/* le déroulé — c'est lui qui évite le déplacement pour rien */
.exc-pickup__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 0 0 4rem;
  padding: 0;
  list-style: none;
}
.exc-pickup__step { display: flex; align-items: flex-start; gap: 1.4rem; }
.exc-pickup__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exc-pickup__step-title {
  margin: .3rem 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.exc-pickup__step-text {
  margin: .5rem 0 0;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--exc-body);
}

.exc-pickup__grid {
  display: grid;
  grid-template-columns: repeat(var(--exc-pickup-n, 3), minmax(0, 1fr));
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-pickup__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--exc-r-2xl);
  box-shadow: var(--exc-shadow-sm);
  overflow: hidden;
  transition: box-shadow .3s var(--exc-ease);
}
.exc-pickup__card:hover { box-shadow: var(--exc-shadow-md); }
.exc-pickup__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--exc-rose-50);
}
.exc-pickup__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exc-pickup__body { display: flex; flex-direction: column; gap: .7rem; padding: 2.2rem; flex: 1 1 auto; }

.exc-pickup__badge {
  align-self: flex-start;
  padding: .5rem 1.1rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-100);
  color: #5C2E2B;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}
.exc-pickup__name {
  margin: .4rem 0 0;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.exc-pickup__line {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--exc-body);
}
.exc-pickup__line svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  stroke: var(--exc-rose-400);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-pickup__link {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--exc-ink);
  text-underline-offset: 4px;
}

@media screen and (max-width: 989px) {
  .exc-pickup__steps { gap: 1.6rem; }
  .exc-pickup__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 749px) {
  .exc-pickup { padding: 4.4rem 0; }
  .exc-pickup__inner { padding: 0 2rem; }
  .exc-pickup__steps { grid-template-columns: 1fr; gap: 1.8rem; margin-bottom: 2.8rem; }
  .exc-pickup__grid { grid-template-columns: 1fr; }
  .exc-pickup__body { padding: 1.8rem; }
  .exc-pickup__name { font-size: 1.7rem; }
}

/* ==========================================================================
   3 quinquies. Lookbook éditorial
   ========================================================================== */

.exc-look { padding: 7rem 0; }
.exc-look__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}
.exc-look--full .exc-look__inner { max-width: none; padding: 0; }

.exc-look__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--exc-r-2xl);
  background: var(--exc-rose-50);
}
.exc-look--full .exc-look__frame { border-radius: 0; }
.exc-look__frame > img { display: block; width: 100%; height: auto; }
.exc-look__placeholder { aspect-ratio: 16 / 9; }
.exc-look__placeholder svg { width: 100%; height: 100%; opacity: .18; }

/* Dégradé de lisibilité : sans lui, la légende blanche devient illisible
   dès que la photo est claire. Posé seulement s'il y a une légende. */
.exc-look--legende .exc-look__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 58%);
}

/* légende posée sur l'image */
.exc-look__caption {
  position: absolute;
  left: 4rem;
  bottom: 4rem;
  z-index: 2;
  max-width: 42rem;
  color: #fff;
  text-shadow: 0 1px 24px rgba(0, 0, 0, .35);
}
.exc-look__title {
  margin: 0;
  font-size: clamp(2.4rem, 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  color: #fff;
}
.exc-look__title em { font-family: var(--exc-font-display); font-style: italic; font-weight: 400; }
.exc-look__text { margin: 1.2rem 0 0; font-size: 1.5rem; line-height: 1.5; color: rgba(255,255,255,.9); }

/* — pastilles cliquables — */
.exc-look__spot {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
}
.exc-look__pin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--exc-shadow-md);
  cursor: pointer;
  /* zone tactile élargie sans grossir la pastille */
  outline-offset: 4px;
  transition: transform .25s var(--exc-ease);
}
.exc-look__pin::before {
  content: '';
  position: absolute;
  inset: -8px;              /* 48 × 48 : cible tactile conforme */
  border-radius: inherit;
}
.exc-look__pin::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: var(--exc-r-full);
  border: 1.5px solid rgba(255, 255, 255, .85);
  animation: exc-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
.exc-look__pin svg { width: 13px; height: 13px; stroke: var(--exc-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; }
.exc-look__pin:hover { transform: scale(1.12); }
.exc-look__pin[aria-expanded='true'] { transform: scale(1.12); }
.exc-look__pin[aria-expanded='true'] svg { transform: rotate(45deg); }

/* — fiche produit surgissante — */
.exc-look__pop {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 4;
  width: 22rem;
  padding: 1.2rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  /* deux translations chaînées : --exc-pop-shift est posé par le script
     pour recaler la fiche quand la pastille est près d'un bord */
  transform: translate(-50%, 6px) translateX(var(--exc-pop-shift, 0px));
  transition: opacity .25s var(--exc-ease), transform .25s var(--exc-ease), visibility .25s;
}
.exc-look__spot.is-open .exc-look__pop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) translateX(var(--exc-pop-shift, 0px));
}
.exc-look__pop-media {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--exc-r-md);
  overflow: hidden;
  background: var(--exc-rose-50);
  margin-bottom: 1rem;
}
.exc-look__pop-media img { width: 100%; height: 100%; object-fit: cover; }
.exc-look__pop-title { margin: 0; font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.exc-look__pop-title a { color: var(--exc-ink); text-decoration: none; }
.exc-look__pop-price { margin: .4rem 0 0; font-size: 1.4rem; font-weight: 700; }
.exc-look__pop-cta { display: inline-block; margin-top: .8rem; font-size: 1.25rem; font-weight: 600; color: var(--exc-rose-600); }

/* rangée de secours sous l'image : viser une pastille au doigt est imprécis */
.exc-look__list {
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: 46%;
  gap: 1.2rem;
  margin: 1.6rem 0 0;
  padding: 0 2rem 0 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.exc-look__list::-webkit-scrollbar { display: none; }

@media screen and (max-width: 989px) {
  .exc-look__caption { left: 2.4rem; bottom: 2.4rem; }
}
@media screen and (max-width: 749px) {
  .exc-look { padding: 4.4rem 0; }
  .exc-look__inner { padding: 0 2rem; }
  .exc-look__caption { left: 1.8rem; right: 1.8rem; bottom: 1.8rem; }
  .exc-look__text { font-size: 1.35rem; }
  .exc-look__pop { width: 17rem; }
  .exc-look__list { display: grid; }
  .exc-look__list > * { scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-look__pin::after { animation: none; }
}

/* ==========================================================================
   4. Best-sellers — cartes produit
   ========================================================================== */

.exc-products { padding: 7rem 0; }
.exc-products__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}
.exc-products__grid {
  display: grid;
  grid-template-columns: repeat(var(--exc-cols-desktop, 4), minmax(0, 1fr));
  gap: 2.4rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.exc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: var(--exc-r-2xl);
  box-shadow: var(--exc-shadow-sm);
  overflow: hidden;
  transition: box-shadow .3s var(--exc-ease), transform .3s var(--exc-ease);
}
.exc-card:hover {
  box-shadow: var(--exc-shadow-md);
  transform: translateY(-3px);
}

/* — média, bord à bord, avec permutation d'image au survol — */
.exc-card__media {
  position: relative;
  display: block;
  aspect-ratio: var(--exc-ratio, 3 / 4);
  background: var(--exc-rose-50);
  overflow: hidden;
}
.exc-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s var(--exc-ease), transform .7s var(--exc-ease);
}
.exc-card__img--alt { opacity: 0; }
.exc-card:hover .exc-card__img--main { opacity: 0; }
.exc-card:hover .exc-card__img--alt  { opacity: 1; }
/* sans seconde image : léger zoom */
.exc-card--single:hover .exc-card__img--main { opacity: 1; transform: scale(1.045); }

.exc-card__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--exc-rose-50), var(--exc-peach));
}
.exc-card__placeholder svg { width: 100%; height: 100%; opacity: .18; }

/* — badges — */
.exc-card__badges {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.exc-badge {
  padding: .55rem 1.2rem;
  border-radius: var(--exc-r-full);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  backdrop-filter: blur(6px);
}
.exc-badge--best   { background: var(--exc-ink); color: #fff; }
.exc-badge--new    { background: var(--exc-rose-200); color: #5C2E2B; }
.exc-badge--sale   { background: var(--exc-rose-600); color: #fff; }
.exc-badge--soldout{ background: rgba(255,255,255,.92); color: var(--exc-body); }

/* — favori — */
.exc-card__fav {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  box-shadow: var(--exc-shadow-sm);
  cursor: pointer;
  transition: transform .2s var(--exc-ease), background-color .2s var(--exc-ease);
}
.exc-card__fav svg { width: 17px; height: 17px; stroke: var(--exc-ink); fill: none; stroke-width: 1.6; }
.exc-card__fav:hover { transform: scale(1.1); }
.exc-card__fav[aria-pressed='true'] svg { fill: var(--exc-rose-600); stroke: var(--exc-rose-600); }

/* — encart bas — */
.exc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .8rem;
  padding: 1.6rem 1.6rem 1.6rem;
}
.exc-card__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.005em;
}
.exc-card__title a {
  color: var(--exc-ink);
  text-decoration: none;
}
.exc-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.exc-card { position: relative; }

/* étoiles d'avis */
.exc-rating {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  color: var(--exc-body);
}
.exc-rating__stars { display: inline-flex; gap: 1px; }
.exc-rating__stars svg { width: 13px; height: 13px; fill: #F5B301; }
.exc-rating__stars svg.is-empty { fill: #E5E1DE; }
.exc-rating__count { color: var(--exc-muted); }

.exc-card__price {
  margin-top: auto;
  padding-top: .4rem;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--exc-ink);
  font-variant-numeric: tabular-nums;
}
.exc-card__price del {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--exc-muted);
}

/* — bouton d'ajout au panier animé (pilule noire à liseré blanc) — */

.exc-card__add { padding: 0 1.6rem 1.6rem; position: relative; z-index: 2; }
.exc-atc-wrap { display: block; }
.exc-atc-form { margin: 0; }

.exc-atc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.6rem;
  padding: 0 1.4rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: var(--exc-black);
  color: #fff;
  font-family: var(--exc-font);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  /* le colis tombe depuis l'extérieur du bouton : rien ne doit le rogner */
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--exc-ease), transform .25s var(--exc-ease);
}
.exc-atc:hover { background: #000; transform: translateY(-1px); }
.exc-atc:active { transform: translateY(0); }
.exc-atc:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: 3px; }

/* le liseré blanc est tracé à l'intérieur du noir : il reste visible
   quelle que soit la couleur de la carte derrière */
.exc-atc::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: inherit;
  pointer-events: none;
}

.exc-atc__cart {
  position: absolute;
  left: 1.4rem;
  top: 50%;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  transform: translate(0, -50%);
  will-change: transform;
}
.exc-atc__cart svg {
  width: 19px;
  height: 19px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exc-atc__label {
  transition: opacity .18s var(--exc-ease);
  /* centré dans le bouton, pas décalé par l'icône : l'icône est en
     positionnement absolu et ne prend pas de place dans le flux */
}
.exc-atc.is-busy .exc-atc__label { opacity: 0; }

/* le colis : carré blanc, au centre du bouton, invisible au repos */
.exc-atc__parcel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 3px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* échec d'ajout */
.exc-atc.is-error { background: var(--exc-rose-600); animation: exc-atc-secousse .4s var(--exc-ease); }
@keyframes exc-atc-secousse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.exc-atc[disabled],
.exc-atc[aria-disabled='true'] { cursor: default; }
.exc-atc[disabled] { background: var(--exc-line); color: var(--exc-muted); }
.exc-atc[disabled]::before { border-color: transparent; }

/* compteur sous le bouton */
.exc-atc__count {
  margin: .8rem 0 0;
  text-align: center;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--exc-muted);
}
.exc-atc__count [data-exc-atc-qty] {
  font-weight: 700;
  color: var(--exc-body);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .exc-atc:hover { transform: none; }
  .exc-atc.is-error { animation: none; }
}

@media screen and (max-width: 989px) {
  .exc-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 749px) {
  .exc-products { padding: 4.4rem 0; }
  .exc-products__inner { padding: 0 2rem; }
  .exc-products__grid {
    grid-template-columns: repeat(var(--exc-cols-mobile, 2), minmax(0, 1fr));
    gap: 2rem 1.2rem;
  }
  .exc-card__body { padding: 1.2rem; gap: .6rem; }
  .exc-card__add { padding: 0 1.2rem 1.2rem; }
  .exc-card__title { font-size: 1.35rem; }
  .exc-add-long { display: none; }
  .exc-atc { height: 4.2rem; font-size: 1.1rem; letter-spacing: .06em; padding: 0 1rem; }
  .exc-atc__cart, .exc-atc__cart svg { width: 17px; height: 17px; }
  .exc-atc__cart { left: 1.1rem; }
  .exc-atc__count { font-size: 1.05rem; margin-top: .6rem; }
}

/* ==========================================================================
   5. Preuve sociale — carrousel de vidéos clientes (9:16)
   ========================================================================== */

.exc-ugc {
  --exc-ugc-w: 28rem;
  --exc-ugc-gap: 3.2rem;
  --exc-ugc-chevauchement: 2.4rem;
  padding: 8rem 0 7rem;
  overflow: hidden;
}

.exc-ugc__head {
  max-width: 74rem;
  margin: 0 auto 3.6rem;
  padding: 0 2.4rem;
  text-align: center;
}
.exc-ugc__title {
  margin: 0;
  font-size: clamp(2.8rem, 4.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.exc-ugc__sub {
  margin: 1.4rem 0 0;
  color: var(--exc-body);
  font-size: clamp(1.5rem, 1.5vw, 1.7rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.exc-ugc__headlink {
  display: inline-block;
  margin-top: 1.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--exc-ink);
  text-underline-offset: 4px;
}

/* — piste — */
.exc-ugc__carousel { position: relative; }
.exc-ugc__viewport { overflow: hidden; }
.exc-ugc__track {
  display: flex;
  gap: var(--exc-ugc-gap);
  margin: 0;
  padding: 3rem 0;
  list-style: none;
  transition: transform .55s var(--exc-ease);
  will-change: transform;
}
.exc-ugc__slide {
  flex: 0 0 var(--exc-ugc-w);
  /* Marge négative : les voisines, réduites, glissent SOUS la carte du
     centre au lieu de s'aligner à côté. C'est le chevauchement qui donne
     la profondeur ; sans lui, on a une file, pas une pile. */
  margin-inline: calc(var(--exc-ugc-chevauchement) * -1);
  transform: scale(.78);
  opacity: .5;
  transition: transform .55s var(--exc-ease), opacity .55s var(--exc-ease);
}
.exc-ugc__slide.is-near   { transform: scale(.88); opacity: .82; }
.exc-ugc__slide.is-active { transform: scale(1);   opacity: 1; }
/* Repli sans JavaScript : sans lui, une piste jamais initialisée laisserait
   toutes les cartes à moitié effacées — c'est exactement ce qui est arrivé. */
.exc-ugc__track:not(:has(.is-active)) .exc-ugc__slide { opacity: 1; transform: scale(1); }

/* — carte — */
.exc-ugc__card {
  background-size: cover;
  background-position: center;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  /* raccourci « background » interdit ici : il remettrait
     background-size et background-position à zéro */
  background-color: var(--exc-rose-50);
  box-shadow: var(--exc-shadow-md);
  cursor: pointer;
  text-align: left;
  transition: box-shadow .45s var(--exc-ease);
}
.exc-ugc__slide.is-active .exc-ugc__card { box-shadow: var(--exc-shadow-lg); }
.exc-ugc__card img,
.exc-ugc__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exc-ugc__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach) 60%, var(--exc-rose-200));
}
.exc-ugc__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.30) 36%, rgba(0,0,0,0) 62%);
}

/* — mentions en bas à gauche — */
.exc-ugc__meta {
  position: absolute;
  left: 1.8rem;
  right: 7rem;
  bottom: 1.8rem;
  z-index: 2;
  color: #fff;
}
.exc-ugc__name {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.exc-ugc__verified { width: 15px; height: 15px; flex-shrink: 0; }
.exc-ugc__caption {
  margin: .5rem 0 0;
  font-size: 1.25rem;
  line-height: 1.4;
  color: rgba(255,255,255,.84);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exc-ugc__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .8rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--exc-rose-200);
  text-decoration: none;
  position: relative;
  z-index: 4;
}
.exc-ugc__link:hover { color: #fff; }

/* — bouton de lecture, en bas à droite — */
.exc-ugc__play {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: var(--exc-r-md);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  transition: background-color .25s var(--exc-ease), transform .25s var(--exc-ease);
}
.exc-ugc__play svg { width: 15px; height: 15px; fill: #fff; margin-left: 2px; }
.exc-ugc__card:hover .exc-ugc__play { background: rgba(255,255,255,.3); transform: scale(1.08); }

/* — flèches — */
.exc-ugc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: var(--exc-shadow-md);
  cursor: pointer;
  transition: transform .25s var(--exc-ease), box-shadow .25s var(--exc-ease), opacity .25s;
}
.exc-ugc__arrow svg { width: 18px; height: 18px; stroke: var(--exc-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.exc-ugc__arrow:hover { transform: translateY(-50%) scale(1.08); box-shadow: var(--exc-shadow-lg); }
.exc-ugc__arrow--prev { left: 3rem; }
.exc-ugc__arrow--next { right: 3rem; }
.exc-ugc__arrow[disabled] { opacity: .3; cursor: default; }
.exc-ugc__arrow[disabled]:hover { transform: translateY(-50%); box-shadow: var(--exc-shadow-md); }

@media screen and (max-width: 989px) {
  .exc-ugc { --exc-ugc-w: 62vw; --exc-ugc-gap: 2.4rem; --exc-ugc-chevauchement: 1.6rem; padding: 5.6rem 0 4.8rem; }
  .exc-ugc__head { margin-bottom: 2rem; }
  .exc-ugc__track { padding: 2.2rem 0; }
  .exc-ugc__arrow { width: 44px; height: 44px; }
  .exc-ugc__arrow--prev { left: 1.4rem; }
  .exc-ugc__arrow--next { right: 1.4rem; }
  .exc-ugc__meta { left: 1.4rem; right: 6rem; bottom: 1.4rem; }
  .exc-ugc__name { font-size: 1.5rem; }
  .exc-ugc__play { width: 40px; height: 40px; right: 1.2rem; bottom: 1.2rem; }
}
@media screen and (max-width: 480px) {
  .exc-ugc { --exc-ugc-w: 68vw; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-ugc__track,
  .exc-ugc__slide { transition: none; }
}

/* Lecteur plein écran */
.exc-ugc__modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  background: rgba(17,24,39,.85);
  backdrop-filter: blur(6px);
  padding: 2rem;
}
.exc-ugc__modal[open] { display: grid; }
/* le défilement dans le lecteur ne doit pas entraîner la page derrière */
.exc-ugc__modal { overscroll-behavior: contain; }
.exc-ugc__modal-inner {
  position: relative;
  width: min(42rem, 100%);
  aspect-ratio: 9 / 16;
  max-height: 84svh;
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  background: #000;
}
.exc-ugc__modal-inner iframe,
.exc-ugc__modal-inner video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.exc-ugc__modal-close {
  position: absolute;
  top: -4.6rem;
  right: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--exc-r-full);
  background: rgba(255,255,255,.94);
  cursor: pointer;
}
.exc-ugc__modal-close svg { width: 16px; height: 16px; stroke: var(--exc-ink); stroke-width: 2; fill: none; }

/* ==========================================================================
   6. Pied de page
   ========================================================================== */

.footer {
  background: var(--exc-peach);
  border-top: 0;
  margin-top: 0;
}
.footer .footer__content-top { padding-bottom: 3.6rem; }
.footer__content-bottom { border-top: 1px solid rgba(17,24,39,.08); }
.footer-block__heading {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--exc-ink);
}
.footer .list-menu__item--link,
.footer__content-bottom,
.footer-block__details-content {
  color: var(--exc-body);
  font-size: 1.4rem;
}
.footer .newsletter-form__field-wrapper .field__input {
  border-radius: var(--exc-r-xl);
  background: #fff;
}
@media screen and (max-width: 989px) {
  .footer { padding-bottom: 1rem; }
}

/* ==========================================================================
   Divers
   ========================================================================== */

/* alternance des fonds gérée par les jeux de couleurs Dawn, mais on
   neutralise la marge entre sections pour un enchaînement plein écran */
.shopify-section { margin: 0; }

/* Dawn ajoute une ombre dure sur les cartes ; on impose la nôtre */
.card-wrapper .card { box-shadow: var(--exc-shadow-sm); }
.card-wrapper:hover .card { box-shadow: var(--exc-shadow-md); }

/* ==========================================================================
   7. Fiche produit
   ========================================================================== */

.exc-pdp { padding: 3.2rem 0 7rem; }
.exc-pdp__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}

/* fil d'Ariane */
.exc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 2.8rem;
  padding: 0;
  list-style: none;
  font-size: 1.25rem;
  color: var(--exc-muted);
}
.exc-crumbs a { color: var(--exc-body); text-decoration: none; text-underline-offset: 3px; }
.exc-crumbs a:hover { text-decoration: underline; }
.exc-crumbs li + li::before { content: '/'; margin-right: .6rem; color: var(--exc-line); }
.exc-crumbs [aria-current='page'] { color: var(--exc-ink); }

.exc-pdp__grid {
  display: grid;
  /* Parts égales : la galerie occupait 1,15 contre 0,85, soit près de
     150 px de plus que la colonne d'achat sur un écran courant. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4.4rem;
  /* pas d'align-items: start — un élément de grille non étiré n'a aucune
     marge de manœuvre pour coller. La colonne s'étire, la galerie colle
     à l'intérieur. */
}
.exc-pdp__col { min-width: 0; }
/* Sans min-width: 0, un enfant à défilement horizontal (le carrousel vidéo)
   impose sa largeur intrinsèque à toute la colonne et fait déborder la page. */
.exc-pdp__grid > * { min-width: 0; }

/* ---------- galerie ---------- */

/* La galerie reste à l'écran pendant que la colonne d'achat défile :
   la pièce ne quitte jamais le regard. Déclaré en mobile-first : poser
   « position: static » plus bas laissait « top » actif et décalait la
   galerie de 11rem par-dessus le titre. */
.exc-gal { position: relative; }
@media screen and (min-width: 990px) {
  /* Visuel principal + vignettes : la galerie tient dans l'écran, elle colle
     et la pièce ne quitte jamais le regard. */
  .exc-gal { position: sticky; top: 11rem; }

  /* Mosaïque : la galerie est plus haute que l'écran, il n'y a rien à coller.
     C'est alors la colonne d'achat qui suit — prix, tailles et bouton restent
     sous la main pendant qu'on fait défiler les photos. */
  .exc-pdp--mosaique .exc-gal { position: relative; top: auto; }
  /* align-self: start est indispensable : un élément de grille étiré remplit
     toute la rangée et n'a plus de marge de manœuvre pour coller. */
  .exc-pdp--mosaique .exc-pdp__info { align-self: start; position: sticky; top: 11rem; }

  /* Pas d'align-self: start ici. La colonne doit s'étirer sur toute la
     hauteur de la rangée pour que la galerie, plus courte, ait de la marge
     pour coller. Sinon elle s'arrête et laisse un grand blanc à gauche. */
}

/* mosaïque : les visuels s'empilent, pas de vignettes */
.exc-gal--mosaique .exc-gal__mosaique {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-gal--mosaique .exc-gal__tuile {
  aspect-ratio: var(--exc-pdp-ratio, 3 / 4);
  border-radius: var(--exc-r-xl);
  overflow: hidden;
  background-color: var(--exc-rose-50);
  background-size: cover;
  background-position: center;
}
/* le premier visuel occupe toute la largeur */
.exc-gal--mosaique .exc-gal__tuile:first-child { grid-column: 1 / -1; }
.exc-gal--mosaique .exc-gal__tuile img { width: 100%; height: 100%; object-fit: cover; }
.exc-gal--mosaique .exc-gal__main,
.exc-gal--mosaique .exc-gal__thumbs { display: none; }
.exc-gal--mosaique .exc-gal__badges { position: absolute; top: 1.6rem; left: 1.6rem; z-index: 2; }

.exc-gal__main {
  position: relative;
  aspect-ratio: var(--exc-pdp-ratio, 3 / 4);
  /* filet de sécurité : le cadre ne peut jamais se réduire à rien */
  min-height: 24rem;
  /* ni dépasser l'écran : un portrait 3:4 sur une colonne large dépassait
     les 900 px, il fallait défiler pour voir le bouton d'achat */
  max-height: 78vh;
  max-height: 78svh;
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  background: var(--exc-rose-50);
}
/* Mode démonstration : c'est l'image qui donne la hauteur. Deux classes
   pour passer devant .exc-gal__main sans dépendre de l'ordre du fichier. */
.exc-gal__main.exc-gal__main--demo {
  aspect-ratio: auto;
  min-height: 0;
}
/* height: auto plutôt qu'aspect-ratio, pour ne pas retomber sur le cadre à
   hauteur nulle ; max-height + object-fit recadrent sans jamais s'effondrer */
.exc-gal__demo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  max-height: 78svh;
  object-fit: cover;
  object-position: center;
}

/* visibility (et pas seulement opacity) : sinon les cinq visuels restent
   dans l'arbre d'accessibilité et sont tous énumérés au lecteur d'écran */
.exc-gal__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--exc-ease), visibility .35s var(--exc-ease);
}
.exc-gal__slide.is-active { opacity: 1; visibility: visible; }
.exc-gal__slide img { width: 100%; height: 100%; object-fit: cover; }
.exc-gal__placeholder { position: absolute; inset: 0; background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach)); }

.exc-gal__badges {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}

.exc-gal__thumbs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 7rem;
  justify-content: start;
  gap: 1rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.exc-gal__thumbs::-webkit-scrollbar { display: none; }
.exc-gal__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: var(--exc-r-md);
  overflow: hidden;
  background: var(--exc-rose-50);
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s var(--exc-ease), box-shadow .25s var(--exc-ease);
}
.exc-gal__thumb img { width: 100%; height: 100%; object-fit: cover; }
.exc-gal__thumb:hover { opacity: .85; }
.exc-gal__thumb[aria-current='true'] {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--exc-ink);
}

/* ---------- colonne d'information ---------- */

.exc-pdp__info { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.exc-pdp__info > * { min-width: 0; }
.exc-pdp__vendor {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--exc-rose-600);
}
.exc-pdp__title {
  margin: 0;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.exc-pdp__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  /* sans chasse fixe, passer de 49,90 € à 54,90 € fait sauter la ligne */
  font-variant-numeric: tabular-nums;
}
.exc-pdp__price del { font-size: 1.6rem; font-weight: 500; color: var(--exc-muted); }
.exc-pdp__price .exc-badge { align-self: center; }
.exc-pdp__taxes { margin: -.6rem 0 0; font-size: 1.2rem; color: var(--exc-muted); }
.exc-pdp__text { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--exc-body); text-wrap: pretty; }

/* ---------- sélecteurs de variante ---------- */

.exc-opt + .exc-opt { margin-top: .4rem; }
.exc-opt__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: .9rem;
}
.exc-opt__name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.exc-opt__chosen { font-size: 1.35rem; color: var(--exc-body); }
.exc-opt__guide { font-size: 1.25rem; font-weight: 600; color: var(--exc-rose-600); text-underline-offset: 3px; }

.exc-opt__values { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; border: 0; }
.exc-opt__values legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.exc-opt__values input { position: absolute; opacity: 0; pointer-events: none; }

.exc-opt__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.6rem;
  min-height: 4.6rem;
  padding: 0 1.6rem;
  border: 1px solid rgba(17, 24, 39, .16);
  border-radius: var(--exc-r-full);
  background: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--exc-ink);
  cursor: pointer;
  transition: border-color .2s var(--exc-ease), background-color .2s var(--exc-ease), color .2s var(--exc-ease);
}
.exc-opt__value:hover { border-color: var(--exc-ink); }
input:checked + .exc-opt__value {
  background: var(--exc-ink);
  border-color: var(--exc-ink);
  color: #fff;
}
input:focus-visible + .exc-opt__value { outline: 2px solid var(--exc-rose-600); outline-offset: 3px; }

/* combinaison indisponible : on la montre barrée plutôt que de la masquer,
   la cliente comprend que la taille existe mais qu'elle est partie */
.exc-opt__value.is-unavailable {
  color: var(--exc-muted);
  border-color: var(--exc-line);
  background:
    linear-gradient(to top left,
      transparent calc(50% - .6px), rgba(17,24,39,.22) 50%, transparent calc(50% + .6px)) no-repeat,
    #fff;
  cursor: not-allowed;
}
input:checked + .exc-opt__value.is-unavailable { background-color: var(--exc-line); color: var(--exc-body); }

/* Le trait barré n'est qu'un dégradé : l'information « indisponible » doit
   aussi exister en texte pour qui n'y voit pas. */
.exc-opt__indispo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* région d'annonce des changements de variante */
.exc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* pastilles de couleur */
.exc-opt--couleur .exc-opt__value {
  min-width: 4rem;
  width: 4rem;
  height: 4rem;
  min-height: 4rem;
  padding: 0;
  overflow: hidden;
}
.exc-opt--couleur .exc-opt__swatch {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
}
.exc-opt--couleur input:checked + .exc-opt__value {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--exc-ink);
  background: #fff;
}

/* ---------- achat ---------- */

.exc-pdp__buy { display: flex; flex-direction: column; gap: 1rem; margin-top: .8rem; }
.exc-pdp__buy .exc-atc { height: 5.4rem; font-size: 1.3rem; }
/* Un seul appel à l'action principal par écran : « Ajouter au panier » reste
   le bouton plein, le paiement express passe en second rang. */
.exc-pdp__buy .shopify-payment-button__button {
  border-radius: var(--exc-r-full) !important;
  min-height: 5.4rem;
  font-family: var(--exc-font) !important;
  font-weight: 600 !important;
}
.exc-pdp__buy .shopify-payment-button__button--unbranded {
  background: #fff !important;
  color: var(--exc-ink) !important;
  box-shadow: inset 0 0 0 1.5px rgba(17, 24, 39, .2) !important;
}
.exc-pdp__buy .shopify-payment-button__button--unbranded:hover {
  background: var(--exc-rose-50) !important;
  box-shadow: inset 0 0 0 1.5px var(--exc-ink) !important;
}
.exc-pdp__soldout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.4rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-line);
  color: var(--exc-body);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- réassurance courte ---------- */

.exc-pdp__notes { margin: .8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .9rem; }
.exc-pdp__note { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.35rem; line-height: 1.45; color: var(--exc-body); }
.exc-pdp__note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; stroke: var(--exc-rose-600); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- accordéons ---------- */

.exc-acc { margin-top: 1.2rem; border-top: 1px solid var(--exc-line); }
.exc-acc__item { border-bottom: 1px solid var(--exc-line); }
.exc-acc__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.8rem 0;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.exc-acc__sum::-webkit-details-marker { display: none; }
.exc-acc__sum svg { flex: none; width: 16px; height: 16px; stroke: var(--exc-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; transition: transform .3s var(--exc-ease); }
.exc-acc__item[open] .exc-acc__sum svg { transform: rotate(45deg); }
.exc-acc__body { padding: 0 0 2rem; font-size: 1.4rem; line-height: 1.65; color: var(--exc-body); }
.exc-acc__body > *:first-child { margin-top: 0; }
.exc-acc__body > *:last-child { margin-bottom: 0; }

/* ---------- adaptations ---------- */

@media screen and (max-width: 989px) {
  .exc-pdp__grid { grid-template-columns: 1fr; gap: 3.2rem; }
  .exc-pdp__info { position: static; }
}
@media screen and (max-width: 749px) {
  /* Sur mobile la mosaïque empilerait trois écrans de photos avant la zone
     d'achat : elle devient un carrousel qui défile au doigt. */
  .exc-gal--mosaique .exc-gal__mosaique {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: .8rem;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: 2rem;
  }
  .exc-gal--mosaique .exc-gal__mosaique::-webkit-scrollbar { display: none; }
  .exc-gal--mosaique .exc-gal__tuile { scroll-snap-align: center; }
  .exc-gal--mosaique .exc-gal__tuile:first-child { grid-column: auto; }

  .exc-pdp { padding: 1.6rem 0 4.4rem; }
  .exc-pdp__inner { padding: 0 2rem; }
  .exc-crumbs { margin-bottom: 1.6rem; }
  .exc-gal__main { border-radius: var(--exc-r-xl); }
  .exc-gal__thumbs { grid-auto-columns: 5.6rem; }
  .exc-pdp__buy .exc-atc,
  .exc-pdp__soldout { height: 5rem; }
}

/* ==========================================================================
   7 bis. Fiche produit — preuve sociale, stock, bénéfices, barre d'achat
   ========================================================================== */

/* — note et avis — */
.exc-pdp__avis {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  font-size: 1.35rem;
  color: var(--exc-body);
}
.exc-pdp__avis .exc-rating__stars svg { width: 15px; height: 15px; }
.exc-pdp__avis a { color: var(--exc-body); text-underline-offset: 3px; }
.exc-pdp__avis strong { color: var(--exc-ink); font-weight: 700; }

/* — stock restant — */
.exc-stock { margin: 0; }
.exc-stock__ligne {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--exc-rose-600);
}
.exc-stock__point {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--exc-rose-600);
}
.exc-stock__point::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--exc-rose-600);
  animation: exc-pulse 2s ease-out infinite;
}
.exc-stock__barre {
  position: relative;
  height: 4px;
  margin-top: .8rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-100);
  overflow: hidden;
}
.exc-stock__jauge {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--exc-stock-part, 20%);
  border-radius: inherit;
  background: var(--exc-rose-600);
}
@media (prefers-reduced-motion: reduce) { .exc-stock__point::after { animation: none; } }

/* — bénéfices à puces — */
.exc-bene { margin: .4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.exc-bene__item { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.35rem; line-height: 1.45; color: var(--exc-body); }
.exc-bene__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--exc-rose-100);
}
.exc-bene__check svg { width: 10px; height: 10px; stroke: var(--exc-rose-600); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* — mini-carrousel de vidéos dans la colonne d'achat — */
.exc-pdp__ugc { margin-top: .8rem; min-width: 0; }
.exc-pdp__ugc-titre {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--exc-ink);
}
.exc-pdp__ugc-piste {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 11rem;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .4rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.exc-pdp__ugc-piste::-webkit-scrollbar { display: none; }
.exc-pdp__ugc-carte {
  background-size: cover;
  background-position: center;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: var(--exc-r-xl);
  overflow: hidden;
  /* raccourci « background » interdit ici : il remettrait
     background-size et background-position à zéro */
  background-color: var(--exc-rose-50);
  box-shadow: var(--exc-shadow-sm);
  cursor: pointer;
  scroll-snap-align: start;
}
.exc-pdp__ugc-carte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exc-pdp__ugc-carte::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
}
.exc-pdp__ugc-play {
  position: absolute;
  right: .8rem;
  bottom: .8rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1.2px solid rgba(255,255,255,.75);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
.exc-pdp__ugc-play svg { width: 10px; height: 10px; fill: #fff; margin-left: 1px; }

/* — accordéon : le + devient − — */
.exc-acc__v { transform-origin: center; transition: opacity .25s var(--exc-ease), transform .25s var(--exc-ease); }
.exc-acc__item[open] .exc-acc__v { opacity: 0; transform: scaleY(0); }
.exc-acc__item[open] .exc-acc__sum svg { transform: none; }

/* — retour tactile sur le bouton d'achat — */
.exc-atc:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .exc-atc:active { transform: none; } }

/* ==========================================================================
   7 ter. Barre d'achat fixe (mobile)
   ========================================================================== */

.exc-buybar { display: none; }

@media screen and (max-width: 989px) {
  .exc-buybar {
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 60;
    padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-top: 1px solid #F3F4F6;
    box-shadow: var(--exc-shadow-nav);
  }
  .exc-buybar__inner { display: flex; align-items: center; gap: 1.2rem; }
  .exc-buybar__prix { flex: none; display: flex; flex-direction: column; gap: .2rem; }
  .exc-buybar__montant { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .exc-buybar__variante { font-size: 1.1rem; color: var(--exc-muted); }
  /* c'est le conteneur d'achat qui doit s'étirer, pas seulement l'enveloppe
     du bouton : sans ça le bouton reste à sa largeur de contenu et l'icône
     vient chevaucher le libellé */
  .exc-buybar [data-exc-buy] { flex: 1 1 auto; min-width: 0; }
  .exc-buybar .exc-atc-wrap { width: 100%; }
  .exc-buybar .exc-atc { height: 4.8rem; }
  .exc-buybar__epuise {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.8rem;
    border-radius: var(--exc-r-full);
    background: var(--exc-line);
    color: var(--exc-body);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Une seule barre fixe à la fois : sur la fiche produit, l'achat prend la
     place de la navigation. Deux barres empileraient 130 px de chrome fixe. */
  body.exc-a-buybar .exc-bottomnav { display: none; }
  body.exc-a-buybar { padding-bottom: calc(7.6rem + env(safe-area-inset-bottom)); }

  /* Les deux boutons restent dans le flux, près des tailles : c'est là
     qu'on décide. La barre fixe ne prend le relais qu'une fois qu'ils ont
     quitté l'écran, sinon on afficherait deux fois la même chose. */
  .exc-buybar {
    transform: translateY(100%);
    transition: transform .3s var(--exc-ease);
  }
  .exc-buybar.is-visible { transform: translateY(0); }

  .exc-buybar__prix { max-width: 9rem; }
  .exc-buybar .exc-pdp__actions { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .exc-buybar .exc-atc,
  .exc-buybar .exc-buy { height: 4.4rem; font-size: 1rem; letter-spacing: .04em; padding: 0 .6rem; }
  .exc-buybar .exc-atc__cart { left: .8rem; width: 15px; height: 15px; }
  .exc-buybar .exc-atc__cart svg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-buybar { transition: none; }
}

/* ==========================================================================
   8. Fiche produit — avis défilants, cartes, paiements, communauté
   ========================================================================== */

/* — carrousel d'avis compact — */
.exc-avis {
  position: relative;
  margin-top: .4rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--exc-r-2xl);
  background: var(--exc-rose-50);
}
.exc-avis__viewport { overflow: hidden; }
.exc-avis__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform .5s var(--exc-ease);
}
.exc-avis__item { flex: 0 0 100%; min-width: 0; }

.exc-avis__head { display: flex; align-items: center; gap: 1rem; }
.exc-avis__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--exc-r-md);
  overflow: hidden;
  background: var(--exc-rose-200);
  background-size: cover;
  background-position: center;
  color: #5C2E2B;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.exc-avis__nom {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.exc-avis__verifie { width: 14px; height: 14px; flex: none; }
.exc-avis__etoiles { display: inline-flex; gap: 1px; margin-top: .2rem; }
.exc-avis__etoiles svg { width: 12px; height: 12px; fill: #F5B301; }
.exc-avis__etoiles svg.is-empty { fill: #E5E1DE; }
.exc-avis__texte {
  margin: .8rem 0 0;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--exc-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exc-avis__nav {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: flex;
  gap: .4rem;
}
.exc-avis__fleche {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
  transition: background-color .2s var(--exc-ease);
}
.exc-avis__fleche:hover { background: #fff; }
.exc-avis__fleche svg { width: 12px; height: 12px; stroke: var(--exc-ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.exc-avis__fleche[disabled] { opacity: .35; cursor: default; }

/* — cartes de réassurance, deux colonnes — */
.exc-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin: .4rem 0 0;
  padding: 0;
  list-style: none;
}
.exc-cartes__item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--exc-r-xl);
  background: var(--exc-peach);
}
.exc-cartes__icone { flex: none; width: 22px; height: 22px; stroke: var(--exc-rose-600); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.exc-cartes__titre { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.exc-cartes__texte { margin: .2rem 0 0; font-size: 1.15rem; line-height: 1.3; color: var(--exc-body); }

/* On garde deux colonnes même sur petit écran : quatre cartes empilées
   pousseraient le reste de la page trop bas. */
@media screen and (max-width: 480px) {
  .exc-cartes__item { padding: 1rem; gap: .8rem; }
  .exc-cartes__icone { width: 19px; height: 19px; }
  .exc-cartes__titre { font-size: 1.2rem; }
  .exc-cartes__texte { font-size: 1.05rem; }
}

/* — moyens de paiement — */
.exc-pay { margin: .4rem 0 0; }
.exc-pay { text-align: center; }
.exc-pay__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-pay__liste svg {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .08);
}
.exc-pay__note { margin: .8rem 0 0; font-size: 1.15rem; color: var(--exc-muted); }

/* — ligne communauté : avatars superposés + phrase — */
.exc-commu {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: .4rem 0 0;
  flex-wrap: wrap;
}
.exc-commu__avatars { display: flex; }
.exc-commu__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--exc-r-full);
  border: 2px solid #fff;
  background: var(--exc-rose-200);
  background-size: cover;
  background-position: center;
  color: #5C2E2B;
  font-size: 1.1rem;
  font-weight: 700;
}
.exc-commu__avatar + .exc-commu__avatar { margin-left: -12px; }
.exc-commu__texte {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--exc-body);
}
.exc-commu__texte strong { color: var(--exc-ink); font-weight: 700; }
.exc-commu__verifie { width: 14px; height: 14px; vertical-align: -2px; margin: 0 .2rem; }

/* ==========================================================================
   9. Fiche produit — deux boutons côte à côte, animation du terminal
   ========================================================================== */

.exc-pdp__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
}
.exc-pdp__actions .exc-atc { height: 5rem; font-size: 1.15rem; letter-spacing: .06em; padding: 0 1rem; }
.exc-pdp__actions .exc-atc__cart { left: 1.2rem; width: 17px; height: 17px; }
.exc-pdp__actions .exc-atc__cart svg { width: 17px; height: 17px; }

/* — bouton « Acheter maintenant », animation de terminal de paiement — */
/* Un seul appel à l'action plein par écran : « Ajouter » reste noir,
   « Acheter maintenant » passe en contour. On lit une action principale
   et une alternative, au lieu de deux ordres simultanés. */
.exc-buy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--exc-rose-600);
  color: var(--exc-rose-600);
  font-family: var(--exc-font);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--exc-ease), transform .25s var(--exc-ease);
}
.exc-buy:hover {
  background: var(--exc-rose-600);
  color: #fff;
  transform: translateY(-1px);
}
.exc-buy:active { transform: scale(.96); }
.exc-buy:focus-visible { outline: 2px solid var(--exc-ink); outline-offset: 3px; }

.exc-buy__label { transition: opacity .18s var(--exc-ease); }
.exc-buy.is-busy .exc-buy__label { opacity: 0; }

/* le terminal, dessiné en CSS : deux éléments, pas d'image à charger */
.exc-buy__tpe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 30px;
  margin: -15px 0 0 -12px;
  border-radius: 4px;
  background: var(--exc-rose-600);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}
.exc-buy__ecran {
  position: absolute;
  top: 4px;
  left: 3px;
  right: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--exc-ink);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.exc-buy__points { display: flex; gap: 2px; }
.exc-buy__points span {
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  animation: exc-tpe-points 1s ease-in-out infinite;
}
.exc-buy__points span:nth-child(2) { animation-delay: .15s; }
.exc-buy__points span:nth-child(3) { animation-delay: .3s; }
@keyframes exc-tpe-points {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
.exc-buy__ok { position: absolute; width: 11px; height: 11px; opacity: 0; }
.exc-buy__ok path { stroke: #4ADE80; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* le clavier, trois rangées de touches */
.exc-buy__touches {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}
.exc-buy__touches i { height: 2.5px; border-radius: 1px; background: rgba(255, 255, 255, .55); }

/* la carte, qui tombe dans la fente */
.exc-buy__carte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 14px;
  margin: -7px 0 0 -11px;
  border-radius: 2.5px;
  background: linear-gradient(135deg, var(--exc-ink), #3B2A28);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.exc-buy__carte::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 4px;
  height: 3px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .55);
}

@media (prefers-reduced-motion: reduce) {
  .exc-buy:hover { transform: none; }
  .exc-buy__points span { animation: none; opacity: .8; }
}

@media screen and (max-width: 749px) {
  .exc-pdp__actions .exc-atc,
  .exc-buy { height: 4.6rem; font-size: 1.05rem; }
}

/* — avatars illustrés — */
.exc-avis__avatar img,
.exc-commu__avatar img { width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   10. Fiche produit — déroulé de la commande
   ========================================================================== */

.exc-etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.exc-etapes__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .8rem;
}
/* le trait pointillé qui relie les étapes */
.exc-etapes__item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 21px;
  left: calc(50% + 26px);
  right: calc(-50% + 26px);
  border-top: 1.5px dashed rgba(17, 24, 39, .18);
}
.exc-etapes__rond {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--exc-r-full);
  background: var(--exc-peach);
}
.exc-etapes__item.is-fait .exc-etapes__rond { background: var(--exc-rose-200); }
.exc-etapes__rond svg {
  width: 19px;
  height: 19px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-etapes__titre { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.exc-etapes__date { margin: .1rem 0 0; font-size: 1.15rem; color: var(--exc-body); }

@media screen and (max-width: 480px) {
  .exc-etapes__rond { width: 36px; height: 36px; }
  .exc-etapes__rond svg { width: 17px; height: 17px; }
  .exc-etapes__item:not(:last-child)::after { top: 18px; left: calc(50% + 22px); right: calc(-50% + 22px); }
  .exc-etapes__titre { font-size: 1.1rem; }
  .exc-etapes__date { font-size: 1.05rem; }
}

/* ==========================================================================
   11. Lecteur vidéo — panneau d'achat à côté
   ========================================================================== */

.exc-ugc__scene {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
.exc-ugc__achat {
  width: 27rem;
  padding: 2rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-lg);
}
.exc-ugc__achat[hidden] { display: none; }
.exc-ugc__achat-titre {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
}
.exc-ugc__achat-prix {
  margin: .5rem 0 1.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exc-ugc__achat .exc-pdp__actions { grid-template-columns: 1fr; gap: .8rem; }
.exc-ugc__achat .exc-atc,
.exc-ugc__achat .exc-buy { height: 4.6rem; }

@media screen and (max-width: 899px) {
  /* sous la vidéo plutôt qu'à côté : la largeur manque */
  .exc-ugc__scene { flex-direction: column; gap: 1.2rem; }
  .exc-ugc__modal-inner { max-height: 62svh; }
  .exc-ugc__achat { width: min(42rem, 100%); padding: 1.4rem; }
  .exc-ugc__achat-titre { font-size: 1.4rem; }
  .exc-ugc__achat-prix { margin: .3rem 0 1rem; font-size: 1.6rem; }
  .exc-ugc__achat .exc-pdp__actions { grid-template-columns: 1fr 1fr; }
}


/* ==========================================================================
   12. En-tête — hauteur du logo
   ========================================================================== */

/* Le logo est un aplat aquarelle de ratio 1,24 : à 170 px de large il
   imposait près de 200 px d'en-tête. On plafonne sa hauteur plutôt que sa
   largeur, pour qu'un autre fichier ne casse pas la mise en page. */
.header__heading-logo { max-height: 6.4rem; width: auto; }
@media screen and (max-width: 989px) {
  .header__heading-logo { max-height: 4.8rem; }
}

/* ==========================================================================
   13. Traitement d'objection
   ========================================================================== */

.exc-obj { padding: 7rem 0; }
.exc-obj__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
}

/* Une seule carte qui contient l'image et le texte. L'image vient toucher
   les bords, le texte respire à l'intérieur. */
.exc-obj__carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--exc-r-3xl);
  overflow: hidden;
  background: var(--exc-peach);
  box-shadow: var(--exc-shadow-sm);
}
.exc-obj--droite .exc-obj__media { order: 2; }
.exc-obj__corps { padding: 5rem 4.4rem; align-self: center; }

.exc-obj__media { background: var(--exc-rose-50); }
.exc-obj__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.exc-obj__vide { aspect-ratio: 4 / 5; height: 100%; background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach)); }

.exc-obj__titre {
  margin: 0;
  font-size: clamp(2.4rem, 3.2vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-obj__titre em {
  font-family: var(--exc-font-display);
  font-style: italic;
  font-weight: 400;
}
.exc-obj__texte {
  margin: 1.6rem 0 0;
  font-size: 1.55rem;
  line-height: 1.6;
  color: var(--exc-body);
  text-wrap: pretty;
}
.exc-obj__points { margin: 2.4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
.exc-obj__point { display: flex; align-items: flex-start; gap: 1.2rem; font-size: 1.45rem; line-height: 1.45; }
.exc-obj__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--exc-rose-600);
}
.exc-obj__check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* Filet plutôt qu'encart : le témoignage vit déjà dans une carte, lui en
   donner une seconde ferait carte dans carte. */
.exc-obj__avis {
  margin: 2.8rem 0 0;
  padding: 0 0 0 1.8rem;
  border-left: 2px solid var(--exc-rose-400);
}
.exc-obj__citation { margin: 0; font-size: 1.45rem; line-height: 1.55; font-style: italic; }
.exc-obj__signature { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 0; }
.exc-obj__avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--exc-r-full);
  background-color: var(--exc-rose-200);
  background-size: cover;
  background-position: center;
}
.exc-obj__nom { margin: 0; font-size: 1.3rem; font-weight: 700; }
.exc-obj__etoiles { display: inline-flex; gap: 1px; }
.exc-obj__etoiles svg { width: 12px; height: 12px; fill: #F5B301; }

@media screen and (max-width: 1099px) {
  .exc-obj__corps { padding: 3.6rem 3rem; }
}
@media screen and (max-width: 899px) {
  .exc-obj { padding: 4.4rem 0; }
  .exc-obj__inner { padding: 0 2rem; }
  .exc-obj__carte { grid-template-columns: 1fr; border-radius: var(--exc-r-2xl); }
  .exc-obj--droite .exc-obj__media { order: 0; }
  .exc-obj__media img { height: auto; aspect-ratio: 4 / 3; }
  .exc-obj__corps { padding: 2.8rem 2.2rem; }
}

/* ==========================================================================
   14. Accordéons — habillage en cartes
   ========================================================================== */

.exc-acc-groupe { margin-top: 1.6rem; }
.exc-acc-groupe__titre {
  margin: 0 0 1.2rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--exc-ink);
}

/* Les rangées nues détonnaient au milieu de cartes arrondies : chaque
   accordéon devient une carte, avec le même vocabulaire que le reste. */
.exc-acc { margin-top: .8rem; border-top: 0; }
.exc-acc__item {
  border: 0;
  border-radius: var(--exc-r-xl);
  background: var(--exc-rose-50);
  overflow: hidden;
  transition: background-color .25s var(--exc-ease);
}
.exc-acc__item:hover { background: var(--exc-rose-100); }
.exc-acc__item[open] { background: var(--exc-rose-100); }
.exc-acc__sum {
  padding: 1.5rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  gap: 1.4rem;
}
.exc-acc__sum svg {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: var(--exc-r-full);
  background: #fff;
  stroke: var(--exc-rose-600);
  stroke-width: 2.2;
  box-sizing: border-box;
}
.exc-acc__body {
  padding: 0 1.8rem 1.8rem;
  font-size: 1.4rem;
  line-height: 1.65;
  color: var(--exc-body);
}

/* ==========================================================================
   15. Comment la porter
   ========================================================================== */

.exc-tenue { padding: 7rem 0; }
.exc-tenue__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}

.exc-tenue__visuel {
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  background: var(--exc-rose-50);
}
.exc-tenue__visuel img { display: block; width: 100%; height: auto; }
.exc-tenue__vide { aspect-ratio: 3 / 4; background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach)); }

.exc-tenue__titre {
  margin: 0;
  font-size: clamp(2.4rem, 3.2vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-tenue__titre em { font-family: var(--exc-font-display); font-style: italic; font-weight: 400; }
.exc-tenue__texte {
  margin: 1.4rem 0 0;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--exc-body);
  text-wrap: pretty;
}

/* — les pièces, en lignes plutôt qu'en grille : on lit une tenue, pas un rayon — */
.exc-tenue__pieces { margin: 2.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.exc-tenue__piece {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.6rem;
  padding: 1rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-sm);
  transition: box-shadow .3s var(--exc-ease), transform .3s var(--exc-ease);
}
.exc-tenue__piece:hover { box-shadow: var(--exc-shadow-md); transform: translateY(-2px); }
.exc-tenue__vignette {
  aspect-ratio: 1 / 1;
  border-radius: var(--exc-r-xl);
  overflow: hidden;
  background: var(--exc-rose-50);
}
.exc-tenue__vignette img { width: 100%; height: 100%; object-fit: cover; }
.exc-tenue__nom { margin: 0; font-size: 1.4rem; font-weight: 600; line-height: 1.3; }
.exc-tenue__nom a { color: var(--exc-ink); text-decoration: none; }
.exc-tenue__nom a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.exc-tenue__prix { margin: .3rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.exc-tenue__role {
  display: inline-block;
  margin-bottom: .4rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--exc-rose-600);
}
.exc-tenue__action { position: relative; z-index: 2; padding-right: .6rem; }
.exc-tenue__action .exc-atc { width: auto; min-width: 11rem; height: 4.2rem; font-size: 1.1rem; }
.exc-tenue__action .exc-atc__cart { left: 1.1rem; width: 16px; height: 16px; }
.exc-tenue__action .exc-atc__cart svg { width: 16px; height: 16px; }

@media screen and (max-width: 989px) {
  .exc-tenue__inner { grid-template-columns: 1fr; gap: 2.8rem; }
}
@media screen and (max-width: 749px) {
  .exc-tenue { padding: 4.4rem 0; }
  .exc-tenue__inner { padding: 0 2rem; }
  .exc-tenue__piece { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 1.2rem; }
  .exc-tenue__action { grid-column: 1 / -1; padding: 0; }
  .exc-tenue__action .exc-atc { width: 100%; }
}

/* Section dont la hauteur suit son contenu : sans ça, un bloc de
   recommandations vide réserve quand même ses marges. */
.exc-products--auto { padding: 0; }
.exc-products--auto .exc-products__bloc { padding-top: 7rem; padding-bottom: 7rem; }
@media screen and (max-width: 749px) {
  .exc-products--auto .exc-products__bloc { padding-top: 4.4rem; padding-bottom: 4.4rem; }
}

/* ==========================================================================
   16. Alerte du prochain arrivage
   ========================================================================== */

.exc-alerte { padding: 6rem 0; }
.exc-alerte__inner {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 2.4rem;
  text-align: center;
}
.exc-alerte__pastille {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1.4rem;
  margin-bottom: 1.8rem;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .72);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.exc-alerte__pastille .exc-drop__pulse { position: relative; }
.exc-alerte__titre {
  margin: 0;
  font-size: clamp(2.4rem, 3.4vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-alerte__titre em { font-family: var(--exc-font-display); font-style: italic; font-weight: 400; }
.exc-alerte__texte {
  margin: 1.4rem auto 0;
  max-width: 52ch;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--exc-body);
  text-wrap: pretty;
}

.exc-alerte__form { margin: 2.8rem auto 0; max-width: 46rem; }
.exc-alerte__champs { display: flex; gap: .8rem; }
.exc-alerte__champs input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  height: 5rem;
  padding: 0 1.8rem;
  border: 1px solid rgba(17, 24, 39, .14);
  border-radius: var(--exc-r-full);
  background: #fff;
  font-family: var(--exc-font);
  font-size: 1.45rem;
  color: var(--exc-ink);
}
.exc-alerte__champs input[type='email']::placeholder { color: var(--exc-muted); }
.exc-alerte__champs input[type='email']:focus-visible {
  outline: 2px solid var(--exc-rose-600);
  outline-offset: 2px;
  border-color: transparent;
}
.exc-alerte__champs .exc-btn { flex: none; height: 5rem; padding: 0 2.6rem; }
.exc-alerte__mention { margin: 1.2rem 0 0; font-size: 1.15rem; color: var(--exc-muted); }
.exc-alerte__retour {
  margin: 1.4rem 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--exc-rose-600);
}
.exc-alerte__erreur { margin: 1.2rem 0 0; font-size: 1.35rem; color: var(--exc-rose-700); }

@media screen and (max-width: 599px) {
  .exc-alerte { padding: 4.4rem 0; }
  .exc-alerte__champs { flex-direction: column; }
  .exc-alerte__champs .exc-btn { width: 100%; }
}

/* ==========================================================================
   17. L'histoire — vidéo et récit, en deux moitiés
   ========================================================================== */

.exc-histoire {
  position: relative;
  padding: 10rem 0;
  overflow: hidden;
}
.exc-histoire__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6rem;
  align-items: center;
}
.exc-histoire--droite .exc-histoire__media { order: 2; }

/* La tache floutée qui rappelle l'aquarelle du logo. Elle vit derrière le
   texte, jamais derrière la vidéo — sinon elle disparaîtrait dessous. */
.exc-histoire__tache {
  position: absolute;
  z-index: 0;
  width: 62rem;
  height: 62rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--exc-rose-200) 0%, var(--exc-rose-100) 45%, transparent 72%);
  filter: blur(90px);
  opacity: .55;
  pointer-events: none;
  top: 50%;
  right: -8rem;
  transform: translateY(-50%);
}
.exc-histoire--droite .exc-histoire__tache { right: auto; left: -8rem; }

/* — la vidéo — */
.exc-histoire__media { position: relative; }
.exc-histoire__cadre {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: var(--exc-histoire-ratio, 4 / 5);
  border-radius: var(--exc-r-3xl);
  overflow: hidden;
  background: var(--exc-rose-50);
  /* ombre teintée plutôt que grise : elle reste dans la famille du rose */
  box-shadow: 0 28px 60px -20px rgba(94, 40, 38, .22), 0 6px 18px -8px rgba(94, 40, 38, .10);
  cursor: pointer;
}
.exc-histoire__cadre img,
.exc-histoire__cadre video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exc-histoire__lecture {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -8px rgba(94, 40, 38, .3);
  transition: transform .3s var(--exc-ease), background-color .3s var(--exc-ease);
}
.exc-histoire__lecture svg { width: 24px; height: 24px; fill: var(--exc-ink); margin-left: 4px; }
.exc-histoire__cadre:hover .exc-histoire__lecture { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.exc-histoire__cadre.is-lecture .exc-histoire__lecture { opacity: 0; pointer-events: none; }

/* — le récit — */
.exc-histoire__titre {
  margin: 0;
  font-size: clamp(2.8rem, 3.6vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--exc-ink);
  text-wrap: balance;
}
.exc-histoire__titre em { font-family: var(--exc-font-display); font-style: italic; font-weight: 400; }
.exc-histoire__filet {
  display: block;
  width: 6.4rem;
  height: 4px;
  margin-top: 2rem;
  border-radius: 2px;
  background: var(--exc-rose-200);
}
.exc-histoire__texte {
  margin: 2.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--exc-body);
  text-wrap: pretty;
}
.exc-histoire__texte + .exc-histoire__texte { margin-top: 1.6rem; }

.exc-histoire__citation {
  margin: 2.8rem 0 0;
  padding: 2rem 2.4rem;
  border-left: 3px solid var(--exc-rose-300, var(--exc-rose-200));
  border-radius: 0 var(--exc-r-xl) var(--exc-r-xl) 0;
  background: rgba(251, 224, 220, .38);
}
.exc-histoire__citation p {
  margin: 0;
  font-family: var(--exc-font-display);
  font-size: 1.85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--exc-ink);
  text-wrap: pretty;
}
.exc-histoire__signature {
  margin: 2.4rem 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--exc-rose-600);
}

@media screen and (max-width: 989px) {
  .exc-histoire { padding: 6rem 0; }
  .exc-histoire__inner { grid-template-columns: 1fr; gap: 3.6rem; padding: 0 2.4rem; }
  /* la vidéo d'abord, quel que soit le côté choisi sur ordinateur */
  .exc-histoire--droite .exc-histoire__media { order: 0; }
  .exc-histoire__tache { width: 44rem; height: 44rem; right: -12rem; top: 62%; }
  .exc-histoire--droite .exc-histoire__tache { left: -12rem; right: auto; }
  .exc-histoire__citation p { font-size: 1.7rem; }
}
@media screen and (max-width: 749px) {
  .exc-histoire { padding: 4.4rem 0; }
  .exc-histoire__inner { padding: 0 2rem; }
  .exc-histoire__lecture { width: 60px; height: 60px; }
  .exc-histoire__lecture svg { width: 20px; height: 20px; }
  .exc-histoire__texte { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-histoire__cadre:hover .exc-histoire__lecture { transform: translate(-50%, -50%); }
}

/* boutons de fin du récit */
.exc-histoire__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3.2rem; }

/* variante à contour, pour un second choix qui ne concurrence pas le premier */
.exc-btn--contour {
  background: transparent;
  color: var(--exc-ink);
  box-shadow: inset 0 0 0 1.5px rgba(17, 24, 39, .22);
}
.exc-btn--contour:hover { background: var(--exc-ink); color: #fff; box-shadow: none; }

@media screen and (max-width: 599px) {
  .exc-histoire__actions { flex-direction: column; }
  .exc-histoire__actions .exc-btn { width: 100%; }
}

/* panneau du lecteur quand il porte du texte et des liens */
.exc-lecteur__texte {
  margin: .6rem 0 1.8rem;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--exc-body);
}
.exc-lecteur__actions { display: flex; flex-direction: column; gap: .8rem; }
.exc-lecteur__actions .exc-btn { width: 100%; padding: 1.4rem 2rem; font-size: 1.35rem; }
@media screen and (max-width: 899px) {
  .exc-lecteur__actions { flex-direction: row; }
  .exc-lecteur__actions .exc-btn { flex: 1 1 0; padding: 1.2rem 1rem; font-size: 1.2rem; }
}

/* — une vidéo sous chaque étape du déroulé — */
.exc-etapes--videos { column-gap: 1.2rem; }
.exc-etapes--videos .exc-etapes__item { gap: 1rem; }
/* le trait relie les pastilles : on retranche l'écart ajouté entre colonnes */
.exc-etapes--videos .exc-etapes__item:not(:last-child)::after {
  left: calc(50% + 26px);
  right: calc(-50% + 26px - 1.2rem);
}
.exc-etapes__video {
  position: relative;
  display: block;
  width: 100%;
  margin-top: .4rem;
  padding: 0;
  border: 0;
  aspect-ratio: 9 / 16;
  border-radius: var(--exc-r-xl);
  overflow: hidden;
  background-color: var(--exc-rose-50);
  background-size: cover;
  background-position: center;
  box-shadow: var(--exc-shadow-sm);
  cursor: pointer;
  transition: transform .3s var(--exc-ease), box-shadow .3s var(--exc-ease);
}
.exc-etapes__video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 55%);
}
.exc-etapes__video:hover { transform: translateY(-2px); box-shadow: var(--exc-shadow-md); }
.exc-etapes__video .exc-pdp__ugc-play { right: .6rem; bottom: .6rem; width: 24px; height: 24px; }
.exc-etapes__video .exc-pdp__ugc-play svg { width: 9px; height: 9px; }



@media screen and (max-width: 480px) {
  .exc-etapes--videos { gap: .6rem; }
  .exc-etapes__video { border-radius: var(--exc-r-md); }
}

/* remarque de taille, posée sous le sélecteur */
.exc-opt__note {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1rem 0 0;
  padding: .9rem 1.1rem;
  border-radius: var(--exc-r-md);
  background: var(--exc-rose-50);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--exc-body);
}
.exc-opt__note svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* l'ancre des avis ne doit pas passer sous l'en-tête collant */
.exc-avis { scroll-margin-top: 13rem; }

/* accordéon toujours ouvert : même carte rosée, sans commande */
.exc-acc__item--ouvert { background: var(--exc-rose-100); }
.exc-acc__sum--fixe {
  margin: 0;
  padding: 1.5rem 1.8rem .6rem;
  font-size: 1.4rem;
  font-weight: 600;
  cursor: default;
}

/* ==========================================================================
   18. Vignettes en colonne, à gauche du visuel
   ========================================================================== */

@media screen and (min-width: 990px) {
  .exc-gal--cote {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
  }
  /* le balisage place le visuel avant les vignettes : on inverse à l'affichage */
  .exc-gal--cote .exc-gal__thumbs {
    order: -1;
    grid-auto-flow: row;
    /* une colonne pleine largeur : en passant en lignes, la largeur venait
       de grid-auto-columns, qui ne s'applique plus, et les vignettes
       tombaient à zéro */
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    gap: 1rem;
    margin: 0;
    max-height: 78svh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .exc-gal--cote .exc-gal__thumb { aspect-ratio: 3 / 4; }

  /* Les badges se placent par rapport à la galerie entière : sans décalage
     ils atterriraient sur la colonne de vignettes. */
  .exc-gal--cote .exc-gal__badges { left: calc(7.2rem + 1.2rem + 1.6rem); }
}

/* ==========================================================================
   19. Favori sur la photo, partage à côté du titre
   ========================================================================== */

.exc-gal__fav {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  box-shadow: var(--exc-shadow-sm);
  cursor: pointer;
  transition: transform .25s var(--exc-ease), background-color .25s var(--exc-ease);
}
.exc-gal__fav svg {
  width: 20px;
  height: 20px;
  stroke: var(--exc-ink);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .25s var(--exc-ease), stroke .25s var(--exc-ease);
}
.exc-gal__fav:hover { transform: scale(1.08); background: #fff; }
.exc-gal__fav[aria-pressed='true'] svg { fill: var(--exc-rose-600); stroke: var(--exc-rose-600); }
.exc-gal__fav:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: 3px; }

@media screen and (max-width: 749px) {
  .exc-gal__fav { top: 1.2rem; right: 1.2rem; }
}

/* — partage — */
.exc-pdp__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; }
.exc-pdp__entete .exc-pdp__title { flex: 1 1 auto; min-width: 0; }

.exc-partage { position: relative; flex: none; }
.exc-partage__bouton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: .2rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .14);
  cursor: pointer;
  transition: box-shadow .25s var(--exc-ease), background-color .25s var(--exc-ease);
}
.exc-partage__bouton svg { width: 18px; height: 18px; stroke: var(--exc-ink); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.exc-partage__bouton:hover { background: var(--exc-rose-50); box-shadow: inset 0 0 0 1px var(--exc-ink); }
.exc-partage__bouton:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: 3px; }

.exc-partage__menu {
  position: absolute;
  top: calc(100% + .8rem);
  right: 0;
  z-index: 20;
  width: 23rem;
  padding: .8rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--exc-ease), transform .2s var(--exc-ease), visibility .2s;
}
.exc-partage.is-ouvert .exc-partage__menu { opacity: 1; visibility: visible; transform: translateY(0); }

.exc-partage__lien {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  min-height: 44px;
  padding: 1rem 1.1rem;
  border: 0;
  border-radius: var(--exc-r-xl);
  background: transparent;
  font-family: var(--exc-font);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--exc-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--exc-ease);
}
.exc-partage__lien:hover { background: var(--exc-rose-50); }
.exc-partage__lien svg { flex: none; width: 18px; height: 18px; }
.exc-partage__sep { height: 1px; margin: .5rem 1.1rem; background: var(--exc-line); }
.exc-partage__retour {
  display: block;
  padding: .6rem 1.1rem 0;
  font-size: 1.2rem;
  color: var(--exc-rose-600);
}

@media screen and (max-width: 599px) {
  .exc-partage__menu { width: 21rem; }
}

/* ==========================================================================
   20. Carte produit — ajout en icône + achat direct côte à côte
   ========================================================================== */

/* Le formulaire porte déjà .exc-pdp__actions autour des deux boutons : on
   ne redéfinit ici que ce qui change en petit. */
.exc-atc-wrap--compact .exc-pdp__actions {
  display: flex;
  gap: .8rem;
  align-items: stretch;
}
.exc-atc-wrap--compact .exc-atc--icone {
  flex: 0 0 auto;
  width: 4.6rem;
  min-width: 4.6rem;
  padding: 0;
}
/* display:none et non un masquage visuel : l'animation mesure la largeur du
   bouton pour déplacer le chariot, un libellé fantôme la fausserait.
   Le nom du produit reste dans aria-label. */
.exc-atc-wrap--compact .exc-atc--icone .exc-atc__label { display: none; }
/* Taille figée ici : la règle mobile réduit l'icône à 17 px, et le décalage
   de centrage ci-dessous est calculé sur 19. */
.exc-atc-wrap--compact .exc-atc--icone .exc-atc__cart,
.exc-atc-wrap--compact .exc-atc--icone .exc-atc__cart svg {
  width: 19px;
  height: 19px;
}
.exc-atc-wrap--compact .exc-atc--icone .exc-atc__cart {
  left: 50%;
  margin-left: -9.5px;
}
.exc-atc-wrap--compact .exc-buy {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 .8rem;
  font-size: 1.15rem;
}
.exc-atc-wrap--compact .exc-atc,
.exc-atc-wrap--compact .exc-buy { height: 4.6rem; }

/* Deux colonnes de cartes sur mobile : « maintenant » ne tient plus. */
@media screen and (max-width: 749px) {
  .exc-atc-wrap--compact .exc-buy__long { display: none; }
  .exc-atc-wrap--compact .exc-atc--icone { width: 4.4rem; min-width: 4.4rem; }
  .exc-atc-wrap--compact .exc-atc,
  .exc-atc-wrap--compact .exc-buy { height: 4.4rem; }
}

/* ==========================================================================
   21. Page collection — univers, filtres, grille
   ========================================================================== */

.exc-coll { padding: 3.2rem 0 6.4rem; }
.exc-coll__inner {
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 0 3.2rem;
}

.exc-coll__head { margin: 1.6rem 0 2.4rem; }
.exc-coll__title {
  margin: 0;
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.exc-coll__desc {
  max-width: 62ch;
  margin-top: 1.2rem;
  color: var(--exc-body);
  font-size: 1.5rem;
  line-height: 1.6;
}
.exc-coll__count {
  margin: 1rem 0 0;
  color: var(--exc-muted);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

/* — pilules d'univers — */
.exc-coll__univers { margin-bottom: 2rem; }
.exc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-pill {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--exc-line);
  color: var(--exc-ink);
  font-family: var(--exc-font);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--exc-ease), box-shadow .2s var(--exc-ease), color .2s var(--exc-ease);
}
.exc-pill:hover { background: var(--exc-rose-50); box-shadow: inset 0 0 0 1px var(--exc-rose-200); }
.exc-pill.is-active {
  background: var(--exc-black);
  box-shadow: none;
  color: #fff;
}
.exc-pill:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: 2px; }

/* — barre filtrer / trier — */
.exc-coll__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--exc-line);
  border-bottom: 1px solid var(--exc-line);
}
.exc-coll__ouvrir {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: transparent;
  color: var(--exc-ink);
  font-family: var(--exc-font);
  font-size: 1.35rem;
  font-weight: 600;
  cursor: pointer;
}
.exc-coll__ouvrir svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.exc-coll__ouvrir:hover { background: var(--exc-rose-50); }
.exc-coll__compteur {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.exc-coll__tri { display: flex; align-items: center; gap: .8rem; }
.exc-coll__tri label { color: var(--exc-muted); font-size: 1.3rem; }
.exc-coll__tri select {
  min-height: 4.4rem;
  padding: 0 3.2rem 0 1.4rem;
  border: 0;
  border-radius: var(--exc-r-full);
  box-shadow: inset 0 0 0 1px var(--exc-line);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px 16px;
  font-family: var(--exc-font);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--exc-ink);
  cursor: pointer;
  appearance: none;
}

/* — filtres actifs — */
.exc-coll__actifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
  margin-top: 1.6rem;
}
.exc-chip {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3.4rem;
  padding: 0 1.2rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-100);
  color: var(--exc-rose-600);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.exc-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.exc-chip:hover { background: var(--exc-rose-200); }
.exc-coll__effacer { color: var(--exc-body); font-size: 1.25rem; text-underline-offset: 3px; }

/* — corps : colonne de filtres + grille — */
.exc-coll__corps {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: 3.2rem;
  margin-top: 2.8rem;
  align-items: start;
}
.exc-coll__filtres { position: sticky; top: 11rem; }
.exc-coll__filtres-tete { display: none; }
/* Sur grand écran la colonne de filtres est déjà là : un bouton « Filtrer »
   qui n'ouvre rien n'aurait rien à dire. */
@media screen and (min-width: 990px) {
  .exc-coll__ouvrir { display: none; }
  .exc-coll__barre { justify-content: flex-end; }
  .exc-coll__filtres-pied { display: none; }
}

.exc-facette { border-bottom: 1px solid var(--exc-line); padding: 1.4rem 0; }
.exc-facette:first-child { padding-top: 0; }
.exc-facette__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.exc-facette__titre::-webkit-details-marker { display: none; }
.exc-facette__titre--fixe { cursor: default; }
.exc-facette__titre svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; transition: transform .25s var(--exc-ease); }
.exc-facette[open] > .exc-facette__titre svg { transform: rotate(180deg); }
.exc-facette__liste { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: .2rem; }

.exc-case {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0 .6rem;
  border-radius: var(--exc-r-xl);
  color: var(--exc-body);
  font-size: 1.35rem;
  text-decoration: none;
  cursor: pointer;
}
.exc-case:hover { background: var(--exc-rose-50); }
.exc-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.exc-case__boite {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px var(--exc-line);
  background: #fff no-repeat center / 12px 12px;
  transition: background-color .2s var(--exc-ease), box-shadow .2s var(--exc-ease);
}
.exc-case input:checked + .exc-case__boite,
.exc-case--lien.is-active .exc-case__boite {
  background-color: var(--exc-rose-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: none;
}
.exc-case input:focus-visible + .exc-case__boite { outline: 2px solid var(--exc-rose-600); outline-offset: 2px; }
.exc-case__texte { flex: 1 1 auto; min-width: 0; }
.exc-case__nb { color: var(--exc-muted); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.exc-case.is-vide { opacity: .45; cursor: not-allowed; }
.exc-case--lien.is-active .exc-case__texte { color: var(--exc-ink); font-weight: 600; }

.exc-facette__prix { display: flex; align-items: flex-end; gap: 1rem; margin-top: 1.2rem; }
.exc-facette__prix label { flex: 1 1 0; display: grid; gap: .4rem; min-width: 0; }
.exc-facette__prix span { color: var(--exc-muted); font-size: 1.15rem; }
.exc-facette__prix input {
  width: 100%;
  min-height: 4.4rem;
  padding: 0 1.2rem;
  border: 0;
  border-radius: var(--exc-r-xl);
  box-shadow: inset 0 0 0 1px var(--exc-line);
  font-family: var(--exc-font);
  font-size: 1.35rem;
  color: var(--exc-ink);
}
.exc-facette__prix input:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: 1px; }

.exc-coll__filtres-pied { display: flex; gap: 1rem; margin-top: 2rem; }
.exc-coll__filtres-pied .exc-btn { flex: 1 1 auto; }
.exc-coll__vide-filtres { color: var(--exc-muted); font-size: 1.35rem; }

/* — résultats — */
.exc-coll__resultats { min-width: 0; }
.exc-coll__resultats .exc-products__grid { margin: 0; padding: 0; }

.exc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 4rem;
}
.exc-pagination__etat { color: var(--exc-muted); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.exc-coll__vide {
  padding: 6rem 2rem;
  border-radius: var(--exc-r-2xl);
  background: var(--exc-rose-50);
  text-align: center;
}
.exc-coll__vide-titre { margin: 0; font-size: 2rem; font-weight: 700; }
.exc-coll__vide-texte { max-width: 46ch; margin: 1rem auto 0; color: var(--exc-body); font-size: 1.45rem; line-height: 1.6; }
.exc-coll__vide-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.4rem; }

/* — mobile : les filtres passent en tiroir — */
@media screen and (max-width: 989px) {
  .exc-coll { padding: 2rem 0 5.6rem; }
  .exc-coll__inner { padding: 0 2rem; }
  .exc-coll__corps { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }

  .exc-coll__filtres {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(88vw, 36rem);
    padding: 2rem 2rem calc(2rem + env(safe-area-inset-bottom));
    background: #fff;
    box-shadow: var(--exc-shadow-lg);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s var(--exc-ease), visibility .3s;
  }
  .exc-coll__filtres.is-ouvert { transform: translateX(0); visibility: visible; }
  .exc-coll__filtres-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
  }
  .exc-coll__filtres-tete p { margin: 0; font-size: 1.8rem; font-weight: 700; }
  .exc-coll__fermer {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--exc-r-full);
    background: var(--exc-rose-50);
    cursor: pointer;
  }
  .exc-coll__fermer svg { width: 18px; height: 18px; stroke: var(--exc-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; }

  /* voile : sans lui, on ne comprend pas que le reste est en retrait */
  body.exc-filtres-ouverts::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 59;
    background: rgba(17, 24, 39, .38);
  }
  body.exc-filtres-ouverts { overflow: hidden; }
}

@media screen and (max-width: 749px) {
  .exc-coll__barre { gap: 1rem; }
  .exc-coll__tri label { display: none; }
  .exc-coll__tri select { font-size: 1.25rem; padding: 0 2.8rem 0 1.1rem; }
  .exc-coll__vide { padding: 4rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .exc-coll__filtres { transition: none; }
}

/* ==========================================================================
   22. Page des favoris
   ========================================================================== */

.exc-fav { padding: 3.2rem 0 6.4rem; }
.exc-fav__inner { max-width: var(--page-width, 1400px); margin: 0 auto; padding: 0 3.2rem; }
.exc-fav__head { margin: 1.6rem 0 2.4rem; }
.exc-fav__titre {
  margin: 0;
  font-size: clamp(2.8rem, 4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.exc-fav__compte {
  margin: 1rem 0 0;
  color: var(--exc-muted);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
}

/* — invitation à créer un compte — */
.exc-fav__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.8rem;
  padding: 2.2rem 2.4rem;
  border-radius: var(--exc-r-2xl);
  background: var(--exc-peach);
}
.exc-fav__invite-titre { margin: 0; font-size: 1.8rem; font-weight: 700; }
.exc-fav__invite-texte {
  max-width: 58ch;
  margin: .6rem 0 0;
  color: var(--exc-body);
  font-size: 1.4rem;
  line-height: 1.55;
}
.exc-fav__invite-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.exc-fav__compte-note {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 2.8rem;
  padding: 1.6rem 1.8rem;
  border-radius: var(--exc-r-2xl);
  background: var(--exc-rose-50);
}
.exc-fav__compte-note svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.exc-fav__compte-note p { margin: 0; color: var(--exc-body); font-size: 1.35rem; line-height: 1.55; }

.exc-fav__barre { display: flex; justify-content: flex-end; margin-bottom: 1.6rem; }

/* — liste vide — */
.exc-fav__vide {
  padding: 7rem 2rem;
  border-radius: var(--exc-r-3xl);
  background: var(--exc-rose-50);
  text-align: center;
}
.exc-fav__vide-coeur {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 2rem;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: var(--exc-shadow-sm);
}
.exc-fav__vide-coeur svg {
  width: 30px;
  height: 30px;
  stroke: var(--exc-rose-400);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-fav__vide-titre { margin: 0; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; }
.exc-fav__vide-texte {
  max-width: 44ch;
  margin: 1rem auto 2.6rem;
  color: var(--exc-body);
  font-size: 1.45rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.exc-fav__partis {
  margin-top: 2.4rem;
  color: var(--exc-muted);
  font-size: 1.3rem;
  text-align: center;
}

@media screen and (max-width: 749px) {
  .exc-fav { padding: 2rem 0 5.6rem; }
  .exc-fav__inner { padding: 0 2rem; }
  .exc-fav__invite { padding: 1.8rem; }
  .exc-fav__invite-actions { width: 100%; }
  .exc-fav__invite-actions .exc-btn,
  .exc-fav__invite-actions .exc-pill { flex: 1 1 auto; justify-content: center; text-align: center; }
  .exc-fav__vide { padding: 4.8rem 1.6rem; }
}

/* ==========================================================================
   23. En-tête — cœur des favoris et méga-menu
   ========================================================================== */

.header__icon--favoris { position: relative; }
.header__icon--favoris svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill .25s var(--exc-ease);
}
.header__icon--favoris:hover svg { fill: var(--exc-rose-100); }
.header__icon--favoris .exc-fav-bulle,
.exc-fav-bulle {
  position: absolute;
  top: .4rem;
  right: .2rem;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.header__icon--favoris .exc-fav-bulle[hidden],
.exc-fav-bulle[hidden] { display: none; }

/* — méga-menu — */
.exc-mega__panneau {
  border: 0;
  border-radius: 0 0 var(--exc-r-3xl) var(--exc-r-3xl);
  box-shadow: 0 20px 44px -18px rgba(17, 24, 39, .22);
}
.exc-mega__inner { padding: 3.2rem 0 3.6rem; }
.exc-mega__grille {
  display: grid;
  grid-template-columns: repeat(var(--exc-mega-n, 4), minmax(0, 1fr));
  gap: 1.8rem;
  max-width: 96rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.exc-mega__carte {
  display: block;
  text-decoration: none;
  color: var(--exc-ink);
}
.exc-mega__visuel {
  display: block;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.2rem;
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  background: linear-gradient(150deg, var(--exc-rose-100), var(--exc-peach) 60%, var(--exc-rose-200));
}
.exc-mega__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .6s var(--exc-ease);
}
.exc-mega__carte:hover .exc-mega__visuel img { transform: scale(1.05); }
.exc-mega__nom {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.exc-mega__carte:hover .exc-mega__nom { color: var(--exc-rose-600); }
.exc-mega__carte.is-active .exc-mega__nom { color: var(--exc-rose-600); }
.exc-mega__nb {
  display: block;
  margin-top: .2rem;
  color: var(--exc-muted);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.exc-mega__sous { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.exc-mega__sous-lien {
  display: block;
  padding: .5rem 0;
  color: var(--exc-body);
  font-size: 1.3rem;
  text-decoration: none;
}
.exc-mega__sous-lien:hover,
.exc-mega__sous-lien.is-active { color: var(--exc-rose-600); }

.exc-mega__tout {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 2.4rem;
  color: var(--exc-ink);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 4px;
}
.exc-mega__tout:hover { text-decoration: underline; }
.exc-mega__tout svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .exc-mega__visuel img { transition: none; }
}

/* ==========================================================================
   24. Grille de produits — bouton « voir tout » sous les rangées
   ========================================================================== */

.exc-products__pied { display: flex; justify-content: center; margin-top: 3.6rem; }
.exc-products__pied .exc-btn { gap: 1rem; }
.exc-products__pied-nb {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 .7rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-100);
  color: var(--exc-rose-600);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.exc-btn--contour:hover .exc-products__pied-nb { background: rgba(255, 255, 255, .18); color: #fff; }

@media screen and (max-width: 749px) {
  .exc-products__pied { margin-top: 2.8rem; }
  .exc-products__pied .exc-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   25. Panneau d'une vidéo cliente
   ========================================================================== */

.exc-temoin {
  display: grid;
  gap: 1.6rem;
  padding: 2.4rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-lg);
}
.exc-temoin__tete { display: flex; align-items: center; gap: 1.2rem; }
.exc-temoin__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--exc-r-full);
  overflow: hidden;
  background: var(--exc-rose-100);
  color: var(--exc-rose-600);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.exc-temoin__avatar img { width: 100%; height: 100%; object-fit: cover; }
.exc-temoin__nom {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}
.exc-temoin__check { width: 16px; height: 16px; fill: none; stroke: #1D9BF0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.exc-temoin__check circle { fill: #1D9BF0; stroke: none; }
.exc-temoin__check path { stroke: #fff; }

.exc-temoin__texte {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--exc-rose-200);
  color: var(--exc-body);
  font-size: 1.5rem;
  line-height: 1.6;
  font-style: italic;
  text-wrap: pretty;
}
.exc-temoin__cta { width: 100%; justify-content: center; }
.exc-temoin__note {
  margin: 0;
  color: var(--exc-muted);
  font-size: 1.2rem;
  line-height: 1.5;
}

@media screen and (max-width: 989px) {
  .exc-temoin { padding: 1.8rem; gap: 1.2rem; }
  .exc-temoin__texte { font-size: 1.4rem; }
}

/* ==========================================================================
   26. Preuve chiffrée et note Google
   ========================================================================== */

.exc-preuve {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  margin: 1.8rem 0 0;
  padding: .8rem 1.8rem .8rem .8rem;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: var(--exc-shadow-sm), inset 0 0 0 1px rgba(17, 24, 39, .05);
}
.exc-preuve__visages { display: flex; }
.exc-preuve__visages img {
  width: 32px;
  height: 32px;
  border-radius: var(--exc-r-full);
  object-fit: cover;
  box-shadow: 0 0 0 2px #fff;
}
.exc-preuve__visages img + img { margin-left: -10px; }
.exc-preuve__texte { font-size: 1.35rem; color: var(--exc-body); line-height: 1.35; text-align: left; }
.exc-preuve__texte strong { color: var(--exc-ink); font-weight: 700; }

/* — note Google sous le hero — */
.exc-hero__google {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 2rem;
  padding: .7rem 1.4rem;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--exc-ink);
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: var(--exc-shadow-sm);
  transition: transform .25s var(--exc-ease), background-color .25s var(--exc-ease);
}
.exc-hero__google:hover { transform: translateY(-2px); background: #fff; }
.exc-hero__google-g { width: 17px; height: 17px; flex: none; }
.exc-hero__google-note { font-weight: 800; font-variant-numeric: tabular-nums; }
.exc-hero__google-etoiles { display: inline-flex; gap: 1px; }
.exc-hero__google-etoiles svg { width: 14px; height: 14px; fill: #F5A623; }
.exc-hero__google-etoiles svg.is-empty { fill: #E3E3E3; }
.exc-hero__google-txt { color: var(--exc-body); }

@media screen and (max-width: 749px) {
  .exc-preuve { padding: .7rem 1.4rem .7rem .7rem; gap: .9rem; }
  .exc-preuve__texte { font-size: 1.2rem; }
  .exc-hero__google { font-size: 1.2rem; padding: .6rem 1.3rem; margin-bottom: 1.6rem; min-height: 44px; }
  .exc-preuve { min-height: 44px; }
}

/* ==========================================================================
   27. Les deux façons de recevoir
   ========================================================================== */

.exc-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin: 3.2rem 0 4.8rem;
}
.exc-mode {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: 3.2rem 3.2rem 3rem;
  border-radius: var(--exc-r-3xl);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--exc-line);
}
/* Le retrait passe devant : c'est le seul avantage qu'un concurrent
   uniquement en ligne ne peut pas reproduire. */
.exc-mode--phare {
  background: var(--exc-peach);
  box-shadow: none;
}
.exc-mode__pastille {
  position: absolute;
  top: 2rem;
  right: 2rem;
  padding: .6rem 1.4rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.exc-mode__pastille--claire { background: var(--exc-ink); }
.exc-mode__icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: .6rem;
  border-radius: var(--exc-r-2xl);
  background: #fff;
  box-shadow: var(--exc-shadow-sm);
}
.exc-mode--phare .exc-mode__icone { background: #fff; }
.exc-mode__icone svg {
  width: 26px;
  height: 26px;
  stroke: var(--exc-rose-600);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-mode:not(.exc-mode--phare) .exc-mode__icone svg { stroke: var(--exc-ink); }
.exc-mode__titre {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.exc-mode__texte {
  margin: 0;
  max-width: 46ch;
  color: var(--exc-body);
  font-size: 1.45rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.exc-mode__detail { margin: 0; color: var(--exc-muted); font-size: 1.25rem; }
.exc-mode__villes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.exc-mode__villes li {
  padding: .5rem 1.2rem;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .8);
  font-size: 1.25rem;
  font-weight: 600;
}

@media screen and (max-width: 989px) {
  .exc-modes { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; margin: 2.4rem 0 3.6rem; }
  .exc-mode { padding: 2.4rem 2rem 2.2rem; }
  .exc-mode__pastille { position: static; justify-self: start; margin-bottom: .4rem; }
  .exc-mode__titre { font-size: 1.9rem; }
  .exc-mode__texte { font-size: 1.35rem; }
}

/* ==========================================================================
   28. Scènes animées des deux modes de réception
   ==========================================================================
   Deux boucles de huit secondes, en trait plutôt qu'en illustration pleine :
   le trait supporte l'agrandissement, pèse quelques centaines d'octets, et
   se colore avec les jetons du thème. Tout est en transform et opacity —
   rien qui déclenche un recalcul de mise en page trente fois par seconde.
   ========================================================================== */

.exc-mode__scene {
  display: block;
  margin-bottom: 1.4rem;
  border-radius: var(--exc-r-2xl);
  /* Sur la carte blanche, un fond blanc ne cadrerait rien : la scène doit
     se lire comme une illustration posée, pas comme un dessin qui flotte. */
  background: var(--exc-rose-50);
  overflow: hidden;
}
.exc-mode--phare .exc-mode__scene { background: rgba(255, 255, 255, .74); }
.exc-mode__scene svg { display: block; width: 100%; height: auto; }

.exc-mode__scene svg :is(rect, path, circle, line) {
  fill: none;
  stroke: var(--exc-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exc-mode__scene .sc-sol { stroke: var(--exc-line); stroke-width: 2.5; }
.exc-mode__scene .sc-vitre { fill: var(--exc-rose-100); stroke: var(--exc-ink); }
.exc-mode__scene .sc-store { fill: var(--exc-rose-200); stroke: var(--exc-rose-600); }
.exc-mode__scene .sc-fest { stroke: var(--exc-rose-600); }
.exc-mode__scene .sc-porte rect { fill: var(--exc-peach); }

/* — retrait : elle arrive, elle entre, elle ressort avec son sac — */
.sc-porte {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sc-porte 8s var(--exc-ease) infinite;
}
@keyframes sc-porte {
  0%, 30% { transform: scaleX(1); }
  36%, 52% { transform: scaleX(.18); }
  58%, 100% { transform: scaleX(1); }
}
.sc-cliente { opacity: 0; }
.sc-cliente--aller  { animation: sc-aller 8s linear infinite; }
.sc-cliente--retour { animation: sc-retour 8s linear infinite; }
@keyframes sc-aller {
  0%   { transform: translateX(300px); opacity: 0; }
  6%   { opacity: 1; }
  32%  { transform: translateX(178px); opacity: 1; }
  38%  { transform: translateX(168px); opacity: 0; }
  100% { transform: translateX(168px); opacity: 0; }
}
@keyframes sc-retour {
  0%, 52%  { transform: translateX(168px); opacity: 0; }
  58%      { transform: translateX(178px); opacity: 1; }
  88%      { transform: translateX(300px); opacity: 1; }
  94%,100% { transform: translateX(300px); opacity: 0; }
}
.sc-sac path { fill: var(--exc-rose-200); stroke: var(--exc-rose-600); }

/* — livraison : on charge, on ferme, le camion part — */
.sc-colis rect { fill: var(--exc-peach); }
.sc-colis { opacity: 0; }
.sc-colis--1 { animation: sc-colis1 8s var(--exc-ease) infinite; }
.sc-colis--2 { animation: sc-colis2 8s var(--exc-ease) infinite; }
@keyframes sc-colis1 {
  0%       { transform: translate(-30px, 96px); opacity: 0; }
  4%       { opacity: 1; }
  20%      { transform: translate(40px, 96px); opacity: 1; }
  24%,100% { transform: translate(40px, 96px); opacity: 0; }
}
@keyframes sc-colis2 {
  0%, 12%  { transform: translate(-30px, 100px); opacity: 0; }
  16%      { opacity: 1; }
  32%      { transform: translate(72px, 100px); opacity: 1; }
  36%,100% { transform: translate(72px, 100px); opacity: 0; }
}
.sc-hayon {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: sc-hayon 8s var(--exc-ease) infinite;
}
@keyframes sc-hayon {
  /* Presque à plat : à -72° le hayon traversait la scène en diagonale et se
     lisait comme un trait perdu. Posé au sol, c'est une rampe. */
  0%, 34%  { transform: rotate(-96deg); }
  44%, 100% { transform: rotate(0deg); }
}
.sc-camion { animation: sc-camion 8s var(--exc-ease) infinite; }
@keyframes sc-camion {
  0%, 46%  { transform: translateX(0); opacity: 1; }
  76%      { transform: translateX(230px); opacity: 1; }
  82%      { transform: translateX(250px); opacity: 0; }
  90%      { transform: translateX(-40px); opacity: 0; }
  96%,100% { transform: translateX(0); opacity: 1; }
}
.sc-roue {
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-roue 8s linear infinite;
}
@keyframes sc-roue {
  0%, 46%  { transform: rotate(0deg); }
  76%      { transform: rotate(900deg); }
  100%     { transform: rotate(900deg); }
}
.sc-route {
  stroke: var(--exc-rose-400);
  stroke-width: 2.5;
  stroke-dasharray: 14 16;
  animation: sc-route 8s linear infinite;
}
@keyframes sc-route {
  0%, 46%  { stroke-dashoffset: 0; opacity: 0; }
  50%      { opacity: 1; }
  76%      { stroke-dashoffset: -240; opacity: 1; }
  80%,100% { stroke-dashoffset: -240; opacity: 0; }
}

/* Une boucle qui tourne sans fin derrière du texte fatigue, et certaines
   personnes en sont réellement gênées. On garde alors l'image d'arrivée. */
@media (prefers-reduced-motion: reduce) {
  .sc-porte, .sc-cliente, .sc-colis, .sc-hayon, .sc-camion, .sc-roue, .sc-route { animation: none; }
  .sc-cliente--retour { opacity: 1; transform: translateX(240px); }
  .sc-route { opacity: 1; }
}

/* ==========================================================================
   29. Page livraison — tarifs et questions
   ========================================================================== */

.exc-livr { padding: 6.4rem 0; }
.exc-livr__inner { max-width: var(--page-width, 1400px); margin: 0 auto; padding: 0 3.2rem; }
.exc-livr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  margin-top: 3.2rem;
}
.exc-livr__stitre {
  margin: 0 0 1.8rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.015em;
}

.exc-tarifs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--exc-r-2xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--exc-line);
  font-size: 1.4rem;
}
.exc-tarifs th,
.exc-tarifs td { padding: 1.6rem 1.8rem; text-align: left; vertical-align: top; }
.exc-tarifs thead th {
  background: var(--exc-rose-50);
  color: var(--exc-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.exc-tarifs tbody tr + tr th,
.exc-tarifs tbody tr + tr td { border-top: 1px solid var(--exc-line); }
.exc-tarifs tbody th { font-weight: 700; color: var(--exc-ink); }
.exc-tarifs tbody td { color: var(--exc-body); }
.exc-tarifs__prix { font-weight: 700; color: var(--exc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exc-tarifs__note { display: block; margin-top: .3rem; color: var(--exc-muted); font-size: 1.2rem; font-weight: 500; }
/* La ligne mise en avant se signale par un fond ET une barre : la couleur
   seule ne dit rien à qui ne la distingue pas. */
.exc-tarifs tbody tr.is-phare th,
.exc-tarifs tbody tr.is-phare td { background: var(--exc-peach); }
.exc-tarifs tbody tr.is-phare th { box-shadow: inset 3px 0 0 var(--exc-rose-600); }

.exc-livr__note { margin: 1.2rem 0 0; color: var(--exc-muted); font-size: 1.25rem; line-height: 1.5; }
.exc-livr__pied { margin-top: 4rem; text-align: center; }
.exc-livr__pied .exc-livr__note { margin-top: 1rem; }

@media screen and (max-width: 989px) {
  .exc-livr { padding: 4.8rem 0; }
  .exc-livr__inner { padding: 0 2rem; }
  .exc-livr__grid { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
}
@media screen and (max-width: 599px) {
  .exc-tarifs { font-size: 1.3rem; }
  .exc-tarifs th, .exc-tarifs td { padding: 1.2rem 1.2rem; }
}

/* ==========================================================================
   30. Pied de page
   ==========================================================================
   Fond encre : la page est claire du haut en bas, il lui faut un sol. Le
   contraste sert aussi les logos de paiement et les étoiles, qui se perdent
   sur du blanc.
   ========================================================================== */

.exc-pied {
  --pied-fond: #14161C;
  --pied-texte: rgba(255, 255, 255, .72);
  --pied-titre: #fff;
  --pied-trait: rgba(255, 255, 255, .12);
  background: var(--pied-fond);
  color: var(--pied-texte);
  font-family: var(--exc-font);
}
.exc-pied a { color: inherit; text-decoration: none; }

/* — le drop — */
.exc-pied__drop { border-bottom: 1px solid var(--pied-trait); }
.exc-pied__drop-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 4.8rem;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 6rem 3.2rem;
}
.exc-pied__eyebrow {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: .5rem 1.3rem;
  border-radius: var(--exc-r-full);
  background: var(--exc-rose-600);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.exc-pied__drop-titre {
  margin: 0;
  color: var(--pied-titre);
  font-family: var(--exc-font-display), var(--exc-font);
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.exc-pied__drop-texte {
  max-width: 52ch;
  margin: 1.4rem 0 0;
  font-size: 1.45rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.exc-inscr__ligne {
  display: flex;
  gap: .8rem;
  padding: .7rem;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--pied-trait);
}
.exc-inscr input[type='email'] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 4.8rem;
  padding: 0 1.6rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: transparent;
  color: #fff;
  font-family: var(--exc-font);
  font-size: 1.5rem;
}
.exc-inscr input[type='email']::placeholder { color: rgba(255, 255, 255, .5); }
.exc-inscr input[type='email']:focus-visible { outline: 2px solid var(--exc-rose-400); outline-offset: 2px; }
.exc-inscr__btn {
  flex: none;
  min-height: 4.8rem;
  padding: 0 2.4rem;
  border: 0;
  border-radius: var(--exc-r-full);
  background: #fff;
  color: #14161C;
  font-family: var(--exc-font);
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s var(--exc-ease), background-color .25s var(--exc-ease);
}
.exc-inscr__btn:hover { transform: scale(1.03); background: var(--exc-rose-100); }
.exc-inscr__note { margin: 1rem 0 0; padding-left: .6rem; color: rgba(255, 255, 255, .48); font-size: 1.2rem; }
.exc-inscr__msg { margin: 1rem 0 0; padding-left: .6rem; font-size: 1.3rem; }
.exc-inscr__msg--ok { color: #7BE3A8; }
.exc-inscr__msg--ko { color: #FFA9A0; }

/* — corps — */
.exc-pied__corps {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, .7fr)) minmax(0, 1.1fr);
  gap: 4rem;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 5.6rem 3.2rem;
}
.exc-pied__logo { display: block; width: auto; max-width: 15rem; height: auto; margin-bottom: 1.6rem; }
.exc-pied__nom { margin: 0 0 1.2rem; color: var(--pied-titre); font-size: 2rem; font-weight: 700; }
.exc-pied__baseline { max-width: 34ch; margin: 0; font-size: 1.4rem; line-height: 1.6; }

.exc-pied__google {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
  padding: .8rem 1.4rem;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .08);
  font-size: 1.3rem;
  transition: background-color .25s var(--exc-ease);
}
.exc-pied__google:hover { background: rgba(255, 255, 255, .14); }
.exc-pied__google-note { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.exc-pied__google-etoiles { display: inline-flex; gap: 1px; }
.exc-pied__google-etoiles svg { width: 14px; height: 14px; fill: #F5A623; }
.exc-pied__google-etoiles svg.is-empty { fill: rgba(255, 255, 255, .25); }

.exc-pied__reseaux { display: flex; gap: .8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.exc-pied__reseaux a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--exc-r-full);
  background: rgba(255, 255, 255, .08);
  transition: background-color .25s var(--exc-ease), transform .25s var(--exc-ease);
}
.exc-pied__reseaux a:hover { background: var(--exc-rose-600); transform: translateY(-2px); }
.exc-pied__reseaux svg { width: 19px; height: 19px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.exc-pied__col-titre {
  margin: 0 0 1.6rem;
  color: var(--pied-titre);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.exc-pied__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .2rem; }
.exc-pied__col li a {
  display: inline-flex;
  align-items: center;
  min-height: 3.6rem;
  font-size: 1.4rem;
  transition: color .2s var(--exc-ease);
}
.exc-pied__col li a:hover { color: #fff; }

.exc-pied__col--boutiques ul { gap: 1.8rem; }
.exc-pied__ville { margin: 0; color: var(--pied-titre); font-size: 1.45rem; font-weight: 700; }
.exc-pied__ville a { display: inline-flex; align-items: center; min-height: 3.2rem; }
.exc-pied__ville a:hover { color: var(--exc-rose-200); }
.exc-pied__adresse,
.exc-pied__horaires { margin: .2rem 0 0; font-size: 1.3rem; line-height: 1.5; }
.exc-pied__horaires { color: rgba(255, 255, 255, .52); }

/* — bas — */
.exc-pied__bas { border-top: 1px solid var(--pied-trait); }
.exc-pied__bas-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 3.2rem;
  max-width: var(--page-width, 1400px);
  margin: 0 auto;
  padding: 2.4rem 3.2rem;
}
.exc-pied__copy { margin: 0; font-size: 1.25rem; color: rgba(255, 255, 255, .52); }
.exc-pied__legal ul { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin: 0; padding: 0; list-style: none; }
.exc-pied__legal a { display: inline-flex; align-items: center; min-height: 3.4rem; font-size: 1.25rem; }
.exc-pied__legal a:hover { color: #fff; }
.exc-pied__paiements { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.exc-pied__paiements svg { display: block; width: 38px; height: 24px; border-radius: 4px; }

@media screen and (max-width: 989px) {
  .exc-pied__drop-inner { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; padding: 4.8rem 2rem; }
  .exc-pied__corps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 2rem; padding: 4rem 2rem; }
  .exc-pied__marque { grid-column: 1 / -1; }
  .exc-pied__bas-inner { padding: 2rem; }
}
@media screen and (max-width: 599px) {
  .exc-pied__corps { grid-template-columns: minmax(0, 1fr); }
  .exc-inscr__ligne { flex-wrap: wrap; border-radius: var(--exc-r-2xl); }
  .exc-inscr__btn { width: 100%; }
  .exc-pied__bas-inner { justify-content: flex-start; }
}

/* ==========================================================================
   31. Sélecteur de quantité
   ========================================================================== */

.exc-qte { display: grid; gap: .8rem; margin-bottom: 1.4rem; }
.exc-qte__label {
  color: var(--exc-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.exc-qte__champ {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  padding: .4rem;
  border-radius: var(--exc-r-full);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--exc-line);
}
.exc-qte__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--exc-r-full);
  background: transparent;
  cursor: pointer;
  transition: background-color .2s var(--exc-ease);
}
.exc-qte__btn:hover { background: var(--exc-rose-50); }
.exc-qte__btn:active { background: var(--exc-rose-100); }
.exc-qte__btn:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: -2px; }
.exc-qte__btn svg { width: 17px; height: 17px; stroke: var(--exc-ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.exc-qte__saisie {
  width: 4.4rem;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--exc-ink);
  font-family: var(--exc-font);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
/* Les flèches natives feraient doublon avec les deux boutons, et elles sont
   trop petites pour être visées au doigt. */
.exc-qte__saisie::-webkit-outer-spin-button,
.exc-qte__saisie::-webkit-inner-spin-button { appearance: none; margin: 0; }
.exc-qte__saisie:focus-visible { outline: 2px solid var(--exc-rose-600); outline-offset: -2px; border-radius: var(--exc-r-xl); }

/* La barre d'achat mobile n'a pas la place : on y achète à l'unité. */
.exc-buybar .exc-qte { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   Palette Phénix Store
   Placé en fin de fichier à dessein : à spécificité égale, la dernière
   déclaration l'emporte. Les tons chauds du thème d'origine deviennent des
   bleus, sans toucher à la structure ni aux espacements.
   Couleurs relevées sur phenix-store.com : #0a4ea8 navigation,
   #0f4496 menu mobile, #009ADF barre haute.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --exc-peach:      #eef4fd;
  --exc-peach-deep: #d9e7f8;
  --exc-rose-50:    #f7fafe;
  --exc-rose-100:   #eaf2fc;
  --exc-rose-200:   #d5e4f7;
  --exc-rose-300:   #b9d2f0;
  --exc-rose-400:   #7fa9dd;
  --exc-rose-500:   #0a4ea8;
  --exc-rose-600:   #0f4496;
  --exc-rose-700:   #0b3672;

  --exc-line:       #e2e8f0;
  --exc-ink:        #0b1220;
  --exc-black:      #0a0e17;
  --exc-body:       #48505f;
  --exc-muted:      #6b7280;

  --exc-bleu:       #0a4ea8;
  --exc-bleu-fonce: #0f4496;
  --exc-bleu-clair: #009adf;
}