/* ═══════════════════════════════════════════════════════════════════════
   DAV & CO. — pages intérieures
   Services · Le Salon · Boutique · Fiche produit · Panier · Commande ·
   Confirmation · Blog · Contact · Espace client.
   Prolonge assets/css/davco.css ; mêmes tokens, aucune valeur inventée.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Utilitaires ─────────────────────────────────────────────────────── */
.dc-visuallyhidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--anthracite-900); color: var(--creme-100);
  padding: 14px 22px; border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
}
.dc-skip:focus { left: 0; color: var(--creme-100); }

.dc-note {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-xs); color: var(--text-subtle);
  margin: var(--space-7) 0 0; max-width: 60ch;
}

/* ── Chapeau de page (remplace le héros) ─────────────────────────────── */
.dc-pagehead {
  background: var(--surface-page);
  padding: calc(var(--header-h) + clamp(56px, 9vh, 112px)) 0 clamp(48px, 7vh, 88px);
  margin-top: calc(-1 * var(--header-h));
}
.dc-pagehead--court { padding-bottom: clamp(32px, 4vh, 56px); }
.dc-pagehead__titre {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(46px, 7.2vw, 104px); line-height: 0.92;
  letter-spacing: -0.015em; color: var(--text-strong);
  margin: 0; text-wrap: balance;
}
.dc-pagehead__titre em { font-style: italic; color: var(--rose-600); }
.dc-pagehead__lede {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-lg); line-height: var(--body-lg-lh);
  color: var(--text-muted); max-width: 56ch; margin: var(--space-7) 0 0;
}

/* ── Bandeau sombre d'accroche ───────────────────────────────────────── */
.dc-bandeau { background: var(--surface-inverse); color: var(--text-on-dark); padding: clamp(48px, 7vh, 80px) 0; }
.dc-bandeau__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-9); flex-wrap: wrap;
}
.dc-bandeau__titre {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(26px, 3vw, var(--display-4)); line-height: 1.2;
  color: var(--creme-100); margin: 0 0 var(--space-4);
}
.dc-bandeau p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-sm); line-height: var(--body-sm-lh);
  color: var(--text-on-dark-muted); margin: 0; max-width: 62ch;
}

/* ── Groupes de services ─────────────────────────────────────────────── */
.dc-groupe { margin: clamp(56px, 8vh, 96px) 0 var(--space-6); }
.dc-groupe:first-of-type { margin-top: 0; }
.dc-groupe__titre {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-4); line-height: 1.2; letter-spacing: var(--display-tracking);
  color: var(--text-strong); margin: 0 0 var(--space-3);
}
.dc-groupe p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-sm); color: var(--text-muted); margin: 0; max-width: 58ch;
}

/* ── Accordéon (FAQ) ─────────────────────────────────────────────────── */
.dc-faq { background: var(--surface-soft); padding: clamp(72px, 10vh, 128px) 0; }
.dc-accordeon { border-top: var(--hairline); }
.dc-accordeon details { border-bottom: var(--hairline); }
.dc-accordeon summary {
  list-style: none; cursor: pointer; padding: var(--space-6) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(19px, 2vw, var(--display-6)); color: var(--text-strong);
  transition: color var(--duration-fast) var(--ease-standard);
}
.dc-accordeon summary::-webkit-details-marker { display: none; }
.dc-accordeon summary::after {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px;
  background: currentColor; color: var(--rose-500);
  /* + qui devient − : masque CSS, pas d'image */
  -webkit-mask: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
                linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
          mask: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat,
                linear-gradient(currentColor, currentColor) center/1px 100% no-repeat;
  transition: transform var(--duration-base) var(--ease-out);
}
.dc-accordeon details[open] summary { color: var(--rose-700); }
.dc-accordeon details[open] summary::after { transform: rotate(90deg); opacity: 0.55; }
.dc-accordeon p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-sm); line-height: var(--body-sm-lh);
  color: var(--text-muted); margin: 0 0 var(--space-6); max-width: 68ch;
}

/* ── Image pleine largeur ────────────────────────────────────────────── */
.dc-fullbleed { padding: 0 var(--rail) clamp(48px, 7vh, 88px); background: var(--surface-page); }
.dc-media--21x9 { aspect-ratio: 21 / 9; border-radius: var(--radius-2xl); }
/* 16/9 (1,78) : au plus près du 1,70 de la photo d'équipe. En 21/9 le cadrage
   « cover » aurait mangé un quart de la hauteur — donc les visages. */
.dc-media--16x9 { aspect-ratio: 16 / 9; border-radius: var(--radius-2xl); }
.dc-media--4x3 { aspect-ratio: 4 / 3; }
.dc-media--3x4 { aspect-ratio: 3 / 4; }

/* ── Récit (Le Salon) ────────────────────────────────────────────────── */
.dc-recit { background: var(--surface-page); padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 120px); }
.dc-recit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.dc-recit__col h2 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-5); line-height: 1.2; color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
.dc-recit__col p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-sm); line-height: var(--body-sm-lh); color: var(--text-muted); margin: 0;
}

/* ── Équipe ──────────────────────────────────────────────────────────── */
.dc-equipe { background: var(--surface-card); padding: clamp(72px, 10vh, 128px) 0; }
/* auto-fit : cinq membres se répartissent sans laisser une carte seule
   sur une deuxième ligne, et la grille reste juste si l'effectif change. */
.dc-equipe__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-6); }
.dc-membre { margin: 0; }
.dc-membre figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: var(--space-4); }
.dc-membre strong {
  font-family: var(--font-display); font-weight: var(--weight-display-medium);
  font-size: var(--display-6); color: var(--text-strong);
}
.dc-membre span {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--text-accent);
}
.dc-membre.is-attente .dc-media { background: var(--wash-blush); }
.dc-membre.is-attente .dc-media::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 10px; letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: rgba(46, 43, 40, 0.30);
}

/* ── Adresses ────────────────────────────────────────────────────────── */
.dc-adresses { background: var(--surface-page); padding: clamp(72px, 10vh, 128px) 0; }
.dc-adresses__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.dc-adresse h3 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-4); color: var(--text-strong); margin: var(--space-5) 0 var(--space-3);
}
.dc-adresse address, .dc-adresse__tel {
  font-family: var(--font-body); font-style: normal; font-weight: var(--weight-body-light);
  font-size: var(--body-sm); line-height: 1.7; color: var(--text-muted); margin: 0 0 var(--space-3);
}
.dc-adresse__h { list-style: none; margin: 0 0 var(--space-6); padding: var(--space-4) 0 0; border-top: var(--hairline); }
.dc-adresse__h li {
  display: flex; justify-content: space-between; gap: var(--space-4);
  font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); padding: 3px 0;
}

/* ── Réassurance ─────────────────────────────────────────────────────── */
.dc-rassure { background: var(--surface-soft); padding: var(--space-8) 0; }
.dc-rassure__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
.dc-rassure__grid div { display: flex; flex-direction: column; gap: 4px; }
.dc-rassure strong {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--text-accent);
}
.dc-rassure span { font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light); color: var(--text-muted); }

/* ── Boutique : filtres ──────────────────────────────────────────────── */
.dc-boutique { background: var(--surface-page); padding: clamp(56px, 8vh, 96px) 0 clamp(72px, 10vh, 128px); }
.dc-filtres {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
  padding-bottom: var(--space-6); margin-bottom: var(--space-9); border-bottom: var(--hairline);
}
.dc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dc-chip {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--text-muted);
  padding: 10px 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); background: transparent; cursor: pointer;
  transition: var(--transition-hover);
}
.dc-chip:hover { border-color: var(--rose-400); color: var(--rose-700); }
.dc-chip.is-on { background: var(--anthracite-700); border-color: var(--anthracite-700); color: var(--creme-100); }
.dc-filtres__droite { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dc-select select {
  font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-body);
  background: var(--surface-field); border: 1px solid var(--border-field);
  border-radius: var(--radius-field); padding: 11px 14px; cursor: pointer;
}
.dc-filtres__compte {
  font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-subtle);
}
.dc-shop__grid--page { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dc-product__flag {
  position: absolute; left: var(--space-4); top: var(--space-4);
  font-family: var(--font-body); font-size: 10px; font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  background: var(--overlay-tint-light); color: var(--anthracite-900);
  padding: 6px 12px; border-radius: var(--radius-pill); backdrop-filter: var(--blur-overlay);
}
.dc-product__name a { color: inherit; }
.dc-product__name a:hover { color: var(--rose-700); }
.dc-product__price i { font-style: normal; color: var(--text-subtle); }
.dc-product__slot--lg { inset: 0; border-radius: var(--radius-xl); }

/* ── État vide générique ─────────────────────────────────────────────── */
.dc-vide { text-align: center; padding: clamp(56px, 9vh, 112px) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dc-vide h2 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-4); color: var(--text-strong); margin: 0; max-width: 22ch;
}
.dc-vide p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-sm); line-height: var(--body-sm-lh);
  color: var(--text-muted); margin: 0 0 var(--space-4); max-width: 44ch;
}
.dc-vide__note { font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light); color: var(--text-subtle); }

/* ── Carte cadeau ────────────────────────────────────────────────────── */
.dc-cadeau { background: var(--surface-inverse); color: var(--text-on-dark); padding: clamp(72px, 10vh, 128px) 0; }
.dc-cadeau__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.dc-cadeau__lede {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-md); line-height: var(--body-md-lh);
  color: var(--text-on-dark-muted); max-width: 52ch; margin: var(--space-6) 0 var(--space-9);
}
.dc-cadeau__montants { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); }
.dc-cadeau__montants label { position: relative; cursor: pointer; }
.dc-cadeau__montants input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dc-cadeau__montants span {
  display: block; padding: 13px 22px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-on-dark); color: var(--text-on-dark-muted);
  font-family: var(--font-body); font-size: var(--body-sm); transition: var(--transition-hover);
}
.dc-cadeau__montants input:checked + span { background: var(--creme-100); border-color: var(--creme-100); color: var(--anthracite-900); }
.dc-cadeau__montants input:focus-visible + span { box-shadow: var(--shadow-focus); }
.dc-cadeau__champ input {
  width: 220px; margin-bottom: var(--space-6);
  font-family: var(--font-body); font-size: var(--body-sm); color: var(--creme-100);
  background: transparent; border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-field); padding: 13px 16px;
}
.dc-cadeau__apercu { margin: 0; }
.dc-cadeau__carte {
  aspect-ratio: 8 / 5; border-radius: var(--radius-xl);
  background: var(--wash-terracotta); box-shadow: var(--shadow-xl);
  padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between;
}
/* Le mot-symbole est un bloc portrait 606×1092 : on le dimensionne par la
   hauteur et on l'empêche de s'étirer à la largeur du conteneur flex. */
.dc-cadeau__carte img { height: 54px; width: auto; align-self: flex-start; }
.dc-cadeau__carte p {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--anthracite-900); margin: 0;
}
.dc-cadeau__carte span {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-3); line-height: 1; color: var(--anthracite-900);
}
.dc-cadeau__carte small { font-family: var(--font-body); font-size: var(--body-xs); color: var(--anthracite-700); }
.dc-cadeau__apercu figcaption {
  margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-on-dark-muted);
}

/* ── Fiche produit ───────────────────────────────────────────────────── */
.dc-produit__page { background: var(--surface-page); padding: calc(var(--header-h) + var(--space-9)) 0 clamp(72px, 10vh, 128px); margin-top: calc(-1 * var(--header-h)); }
.dc-breadcrumb {
  display: flex; gap: var(--space-3); margin-bottom: var(--space-8);
  font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-subtle);
}
.dc-produit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.dc-produit__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.dc-produit__media img { width: 100%; height: 100%; object-fit: cover; }
.dc-produit__nom {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(32px, 4vw, var(--display-2)); line-height: 1.06;
  letter-spacing: var(--display-tracking); color: var(--text-strong); margin: 0 0 var(--space-5);
}
.dc-produit__prix { font-family: var(--font-body); font-size: var(--display-6); color: var(--text-strong); margin: 0 0 var(--space-6); }
.dc-produit__prix span { color: var(--text-subtle); font-size: var(--body-sm); }
.dc-produit__desc { font-family: var(--font-body); font-weight: var(--weight-body-light); font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--text-muted); margin: 0 0 var(--space-7); max-width: var(--measure); }
.dc-produit__conseil { background: var(--blush-100); border-radius: var(--radius-md); padding: var(--space-6); margin-bottom: var(--space-7); }
.dc-produit__conseil p:last-child { font-family: var(--font-body); font-weight: var(--weight-body-light); font-size: var(--body-sm); color: var(--text-body); margin: 0; }
.dc-produit__achat { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); }
.dc-produit__rassure { list-style: none; margin: 0; padding: var(--space-6) 0 0; border-top: var(--hairline); display: flex; flex-direction: column; gap: var(--space-3); }
.dc-produit__rassure li { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); }
.dc-produit__suite { margin-top: clamp(72px, 10vh, 128px); }
.dc-produit__suite .dc-secTitle { margin-bottom: var(--space-8); }

/* ── Sélecteur de quantité ───────────────────────────────────────────── */
.dc-stepper { display: inline-flex; align-items: center; gap: var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 4px; }
.dc-stepper button {
  width: 28px; height: 28px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill); color: var(--text-muted);
  font-family: var(--font-body); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: var(--transition-hover);
}
.dc-stepper button:hover { background: var(--action-ghost-hover); color: var(--rose-700); }
.dc-stepper span { min-width: 20px; text-align: center; font-family: var(--font-body); font-size: var(--body-sm); color: var(--text-strong); }
.dc-stepper--lg { padding: 6px; }
.dc-stepper--lg button { width: 38px; height: 38px; font-size: 18px; }

/* ── Panier : tiroir enrichi ─────────────────────────────────────────── */
.dc-cart__meta { display: flex; flex-direction: column; gap: 5px; }
.dc-cart__thumb { position: relative; overflow: hidden; }
.dc-cart__thumb img { width: 100%; height: 100%; object-fit: cover; }
.dc-cart__progress { margin-bottom: var(--space-5); }
.dc-cart__shipNote { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-accent); margin: 0 0 var(--space-2); }
.dc-cart__bar { height: 2px; background: var(--taupe-200); border-radius: var(--radius-pill); overflow: hidden; }
.dc-cart__bar span {
  display: block; height: 100%; background: var(--rose-500);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--duration-slow) var(--ease-out);
}
.dc-btn--ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.dc-btn--ghost:hover { color: var(--rose-700); background: var(--action-ghost-hover); }

/* ── Page panier ─────────────────────────────────────────────────────── */
.dc-panier__page { background: var(--surface-page); padding: 0 0 clamp(72px, 10vh, 128px); }
.dc-panier { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.dc-panier__liste { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.dc-panier__ligne {
  display: grid; grid-template-columns: 96px 1fr auto auto; gap: var(--space-5);
  align-items: center; padding: var(--space-6) 0; border-bottom: var(--hairline);
}
.dc-panier__vignette { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--blush-200); border: 1px dashed var(--taupe-300); overflow: hidden; }
.dc-panier__vignette img { width: 100%; height: 100%; object-fit: cover; }
.dc-panier__desc h3 { font-family: var(--font-display); font-weight: var(--weight-display-medium); font-size: var(--display-6); color: var(--text-strong); margin: 0 0 3px; }
.dc-panier__desc span { display: block; font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); margin-bottom: var(--space-2); }
.dc-panier__prix { font-family: var(--font-body); font-size: var(--body-md); color: var(--text-strong); white-space: nowrap; }

/* ── Récapitulatif ───────────────────────────────────────────────────── */
.dc-recap { background: var(--surface-card); border-radius: var(--radius-lg); padding: var(--card-pad); box-shadow: var(--shadow-card); position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.dc-recap__titre { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-5); color: var(--text-strong); margin: 0 0 var(--space-6); }
.dc-recap__articles { list-style: none; margin: 0 0 var(--space-6); padding: 0 0 var(--space-5); border-bottom: var(--hairline); display: flex; flex-direction: column; gap: var(--space-3); }
.dc-recap__articles li, .dc-recap__ligne { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-body); font-size: var(--body-sm); color: var(--text-muted); }
.dc-recap__articles i { font-style: normal; color: var(--text-subtle); }
.dc-recap__ligne { margin-bottom: var(--space-3); }
.dc-recap__ligne.is-remise { color: var(--status-success); }
.dc-recap__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  margin: var(--space-5) 0; padding-top: var(--space-5); border-top: var(--hairline);
  font-family: var(--font-display); font-size: var(--display-5); font-weight: var(--weight-display); color: var(--text-strong);
}
.dc-recap__note { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); margin: var(--space-4) 0 0; text-align: center; }
.dc-promo { margin: var(--space-6) 0; }
.dc-promo label { display: block; font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-muted); margin-bottom: var(--space-2); }
.dc-promo div { display: flex; gap: var(--space-2); }
.dc-promo input {
  flex: 1; min-width: 0; font-family: var(--font-body); font-size: var(--body-sm);
  background: var(--surface-field); border: 1px solid var(--border-field);
  border-radius: var(--radius-field); padding: 12px 14px; color: var(--text-body);
}
.dc-promo__msg { font-family: var(--font-body); font-size: var(--body-xs); margin: var(--space-2) 0 0; }
.dc-promo__msg.is-ok { color: var(--status-success); }
.dc-promo__msg.is-ko { color: var(--status-error); }

/* ── Tunnel de commande ──────────────────────────────────────────────── */
.dc-commande__page { background: var(--surface-page); padding: 0 0 clamp(72px, 10vh, 128px); }
.dc-commande__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.dc-etapes { list-style: none; display: flex; gap: var(--space-6); margin: 0 0 var(--space-9); padding: 0 0 var(--space-5); border-bottom: var(--hairline); flex-wrap: wrap; }
.dc-etapes li {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-subtle);
}
.dc-etapes li span {
  width: 26px; height: 26px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.dc-etapes li.is-on { color: var(--text-strong); }
.dc-etapes li.is-on span { background: var(--anthracite-700); border-color: var(--anthracite-700); color: var(--creme-100); }
.dc-etapes li.is-done { color: var(--rose-600); }
.dc-etapes li.is-done span { background: var(--rose-100); border-color: var(--rose-300); color: var(--rose-700); }

/* ── Formulaires ─────────────────────────────────────────────────────── */
.dc-form__titre { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-4); color: var(--text-strong); margin: 0 0 var(--space-7); }
.dc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-7); }
.dc-form__full { grid-column: 1 / -1; }
.dc-form label { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-muted); letter-spacing: 0.04em; }
.dc-form input, .dc-form select, .dc-form textarea {
  font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light);
  color: var(--text-body); background: var(--surface-field);
  border: 1px solid var(--border-field); border-radius: var(--radius-field);
  padding: 13px 16px; outline: none; transition: var(--transition-hover); width: 100%;
}
.dc-form textarea { resize: vertical; line-height: var(--body-sm-lh); }
.dc-form input:focus, .dc-form select:focus, .dc-form textarea:focus { border-color: var(--rose-400); box-shadow: var(--shadow-focus); }
.dc-form input[aria-invalid="true"], .dc-form textarea[aria-invalid="true"] { border-color: var(--status-error); }
.dc-form__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dc-form__avis { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); margin: var(--space-5) 0 0; max-width: 62ch; }
.dc-form__msg { font-family: var(--font-body); font-size: var(--body-sm); margin: var(--space-4) 0 0; }
.dc-form__msg.is-ok { color: var(--status-success); }
.dc-form__msg.is-ko { color: var(--status-error); }
.dc-form__fieldset { border: none; margin: 0 0 var(--space-7); padding: var(--space-6) 0 0; border-top: var(--hairline); }
.dc-form__fieldset legend { font-family: var(--font-body); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-accent); padding: 0 0 var(--space-4); }
.dc-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); cursor: pointer; }
.dc-check input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--rose-500); margin-top: 2px; }
.dc-check span { font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light); color: var(--text-body); }

.dc-choix { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.dc-choix__item { flex-direction: row !important; align-items: flex-start; gap: var(--space-4); cursor: pointer; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); transition: var(--transition-hover); }
.dc-choix__item:hover { border-color: var(--rose-400); }
.dc-choix__item input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--rose-500); margin-top: 3px; }
.dc-choix__item span { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-muted); }
.dc-choix__item strong { font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-medium); color: var(--text-strong); }
.dc-choix__item:has(input:checked) { border-color: var(--rose-500); background: var(--blush-100); }

/* ── Confirmation ────────────────────────────────────────────────────── */
.dc-confirmation { background: var(--surface-page); padding: calc(var(--header-h) + clamp(56px, 9vh, 112px)) 0 clamp(72px, 10vh, 128px); margin-top: calc(-1 * var(--header-h)); }
.dc-merci { max-width: 780px; }
.dc-merci--inline { max-width: none; }
.dc-merci__titre { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(34px, 4.6vw, var(--display-2)); line-height: 1.06; color: var(--text-strong); margin: 0 0 var(--space-6); text-wrap: balance; }
.dc-merci__lede { font-family: var(--font-body); font-weight: var(--weight-body-light); font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--text-muted); margin: 0 0 var(--space-9); max-width: 58ch; }
.dc-merci__faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-9); padding: var(--space-6) 0; border-block: var(--hairline); }
.dc-merci__faits dt { font-family: var(--font-body); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-2); }
.dc-merci__faits dd { font-family: var(--font-display); font-size: var(--display-5); font-weight: var(--weight-display); color: var(--text-strong); margin: 0; }
.dc-merci__articles { list-style: none; margin: 0 0 var(--space-9); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dc-merci__articles li { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-body); font-size: var(--body-sm); color: var(--text-muted); }
.dc-merci__articles i { font-style: normal; color: var(--text-subtle); }
.dc-merci__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── Blog ────────────────────────────────────────────────────────────── */
.dc-lead { display: block; margin-bottom: clamp(48px, 7vh, 88px); }
.dc-lead__texte { max-width: 68ch; margin-top: var(--space-7); }
.dc-lead__titre { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(30px, 3.6vw, var(--display-3)); line-height: 1.14; color: var(--text-strong); margin: 0 0 var(--space-5); }
.dc-lead__excerpt { font-family: var(--font-body); font-weight: var(--weight-body-light); font-size: var(--body-md); line-height: var(--body-md-lh); color: var(--text-muted); margin: 0 0 var(--space-6); }
.dc-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: var(--space-9); }
.dc-pagination { display: flex; justify-content: center; margin-top: clamp(48px, 7vh, 88px); }

/* ── Infolettre ──────────────────────────────────────────────────────── */
.dc-lettre { background: var(--surface-inverse); color: var(--text-on-dark); padding: clamp(64px, 9vh, 112px) 0; }
.dc-lettre__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.dc-lettre__titre { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(26px, 3.2vw, var(--display-4)); line-height: 1.16; color: var(--creme-100); margin: 0 0 var(--space-4); max-width: 20ch; }
.dc-lettre__note { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-on-dark-muted); margin: 0; }
.dc-lettre__form { display: flex; gap: var(--space-3); flex-wrap: wrap; position: relative; }
.dc-lettre__form input {
  flex: 1; min-width: 220px; font-family: var(--font-body); font-size: var(--body-sm);
  color: var(--creme-100); background: transparent;
  border: 1px solid var(--border-on-dark); border-radius: var(--radius-pill); padding: 16px 24px;
}
.dc-lettre__form input::placeholder { color: var(--text-on-dark-muted); }
.dc-lettre__form input:focus { outline: none; border-color: var(--rose-400); }
.dc-lettre__msg { flex-basis: 100%; font-family: var(--font-body); font-size: var(--body-xs); color: var(--rose-400); margin: 0; }

/* ── Contact ─────────────────────────────────────────────────────────── */
.dc-contact { background: var(--surface-page); padding: 0 0 clamp(72px, 10vh, 128px); }
.dc-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.dc-contact__bloc { padding-bottom: var(--space-7); margin-bottom: var(--space-7); border-bottom: var(--hairline); }
.dc-contact__bloc:last-child { border-bottom: none; }
.dc-contact__liste, .dc-contact__h, .dc-contact__adr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dc-contact__liste li, .dc-contact__h li { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-body); font-size: var(--body-sm); color: var(--text-muted); }
.dc-contact__liste span, .dc-contact__h span:first-child { color: var(--text-subtle); font-size: var(--body-xs); }
.dc-contact__adr li { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light); color: var(--text-muted); }
.dc-contact__adr strong { font-family: var(--font-body); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-accent); }

/* ── Espace client ───────────────────────────────────────────────────── */
.dc-compte { background: var(--surface-page); padding: 0 0 clamp(72px, 10vh, 128px); }
.dc-compte__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.dc-compte__nav { position: sticky; top: calc(var(--header-h) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-6); }
.dc-compte__nav nav { display: flex; flex-direction: column; gap: var(--space-1); }
.dc-compte__nav a {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--text-muted);
  padding: 12px 16px; border-radius: var(--radius-sm); transition: var(--transition-hover);
}
.dc-compte__nav a:hover { background: var(--action-ghost-hover); color: var(--rose-700); }
.dc-compte__nav a.is-on { background: var(--anthracite-700); color: var(--creme-100); }
.dc-compte__nav .dc-link { align-self: flex-start; margin-left: 16px; }
.dc-compte__bloc { padding-bottom: var(--space-9); margin-bottom: var(--space-9); border-bottom: var(--hairline); scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.dc-compte__bloc:last-of-type { border-bottom: none; }
.dc-compte__bloc header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.dc-compte__bloc h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-4); color: var(--text-strong); margin: 0; }
.dc-commandes { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.dc-commande { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-5); align-items: center; padding: var(--space-5) 0; border-bottom: var(--hairline); }
.dc-commande strong { display: block; font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-medium); color: var(--text-strong); }
.dc-commande span { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); }
.dc-commande__total { font-family: var(--font-body); font-size: var(--body-sm); color: var(--text-strong); }
.dc-adr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.dc-adr { background: var(--surface-card); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: inset 0 0 0 1px var(--border-hairline); }
.dc-adr address { font-family: var(--font-body); font-style: normal; font-size: var(--body-sm); font-weight: var(--weight-body-light); line-height: 1.7; color: var(--text-muted); margin: var(--space-4) 0; }
.dc-adr__actions { display: flex; gap: var(--space-5); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dc-shop__grid--page { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-panier, .dc-commande__grid, .dc-contact__grid { grid-template-columns: 1fr; }
  .dc-recap { position: static; }
  .dc-equipe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-articles, .dc-recit__grid, .dc-adresses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-compte__grid { grid-template-columns: 1fr; }
  .dc-compte__nav { position: static; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .dc-compte__nav nav { flex-direction: row; flex-wrap: wrap; }
  .dc-cadeau__grid, .dc-lettre__inner { grid-template-columns: 1fr; }
  .dc-produit { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .dc-rassure__grid, .dc-recit__grid, .dc-adresses__grid, .dc-articles,
  .dc-equipe__grid, .dc-adr__grid, .dc-merci__faits { grid-template-columns: 1fr; }
  .dc-shop__grid--page { grid-template-columns: 1fr; }
  .dc-form__grid { grid-template-columns: 1fr; }
  .dc-panier__ligne { grid-template-columns: 72px 1fr; row-gap: var(--space-4); }
  .dc-panier__prix { grid-column: 2; }
  .dc-filtres { flex-direction: column; align-items: flex-start; }
}

/* ── Commandes de carrousel ──────────────────────────────────────────────
   Les rails défilent tout seuls au scroll ; ces boutons permettent en plus
   un parcours manuel. Ils s'ajoutent au bandeau de titre de la section. */
.dc-railhead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
}
.dc-railctrl { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.dc-railbtn {
  width: 48px; height: 48px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-body); cursor: pointer;
  transition: var(--transition-hover);
}
.dc-railbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-railbtn:hover:not(:disabled) { border-color: var(--rose-500); color: var(--rose-700); background: var(--action-ghost-hover); }
.dc-railbtn:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 620px) {
  .dc-railhead { align-items: flex-start; }
  .dc-railbtn { width: 44px; height: 44px; }
}