/* ═══════════════════════════════════════════════════════════════════════
   DAV & CO. — site
   Bâti exclusivement sur les tokens du design system (../../tokens/*.css,
   chargés par styles.css). Aucune couleur, graisse ni durée n'est inventée
   ici : tout passe par var(--…).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Réglages locaux ─────────────────────────────────────────────────── */
:root {
  /* Hauteur réelle de l'en-tête = mot-symbole (66px) + 2 × 14px de padding.
     Le héros s'en sert pour remonter sous la barre sans la percuter. */
  --header-h: 94px;
  --shell: var(--container-max);
  --rail: clamp(20px, 4vw, 56px);
  /* Décalage gauche du contenu d'un .dc-shell centré. Les rails horizontaux
     (galerie, témoignages) s'en servent pour démarrer sur la même colonne que
     les titres, tout en débordant librement à droite. */
  --shell-inset: max(var(--rail), calc((100% - var(--shell)) / 2 + var(--rail)));
  --hairline: 1px solid var(--border-hairline);
}

html { scroll-behavior: auto; }
body { overflow-x: hidden; }
body.is-locked { overflow: hidden; }

/* L'attribut [hidden] doit l'emporter sur les `display` posés par les classes
   ci-dessous (.dc-menu, .dc-drawer, .dc-cart__list…). Sans cette règle, le
   menu plein écran et le badge du panier restent affichés en permanence. */
[hidden] { display: none !important; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.dc-shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--rail);
}

/* ── Micro-typographie de marque ─────────────────────────────────────── */
.dc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  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);
  margin: 0 0 var(--space-6);
}
.dc-eyebrow--onDark { color: var(--rose-400); }
.dc-dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: currentColor; flex: 0 0 auto; }

.dc-secTitle {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(38px, 5.2vw, var(--display-3));
  line-height: var(--display-3-lh); letter-spacing: var(--display-tracking);
  color: var(--text-strong); margin: 0;
}
.dc-secTitle em { font-style: italic; color: var(--rose-600); }
.dc-secTitle--onDark { color: var(--text-on-dark); }
.dc-secTitle--onDark em { color: var(--rose-400); }
.dc-secTitle--sm { font-size: clamp(32px, 4vw, var(--display-4)); }
.dc-line { display: block; overflow: hidden; }
.dc-line > span { display: block; }

.dc-secHead { max-width: 56ch; margin-bottom: clamp(48px, 6vw, var(--space-12)); }
.dc-secHead--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8); max-width: none;
}
.dc-secLede {
  font-size: var(--body-md); line-height: var(--body-md-lh);
  font-weight: var(--weight-body-light); color: var(--text-muted);
  max-width: var(--measure-narrow); margin: var(--space-5) 0 0;
}

.dc-link {
  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);
  background: none; border: none; padding: 0; cursor: pointer;
  border-bottom: 1px solid transparent; transition: var(--transition-hover);
}
.dc-link:hover { color: var(--link-hover); border-bottom-color: currentColor; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  font-family: var(--font-body); font-size: var(--button-size);
  font-weight: var(--button-weight); letter-spacing: var(--button-tracking);
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: 16px 32px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: var(--transition-hover);
}
.dc-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dc-btn--sm { padding: 12px 22px; font-size: 11px; }
.dc-btn--lg { padding: 21px 42px; font-size: 13px; }
.dc-btn--full { width: 100%; }

.dc-btn--primary { background: var(--action-primary); color: var(--text-on-dark); }
.dc-btn--primary:hover { background: var(--action-primary-hover); color: var(--text-on-dark); transform: translateY(-1px); }
.dc-btn--secondary { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
.dc-btn--secondary:hover { border-color: var(--rose-500); color: var(--rose-700); }
.dc-btn--inverse { background: var(--creme-100); color: var(--anthracite-900); }
.dc-btn--inverse:hover { background: var(--white); color: var(--anthracite-900); transform: translateY(-1px); }
.dc-btn--ghost-light { background: transparent; color: var(--text-on-dark); border-color: var(--border-on-dark); }
.dc-btn--ghost-light:hover { background: rgba(250, 248, 245, 0.10); color: var(--text-on-dark); }

.dc-iconbtn {
  position: relative; width: 40px; height: 40px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  background: transparent; color: var(--text-body); cursor: pointer;
  transition: var(--transition-hover);
}
.dc-iconbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-iconbtn:hover { background: var(--action-ghost-hover); color: var(--text-accent); }
.dc-iconbtn__count {
  position: absolute; top: 2px; right: 1px; min-width: 17px; height: 17px;
  padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--rose-500); color: var(--white);
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ── Rideau d'ouverture ──────────────────────────────────────────────── */
.dc-veil {
  position: fixed; inset: 0; z-index: 200;
  background: var(--creme-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-8);
}
.dc-veil__mark img { height: 96px; width: auto; opacity: 0.92; }
.dc-veil__bar { width: 120px; height: 1px; background: var(--taupe-200); overflow: hidden; }
/* Même raison que le soulignement de la nav : on anime scaleX, pas width. */
.dc-veil__bar span {
  display: block; height: 100%; width: 100%; background: var(--rose-500);
  transform: scaleX(0); transform-origin: left center;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.dc-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 248, 245, 0);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              backdrop-filter var(--duration-base) var(--ease-standard);
}
.dc-header.is-solid {
  background: rgba(250, 248, 245, 0.82);
  backdrop-filter: var(--blur-overlay); -webkit-backdrop-filter: var(--blur-overlay);
  border-bottom-color: var(--border-hairline);
}
.dc-header__inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--rail);
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-7);
}
.dc-header__mark { display: block; line-height: 0; flex: 0 0 auto; }
.dc-header__mark img { height: 66px; width: auto; display: block; transition: opacity var(--duration-fast) var(--ease-standard); }
.dc-header__mark:hover img { opacity: 0.7; }

/* Uniquement sur l'accueil, dont le héros sombre occupe la ligne de flottaison :
   l'en-tête passe en négatif. Sans le préfixe .dc-has-hero, ces règles
   s'appliqueraient aussi aux pages intérieures — mot-symbole et onglet actif
   deviendraient blancs sur le fond crème, donc invisibles tant qu'on n'a pas
   défilé. */
.dc-has-hero .dc-header:not(.is-solid) .dc-header__mark img { filter: invert(1) brightness(1.6); }
.dc-has-hero .dc-header:not(.is-solid) .dc-nav a { color: var(--text-on-dark-muted); }
.dc-has-hero .dc-header:not(.is-solid) .dc-nav a:hover,
.dc-has-hero .dc-header:not(.is-solid) .dc-nav a.is-active { color: var(--creme-100); }
.dc-has-hero .dc-header:not(.is-solid) .dc-iconbtn { color: var(--creme-100); }
.dc-has-hero .dc-header:not(.is-solid) .dc-iconbtn:hover { background: rgba(250, 248, 245, 0.12); color: var(--white); }
.dc-has-hero .dc-header:not(.is-solid) .dc-header__cta { background: var(--creme-100); color: var(--anthracite-900); }
.dc-has-hero .dc-header:not(.is-solid) .dc-burger span { background: var(--creme-100); }

.dc-nav ul { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }
.dc-nav a {
  position: relative; display: block; padding: 6px 0;
  font-family: var(--font-body); font-size: var(--nav-size);
  font-weight: var(--label-weight); letter-spacing: var(--nav-tracking);
  text-transform: uppercase; color: var(--text-muted); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.dc-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--rose-500);
  /* scaleX plutôt que width : le soulignement s'anime sur le compositeur,
     sans recalcul de mise en page à chaque image. */
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}
.dc-nav a:hover::after, .dc-nav a.is-active::after { transform: scaleX(1); }
.dc-nav a:hover, .dc-nav a.is-active { color: var(--text-strong); }

.dc-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }

.dc-burger { display: none; width: 40px; height: 40px; background: none; border: none; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.dc-burger span { display: block; width: 20px; height: 1px; background: var(--anthracite-700); transition: transform var(--duration-base) var(--ease-out); }
.dc-burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.dc-burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.dc-menu {
  position: fixed; inset: 0; z-index: 85; background: var(--creme-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-10); padding: var(--rail);
}
.dc-menu ul { list-style: none; margin: 0; padding: 0; text-align: center; display: flex; flex-direction: column; gap: var(--space-6); }

/* Portée limitée à la navigation : sans le `nav`, cette règle l'emporterait sur
   .dc-btn et repeindrait le bouton d'appel en Cormorant 36px anthracite —
   donc illisible sur son propre fond anthracite. */
.dc-menu nav a {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-4); color: var(--text-strong); text-decoration: none;
}
.dc-menu nav a:hover { color: var(--rose-600); }

/* Bouton d'appel : mis à l'échelle des liens du menu, texte crème sur anthracite */
.dc-menu__cta {
  font-size: 14px; padding: 22px 44px;
  letter-spacing: var(--button-tracking);
  color: var(--creme-100);
}
.dc-menu__cta:hover { color: var(--white); }

/* Menu ouvert : l'en-tête reste visible par-dessus (z-index supérieur), mais
   son mot-symbole est en négatif tant que le héros est sombre — donc blanc sur
   le crème du menu. On rétablit l'encre noire, et on retire le burger qui
   doublonnerait avec le bouton de fermeture, au même endroit. */
.is-menu-open .dc-header:not(.is-solid) .dc-header__mark img { filter: none; }
.is-menu-open .dc-burger { opacity: 0; pointer-events: none; }

.dc-menu__close {
  position: absolute; top: var(--space-5); right: var(--rail);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); border: 1px solid var(--border-soft);
  background: transparent; color: var(--text-body); cursor: pointer;
  transition: var(--transition-hover);
}
.dc-menu__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.dc-menu__close:hover { background: var(--action-ghost-hover); border-color: var(--rose-400); color: var(--rose-700); }

/* ══ HERO ════════════════════════════════════════════════════════════ */
.dc-hero {
  position: relative; height: 100svh; min-height: 620px;
  margin-top: calc(-1 * var(--header-h));
  display: flex; align-items: flex-end;
  background: var(--anthracite-900); overflow: hidden;
}
.dc-hero__stage { position: absolute; inset: 0; }
.dc-hero__stage canvas { width: 100% !important; height: 100% !important; display: block; }

.dc-hero__fallback { position: absolute; inset: 0; }
.dc-frame {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  transition: opacity 1600ms var(--ease-out), transform 9000ms linear;
  transform: scale(1.06);
}
.dc-frame.is-active { opacity: 1; transform: scale(1.12); }
/* Repli quand la photographie n'est pas encore livrée */
.dc-frame.is-missing { background: var(--wash-anthracite); }
.dc-frame.is-missing::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(201,145,122,0.30), transparent 60%),
    radial-gradient(90% 70% at 80% 80%, rgba(237,213,200,0.18), transparent 65%);
}

.dc-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* Voile noir uniforme à 15 % : assoit le texte sur toute la surface,
       y compris là où la photo est claire. */
    linear-gradient(rgba(28, 26, 24, 0.15), rgba(28, 26, 24, 0.15)),
    /* Dégradé de protection : plus dense en haut sous l'en-tête et en bas
       derrière le titre et les boutons. */
    linear-gradient(180deg, rgba(28,26,24,0.55) 0%, rgba(28,26,24,0.10) 34%, rgba(28,26,24,0.82) 100%);
}

.dc-hero__content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  /* Le héros remonte sous l'en-tête (margin-top négatif) : ce padding haut
     garantit que l'eyebrow ne vienne jamais percuter la barre de navigation. */
  padding: calc(var(--header-h) + var(--space-7)) var(--rail) clamp(72px, 10vh, 124px);
}
.dc-hero__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(54px, 10.5vw, 146px); line-height: 0.86;
  letter-spacing: -0.02em; color: var(--creme-100);
  margin: 0 0 var(--space-6); text-wrap: balance;
}
.dc-hero__title em { font-style: italic; color: var(--blush-400); }
.dc-hero__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-on-dark-muted); max-width: 46ch; margin: 0 0 var(--space-8);
}
.dc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.dc-hero__foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--space-7);
  max-width: var(--shell); margin: 0 auto; padding-inline: var(--rail);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.dc-hero__scroll { display: flex; align-items: center; gap: var(--space-4); }
.dc-hero__scrollLabel {
  font-family: var(--font-body); font-size: 10px; font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking-wide); text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.dc-hero__scrollRail { position: relative; display: block; width: 64px; height: 1px; background: rgba(250,248,245,0.24); overflow: hidden; }
.dc-hero__scrollRail i { position: absolute; inset: 0; display: block; background: var(--rose-400); transform: translateX(-100%); animation: dcRail 2600ms var(--ease-standard) infinite; }
@keyframes dcRail { 0% { transform: translateX(-100%); } 55% { transform: translateX(0); } 100% { transform: translateX(100%); } }

.dc-hero__ticks { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.dc-hero__ticks li { width: 22px; height: 2px; background: rgba(250,248,245,0.22); border-radius: var(--radius-pill); transition: background-color var(--duration-base) var(--ease-standard); }
.dc-hero__ticks li.is-active { background: var(--rose-400); }

/* ══ MANIFESTE ═══════════════════════════════════════════════════════ */
.dc-manifesto { padding: clamp(96px, 14vh, 180px) 0 clamp(80px, 11vh, 140px); background: var(--surface-page); }
.dc-manifesto__text {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.24;
  letter-spacing: var(--display-tracking); color: var(--text-strong);
  max-width: 22ch; margin: 0; text-wrap: balance;
}
.dc-manifesto__text .dc-word { display: inline-block; }
.dc-manifesto__meta {
  display: flex; gap: var(--space-8); margin-top: var(--space-10);
  padding-top: var(--space-6); border-top: var(--hairline);
}
.dc-manifesto__meta 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-subtle);
}

/* ══ SERVICES ════════════════════════════════════════════════════════ */
.dc-services { padding: clamp(80px, 11vh, 140px) 0; background: var(--surface-card); }
.dc-services__body { position: relative; }

.dc-services__peek {
  position: fixed; top: 0; left: 0; width: 260px; height: 330px;
  pointer-events: none; z-index: 40; opacity: 0;
  will-change: transform, opacity;
}
.dc-services__peekInner {
  width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--wash-blush) center/cover; box-shadow: var(--shadow-lg);
}
.dc-services__peekInner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dc-services__list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline); }
.dc-service {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: baseline;
  gap: var(--space-6); padding: clamp(26px, 3.4vw, 40px) 0;
  border-bottom: var(--hairline); cursor: default;
  transition: background-color var(--duration-base) var(--ease-standard);
}
.dc-service__num {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  color: var(--text-subtle); transition: color var(--duration-base) var(--ease-standard);
}
.dc-service__name {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(24px, 2.7vw, 38px); line-height: 1.18;
  letter-spacing: var(--display-tracking); color: var(--text-strong); margin: 0;
  transition: color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out);
}
.dc-service__desc {
  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); max-width: 54ch; margin: var(--space-3) 0 0;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              max-height var(--duration-slow) var(--ease-out);
}
.dc-service__meta { display: flex; align-items: baseline; gap: var(--space-6); white-space: nowrap; }
.dc-service__dur {
  font-family: var(--font-body); font-size: var(--label-size);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-subtle);
}
.dc-service__price {
  font-family: var(--font-body); font-size: var(--price-size);
  font-weight: var(--price-weight); letter-spacing: var(--price-tracking);
  color: var(--text-strong);
}
.dc-service__price i { font-style: normal; font-size: var(--body-xs); color: var(--text-subtle); margin-right: 5px; }

.dc-service.is-hot .dc-service__name { color: var(--rose-700); transform: translateX(8px); }
.dc-service.is-hot .dc-service__num { color: var(--rose-500); }
.dc-service.is-hot .dc-service__desc { opacity: 1; max-height: 160px; }
/* Les autres lignes s'effacent pendant le survol */
.dc-services__list.is-hovering .dc-service:not(.is-hot) .dc-service__name,
.dc-services__list.is-hovering .dc-service:not(.is-hot) .dc-service__price { color: var(--taupe-400); }

.dc-services__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap;
}
.dc-services__foot p {
  font-family: var(--font-body); font-weight: var(--weight-body-light);
  font-size: var(--body-xs); color: var(--text-subtle); max-width: 52ch; margin: 0;
}

/* ══ MÉDIAS (parallaxe + repli) ══════════════════════════════════════ */
.dc-media { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--wash-blush); }
.dc-media img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.dc-media--16x10 { aspect-ratio: 16 / 10; }
.dc-media--1x1 { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); }
.dc-media.is-missing img { opacity: 0; }
.dc-media.is-missing::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: flex-end; padding: var(--space-5);
  font-family: var(--font-body); font-size: 10px; font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  color: rgba(46, 43, 40, 0.30);
}

/* ══ À PROPOS ════════════════════════════════════════════════════════ */
.dc-about { background: var(--surface-inverse); color: var(--text-on-dark); padding: clamp(88px, 12vh, 160px) 0; overflow: hidden; }
.dc-about__grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.dc-about__media { margin: 0; }
.dc-about__media .dc-media { aspect-ratio: 3 / 4; border-radius: var(--radius-2xl); background: var(--wash-terracotta); }
.dc-about__media .dc-media img { transform: scale(1.16); }
.dc-about__media.is-missing-shell .dc-media::after { color: rgba(250, 248, 245, 0.35); }
.dc-about__cap {
  margin-top: var(--space-4);
  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-on-dark-muted);
}
.dc-about__body {
  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: var(--measure); margin: var(--space-6) 0 0;
}
.dc-quote { margin: var(--space-9) 0; padding-left: var(--space-6); border-left: 1px solid var(--rose-500); }
.dc-quote p {
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-display);
  font-size: clamp(24px, 2.6vw, var(--display-4)); line-height: var(--quote-lh);
  color: var(--text-on-dark); margin: 0 0 var(--space-4); max-width: 26ch;
}
.dc-quote cite {
  font-family: var(--font-body); font-style: normal; font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking);
  text-transform: uppercase; color: var(--rose-400);
}
.dc-stats { display: flex; flex-wrap: wrap; gap: var(--space-10); list-style: none; margin: 0 0 var(--space-9); padding: var(--space-7) 0 0; border-top: 1px solid var(--border-on-dark); }
.dc-stats li { display: flex; flex-direction: column; gap: var(--space-2); }
.dc-stat__val {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(36px, 4vw, var(--display-3)); line-height: 1; color: var(--text-on-dark);
}
.dc-stat__lab {
  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-on-dark-muted);
}

/* ══ GALERIE ═════════════════════════════════════════════════════════ */
.dc-gallery { padding: clamp(80px, 11vh, 140px) 0; background: var(--surface-page); overflow: hidden; }
.dc-gallery__head { margin-bottom: var(--space-10); }
.dc-gallery__rail {
  display: flex; gap: var(--space-5);
  padding-left: var(--shell-inset); padding-right: var(--rail);
  will-change: transform;
}
.dc-tile {
  position: relative; margin: 0; flex: 0 0 clamp(230px, 26vw, 340px);
  aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--wash-blush); cursor: pointer;
}
.dc-tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dc-tile figcaption {
  position: absolute; left: var(--space-5); bottom: var(--space-5); z-index: 2;
  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(--creme-100);
  text-shadow: 0 1px 12px rgba(28, 26, 24, 0.55);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.dc-tile:hover figcaption { opacity: 1; transform: translateY(0); }
.dc-tile.is-missing::after {
  content: 'Photographie à venir'; 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.28);
}

/* ══ BOUTIQUE ════════════════════════════════════════════════════════ */
.dc-shop { background: var(--surface-soft); padding: clamp(80px, 11vh, 140px) 0; }
/* max-width se poserait ici sur le même élément que .dc-shell, dont le
   margin:0 auto recentrerait alors le bloc : on borne le texte, pas le shell. */
.dc-shop__head { margin-bottom: clamp(48px, 6vw, var(--space-12)); }
.dc-shop__head .dc-secTitle { max-width: 18ch; }
.dc-shop__head .dc-secLede { max-width: 46ch; }
.dc-shop__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6);
}
.dc-product { display: flex; flex-direction: column; gap: var(--space-4); }
.dc-product__media {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
  transition: var(--transition-hover);
}
.dc-product:hover .dc-product__media { box-shadow: inset 0 0 0 1px var(--border-accent), var(--shadow-md); transform: translateY(-2px); }
.dc-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Emplacement vide : cadre en pointillé, sobre */
.dc-product__slot {
  position: absolute; inset: var(--space-3);
  border: 1px dashed var(--taupe-300); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--blush-100);
}
.dc-product__slot span {
  font-family: var(--font-body); font-size: 10px; font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--taupe-500);
}
.dc-product__add {
  position: absolute; right: var(--space-4); bottom: var(--space-4);
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  background: var(--anthracite-700); color: var(--creme-100);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(8px); transition: var(--transition-hover);
}
.dc-product__add svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.dc-product:hover .dc-product__add { opacity: 1; transform: translateY(0); }
.dc-product__add:hover { background: var(--rose-500); }

.dc-product__info { display: flex; flex-direction: column; gap: 5px; }
.dc-product__cat {
  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-product__name {
  font-family: var(--font-display); font-weight: var(--weight-display-medium);
  font-size: var(--display-6); line-height: 1.24; color: var(--text-strong); margin: 0;
}
.dc-product__price {
  font-family: var(--font-body); font-size: var(--body-sm);
  font-weight: var(--price-weight); letter-spacing: var(--price-tracking); color: var(--text-muted);
}
.dc-product.is-empty .dc-product__cat,
.dc-product.is-empty .dc-product__name,
.dc-product.is-empty .dc-product__price { color: var(--taupe-400); }

.dc-shop__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  margin-top: var(--space-10); padding-top: var(--space-6); border-top: var(--hairline); flex-wrap: wrap;
}
.dc-shop__foot p {
  font-family: var(--font-body); font-size: var(--body-xs);
  font-weight: var(--weight-body-light); color: var(--text-subtle); margin: 0;
}

/* ══ TÉMOIGNAGES ═════════════════════════════════════════════════════ */
.dc-voices { padding: clamp(80px, 11vh, 140px) 0; background: var(--surface-page); overflow: hidden; }
.dc-voices__head { margin-bottom: var(--space-10); }
.dc-voices__viewport { overflow: hidden; }
.dc-voices__track {
  display: flex; gap: var(--space-6);
  padding-left: var(--shell-inset); padding-right: var(--rail);
  will-change: transform;
}
.dc-voice {
  flex: 0 0 clamp(290px, 32vw, 420px); margin: 0;
  background: var(--surface-card); border-radius: var(--radius-lg);
  padding: var(--card-pad); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.dc-voice__stars { color: var(--rose-500); font-size: 13px; letter-spacing: 3px; }
.dc-voice 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-body); margin: 0; flex: 1; text-wrap: pretty;
}
.dc-voice footer { display: flex; flex-direction: column; gap: 3px; padding-top: var(--space-4); border-top: var(--hairline); }
.dc-voice__who { font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-medium); color: var(--text-strong); }
.dc-voice__meta { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); }

/* ══ JOURNAL ═════════════════════════════════════════════════════════ */
.dc-journal { padding: clamp(80px, 11vh, 140px) 0; background: var(--surface-card); }
.dc-journal__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
.dc-journal__side { display: flex; flex-direction: column; gap: var(--space-7); }
.dc-post { margin: 0; }
.dc-post__meta {
  font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle);
  margin: var(--space-5) 0 var(--space-2);
}
.dc-post__meta span { color: var(--text-accent); }
.dc-post__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--display-5); line-height: 1.22; letter-spacing: var(--display-tracking);
  color: var(--text-strong); margin: 0; transition: color var(--duration-fast) var(--ease-standard);
}
.dc-post:hover .dc-post__title { color: var(--rose-700); }
.dc-post__excerpt {
  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: var(--space-4) 0 0; max-width: 54ch;
}
.dc-post--row { display: grid; grid-template-columns: 104px 1fr; gap: var(--space-5); align-items: center; }
.dc-post--row .dc-post__meta { margin-top: 0; }
.dc-post--row .dc-post__title { font-size: var(--display-6); }

/* ══ CTA RÉSERVATION ═════════════════════════════════════════════════ */
.dc-booking { position: relative; background: var(--anthracite-900); color: var(--text-on-dark); padding: clamp(96px, 15vh, 190px) 0; overflow: hidden; text-align: center; }
.dc-booking__glow {
  position: absolute; left: 50%; top: 50%; width: 120vw; height: 120vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(46% 46% at 50% 50%, rgba(201, 145, 122, 0.22), transparent 70%);
  pointer-events: none;
}
.dc-booking__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.dc-booking__title {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(40px, 6.4vw, 92px); line-height: 1.04;
  letter-spacing: var(--display-tracking); color: var(--creme-100);
  margin: 0 0 var(--space-6); text-wrap: balance;
}
.dc-booking__title em { font-style: italic; color: var(--blush-400); }
.dc-booking__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: 46ch; margin: 0 0 var(--space-9);
}
.dc-booking__note {
  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-on-dark-muted); margin: var(--space-7) 0 0;
}

/* ══ PIED DE PAGE ════════════════════════════════════════════════════ */
.dc-footer { background: var(--surface-inverse); color: var(--text-on-dark); padding: clamp(72px, 9vh, 112px) 0 var(--space-8); }
.dc-footer__top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: var(--space-9); align-items: start; }
.dc-footer__mark { height: 92px; width: auto; display: block; }
.dc-footer__tagline {
  font-family: var(--font-display); font-style: italic; font-weight: var(--weight-display);
  font-size: var(--display-6); line-height: 1.35; color: var(--text-on-dark-muted);
  margin: var(--space-5) 0 0; max-width: 28ch;
}
.dc-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dc-footer__col a {
  font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light);
  color: var(--text-on-dark-muted); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard);
}
.dc-footer__col a:hover { color: var(--rose-400); }
.dc-footer__addr li, .dc-footer__hours li {
  font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-light);
  color: var(--text-on-dark-muted); line-height: 1.6;
}
.dc-footer__addr strong { display: block; color: var(--creme-100); font-weight: var(--weight-body-medium); }
.dc-footer__hours li { display: flex; justify-content: space-between; gap: var(--space-4); }
.dc-footer__rail {
  margin-top: clamp(56px, 7vh, var(--space-11)); padding-top: var(--space-6);
  border-top: 1px solid var(--border-on-dark);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap;
}
.dc-footer__verbs { display: flex; gap: var(--space-7); }
.dc-footer__verbs span {
  font-family: var(--font-body); font-size: var(--label-size);
  font-weight: var(--label-weight); letter-spacing: var(--label-tracking-wide);
  text-transform: uppercase; color: var(--rose-400);
}
.dc-footer__legal { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-on-dark-muted); margin: 0; }

/* ══ TIROIRS (panier / compte) ═══════════════════════════════════════ */
/* L'ouverture/fermeture est pilotée par CSS, pas par GSAP : l'état visible
   d'un tiroir ne doit jamais dépendre d'un callback d'animation. Si le rendu
   est gelé (onglet en arrière-plan), le tiroir reste malgré tout correctement
   masqué — donc hors du parcours clavier et des lecteurs d'écran. */
.dc-scrim {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(28, 26, 24, 0.42); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.dc-scrim.is-open { opacity: 1; }

.dc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(440px, 100vw); background: var(--surface-page);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}
.dc-drawer.is-open { transform: translateX(0); }
.dc-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-6) var(--space-7); border-bottom: var(--hairline); flex: 0 0 auto;
}
.dc-drawer__head .dc-eyebrow { margin: 0; }
.dc-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-7); }
.dc-drawer__foot { flex: 0 0 auto; padding: var(--space-6) var(--space-7); border-top: var(--hairline); background: var(--surface-card); }

.dc-cart__empty { text-align: center; padding: var(--space-10) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dc-cart__emptyMark { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--blush-200); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-2); }
.dc-cart__emptyMark svg { width: 22px; height: 22px; fill: none; stroke: var(--rose-600); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.dc-cart__empty h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-5); color: var(--text-strong); margin: 0; max-width: 20ch; }
.dc-cart__empty 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: 34ch; }

.dc-cart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dc-cart__item { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--hairline); align-items: center; }
.dc-cart__thumb { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--blush-200); border: 1px dashed var(--taupe-300); }
.dc-cart__name { font-family: var(--font-display); font-size: var(--display-6); font-weight: var(--weight-display-medium); color: var(--text-strong); margin: 0 0 3px; }
.dc-cart__qty { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); }
.dc-cart__remove { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); text-decoration: underline; padding: 0; }
.dc-cart__remove:hover { color: var(--status-error); }
.dc-cart__row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-body); font-size: var(--body-md); color: var(--text-strong); margin-bottom: var(--space-3); }
.dc-cart__note { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); margin: 0 0 var(--space-5); }

.dc-account__hello { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--display-4); color: var(--text-strong); margin: 0; }
.dc-account__sub { font-family: var(--font-body); font-weight: var(--weight-body-light); font-size: var(--body-sm); color: var(--text-muted); margin: var(--space-3) 0 var(--space-8); }
.dc-account__block { padding-top: var(--space-7); margin-top: var(--space-7); border-top: var(--hairline); }
.dc-account__block:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.dc-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dc-orders li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.dc-orders strong { display: block; font-family: var(--font-body); font-size: var(--body-sm); font-weight: var(--weight-body-medium); color: var(--text-strong); }
.dc-orders span { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-subtle); }
.dc-tag {
  font-family: var(--font-body); font-size: 10px; font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--rose-100); color: var(--rose-700);
}
.dc-tag.is-done { background: var(--status-success-bg); color: var(--status-success); }
.dc-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: 0 0 var(--space-4); }
.dc-nextrdv { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); border-radius: var(--radius-md); background: var(--blush-100); margin-bottom: var(--space-5); }
.dc-nextrdv strong { font-family: var(--font-display); font-size: var(--display-6); font-weight: var(--weight-display-medium); color: var(--text-strong); }
.dc-nextrdv span { font-family: var(--font-body); font-size: var(--body-xs); color: var(--text-muted); }

/* ══ ÉTATS D'ENTRÉE (avant GSAP) ═════════════════════════════════════
   Ces états ne s'appliquent QUE si JavaScript est actif (html.js).
   Sans JS — ou si le filet de sécurité se déclenche (html.dc-forced) —
   tout le contenu reste visible : le site ne dépend pas de l'animation.
   ══════════════════════════════════════════════════════════════════ */
.js .dc-veil { display: flex; }
.dc-veil { display: none; }

.js [data-reveal],
.js [data-reveal-eyebrow] { opacity: 0; transform: translateY(var(--rise-distance)); }
.js [data-clip] .dc-media { clip-path: inset(0 0 100% 0); }

.dc-forced .dc-veil { display: none !important; }
.dc-forced body { overflow: visible !important; }
.dc-forced [data-reveal],
.dc-forced [data-reveal-eyebrow] { opacity: 1 !important; transform: none !important; }
.dc-forced [data-clip] .dc-media { clip-path: none !important; }
.dc-forced .dc-hero__title .dc-line > span { transform: none !important; }

/* ══ RESPONSIVE ══════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .dc-shop__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
@media (max-width: 900px) {
  .dc-nav, .dc-header__cta { display: none; }
  .dc-burger { display: flex; }
  .dc-about__grid, .dc-journal__grid { grid-template-columns: 1fr; }
  .dc-secHead--row { flex-direction: column; align-items: flex-start; }
  .dc-service { grid-template-columns: 40px 1fr; }
  .dc-service__meta { grid-column: 2; gap: var(--space-5); }
  .dc-service__desc { opacity: 1; max-height: none; }
}
@media (max-width: 620px) {
  :root { --header-h: 82px; }
  .dc-header__mark img { height: 54px; }

  /* Le héros n'occupe plus toute la hauteur : sur un écran de téléphone,
     la ligne de flottaison entière repoussait le reste du site trop bas. */
  .dc-hero { height: 76svh; min-height: 440px; }
  /* Le contenu est aligné en bas ; ce padding haut ne sert qu'à dégager
     l'en-tête, il n'a pas à créer un vide. */
  .dc-hero__content { padding-top: calc(var(--header-h) + var(--space-3)); padding-bottom: var(--space-9); }
  .dc-hero__title { font-size: clamp(46px, 13vw, 62px); }
  .dc-hero__lede { font-size: var(--body-sm); margin-bottom: var(--space-6); }
  .dc-hero__foot { bottom: var(--space-4); }
  .dc-footer__top { grid-template-columns: 1fr; }
  .dc-shop__grid { grid-template-columns: 1fr; }
  .dc-hero__foot { justify-content: center; }
  .dc-hero__scroll { display: none; }
  .dc-services__peek { display: none; }
}

/* ══ ACCESSIBILITÉ ═══════════════════════════════════════════════════ */
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal], [data-reveal-eyebrow] { opacity: 1 !important; transform: none !important; }
  [data-clip] .dc-media { clip-path: none !important; }
  .dc-veil { display: none; }
}