/* ================================================
   DRAGÉE PARIS — Direction Artistique Premium
   Typographie : Akkurat (Light / Regular / Bold)
   Palette : voir "Système Cédric" ci-dessous
================================================ */

/* ---- Akkurat ---- */
@font-face {
  font-family: 'Akkurat';
  src: url('./akkurat_fonts/fonnts.com-Akkurat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akkurat';
  src: url('./akkurat_fonts/fonnts.com-Akkurat.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Akkurat';
  src: url('./akkurat_fonts/fonnts.com-Akkurat-Bold.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Aucun italic dans ce site */
em, i { font-style: normal; }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { border: none; background: none; cursor: pointer; font-family: inherit; touch-action: manipulation; }
ul { list-style: none; }
input, textarea, select { font-family: inherit; }

/* ---- Utilitaire accessibilité : visible uniquement pour lecteurs d'écran ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Anti-spam : champ piège invisible et ignoré des lecteurs d'écran ---- */
.form__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Variables — Système Cédric ----
   "Cédric" est le nom de code interne de la direction artistique de ce site
   (repris dans les classes .cedric-* et les commentaires de section ci-dessous).
   Ce n'est pas une référence externe à retrouver — à réutiliser tel quel pour
   toute nouvelle section qui suit la même direction artistique. ---- */
:root {
  /* === COULEURS CÉDRIC ET LA CHOCOLATERIE === */
  --color-background:  #F3ECE6;
  --color-foreground:  #52362A;
  --color-heading:     #965F36;
  --color-border:      rgba(0, 0, 0, 0.06);
  --color-shadow:      #52362A;

  --color-background-dark:   #52362A;
  --color-foreground-light:  #F3ECE6;

  --color-primary-button-text:          #F3ECE6;
  --color-primary-button-background:    #965F36;
  --color-primary-button-border:        #965F36;
  --color-primary-button-hover-text:    #965F36;
  --color-primary-button-hover-background: #F3ECE6;

  --color-secondary-button-text:          #965F36;
  --color-secondary-button-background:    #F3ECE6;
  --color-secondary-button-border:        #965F36;
  --color-secondary-button-hover-text:    #F3ECE6;
  --color-secondary-button-hover-background: #965F36;

  --color-input-background:       rgba(243, 236, 230, 0.78);
  --color-input-text:             #52362A;
  --color-input-border:           #965F36;
  --color-input-hover-background: rgba(0, 0, 0, 0.01);

  --color-error:      #8B0000;
  --color-success:    #006400;
  --color-instock:    #3ED660;
  --color-lowstock:   #EE9441;
  --color-outofstock: #C8C8C8;

  /* === TYPOGRAPHIE === */
  --font-body--family:    'Akkurat', 'Helvetica Neue', Arial, sans-serif;
  --font-heading--family: 'Akkurat', 'Helvetica Neue', Arial, sans-serif;

  --font-size--micro:     clamp(0.5625rem, 0.64vw, 0.625rem);
  --font-size--paragraph: clamp(0.75rem, 1.12vw, 0.875rem);
  --font-size--h1:        clamp(3.125rem, 5.76vw, 4.5rem);
  --font-size--h2:        clamp(2.358rem, 3.84vw, 3rem);
  --font-size--h3:        clamp(1.75rem, 2.56vw, 2rem);
  --font-size--h4:        clamp(1.25rem, 1.92vw, 1.5rem);
  --font-size--h5:        clamp(1rem, 1.28vw, 1.25rem);
  --font-size--h6:        clamp(0.75rem, 0.96vw, 1rem);

  --letter-spacing--body:    0.035em;
  --letter-spacing--heading: 0.03em;
  --line-height--body:       1.4;
  --line-height--heading:    1.25;

  /* === LAYOUT === */
  --container-padding:  clamp(1rem, 4vw, 2.5rem);
  --grid-gap:           clamp(1rem, 2vw, 2rem);
  --normal-page-width:  120rem;

  --section-height--small:  min(15rem, 50svh);
  --section-height--medium: min(25rem, 65svh);
  --section-height--large:  min(35rem, 80svh);

  --sidebar-width:  28.625rem;

  /* === COMPOSANTS === */
  --border-radius--button: 40px;
  --border-radius--card:   0.8rem;
  --shadow-button:  0 2px 3px rgba(0, 0, 0, 0.2);
  --shadow-drawer:  0px 4px 20px rgba(82, 54, 42, 0.15);
  --drawer-max-width: 420px;

  /* === ANIMATIONS === */
  --transition-duration--fast:   0.1s;
  --transition-duration--medium: 0.2s;
  --transition-duration--slow:   0.4s;
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);

  /* === ALIASES BACKWARD COMPAT (utilisés dans les composants existants) === */
  --paper:     var(--color-background);
  --paper-2:   #EDE8E0;
  --ink:       var(--color-foreground);
  --ink-60:    rgba(82, 54, 42, 0.75);
  --ink-20:    rgba(82, 54, 42, 0.12);
  --ink-8:     rgba(82, 54, 42, 0.06);
  --caramel:   var(--color-heading);
  --or-chaud:  var(--color-heading);
  --blanc:     #FFFFFF;
  --noir-hero: #120E09;
  --font:      var(--font-body--family);
  --heading:   var(--font-heading--family);
  --serif:     var(--font-body--family);
  --sans:      var(--font-body--family);
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Grain overlay — fixed, performance-safe */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px;
}

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 52px;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  background: var(--ink);
  color: var(--blanc);
  padding: 0.5rem 1rem;
  z-index: 9999;
}
.skip-link:focus { top: 1rem; }


/* ==============================================
   HEADER
============================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 12;
  background-color: transparent;
  transition: background-color 0.5s var(--ease-out-cubic),
              transform 0.3s var(--ease-out-cubic);
}

.header.scrolled,
.header--inner {
  background-color: rgba(243, 236, 230, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header--hidden {
  transform: translateY(-110%);
  transition: background-color 0.5s var(--ease-out-cubic),
              transform 0.5s cubic-bezier(0.4, 0, 1, 1);
}

/* Safe area Dynamic Island */
.header__safe-area { display: none; }
@media (max-width: 60em) {
  .header__safe-area {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top, 0px);
    z-index: 9999;
    pointer-events: none;
    background: var(--color-background);
  }
}

/* Conteneur header : 3 colonnes [toggle | logo | actions] */
.header__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem var(--container-padding);
  max-width: var(--normal-page-width);
  margin-inline: auto;
}
@media (max-width: 40em) {
  .header__container { padding: 1rem 1.25rem; }
}

/* Logo */
.header__logo {
  font-family: var(--heading);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  word-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  white-space: nowrap;
  text-align: center;
  justify-self: center;
  transition: color 0.5s var(--ease-out-cubic);
}
.header.scrolled .header__logo,
.header--inner .header__logo {
  color: var(--caramel);
}

/* Hamburger toggle */
.header__menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  justify-self: start;
}
.header__menu-toggle .hamburger-line {
  display: block;
  width: 32px;
  height: 1px;
  transform: scaleY(0.75);
  background: var(--blanc);
  transition: transform 0.4s var(--ease-out-cubic),
              opacity 0.3s,
              background-color 0.5s var(--ease-out-cubic);
}
.header.scrolled .header__menu-toggle .hamburger-line,
.header--inner .header__menu-toggle .hamburger-line {
  background: var(--color-foreground);
}

/* Actions (CTA) */
.header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.header__cta {
  font-family: var(--font-body--family);
  font-size: 0.6875rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.65rem 1.25rem;
  border-radius: var(--border-radius--button);
  color: var(--color-primary-button-text);
  background-color: var(--color-primary-button-background);
  border: 1px solid var(--color-primary-button-border);
  box-shadow: var(--shadow-button);
  cursor: pointer;
  transition: color var(--transition-duration--medium) var(--ease-out-cubic),
              background-color var(--transition-duration--medium) var(--ease-out-cubic);
  white-space: nowrap;
}
.header__cta:hover {
  color: var(--color-primary-button-hover-text);
  background-color: var(--color-primary-button-hover-background);
}
/* Ghost style sur hero transparent */
.header:not(.header--inner):not(.scrolled) .header__cta {
  background-color: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.header:not(.header--inner):not(.scrolled) .header__cta:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 48em) {
  .header__cta { display: none; }
}

/* Icône CTA dans le header — mobile uniquement */
.header__cta-icon {
  display: none;
}
@media (max-width: 48em) {
  .header__cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.2s var(--ease-soft), background 0.2s var(--ease-soft);
  }
  .header__cta-icon:hover,
  .header__cta-icon:active {
    color: var(--caramel);
  }
  /* Ghost sur le hero transparent */
  .header:not(.header--inner):not(.scrolled) .header__cta-icon {
    color: rgba(255, 255, 255, 0.85);
  }
  .header:not(.header--inner):not(.scrolled) .header__cta-icon:hover {
    color: var(--blanc);
  }
  /* Scrollé sur homepage : couleur ink */
  .header.scrolled .header__cta-icon {
    color: var(--ink);
  }
}


/* ==============================================
   DRAWER (menu global)
============================================== */
/* ================================================
   DRAWER — Panneau latéral bicolonne (style Cédric)
================================================ */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.drawer[aria-hidden="false"] {
  pointer-events: auto;
}

/* Overlay sombre sur la partie droite visible */
.drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(52, 34, 26, 0.18);
  opacity: 0;
  transition: opacity 0.38s var(--ease-soft);
}
.drawer[aria-hidden="false"]::before { opacity: 1; }

/* Panneau principal — glisse depuis la gauche */
.drawer__content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(280px, 29vw, 390px);
  display: flex;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform 0.38s var(--ease-soft), width 0.32s var(--ease-soft);
}
.drawer[aria-hidden="false"] .drawer__content {
  transform: translateX(0);
}
.drawer.sub-open .drawer__content {
  width: min(760px, 56vw);
}

/* ── Animations d'entrée du menu ─────────────────── */
@keyframes drawer-item-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.drawer[aria-hidden="false"] .drawer__main-item {
  animation: drawer-item-in 0.28s var(--ease-soft) both;
}
.drawer[aria-hidden="false"] .drawer__main-item:nth-child(1) { animation-delay: 0.05s; }
.drawer[aria-hidden="false"] .drawer__main-item:nth-child(2) { animation-delay: 0.10s; }
.drawer[aria-hidden="false"] .drawer__main-item:nth-child(3) { animation-delay: 0.15s; }
.drawer[aria-hidden="false"] .drawer__main-item:nth-child(4) { animation-delay: 0.20s; }

.drawer__sub.is-visible .drawer__sub-link {
  animation: drawer-item-in 0.24s var(--ease-soft) 0.06s both;
}

/* ── Panneau gauche ─────────────────────────────── */

.drawer__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 38px 44px 44px;
  overflow-y: auto;
}
.drawer.sub-open .drawer__left {
  flex: none;
  width: clamp(260px, 27vw, 370px);
}

/* Bouton fermer */
.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 48px;
  align-self: flex-start;
  transition: opacity 0.2s;
}
.drawer__close:hover { opacity: 0.5; }
.drawer__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Liste principale */
.drawer__main-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.drawer__main-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--font);
  font-style: normal;
  font-size: 26px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin: 2px 0;
  min-height: 44px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s var(--ease-soft), opacity 0.18s;
}
.drawer__main-btn:hover,
.drawer__main-btn:active { color: var(--caramel); }
.drawer__main-btn.active { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.drawer__main-item.is-active .drawer__main-btn {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.drawer__main-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: 10px;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 0.22s var(--ease-soft);
}
.drawer__main-btn:hover .drawer__main-chevron,
.drawer__main-btn:active .drawer__main-chevron { transform: translateX(4px); }

/* CTA "Lancer ma création" */
.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--paper);
  background: var(--caramel);
  padding: 16px 24px;
  margin-bottom: 24px;
  border-radius: var(--border-radius--button);
  transition: background 0.22s var(--ease-soft), transform 0.18s var(--ease-soft);
}
.drawer__cta::after {
  content: '→';
  font-size: 14px;
  letter-spacing: 0;
  opacity: 0.75;
  transition: transform 0.2s var(--ease-soft), opacity 0.2s;
}
.drawer__cta:hover {
  background: var(--ink);
}
.drawer__cta:hover::after {
  transform: translateX(4px);
  opacity: 1;
}

/* Liens secondaires en bas */
.drawer__secondary {
  padding-top: 20px;
  border-top: 1px solid var(--ink-20);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.drawer__secondary a {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}
.drawer__secondary a:hover { color: var(--caramel); }

/* ── Séparateur vertical caramel ─────────────────── */

.drawer__divider {
  width: 16px;
  background: var(--caramel);
  flex-shrink: 0;
  align-self: stretch;
}

/* ── Panneau droit : sous-menus ──────────────────── */

.drawer__right {
  display: none;
  flex: 1;
  padding: 110px 48px 44px;
  overflow-y: auto;
}
.drawer.sub-open .drawer__right { display: block; }

/* ── Bouton Retour (mobile uniquement) ──────────── */
.drawer__back {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 28px;
  min-height: 44px;
  touch-action: manipulation;
  transition: color 0.2s;
}
.drawer__back svg { width: 14px; height: 14px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .drawer__back:hover { color: var(--ink); }
}

.drawer__sub {
  display: none;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s var(--ease-soft), transform 0.22s var(--ease-soft);
}
.drawer__sub[aria-hidden="false"] {
  display: flex;
  opacity: 0;
  transform: translateY(-4px);
}
.drawer__sub.is-visible { opacity: 1; transform: translateY(0); }

.drawer__sub-link {
  font-family: var(--font);
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.2s, transform 0.2s var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .drawer__sub-link:hover { color: var(--caramel); transform: translateX(6px); }
}
@media (hover: none) {
  .drawer__sub-link:active { color: var(--caramel); }
}
.drawer__sub-link--all { font-weight: 400; }

.drawer__sub-sep {
  height: 1px;
  background: var(--ink-20);
  margin: 12px 0 20px;
  width: 100%;
}

/* Sous-catégories dépliables dans le drawer (ex. Premiers instants > Naissance…) */
.drawer__sub-group { display: flex; flex-direction: column; }
.drawer__sub-group-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 10px 0;
  transition: color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .drawer__sub-group-trigger:hover { color: var(--caramel); }
}
.drawer__sub-group-chevron {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
  color: var(--ink-60);
}
.drawer__sub-group.open .drawer__sub-group-chevron { transform: rotate(180deg); }
.drawer__sub-group-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-soft);
  display: flex;
  flex-direction: column;
  padding-left: 18px;
}
.drawer__sub-group.open .drawer__sub-group-panel { max-height: 220px; }
.drawer__sub-group-panel .drawer__sub-link {
  font-size: 15px;
  line-height: 26px;
  color: var(--ink-60);
}

/* ── Mobile — plein écran empilé ─────────────────── */

@media (max-width: 768px) {
  /* Contenu en colonne, overflow masqué = zone de slide */
  .drawer__content,
  .drawer.sub-open .drawer__content {
    width: 100%;
    flex-direction: column;
    overflow: hidden;
  }
  /* Panneau principal — pleine largeur avec slide-out */
  .drawer__left,
  .drawer.sub-open .drawer__left {
    flex: none;
    width: 100%;
    padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 24px 20px;
    overflow-y: auto;
    transition: transform 0.3s var(--ease);
  }
  .drawer.sub-open .drawer__left {
    transform: translateX(-100%);
  }
  .drawer__close { margin-bottom: 24px; }
  .drawer__main-list { margin-bottom: 2rem; }
  .drawer__divider { display: none; }
  /* Panneau sous-menu — superposé en absolu, arrive depuis la droite */
  .drawer__right {
    display: block;
    position: absolute;
    inset: 0;
    padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 24px 32px;
    overflow-y: auto;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.3s var(--ease);
  }
  .drawer.sub-open .drawer__right {
    transform: translateX(0);
  }
  /* Bouton Retour visible sur mobile */
  .drawer__back { display: flex; }
  .drawer__main-btn { font-size: clamp(20px, 6vw, 32px); padding: 7px 10px; }
  .drawer__secondary { padding-top: 20px; margin-top: 12px; }
}
@media (max-width: 480px) {
  .drawer__left,
  .drawer.sub-open .drawer__left { padding: max(24px, calc(env(safe-area-inset-top, 0px) + 12px)) 20px 16px; }
  .drawer__right { padding: max(24px, calc(env(safe-area-inset-top, 0px) + 12px)) 20px 28px; }
}


/* ==============================================
   HERO
============================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--noir-hero);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  font-size: 0;
  line-height: 0;
}
.hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  will-change: transform;
  animation: heroScale 1.2s var(--ease) forwards;
}
@keyframes heroScale {
  from { transform: scale(1.06); opacity: 0.6; }
  to   { transform: scale(1);    opacity: 1; }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(17, 13, 8, 0.50) 0%,
    rgba(17, 13, 8, 0.30) 30%,
    rgba(17, 13, 8, 0.42) 60%,
    rgba(17, 13, 8, 0.82) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 52px clamp(120px, 18vh, 220px);
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.hero__title {
  font-size: clamp(36px, 5.2vw, 78px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.03em;
  color: var(--blanc);
  max-width: 780px;
  animation: fadeUp 1.2s var(--ease) 0.5s both;
}

/* Scroll arrow */
.hero__arrow {
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  animation: fadeIn 0.8s 1.4s forwards;
  cursor: pointer;
}
.hero__arrow svg {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.6);
  animation: arrowBounce 2s ease-in-out 1.8s 3;
  display: block;
}
.hero__arrow svg + svg {
  margin-top: -8px;
  opacity: 0.35;
  animation-delay: 2.15s;
}
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0);   opacity: 0.6; }
  50%       { transform: translateY(7px); opacity: 1;   }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .hero {
    margin-top: calc(-1 * env(safe-area-inset-top, 0px));
    min-height: 100svh;
    min-height: calc(100dvh + env(safe-area-inset-top, 0px));
  }
  .hero__content {
    min-height: 100svh;
    min-height: calc(100dvh + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 20px 80px;
  }
  .hero__title { font-size: 46px; }
  .hero__arrow { bottom: 36px; }
}

/* ==============================================
   BUTTONS
============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease-soft),
              color 0.4s var(--ease-soft),
              border-color 0.4s var(--ease-soft),
              box-shadow 0.4s var(--ease-soft),
              opacity 0.35s,
              transform 0.2s var(--ease);
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn-arrow {
  font-size: 13px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn-arrow { transform: translate(3px, -2px) scale(1.15); }

.btn--ghost-light {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255,0.5); }
.btn--ghost-light .btn-arrow { color: var(--blanc); }

.btn--primary {
  background: var(--blanc);
  color: var(--ink);
  border: 1px solid var(--blanc);
}
.btn--primary:hover { background: var(--paper); border-color: var(--paper); }
.btn--primary .btn-arrow { color: var(--ink); }

.btn--dark {
  background: #965F36;
  color: var(--blanc);
  border: 1px solid #965F36;
}
.btn--dark:hover {
  background: #7A4D27;
  border-color: #7A4D27;
  box-shadow: 0 4px 18px rgba(150, 95, 54, 0.42);
}
.btn--dark .btn-arrow { }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-20);
}
.btn--outline:hover { background: var(--ink); color: var(--blanc); border-color: var(--ink); }
.btn--outline .btn-arrow { }

/* Badges de livraison : À domicile / Click & Collect */
span.btn--outline {
  border-radius: 12px;
  background-color: transparent;
  color: rgb(82, 54, 42);
  border-color: #836d63;
  font-family: 'Akkurat', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
}
span.btn--outline:hover {
  background-color: transparent;
  border-color: #836d63;
  color: #836d63;
  opacity: 0.65;
}

.btn--caramel {
  background: var(--caramel);
  color: var(--blanc);
  border: 1px solid var(--caramel);
}
.btn--caramel:hover { background: #a07a5a; }


/* ==============================================
   MARQUEE BAND
============================================== */
.band {
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  padding: 18px 0;
  overflow: hidden;
  background: var(--paper);
}
.band__track {
  display: flex;
  gap: 0;
  animation: marquee 28s linear infinite;
  width: max-content;
  will-change: transform;
}
.band__item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.band__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--caramel);
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==============================================
   SHARED SECTION TOKENS
============================================== */
.eyebrow {
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: block;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(37px, 4.8vw, 74px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.section-title em { font-style: italic; }
.section-sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 480px;
}
.hairline {
  width: 40px;
  height: 1px;
  background: var(--ink-20);
  margin: 28px 0;
}
@media (max-width: 768px) { .hairline { display: none; } }


/* ==============================================
   COLLECTIONS
============================================== */
.collections {
  padding: 40px 52px 56px;
  background: var(--paper);
}

.collections__intro {
  text-align: center;
  margin-bottom: 72px;
}
.collections__intro-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 5px;
}
.collections__intro-sub {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--ink-60);
}

.collections__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 120px;
  max-width: 1200px;
  margin: 0 auto;
}

.col-item__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  overflow: hidden;
}
.col-item__duo img {
  width: 100%;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: filter 0.7s var(--ease-soft), transform 0.9s var(--ease);
  filter: brightness(0.97) saturate(0.9);
}
.col-item:hover .col-item__duo img {
  filter: brightness(1.04) saturate(1.05);
  transform: scale(1.05);
}
.col-item__label {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}
.col-item__label-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.col-item__label-link:hover {
  border-bottom-color: var(--ink);
}

@media (max-width: 768px) {
  .collections { padding: 64px 20px 64px; }
  .collections__grid { gap: 16px; max-width: 100%; }
}
@media (max-width: 480px) {
  .collections__grid { grid-template-columns: 1fr; max-width: 320px; }
}

.collections__grid--single {
  grid-template-columns: 1fr;
  max-width: 560px;
}
.collections__grid--single .col-item__duo img {
  aspect-ratio: 9 / 16;
}

/* ==============================================
   DUO CAROUSEL (dragées)
============================================== */
.duo-carousel-wrap {
  overflow: hidden;
  padding: 40px 52px 56px;
}
.duo-carousel__track {
  display: flex;
  gap: 44px;
  transition: transform 0.75s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

@keyframes col-item-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.col-item--entering {
  animation: col-item-in 0.65s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}
.duo-carousel__track .col-item {
  flex: 0 0 calc((100% - 88px) / 3);
  min-width: 0;
}

.col-item__duo-empty {
  aspect-ratio: 1 / 2;
  background: var(--paper-2);
}

.col-item__duo-frame {
  position: relative;
  overflow: hidden;
}
.col-item__duo-frame img {
  width: 100%;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  display: block;
  transition: filter 0.7s var(--ease-soft), transform 0.9s var(--ease);
  filter: brightness(0.97) saturate(0.9);
}
.col-item:hover .col-item__duo-frame img {
  filter: brightness(1.04) saturate(1.05);
}
@media (max-width: 1024px) {
  .duo-carousel-wrap { padding: 48px 24px 64px; }
  .duo-carousel__track { gap: 28px; }
  .duo-carousel__track .col-item { flex: 0 0 calc((100% - 28px) / 2); }
}
@media (max-width: 640px) {
  .duo-carousel-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 36px 0 52px;
  }
  .duo-carousel-wrap::-webkit-scrollbar { display: none; }
  .duo-carousel__track {
    transform: none !important;
    transition: none !important;
    gap: 16px;
    padding: 0 20px;
  }
  .duo-carousel__track .col-item {
    flex: 0 0 82vw;
    scroll-snap-align: start;
  }
  .carousel-arrow { display: none; }
  .carousel-nav { display: none; }
}


/* ==============================================
   GARANTIES
============================================== */
.garanties {
  background: var(--paper);
  padding: 56px 52px;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.garanties__label {
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 60px;
}
.garanties__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
.garanties__grid--4 {
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px;
}
.garanties__cta {
  text-align: center;
  margin-top: 56px;
}
.garantie-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
  position: relative;
}
.garantie-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 4px;
  height: 80px;
  width: 1px;
  background: var(--ink-20);
}
.garantie-item__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  color: var(--caramel);
}
.garantie-item__icon svg {
  width: 100%;
  height: 100%;
}
.garantie-item__title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin-bottom: 10px;
}
.garantie-item__desc {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-60);
  max-width: 220px;
}
.garantie-item__list {
  margin-top: 10px;
  max-width: 220px;
}
.garantie-item__list li {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-60);
}

/* Séparateur entre "Livraison soignée" et "Un après, toujours" conservé sur desktop */

@media (max-width: 1024px) {
  .garanties__grid--4 { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
  .garanties__grid--4 .garantie-item:nth-child(2)::after { display: none; }
  .garanties__grid--4 .garantie-item:nth-child(1),
  .garanties__grid--4 .garantie-item:nth-child(2) { border-bottom: 1px solid var(--ink-20); padding-bottom: 40px; margin-bottom: 8px; }
}
/* Dots : cachés par défaut, affichés uniquement sur mobile */
.garanties__dots { display: none; }

@media (max-width: 768px) {
  /* Carrousel garanties */
  .garanties { padding: 40px 0 24px; }
  .garanties__label { padding: 0 24px; margin-bottom: 28px; }
  .garanties__grid,
  .garanties__grid--4 {
    display: flex;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 0;
  }
  .garanties__grid::-webkit-scrollbar,
  .garanties__grid--4::-webkit-scrollbar { display: none; }
  .garanties__grid .garantie-item,
  .garanties__grid--4 .garantie-item {
    scroll-snap-align: start;
    flex: 0 0 100%;
    min-width: 100%;
    padding: 16px 40px 28px;
    border-bottom: none;
    margin-bottom: 0;
  }
  .garanties__grid--4 .garantie-item:nth-child(1),
  .garanties__grid--4 .garantie-item:nth-child(2),
  .garanties__grid--4 .garantie-item:nth-child(3) { border-bottom: none; padding-bottom: 28px; margin-bottom: 0; }
  .garantie-item:not(:last-child)::after { display: none; }
  .garantie-item:not(:last-child) { border-bottom: none; }

  /* Puces */
  .garanties__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 4px;
  }
  .garanties__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-20);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    touch-action: manipulation;
  }
  .garanties__dot.is-active {
    background: var(--caramel);
    transform: scale(1.3);
  }

  /* Masquer les reassurances sur mobile */
  .reassurances { display: none; }
}


/* ==============================================
   ARTISAN SPLIT
============================================== */
.artisan {
  background: var(--paper);
  padding: 56px 40px;
  display: flex;
  justify-content: center;
}
.artisan__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  width: 100%;
  max-width: 1100px;
  align-items: start;
}
.artisan__visual {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.artisan__visual video {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 40px rgba(43, 42, 40, 0.09);
}

.artisan__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.artisan__content .section-title { font-size: clamp(20px, 2vw, 26px); font-family: var(--serif); margin-bottom: 16px; }
.artisan__content .hairline { display: none; }
.artisan__content .section-sub + .section-sub { margin-top: 8px; }
.artisan__sub-heading {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 16px 0 6px;
}
.artisan__list {
  list-style: none;
  padding: 0;
  margin: 12px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.artisan__list li {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-60);
  padding-left: 18px;
  position: relative;
}
.artisan__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--or-chaud);
  font-size: 20px;
  line-height: 1.1;
}
.artisan__detail {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-60);
  border-left: 2px solid var(--or-chaud);
  padding-left: 14px;
  margin-top: 20px;
  font-style: italic;
}
.artisan__cta { margin-top: 36px; }

.artisan__visual img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 40px rgba(43, 42, 40, 0.09);
}

/* Icônes dans les value-cards (À propos) */
.value-card__icon {
  width: 36px; height: 36px;
  margin-bottom: 20px;
  color: var(--caramel);
}
.value-card__icon svg { width: 100%; height: 100%; }

/* Galerie d'atelier (À propos) */
.apropos-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 260px;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.apropos-gallery__item {
  overflow: hidden;
  border-right: 1px solid var(--ink-20);
  position: relative;
}
.apropos-gallery__item:last-child { border-right: none; }
.apropos-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.6s;
  filter: saturate(0.7) brightness(0.92);
}
.apropos-gallery__item:hover img { transform: scale(1.06); filter: saturate(1) brightness(1.04); }
.apropos-gallery__item--tall { grid-row: span 1; }

@media (max-width: 768px) {
  .apropos-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 180px 180px; }
  .apropos-gallery__item:nth-child(2) { border-right: none; }
  .apropos-gallery__item:nth-child(3) { border-top: 1px solid var(--ink-20); }
  .apropos-gallery__item:nth-child(4) { border-top: 1px solid var(--ink-20); border-right: none; }
}
@media (max-width: 480px) {
  .apropos-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: 140px 140px; }
}

@media (max-width: 1024px) {
  .artisan { padding: 56px 20px; flex-direction: column; align-items: center; }
  .artisan__inner { grid-template-columns: 1fr; gap: 40px; }
  .artisan__visual { width: 100%; }
  .artisan__visual video { max-width: 100%; }
  .artisan__visual img   { max-width: 420px; width: 100%; }
}


/* ==============================================
   EDITORIAL DARK (products)
============================================== */
.editorial {
  background: var(--ink);
  color: var(--blanc);
  padding: 64px 0;
  border-top: 1px solid rgba(255, 255, 255,0.06);
}
.editorial__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 52px;
  margin-bottom: 52px;
  gap: 24px;
}
.editorial__headline .eyebrow { color: rgba(255, 255, 255,0.4); }
.editorial__headline .section-title { color: var(--blanc); }
.editorial__link {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255,0.4);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.editorial__link:hover { color: var(--blanc); }

.editorial__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255,0.08);
  border-left: 1px solid rgba(255, 255, 255,0.08);
}
.ed-card {
  border-right: 1px solid rgba(255, 255, 255,0.08);
  border-bottom: 1px solid rgba(255, 255, 255,0.08);
  overflow: hidden;
  transition: background 0.5s var(--ease-soft);
}
.ed-card:hover { background: rgba(255, 255, 255,0.03); }
.ed-card__img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ed-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease), filter 0.7s;
  filter: brightness(0.88) saturate(0.85);
}
.ed-card:hover .ed-card__img img { transform: scale(1.04); filter: brightness(1) saturate(1); }
.ed-card__body { padding: 22px 28px 30px; }
.ed-card__cat {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255,0.35);
  margin-bottom: 6px;
}
.ed-card__name {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--blanc);
  margin-bottom: 8px;
}
.ed-card__desc {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255,0.45);
}
.editorial__footer {
  padding: 0 52px;
  margin-top: 52px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .editorial__grid { grid-template-columns: repeat(2, 1fr); }
  .editorial__header { padding: 0 20px; }
  .editorial__footer { padding: 0 20px; }
}
@media (max-width: 640px) {
  .editorial { padding: 64px 0; }
  .editorial__grid { grid-template-columns: 1fr; }
  .editorial__header { flex-direction: column; align-items: flex-start; gap: 16px; }
}


/* ==============================================
   CTA CENTRÉ
============================================== */
.cta-center {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.cta-center__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cta-center__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  filter: saturate(0.3) blur(1px);
}
.cta-center__body {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 120px 52px;
  max-width: 760px;
  margin: 0 auto;
}
.cta-center__body .eyebrow { margin-bottom: 20px; }
.cta-center__title {
  font-size: clamp(40px, 5.5vw, 88px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.028em;
  margin-bottom: 28px;
}
.cta-center__title em { }
.cta-center__sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  max-width: 440px;
  margin: 0 auto 44px;
}
.cta-center__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .cta-center__body { padding: 80px 20px; }
}
@media (max-width: 480px) {
  .cta-center__title { font-size: clamp(28px, 7vw, 40px); }
  .cta-center__body  { padding: 64px 20px; }
}


/* ==============================================
   GALLERY STRIP
============================================== */
.illustration-banner {
  width: 100%;
  overflow: hidden;
  height: 46vw;
  max-height: 620px;
  min-height: 280px;
  border-top: 1px solid var(--ink-20);
}
.illustration-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
  filter: brightness(0.96) saturate(0.88);
  transition: transform 1.4s var(--ease);
}
.illustration-banner:hover img { transform: scale(1.02); }

@media (max-width: 768px) {
  .illustration-banner { height: 64vw; max-height: none; }
}
@media (max-width: 480px) {
  .illustration-banner { height: 78vw; min-height: 220px; }
}


/* ==============================================
   FAQ
============================================== */
.faq {
  padding: 56px 0 72px;
  border-top: 1px solid var(--ink-20);
  background: var(--paper);
}
.faq .collections__intro { margin-bottom: 52px; }

.faq__list {
  display: flex;
  flex-direction: column;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 52px;
}
.faq__item { border-bottom: 1px solid var(--ink-20); }
.faq__item:first-child { border-top: 1px solid var(--ink-20); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 24px 0;
  font-size: 14.5px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: left;
  gap: 20px;
  transition: opacity 0.3s;
}
.faq__question:hover { opacity: 0.6; }
.faq__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease);
  color: var(--ink-60);
}
.faq__item.open .faq__icon { transform: rotate(180deg); }
.faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s var(--ease-soft);
}
.faq__item.open .faq__answer { max-height: 320px; }
.faq__answer-inner {
  padding-bottom: 24px;
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--ink-60);
}

@media (max-width: 768px) {
  .faq { padding: 56px 0 72px; }
  .faq__list { padding: 0 20px; }
  .faq .collections__intro { margin-bottom: 36px; }
}


/* ==============================================
   PRÉ-FOOTER (logo + réseaux sociaux)
============================================== */
.prefooter {
  text-align: center;
  padding: 56px 52px;
  background: var(--paper);
}
.prefooter__logo {
  font-family: var(--heading);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.02em;
  word-spacing: 0.14em;
  text-transform: uppercase;
  color: #965F36;
  display: block;
  margin-bottom: 28px;
  line-height: 1.15;
}
.prefooter__logo br { display: none; }
@media (max-width: 768px) {
  .prefooter__logo br { display: block; }
}
.prefooter__social {
  display: flex;
  gap: 40px;
  justify-content: center;
}
.prefooter__social a {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
  transition: color 0.3s, opacity 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.prefooter__social a:hover { color: var(--ink); }
@media (max-width: 768px) {
  .prefooter { padding: 56px 20px; }
  .prefooter__logo { font-size: 36px; margin-bottom: 22px; }
  .prefooter__social { gap: 28px; }
}

/* ==============================================
   FOOTER
============================================== */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255,0.8);
  border-top: 1px solid rgba(255, 255, 255,0.06);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  padding: 80px 52px;
  border-bottom: 1px solid rgba(255, 255, 255,0.06);
}
.footer__address {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.6);
  font-style: normal;
}
.footer__logo {
  display: block;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blanc);
  margin-bottom: 10px;
}
.footer__tagline {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255,0.58);
  max-width: 200px;
  margin-bottom: 28px;
}
.footer__social { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__social a {
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255,0.58);
  transition: color 0.3s;
}
.footer__social a:hover { color: var(--blanc); }

.footer__col-title {
  display: block;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255,0.58);
  margin-bottom: 20px;
}
.footer__nav-list,
.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.footer__nav-list a,
.footer__contact-list a {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255,0.6);
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.footer__nav-list a:hover,
.footer__contact-list a:hover { color: var(--blanc); }

.footer__newsletter-text {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255,0.58);
  margin-bottom: 18px;
}
.newsletter-form {
  display: flex;
  border: 1px solid rgba(255, 255, 255,0.1);
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 300;
  color: var(--blanc);
  letter-spacing: 0.04em;
  outline: none;
  min-width: 0;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255,0.28); }
.newsletter-form button {
  padding: 13px 18px;
  font-size: 8.5px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc);
  background: rgba(255, 255, 255,0.07);
  border-left: 1px solid rgba(255, 255, 255,0.1);
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}
.newsletter-form button:hover { background: rgba(255, 255, 255,0.14); }

.footer__bottom {
  padding: 22px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer__bottom p {
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255,0.58);
}

@media (max-width: 1100px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; padding: 60px 24px; }
}
@media (max-width: 600px) {
  .footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { padding: 20px; }
}


/* ==============================================
   SCROLL REVEAL
============================================== */
.fade-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease-soft),
              transform 0.65s var(--ease-soft);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in--delay-1.visible { transition-delay: 0.12s; }
.fade-in--delay-2.visible { transition-delay: 0.24s; }
.fade-in--delay-3.visible { transition-delay: 0.36s; }
.fade-in--delay-4.visible { transition-delay: 0.48s; }
/* Mobile : tout le contenu visible immédiatement, pas de trous visuels */
@media (max-width: 768px) {
  .fade-in,
  .fade-in.visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==============================================
   UTILS
============================================== */
.text-center { text-align: center; }
.mt-8 { margin-top: 2rem; }


/* ==============================================
   OTHER PAGES — keep functional
============================================== */
.section-label {
  display: block;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 14px;
}
.section__title {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.section__subtitle {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}
.divider {
  width: 40px;
  height: 1px;
  background: var(--ink-20);
  margin: 24px 0;
}
.divider--center { margin-left: auto; margin-right: auto; }

/* Legacy btn aliases for other pages */
.btn--primary { }
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-20);
}
.btn--secondary:hover { background: var(--ink); color: var(--blanc); border-color: var(--ink); }
.btn--rose {
  background: #C8756E;
  color: var(--blanc);
  border: 1px solid #C8756E;
}
.btn--rose:hover { background: #b06660; }
.btn--outline-gold {
  background: transparent;
  color: var(--caramel);
  border: 1px solid var(--caramel);
}
.btn--outline-gold:hover { background: var(--caramel); color: var(--blanc); }
.btn--light {
  background: rgba(255, 255, 255,0.12);
  color: var(--blanc);
  border: 1px solid rgba(255, 255, 255,0.28);
}
.btn--light:hover { background: rgba(255, 255, 255,0.22); }


/* ==============================================
   INNER VISUAL — grand visuel pleine largeur (pages internes)
============================================== */
.inner-visual {
  height: 52vw;
  max-height: 600px;
  min-height: 280px;
  overflow: hidden;
  border-top: 1px solid var(--ink-20);
}
.inner-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  filter: brightness(0.95) saturate(0.88);
  transition: transform 1.2s var(--ease);
}
.inner-visual:hover img { transform: scale(1.02); }
@media (max-width: 768px) {
  .inner-visual { height: 64vw; max-height: 420px; }
}
@media (max-width: 480px) {
  .inner-visual { height: 72vw; min-height: 0; }
}

/* ==============================================
   INNER PAGES — HEADER OPAQUE
============================================== */
.header--inner {
  background: rgba(243, 236, 230, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}


/* ==============================================
   SECTION INTRO — version centrée (dragées)
============================================== */
.section-intro {
  padding: 152px 52px 0;
  margin-bottom: 64px;
  text-align: center;
  background: var(--paper);
}
.section-intro__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 5px;
}
.section-intro__sub {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--ink-60);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.7;
}
.order-page .section-intro { padding-top: 110px; margin-bottom: 32px; }
@media (max-width: 768px) {
  .section-intro { padding: 96px 20px 0; margin-bottom: 28px; }
  .section-intro__sub { font-size: 12px; }
  .order-page .section-intro { margin-bottom: 16px; }
}
@media (max-width: 480px) {
  .section-intro { padding: 88px 20px 0; margin-bottom: 20px; }
  .order-page .section-intro { margin-bottom: 12px; }
}

/* ==============================================
   PAGE INTRO (inner pages)
============================================== */
.page-intro {
  padding: 152px 52px 72px;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-20);
}
.page-intro--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 80px;
  padding-bottom: 0;
}
.page-intro__eyebrow {
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: block;
  margin-bottom: 16px;
}
.page-intro__title {
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.page-intro__sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  max-width: 460px;
  margin-top: 24px;
}
.page-intro__visual {
  overflow: hidden;
  align-self: stretch;
}
.page-intro__visual img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .page-intro { padding: 96px 20px 40px; }
  .page-intro--split { grid-template-columns: 1fr; gap: 0; }
  .page-intro__visual { min-height: 60vw; }
  .page-intro__title { font-size: 40px; }
}


/* ==============================================
   SECTION PAGE (inner page sections)
============================================== */
.section-page {
  padding: 88px 52px;
  background: var(--paper);
}
.section-page--dark {
  background: var(--ink);
  color: var(--blanc);
}
.section-page--paper2 {
  background: var(--paper-2);
}
@media (max-width: 768px) {
  .section-page { padding: 64px 20px; }
}


/* ==============================================
   DRAGÉES — Contrôles (filtres + navigation)
============================================== */
.dragees-section { }

.dragees-controls {
  padding: 40px 52px 0;
  text-align: center;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.filter-toggle__icon {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  min-width: 12px;
  text-align: center;
  display: inline-block;
}

.filter-options {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.52s cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-options.open {
  max-height: 120px;
}
.filter-options__inner {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 22px 0 42px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.28s ease,
              transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.filter-options.open .filter-options__inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.32s ease 0.14s,
              transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1) 0.1s;
}

.carousel-stage {
  position: relative;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border: 1px solid var(--ink-20);
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  opacity: 1;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
  transition: background 0.3s, box-shadow 0.3s, transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.carousel-arrow--prev { left: 12px; }
.carousel-arrow--next { right: 12px; }
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover:not(:disabled) {
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.92);
  transition: transform 0.12s ease;
}
.carousel-arrow:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 28px;
}
.carousel-nav__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}
.carousel-dot {
  height: 5px;
  width: 5px;
  border-radius: 3px;
  background: var(--ink);
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.18;
  transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s;
  flex-shrink: 0;
}
.carousel-dot.active {
  width: 22px;
  opacity: 0.75;
}
.carousel-dot:hover:not(.active) {
  opacity: 0.38;
}

@media (max-width: 768px) {
  .dragees-controls { padding: 32px 20px 0; }
  .filter-options__inner {
    gap: 24px;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 18px 0 32px 20px;
  }
  .filter-options__inner::-webkit-scrollbar { display: none; }
  .carousel-nav { padding: 14px 0 20px; }
  .carousel-arrow--prev { left: 8px; }
  .carousel-arrow--next { right: 8px; }
}


/* ==============================================
   ACCORDION GALLERY (dragées)
============================================== */
.accord-gallery {
  display: flex;
  gap: 3px;
  height: 500px;
  overflow: hidden;
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
}
.accord-gallery__item {
  flex: 1;
  min-width: 48px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: flex 0.75s cubic-bezier(0.32, 0.72, 0, 1);
}
.accord-gallery__item:hover { flex: 5; }
.accord-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.65) brightness(0.88);
  transition: filter 0.65s var(--ease-soft), transform 0.9s var(--ease);
}
.accord-gallery__item:hover img {
  filter: saturate(1) brightness(1.03);
  transform: scale(1.02);
}

.accord-gallery__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 14px 16px;
  background: linear-gradient(to top, rgba(15,14,12,0.72) 0%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.45s var(--ease-soft);
  pointer-events: none;
}
.accord-gallery__item:hover .accord-gallery__label { opacity: 1; }
.accord-gallery__num {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.accord-gallery__name {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 400;
  color: var(--blanc);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .accord-gallery {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    gap: 8px;
    padding: 0 20px 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid var(--ink-20);
    border-bottom: none;
  }
  .accord-gallery::-webkit-scrollbar { display: none; }
  .accord-gallery__item {
    flex: 0 0 72vw;
    min-width: 72vw;
    scroll-snap-align: start;
    transition: none;
    border-bottom: 1px solid var(--ink-20);
  }
  .accord-gallery__item:hover { flex: 0 0 72vw; }
  .accord-gallery__item img {
    aspect-ratio: 3 / 4;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.9) brightness(0.94);
    transform: none !important;
  }
}
@media (max-width: 480px) {
  .accord-gallery__item { flex: 0 0 82vw; min-width: 82vw; }
}


/* ==============================================
   GALLERY FILTERS (dragées)
============================================== */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 48px 52px 40px;
}
.filter-btn {
  font-family: var(--font);
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(44, 44, 44, 0.38);
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  transition: color 0.25s var(--ease-soft), transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
  flex-shrink: 0;
}
.filter-btn:hover { color: var(--ink); }
.filter-btn:active { transform: scale(0.92); }
.filter-btn.active {
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 768px) {
  .gallery-filters { padding: 32px 20px 28px; }
}


/* ==============================================
   GALLERY GRID (dragées)
============================================== */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  padding: 0 52px 88px;
}
.gallery-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item.hidden { display: none; }
.gallery-item__tag { display: none; }

@media (max-width: 1024px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px 64px; }
  .gallery-filters { padding: 32px 20px 24px; }
}
@media (max-width: 480px)  { .gallery__grid { grid-template-columns: 1fr; } }


/* ==============================================
   PERSO STEPS — layout premium (personnalisation v2)
============================================== */
.perso-steps {
  margin-top: 72px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink-20);
}
.perso-step {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  border-bottom: 1px solid var(--ink-20);
  min-height: 400px;
}
.perso-step--alt {
  grid-template-columns: 1.4fr 1fr;
}
.perso-step--alt .perso-step__visual { order: -1; }
.perso-step__visual {
  overflow: hidden;
  position: relative;
}
.perso-step__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.6s;
  filter: brightness(0.96) saturate(0.88);
}
.perso-step:hover .perso-step__visual img {
  transform: scale(1.03);
  filter: brightness(1.02) saturate(1);
}
.perso-step__body {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
  padding: 52px 44px;
  gap: 0;
  background: var(--paper);
}
.perso-step__num {
  font-family: var(--serif);
  font-size: 80px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(44, 44, 44, 0.08);
  user-select: none;
}
.perso-step__content {
  padding-top: 6px;
}
.perso-step__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 16px;
}
.perso-step__desc {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--ink-60);
  max-width: 380px;
  margin-bottom: 20px;
}
.perso-step__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid var(--caramel);
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caramel);
}
.perso-step__link {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s;
  border-bottom: 1px solid var(--ink-20);
  padding-bottom: 2px;
}
.perso-step__link:hover { color: var(--ink); }

@media (max-width: 1024px) {
  .perso-step { grid-template-columns: 1fr 1fr; min-height: 320px; }
  .perso-step--alt { grid-template-columns: 1fr 1fr; }
  .perso-step__body { padding: 36px 28px; grid-template-columns: 60px 1fr; }
  .perso-step__num { font-size: 60px; }
}
@media (max-width: 768px) {
  .perso-step { grid-template-columns: 1fr; }
  .perso-step--alt { grid-template-columns: 1fr; }
  .perso-step--alt .perso-step__visual { order: 0; }
  .perso-step__visual { min-height: 52vw; }
  .perso-step__body { grid-template-columns: 52px 1fr; padding: 28px 20px; }
  .perso-step__num { font-size: 48px; }
  .perso-step__desc { max-width: 100%; }
}

/* ==============================================
   STEPS (personnalisation)
============================================== */
.steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink-20);
  border-left: 1px solid var(--ink-20);
  margin-top: 60px;
}
.step-card {
  border-right: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  padding: 52px 44px;
}
.step-card__number {
  display: block;
  font-size: 72px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(44, 44, 44, 0.1);
  margin-bottom: 20px;
}
.step-card h3 {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.step-card p {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}
.step-card--featured {
  background: var(--paper-2);
  position: relative;
}
.step-card__badge {
  display: inline-block;
  margin-top: 20px;
  padding: 4px 14px;
  border: 1px solid var(--ink-20);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink-20);
  border-left: 1px solid var(--ink-20);
  margin-top: 0;
}
.trust-item {
  border-right: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--caramel);
}
.trust-item span {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--ink-60);
}

@media (max-width: 768px) {
  .steps__grid { grid-template-columns: 1fr; }
  .step-card { padding: 36px 24px; }
  .step-card__number { font-size: 48px; }
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 20px 20px; }
}
@media (max-width: 480px) { .trust-strip { grid-template-columns: 1fr; } }


/* ==============================================
   OPTIONS GRID (personnalisation)
============================================== */
.options__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 60px;
}
.option-card {
  padding: 44px 36px;
  background: var(--paper-2);
  border: 1px solid var(--ink-20);
}
.option-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--ink-60);
}
.option-card__icon svg { width: 22px; height: 22px; }
.option-card h4 {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.option-card p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}
@media (max-width: 1024px) { .options__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .options__grid { grid-template-columns: 1fr; } }


/* ==============================================
   QUOTE BLOCK
============================================== */
.quote-block {
  padding: 96px 52px;
  background: var(--paper-2);
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  text-align: center;
}
.quote-block__text {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 680px;
  margin: 0 auto 20px;
}
.quote-block__attr {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
}
@media (max-width: 768px) { .quote-block { padding: 64px 20px; } }


/* ==============================================
   VALUES GRID (à propos)
============================================== */
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-20);
  border-left: 1px solid var(--ink-20);
  margin-top: 60px;
}
.value-card {
  border-right: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  padding: 52px 44px;
}
.value-card h3 {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
  color: var(--ink);
}
.value-card p {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--ink-60);
}
@media (max-width: 768px) {
  .values__grid { grid-template-columns: 1fr; }
  .value-card { padding: 36px 24px; }
}

/* ---- Grille "Ce qui nous guide" — texte/image en damier (a-propos.html) ---- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 60px;
}
.guide-cell--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 40px;
}
.guide-cell__title {
  font-family: var(--heading);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.15;
  margin-bottom: 20px;
}
.guide-cell__text {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.82;
  color: var(--ink-60);
  max-width: 320px;
}
.guide-cell--image { overflow: hidden; }
.guide-cell--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .guide-grid { grid-template-columns: 1fr; }
  .guide-cell--text { padding: 40px 24px; }
  .guide-cell--image { aspect-ratio: 4 / 3; }
}


/* ==============================================
   LOCATION (à propos)
============================================== */
.location-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.location-block__title {
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.location-block__body {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: 14px;
}
.location-block__links { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.location-block__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s;
}
.location-block__link:hover { opacity: 0.6; }
.location-block__link svg { width: 16px; height: 16px; flex-shrink: 0; }
.location-box {
  padding: 52px 44px;
  background: var(--paper-2);
  border: 1px solid var(--ink-20);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.location-box__label {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.location-box__value {
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
}
.location-box__sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-60);
}
@media (max-width: 768px) {
  .location-block { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .location-box { padding: 32px 24px; }
}


/* ==============================================
   FORM (contact / personnalisation)
============================================== */
.form-section {
  padding: 88px 52px;
  background: var(--paper);
}
.order-page .form-section { padding-top: 40px; }
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.contact__sidebar {}
.contact__sidebar--photo {
  position: sticky;
  top: 96px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.contact__sidebar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact__sidebar-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--ink-20);
}
.contact__sidebar-item:first-child { border-top: 1px solid var(--ink-20); }
.contact__sidebar-label {
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-60);
  display: block;
  margin-bottom: 8px;
}
.contact__sidebar-value {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  transition: opacity 0.3s;
}
a.contact__sidebar-value:hover { opacity: 0.6; }
.contact__sidebar-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-60);
  margin-top: 4px;
  line-height: 1.6;
}
.contact__sidebar-box {
  margin-top: 32px;
  padding: 28px;
  background: var(--paper-2);
  border: 1px solid var(--ink-20);
}
.contact__sidebar-box p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
}
.contact__sidebar-box strong { font-weight: 400; color: var(--ink); }

.form { }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 0; }
.form__group { margin-bottom: 32px; }
.form__label {
  display: block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 10px;
}
.form__label .required { color: #965F36; margin-left: 2px; }
.form__input,
.form__textarea,
.form__select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-20);
  padding: 10px 0 12px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.3s;
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus { border-bottom-color: var(--ink); }
.form__input::placeholder,
.form__textarea::placeholder { color: var(--ink-60); font-weight: 300; }
.form__textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.form__select { cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C2C2C' stroke-width='1' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 24px; }
.form__helper { display: block; font-size: 11px; font-weight: 300; color: var(--ink-60); margin-top: 6px; }
.form__error { display: none; font-size: 11px; color: #C0392B; margin-top: 5px; font-weight: 300; }
.form__group.has-error .form__error { display: block; }
.form__group.has-error .form__input,
.form__group.has-error .form__textarea,
.form__group.has-error .form__select { border-bottom-color: #C0392B; }

.form__file { margin-top: 4px; }
.form__file input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.form__file label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border: 1px dashed var(--ink-20);
  cursor: pointer;
  transition: border-color 0.3s;
}
.form__file label:hover { border-color: var(--ink); }
.form__file label svg { width: 18px; height: 18px; color: var(--ink-60); flex-shrink: 0; }
.form__file-text { font-size: 13px; font-weight: 300; color: var(--ink-60); }
.form__file-subtext { font-size: 11px; font-weight: 300; color: rgba(26,24,22,0.35); margin-left: auto; flex-shrink: 0; }

.form__submit { margin-top: 8px; }
.form__meta { font-size: 11px; font-weight: 300; color: var(--ink-60); margin-top: 12px; }

.form__success {
  display: none;
  text-align: center;
  padding: 60px 40px;
  border: 1px solid var(--ink-20);
}
.form__success.visible { display: block; }
.form__success svg { width: 40px; height: 40px; color: #965F36; margin: 0 auto 20px; display: block; }
.form__success h3 { font-size: 22px; font-weight: 400; margin-bottom: 12px; }
.form__success p { font-size: 14px; font-weight: 300; line-height: 1.75; color: var(--ink-60); }

@media (max-width: 1024px) {
  .contact__layout { grid-template-columns: 1fr; gap: 48px; }
  .contact__sidebar--photo { position: static; aspect-ratio: 16 / 9; }
}
@media (max-width: 768px) {
  .form-section { padding: 64px 20px; }
  .form__row { grid-template-columns: 1fr; }
}


/* ================================================
   MOBILE — Direction Artistique Dragée Paris
================================================ */

@media (max-width: 1100px) and (min-width: 769px) {
  .header--inner { background: rgba(243,236,230,0.98); }
}
@media (max-width: 768px) {
  /* Header opaque sur pages internes et après scroll — transparent sur le hero d'accueil */
  .header--inner,
  .header.scrolled {
    background: var(--paper) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: env(safe-area-inset-top, 0px);
    z-index: 200;
  }
  .header__safe-area { display: none !important; }
}
@media (max-width: 480px) {
}

/* FAB — bouton flottant mobile "Lancer ma création" */
.fab {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--caramel);
  color: var(--blanc);
  box-shadow: 0 8px 24px rgba(150, 95, 54, 0.4);
  transition: background 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}
.fab svg { width: 24px; height: 24px; }
.fab:hover,
.fab:active {
  background: #a07a5a;
  transform: scale(1.06);
  box-shadow: 0 10px 28px rgba(150, 95, 54, 0.48);
}


@media (max-width: 768px) {
  .band { display: none; }
}

@media (max-width: 768px) {
  .hero { min-height: 88dvh; margin-top: 0; }
  .hero__bg img { object-position: center 25%; }
  .hero__content {
    min-height: 88dvh;
    padding: env(safe-area-inset-top, 0px) 28px 48px;
    text-align: center;
    align-items: center;
    justify-content: flex-end;
  }
  .hero__title-main { max-width: 100%; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__arrow { display: none; }
}
@media (max-width: 480px) {
  .hero { min-height: 85dvh; margin-top: 0; }
  .hero__content { min-height: 85dvh; padding: env(safe-area-inset-top, 0px) 24px 44px; }
}

@media (max-width: 768px) {
  .collections__intro { margin-bottom: 48px; }
  .collections__grid { gap: 20px; }
  .collections__grid--single { max-width: 100%; }
  .col-item__label { font-size: 12px; margin-top: 10px; }
}
@media (max-width: 480px) {
  .collections__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .artisan__content { order: 1; }
  .artisan__visual  { order: 2; }
  .artisan__visual video { width: 100%; max-height: 56vw; object-fit: cover; display: block; }
}
@media (max-width: 768px) {
  .artisan__content .section-title { font-size: 22px; white-space: normal; }
  .artisan__content .section-sub   { max-width: 100%; font-size: 13px; }
  .artisan__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .artisan__cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 768px) {
  .btn { padding: 15px 24px; min-height: 48px; }
  .btn-arrow { font-size: 12px; }
}

/* Gallery — contrainte de hauteur desktop */
.gallery {
  overflow: hidden;
  max-height: 500px;
  min-height: 260px;
  border-top: 1px solid var(--ink-20);
}
.gallery__item {
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s var(--ease);
}
.gallery__item:hover img { transform: scale(1.02); }
@media (max-width: 768px) {
  .gallery { max-height: none; min-height: 0; }
  .gallery__item { height: auto; }
  .gallery__item img { aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
  .gallery--about { display: none; }
}

@media (max-width: 768px) {
  .faq__question { padding: 20px 0; font-size: 13.5px; }
  .faq__answer-inner { font-size: 13px; line-height: 1.75; }
}

@media (max-width: 600px) {
  .footer__inner { gap: 36px; }
  .footer__tagline { max-width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px; }
}
@media (max-width: 480px) {
  .footer__inner { padding: 48px 20px; }
}

@media (max-width: 768px) {
  .gallery-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 24px; padding-right: 0; gap: 8px; }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .filter-btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); padding: 0 20px 48px; }
}

@media (max-width: 768px) {
  .page-intro__visual img { min-height: 52vw; }
  .page-intro__sub { font-size: 13px; line-height: 1.7; }
}
@media (max-width: 480px) {
  .page-intro { padding: 88px 20px 32px; }
  .page-intro__title { font-size: 36px; }
  .page-intro__visual img { min-height: 56vw; }
}

@media (max-width: 480px) {
  .step-card { padding: 28px 20px; }
  .step-card__number { font-size: 40px; margin-bottom: 14px; }
  .step-card h3 { font-size: 16px; }
}

@media (max-width: 480px) {
  .option-card { padding: 32px 24px; }
}

@media (max-width: 768px) {
  .quote-block { padding: 64px 24px; }
  .quote-block__text { font-size: clamp(20px, 5.5vw, 32px); }
}

@media (max-width: 768px) {
  .values__grid { gap: 0; }
}

@media (max-width: 768px) {
  .location-block { gap: 32px; }
}

@media (max-width: 768px) {
  .form__input, .form__textarea, .form__select { font-size: 16px; padding: 12px 0 14px; }
  .form__label { font-size: 9.5px; margin-bottom: 8px; }
  .form__group { margin-bottom: 28px; }
  .form__file label { padding: 18px 16px; }
}

@media (max-width: 768px) {
  .contact__layout { gap: 36px; }
  .contact__sidebar-box { padding: 20px; }
}

@media (max-width: 480px) {
  .section-title { font-size: clamp(28px, 8vw, 36px); }
  .eyebrow { font-size: 9px; }
}

@media (max-width: 480px) {
  .garantie-item__icon { width: 34px; height: 34px; margin-bottom: 16px; }
  .garantie-item__title { font-size: 14px; }
  .garantie-item__desc { font-size: 12px; }
}

@media (max-width: 1100px) and (min-width: 769px) {
  .header.scrolled { background: rgba(243, 236, 230, 0.96); }
}

/* ================================================
   RESPONSIVE COMPLÉMENTAIRE
================================================ */

@media (max-width: 768px) {
  .filter-toggle { min-height: 44px; }
}

@media (max-width: 768px) {
  .carousel-arrow { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .cta-center__btns { flex-direction: column; align-items: center; }
  .cta-center__btns .btn { width: 100%; max-width: 320px; justify-content: center; }
  .cta-center__sub { font-size: 13px; }
}

@media (max-width: 600px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { padding: 14px 16px; }
  .newsletter-form button { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 14px 16px; text-align: left; }
}

@media (max-width: 480px) {
  .form__success { padding: 40px 20px; }
  .form__file-subtext { display: none; }
  .contact__sidebar-box { padding: 16px; }
}

@media (max-width: 768px) {
  .artisan__ghost-num { display: none; }
}

@media (max-width: 640px) {
  .duo-carousel-wrap { padding: 28px 20px 40px; }
  .col-item__label { font-size: 11px; margin-top: 8px; }
}


/* ================================================
   BOUTON MOBILE FLOTTANT "Lancer ma création"
================================================ */
.mobile-cta { display: none; }

/* ================================================
   WIZARD — "Lancer ma création" gamifié
================================================ */
.wizard-page { background: var(--paper); min-height: 100dvh; }

.wizard-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 52px 100px;
}

/* Progress bar */
.wizard__bar-track {
  width: 100%;
  height: 1px;
  background: var(--ink-20);
  margin-bottom: 48px;
  position: relative;
}
.wizard__bar-fill {
  position: absolute;
  left: 0; top: 0; height: 1px;
  background: var(--caramel);
  transition: width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Step indicator */
.wizard__meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
.wizard__step-label {
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--caramel);
}
.wizard__step-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 8px;
}
.wizard__step-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.65;
  margin-bottom: 40px;
}

/* Panels */
.wizard__panel { display: none; }
.wizard__panel.active {
  display: block;
  animation: wizardIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.wizard__panel.leaving {
  animation: wizardOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes wizardIn {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wizardOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}

/* Event cards grid */
.wizard__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 40px;
}
.wizard__card {
  position: relative;
  cursor: pointer;
}
.wizard__card input[type="radio"],
.wizard__card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.wizard__card-inner {
  border: 1px solid var(--ink-20);
  padding: 22px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
  background: var(--paper);
  user-select: none;
}
.wizard__card-inner:hover { border-color: rgba(26,24,22,0.35); background: var(--paper-2); }
.wizard__card input:checked + .wizard__card-inner {
  border-color: var(--caramel);
  background: rgba(150, 95, 54, 0.06);
  box-shadow: inset 0 0 0 1px var(--caramel);
}
.wizard__card-icon {
  width: 28px; height: 28px;
  color: var(--caramel);
  flex-shrink: 0;
}
.wizard__card-icon svg { width: 100%; height: 100%; }
.wizard__card-name {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.wizard__card-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 18px; height: 18px;
  border: 1px solid var(--ink-20);
  border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.25s, background 0.25s;
  pointer-events: none;
}
.wizard__card input:checked ~ .wizard__card-check {
  background: var(--caramel);
  border-color: var(--caramel);
}
.wizard__card input:checked ~ .wizard__card-check::after {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blanc);
}

/* Quantity cards */
.wizard__qty-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  margin-bottom: 40px;
}
.wizard__qty-card { height: 100%; min-width: 0; }
.wizard__qty-card .wizard__card-inner {
  height: 100%;
  min-width: 0;
  padding: 28px 24px;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}
.wizard__qty-num {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ink);
  flex-shrink: 0;
}
.wizard__qty-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wizard__qty-label { font-size: 12px; font-weight: 400; color: var(--ink); }
.wizard__qty-sub { font-size: 11px; font-weight: 300; color: var(--ink-60); line-height: 1.5; }

/* Date step */
.wizard__date-wrap {
  margin-bottom: 40px;
}
.wizard__date-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-20);
  padding: 12px 0 14px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: border-color 0.3s;
}
.wizard__date-input:focus { border-bottom-color: var(--caramel); }
.wizard__date-hint {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-60);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wizard__date-hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--caramel); }
.wizard__skip-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-60);
  letter-spacing: 0.04em;
  cursor: pointer;
  border-bottom: 1px solid var(--ink-20);
  transition: color 0.25s;
}
.wizard__skip-link:hover { color: var(--ink); }

/* Colors step */
.wizard__colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 40px;
}
.wizard__color-item { position: relative; cursor: pointer; }
.wizard__color-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.wizard__color-swatch {
  border: 2px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
}
.wizard__color-swatch:hover { transform: scale(1.07); }
.wizard__color-swatch-bg {
  height: 48px;
  display: block;
  border: 1px solid var(--ink-20);
}
.wizard__color-swatch-name {
  display: block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizard__color-item input:checked + .wizard__color-swatch {
  border-color: var(--caramel);
  border-radius: 1px;
}
.wizard__color-item input:checked + .wizard__color-swatch .wizard__color-swatch-bg {
  border-color: var(--caramel);
}

/* Contact form (étape 5) */
.wizard__form { margin-bottom: 40px; }
.wizard__field { margin-bottom: 28px; }
.wizard__label {
  display: block;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 10px;
}
.wizard__label .req { color: var(--caramel); margin-left: 2px; }
.wizard__input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-20);
  padding: 10px 0 12px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  transition: border-color 0.3s;
}
.wizard__input:focus { border-bottom-color: var(--caramel); }
.wizard__input::placeholder { color: var(--ink-60); }
.wizard__input.error { border-bottom-color: #C0392B; }
.wizard__textarea {
  border: 1px solid var(--ink-20);
  padding: 12px 14px;
  resize: vertical;
  min-height: 84px;
  line-height: 1.7;
  display: block;
}
.wizard__textarea:focus { border-color: var(--caramel); border-bottom-color: var(--caramel); }
.wizard__free-text {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-20);
}
.wizard__file-upload { margin-top: 24px; }
.wizard__file-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px dashed var(--ink-20);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft), color 0.25s;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-60);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}
.wizard__file-btn:hover {
  border-color: var(--caramel);
  color: var(--ink);
  background: rgba(150, 95, 54, 0.04);
}
.wizard__file-btn.has-file {
  border-color: rgba(44,44,44,0.3);
  border-style: solid;
  color: var(--ink);
}
.wizard__file-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: color 0.25s;
}
.wizard__file-btn:hover svg,
.wizard__file-btn.has-file svg { color: var(--caramel); }
.wizard__field-error {
  display: none;
  font-size: 11px;
  color: #C0392B;
  margin-top: 5px;
}
.wizard__field.has-error .wizard__field-error { display: block; }
.wizard__field.has-error .wizard__input { border-bottom-color: #C0392B; }

/* Summary display */
.wizard__summary {
  background: var(--paper-2);
  border: 1px solid var(--ink-20);
  padding: 24px 28px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wizard__summary-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  font-weight: 300;
}
.wizard__summary-key {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-60);
  min-width: 100px;
  flex-shrink: 0;
}
.wizard__summary-val { color: var(--ink); }

/* Navigation buttons */
.wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--ink-20);
  gap: 16px;
}
.wizard__btn-back {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.25s;
  min-height: 44px;
  padding: 0;
}
.wizard__btn-back:hover { color: var(--ink); }
.wizard__btn-back[hidden] { visibility: hidden; pointer-events: none; }
.wizard__btn-next {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  background: #965F36;
  border: 1px solid #965F36;
  padding: 14px 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  transition: background 0.3s, box-shadow 0.3s;
}
.wizard__btn-next span { display: inline-block; transition: transform 0.3s var(--ease); }
.wizard__btn-next:hover {
  background: #7A4D27;
  border-color: #7A4D27;
  box-shadow: 0 4px 18px rgba(150, 95, 54, 0.35);
}
.wizard__btn-next:hover span { transform: translateX(4px); }
.wizard__btn-next:disabled { opacity: 0.4; cursor: default; }

/* Success screen */
.wizard__success {
  text-align: center;
  padding: 60px 0;
  display: none;
}
.wizard__success.visible { display: block; animation: wizardIn 0.5s var(--ease) both; }
.wizard__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  color: var(--caramel);
}
.wizard__success-icon svg { width: 100%; height: 100%; }
.wizard__success h2 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 16px;
}
.wizard__success p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  max-width: 420px;
  margin: 0 auto 32px;
}

@media (max-width: 768px) {
  .wizard-wrap { padding: 108px 20px 80px; }
  .wizard__bar-track { margin-bottom: 32px; }
  .wizard__step-sub { margin-bottom: 28px; }
  .wizard__cards { grid-template-columns: repeat(2, 1fr); }
  .wizard__qty-cards { grid-template-columns: 1fr; }
  .wizard__colors { grid-template-columns: repeat(4, 1fr); }
  .wizard__date-input { font-size: 24px; }
}
@media (max-width: 480px) {
  .wizard__cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wizard__colors { grid-template-columns: repeat(3, 1fr); }
  .wizard__card-inner { padding: 16px 38px 16px 14px; }
  .wizard__qty-card .wizard__card-inner { padding: 18px 38px 18px 16px; }
}

@media (max-width: 1100px) {
  .mobile-cta {
    display: flex;
    align-items: center;
    gap: 9px;
    position: fixed;
    bottom: 24px;
    left: 20px;
    z-index: 45;
    background: #965F36;
    color: var(--blanc);
    padding: 13px 18px;
    font-family: var(--font);
    font-size: 10.5px;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(122, 106, 82, 0.35);
    transition: background 0.3s var(--ease-soft),
                box-shadow 0.3s var(--ease-soft),
                transform 0.3s var(--ease-soft),
                opacity 0.3s var(--ease-soft);
  }
  .mobile-cta svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }
  .mobile-cta:hover  {
    background: #7A4D27;
    box-shadow: 0 6px 28px rgba(150, 95, 54, 0.5);
    transform: translateY(-2px);
  }
  .mobile-cta:active { transform: scale(0.97); }
  .mobile-cta { animation: ctaPulse 1.8s ease-out 2.4s 1; }
}


/* ==============================================
   MICRO-INTERACTIONS & HOVER ANIMATIONS
============================================== */

/* Garantie items — subtle lift + icon scale */
.garantie-item { transition: transform 0.3s var(--ease-soft); }
.garantie-item__icon { transition: transform 0.35s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) {
  .garantie-item:hover { transform: translateY(-4px); }
  .garantie-item:hover .garantie-item__icon { transform: scale(1.14); }
}

/* Step cards — heading tint (grid-border layout prevents lift) */
.step-card { transition: background 0.3s var(--ease-soft); }
.step-card:not(.step-card--featured):hover { background: var(--paper-2); }
.step-card h3 { transition: color 0.3s var(--ease-soft); }
.step-card:hover h3 { color: var(--caramel); }

/* Option cards — icon tint + border brightening */
.option-card { transition: background 0.25s var(--ease-soft), border-color 0.25s; }
.option-card:hover { background: var(--paper); border-color: rgba(44,44,44,0.22); }
.option-card__icon { transition: color 0.3s var(--ease-soft); }
.option-card:hover .option-card__icon { color: var(--caramel); }

/* Value cards — background tint + h4 tint */
.value-card { transition: background 0.3s var(--ease-soft); }
.value-card:hover { background: var(--paper-2); }
.value-card h3 { transition: color 0.3s var(--ease-soft); }
.value-card:hover h3 { color: var(--caramel); }

/* Trust strip — subtle row highlight */
.trust-item { transition: background 0.25s var(--ease-soft); }
.trust-item:hover { background: rgba(44, 44, 44, 0.025); }

/* Filter buttons — caramel underline on active/hover */
.filter-btn { position: relative; }
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--caramel);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-soft);
}
.filter-btn.active::after,
.filter-btn:hover::after { transform: scaleX(1); }

/* Location links — icon nudge replaces opacity dim */
.location-block__link { transition: color 0.25s var(--ease-soft), opacity 0.25s; }
.location-block__link svg { transition: transform 0.25s var(--ease-soft); }
.location-block__link:hover { opacity: 1; color: var(--caramel); }
.location-block__link:hover svg { transform: translateX(4px); }

/* Mobile CTA entrance pulse (fires once, 2.4 s after load) */
@keyframes ctaPulse {
  0%, 60%, 100% { box-shadow: 0 4px 24px rgba(150, 95, 54, 0.35); transform: translateY(0); }
  80% { box-shadow: 0 10px 32px rgba(150, 95, 54, 0.52); transform: translateY(-4px); }
}

/* ================================================
   RESPONSIVE — PETITS ÉCRANS (≤ 480px / ≤ 390px)
================================================ */

@media (max-width: 480px) {
  .section-page { padding: 48px 20px; }
  .carousel-arrow { width: 28px; height: 28px; }
  .carousel-arrow--prev { left: 6px; }
  .carousel-arrow--next { right: 6px; }
  .wizard-wrap { padding: 88px 16px 60px; }
  .collections__intro { margin-bottom: 56px; }
  .artisan { padding: 48px 20px; }
  .cta-center { padding: 56px 20px; }
}

@media (max-width: 390px) {
  .hero__title { font-size: 36px; line-height: 1.08; }
  .hero__sub    { font-size: 11.5px; }
  .page-intro__title  { font-size: 30px; }
}


/* ================================================
   CEDRIC-CATS — Image #8 (grand titre + 3 photos label-dessus)
================================================ */
.cedric-cats {
  padding: 80px 52px 0;
  background: var(--paper);
}
.cedric-cats__title {
  font-family: var(--heading);
  font-size: clamp(26px, 3.2vw, 50px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  text-align: center;
  line-height: 0.96;
  margin-bottom: 56px;
}
.cedric-cats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.cedric-cat-item {
  display: block;
  text-decoration: none;
  color: inherit;
}
.cedric-cat-item__label {
  display: block;
  text-align: center;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 20px;
  transition: color 0.3s;
}
.cedric-cat-item:hover .cedric-cat-item__label { color: var(--caramel); }
.cedric-cat-item__img {
  overflow: hidden;
}
.cedric-cat-item__img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  filter: brightness(0.97) saturate(0.88);
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease-soft);
}
.cedric-cat-item:hover .cedric-cat-item__img img {
  transform: scale(1.04);
  filter: brightness(1.02) saturate(1.0);
}

@media (max-width: 768px) {
  .cedric-cats { padding: 64px 20px 0; }
  .cedric-cats__title { margin-bottom: 40px; }
  .cedric-cats__grid { grid-template-columns: 1fr; gap: 2px; }
  .cedric-cat-item__img img { aspect-ratio: 3 / 2; }
}


/* ================================================
   HERO CONTENT — eyebrow + grand titre (Image #5)
================================================ */
.hero__eyebrow {
  font-style: normal;
  font-weight: 300;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(243, 236, 230);
  display: block;
  margin-bottom: 20px;
  animation: fadeUp 1.0s var(--ease) 0.3s both;
}
.hero__title-main {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(28px, 3.7vw, 51px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: rgb(243, 236, 230);
  max-width: 780px;
  animation: fadeUp 1.1s var(--ease) 0.5s both;
}
@media (max-width: 768px) {
  .hero__title-main { font-size: 50px; letter-spacing: -0.055em; }
}
@media (max-width: 480px) {
  .hero__title-main { font-size: 44px; letter-spacing: -0.05em; }
}


/* ================================================
   CEDRIC-SPLIT — Image #1 (grande image gauche, texte droit)
================================================ */
.cedric-split {
  display: grid;
  grid-template-columns: 40% 1fr;
  background: var(--paper);
  min-height: 460px;
}
.cedric-split__visual {
  overflow: hidden;
  padding: 48px 24px 48px 52px;
}
.cedric-split__visual img,
.cedric-split__visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.cedric-split__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 48px 64px 60px 52px;
}
.cedric-split__title {
  font-family: var(--heading);
  font-size: clamp(25px, 2.8vw, 44px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.08;
  margin-bottom: 36px;
}
.cedric-split--savoir-faire .cedric-split__title {
  letter-spacing: -0.05em;
}
.cedric-split__text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-60);
  max-width: 560px;
}
.cedric-split__text + .cedric-split__text { margin-top: 16px; }
.cedric-split__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
  border-bottom: 1px solid var(--caramel);
  padding-bottom: 4px;
  transition: opacity 0.3s;
  width: fit-content;
}
.cedric-split__cta:hover { opacity: 0.65; }

@media (max-width: 1024px) {
  .cedric-split { grid-template-columns: 1fr; min-height: auto; }
  .cedric-split__visual { height: 55vw; max-height: 400px; padding: 28px 20px; }
  .cedric-split__body { padding: 52px 32px; }
}
@media (max-width: 768px) {
  .cedric-split__body { padding: 44px 20px 52px; }
  .cedric-split__text { max-width: 100%; }
}


/* ================================================
   REASSURANCES — Image #2 (3 cols sous banner)
================================================ */
.reassurances {
  background: var(--paper);
  padding: 52px 52px;
  border-top: 1px solid var(--ink-20);
}
.reassurances__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.reassurance-item {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-60);
}
.reassurance-item strong {
  font-weight: 500;
  color: var(--ink);
}
@media (max-width: 768px) {
  .reassurances { padding: 40px 20px; }
  .reassurances__grid { grid-template-columns: 1fr; gap: 20px; }
}


/* ================================================
   CEDRIC-FILTER — Image #3 (barre filtre horizontale slim)
================================================ */
.cedric-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 52px;
  background: var(--paper);
  min-height: 52px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.cedric-filter__left {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: color 0.2s;
}
.cedric-filter__left:hover { color: var(--ink-60); }
.cedric-filter__tabs {
  display: flex;
  gap: 24px;
  list-style: none;
}
.cedric-filter__tab {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 16px 0 2px;
  min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease-soft), border-color 0.2s;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: var(--font);
}
.cedric-filter__tab:hover { color: var(--ink-60); }
.cedric-filter__tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cedric-filter__right {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  background: none;
  font-family: var(--font);
  padding: 0;
  transition: color 0.2s;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cedric-filter__right:hover { color: var(--ink-60); }

/* Sous-filtres (ex. Premiers instants > Naissance / Gender reveal / Baby shower) */
.cedric-filter__subtabs {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 52px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink-20);
}
.cedric-filter__subtabs.is-visible { display: flex; }
.cedric-filter__subtab {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--paper);
  border: 1px solid var(--ink-20);
  border-radius: 100px;
  padding: 7px 16px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cedric-filter__subtab:hover { color: var(--ink); border-color: var(--ink-60); }
.cedric-filter__subtab.active {
  background: var(--ink);
  color: var(--blanc);
  border-color: var(--ink);
}

@media (max-width: 900px) {
  .cedric-filter { padding: 0 20px; }
  .cedric-filter__left { display: none; }
  .cedric-filter__tabs { gap: 20px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .cedric-filter__tabs::-webkit-scrollbar { display: none; }
  .cedric-filter__right { display: none; }
  .cedric-filter__subtabs { padding: 12px 20px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cedric-filter__subtabs::-webkit-scrollbar { display: none; }
  .cedric-filter__subtab { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 768px) {
  .cedric-filter {
    padding: 0;
    gap: 0;
  }
  .cedric-filter__right {
    display: flex;
    align-items: center;
    order: -1;
    flex-shrink: 0;
    padding: 0 14px 0 20px;
    min-height: 44px;
    border-right: 1px solid rgba(44, 44, 44, 0.12);
  }
  .cedric-filter__tabs {
    gap: 0;
    padding: 0 16px;
  }
  .cedric-filter__tab {
    padding: 14px 12px;
    white-space: nowrap;
    position: relative;
    font-size: 11px;
  }
  .cedric-filter__tab:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 11px;
    width: 1px;
    background: var(--ink);
    opacity: 0.15;
  }
}


/* ================================================
   VIEW TOGGLE — Grille / Liste (mobile only)
================================================ */
.view-toggle-bar { display: none; }

@media (max-width: 768px) {
  .view-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 6px 16px;
    background: var(--paper);
    border-bottom: 1px solid rgba(44,44,44,0.07);
  }
  .view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: rgba(44,44,44,0.35);
    cursor: pointer;
    border-radius: 5px;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    touch-action: manipulation;
  }
  .view-toggle__btn.is-active {
    color: var(--caramel);
    background: rgba(150,95,54,0.08);
  }
  .view-toggle__btn:hover:not(.is-active) {
    color: rgba(44,44,44,0.65);
  }
  .product-grid--list {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   CEDRIC-SECTION-HEADER — Image #4 (titre caramel + "TOUT VOIR")
================================================ */
.cedric-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 72px 52px 40px;
  background: var(--paper);
}
.cedric-section-header__title {
  font-family: var(--heading);
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--caramel);
}
.cedric-section-header__link {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
  border-bottom: 1px solid var(--caramel);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.25s;
  flex-shrink: 0;
}
.cedric-section-header__link:hover { opacity: 0.65; }

@media (max-width: 768px) {
  .cedric-section-header { padding: 48px 20px 28px; }
}


/* ================================================
   EDITORIAL-3COL — Image #6 (texte / image / texte)
================================================ */
.editorial-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 620px;
  background: var(--paper);
  padding: 80px 52px;
  gap: 52px;
  align-items: center;
}
.editorial-3col__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.editorial-3col__heading {
  font-family: var(--heading);
  font-size: clamp(18px, 2vw, 32px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.1;
}
.editorial-3col__body {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
}
.editorial-3col__visual {
  overflow: hidden;
  align-self: stretch;
  min-height: 480px;
}
.editorial-3col__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1024px) {
  .editorial-3col {
    grid-template-columns: 1fr 1fr;
    padding: 60px 32px;
    gap: 36px;
  }
  .editorial-3col__text:last-child { grid-column: 1 / -1; }
  .editorial-3col__visual { min-height: 360px; }
}
@media (max-width: 768px) {
  .editorial-3col { grid-template-columns: 1fr; padding: 48px 20px; min-height: auto; }
  .editorial-3col__visual { min-height: 280px; grid-row: 1; }
  .editorial-3col__text:last-child { grid-column: 1; }
}


/* ================================================
   CEDRIC-COLLECTION — Image #7 (grand titre centré caramel)
================================================ */
.cedric-collection {
  text-align: center;
  padding: 80px 52px;
  background: var(--paper);
  border-top: 1px solid var(--ink-20);
}
.cedric-collection__title {
  font-family: var(--heading);
  font-size: clamp(36px, 5.2vw, 84px);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.0;
  margin-bottom: 24px;
}
.cedric-collection__sub {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cedric-collection { padding: 56px 20px; }
  .cedric-collection__title { letter-spacing: 0.04em; }
}


/* ================================================
   CEDRIC-PRODUCTS — Section "Les Incontournables" (style cards Cédric)
================================================ */
.cedric-products {
  padding: 80px 52px 88px;
  background: var(--paper);
  border-top: 1px solid var(--ink-20);
}
.cedric-products__header {
  text-align: center;
  margin-bottom: 52px;
}
.cedric-products__title {
  font-family: var(--heading);
  font-size: clamp(32px, 5.2vw, 70px);
  font-weight: 400;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.0;
  margin-bottom: 16px;
}
.cedric-products__link {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--caramel);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--caramel);
  padding-bottom: 2px;
  transition: opacity 0.25s var(--ease-soft);
}
.cedric-products__link:hover { opacity: 0.65; }

.cedric-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

/* Carte produit individuelle */
.prod-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.prod-card__image {
  overflow: hidden;
}
.prod-card__image img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease-soft);
  filter: brightness(0.97) saturate(0.88);
}
.prod-card:hover .prod-card__image img {
  transform: scale(1.04);
  filter: brightness(1.02) saturate(1);
}
.prod-card__info {
  padding: 14px 0 24px;
}
.prod-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.prod-card__name {
  font-size: 12.5px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: 0.01em;
  line-height: 1.45;
}
.prod-card__weight {
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-60);
  flex-shrink: 0;
  white-space: nowrap;
}
.prod-card__price {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--caramel);
  margin-top: 5px;
}
.prod-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.prod-card__badge {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--ink-60);
  border: 1px solid var(--ink-20);
  border-radius: 100px;
  padding: 4px 12px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .cedric-products { padding: 64px 32px 72px; }
}
@media (max-width: 768px) {
  .cedric-products { padding: 56px 20px 64px; }
  .cedric-products__grid { grid-template-columns: 1fr; gap: 40px; }
  .prod-card__image img { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
  .cedric-products__grid { gap: 32px; }
}


/* ================================================
   COLLECTION PAGE — Dragées (style Cédric)
================================================ */

/* En-tête de la page collection */
.collection-header {
  padding: 148px 52px 64px;
  text-align: center;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-20);
}
.collection-header__title {
  font-family: var(--heading);
  font-size: clamp(1.6rem, 2.8vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.1;
  margin-bottom: 24px;
}
.collection-header__desc {
  font-size: clamp(0.78rem, 1.05vw, 0.875rem);
  font-weight: 300;
  color: var(--ink-60);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* Filtre sticky sous le header (pages collection) */
.collection-page .cedric-filter {
  top: 68px;
}

/* ---- Page légale (mentions-legales.html) ---- */
.legal-content {
  max-width: 760px;
  padding-top: 96px;
  padding-bottom: 96px;
}
.legal-content h1 {
  font-family: var(--heading);
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.15;
  margin-bottom: 40px;
}
.legal-content h2 {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 44px;
  margin-bottom: 14px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: 14px;
}
.legal-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
  list-style: disc;
}
.legal-content li {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.legal-content strong { font-weight: 500; color: var(--ink); }
.legal-content a { color: var(--caramel); text-decoration: underline; }
@media (max-width: 768px) {
  .legal-content { padding-top: calc(68px + env(safe-area-inset-top, 0px)); padding-bottom: 64px; }
}

/* Galerie plate (dragees.html, boutique sub-pages) */
.product-gallery {
  padding: 0;
}

/* Sections produit par catégorie */
.product-section {
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--ink-20);
}
.main--filter-first > .product-section { padding-top: 28px; }
.collection-header + .product-section { padding-top: 28px; }
.product-section:last-of-type {
  border-bottom: none;
}
.product-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 44px;
}
.product-section__title {
  font-family: var(--heading);
  font-size: clamp(1.6rem, 2.6vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--caramel);
}
.product-section__link {
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel);
  border-bottom: 1px solid var(--caramel);
  padding-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  transition: opacity 0.25s;
}
.product-section__link:hover { opacity: 0.65; }

/* Grille produits responsive */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Carte produit */
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  position: relative;
}
.product-card__media {
  position: relative;
  overflow: hidden;
}
.product-card__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease-soft);
  filter: brightness(0.97) saturate(0.88);
}
.product-card:hover .product-card__media img,
.product-card:active .product-card__media img {
  transform: scale(1.04);
  filter: brightness(1.02) saturate(1);
}
/* Boutique & Atelier (desktop) : format vertical, comme les Incontournables de la homepage */
@media (min-width: 769px) {
  #atelier-grid .product-card__media img,
  #boutique-grid .product-card__media img { aspect-ratio: 3 / 4; }
}
.product-card {
  transition: box-shadow 0.4s var(--ease-soft);
}
.product-card:hover,
.product-card:active {
  box-shadow: 0 8px 28px rgba(52, 34, 26, 0.09);
}

/* Badges */
.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
  font-family: var(--font);
}
.badge--in-stock {
  background: rgba(243, 236, 230, 0.92);
  color: var(--ink);
  border: 1px solid var(--ink-20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.badge--new {
  background: var(--caramel);
  color: var(--blanc);
}

.product-card__body {
  padding: 18px 16px 12px;
  flex: 1;
}
/* Ligne titre + poids côte à côte */
.product-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.product-card__title {
  font-family: 'Akkurat', sans-serif;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  color: rgb(82, 54, 42);
  line-height: 20px;
  letter-spacing: 0.01em;
}
.product-card__weight {
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-60);
  white-space: nowrap;
  flex-shrink: 0;
}
.product-card__price {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--caramel);
  margin-bottom: 2px;
}
/* Ancien meta — conservé pour compatibilité */
.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.product-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 18px;
}
.product-card__actions .btn {
  flex: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #52362A;
  background: transparent;
  border: 1px solid #52362A;
  border-radius: 5px;
  padding: 4px 12px;
  text-decoration: none;
  line-height: 1.5;
  cursor: default;
  pointer-events: none;
  transition: none;
}
.product-card__actions .btn--outline {
  background: transparent;
  color: rgb(82, 54, 42);
  border: 1px solid #836d63;
  border-radius: 12px;
  font-family: 'Akkurat', sans-serif;
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.2s;
}
.product-card__actions .btn--outline:hover {
  background: transparent;
  color: #836d63;
  border-color: #836d63;
  opacity: 0.65;
}

/* Non-sticky filter bar (boutique & atelier pages) */
.cedric-filter--flat {
  position: relative;
  top: 0 !important;
}
.collection-page .cedric-filter--flat {
  position: relative;
  top: 0 !important;
}
/* Compense le header fixe quand le filtre est en tête de page */
.main--filter-first {
  padding-top: 100px;
}
@media (max-width: 900px) {
  .main--filter-first {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
  }
}

/* Count + chevron inside filter left label */
.cedric-filter__count {
  color: var(--ink-60);
}
.cedric-filter__chevron {
  width: 10px;
  height: 7px;
  margin-left: 5px;
  vertical-align: middle;
  color: var(--ink-60);
}

/* Underline on filter right button */
.cedric-filter__right {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 900px) {
  .collection-page .cedric-filter { top: 56px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .collection-header { padding: 32px 20px 20px; }
  .product-section { padding: 16px 0 40px; }
  .product-section__header { margin-bottom: 20px; }
}
/* product-grid: 1 colonne géré par .product-grid--list via le toggle */


/* ================================================
   HEADER — Navigation desktop (désactivée — burger seul)
================================================ */

.header__desk-nav { display: none; }

.header__desk-nav-list {
  display: flex;
  list-style: none;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

.header__desk-nav-item { position: relative; }

.header__desk-nav-link {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc);
  transition: opacity 0.2s var(--ease-soft);
  white-space: nowrap;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.header.scrolled .header__desk-nav-link,
.header--inner .header__desk-nav-link { color: var(--ink); }
.header__desk-nav-link:hover { opacity: 0.55; }

/* Dropdown */
.header__desk-nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  min-width: 240px;
  background: rgba(243, 236, 230, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px 0;
  box-shadow: 0 8px 32px rgba(82, 54, 42, 0.14);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-soft),
              transform 0.18s var(--ease-soft),
              visibility 0.18s;
  z-index: 50;
}
.header__desk-nav-item--has-sub:hover .header__desk-nav-dropdown,
.header__desk-nav-item--has-sub:focus-within .header__desk-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.header__desk-nav-dropdown li a {
  display: block;
  padding: 10px 22px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: background-color 0.15s, padding-left 0.2s var(--ease-soft);
  text-decoration: none;
}
.header__desk-nav-dropdown li a:hover {
  background: rgba(82, 54, 42, 0.05);
  padding-left: 30px;
}





/* ================================================
   COLLECTION GRID — Pages principales boutique/atelier
================================================ */

.collection-grid {
  padding: 140px 0 80px;
  background: var(--paper);
}
.collection-grid .page-title {
  font-family: var(--heading);
  font-size: clamp(2rem, 4.5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 20px;
}
.collection-grid .page-description {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-60);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 56px;
}
.collection-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.collection-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.collection-card__image { overflow: hidden; }
.collection-card__image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.7s var(--ease-soft);
  filter: brightness(0.94) saturate(0.85);
}
.collection-card:hover .collection-card__image img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}
.collection-card__body { padding: 22px 0 32px; }
.collection-card__title {
  font-family: var(--heading);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 8px;
}
.collection-card__description {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.65;
}

.collection-grid__list--2col { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 640px) {
  .collection-grid__list--2col { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .collection-grid__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .collection-grid__list { grid-template-columns: 1fr; gap: 28px; }
  .collection-grid { padding: 110px 0 56px; }
  .collection-grid .page-description { margin-bottom: 36px; }
}


/* ================================================
   CATEGORY DIVIDER — Séparateur de sous-catégorie
================================================ */

.category-divider {
  padding: 56px 0 48px;
  background: var(--paper);
  border-top: 1px solid var(--ink-20);
  border-bottom: 1px solid var(--ink-20);
  margin-top: 72px;
}
.divider-title {
  font-family: var(--heading);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  margin-bottom: 14px;
}
.divider-description {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-60);
  max-width: 520px;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .category-divider { padding: 40px 0 36px; margin-top: 52px; }
}


/* ================================================
   BREADCRUMB — Fil d'Ariane
================================================ */

.breadcrumb {
  background: var(--paper);
  border-bottom: 1px solid var(--ink-20);
  padding-top: 96px;
}
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
  max-width: 1440px;
  margin: 0 auto;
  padding: 13px 52px;
}
.breadcrumb__item a {
  color: var(--ink);
  transition: color 0.2s;
  text-decoration: none;
}
.breadcrumb__item a:hover { color: var(--caramel); }
.breadcrumb__sep { color: var(--ink-60); }
.breadcrumb__item--current { color: var(--ink); }

@media (max-width: 768px) {
  .breadcrumb__list { padding: 12px 20px; }
}


/* ================================================
   MOBILE — Optimisations globales (≤ 768px)
================================================ */

@media (max-width: 768px) {

  /* Badges : hauteur naturelle, pas de min-height imposé */
  .product-card__actions .btn {
    min-height: auto;
    padding: 3px 8px;
    font-size: 12px;
  }

  /* Breadcrumb : ajuster le padding-top pour le header fixe */
  .breadcrumb { padding-top: calc(68px + env(safe-area-inset-top, 0px)); }

  /* Collection grid : 1 colonne systématique sur mobile */
  .collection-grid { padding: 88px 0 40px; }
  .collection-grid .page-description { max-width: 100%; }

  /* Drawer secondary : toujours visible */

  /* Cedric-split : réduire l'espace entre image et texte */
  .cedric-split__body { padding: 36px 20px 44px; }

  /* Section-page : réduire le padding vertical */
  .section-page { padding: 48px 20px; }

  /* Footer : espacements réduits */
  .footer__inner { padding: 48px 20px 32px; gap: 32px; }

  /* Valeurs et grilles éditoriales : 1 colonne */
  .values__grid { display: flex; flex-direction: column; gap: 24px; }

  /* Catégorie-divider (atelier sub-pages) */
  .category-divider { padding: 28px 20px 20px; }

  /* Formulaire contact : bouton plein largeur */
  .wizard__next { width: 100%; justify-content: center; }
}

@media (max-width: 640px) {

  /* Titres collection : adapter la taille au 390px */
  .collection-grid .page-title {
    font-size: clamp(1.8rem, 8vw, 2.6rem);
    letter-spacing: 0.01em;
  }
  .collection-header__title {
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.15;
  }

  /* product-grid: colonnes gérées par le toggle (.product-grid--list) */

  /* Cards collection : image ratio adapté */
  .collection-card__image img { aspect-ratio: 16 / 9; }

  /* Incontournables section : produits alignés */
  .col-item { width: 100%; }

  /* Hero texte : taille réduite */
  .hero__title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
}

/* ================================================
   CORPS DE TEXTE — Format global unifié
   normal / 400 / rgb(82,54,42) / 14px / lh 20px
================================================ */

/* Paragraphes et textes courants */
p,
li,
dd,
figcaption {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Sections intro & descriptions */
.section-intro__sub,
.page-intro__sub,
.page-description,
.collection-header__desc,
.collection-card__description,
.collections__intro-sub {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Sections éditoriales */
.cedric-split__text,
.editorial-3col__body,
.value-card p,
.artisan__text,
.about__text {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Produits & cartes */
.product-card__weight,
.badge,
.product-section__desc,
.category-divider__desc {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Footer */
.footer__tagline,
.footer__col p,
.footer__col a,
.footer__bottom {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

/* À propos — valeurs & localisation */
.location-block__body,
.location-box__sub,
.location-box__value,
.location-block__link {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* CTA sections & sous-titres */
.cta-center__sub,
.hero__sub,
.section-cta__sub,
.artisan__body {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Personnalisation & étapes */
.perso-step__text,
.option-card__desc,
.wizard__step-desc,
.perso-desc {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* FAQ */
.faq__answer p,
.faq__answer {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Mentions légales & texte long */
.mentions-content p,
.mentions-content li,
.legal-text p {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}

/* Drawer secondary */
.drawer__secondary a {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

/* Sous-liens drawer droit */
.drawer__sub-link {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
}

/* ========== FICHE PRODUIT (PDP) ========== */
.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  min-height: calc(100vh - 96px);
}
.pdp__gallery {
  position: sticky;
  top: 96px;
  margin-top: 96px;
  height: calc(100vh - 96px);
  overflow: hidden;
}
.pdp__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp__gallery--duo {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pdp__gallery--duo picture {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pdp__gallery--duo img {
  height: 100%;
}
.pdp__info {
  padding: 140px 64px 80px 60px;
  max-width: 560px;
}
.pdp__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.75;
  margin-bottom: 48px;
  transition: opacity 0.2s;
}
.pdp__back:hover { opacity: 1; }
.pdp__title {
  font-family: var(--heading);
  font-size: clamp(22px, 2.6vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  line-height: 1.1;
  margin-bottom: 8px;
}
.pdp__weight {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  margin-bottom: 28px;
}
.pdp__tagline {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 380px;
}
.pdp__qty-block {
  margin-bottom: 32px;
}
.pdp__qty-select {
  display: block;
  width: 100%;
  max-width: 320px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ink-20);
  padding: 10px 24px 12px 0;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C2C2C' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  transition: border-color 0.3s;
  margin-bottom: 16px;
}
.pdp__qty-select:focus { border-bottom-color: var(--ink); }
.pdp__price {
  font-family: var(--heading);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}
.pdp__price-unit {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-60);
  letter-spacing: 0.02em;
  margin-left: 6px;
}
.pdp__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: var(--border-radius--button);
  margin-bottom: 56px;
  transition: opacity 0.2s;
}
.pdp__cta:hover { opacity: 0.8; }

/* Accordéons */
.pdp__acc-item {
  border-bottom: 1px solid var(--ink-20);
}
.pdp__acc-item:first-of-type {
  border-top: 1px solid var(--ink-20);
}
.pdp__acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  width: 100%;
}
.pdp__acc-trigger::-webkit-details-marker { display: none; }
.pdp__acc-trigger::after {
  content: '+';
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 16px;
}
details[open] > .pdp__acc-trigger::after { content: '−'; }
.pdp__acc-body {
  font-size: 13px;
  line-height: 22px;
  color: var(--ink);
  padding: 0 0 24px;
  max-width: 400px;
}
.pdp__acc-body p { margin-bottom: 10px; }
.pdp__acc-body p:last-child { margin-bottom: 0; }
.pdp__acc-body ul { padding-left: 16px; margin: 0; }
.pdp__acc-body li { margin-bottom: 6px; }

/* Section produits associés */
.pdp-related {
  padding: 80px 52px 88px;
  border-top: 1px solid var(--ink-20);
  background: var(--paper);
}
.pdp-related__title {
  font-family: var(--heading);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--caramel);
  text-align: center;
  margin-bottom: 52px;
}
.pdp-related__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: relative; top: 0; height: 70vw; }
  .pdp__gallery--duo { height: auto; }
  .pdp__info { padding: 52px 40px; max-width: 100%; }
}
@media (max-width: 640px) {
  .pdp__gallery { height: 100vw; margin-top: calc(80px + env(safe-area-inset-top, 0px)); }
  .pdp__gallery--duo { height: auto; }
  .pdp__info { padding: 40px 20px; }
  .pdp-related { padding: 56px 20px 64px; }
  .pdp-related__grid { grid-template-columns: 1fr; gap: 32px; }
}


/* ==============================================
   ACCESSIBILITÉ — Mouvement réduit
   Coupe les mouvements (transform, slide, scale)
   mais conserve opacity et couleur (compréhension)
============================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Supprime les transitions de position/taille uniquement */
  .drawer,
  .drawer__content,
  .drawer__sub,
  .drawer__main-item,
  .drawer__sub-link,
  .garantie-item,
  .garantie-item__icon,
  .product-card,
  .product-card__media img,
  .hero__media,
  .hero__arrow svg,
  .filter-btn::after,
  .wizard__btn-next span {
    transition: opacity 0.15s, color 0.15s !important;
    animation: none !important;
  }
}

/* ==============================================
   PAGE MESSAGE — formulaire de contact simple
============================================== */
.msg-textarea { min-height: 160px; resize: vertical; }

.msg-form__footer {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.msg-form__note {
  flex: 1;
  font-size: 11px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.7;
  min-width: 200px;
}
.msg-form__submit {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc);
  background: #965F36;
  border: 1px solid #965F36;
  padding: 14px 36px;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  transition: background 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .msg-form__submit:hover {
    background: #7A4D27;
    border-color: #7A4D27;
    box-shadow: 0 4px 18px rgba(150, 95, 54, 0.35);
  }
}
.msg-form__submit:active { transform: scale(0.97); }

.contact__sidebar-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8F5B35;
  text-decoration: none;
  margin-top: 14px;
  transition: opacity 0.25s;
}
.contact__sidebar-link:hover { opacity: 0.65; }

@keyframes confirmIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes confirmPop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.msg-confirmation {
  padding: 48px 0;
  animation: confirmIn 0.6s var(--ease-soft) both;
}
.msg-confirmation__icon {
  width: 64px;
  height: 64px;
  color: #965F36;
  background: rgba(150, 95, 54, 0.09);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: confirmPop 0.5s 0.15s var(--ease) both;
}
.msg-confirmation__icon svg { width: 30px; height: 30px; }
.msg-confirmation__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 16px;
  line-height: 1.25;
}
.msg-confirmation__text {
  font-size: 15px;
  font-weight: 300;
  color: var(--ink-60);
  line-height: 1.75;
  max-width: 480px;
  margin: 0 0 32px;
}
.msg-confirmation__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink-20);
  padding: 13px 26px;
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  transition: background 0.4s var(--ease-soft), color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}
.msg-confirmation__back:hover { background: var(--ink); color: var(--blanc); border-color: var(--ink); }
.msg-confirmation__back .btn-arrow { transition: transform 0.45s var(--ease); }
.msg-confirmation__back:hover .btn-arrow { transform: translate(3px, -2px) scale(1.15); }


/* ==============================================
   LIGHTBOX
============================================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-soft);
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.lightbox__img {
  max-width: min(90vw, 900px);
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease-soft);
  user-select: none;
}
.lightbox.is-open .lightbox__img {
  transform: scale(1);
}
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.lightbox__close:hover { color: #fff; }
.lightbox__close svg { width: 24px; height: 24px; }

@media (hover: hover) and (pointer: fine) {
  .pdp__gallery img {
    cursor: zoom-in;
    transition: transform 0.5s var(--ease-soft);
  }
  .pdp__gallery:hover img { transform: scale(1.03); }
}


/* ==============================================
   RGPD BANNER
============================================== */
.rgpd-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(160%);
  z-index: 8000;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.82);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: min(92vw, 700px);
  width: 100%;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.65;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.28);
  transition: transform 0.4s var(--ease-soft);
}
.rgpd-banner.is-visible {
  transform: translateX(-50%) translateY(0);
}
.rgpd-banner__text { flex: 1; }
.rgpd-banner__text a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rgpd-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.rgpd-banner__btn {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: none;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.rgpd-banner__btn--accept {
  background: var(--caramel);
  border-color: var(--caramel);
  color: #fff;
}
.rgpd-banner__btn--accept:hover { background: #7A4D27; border-color: #7A4D27; }
.rgpd-banner__btn:hover { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
@media (max-width: 640px) {
  .rgpd-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(160%);
    max-width: 100%;
  }
  .rgpd-banner.is-visible { transform: translateY(0); }
  .rgpd-banner__actions { width: 100%; }
  .rgpd-banner__btn { flex: 1; text-align: center; }
}
.msg-confirmation__back:hover { border-color: var(--ink); }