/** Shopify CDN: Minification failed

Line 1758:46 Unexpected "("

**/
/* ============================================================
   U-PITCH — La marque (H2 centré + animation montre vivante)
   ============================================================ */
.u-pitch {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1100px;
  background: transparent;
  color: inherit;
  padding-block: 7rem;
}
.u-pitch__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.u-pitch__top {
  max-width: 760px;
  margin: 0 auto;
}
.u-pitch__top h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 1rem 1.75rem;
}
.u-pitch__top h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon, #B83228);
}
.u-pitch__lead {
  max-width: 56ch;
  margin: 0 auto 1.75rem;
}
.u-pitch__lead p {
  font-size: 1.02rem;
  line-height: 1.65;
  opacity: 0.78;
  margin-bottom: 1rem;
}
.u-pitch__lead p:last-child { margin-bottom: 0; }
.u-pitch__lead strong { font-weight: 500; }
.u-pitch__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--c-vermillon, #B83228);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: opacity 0.2s ease;
}
.u-pitch__link:hover { opacity: 0.7; }

.u-pitch__animation {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.memoria-pitch-watch {
  width: 100%;
  height: auto;
  color: var(--c-nuit, #0A1B2E);
  display: block;
}
.memoria-pitch-watch .accent { color: var(--c-vermillon, #B83228); }
@media (prefers-reduced-motion: no-preference) {
  .pitch-hand-h {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ill-rotate 60s linear infinite;
  }
  .pitch-hand-m {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ill-rotate 10s linear infinite;
  }
  .pitch-case {
    transform-box: fill-box;
    transform-origin: center;
    animation: ill-shimmer 6s ease-in-out infinite;
  }
}
.u-pitch__caption .ct {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
  display: inline-block;
}

/* ============================================================
   MEMORIA-ECRIN — Illustration SVG pour la section Offrir
   ============================================================ */
.memoria-ecrin-wrap {
  width: 100%;
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.02) 100%);
  padding: 1rem;
}
.memoria-ecrin {
  width: 100%;
  height: 100%;
  max-width: 460px;
  max-height: 360px;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .ecrin-hand-h {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ill-rotate 80s linear infinite;
  }
  .ecrin-hand-m {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ill-rotate 14s linear infinite;
  }
  .ecrin-lid {
    transform-box: fill-box;
    transform-origin: center;
    animation: ill-shimmer 7s ease-in-out infinite;
  }
}
@media (max-width: 700px) {
  .u-pitch { padding-block: 5rem; }
  .u-pitch__in { gap: 3rem; }
  .u-pitch__animation { max-width: 280px; }
}

/* ============================================================
   U-BIJOUX — Section "Bientôt disponible" 4 cartes illustrées
   ============================================================ */
.u-bijoux {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
  background: transparent;
  color: inherit;
  padding-block: 7rem;
}
.u-bijoux__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 4rem;
}
.u-bijoux__head h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 0.75rem 1rem;
}
.u-bijoux__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon, #B83228);
}
.u-bijoux__sub {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.72;
  margin: 0;
}
.u-bijoux__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  .u-bijoux__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (max-width: 600px) {
  .u-bijoux__grid { grid-template-columns: 1fr; }
}
.u-bijoux__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.5rem 2rem;
  border: 1px solid rgba(27,27,27,0.12);
  background: rgba(255,255,255,0.04);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative;
  overflow: hidden;
}
.u-bijoux__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-vermillon, #B83228);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.u-bijoux__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27,27,27,0.08);
  border-color: rgba(27,27,27,0.22);
}
.u-bijoux__card:hover::before { transform: scaleX(1); }
.u-bijoux__vis {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.bijou-svg {
  width: 75%;
  max-width: 120px;
  height: auto;
  color: inherit;
}
.bijou-svg .bijou-accent { color: var(--c-vermillon, #B83228); }
@media (prefers-reduced-motion: no-preference) {
  .bijou-svg--bague {
    transform-box: fill-box;
    transform-origin: center;
    animation: bijou-tilt 6s ease-in-out infinite;
  }
  .bijou-svg--bracelet {
    transform-box: fill-box;
    transform-origin: center;
    animation: bijou-breathe 4.5s ease-in-out infinite;
  }
  .bijou-svg--collier {
    transform-box: fill-box;
    transform-origin: top center;
    animation: bijou-swing 5s ease-in-out infinite;
  }
  .bijou-svg--boucle {
    transform-box: fill-box;
    transform-origin: top center;
    animation: bijou-swing 4.2s ease-in-out infinite;
  }
}
@keyframes bijou-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
@keyframes bijou-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes bijou-swing {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
.u-bijoux__card h3 {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.u-bijoux__tag {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
}
.u-bijoux__foot {
  margin-top: 3.5rem;
  text-align: center;
}

/* ============================================================
   U-TEASER — Assurance grille collection (4 cols desktop)
   ============================================================ */
.u-teaser__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  .u-teaser__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (max-width: 600px) {
  .u-teaser__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================================
   U-CHOUCHOU — Coup de cœur de l'atelier
   (transparent, suit le lerp universel)
   ============================================================ */
.u-chouchou {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
  background: transparent;
  color: inherit;
}
.u-chouchou__in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: center;
}
.u-chouchou h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin-bottom: 1.5rem;
}
.u-chouchou h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon);
}
.u-chouchou__body p {
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.78;
  margin-bottom: 1.25rem;
  max-width: 50ch;
}
.u-chouchou__meta {
  margin-block: 1.75rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(10,27,46,0.12);
  border-bottom: 1px solid rgba(10,27,46,0.12);
}
.u-chouchou__name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-display);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.u-chouchou__name strong { font-weight: 500; }
.u-chouchou__name .num { color: var(--c-vermillon); font-weight: 500; }
.u-chouchou__quote {
  font-family: var(--f-caveat, 'Caveat', cursive);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--c-bleu-vintage, #1E4A6D);
  max-width: 42ch;
}
.u-chouchou__cta { margin-top: 0.5rem; }
.u-chouchou__vis {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #EFE7D2;
  overflow: hidden;
}
.u-chouchou__vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-chouchou__vis-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #EFE7D2, #D9C9A8);
}
.u-chouchou__vis-meta {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 2;
}
.u-chouchou__vis-meta .ct {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-nuit);
  background: rgba(242,235,221,0.92);
  padding: 6px 10px;
}
@media (max-width: 900px) {
  .u-chouchou__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .u-chouchou h2 { font-size: 2.4rem; }
}

/* ============================================================
   U-PRESENTATION — La montre, pièce par pièce
   (refonte : cards blanches type-driven, fin & élégant)
   ============================================================ */
.u-presentation {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1100px;
  background: transparent;
  color: inherit;
  padding-block: 7rem;
}
.u-presentation__head {
  max-width: 56ch;
  margin: 0 auto 4.5rem;
  text-align: center;
}
.u-presentation__head h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 1rem 1.5rem;
}
.u-presentation__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon);
}
.u-presentation__lead p {
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.72;
}
.u-presentation__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding: 0;
  margin: 0;
}
@media (max-width: 1100px) {
  .u-presentation__grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}
@media (max-width: 600px) {
  .u-presentation__grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.u-presentation__item {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #FFFFFF 0%, #FBF6EC 100%);
  border: 1px solid rgba(27,27,27,0.07);
  padding: 2.25rem 1.75rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.u-presentation__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-vermillon);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.5s ease;
}
.u-presentation__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(27,27,27,0.08);
}
.u-presentation__item:hover::before {
  transform: scaleX(1);
}
.u-presentation__item-vis {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #FFFFFF, #F4F0E5);
  overflow: hidden;
  margin: -2.25rem -1.75rem 1.5rem;
}
.u-presentation__item-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-presentation__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ============================================================
   ILLUSTRATIONS SVG ANIMÉES (cadran, aiguilles, boîtier, calibre)
   ============================================================ */
.memoria-ill-wrap {
  margin: -2.25rem -1.75rem 1.5rem;
  aspect-ratio: 16 / 11;
  background: linear-gradient(160deg, #FFFFFF 0%, #F7F0DF 80%, #EFE5CE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(27,27,27,0.06);
  position: relative;
  overflow: hidden;
}
.memoria-ill-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(184,50,40,0.05), transparent 60%);
  pointer-events: none;
}
.memoria-ill {
  width: 56%;
  max-width: 130px;
  height: auto;
  display: block;
  color: #1B1B1B;
  position: relative;
  z-index: 1;
}
.memoria-ill .accent { color: var(--c-vermillon); }

@media (prefers-reduced-motion: no-preference) {
  .ill-rotate-slow {
    animation: ill-rotate 22s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ill-rotate-gear {
    animation: ill-rotate 18s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ill-hand-h {
    animation: ill-rotate 60s linear infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
  }
  .ill-hand-m {
    animation: ill-rotate 7s linear infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
  }
  .ill-pulse {
    animation: ill-pulse 2.6s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ill-breathe {
    animation: ill-breathe 4.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ill-shimmer {
    animation: ill-shimmer 3.5s ease-in-out infinite;
  }
}
@keyframes ill-rotate { to { transform: rotate(360deg); } }
@keyframes ill-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}
@keyframes ill-breathe {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.045); opacity: 1; }
}
@keyframes ill-shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.95; }
}

.u-presentation__item-letter {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-vermillon);
  display: inline-block;
  margin-bottom: 0.25rem;
  opacity: 0.75;
}
.u-presentation__item-body .ct {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
  color: #1B1B1B;
  display: block;
  margin-bottom: 0.25rem;
}
.u-presentation__item-body h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}
.u-presentation__item-body p {
  font-size: 0.9rem;
  line-height: 1.55;
  opacity: 0.7;
  margin: 0;
}
.u-presentation__foot {
  margin-top: 4rem;
  text-align: center;
}
.u-presentation__link {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #1B1B1B;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}
.u-presentation__link:hover { color: var(--c-vermillon); }

/* ============================================================
   U-BIENTOT — Teaser bijoux femme / nouvelle collection
   ============================================================ */
.u-bientot {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
  padding-block: 6rem;
}
.u-bientot[data-variant='soft'] {
  background: transparent;
  color: inherit;
}
.u-bientot[data-variant='dark'] {
  background: var(--c-nuit);
  color: var(--c-ivoire);
}
.u-bientot[data-variant='brown'] {
  background: #2E2419;
  color: var(--c-ivoire);
}
.u-bientot__in {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.u-bientot__copy h2 {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 0.5rem 1.25rem;
}
.u-bientot__copy h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon);
}
.u-bientot[data-variant='dark'] .u-bientot__copy h2 em,
.u-bientot[data-variant='brown'] .u-bientot__copy h2 em {
  color: var(--c-gold);
}
.u-bientot__sub {
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.78;
  max-width: 52ch;
  margin-bottom: 1.75rem;
}
.u-bientot__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 480px;
}
.u-bientot__form input[type='email'] {
  flex: 1 1 220px;
  padding: 14px 16px;
  font-family: var(--f-body, inherit);
  font-size: 0.95rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-radius: 0;
  outline-offset: 2px;
}
.u-bientot__form input[type='email']:focus {
  outline: 2px solid var(--c-vermillon);
}
.u-bientot__form .btn { flex: 0 0 auto; }
.u-bientot__success { margin-top: 0.75rem; font-size: 0.9rem; color: var(--c-gold); }
.u-bientot__error { margin-top: 0.75rem; font-size: 0.9rem; color: var(--c-vermillon); }
.u-bientot__cta { margin-top: 0.5rem; }
.u-bientot__vis {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(0,0,0,0.05);
}
.u-bientot[data-variant='dark'] .u-bientot__vis,
.u-bientot[data-variant='brown'] .u-bientot__vis {
  background: rgba(242,235,221,0.05);
  border: 1px solid rgba(242,235,221,0.1);
}
.u-bientot__vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-bientot__fig {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(242,235,221,0.9);
  color: var(--c-nuit);
  padding: 6px 10px;
}
@media (max-width: 900px) {
  .u-bientot { padding-block: 4.5rem; }
  .u-bientot__in { grid-template-columns: 1fr; gap: 2.5rem; }
  .u-bientot__copy h2 { font-size: 2.2rem; }
  .u-bientot__form { flex-direction: column; }
  .u-bientot__form .btn { width: 100%; justify-content: center; }
}
.u-bientot__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 1.75rem;
}
.u-bientot__cat {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid currentColor;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.u-bientot__cat:hover { opacity: 0.85; }

/* ============================================================
   U-JOURNAL — Teaser articles de blog
   ============================================================ */
.u-journal {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
  background: transparent;
  color: inherit;
  padding-block: 7rem;
}
.u-journal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid rgba(10,27,46,0.12);
  padding-bottom: 1.75rem;
}
.u-journal__head-left { flex: 1 1 60%; }
.u-journal__head h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 0.5rem 0;
}
.u-journal__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon);
}
.u-journal__lead {
  flex: 0 0 30%;
  max-width: 38ch;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.7;
  margin: 0;
}
.u-journal__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 0;
  margin: 0;
}
@media (max-width: 900px) {
  .u-journal__head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .u-journal__lead { max-width: 100%; }
  .u-journal__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.u-journal__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease;
}
.u-journal__card:hover {
  transform: translateY(-3px);
}
.u-journal__card:hover .u-journal__card-vis img {
  transform: scale(1.04);
}
.u-journal__card-vis {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #EFE7D2;
  margin-bottom: 1.25rem;
  position: relative;
}
.u-journal__card-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.u-journal__card-vis--placeholder {
  background: linear-gradient(135deg, #F4F2EC, #E8E5DD);
}
.u-journal__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.u-journal__card-date {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  color: var(--c-nuit);
}
.u-journal__card-title {
  font-family: var(--f-display);
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0;
}
.u-journal__card-excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.68;
  margin: 0.25rem 0 0;
}
.u-journal__card-cta {
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-vermillon);
  margin-top: 0.75rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
}
.u-journal__empty {
  text-align: center;
  padding: 4rem 0;
  opacity: 0.6;
}
.u-journal__foot {
  margin-top: 3.5rem;
  text-align: center;
}

/* ============================================================
   U-HERO — Bloc CTA simplifié (sans prix)
   ============================================================ */
.u-hero__cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 1.75rem 1rem;
}
.u-hero__cta { align-self: flex-start; }
.u-hero__cta-sub {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.u-hero__cta-sub .stars {
  color: var(--c-gold, #D9B85A);
  letter-spacing: 0.05em;
}
.u-hero__cta-sub .num { font-weight: 500; }
.u-hero__cta-sep { opacity: 0.45; }
@media (max-width: 700px) {
  .u-hero__cta-sub { font-size: 0.66rem; gap: 0.35rem; }
}

/* ============================================================
   U-NEWS-END — Newsletter finale, blanche, centrée
   ============================================================ */
.u-news-end {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
  background: transparent;
  color: inherit;
  padding-block: 7rem;
  position: relative;
  overflow: hidden;
}
.u-news-end::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(184,50,40,0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.u-news-end__in { position: relative; z-index: 1; }
.u-news-end__in {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.u-news-end .u__brow {
  display: block;
  margin-bottom: 1.25rem;
}
.u-news-end h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 0.25rem 1rem;
}
.u-news-end h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon);
}
.u-news-end__sub {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 42ch;
  margin: 0 auto 2.25rem;
}
.u-news-end__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  max-width: 460px;
  margin: 0 auto;
}
.u-news-end__form input[type='email'] {
  flex: 1 1 240px;
  padding: 14px 18px;
  font-family: var(--f-body, inherit);
  font-size: 0.95rem;
  background: #FAFAF7;
  color: inherit;
  border: 1px solid rgba(27,27,27,0.18);
  border-radius: 0;
  outline-offset: 2px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.u-news-end__form input[type='email']:focus {
  outline: 2px solid var(--c-vermillon);
  background: #FFFFFF;
  border-color: var(--c-vermillon);
}
.u-news-end__form .btn { flex: 0 0 auto; }
.u-news-end__success {
  margin-top: 1rem;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-vermillon);
}
.u-news-end__error {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--c-vermillon);
}
.u-news-end__note {
  margin-top: 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
}
@media (max-width: 700px) {
  .u-news-end { padding-block: 5rem; }
  .u-news-end__form { flex-direction: column; }
  .u-news-end__form .btn { width: 100%; justify-content: center; }
}

/* ============================================================

/* ============================================================
   PERF — Désactiver animations non-signature sur mobile
   ============================================================ */
@media (max-width: 700px) {
  .pitch-case,
  .ill-rotate-slow,
  .ill-rotate-gear,
  .ill-pulse,
  .ill-breathe,
  .ill-shimmer,
  .bijou-svg--bague,
  .bijou-svg--bracelet,
  .bijou-svg--collier,
  .bijou-svg--boucle,
  .ecrin-lid {
    animation: none !important;
  }
}

/* ============================================================
   FORMS — Styling unifié inputs / textarea / labels
   ============================================================ */
.u-contact__form,
.u-page__content form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 520px;
  margin: 2.5rem 0 0;
}
.u-contact__form label,
.u-page__content form label {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: -0.6rem;
}
.u-contact__form input[type='text'],
.u-contact__form input[type='email'],
.u-contact__form input[type='tel'],
.u-contact__form textarea,
.u-page__content form input,
.u-page__content form textarea,
.u-password input[type='password'] {
  padding: 14px 16px;
  font-family: var(--f-body, inherit);
  font-size: 0.95rem;
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  border-color: rgba(0,0,0,0.18);
  border-radius: 0;
  outline-offset: 2px;
  transition: border-color 0.2s ease;
}
.u-contact__form input:focus,
.u-contact__form textarea:focus,
.u-page__content form input:focus,
.u-page__content form textarea:focus,
.u-password input[type='password']:focus {
  outline: 2px solid var(--c-vermillon, #B83228);
  border-color: var(--c-vermillon, #B83228);
}
.u-contact__form textarea {
  min-height: 160px;
  resize: vertical;
}
.u-contact__form button[type='submit'],
.u-page__content form button[type='submit'] {
  align-self: flex-start;
  margin-top: 0.5rem;
}

/* ============================================================
   U-PASSWORD — page password (avant ouverture boutique)
   ============================================================ */
.u-password__in {
  max-width: 540px;
  margin-inline: auto;
  text-align: center;
  padding-block: 8rem;
}
.u-password__lead {
  margin: 1.5rem 0;
  opacity: 0.85;
  font-size: 1.02rem;
  line-height: 1.6;
}
.u-password form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}
.u-password input[type='password'] {
  min-width: 260px;
  text-align: center;
}

/* ============================================================
   U-GIFT — page carte cadeau
   ============================================================ */
.u-gift__in {
  max-width: 540px;
  margin-inline: auto;
  text-align: center;
  padding-block: 8rem;
}
.u-gift h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  font-variation-settings: 'SOFT' 50;
  margin-block: 1rem 1.5rem;
}
.u-gift h1 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon, #B83228);
}
.u-gift__code {
  margin: 1.25rem 0 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}
.u-gift__code strong {
  font-weight: 500;
  color: var(--c-vermillon, #B83228);
}
.u-gift__expire {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 2rem;
}

/* ============================================================
   U-FORM — Erreurs / succès globaux
   ============================================================ */
.u-form__errors,
.u-auth__errors {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--c-vermillon, #B83228);
  background: rgba(184,50,40,0.05);
  font-size: 0.92rem;
}
.u-auth__success {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border-left: 2px solid currentColor;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   MEMORIA-CASEBACK — Fond de boîtier gravé pour section Offrir
   (esthétique horloger luxe, inspiré maquette Memoria-Horloge)
   ============================================================ */
.memoria-caseback {
  position: relative;
  aspect-ratio: 1;
  max-width: 480px;
  margin-left: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.4), transparent 60%),
    linear-gradient(160deg, #4a443a 0%, #2E2A24 50%, #1b1814 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.5),
    inset 0 0 24px rgba(0,0,0,0.3),
    0 30px 80px rgba(0,0,0,0.6);
  color: #F2EBDD;
  overflow: hidden;
}
.memoria-caseback::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background-image: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.03) 0deg,
    rgba(0,0,0,0.04) 0.5deg,
    rgba(255,255,255,0.03) 1deg
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.memoria-caseback::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(217,184,90,0.18);
  pointer-events: none;
}
.memoria-caseback__inner {
  position: absolute;
  inset: 12% 10%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  text-align: center;
  z-index: 1;
}
.memoria-caseback__top {
  display: grid;
  gap: 6px;
  align-content: start;
}
.memoria-caseback__brand {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 2.2vmin, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.34em;
  color: var(--c-gold, #D9B85A);
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.memoria-caseback__sub {
  font-family: var(--f-mono);
  font-size: clamp(0.52rem, 1vmin, 0.65rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,235,221,0.55);
}
.memoria-caseback__movement {
  display: grid;
  place-items: center;
}
.memoria-nh35 {
  width: 75%;
  max-width: 230px;
  color: rgba(242,235,221,0.85);
  display: block;
}
.memoria-nh35 .cb-rim {
  fill: none;
  stroke: rgba(217,184,90,0.25);
  stroke-width: 0.8;
}
.memoria-nh35 .cb-circle {
  fill: none;
  stroke: rgba(242,235,221,0.5);
  stroke-width: 0.6;
}
.memoria-nh35 .cb-part {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.memoria-nh35 .cb-accent {
  stroke: var(--c-gold, #D9B85A);
}
.memoria-nh35 .cb-jewel {
  fill: var(--c-vermillon, #B83228);
}
@media (prefers-reduced-motion: no-preference) {
  .cb-rotor {
    transform-box: fill-box;
    transform-origin: center;
    animation: ill-rotate 35s linear infinite;
  }
}
.memoria-caseback__specs {
  font-family: var(--f-mono);
  font-size: clamp(0.56rem, 1vmin, 0.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold, #D9B85A);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
  opacity: 0.82;
}
.memoria-caseback__sep {
  opacity: 0.4;
}
@media (max-width: 900px) {
  .memoria-caseback {
    max-width: 360px;
    margin-inline: auto;
  }
}
@media (max-width: 700px) {
  .memoria-caseback {
    max-width: 280px;
  }
  .memoria-caseback__inner {
    inset: 14% 11%;
    gap: 0.5rem;
  }
  .cb-rotor {
    animation: none !important;
  }
}

/* ============================================================
   MEMORIA-WATCH — Montre 3D flip face/dos (section Offrir)
   ============================================================ */
.memoria-watch-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  perspective: 1800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.memoria-watch-flip {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform 1100ms cubic-bezier(0.65, 0, 0.25, 1);
}
.memoria-watch-flip.is-flipped {
  transform: rotateY(180deg);
}
.memoria-watch-face,
.memoria-watch-back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.memoria-watch-back {
  transform: rotateY(180deg);
}

/* ─── FACE AVANT (cadran + aiguilles) ─── */
.memoria-watch-face {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.32), transparent 50%),
    linear-gradient(150deg, #5C5447 0%, #3A3325 50%, #1B1814 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.4),
    inset 0 0 24px rgba(0,0,0,0.18),
    0 30px 80px rgba(0,0,0,0.6);
  --h-rot: 305deg;
  --m-rot: 63deg;
  --s-delay: -30s;
}
.memoria-dial {
  width: 100%;
  height: 100%;
  display: block;
}
.md-case-outer {
  fill: none;
  stroke: rgba(217,184,90,0.45);
  stroke-width: 0.8;
}
.md-bezel-line {
  fill: none;
  stroke: rgba(242,235,221,0.18);
  stroke-width: 0.6;
}
.md-tick {
  stroke: rgba(242,235,221,0.85);
}
.md-tick--major { stroke-width: 2.2; }
.md-tick--minor { stroke-width: 0.7; opacity: 0.45; }
.md-brand {
  font-family: var(--f-display, Fraunces, serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  fill: var(--c-gold, #D9B85A);
  text-anchor: middle;
}
.md-sub {
  font-family: var(--f-mono, monospace);
  font-size: 5.5px;
  letter-spacing: 0.2em;
  fill: rgba(242,235,221,0.55);
  text-anchor: middle;
  text-transform: uppercase;
}
.md-date-frame {
  fill: rgba(242,235,221,0.92);
  stroke: rgba(0,0,0,0.4);
  stroke-width: 0.6;
}
.md-date {
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  fill: #1B1B1B;
  text-anchor: middle;
  font-weight: 500;
}

/* Aiguilles — rotation autour du pivot SVG (160, 160) */
.md-hand--h,
.md-hand--m,
.md-hand--s {
  transform-box: view-box;
  transform-origin: 160px 160px;
}
.md-hand--h {
  fill: rgba(242,235,221,0.95);
  transform: rotate(var(--h-rot));
}
.md-hand--m {
  fill: rgba(242,235,221,0.95);
  transform: rotate(var(--m-rot));
}
.md-hand--s {
  animation: memoria-tick 60s linear infinite;
  animation-delay: var(--s-delay, -30s);
}
.md-hand-second-body { fill: var(--c-vermillon, #B83228); }
.md-hand-second-tail { fill: var(--c-vermillon, #B83228); }
.md-pivot {
  fill: var(--c-vermillon, #B83228);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.md-pivot-dot {
  fill: rgba(242,235,221,0.95);
}
@keyframes memoria-tick {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── DOS — réutilise les styles caseback déjà définis ─── */
.memoria-watch-back {
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,0.4), transparent 60%),
    linear-gradient(160deg, #4a443a 0%, #2E2A24 50%, #1b1814 100%);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.5),
    inset 0 0 24px rgba(0,0,0,0.3),
    0 30px 80px rgba(0,0,0,0.6);
  color: #F2EBDD;
}
.memoria-watch-back::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background-image: repeating-conic-gradient(
    from 0deg,
    rgba(255,255,255,0.03) 0deg,
    rgba(0,0,0,0.04) 0.5deg,
    rgba(255,255,255,0.03) 1deg
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}
.memoria-watch-back::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(217,184,90,0.18);
  pointer-events: none;
}

/* ─── Bouton flip ─── */
.memoria-watch-flip-btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(242,235,221,0.25);
  color: rgba(242,235,221,0.75);
  font-family: var(--f-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 220ms, border-color 220ms, background 220ms;
}
.memoria-watch-flip-btn::after {
  content: " ↻";
  letter-spacing: 0;
}
.memoria-watch-flip-btn:hover {
  color: var(--c-gold, #D9B85A);
  border-color: var(--c-gold, #D9B85A);
  background: rgba(217,184,90,0.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .memoria-watch-flip { transition: none; }
  .md-hand--s { animation: none !important; }
}

/* Mobile : pas de rotor + petite taille */
@media (max-width: 900px) {
  .memoria-watch-stage { max-width: 360px; margin-inline: auto; }
}
@media (max-width: 700px) {
  .memoria-watch-stage { max-width: 280px; }
  .cb-rotor { animation: none !important; }
}

/* ============================================================
   MEMORIA-ANATOMY — Montre épurée interactive (section Offrir)
   Pas de cadre, juste contour fin + aiguilles draggables + 4 points cliquables
   ============================================================ */
.memoria-anatomy {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  color: inherit;
}
.memoria-anatomy__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 12% 18%;
}
.anatomy-watch {
  width: 100%;
  height: 100%;
  display: block;
  color: inherit;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.25));
}

/* Cerclage doré fin */
.aw-rim {
  fill: none;
  stroke: var(--c-gold, #D9B85A);
  stroke-width: 1.2;
  opacity: 0.7;
}
.aw-rim-inner {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.4;
  opacity: 0.3;
}

/* Index horaires */
.aw-tick { stroke: currentColor; }
.aw-tick--major { stroke-width: 2.4; opacity: 0.9; }
.aw-tick--minor { stroke-width: 0.7; opacity: 0.4; }

/* Brand sur cadran */
.aw-brand {
  font-family: var(--f-display, Fraunces, serif);
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  fill: var(--c-gold, #D9B85A);
  text-anchor: middle;
}
.aw-sub {
  font-family: var(--f-mono, monospace);
  font-size: 5.4px;
  letter-spacing: 0.2em;
  fill: currentColor;
  fill-opacity: 0.55;
  text-anchor: middle;
  text-transform: uppercase;
}

/* Aiguilles — pivot 160,160 */
.aw-hand--h,
.aw-hand--m,
.aw-hand--s {
  transform-box: view-box;
  transform-origin: 160px 160px;
  cursor: grab;
  transition: filter 0.2s;
}
.aw-hand--h:active,
.aw-hand--m:active { cursor: grabbing; }
.aw-hand--h:hover,
.aw-hand--m:hover { filter: drop-shadow(0 0 4px var(--c-gold, #D9B85A)); }

.aw-hand--h { fill: currentColor; }
.aw-hand--m { fill: currentColor; }
.aw-hand-s-body { fill: var(--c-vermillon, #B83228); }
.aw-hand-s-tail { fill: var(--c-vermillon, #B83228); }
.aw-hand--s {
  animation: memoria-tick 60s linear infinite;
  pointer-events: none;
}
@keyframes memoria-tick {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.aw-pivot { fill: var(--c-vermillon, #B83228); }
.aw-pivot-inner { fill: currentColor; opacity: 0.95; }

/* ─── Points d'annotation cliquables ─── */
.anatomy-dot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  transition: opacity 0.2s, transform 0.3s;
}
.anatomy-dot--top    { top: 0;   left: 50%; transform: translateX(-50%); }
.anatomy-dot--right  { top: 50%; right: 0; transform: translateY(-50%); flex-direction: row-reverse; }
.anatomy-dot--bottom { bottom: 0; left: 50%; transform: translateX(-50%); flex-direction: column-reverse; }
.anatomy-dot--left   { top: 50%; left: 0; transform: translateY(-50%); flex-direction: row; }

.anatomy-dot__circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  position: relative;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.anatomy-dot__circle::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--c-vermillon, #B83228);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s, transform 0.25s;
}
.anatomy-dot:hover .anatomy-dot__circle,
.anatomy-dot.is-active .anatomy-dot__circle {
  border-color: var(--c-vermillon, #B83228);
  box-shadow: 0 0 0 4px rgba(184, 50, 40, 0.12);
}
.anatomy-dot.is-active .anatomy-dot__circle::after {
  opacity: 1;
  transform: scale(1);
}
.anatomy-dot__text {
  font-family: var(--f-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.anatomy-dot__text em {
  font-style: normal;
  color: var(--c-vermillon, #B83228);
  font-weight: 500;
  opacity: 0.75;
}
.anatomy-dot.is-active .anatomy-dot__text { color: var(--c-vermillon, #B83228); }

/* ─── Panneau info ─── */
.memoria-anatomy__info {
  min-height: 6em;
  max-width: 42ch;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.9;
}
.anatomy-info__title {
  display: block;
  font-family: var(--f-mono, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-vermillon, #B83228);
  margin-bottom: 0.5rem;
}
.anatomy-info__body {
  font-size: 0.94rem;
  line-height: 1.55;
  opacity: 0.85;
  margin: 0;
}
.anatomy-info__hint {
  display: block;
  font-family: var(--f-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* ─── Reduced motion + mobile ─── */
@media (prefers-reduced-motion: reduce) {
  .aw-hand--s { animation: none !important; }
}
@media (max-width: 700px) {
  .memoria-anatomy__stage { padding: 14% 22%; }
  .anatomy-dot__text { font-size: 0.62rem; }
}
   U-FAQ — Accordéon questions fréquentes (après journal)
   ============================================================ */
.u-faq {
  background: transparent;
  color: inherit;
  padding-block: 6rem;
}
.u-faq__in {
  max-width: 780px;
  margin: 0 auto;
}
.u-faq__head {
  text-align: center;
  margin-bottom: 3rem;
}
.u-faq__head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin-block: 0.75rem 1rem;
}
.u-faq__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-vermillon, #B83228);
}
.u-faq__lead {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 52ch;
  margin: 0 auto;
}
.u-faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.u-faq__list > li {
  border-top: 1px solid rgba(27,27,27,0.14);
}
.u-faq__list > li:last-child {
  border-bottom: 1px solid rgba(27,27,27,0.14);
}
.u-faq__item {
  padding: 0;
}
.u-faq__item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.6rem 0.5rem 1.6rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-family: var(--f-display, Fraunces, serif);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 400;
  font-variation-settings: 'SOFT' 60;
  letter-spacing: -0.01em;
  transition: color 0.25s;
}
.u-faq__item > summary::-webkit-details-marker { display: none; }
.u-faq__item > summary:hover { color: var(--c-vermillon, #B83228); }
.u-faq__q { flex: 1; line-height: 1.3; }
.u-faq__icon {
  position: relative;
  width: 16px; height: 16px;
  flex: 0 0 auto;
}
.u-faq__icon::before,
.u-faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  top: 50%; left: 50%;
  transition: transform 0.35s ease;
}
.u-faq__icon::before {
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.u-faq__icon::after {
  width: 1px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.u-faq__item[open] > summary .u-faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.u-faq__item[open] > summary {
  color: var(--c-vermillon, #B83228);
}
.u-faq__a {
  padding: 0 0 1.6rem;
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.78;
  max-width: 64ch;
}
.u-faq__a p { margin-bottom: 0.5rem; }
.u-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================
   OFW — Montre rotative dans la section offrir (colonne droite)
   6 ronds cadeau cliquables + cadran ivoire + aiguilles temps réel
   ============================================================ */
/* Stacked layout override (H2 -> watch -> CTA, centered) */
.u-offrir__in--stack {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.u-offrir__head {
  max-width: 640px;
  width: 100%;
}
.u-offrir__head h2 {
  margin: 0.5rem 0 1.1rem;
}
.u-offrir__lead p {
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
  opacity: 0.82;
  margin: 0 auto;
  max-width: 52ch;
}
.ofw-wrap {
  width: min(460px, 88vw);
  height: min(460px, 88vw);
  margin: 0 auto;
  flex-shrink: 0;
}
.u-offrir__cta-wrap {
  display: flex;
  justify-content: center;
}
.u-offrir__vis[data-clk] {
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.ofw {
  position: relative;
  width: 100%;
  height: 100%;
  --ofw-r: clamp(120px, 24vw, 210px);
}
.ofw__bezel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c-gold, #D9B85A);
  box-shadow:
    inset 0 0 0 1px rgba(217,184,90,0.15),
    inset 0 0 30px rgba(217,184,90,0.05),
    0 0 80px rgba(217,184,90,0.08);
}
.ofw__rotor {
  position: absolute;
  inset: 0;
  transition: transform 1100ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ofw__pos {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transform: rotate(var(--base)) translateY(calc(-1 * var(--ofw-r)));
}
.ofw__bullet {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 7vw, 54px);
  height: clamp(40px, 7vw, 54px);
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  border: 1.5px solid var(--c-gold, #D9B85A);
  color: var(--c-gold, #D9B85A);
  font-family: var(--f-mono, monospace);
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 1100ms cubic-bezier(0.32,0.72,0,1);
}
.ofw__pos:hover .ofw__bullet {
  background: rgba(217,184,90,0.2);
  box-shadow: 0 4px 22px rgba(217,184,90,0.35);
}
.ofw__pos.is-focus .ofw__bullet {
  background: var(--c-gold, #D9B85A);
  color: #1B1B1B;
  box-shadow: 0 0 0 4px rgba(217,184,90,0.2), 0 6px 20px rgba(217,184,90,0.55);
}
.ofw__dial {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.5), transparent 70%),
    linear-gradient(160deg, #F2EBDD 0%, #E6DCC4 60%, #d5c8a9 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  overflow: hidden;
}
.ofw__brand-top {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  white-space: nowrap;
}
.ofw__brand {
  font-family: var(--f-display, Fraunces, serif);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: italic;
  font-variation-settings: 'SOFT' 80;
  color: #1B1B1B;
}
.ofw__brand-top small {
  display: block;
  margin-top: 3px;
  font-family: var(--f-mono, monospace);
  font-size: clamp(0.46rem, 0.8vw, 0.56rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(27,27,27,0.5);
}
.ofw__hands {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ofw__hand {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #1B1B1B;
  transform-origin: 50% 100%;
}
.ofw__hand--h {
  width: 4px;
  height: 22%;
  border-radius: 2px;
}
.ofw__hand--m {
  width: 3px;
  height: 30%;
  border-radius: 1.5px;
}
.ofw__hand--s {
  width: 1.5px;
  height: 34%;
  background: var(--c-vermillon, #B83228);
  border-radius: 1px;
}
.ofw__pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background: #1B1B1B;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* Center popup overlay (over the dial) — driven by .is-popup-open */
.ofw__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 76%;
  max-width: 280px;
  padding: 18px 22px 16px;
  background: var(--c-ivoire, #F2EBDD);
  color: #2E2419;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 0 1px rgba(217,184,90,0.35);
  text-align: left;
  z-index: 10;
  transform: translate(-50%, -50%) scale(0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.32, 1.45, 0.5, 1);
}
.ofw.is-popup-open .ofw__center {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
/* Dot pulse — ONLY when watch is hovered or focused, never ambient.
   Mobile/touch users see static dots. Click triggers position + popup. */
@keyframes ofwDotPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 5px rgba(217,184,90,0.18); }
}
.ofw:hover .ofw__pos:nth-child(1) .ofw__bullet,
.ofw:focus-within .ofw__pos:nth-child(1) .ofw__bullet { animation: ofwDotPulse 2.8s ease-in-out 0s    infinite; }
.ofw:hover .ofw__pos:nth-child(2) .ofw__bullet,
.ofw:focus-within .ofw__pos:nth-child(2) .ofw__bullet { animation: ofwDotPulse 2.8s ease-in-out 0.7s  infinite; }
.ofw:hover .ofw__pos:nth-child(3) .ofw__bullet,
.ofw:focus-within .ofw__pos:nth-child(3) .ofw__bullet { animation: ofwDotPulse 2.8s ease-in-out 1.4s  infinite; }
.ofw:hover .ofw__pos:nth-child(4) .ofw__bullet,
.ofw:focus-within .ofw__pos:nth-child(4) .ofw__bullet { animation: ofwDotPulse 2.8s ease-in-out 2.1s  infinite; }
.ofw.is-popup-open .ofw__bullet { animation: none !important; }
.ofw__pos.is-focus .ofw__bullet { animation: none !important; }
/* Keyboard focus visible — clear vermillon outline, never invisible */
.ofw__pos:focus-visible { outline: none; }
.ofw__pos:focus-visible .ofw__bullet {
  box-shadow: 0 0 0 3px var(--c-vermillon, #B83228), 0 4px 14px rgba(0,0,0,0.45);
}
.ofw__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184, 50, 40, 0.08);
  border: none;
  border-radius: 50%;
  color: var(--c-vermillon, #B83228);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.ofw__close:hover {
  background: var(--c-vermillon, #B83228);
  color: var(--c-ivoire, #F2EBDD);
  transform: scale(1.08);
}
.ofw__close:focus-visible {
  outline: 2px solid var(--c-vermillon, #B83228);
  outline-offset: 2px;
}
.ofw__center-label {
  display: block;
  font-family: var(--f-mono, monospace);
  font-size: clamp(0.6rem, 1vw, 0.7rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-vermillon, #B83228);
  margin: 0 28px 0.55rem 0;
  font-weight: 500;
}
.ofw__center-text {
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-size: clamp(0.85rem, 1.18vw, 0.96rem);
  line-height: 1.45;
  margin: 0;
  color: #2E2419;
}
.ofw.is-popup-open .ofw__hands { opacity: 0.18; transition: opacity 0.3s; }
.ofw.is-popup-open .ofw__brand-top { opacity: 0; transition: opacity 0.2s; }
.ofw__hands, .ofw__brand-top { transition: opacity 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .ofw__rotor { transition: none !important; }
  .ofw__hand--s { display: none; }
  .ofw__center { transition: none !important; }
  .ofw__bullet { animation: none !important; }
}
@media (max-width: 700px) {
  .ofw { --ofw-r: clamp(100px, 32vw, 160px); }
  .ofw__center { padding: 14px 16px 12px; width: 82%; }
  .ofw__center-text { font-size: 0.82rem; }
}

/* ============================================================================
   COLLECTION (V13) — refonte template /collections/*
   ============================================================================
   Univers U2 : ivoire chaud #F2EBDD, fg sumi, line bleu vintage.
   4 sections : hero, filters/toolbar, grid, reassurance.

   Anti-patterns respectés (dna.md §3) :
     - Radius 0 partout sauf inputs (4px)
     - Pas de shadow prononcée sur cards
     - 1 pill max par card
     - CTA primary = vermillon plein carré, hover = gap stretch (pas glow)
     - Pas de bouton plein arrondi coloré pour les filtres
============================================================================ */

/* -- Crumb (réutilisable) ----------------------------------------------- */
.crumb {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumb a {
  color: var(--fg-soft);
  text-decoration: none;
  transition: color 200ms ease;
}
.crumb a:hover {
  color: var(--c-blue);
}
.crumb a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.crumb .sep {
  opacity: 0.4;
}
.crumb [aria-current="page"] {
  color: var(--c-blue);
}

/* -- C0 — Hero collection ----------------------------------------------- */
.u-cat {
  min-height: 0;
  padding-top: clamp(6rem, 12vh, 9rem);
  padding-bottom: 3rem;
  display: block;
  align-items: initial;
}
.u-cat__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.u-cat__head-main {
  min-width: 0;
}
.u-cat__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0;
}
.u-cat__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-cat__count {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  min-width: max-content;
  display: block;
}
.u-cat__count strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-accent);
  margin-bottom: 2px;
}
.u-cat__desc {
  margin-top: 1.5rem;
  max-width: 60ch;
  opacity: 0.8;
  font-size: 1rem;
  line-height: 1.65;
}
@media (max-width: 700px) {
  .u-cat__head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .u-cat__count {
    text-align: left;
  }
}

/* -- C1 — Filtres + toolbar -------------------------------------------- */
.u-cat-filters {
  padding: 0 var(--gutter);
}
.u-cat-filters .u__in {
  max-width: var(--content-max);
  margin-inline: auto;
}

/* A. Filtres horizontaux principaux (pill buttons) */
.u-cat__filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-block: 1px solid var(--rule);
  margin: 0;
  align-items: center;
}
.filter {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid rgba(27, 27, 27, 0.2);
  background: transparent;
  color: var(--fg-soft);
  cursor: pointer;
  transition: background 200ms, color 200ms, border-color 200ms;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  text-decoration: none;
}
.filter:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.filter:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.filter.is-on {
  background: var(--c-sumi);
  color: #F2EBDD;
  border-color: var(--c-sumi);
}
.filter.is-on:hover {
  background: var(--c-sumi);
  color: #F2EBDD;
}
.filter__count {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.filter.is-on .filter__count {
  opacity: 0.7;
}

/* B. Toolbar : chips actifs + advanced + sort */
.u-cat__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 2rem;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.u-cat__active {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.u-cat__active--empty {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-cat__active-label {
  color: var(--fg-mute);
}
.u-cat__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule);
  background: rgba(27, 27, 27, 0.04);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.u-cat__chip:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.u-cat__chip:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.u-cat__chip-x {
  font-size: 0.9em;
  opacity: 0.55;
  transition: opacity 200ms;
}
.u-cat__chip:hover .u-cat__chip-x {
  opacity: 1;
}
.u-cat__reset {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-left: 4px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms;
}
.u-cat__reset:hover {
  border-bottom-color: var(--c-accent);
}
.u-cat__reset:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.u-cat__toolbar-end {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Advanced filter (native details/summary) */
.u-cat__advanced-wrap {
  position: relative;
}
.u-cat__advanced {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  transition: background 200ms, color 200ms;
}
.u-cat__advanced::-webkit-details-marker {
  display: none;
}
.u-cat__advanced::after {
  content: '+';
  margin-left: 4px;
  font-family: var(--f-mono);
  opacity: 0.6;
  font-size: 0.9em;
  transition: transform 240ms ease;
}
.u-cat__advanced-wrap[open] .u-cat__advanced::after {
  transform: rotate(45deg);
  opacity: 1;
}
.u-cat__advanced:hover {
  background: var(--fg);
  color: var(--bg);
}
.u-cat__advanced-badge {
  background: var(--c-accent);
  color: #F2EBDD;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0;
  margin-left: 2px;
}
.u-cat__advanced-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(360px, calc(100vw - 2rem));
  background: #F2EBDD;
  color: #1B1B1B;
  border: 1px solid var(--rule);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  padding: 1.4rem 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.u-cat__field {
  border: none;
  padding: 0;
  margin: 0;
}
.u-cat__field legend {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.55);
  margin-bottom: 0.85rem;
  font-weight: 400;
}
.u-cat__opts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.u-cat__opt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--f-body);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 0;
  text-transform: none;
  letter-spacing: 0;
  color: #1B1B1B;
}
.u-cat__opt input[type="checkbox"] {
  accent-color: var(--c-accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
.u-cat__opt input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.u-cat__opt input[type="checkbox"]:disabled + .u-cat__opt-label {
  opacity: 0.4;
}
.u-cat__opt-label {
  text-transform: none;
  letter-spacing: 0;
}
.u-cat__opt-count {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.5;
  font-variant-numeric: tabular-nums;
}

.u-cat__price {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--f-mono);
  font-size: 0.7rem;
}
.u-cat__price-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  border: 1px solid rgba(27, 27, 27, 0.2);
  padding: 8px 10px;
  background: transparent;
}
.u-cat__price-label > span:first-child {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.5;
}
.u-cat__price-label input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: #1B1B1B;
  padding: 0;
  min-width: 0;
}
.u-cat__price-label input:focus {
  outline: none;
}
.u-cat__price-label:focus-within {
  border-color: var(--c-accent);
}
.u-cat__price-currency {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  opacity: 0.6;
}
.u-cat__price-sep {
  opacity: 0.4;
}

.u-cat__advanced-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.u-cat__advanced-reset,
.u-cat__advanced-apply {
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  background: transparent;
  color: #1B1B1B;
  transition: background 200ms, color 200ms;
}
.u-cat__advanced-reset:hover {
  background: #1B1B1B;
  color: #F2EBDD;
}
.u-cat__advanced-apply {
  background: var(--c-accent);
  color: #F2EBDD;
  border-color: var(--c-accent);
}
.u-cat__advanced-apply:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

/* Sort select */
.u-cat__sort {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.u-cat__sort-label {
  opacity: 0.6;
  cursor: pointer;
}
.u-cat__sort select {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 28px 8px 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%231B1B1B' stroke-width='1.4'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  min-height: 36px;
}
.u-cat__sort select:hover {
  border-color: var(--fg);
}
.u-cat__sort select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-color: var(--c-accent);
}
.u-cat__sort-submit {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--fg);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}

@media (max-width: 700px) {
  .u-cat__toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .u-cat__toolbar-end {
    justify-content: space-between;
  }
  .u-cat__advanced-panel {
    width: calc(100vw - 2rem);
    right: 0;
  }
}

/* -- C2 — Grille produits ---------------------------------------------- */
.u-grid {
  min-height: 0;
  padding-block: 1rem 6rem;
  display: block;
  align-items: initial;
}
.u-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.u-grid__item {
  min-width: 0;
}
/* Stagger reveal — décalage subtil basé sur l'index */
.u-grid__item.reveal {
  transition-delay: calc(min(var(--i, 0) * 35ms, 350ms));
}

@media (max-width: 980px) {
  .u-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem;
  }
}
@media (max-width: 560px) {
  .u-grid__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Foot grille : ligne "X modèles · Y ventes" + lien sur commande */
.u-grid__foot {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.u-grid__foot-meta {
  color: var(--fg-mute);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.u-grid__foot-link {
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 240ms ease;
}
.u-grid__foot-link:hover {
  border-bottom-color: var(--c-accent);
}
.u-grid__foot-link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Pagination */
.u-grid__pagination {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.u-grid__page-link {
  color: var(--fg);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 240ms, color 240ms;
}
.u-grid__page-link:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}
.u-grid__page-link.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.u-grid__page-link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.u-grid__page-current {
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.u-grid__empty {
  padding: 4rem 1rem 5rem;
  text-align: center;
  border: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.u-grid__empty .u__brow {
  margin-bottom: 0;
}
.u-grid__empty-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin: 0;
  max-width: 22ch;
}
.u-grid__empty-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-grid__empty-body {
  color: var(--fg-soft);
  font-size: 1rem;
  max-width: 50ch;
  margin: 0;
}
.u-grid__empty-actions {
  margin-top: 1rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

/* -- C3 — Réassurance pre-footer (palette sable clair) ----------------- */
.u-reassure {
  background: #EFE7D2;
  color: #1B1B1B;
  border-top: 1px solid var(--rule);
  padding: 5rem var(--gutter) 5.5rem;
  position: relative;
  z-index: var(--z-content);
}
.u-reassure__in {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}
.u-reassure .u__brow {
  color: rgba(27, 27, 27, 0.5);
  margin-bottom: 1.25rem;
}
.u-reassure .u__brow::before {
  background: rgba(27, 27, 27, 0.5);
}
.u-reassure__h2 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 1.25rem;
}
.u-reassure__h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-reassure__p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.65;
  opacity: 0.78;
  max-width: 56ch;
  margin: 0 auto 2rem;
}
.u-reassure .btn--ghost {
  color: #1B1B1B;
  border-color: #1B1B1B;
}
.u-reassure .btn--ghost:hover {
  background: #1B1B1B;
  color: #EFE7D2;
}
.u-reassure__trust {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.7);
}
.u-reassure__trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  flex-wrap: wrap;
}
.u-reassure__trust-item strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: normal;
  color: #1B1B1B;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.92rem;
}
.u-reassure__stars {
  color: var(--c-accent);
  letter-spacing: 0;
  font-size: 0.85rem;
}
@media (max-width: 700px) {
  .u-reassure__trust {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1rem;
  }
}

/* -- SEO text bloc (page 1 only) --------------------------------------- */
.u-collection-seo {
  min-height: 0;
  padding-block: 5rem 6rem;
  display: block;
  align-items: initial;
}
.u-collection-seo__in {
  max-width: 720px;
  margin-inline: auto;
}
.u-collection-seo__title {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-collection-seo__body p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  opacity: 0.85;
  margin: 0 0 1rem;
  max-width: 60ch;
}
.u-collection-seo__body p:last-child {
  margin-bottom: 0;
}
.u-collection-seo__body em {
  font-style: italic;
  color: var(--c-blue);
}
.u-collection-seo__body strong {
  font-weight: 500;
}

/* -- PCARD : extension V13 (image hover + status, déjà partiellement défini dans theme.css) ---- */
/* L'image hover crossfade — n'écrase pas .pcard__media existant */
.pcard__media .pcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 700ms var(--ease-out-soft, cubic-bezier(0.2, 0.7, 0.2, 1)), opacity 400ms ease;
}
.pcard__media .pcard__img--hover {
  opacity: 0;
  z-index: 1;
}
.pcard.pcard--has-hover:hover .pcard__img--main {
  opacity: 0;
}
.pcard.pcard--has-hover:hover .pcard__img--hover {
  opacity: 1;
  transform: scale(1.04);
}
/* Single-image pcards (no hover image) : scale main au hover (overrides existant) */
.pcard:not(.pcard--has-hover):hover .pcard__img--main {
  transform: scale(1.04);
}

/* Placeholder amélioré */
.pcard__media-placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1rem;
  text-align: center;
}
.pcard__media-placeholder small {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
  margin-top: 6px;
}

/* Status line */
.pcard__status {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.62);
  font-variant-numeric: tabular-nums;
}
.pcard__status.low {
  color: var(--c-accent);
}
.pcard__status.preorder {
  color: var(--c-blue);
}
.pcard__status.out {
  color: rgba(27, 27, 27, 0.4);
}

/* Pill out variant */
.pcard__pill--out {
  background: rgba(27, 27, 27, 0.6);
  color: #F2EBDD;
}

/* Stagger reveal pour la grille */
.u-grid__item.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(min(var(--i, 0) * 35ms, 350ms));
}
.u-grid__item.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Reduced motion overrides spécifiques collection */
@media (prefers-reduced-motion: reduce) {
  .u-grid__item.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
  .pcard__img,
  .pcard:hover .pcard__img--main,
  .pcard.pcard--has-hover:hover .pcard__img--hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   PDP (page produit) — Memoria v13
   ----------------------------------------------------------
   Tous les snippets : product-hero, product-story, product-specs,
   product-detail-zoom, product-gift, product-faq, product-related.

   Univers :
     - U1 ivoire (#F2EBDD / #1B1B1B) sur hero, story, specs, zoom, faq, related
     - U6 brun  (#2E2419 / #F2EBDD) sur gift (section "Offrir")

   La PDP n'a pas de lerp continu (1 seul univers actif sauf transition gift).
   Le body utilise les vars --bg/--fg posées par layout/theme.liquid en mode
   "non-index" → ivoire par défaut. Le passage en U3 sur gift se fait via une
   classe locale .u-pdp-gift qui surclasse les vars sur la section.
   ============================================================ */

.u-pdp {
  position: relative;
  z-index: 2;
}

/* ---------- breadcrumb ---------- */
.u-pdp-crumb {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.45);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 2rem;
}
.u-pdp-crumb a {
  color: rgba(27, 27, 27, 0.62);
  text-decoration: none;
  transition: color 200ms;
}
.u-pdp-crumb a:hover,
.u-pdp-crumb a:focus-visible {
  color: var(--c-accent);
}
.u-pdp-crumb .sep {
  opacity: 0.4;
}
.u-pdp-crumb [aria-current="page"] {
  color: var(--c-accent);
}

/* ---------- HERO PDP ---------- */
.u-pdp-hero {
  background: var(--bg);
  color: var(--fg);
  padding: 8rem var(--gutter) 5rem;
  position: relative;
}
.u-pdp-hero__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.u-pdp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

/* Galerie */
.pdp-gallery {
  position: relative;
}
.pdp-gallery__main {
  position: relative;
  margin: 0;
  background: rgba(27, 27, 27, 0.04);
  border: 1px solid rgba(27, 27, 27, 0.08);
  aspect-ratio: 1;
  overflow: hidden;
}
.pdp-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pdp-gallery__main-img.is-swapping {
  opacity: 0;
}
.pdp-gallery__figcap {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: var(--bg);
  color: rgba(27, 27, 27, 0.6);
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid rgba(27, 27, 27, 0.1);
}
.pdp-gallery__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(27, 27, 27, 0.35);
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pdp-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.pdp-gallery__thumbs li {
  list-style: none;
}
.pdp-gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background: rgba(27, 27, 27, 0.04);
  border: 1px solid rgba(27, 27, 27, 0.1);
  padding: 0;
  cursor: pointer;
  transition: border-color 200ms;
}
.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-gallery__thumb:hover,
.pdp-gallery__thumb:focus-visible {
  border-color: var(--c-accent);
  outline: none;
}
.pdp-gallery__thumb.is-current {
  border-color: var(--c-accent);
  border-width: 2px;
}

/* Pane info (droite, sticky) */
.pdp-pane {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 0.5rem;
}
.pdp-pane__brow {
  color: rgba(27, 27, 27, 0.45);
}
.pdp-pane__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0;
  color: #1B1B1B;
}
.pdp-pane__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.pdp-pane__subtitle {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(27, 27, 27, 0.7);
  max-width: 42ch;
  margin: 0;
}
.pdp-pane__price {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(27, 27, 27, 0.1);
  border-bottom: 1px solid rgba(27, 27, 27, 0.1);
}
.pdp-pane__price-main {
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #1B1B1B;
}
.pdp-pane__price-alt {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.55);
}

/* Form */
.pdp-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Selectors (Bracelet / Taille / ...) */
.pdp-option {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-option__legend {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.55);
}
.pdp-option__choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.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;
}
.pdp-option__label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.78);
  border: 1px solid rgba(27, 27, 27, 0.2);
  background: transparent;
  transition: border-color 200ms, color 200ms, background 200ms;
  user-select: none;
  min-height: 40px;
}
.pdp-option__label:hover {
  border-color: rgba(27, 27, 27, 0.55);
  color: #1B1B1B;
}
.pdp-option__radio:checked + .pdp-option__label {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(184, 50, 40, 0.04);
}
.pdp-option__radio:focus-visible + .pdp-option__label {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* Engrave & message inputs */
.pdp-engrave {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-engrave__label {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.62);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pdp-engrave__hint-inline {
  color: rgba(27, 27, 27, 0.42);
  font-weight: 400;
}
.pdp-engrave__input,
.pdp-engrave__textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.45;
  color: #1B1B1B;
  background: rgba(27, 27, 27, 0.025);
  border: 1px solid rgba(27, 27, 27, 0.16);
  border-radius: 0;
  transition: border-color 200ms, background 200ms;
}
.pdp-engrave__textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--f-body);
}
.pdp-engrave__input:focus,
.pdp-engrave__textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  background: #fff;
}
.pdp-engrave__input:focus-visible,
.pdp-engrave__textarea:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}
.pdp-engrave__counter {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.42);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pdp-engrave__counter[data-near-limit="true"] {
  color: var(--c-accent);
}

/* Gift checkbox */
.pdp-gift-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid rgba(27, 27, 27, 0.14);
  background: rgba(217, 184, 90, 0.04);
}
.pdp-gift-check__input {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.pdp-gift-check__label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp-gift-check__title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 400;
  color: #1B1B1B;
  font-variation-settings: 'SOFT' 60;
}
.pdp-gift-check__title small {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-left: 6px;
  font-weight: 400;
}
.pdp-gift-check__sub {
  font-family: var(--f-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(27, 27, 27, 0.62);
}

/* CTA primary */
.pdp-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 0.25rem;
}
.pdp-cta {
  width: 100%;
  justify-content: center;
  padding: 18px 28px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  min-height: 56px;
}
.pdp-cta .num {
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}

/* Stock status */
.pdp-stock {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.72);
  padding-top: 4px;
}
.pdp-stock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(27, 27, 27, 0.72);
  display: inline-block;
}
.pdp-stock.ok .pdp-stock__dot {
  background: #2D7A4F;
  animation: pdp-pulse 2.4s ease-in-out infinite;
}
.pdp-stock.ok .pdp-stock__label {
  color: #2D7A4F;
}
.pdp-stock.low .pdp-stock__dot {
  background: var(--c-accent);
  animation: pdp-pulse 2.4s ease-in-out infinite;
}
.pdp-stock.low .pdp-stock__label {
  color: var(--c-accent);
}
.pdp-stock.out .pdp-stock__dot {
  background: rgba(27, 27, 27, 0.4);
}
.pdp-stock.out .pdp-stock__label {
  color: rgba(27, 27, 27, 0.5);
}
@keyframes pdp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Trust block — grille 2x2 picto SVG + texte court (line-art sobre) */
.pdp-trust {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  padding: 1rem 0 0;
  margin: 0.5rem 0 0;
  border-top: 1px solid rgba(27, 27, 27, 0.12);
}
.pdp-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pdp-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(184, 50, 40, 0.07);
  color: var(--c-accent, #B83228);
}
.pdp-trust__icon svg {
  display: block;
}
.pdp-trust__text {
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-size: 0.88rem;
  color: rgba(27, 27, 27, 0.82);
  line-height: 1.25;
  letter-spacing: 0.005em;
}

/* Policy mini-links */
.pdp-policy-link {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.45);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}
.pdp-policy-link a {
  color: rgba(27, 27, 27, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(27, 27, 27, 0.25);
  transition: color 200ms;
}
.pdp-policy-link a:hover,
.pdp-policy-link a:focus-visible {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

/* ---------- STORY ---------- */
.u-pdp-story {
  padding: 5rem var(--gutter);
  background: var(--bg);
  color: var(--fg);
}
.u-pdp-story__inner {
  max-width: 780px;
  margin-inline: auto;
}
.u-pdp-story__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 2rem;
  color: #1B1B1B;
}
.u-pdp-story__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-pdp-story__body {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(27, 27, 27, 0.78);
}
.u-pdp-story__body p {
  margin: 0 0 1.1rem;
}
.u-pdp-story__body p:last-child {
  margin-bottom: 0;
}
.u-pdp-story__body strong {
  color: #1B1B1B;
  font-weight: 500;
}

/* ---------- SPECS (blueprint FIG. 1) ---------- */
.u-pdp-specs {
  padding: 5rem var(--gutter);
  background: var(--bg);
  color: var(--fg);
}
.u-pdp-specs__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.u-pdp-specs__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 2.5rem;
  color: #1B1B1B;
  max-width: 18ch;
}
.u-pdp-specs__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-pdp-specs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(27, 27, 27, 0.12);
}
.u-pdp-specs__grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.u-pdp-specs__grid dt {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.45);
}
.u-pdp-specs__grid dd {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #1B1B1B;
  margin: 0;
}

/* ---------- DETAIL ZOOM (3 macros) ---------- */
.u-pdp-zoom {
  padding: 5rem var(--gutter);
  background: var(--bg);
  color: var(--fg);
}
.u-pdp-zoom__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.u-pdp-zoom__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 2.5rem;
  color: #1B1B1B;
}
.u-pdp-zoom__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-pdp-zoom__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.u-pdp-zoom__fig {
  position: relative;
  margin: 0;
  background: rgba(27, 27, 27, 0.04);
  border: 1px solid rgba(27, 27, 27, 0.08);
  aspect-ratio: 4/5;
  overflow: hidden;
}
.u-pdp-zoom__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-pdp-zoom__fig:hover img {
  transform: scale(1.04);
}
.u-pdp-zoom__figcap {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--bg);
  color: rgba(27, 27, 27, 0.62);
  font-family: var(--f-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid rgba(27, 27, 27, 0.1);
}

/* ---------- GIFT (univers U3 brun) ---------- */
.u-pdp-gift {
  background: #2E2419;
  color: #F2EBDD;
  padding: 6rem var(--gutter);
  position: relative;
}
.u-pdp-gift__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 4rem;
  align-items: center;
}
.u-pdp-gift__copy .u__brow {
  color: rgba(242, 235, 221, 0.5);
}
.u-pdp-gift__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 1.5rem;
  color: #F2EBDD;
  max-width: 18ch;
}
.u-pdp-gift__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-gold);
  display: block;
}
.u-pdp-gift__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(242, 235, 221, 0.78);
  max-width: 48ch;
  margin: 0 0 1.5rem;
}
.u-pdp-gift__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  counter-reset: gift-list;
}
.u-pdp-gift__list li {
  position: relative;
  padding-left: 2.5rem;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(242, 235, 221, 0.85);
  counter-increment: gift-list;
}
.u-pdp-gift__list li::before {
  content: counter(gift-list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--c-gold);
  font-variant-numeric: tabular-nums;
}
.u-pdp-gift__list strong {
  color: #F2EBDD;
  font-weight: 500;
  font-family: var(--f-display);
  font-variation-settings: 'SOFT' 60;
}
.u-pdp-gift__note {
  font-family: var(--f-body);
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(242, 235, 221, 0.55);
  max-width: 46ch;
  margin: 0;
  font-style: italic;
}
.u-pdp-gift__visual {
  position: relative;
  aspect-ratio: 4/5;
  background: #1B1612;
  border: 1px solid rgba(242, 235, 221, 0.12);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.u-pdp-gift__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u-pdp-gift__svg {
  width: 100%;
  height: 100%;
  display: block;
  color: rgba(242, 235, 221, 0.5);
}

/* ---------- FAQ ---------- */
.u-pdp-faq {
  padding: 5rem var(--gutter);
  background: var(--bg);
  color: var(--fg);
}
.u-pdp-faq__inner {
  max-width: 780px;
  margin-inline: auto;
}
.u-pdp-faq__title {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 2.5rem;
  color: #1B1B1B;
}
.u-pdp-faq__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-pdp-faq__list {
  display: flex;
  flex-direction: column;
}
.u-pdp-faq__item {
  border-bottom: 1px solid rgba(27, 27, 27, 0.12);
}
.u-pdp-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: #1B1B1B;
  font-variation-settings: 'SOFT' 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.u-pdp-faq__item summary::-webkit-details-marker {
  display: none;
}
.u-pdp-faq__item:hover summary,
.u-pdp-faq__item:focus-within summary {
  color: var(--c-accent);
}
.u-pdp-faq__plus {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: var(--c-accent);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-pdp-faq__item[open] .u-pdp-faq__plus {
  transform: rotate(45deg);
}
.u-pdp-faq__body {
  padding: 0 0 1.5rem;
}
.u-pdp-faq__body p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(27, 27, 27, 0.72);
  margin: 0;
}
.u-pdp-faq__body a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- RELATED ---------- */
.u-pdp-related {
  padding: 5rem var(--gutter) 7rem;
  background: var(--bg);
  color: var(--fg);
}
.u-pdp-related__inner {
  max-width: var(--content-max);
  margin-inline: auto;
}
.u-pdp-related__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.u-pdp-related__more {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.62);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 200ms, gap 200ms;
}
.u-pdp-related__more:hover {
  color: var(--c-accent);
  gap: 12px;
}
.u-pdp-related__title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 50;
  margin: 0 0 2rem;
  color: #1B1B1B;
}
.u-pdp-related__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-pdp-related__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.u-pdp-related__grid li {
  list-style: none;
}

/* ---------- RESPONSIVE PDP ---------- */
@media (max-width: 1100px) {
  .u-pdp-hero__grid {
    gap: 2.5rem;
  }
  .pdp-pane__title {
    font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  }
}

@media (max-width: 900px) {
  .u-pdp-hero {
    padding: 6.5rem var(--gutter) 4rem;
  }
  .u-pdp-hero__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pdp-pane {
    position: static;
    padding-left: 0;
  }
  .pdp-pane__title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .u-pdp-specs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
  }
  .u-pdp-zoom__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .u-pdp-zoom__fig:first-child {
    grid-column: span 2;
    aspect-ratio: 16/10;
  }
  .u-pdp-gift__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-pdp-related__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 700px) {
  .u-pdp-hero,
  .u-pdp-story,
  .u-pdp-specs,
  .u-pdp-zoom,
  .u-pdp-gift,
  .u-pdp-faq,
  .u-pdp-related {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .u-pdp-hero {
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }
  .u-pdp-story,
  .u-pdp-specs,
  .u-pdp-zoom,
  .u-pdp-faq,
  .u-pdp-related {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .u-pdp-gift {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  .pdp-gallery__thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
  .pdp-gallery__thumbs li:nth-child(n+5) {
    display: none;
  }
  .u-pdp-specs__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .u-pdp-zoom__grid {
    grid-template-columns: 1fr;
  }
  .u-pdp-zoom__fig,
  .u-pdp-zoom__fig:first-child {
    grid-column: auto;
    aspect-ratio: 4/3;
  }
  .pdp-trust {
    gap: 10px 14px;
  }
  .pdp-trust__icon {
    width: 24px;
    height: 24px;
  }
  .pdp-trust__icon svg {
    width: 15px;
    height: 15px;
  }
  .pdp-trust__text {
    font-size: 0.82rem;
  }
  .u-pdp-related__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .pdp-gallery__main-img,
  .pdp-gallery__main-img.is-swapping {
    transition: none !important;
    opacity: 1 !important;
  }
  .u-pdp-zoom__fig img,
  .u-pdp-zoom__fig:hover img {
    transition: none !important;
    transform: none !important;
  }
  .pdp-stock.ok .pdp-stock__dot,
  .pdp-stock.low .pdp-stock__dot {
    animation: none !important;
  }
  .u-pdp-faq__plus {
    transition: none !important;
  }
}

/* ============================================================================
   PAGE ATELIER — `templates/page.atelier.liquid`
   ----------------------------------------------------------------------------
   Sections : .u-atelier-hero / .u-atelier-manifest / .u-atelier-process /
              .u-atelier-stats / .u-atelier-gallery / .u-atelier-cta
   Pattern : reveals, parallaxe légère, count-up, stagger.
   Respect strict du DNA (palette ivoire / sumi / blueprint FIG.).
   ============================================================================ */

.page-atelier {
  /* Pas de --bg/--fg hardcodés ici — on laisse le body suivre le lerp
     d'IntersectionObserver (set --bg/--fg sur :root via JS). Le wrapper
     est transparent pour que le body bg soit visible. */
  background: transparent;
  color: inherit;
}
.page-atelier .u {
  background: transparent;
  color: inherit;
}

/* ---------- Reveal stagger custom (atelier) ---------- */
.page-atelier [data-reveal] {
  transition-delay: 0ms;
}
.page-atelier [data-reveal][data-step] {
  transition-delay: calc((var(--step-index, 0)) * 80ms);
}

/* ============================================================
   A. HERO ATELIER
   ============================================================ */
.u-atelier-hero {
  padding: 10rem var(--gutter) 6rem;
  min-height: auto;
}
.u-atelier-hero__in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: center;
}
.u-atelier-hero__copy h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 0.94;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
  max-width: 14ch;
}
.u-atelier-hero__copy h1 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
  display: inline-block;
}
.u-atelier-hero__lead {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-top: 1.75rem;
  max-width: 48ch;
  color: var(--fg-soft);
}
.u-atelier-hero__visual {
  position: relative;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.u-atelier-hero__svg-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.u-atelier-hero__svg-wrap svg {
  width: 92%;
  height: 92%;
  color: var(--fg);
  opacity: 0.78;
}
.u-atelier-hero__fig {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.crumb {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 1.75rem;
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumb a {
  color: var(--fg-soft);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.crumb a:hover {
  border-bottom-color: currentColor;
}
.crumb [aria-current='page'] {
  color: var(--c-blue);
}
.crumb__sep {
  opacity: 0.4;
}

/* ============================================================
   B. MANIFEST (citation Caveat)
   ============================================================ */
.u-atelier-manifest {
  padding: 5rem var(--gutter);
  min-height: auto;
}
.u-atelier-manifest__in {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.u-atelier-manifest__quote {
  margin: 1.5rem 0 0;
  padding: 2.5rem 2rem;
  background: rgba(255, 255, 255, 0.4);
  border-left: 2px solid var(--c-blue);
  position: relative;
  text-align: left;
}
.u-atelier-manifest__bq {
  font-family: var(--f-hand);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.35;
  color: var(--c-blue);
  margin: 0;
}
.u-atelier-manifest__open,
.u-atelier-manifest__close {
  color: var(--c-accent);
  opacity: 0.7;
  font-style: normal;
  margin: 0 0.1em;
}
.u-atelier-manifest__sig {
  margin-top: 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ============================================================
   C. PROCESS (7 étapes)
   ============================================================ */
.u-atelier-process {
  padding: 7rem var(--gutter);
  min-height: auto;
}
.u-atelier-process__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4.5rem;
}
.u-atelier-process__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin-top: 1rem;
}
.u-atelier-process__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-atelier-process__lead {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--fg-soft);
  max-width: 56ch;
  margin-inline: auto;
}
.u-atelier-process__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.u-atelier-step {
  display: grid;
  grid-template-columns: 80px 1fr 60px;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.u-atelier-step:first-child {
  border-top: 1px solid var(--rule);
}
.u-atelier-step__num {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 2.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-sumi);
  line-height: 1;
  display: inline-block;
  letter-spacing: -0.02em;
  position: relative;
}
/* Animation count-up effect : underline gold qui se remplit au reveal */
.u-atelier-step__num::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: var(--c-accent);
  transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
}
.u-atelier-step.is-visible .u-atelier-step__num::after {
  width: 36px;
}
.u-atelier-step__body h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  color: var(--fg);
}
.u-atelier-step__body p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0;
}
.u-atelier-step__dur {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-blue);
  border: 1px solid var(--rule);
  padding: 4px 9px;
}
.u-atelier-step__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--rule);
  color: var(--c-sumi);
  align-self: start;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-atelier-step__icon svg {
  width: 28px;
  height: 28px;
}
.u-atelier-step.is-visible .u-atelier-step__icon {
  transform: rotate(0deg);
}
.u-atelier-step:not(.is-visible) .u-atelier-step__icon {
  transform: rotate(-8deg);
}

/* ============================================================
   D. STATS (4 compteurs animés)
   ============================================================ */
.u-atelier-stats {
  padding: 6rem var(--gutter);
  min-height: auto;
  background: rgba(27, 27, 27, 0.03);
  border-block: 1px solid var(--rule);
}
.u-atelier-stats__in {
  text-align: center;
}
.u-atelier-stats__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.u-atelier-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
}
.u-atelier-stat__big {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.u-atelier-stat__lbl {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 0.4rem;
}

/* ============================================================
   E. GALLERY (6 visuels)
   ============================================================ */
.u-atelier-gallery {
  padding: 7rem var(--gutter);
  min-height: auto;
}
.u-atelier-gallery__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
}
.u-atelier-gallery__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin-top: 1rem;
}
.u-atelier-gallery__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-atelier-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin-inline: auto;
}
.u-atelier-gallery__item {
  margin: 0;
}
.u-atelier-gallery__fig {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.u-atelier-gallery__fig:hover {
  transform: scale(1.02);
}
.u-atelier-gallery__svg {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-atelier-gallery__fig:hover .u-atelier-gallery__svg {
  transform: scale(1.04);
}
.u-atelier-gallery__svg svg {
  width: 85%;
  height: 85%;
  color: var(--fg);
  opacity: 0.72;
}
.u-atelier-gallery__cap {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 10px;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* ============================================================
   F. CTA finale
   ============================================================ */
.u-atelier-cta {
  padding: 7rem var(--gutter) 8rem;
  min-height: auto;
  text-align: center;
}
.u-atelier-cta__in {
  max-width: 680px;
  margin-inline: auto;
}
.u-atelier-cta__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin-top: 1rem;
}
.u-atelier-cta__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
  display: block;
}
.u-atelier-cta__lead {
  margin: 1.5rem auto 0;
  max-width: 52ch;
  font-family: var(--f-body);
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--fg-soft);
}
.u-atelier-cta__links {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
.u-atelier-cta__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--c-accent);
  padding-bottom: 6px;
  transition: border-color 240ms, gap 240ms;
}
.u-atelier-cta__link:hover {
  border-bottom-color: var(--c-accent-hover);
  gap: 10px;
}
.u-atelier-cta__link-lbl {
  font-weight: 500;
}
.u-atelier-cta__link-val {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--fg-mute);
  text-transform: none;
}

/* ============================================================
   RESPONSIVE — mobile
   ============================================================ */
@media (max-width: 900px) {
  .u-atelier-hero {
    padding: 7rem var(--gutter) 4rem;
  }
  .u-atelier-hero__in {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-atelier-hero__copy h1 {
    max-width: 100%;
  }

  .u-atelier-manifest {
    padding: 4rem var(--gutter);
  }
  .u-atelier-manifest__quote {
    padding: 2rem 1.5rem;
  }

  .u-atelier-process {
    padding: 5rem var(--gutter);
  }
  .u-atelier-process__head {
    margin-bottom: 3rem;
  }
  .u-atelier-step {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    padding: 1.5rem 0;
  }
  .u-atelier-step__num {
    font-size: 1.8rem;
  }
  .u-atelier-step__icon {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: 48px;
    height: 48px;
  }
  .u-atelier-step__icon svg {
    width: 22px;
    height: 22px;
  }
  .u-atelier-step__body {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .u-atelier-stats {
    padding: 4rem var(--gutter);
  }
  .u-atelier-stats__list {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .u-atelier-stat__big {
    font-size: clamp(2.2rem, 8vw, 3rem);
  }

  .u-atelier-gallery {
    padding: 5rem var(--gutter);
  }
  .u-atelier-gallery__head {
    margin-bottom: 2.5rem;
  }
  .u-atelier-gallery__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .u-atelier-cta {
    padding: 5rem var(--gutter) 6rem;
  }
}

@media (max-width: 560px) {
  .u-atelier-hero {
    padding-top: 6rem;
  }
  .u-atelier-stats__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .u-atelier-hero__visual {
    transform: none !important;
  }
  .u-atelier-step__num::after {
    transition: none !important;
    width: 36px !important;
  }
  .u-atelier-step__icon,
  .u-atelier-step:not(.is-visible) .u-atelier-step__icon {
    transform: none !important;
    transition: none !important;
  }
  .u-atelier-gallery__fig,
  .u-atelier-gallery__fig:hover,
  .u-atelier-gallery__svg,
  .u-atelier-gallery__fig:hover .u-atelier-gallery__svg {
    transform: none !important;
    transition: none !important;
  }
  .u-atelier-cta__link {
    transition: none !important;
  }
}

/* ============================================================================
   PAGE NOTRE HISTOIRE — `templates/page.notre-histoire.liquid`
   ----------------------------------------------------------------------------
   Sections (7) : .u-histoire-hero / .u-histoire-obsession / .u-histoire-moment
                  .u-histoire-seiko / .u-histoire-prix / .u-histoire-ancres
                  .u-histoire-cta
   Pattern : lerp 7 univers (IntersectionObserver), reveals fade+slide,
             parallaxe légère hero. Respect strict du DNA.
   IMPORTANT : .page-histoire et .u sont transparents — c'est le body qui
   porte le bg du lerp. Ne JAMAIS hardcoder --bg/--fg ni background ici.
   ============================================================================ */

.page-histoire {
  /* transparent : le body bg (set par JS observer) doit être visible. */
  background: transparent;
  color: inherit;
}
.page-histoire .u {
  background: transparent;
  color: inherit;
}

/* ---------- Reveal default state (la page utilise data-reveal) ---------- */
.page-histoire [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.page-histoire [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.page-histoire [data-reveal][data-step] {
  transition-delay: calc((var(--step-index, 0)) * 90ms);
}

/* ============================================================
   A. HERO HISTOIRE — u1 (ivoire)
   ============================================================ */
.u-histoire-hero {
  padding: 10rem var(--gutter) 6rem;
  min-height: auto;
}
.u-histoire-hero__in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: center;
}
.u-histoire-hero__copy h1 {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 0.94;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
  max-width: 14ch;
}
.u-histoire-hero__copy h1 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
  display: inline-block;
}
.u-histoire-hero__lead {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-top: 1.75rem;
  max-width: 52ch;
  color: var(--fg-soft);
}
.u-histoire-hero__visual {
  position: relative;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.u-histoire-hero__svg-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.u-histoire-hero__svg-wrap svg {
  width: 92%;
  height: 92%;
  color: var(--fg);
  opacity: 0.82;
}
.u-histoire-hero__fig {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* ============================================================
   B. OBSESSION — u4 (bleu vintage)
   ============================================================ */
.u-histoire-obsession {
  padding: 7rem var(--gutter) 6rem;
  min-height: auto;
}
.u-histoire-obsession__in {
  max-width: 1180px;
  margin-inline: auto;
}
.u-histoire-obsession__head {
  text-align: left;
  max-width: 30ch;
  margin-bottom: 3rem;
}
.u-histoire-obsession__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
}
.u-histoire-obsession__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-histoire-obsession__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 4rem;
  align-items: start;
}
.u-histoire-obsession__body p {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
  max-width: 56ch;
  color: var(--fg-soft);
}
.u-histoire-obsession__lead {
  font-size: 1.15rem !important;
  color: var(--fg) !important;
}
.u-histoire-obsession__body strong {
  font-weight: 500;
  color: var(--fg);
}
.u-histoire-obsession__count {
  font-family: var(--f-mono);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 1.75rem 1.5rem;
  border-left: 1px solid var(--rule);
  align-self: stretch;
}
.u-histoire-obsession__count-line {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 14px;
  align-items: baseline;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.u-histoire-obsession__count-num {
  font-family: var(--f-mono);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  text-align: right;
}
.u-histoire-obsession__count-lbl {
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--fg-soft);
}
.u-histoire-obsession__count-line:last-child .u-histoire-obsession__count-num {
  color: var(--c-accent);
  font-style: italic;
  font-family: var(--f-display);
  font-size: 1rem;
  font-variation-settings: 'SOFT' 100;
}
.u-histoire-obsession__count-line:last-child .u-histoire-obsession__count-lbl {
  color: var(--fg);
  font-weight: 500;
}

/* ============================================================
   C. MOMENT — u0 (bleu nuit, peak contraste)
   ============================================================ */
.u-histoire-moment {
  padding: 8rem var(--gutter) 7rem;
  min-height: auto;
}
.u-histoire-moment__in {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}
.u-histoire-moment__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.8vw, 4.8rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
}
.u-histoire-moment__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-gold);
  display: inline-block;
}
.u-histoire-moment__body {
  margin: 3rem auto 0;
  max-width: 60ch;
}
.u-histoire-moment__lead {
  font-family: var(--f-body);
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--fg-soft);
}
.u-histoire-moment__list {
  list-style: none;
  margin: 2.25rem auto 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.5rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-histoire-moment__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.u-histoire-moment__list-dot {
  color: var(--c-gold);
  opacity: 0.8;
}
.u-histoire-moment__quote {
  margin: 4rem auto 0;
  max-width: 640px;
  padding: 2.5rem 2.25rem;
  background: rgba(242, 235, 221, 0.06);
  border-left: 2px solid var(--c-gold);
  text-align: left;
}
.u-histoire-moment__bq {
  font-family: var(--f-hand);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  line-height: 1.35;
  color: #F2EBDD;
  margin: 0;
}
.u-histoire-moment__open,
.u-histoire-moment__close {
  color: var(--c-accent);
  opacity: 0.7;
  font-style: normal;
  margin: 0 0.1em;
}
.u-histoire-moment__sig {
  margin-top: 1.25rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.85;
}

/* ============================================================
   D. SEIKO — u1 (ivoire, retour clair)
   ============================================================ */
.u-histoire-seiko {
  padding: 7rem var(--gutter) 6rem;
  min-height: auto;
}
.u-histoire-seiko__in {
  max-width: 1180px;
  margin-inline: auto;
}
.u-histoire-seiko__head {
  max-width: 60ch;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.u-histoire-seiko__head .u__brow {
  justify-content: center;
}
.u-histoire-seiko__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-histoire-seiko__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-histoire-seiko__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
}
.u-histoire-seiko__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4rem;
  align-items: start;
}
.u-histoire-seiko__visual {
  margin: 0;
  padding: 0;
}
.u-histoire-seiko__svg-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.u-histoire-seiko__svg-wrap svg {
  width: 96%;
  height: 96%;
  color: var(--fg);
  opacity: 0.85;
}
.u-histoire-seiko__fig {
  margin-top: 0.85rem;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: left;
}
.u-histoire-seiko__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.u-histoire-seiko__point {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.u-histoire-seiko__point:last-child {
  border-bottom: none;
}
.u-histoire-seiko__point-n {
  font-family: var(--f-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-accent);
  padding-top: 4px;
}
.u-histoire-seiko__point h3 {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  margin: 0 0 0.4rem;
  color: var(--fg);
}
.u-histoire-seiko__point p {
  font-family: var(--f-body);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0;
}

/* ============================================================
   E. PRIX — u2 (sable clair)
   ============================================================ */
.u-histoire-prix {
  padding: 7rem var(--gutter) 6rem;
  min-height: auto;
}
.u-histoire-prix__in {
  max-width: 1080px;
  margin-inline: auto;
}
.u-histoire-prix__head {
  max-width: 60ch;
  margin: 0 auto 3rem;
  text-align: center;
}
.u-histoire-prix__head .u__brow {
  justify-content: center;
}
.u-histoire-prix__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-histoire-prix__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-histoire-prix__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
}
.u-histoire-prix__diagram {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 36px 1.1fr;
  gap: 1rem;
  align-items: center;
  margin: 2.5rem auto 3.5rem;
  max-width: 940px;
}
.u-histoire-prix__col {
  border: 1px solid rgba(27, 27, 27, 0.18);
  padding: 1.25rem 1rem 1.1rem;
  text-align: center;
  font-family: var(--f-mono);
  position: relative;
  background: rgba(255, 255, 255, 0.25);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.u-histoire-prix__col-lbl {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
}
.u-histoire-prix__col-sub {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-family: var(--f-mono);
}
.u-histoire-prix__col--removed::before,
.u-histoire-prix__col--removed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1.5px;
  background: var(--c-accent);
  transform-origin: center;
  opacity: 0.85;
}
.u-histoire-prix__col--removed::before { transform: rotate(8deg); }
.u-histoire-prix__col--removed::after  { transform: rotate(-8deg); }
.u-histoire-prix__col--kept {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #F2EBDD;
}
.u-histoire-prix__col--kept .u-histoire-prix__col-sub {
  color: rgba(242, 235, 221, 0.8);
}
.u-histoire-prix__col-price {
  font-family: var(--f-display);
  font-size: 1.65rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #F2EBDD;
  line-height: 1;
}
.u-histoire-prix__arrow {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  color: var(--c-accent);
  text-align: center;
  opacity: 0.8;
}
.u-histoire-prix__body {
  max-width: 720px;
  margin: 0 auto;
}
.u-histoire-prix__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.1rem;
}
.u-histoire-prix__list li {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-soft);
  padding-left: 1rem;
  border-left: 1px solid var(--rule);
}
.u-histoire-prix__list strong {
  display: block;
  font-weight: 500;
  color: var(--fg);
  font-size: 1.02rem;
  margin-bottom: 0.15rem;
}

/* ============================================================
   F. ANCRES — u4 (bleu vintage)
   ============================================================ */
.u-histoire-ancres {
  padding: 7rem var(--gutter) 6rem;
  min-height: auto;
}
.u-histoire-ancres__in {
  max-width: 1080px;
  margin-inline: auto;
}
.u-histoire-ancres__head {
  max-width: 56ch;
  margin: 0 0 3rem;
}
.u-histoire-ancres__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-histoire-ancres__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 50ch;
}
.u-histoire-ancres__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
.u-histoire-ancre {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(242, 235, 221, 0.18);
  align-items: baseline;
}
.u-histoire-ancre:last-child {
  border-bottom: 1px solid rgba(242, 235, 221, 0.18);
}
.u-histoire-ancre__num {
  font-family: var(--f-mono);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-gold);
  position: relative;
  padding-top: 4px;
}
.u-histoire-ancre__num::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 1.5px;
  background: var(--c-gold);
  transition: width 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-histoire-ancre.is-visible .u-histoire-ancre__num::after {
  width: 36px;
}
.u-histoire-ancre__body h3 {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  margin: 0 0 0.5rem;
  color: var(--fg);
}
.u-histoire-ancre__body p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--fg-soft);
  margin: 0;
  max-width: 62ch;
}

/* ============================================================
   G. CTA — u3 (brun foncé)
   ============================================================ */
.u-histoire-cta {
  padding: 8rem var(--gutter) 7rem;
  min-height: auto;
}
.u-histoire-cta__in {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.u-histoire-cta__in .u__brow {
  justify-content: center;
}
.u-histoire-cta__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.5rem;
}
.u-histoire-cta__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-histoire-cta__lead {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 50ch;
  margin: 0 auto 2.75rem;
}
.u-histoire-cta__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.25rem 3rem;
}
.u-histoire-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  transition: gap 240ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}
.u-histoire-cta__link:hover {
  gap: 18px;
  opacity: 0.85;
}
.u-histoire-cta__link-val {
  color: var(--c-gold);
}

/* ============================================================
   RESPONSIVE — histoire
   ============================================================ */
@media (max-width: 900px) {
  .u-histoire-hero {
    padding: 7rem var(--gutter) 4rem;
  }
  .u-histoire-hero__in {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-histoire-hero__visual {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
  }
  .u-histoire-obsession__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-histoire-obsession__count {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding: 1.5rem 0 0;
  }
  .u-histoire-seiko__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-histoire-seiko__visual {
    max-width: 420px;
    margin: 0 auto;
  }
  .u-histoire-prix__diagram {
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    max-width: 480px;
  }
  .u-histoire-prix__arrow {
    grid-column: 1 / -1;
    transform: rotate(90deg);
  }
  .u-histoire-prix__col--kept {
    grid-column: 1 / -1;
  }
  .u-histoire-ancre {
    grid-template-columns: 56px 1fr;
    gap: 1rem;
  }
  .u-histoire-cta__links {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
}

@media (max-width: 560px) {
  .u-histoire-hero {
    padding: 6rem var(--gutter) 3rem;
  }
  .u-histoire-moment {
    padding: 5rem var(--gutter) 4rem;
  }
  .u-histoire-moment__quote {
    padding: 1.75rem 1.5rem;
  }
  .u-histoire-prix__diagram {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .u-histoire-prix__arrow {
    grid-column: 1 / -1;
  }
  .u-histoire-ancre {
    grid-template-columns: 48px 1fr;
    padding: 1.25rem 0;
  }
  .u-histoire-cta {
    padding: 5rem var(--gutter) 4rem;
  }
}

/* ============================================================
   REDUCED MOTION — histoire
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-histoire [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .u-histoire-hero__visual {
    transform: none !important;
  }
  .u-histoire-ancre__num::after {
    transition: none !important;
    width: 36px !important;
  }
  .u-histoire-cta__link {
    transition: none !important;
  }
}

/* ============================================================================
   PAGE MOD-EXPLIQUE — `templates/page.mod-explique.liquid`
   ----------------------------------------------------------------------------
   Sections (7) : .u-mod-explique-hero / .u-mod-explique-equation /
                  .u-mod-explique-anatomie / .u-mod-explique-composants /
                  .u-mod-explique-nh35 / .u-mod-explique-faq / .u-mod-explique-cta
   Pattern : lerp d'univers (IntersectionObserver), reveals fade+slide,
             scroll-driven exploded view (anatomie), count-up (nh35).
   IMPORTANT : .page-mod-explique et .u sont transparents — c'est le body qui
   porte le bg du lerp. Ne JAMAIS hardcoder --bg/--fg ni background ici.
   ============================================================================ */

.page-mod-explique {
  /* transparent : le body bg (set par JS observer) doit être visible. */
  background: transparent;
  color: inherit;
}
.page-mod-explique .u {
  background: transparent;
  color: inherit;
}

/* ---------- Reveal default state (data-reveal) ---------- */
.page-mod-explique [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.page-mod-explique [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.page-mod-explique [data-reveal][data-step] {
  transition-delay: calc((var(--step-index, 0)) * 120ms);
}

/* ============================================================
   A. HERO — u1 (ivoire chaud)
   Composition SVG montre démontée → s'assemble au load
   ============================================================ */
.u-mod-explique-hero {
  padding: 10rem var(--gutter) 6rem;
  min-height: auto;
}
.u-mod-explique-hero__in {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: center;
}
.u-mod-explique-hero__copy h1 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  line-height: 0.96;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
  max-width: 13ch;
}
.u-mod-explique-hero__copy h1 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
  display: inline-block;
}
.u-mod-explique-hero__lead {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-top: 1.75rem;
  max-width: 54ch;
  color: var(--fg-soft);
}

.u-mod-explique-hero__visual {
  position: relative;
  margin: 0;
  padding: 0;
}
.u-mod-explique-hero__svg-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.u-mod-explique-hero__svg-wrap svg {
  width: 92%;
  height: 92%;
  color: var(--fg);
  opacity: 0.85;
}
.u-mod-explique-hero__fig {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* Composition d'assemblage au load : chaque pièce vient de --from-x/--from-y vers 0 */
.mod-hero-piece {
  opacity: 0;
  transform: translate(var(--from-x, 0), var(--from-y, 0));
  transition:
    opacity 800ms cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}
.u-mod-explique-hero__visual.is-visible .mod-hero-piece,
.page-mod-explique [data-reveal].is-visible .mod-hero-piece {
  opacity: 1;
  transform: translate(0, 0);
}

/* ============================================================
   B. ÉQUATION — u0 (bleu nuit)
   2 colonnes "reste" vs "change" + ligne séparatrice
   ============================================================ */
.u-mod-explique-equation {
  padding: 8rem var(--gutter) 7rem;
  min-height: auto;
}
.u-mod-explique-equation__in {
  max-width: 1180px;
  margin-inline: auto;
}
.u-mod-explique-equation__head {
  max-width: 720px;
  margin: 0 auto 4rem;
  text-align: center;
}
.u-mod-explique-equation__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-mod-explique-equation__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-gold);
}
.u-mod-explique-equation__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.u-mod-explique-equation__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: stretch;
}
.u-mod-explique-equation__sep {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 200ms;
}
.u-mod-explique-equation__grid.is-visible .u-mod-explique-equation__sep,
[data-reveal].is-visible .u-mod-explique-equation__sep {
  transform: translateX(-50%) scaleY(1);
}
.u-mod-explique-equation__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.u-mod-explique-equation__col-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.u-mod-explique-equation__col-tag {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-mod-explique-equation__col-tag--accent {
  color: var(--c-gold);
}
.u-mod-explique-equation__col-head h3 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
}
.u-mod-explique-equation__col-visual {
  aspect-ratio: 1 / 1;
  max-width: 220px;
  width: 100%;
  margin: 0;
  color: var(--fg);
  opacity: 0.85;
}
.u-mod-explique-equation__col-visual svg {
  width: 100%;
  height: 100%;
}
.u-mod-explique-equation__col-list {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--rule);
  flex: 1;
}
.u-mod-explique-equation__col-list li {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1rem;
  font-size: 0.94rem;
  line-height: 1.5;
}
.u-mod-explique-equation__col-key {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding-top: 2px;
}
.u-mod-explique-equation__col-val {
  font-family: var(--f-body);
  color: var(--fg-soft);
}

/* Micro-anims continues sur la colonne "change" */
@media (prefers-reduced-motion: no-preference) {
  .eq-change-piece--bezel {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: eqChangeBezelSpin 28s linear infinite;
  }
  .eq-change-piece--dial {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: eqChangeDialPulse 4s ease-in-out infinite;
  }
  .eq-change-piece--hands {
    transform-box: fill-box;
    transform-origin: 100px 100px;
    animation: eqChangeHandsSway 6s ease-in-out infinite;
  }
  .eq-change-glint {
    transform-origin: center;
    animation: eqChangeGlint 4s ease-in-out infinite;
  }
  .eq-change-link-top {
    transform-box: fill-box;
    transform-origin: center;
    animation: eqChangeLinkWave 3.6s ease-in-out infinite;
  }
  .eq-change-link-bot {
    transform-box: fill-box;
    transform-origin: center;
    animation: eqChangeLinkWave 3.6s ease-in-out infinite 1.8s;
  }
}
@keyframes eqChangeBezelSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes eqChangeDialPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.82; }
}
@keyframes eqChangeHandsSway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes eqChangeGlint {
  0%, 100% { transform: translateX(-10px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(24px); opacity: 0; }
}
@keyframes eqChangeLinkWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ============================================================
   C. ANATOMIE — u1 (ivoire) — EXPLODED VIEW SCROLL-DRIVEN
   ============================================================ */
.u-mod-explique-anatomie {
  padding: 8rem var(--gutter);
  min-height: 140vh; /* extra hauteur pour permettre le scroll progress */
  --scroll-progress: 0;
}
.u-mod-explique-anatomie__in {
  max-width: 1180px;
  margin-inline: auto;
  position: relative;
}
.u-mod-explique-anatomie__head {
  max-width: 56ch;
  margin: 0 0 3rem;
}
.u-mod-explique-anatomie__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-mod-explique-anatomie__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-mod-explique-anatomie__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 52ch;
}

.u-mod-explique-anatomie__viewport {
  position: sticky;
  top: 12vh;
  margin: 3rem 0 0;
  aspect-ratio: 5 / 3;
  max-height: 70vh;
  background: rgba(27, 27, 27, 0.02);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.u-mod-explique-anatomie__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.u-mod-explique-anatomie__stage svg {
  width: 100%;
  height: 100%;
  color: var(--fg);
  opacity: 0.92;
}

/* Pièces — translation verticale selon scroll-progress global section */
.mod-anatomie-piece {
  transform: translateY(calc(var(--offset, 0) * var(--scroll-progress, 0) * 1px));
  transition: transform 80ms linear;
  will-change: transform;
}

/* Labels — apparaissent quand le scroll-progress > 0.35 */
.mod-anatomie-label {
  transform: translateY(calc(var(--offset, 0) * var(--scroll-progress, 0) * 1px));
  opacity: calc(max(0, var(--scroll-progress, 0) - 0.35) * 2.2);
  transition: transform 80ms linear, opacity 200ms ease;
}

.u-mod-explique-anatomie__fig {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  z-index: 2;
}

.u-mod-explique-anatomie__hint {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  opacity: calc(1 - var(--scroll-progress, 0) * 2);
  transition: opacity 200ms ease;
  z-index: 3;
}
.u-mod-explique-anatomie__hint-arrow {
  animation: anatomieHintArrow 1.8s ease-in-out infinite;
  display: inline-block;
}
@keyframes anatomieHintArrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

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

/* ============================================================
   D. COMPOSANTS — u4 (bleu vintage)
   5 cards line-art draw-in + hover micro-anims
   ============================================================ */
.u-mod-explique-composants {
  padding: 8rem var(--gutter) 7rem;
  min-height: auto;
}
.u-mod-explique-composants__in {
  max-width: 1180px;
  margin-inline: auto;
}
.u-mod-explique-composants__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
}
.u-mod-explique-composants__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-mod-explique-composants__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-gold);
}
.u-mod-explique-composants__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.u-mod-explique-composants__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.mod-comp-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.75rem;
  background: rgba(242, 235, 221, 0.04);
  border: 1px solid var(--rule);
  transition: background 320ms ease, border-color 320ms ease;
}
.mod-comp-card:hover {
  background: rgba(242, 235, 221, 0.08);
  border-color: rgba(242, 235, 221, 0.28);
}
.mod-comp-card__media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: var(--fg);
}
.mod-comp-card__media svg {
  width: 88%;
  height: 88%;
}
.mod-comp-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mod-comp-card__lbl {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.mod-comp-card__body h3 {
  font-family: var(--f-display);
  font-size: 1.3rem;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  font-weight: 400;
  margin: 0;
  color: var(--fg);
}
.mod-comp-card__body p {
  font-family: var(--f-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-soft);
  margin: 0;
}

/* Draw-in line-art au reveal : stroke-dasharray animé */
.mod-comp-svg__path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mod-comp-card.is-visible .mod-comp-svg__path {
  stroke-dashoffset: 0;
}

/* Hover micro-anims par composant */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Cadran : rotation lente au hover */
  .mod-comp-card[data-mod-comp="dial"]:hover .mod-comp-dial-marks {
    transform-box: fill-box;
    transform-origin: 80px 80px;
    animation: modCompDialRot 8s linear infinite;
  }
  /* Aiguilles : sway visible au hover */
  .mod-comp-card[data-mod-comp="hands"]:hover .mod-comp-hands-anim {
    transform-box: fill-box;
    transform-origin: 80px 80px;
    animation: modCompHandsSway 3s ease-in-out infinite;
  }
  /* Lunette : scale subtil au hover */
  .mod-comp-card[data-mod-comp="bezel"]:hover .mod-comp-bezel-anim {
    transform-box: fill-box;
    transform-origin: 80px 80px;
    animation: modCompBezelScale 3s ease-in-out infinite;
  }
  /* Verre : glint qui glisse au hover */
  .mod-comp-card[data-mod-comp="glass"]:hover .mod-comp-glint {
    animation: modCompGlint 2.4s ease-in-out infinite;
  }
  /* Bracelet : maillons ondulation au hover */
  .mod-comp-card[data-mod-comp="strap"]:hover .mod-comp-link {
    transform-box: fill-box;
    transform-origin: center;
    animation: modCompLinkWave 2.4s ease-in-out infinite;
  }
  .mod-comp-card[data-mod-comp="strap"]:hover .mod-comp-link--2 { animation-delay: 0.12s; }
  .mod-comp-card[data-mod-comp="strap"]:hover .mod-comp-link--3 { animation-delay: 0.24s; }
  .mod-comp-card[data-mod-comp="strap"]:hover .mod-comp-link--4 { animation-delay: 0.36s; }
  .mod-comp-card[data-mod-comp="strap"]:hover .mod-comp-link--5 { animation-delay: 0.48s; }
}
@keyframes modCompDialRot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes modCompHandsSway {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
@keyframes modCompBezelScale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes modCompGlint {
  0%, 100% { opacity: 0; transform: translateX(-8px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateX(28px); }
}
@keyframes modCompLinkWave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* ============================================================
   E. NH35 — u2 (sable clair)
   4 stats count-up + gear background tournant
   ============================================================ */
.u-mod-explique-nh35 {
  padding: 9rem var(--gutter);
  min-height: auto;
  position: relative;
  overflow: hidden;
}
.u-mod-explique-nh35__bg-gear {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vmin;
  max-width: 900px;
  aspect-ratio: 1;
  color: var(--fg);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.u-mod-explique-nh35__bg-gear svg {
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .mod-nh35-gear {
    transform-origin: center;
    animation: modNh35GearSpin 60s linear infinite;
  }
}
@keyframes modNh35GearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.u-mod-explique-nh35__in {
  max-width: 1080px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.u-mod-explique-nh35__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 4rem;
}
.u-mod-explique-nh35__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.25rem;
}
.u-mod-explique-nh35__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-mod-explique-nh35__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 54ch;
  margin: 0 auto;
}

.u-mod-explique-nh35__stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.u-mod-explique-nh35__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 2.25rem 1.5rem;
  border-right: 1px solid var(--rule);
}
.u-mod-explique-nh35__stat:last-child {
  border-right: none;
}
.u-mod-explique-nh35__stat-val {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  font-family: var(--f-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
}
.u-mod-explique-nh35__stat-prefix {
  font-family: var(--f-mono);
  font-size: 0.55em;
  font-weight: 500;
  color: var(--c-accent);
  margin-right: 0.1em;
}
.u-mod-explique-nh35__stat-range {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.u-mod-explique-nh35__stat-unit {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: 0.2rem;
}
.u-mod-explique-nh35__stat-lbl {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 0.85rem;
  max-width: 28ch;
  line-height: 1.5;
}
.u-mod-explique-nh35__note {
  margin: 3.5rem auto 0;
  max-width: 580px;
  text-align: center;
}
.u-mod-explique-nh35__note p {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
}
.u-mod-explique-nh35__note em {
  color: var(--c-accent);
}

/* ============================================================
   F. FAQ — u1 (ivoire)
   <details> + chevron rotate, smooth height
   ============================================================ */
.u-mod-explique-faq {
  padding: 8rem var(--gutter) 6rem;
  min-height: auto;
}
.u-mod-explique-faq__in {
  max-width: 800px;
  margin-inline: auto;
}
.u-mod-explique-faq__head {
  text-align: left;
  margin: 0 0 3rem;
}
.u-mod-explique-faq__head h2 {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
}
.u-mod-explique-faq__head h2 em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-blue);
}
.u-mod-explique-faq__list {
  display: flex;
  flex-direction: column;
}

.mod-faq-item {
  border-top: 1px solid var(--rule);
  padding: 0;
}
.mod-faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}
.mod-faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.mod-faq-item__q::-webkit-details-marker { display: none; }
.mod-faq-item__q:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.mod-faq-item__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--c-accent);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mod-faq-item[open] .mod-faq-item__chevron {
  transform: rotate(180deg);
}
.mod-faq-item__a {
  overflow: hidden;
  padding: 0 0 1.5rem;
}
.mod-faq-item__a p {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--fg-soft);
  margin: 0;
  max-width: 60ch;
}
.mod-faq-item__a p strong {
  color: var(--fg);
  font-weight: 500;
}

/* Smooth open height (modern browsers) */
@supports (interpolate-size: allow-keywords) {
  :where(html) { interpolate-size: allow-keywords; }
  .mod-faq-item {
    transition: height 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* ============================================================
   G. CTA — u3 (brun foncé)
   ============================================================ */
.u-mod-explique-cta {
  padding: 9rem var(--gutter) 8rem;
  min-height: auto;
}
.u-mod-explique-cta__in {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.u-mod-explique-cta__in .u__brow {
  justify-content: center;
}
.u-mod-explique-cta__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 1.5rem;
}
.u-mod-explique-cta__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-mod-explique-cta__lead {
  font-family: var(--f-body);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--fg-soft);
  max-width: 56ch;
  margin: 0 auto 2.75rem;
}
.u-mod-explique-cta__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.25rem 3rem;
}
.u-mod-explique-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  transition: gap 240ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
}
.u-mod-explique-cta__link:hover {
  gap: 18px;
  opacity: 0.88;
}
.u-mod-explique-cta__link-arrow {
  color: var(--c-gold);
}
.u-mod-explique-cta__link--primary {
  color: var(--c-accent);
}
.u-mod-explique-cta__link--primary .u-mod-explique-cta__link-arrow {
  color: var(--c-accent);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .u-mod-explique-cta__link--primary .u-mod-explique-cta__link-arrow {
    animation: modCtaArrowPulse 2.4s ease-in-out infinite;
  }
}
@keyframes modCtaArrowPulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* ============================================================
   RESPONSIVE — mod-explique
   ============================================================ */
@media (max-width: 1080px) {
  .u-mod-explique-composants__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .u-mod-explique-composants__grid > li:nth-child(4),
  .u-mod-explique-composants__grid > li:nth-child(5) {
    grid-column: span 1;
  }
}
@media (max-width: 900px) {
  .u-mod-explique-hero {
    padding: 7rem var(--gutter) 4rem;
  }
  .u-mod-explique-hero__in {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-mod-explique-hero__visual {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
  }
  .u-mod-explique-equation__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .u-mod-explique-equation__sep {
    left: 0;
    right: 0;
    top: 50%;
    bottom: auto;
    width: 100%;
    height: 1px;
    transform: scaleX(0) translateY(0);
    transform-origin: left center;
  }
  [data-reveal].is-visible .u-mod-explique-equation__sep,
  .u-mod-explique-equation__grid.is-visible .u-mod-explique-equation__sep {
    transform: scaleX(1) translateY(0);
  }
  .u-mod-explique-equation__col-visual {
    max-width: 180px;
  }
  .u-mod-explique-anatomie {
    padding: 5rem var(--gutter);
    min-height: 120vh;
  }
  .u-mod-explique-anatomie__viewport {
    aspect-ratio: 4 / 5;
    max-height: 65vh;
  }
  .u-mod-explique-composants__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .u-mod-explique-nh35__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .u-mod-explique-nh35__stat {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .u-mod-explique-nh35__stat:nth-child(2n + 1) {
    border-right: 1px solid var(--rule);
  }
  .u-mod-explique-nh35__stat:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  .u-mod-explique-cta__links {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
}
@media (max-width: 560px) {
  .u-mod-explique-hero {
    padding: 6rem var(--gutter) 3rem;
  }
  .u-mod-explique-equation,
  .u-mod-explique-anatomie,
  .u-mod-explique-composants,
  .u-mod-explique-nh35,
  .u-mod-explique-faq,
  .u-mod-explique-cta {
    padding: 5rem var(--gutter) 4rem;
  }
  .u-mod-explique-composants__grid {
    grid-template-columns: 1fr;
  }
  .u-mod-explique-nh35__stats {
    grid-template-columns: 1fr;
  }
  .u-mod-explique-nh35__stat {
    border-right: none !important;
    border-bottom: 1px solid var(--rule);
  }
  .u-mod-explique-nh35__stat:last-child {
    border-bottom: none;
  }
  .u-mod-explique-anatomie {
    min-height: 130vh;
  }
}

/* ============================================================
   REDUCED MOTION — mod-explique
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-mod-explique [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .mod-hero-piece {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .u-mod-explique-equation__sep {
    transform: translateX(-50%) scaleY(1) !important;
    transition: none !important;
  }
  .mod-anatomie-piece,
  .mod-anatomie-label {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .mod-comp-svg__path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .mod-faq-item__chevron,
  .u-mod-explique-cta__link {
    transition: none !important;
  }
  .u-mod-explique-cta__link--primary .u-mod-explique-cta__link-arrow,
  .u-mod-explique-anatomie__hint-arrow,
  .mod-nh35-gear,
  .eq-change-piece--bezel,
  .eq-change-piece--dial,
  .eq-change-piece--hands,
  .eq-change-glint,
  .eq-change-link-top,
  .eq-change-link-bot {
    animation: none !important;
    transform: none !important;
  }
  .u-mod-explique-anatomie__hint {
    opacity: 0.5 !important;
  }
}

/* ============================================================================
   PAGE JOURNAL (blog list) & PAGE ARTICLE — `templates/blog.liquid` + `templates/article.liquid`
   ----------------------------------------------------------------------------
   Pattern : lerp d'univers (IntersectionObserver), reveals fade+slide,
             reading progress bar (article), sticky TOC desktop (article),
             parallax leger sur featured img (article).
   IMPORTANT : .page-journal / .page-article + .u sont transparents — c'est
   le body qui porte le bg du lerp. Ne JAMAIS hardcoder --bg/--fg ni
   background sur ces wrappers.
   ============================================================================ */

.page-journal,
.page-article {
  /* Pas de dégradé sur les pages blog (lecture longue) — fond ivoire fixe.
     On override --bg/--fg/--line localement pour que les éléments enfants
     qui consomment ces vars utilisent les valeurs ivoire de cette page. */
  background: #F2EBDD;
  color: #1B1B1B;
  --bg: #F2EBDD;
  --fg: #1B1B1B;
  --fg-soft: rgba(27, 27, 27, 0.7);
  --fg-mute: rgba(27, 27, 27, 0.45);
  --rule: rgba(27, 27, 27, 0.12);
  --line: #B83228;
}
.page-journal .u,
.page-article .u {
  background: transparent;
  color: inherit;
}

/* Reveal default state */
.page-journal [data-reveal],
.page-article [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.page-journal [data-reveal].is-visible,
.page-article [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.page-journal [data-reveal][data-step],
.page-article [data-reveal][data-step] {
  transition-delay: calc((var(--step-index, 0)) * 90ms);
}

/* ============================================================
   A. ARTICLE CARD (snippet partage) — 3 variantes
   ============================================================ */
.acard {
  display: block;
  position: relative;
}
.acard__link {
  display: block;
  color: inherit;
  text-decoration: none;
  outline-offset: 4px;
}
.acard__link:focus-visible {
  outline: 2px solid var(--c-accent);
}

.acard__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(27, 27, 27, 0.02);
  margin-bottom: 1.4rem;
}
.acard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.acard__link:hover .acard__img,
.acard__link:focus-visible .acard__img {
  transform: scale(1.04);
}
.acard__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--fg);
  opacity: 0.4;
}
.acard__placeholder svg {
  width: 80%;
  height: 80%;
}

.acard__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.acard__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.acard__date {
  color: var(--fg-soft);
}
.acard__sep {
  opacity: 0.5;
}
.acard__tag {
  color: var(--fg-soft);
}

.acard__title {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 0;
  color: var(--fg);
  line-height: 1.05;
}

.acard__excerpt {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--fg-soft);
}

.acard__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  margin-top: 0.4rem;
  position: relative;
}
.acard__cta-lbl {
  position: relative;
}
.acard__cta-lbl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.acard__link:hover .acard__cta-lbl::after,
.acard__link:focus-visible .acard__cta-lbl::after {
  transform-origin: left;
  transform: scaleX(1);
}
.acard__cta-arr {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.acard__link:hover .acard__cta-arr,
.acard__link:focus-visible .acard__cta-arr {
  transform: translateX(4px);
}

/* Variant featured — grande card hero (2 colonnes desktop) */
.acard--featured .acard__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}
.acard--featured .acard__title {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-variation-settings: 'SOFT' 40;
  letter-spacing: -0.04em;
}
.acard--featured .acard__excerpt {
  font-size: 1.05rem;
  line-height: 1.65;
}
@media (min-width: 800px) {
  .acard--featured .acard__link {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .acard--featured .acard__body {
    gap: 0.85rem;
  }
}

/* Variant default — grid 2col */
.acard--default .acard__title {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
}

/* Variant compact — 3 articles related */
.acard--compact .acard__media {
  aspect-ratio: 4 / 3;
  margin-bottom: 1rem;
}
.acard--compact .acard__title {
  font-size: 1.15rem;
  line-height: 1.15;
}
.acard--compact .acard__cta {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* ============================================================
   B. JOURNAL HERO — u1 (ivoire)
   ============================================================ */
.u-journal-hero {
  padding: 10rem var(--gutter) 5rem;
  min-height: auto;
}
.u-journal-hero__in {
  max-width: 900px;
  margin: 0 auto;
}
.u-journal-hero__copy {
  text-align: left;
}
.u-journal-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  line-height: 0.94;
  font-weight: 300;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 40;
  margin: 0.5rem 0 0;
  max-width: 12ch;
}
.u-journal-hero__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-journal-hero__lead {
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-top: 1.6rem;
  max-width: 52ch;
  color: var(--fg-soft);
}
.u-journal-hero__count {
  margin-top: 1.8rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-journal-hero__count .mono {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ============================================================
   C. JOURNAL FEATURED — u4 (bleu vintage)
   ============================================================ */
.u-journal-featured {
  padding: 6rem var(--gutter) 6rem;
}
.u-journal-featured__in {
  max-width: var(--content-max);
  margin: 0 auto;
}
.u-journal-featured__head {
  margin-bottom: 3rem;
  max-width: 60ch;
}
.u-journal-featured__intro {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.2;
  font-weight: 300;
  margin: 0.8rem 0 0;
  color: var(--fg);
}
.u-journal-featured__intro em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-gold);
}
.u-journal-featured__card {
  padding: 0;
}

/* ============================================================
   D. JOURNAL LIST — u1 (ivoire)
   ============================================================ */
.u-journal-list {
  padding: 6rem var(--gutter) 6rem;
}
.u-journal-list__in {
  max-width: var(--content-max);
  margin: 0 auto;
}
.u-journal-list__head {
  margin-bottom: 3rem;
}
.u-journal-list__intro {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  font-weight: 300;
  margin: 0.6rem 0 0;
  color: var(--fg);
}
.u-journal-list__intro em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-journal-list__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 2.4rem;
}
@media (min-width: 800px) {
  .u-journal-list__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 3rem;
  }
}
.u-journal-list__item {
  display: block;
}

/* ============================================================
   E. JOURNAL TAGS — u2 (sable clair)
   ============================================================ */
.u-journal-tags {
  padding: 5rem var(--gutter) 5rem;
}
.u-journal-tags__in {
  max-width: 1100px;
  margin: 0 auto;
}
.u-journal-tags__head {
  margin-bottom: 2rem;
}
.u-journal-tags__intro {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  font-weight: 300;
  margin: 0.5rem 0 0;
  color: var(--fg);
}
.u-journal-tags__intro em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-journal-tags__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 0.8rem;
}
.u-journal-tags__item {
  display: block;
}
.u-journal-tags__pill {
  display: inline-block;
  padding: 0.55rem 1.05rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.u-journal-tags__pill:hover,
.u-journal-tags__pill:focus-visible {
  border-color: var(--fg);
  outline: none;
}
.u-journal-tags__pill.is-current {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* ============================================================
   F. JOURNAL END (pagination + CTA) — u3 (brun fonce)
   ============================================================ */
.u-journal-end {
  padding: 6rem var(--gutter) 7rem;
}
.u-journal-end__in {
  max-width: 1100px;
  margin: 0 auto;
}
.u-journal-end__pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 5rem;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--rule);
}
.u-journal-end__pagination-lbl {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-journal-end__pages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.u-journal-end__pageln {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
  text-decoration: none;
  border: 1px solid var(--rule);
  background: transparent;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  min-height: 36px;
}
.u-journal-end__pageln:hover,
.u-journal-end__pageln:focus-visible {
  border-color: var(--fg);
  color: var(--fg);
  outline: none;
}
.u-journal-end__pageln.is-current {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.u-journal-end__pageln.is-ellipsis {
  border-color: transparent;
  background: transparent;
  cursor: default;
}

.u-journal-end__cta {
  max-width: 60ch;
}
.u-journal-end__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
}
.u-journal-end__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-journal-end__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: 1.5rem;
  max-width: 52ch;
  color: var(--fg-soft);
}
.u-journal-end__links {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.u-journal-end__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  width: max-content;
}
.u-journal-end__link-lbl {
  position: relative;
}
.u-journal-end__link-lbl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-journal-end__link:hover .u-journal-end__link-lbl::after,
.u-journal-end__link:focus-visible .u-journal-end__link-lbl::after {
  transform-origin: left;
  transform: scaleX(1);
}
.u-journal-end__link-val {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-journal-end__link:hover .u-journal-end__link-val,
.u-journal-end__link:focus-visible .u-journal-end__link-val {
  transform: translateX(4px);
}

/* ============================================================
   G. READING PROGRESS BAR (article)
   ============================================================ */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  z-index: 95;
  pointer-events: none;
}
.article-progress::after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  background: var(--c-accent);
  transform-origin: left;
  transform: scaleX(var(--article-progress, 0));
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .article-progress::after {
    transition: none;
  }
}

/* ============================================================
   H. ARTICLE HERO — u1 (ivoire)
   ============================================================ */
.u-article-hero {
  padding: 9rem var(--gutter) 3rem;
}
.u-article-hero__in {
  max-width: 900px;
  margin: 0 auto;
}
.u-article-hero__head {
  text-align: left;
  margin-bottom: 3rem;
}
.u-article-hero__tags {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.6rem;
}
.u-article-hero__tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 200ms ease;
}
.u-article-hero__tag:hover,
.u-article-hero__tag:focus-visible {
  border-color: var(--fg);
  outline: none;
}
.u-article-hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5.8vw, 4.5rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 40;
  margin: 0.6rem 0 0;
  max-width: 22ch;
}
.u-article-hero__lede {
  font-family: var(--f-body);
  font-size: 1.15rem;
  line-height: 1.65;
  margin-top: 1.5rem;
  max-width: 60ch;
  color: var(--fg-soft);
}
.u-article-hero__meta {
  margin-top: 2rem;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.u-article-hero__meta-sep {
  opacity: 0.5;
}
.u-article-hero__visual {
  position: relative;
  margin: 3rem 0 0;
  padding: 0;
}
.u-article-hero__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(27, 27, 27, 0.02);
  will-change: transform;
}
.u-article-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.u-article-hero__fig {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--bg);
  border: 1px solid var(--rule);
  padding: 5px 11px;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* ============================================================
   I. ARTICLE BODY — u1 (ivoire) — lecture longue, max-width 720
   ============================================================ */
.u-article-body {
  padding: 2rem var(--gutter) 6rem;
}
.u-article-body__in {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.u-article-body__content {
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--f-body);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--fg);
}
.u-article-body__content p {
  margin: 0 0 1.2rem;
}
.u-article-body__content p:last-child {
  margin-bottom: 0;
}
.u-article-body__content h2 {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: -0.035em;
  font-variation-settings: 'SOFT' 50;
  margin: 3rem 0 1.2rem;
  scroll-margin-top: 100px;
}
.u-article-body__content h3 {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.2;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  margin: 2.4rem 0 0.8rem;
  color: var(--c-blue);
  scroll-margin-top: 100px;
}
.u-article-body__content em,
.u-article-body__content i {
  font-style: italic;
}
.u-article-body__content strong,
.u-article-body__content b {
  font-weight: 700;
}
.u-article-body__content a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity 200ms ease;
}
.u-article-body__content a:hover,
.u-article-body__content a:focus-visible {
  opacity: 0.72;
}
.u-article-body__content ul,
.u-article-body__content ol {
  margin: 0 0 1.4rem;
  padding-left: 1.5rem;
}
.u-article-body__content li {
  margin: 0.4rem 0;
}
.u-article-body__content blockquote {
  margin: 2rem 0;
  padding: 0.4rem 0 0.4rem 1.5rem;
  border-left: 2px solid var(--c-blue);
  font-family: var(--f-hand, 'Caveat', cursive);
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--c-blue);
  font-style: normal;
}
.u-article-body__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid var(--rule);
}
.u-article-body__content figure {
  margin: 2rem 0;
}
.u-article-body__content figcaption {
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  text-align: center;
  margin-top: 0.6rem;
}
.u-article-body__content hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}
.u-article-body__content pre,
.u-article-body__content code {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  background: rgba(27, 27, 27, 0.04);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
}
.u-article-body__content pre {
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.6rem 0;
  line-height: 1.5;
}

/* Sticky TOC — desktop only */
.u-article-body__toc {
  display: none;
}
@media (min-width: 1024px) {
  .u-article-body__in {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3rem;
  }
  .u-article-body__content {
    grid-column: 2 / -1;
    margin: 0;
  }
  .u-article-body__toc {
    display: block;
    grid-column: 1 / 2;
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .u-article-body__toc[hidden] {
    display: none;
  }
}
.u-article-body__toc-title {
  font-family: var(--f-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin: 0 0 1rem;
}
.u-article-body__toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-left: 1px solid var(--rule);
}
.u-article-body__toc-item {
  display: block;
}
.u-article-body__toc-link {
  display: block;
  padding: 0.2rem 0 0.2rem 1rem;
  margin-left: -1px;
  font-family: var(--f-body);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--fg-soft);
  text-decoration: none;
  border-left: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.u-article-body__toc-link:hover,
.u-article-body__toc-link:focus-visible {
  color: var(--fg);
  outline: none;
}
.u-article-body__toc-link.is-active {
  color: var(--c-accent);
  border-left-color: var(--c-accent);
  font-weight: 500;
}

/* ============================================================
   J. ARTICLE RELATED — u2 (sable clair)
   ============================================================ */
.u-article-related {
  padding: 6rem var(--gutter) 6rem;
}
.u-article-related__in {
  max-width: var(--content-max);
  margin: 0 auto;
}
.u-article-related__head {
  margin-bottom: 3rem;
}
.u-article-related__intro {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  font-weight: 300;
  margin: 0.6rem 0 0;
  color: var(--fg);
}
.u-article-related__intro em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-article-related__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 700px) {
  .u-article-related__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* ============================================================
   K. ARTICLE CTA — u3 (brun fonce)
   ============================================================ */
.u-article-cta {
  padding: 6rem var(--gutter) 7rem;
}
.u-article-cta__in {
  max-width: 900px;
  margin: 0 auto;
}
.u-article-cta__title {
  font-family: var(--f-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.04em;
  font-variation-settings: 'SOFT' 50;
  margin: 0.5rem 0 0;
}
.u-article-cta__title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 100;
  color: var(--c-accent);
}
.u-article-cta__lead {
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-top: 1.5rem;
  max-width: 56ch;
  color: var(--fg-soft);
}
.u-article-cta__links {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.u-article-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0;
  font-family: var(--f-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  width: max-content;
}
.u-article-cta__link--soft {
  color: var(--fg-soft);
  font-size: 0.68rem;
}
.u-article-cta__link-lbl {
  position: relative;
}
.u-article-cta__link-lbl::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-article-cta__link:hover .u-article-cta__link-lbl::after,
.u-article-cta__link:focus-visible .u-article-cta__link-lbl::after {
  transform-origin: left;
  transform: scaleX(1);
}
.u-article-cta__link-val {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.u-article-cta__link:hover .u-article-cta__link-val,
.u-article-cta__link:focus-visible .u-article-cta__link-val {
  transform: translateX(4px);
}

/* ============================================================
   L. MOBILE — < 700px
   ============================================================ */
@media (max-width: 700px) {
  .u-journal-hero { padding: 6rem var(--gutter) 3.5rem; }
  .u-journal-featured,
  .u-journal-list,
  .u-journal-tags,
  .u-journal-end,
  .u-article-hero,
  .u-article-body,
  .u-article-related,
  .u-article-cta { padding-left: 1.1rem; padding-right: 1.1rem; }
  .u-journal-featured { padding-top: 4rem; padding-bottom: 4rem; }
  .u-journal-list { padding-top: 4rem; padding-bottom: 4rem; }
  .u-journal-tags { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .u-journal-end { padding-top: 4.5rem; padding-bottom: 5rem; }
  .u-article-hero { padding-top: 6rem; padding-bottom: 1.5rem; }
  .u-article-body { padding-top: 1rem; padding-bottom: 4rem; }
  .u-article-body__content { font-size: 1.05rem; line-height: 1.7; }
  .u-article-body__content h2 { margin: 2rem 0 1rem; }
  .u-article-related { padding-top: 4rem; padding-bottom: 4rem; }
  .u-article-cta { padding-top: 4.5rem; padding-bottom: 5rem; }
  .acard--featured .acard__title { font-size: 1.8rem; }
}

/* ============================================================
   M. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-journal [data-reveal],
  .page-article [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .acard__img {
    transition: none !important;
  }
  .acard__link:hover .acard__img,
  .acard__link:focus-visible .acard__img {
    transform: none !important;
  }
  .u-article-hero__img-wrap {
    transform: none !important;
  }
}



/* ============================================================
   PAGE CONTACT — fond ivoire fixe (pas de dégradé d'univers)
   Layout 2 colonnes desktop : formulaire (60%) + sidebar infos (40%).
   Mobile : empilé 1 colonne, sidebar en dessous.
   ============================================================ */

.page-contact {
  background: #F2EBDD;
  color: #1B1B1B;
  --bg: #F2EBDD;
  --fg: #1B1B1B;
  --fg-soft: rgba(27, 27, 27, 0.7);
  --fg-mute: rgba(27, 27, 27, 0.45);
  --rule: rgba(27, 27, 27, 0.12);
  --line: #B83228;
}
.page-contact .u {
  background: transparent;
  color: inherit;
}

/* ---------- Hero contact ---------- */
.u-contact-hero {
  padding: 5rem var(--gutter) 2.5rem;
}
.u-contact-hero__in {
  max-width: 980px;
  margin-inline: auto;
}
.u-contact-hero .crumb {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 2rem;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.u-contact-hero .crumb a {
  color: var(--fg-soft);
  text-decoration: none;
  transition: color 200ms;
}
.u-contact-hero .crumb a:hover {
  color: var(--c-accent, #B83228);
}
.u-contact-hero .crumb__sep { opacity: 0.4; }

.u-contact-hero__head .u__brow {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  display: block;
  margin-bottom: 1rem;
}
.u-contact-hero h1 {
  font-family: var(--f-display, "Fraunces", serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 70;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 1.2rem;
  color: var(--fg);
}
.u-contact-hero h1 em {
  font-style: italic;
  color: var(--c-accent, #B83228);
}
.u-contact-hero__lead {
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 56ch;
}

/* ---------- Body : grid form + sidebar ---------- */
.u-contact-body {
  padding: 1rem var(--gutter) 5rem;
}
.u-contact-body__in {
  max-width: 1100px;
  margin-inline: auto;
}
.u-contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ---------- Formulaire ---------- */
.u-contact-form-wrap {
  min-width: 0;
}
.u-contact-form__title {
  font-family: var(--f-display, "Fraunces", serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  margin: 0 0 1.8rem;
  letter-spacing: -0.005em;
}
.u-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.u-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.u-contact-field label {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-soft);
}
.u-contact-field label span {
  color: var(--fg-mute);
  margin-left: 4px;
}
.u-contact-field__opt {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.72em;
  opacity: 0.7;
}
.u-contact-field input,
.u-contact-field textarea,
.u-contact-field select {
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.55rem 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms;
  -webkit-appearance: none;
  appearance: none;
}
.u-contact-field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
}
.u-contact-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-soft) 50%),
                    linear-gradient(135deg, var(--fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
.u-contact-field input::placeholder,
.u-contact-field textarea::placeholder {
  color: var(--fg-mute);
  font-style: italic;
}
.u-contact-field input:focus,
.u-contact-field textarea:focus,
.u-contact-field select:focus {
  border-bottom-color: var(--c-accent, #B83228);
}
.u-contact-field input:focus-visible,
.u-contact-field textarea:focus-visible,
.u-contact-field select:focus-visible {
  outline: 2px solid var(--c-accent, #B83228);
  outline-offset: 4px;
}

.u-contact-form__submit {
  margin-top: 1rem;
  align-self: flex-start;
  min-width: 240px;
}

.u-contact-form__success {
  background: rgba(184, 50, 40, 0.06);
  border-left: 2px solid var(--c-accent, #B83228);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: var(--f-body, "Inria Serif", serif);
}
.u-contact-form__success strong {
  font-family: var(--f-display, "Fraunces", serif);
  font-weight: 400;
  font-size: 1.1rem;
}
.u-contact-form__success span {
  color: var(--fg-soft);
  font-size: 0.92rem;
}

.u-contact-form__errors {
  background: rgba(184, 50, 40, 0.08);
  border-left: 2px solid var(--c-accent, #B83228);
  padding: 1rem 1.2rem;
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 0.92rem;
}
.u-contact-form__errors ul {
  margin: 0;
  padding-left: 1.2rem;
}

.u-contact-form__legal {
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--fg-mute);
  margin: 0;
  max-width: 56ch;
}
.u-contact-form__legal a {
  color: var(--fg-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rule);
}
.u-contact-form__legal a:hover {
  color: var(--c-accent, #B83228);
}

/* ---------- Sidebar infos ---------- */
.u-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  position: sticky;
  top: 100px;
}
.u-contact-info__block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
}
.u-contact-info__block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.u-contact-info__label {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.u-contact-info__value {
  font-family: var(--f-display, "Fraunces", serif);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--fg);
  letter-spacing: -0.005em;
  text-decoration: none;
}
a.u-contact-info__value {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
a.u-contact-info__value:hover,
a.u-contact-info__value:focus-visible {
  color: var(--c-accent, #B83228);
  border-bottom-color: var(--c-accent, #B83228);
}
.u-contact-info__hint {
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--fg-soft);
  margin-top: 0.2rem;
  font-style: italic;
}
.u-contact-info__list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.u-contact-info__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 0.88rem;
}
.u-contact-info__list li > span {
  color: var(--fg-soft);
}
.u-contact-info__list li strong {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
}

/* ---------- Pre-footer liens utiles ---------- */
.u-contact-links {
  padding: 4rem var(--gutter);
  border-top: 1px solid var(--rule);
}
.u-contact-links__in {
  max-width: 1100px;
  margin-inline: auto;
}
.u-contact-links__title {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin: 0 0 1.8rem;
}
.u-contact-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2.5rem;
}
.u-contact-links__list a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 0;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms;
}
.u-contact-links__list a:hover,
.u-contact-links__list a:focus-visible {
  border-bottom-color: var(--c-accent, #B83228);
}
.u-contact-links__lbl {
  font-family: var(--f-display, "Fraunces", serif);
  font-size: 1.15rem;
  color: var(--fg);
}
.u-contact-links__list a:hover .u-contact-links__lbl,
.u-contact-links__list a:focus-visible .u-contact-links__lbl {
  color: var(--c-accent, #B83228);
}
.u-contact-links__hint {
  font-family: var(--f-body, "Inria Serif", serif);
  font-size: 0.88rem;
  color: var(--fg-soft);
  font-style: italic;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .u-contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .u-contact-info {
    position: static;
  }
  .u-contact-links__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 600px) {
  .u-contact-hero { padding: 3rem var(--gutter) 1.5rem; }
  .u-contact-body { padding: 1rem var(--gutter) 3rem; }
  .u-contact-form__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .u-contact-info__value,
  .u-contact-field input,
  .u-contact-field textarea,
  .u-contact-field select,
  .u-contact-links__list a,
  .u-contact-links__list a:hover .u-contact-links__lbl {
    transition: none !important;
  }
}

/* ============================================================
   MOBILE HOME OPTIMIZATIONS (v13.1 — 2026-05-28)
   Objectif : home plus courte, plus fluide, carousels swipe natifs.
   Toutes les modifs sont confinées a @media (max-width: 768px) /
   (max-width: 600px) / (hover: none) — DESKTOP INTACT.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Tighter section padding (~ -35-40% sur padding-block) ---- */
  .u { padding-block: clamp(2.75rem, 8vw, 4rem); }
  .u-hero { padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 6vw, 3rem); }
  .u-pitch,
  .u-teaser,
  .u-presentation,
  .u-chouchou,
  .u-offrir,
  .u-journal,
  .u-faq,
  .u-bijoux,
  .u-newsletter { padding-block: clamp(2.5rem, 7vw, 3.75rem); }

  /* ---- Typography rebalance mobile ---- */
  .u-hero h1,
  .u-hero__title {
    font-size: clamp(2rem, 8.5vw, 2.75rem) !important;
    line-height: 1.05;
    letter-spacing: -0.025em;
  }
  .u h2,
  .u__heading,
  .u-pitch__heading,
  .u-teaser__heading,
  .u-presentation__heading,
  .u-chouchou__heading,
  .u-offrir__heading,
  .u-journal__heading,
  .u-faq__heading,
  .u-bijoux__heading,
  .u-newsletter__heading {
    font-size: clamp(1.65rem, 6.5vw, 2.15rem) !important;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }
  .u__lead,
  .u-pitch__body,
  .u-presentation__lead,
  .u-journal__lead,
  .u-bijoux__sub,
  .u-newsletter__subline {
    font-size: 1rem !important;
    line-height: 1.55;
  }
  .u__brow { font-size: 0.65rem !important; letter-spacing: 0.16em; }

  /* ---- Hero photo plus compact ---- */
  .u-hero__photo-wrap { max-width: 78vw; margin-inline: auto; }

  /* ---- Perf : sections hors viewport initial ---- */
  .u-presentation,
  .u-chouchou,
  .u-offrir,
  .u-journal,
  .u-faq,
  .u-bijoux,
  .u-newsletter {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }

  /* ---- FAQ compact ---- */
  .u-faq__item > summary {
    padding-block: 1rem !important;
    font-size: 1rem;
    min-height: 48px;
  }
  .u-faq__q { font-size: 1rem !important; line-height: 1.35; }
  .u-faq__a { font-size: 0.95rem; line-height: 1.55; }

  /* ---- Tap targets a11y (>= 44px) ---- */
  .btn,
  .u-faq__item summary,
  .u-newsletter__submit,
  .header__nav a,
  .header__cart-trigger { min-height: 44px; }

  /* ---- Input font-size >= 16px (evite zoom iOS) ---- */
  input[type="email"],
  input[type="text"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select { font-size: 16px !important; }
}

/* ============================================================
   CAROUSELS MOBILES NATIFS — scroll-snap, zero JS
   Sections : presentation-montres, journal-teaser, bijoux-soon.
   Le grid devient un flex horizontal swipable UNIQUEMENT sur
   mobile — desktop intact.
   ============================================================ */

@media (max-width: 768px) {

  /* Pattern carousel commun */
  .u-presentation__grid,
  .u-journal__grid,
  .u-bijoux__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter, 1.25rem);
    gap: 0.85rem !important;
    padding: 0.25rem var(--gutter, 1.25rem) 1.5rem;
    margin-inline: calc(-1 * var(--gutter, 1.25rem));
    margin-block-end: 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .u-presentation__grid::-webkit-scrollbar,
  .u-journal__grid::-webkit-scrollbar,
  .u-bijoux__grid::-webkit-scrollbar { display: none; height: 0; }

  /* Cards : largeur ~78%, peek next */
  .u-presentation__grid > .u-presentation__item,
  .u-journal__grid > li,
  .u-bijoux__grid > .u-bijoux__card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
  }
  .u-journal__grid > li > .u-journal__card { height: 100%; display: flex; flex-direction: column; }

  /* Padding card mobile compact */
  .u-presentation__item { padding: 1.5rem 1.25rem 1.5rem !important; }
  .u-presentation__item-vis,
  .memoria-ill-wrap { margin: -1.5rem -1.25rem 1rem !important; aspect-ratio: 16 / 10; }

  /* Bleed-end : permet de bien scroller jusqu'au dernier item */
  .u-presentation__grid::after,
  .u-journal__grid::after,
  .u-bijoux__grid::after {
    content: '';
    flex: 0 0 calc(var(--gutter, 1.25rem) - 0.85rem);
  }
}

/* Indicateur "Glisser pour voir" sous chaque carousel — sobre, mono */
@media (max-width: 768px) {
  .u-presentation__in,
  .u-journal__in,
  .u-bijoux__in {
    position: relative;
  }
  .u-presentation__in::after,
  .u-journal__in::after,
  .u-bijoux__in::after {
    content: 'Glisser pour voir';
    display: block;
    text-align: center;
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute, rgba(27,27,27,0.5));
    opacity: 0.7;
    margin-block-start: -0.25rem;
    margin-block-end: 0.75rem;
    pointer-events: none;
  }
}

/* ============================================================
   STICKY CTA mobile — renforcement tap target + safe-area iOS
   ============================================================ */

@media (max-width: 768px) {
  .memoria-sticky-cta {
    min-height: 56px;
    padding-block: 0.95rem !important;
    padding-inline: 1.25rem !important;
    padding-bottom: calc(0.95rem + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 0.95rem;
  }
  .memoria-sticky-cta a,
  .memoria-sticky-cta button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   Animations continues desactivees sur mobile (perf INP/CPU)
   ============================================================ */

@media (max-width: 768px) {
  [data-parallax],
  .ill-rotate-slow,
  .ill-shimmer,
  .ill-pulse,
  .ill-breathe,
  .ill-hand-h,
  .ill-hand-m {
    animation: none !important;
  }
}

/* ============================================================
   < 600px — affinage iPhone SE / petits Android
   ============================================================ */

@media (max-width: 600px) {
  :root { --gutter: 1.1rem; }
  .u-hero h1 { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
  .u h2 { font-size: clamp(1.5rem, 7vw, 1.95rem) !important; }

  /* Cards un peu plus larges (peek next ~ 12%) */
  .u-presentation__grid > .u-presentation__item,
  .u-journal__grid > li,
  .u-bijoux__grid > .u-bijoux__card {
    flex: 0 0 82%;
  }
}

/* ============================================================
   Hover-none (touch) — pas de micro-interactions hover coûteuses
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  .u-presentation__item:hover { transform: none; box-shadow: none; }
  .u-presentation__item:hover::before { transform: scaleX(0.18); }
  .u-journal__card:hover img { transform: none; }
}

/* ============================================================
   Reduced motion — desactive scroll smooth des carousels
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .u-presentation__grid,
  .u-journal__grid,
  .u-bijoux__grid { scroll-behavior: auto; }
}

/* ============================================================
   V14 MOBILE FIXES — 2026-05-28
   3 bugs identifiés client sur la home mobile :
   1. Overflow horizontal (carousels + headings débordent)
   2. Widget montre interactive (ofw) trop petit / illisible
   3. Input email newsletter trop haut
   ============================================================ */

/* ---------- BUG 1 : OVERFLOW HORIZONTAL ---------- */

/* Confiner le débordement des carousels au container parent.
   Le margin-inline négatif fait sortir le grid de son container ;
   on clippe au niveau du wrapper __in pour empêcher le scroll global. */
@media (max-width: 768px) {
  .u-presentation__in,
  .u-journal__in,
  .u-bijoux__in {
    overflow-x: hidden;
    /* Le pseudo ::after "Glisser pour voir" reste OK car block normal. */
  }

  /* Filet de sécurité global : aucune section ne doit jamais débordée
     horizontalement de son container .u__in. Si une img/svg/iframe
     échappe par accident, on la clippe. */
  .u {
    overflow-x: clip;
  }

  /* Force tous les médias et SVG à rester dans leur container.
     Évite qu'un SVG sans viewBox réel ou une img sans width
     déborde à droite. */
  .u img,
  .u svg,
  .u iframe,
  .u video,
  .u picture { max-width: 100%; }

  /* Force le wrap des mots longs dans les heading et leads
     (français : "trois-pièces", "fiabilité"...) — évite les
     mots qui forcent une largeur > viewport. */
  .u h1, .u h2, .u h3, .u h4,
  .u-presentation__head h2,
  .u-bijoux__head h2,
  .u-journal__head h2,
  .u-teaser h2,
  .u-newsletter h2 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Les titres ratent leur règle font-size mobile car les sélecteurs
     ciblent .u-presentation__heading (n'existe pas) au lieu de
     .u-presentation__head h2. On corrige. */
  .u-presentation__head h2,
  .u-bijoux__head h2,
  .u-journal__head h2 {
    font-size: clamp(1.65rem, 6.5vw, 2.15rem) !important;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  /* Idem pour les leads — sélecteur __sub pour bijoux, __lead pour
     presentation/journal — assurer une taille mobile correcte. */
  .u-presentation__lead p,
  .u-bijoux__sub,
  .u-journal__lead {
    font-size: 1rem !important;
    line-height: 1.55;
  }

  /* Le teaser foot ".u-teaser__foot" centre le CTA mais hérite d'une
     border-top qui ne peut dépasser. Reset au cas où. */
  .u-teaser__foot,
  .u-teaser__head,
  .u-presentation__head,
  .u-bijoux__head,
  .u-journal__head {
    max-width: 100%;
  }

  /* Le head right (X modèles) en teaser : sur mobile il passe en bloc
     normal mais peut avoir des chiffres + texte qui forcent un wrap. */
  .u-teaser__head-right {
    word-wrap: break-word;
  }

  /* Header bijoux : centré, mais le max-width 56ch peut être trop large
     si gutter étroite. Garantir qu'il reste dans le viewport. */
  .u-bijoux__head,
  .u-presentation__head {
    max-width: min(56ch, 100%);
    padding-inline: 0;
  }
}

/* ---------- BUG 2 : WIDGET OFW (ofw watch) ---------- */

/* Sur mobile, agrandir le widget pour la lisibilité et adapter les
   chiffres + tap targets. Le widget est en flex-column dans .u-offrir__in
   donc on peut le rendre plus large sans casser le layout. */
@media (max-width: 768px) {
  .ofw-wrap {
    /* Plein écran -28px (gutter*2) — passe de min(460,88vw) à ~94vw */
    width: min(420px, 94vw) !important;
    height: min(420px, 94vw) !important;
  }
  .ofw {
    /* Rayon orbite plus grand pour que les chiffres soient mieux
       répartis et accessibles. */
    --ofw-r: clamp(125px, 36vw, 175px) !important;
  }
  .ofw__bullet {
    /* Tap target a11y >= 44px ET lisibilité chiffres */
    width: 48px !important;
    height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    /* Contraste renforcé sur fond bleu nuit U3 */
    background: rgba(0,0,0,0.55) !important;
    border-width: 2px;
  }
  .ofw__num {
    font-size: inherit;
  }
  /* Popup centre : agrandir et offrir + de marge */
  .ofw__center {
    width: 84% !important;
    max-width: none;
    padding: 16px 18px 14px !important;
  }
  .ofw__center-text {
    font-size: 0.9rem !important;
    line-height: 1.5;
  }
  .ofw__center-label {
    font-size: 0.62rem !important;
  }
  /* Brand top du dial — agrandir un poil pour cohérence */
  .ofw__brand {
    font-size: 1.05rem !important;
  }
  .ofw__brand-top small {
    font-size: 0.52rem !important;
  }
  /* Indication tap visible aux utilisateurs touch */
  .ofw__pos {
    /* Étendre la zone de tap autour du bullet (déjà 48px mais on
       ajoute une zone invisible de tap autour) */
    touch-action: manipulation;
  }
}

/* ---------- BUG 3 : INPUT EMAIL NEWSLETTER ---------- */

/* L'input email était devenu trop haut à cause de padding 14px 18px
   + font-size 16px iOS + min-height 44px hérité. Padding modéré pour
   une hauteur naturelle ~48px. */
@media (max-width: 768px) {
  .u-news-end__form {
    /* Stack vertical mobile pour respirer */
    flex-direction: column;
    gap: 0.75rem;
  }
  .u-news-end__form input[type='email'] {
    /* Padding modéré : 12px vertical donne ~16+24=40px texte+padding
       + bordures → hauteur réelle ~44-46px. Pas 80px. */
    padding: 12px 16px !important;
    font-size: 16px !important; /* anti-zoom iOS */
    line-height: 1.3;
    min-height: 46px;
    max-height: 52px; /* sécurité contre min-height qui dérape */
    flex: 1 1 auto !important;
    width: 100%;
    box-sizing: border-box;
  }
  .u-news-end__form .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 14px 22px;
  }
}

/* Même fix pour .u-bientot__form (autre formulaire newsletter
   "bientôt disponible") au cas où */
@media (max-width: 768px) {
  .u-bientot__form input[type='email'] {
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.3;
    min-height: 46px;
    max-height: 52px;
  }
}

/* ========== MOBILE BUG FIXES V14 — 2026-05-28 ==========
   Audit live Chrome MCP : 5 bugs critiques sur mobile.
   A — pages illisibles 1-3s au load (data-reveal lents)
   B — overflow horizontal collection (toolbar trop large)
   C — grille collection en 1 colonne au lieu de 2
   D — hyphens:auto coupe les mots dans h1-h4
   E — breadcrumb PDP affiche titre complet → short variant
   ====================================================== */

/* ---------- BUG A — désactive le reveal lent sur mobile ----------
   Cause : opacity:0 + transition 700ms + stagger 80-100ms + IO délai
   → perception "page blanche" pendant 1-3s.
   Fix : on force opacity:1 et on coupe les transitions sur ≤768px.
   À ré-implémenter plus tard avec un reveal ≤200ms si besoin. */
@media (max-width: 768px) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-step] {
    transition-delay: 0ms !important;
  }
}

/* ---------- BUG B — overflow horizontal collection ----------
   Coupables : .u-cat__active--empty (571px), .u-cat__toolbar-end (571px),
   .u-cat__sort form (571px), <select> natif (524px) → scrollWidth 589
   vs viewport 400 = +189px débord.
   Fix : contrainte width + filet overflow-x:hidden sur .u-cat. */
@media (max-width: 768px) {
  .u-cat,
  .u-cat__in {
    overflow-x: hidden;
  }
  .u-cat__toolbar {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .u-cat__toolbar-end {
    max-width: 100%;
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
  }
  .u-cat__sort {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    /* Stack label au-dessus du select pour éviter overflow */
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .u-cat__sort select,
  .u-cat__sort-select {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .u-cat__sort-label {
    width: 100%;
  }
  .u-cat__active,
  .u-cat__active--empty {
    max-width: 100%;
    width: 100%;
    flex-wrap: wrap;
    min-width: 0;
  }
}

/* ---------- BUG C — grille collection 2 colonnes mobile ----------
   Avant : 1 colonne → page 9820px de long, inutilisable.
   Après : 2 colonnes (12px gap) → ~2x plus court, scroll raisonnable.
   Sur très petits écrans (≤380px), retour à 1 col pour lisibilité. */
@media (max-width: 768px) {
  .u-grid__grid,
  [data-product-grid],
  [data-grid],
  .u-cat__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 380px) {
  .u-grid__grid,
  [data-product-grid],
  [data-grid],
  .u-cat__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- BUG D — pas de hyphens auto sur les titres ----------
   Symptôme atelier : H1 "Quelques mètres car-rés." (césure auto laide).
   Cause : fix mobile précédent imposait overflow-wrap:break-word +
   hyphens:auto sur h1-h4. On revient à manuel + overflow-wrap:anywhere
   en fallback safe (pas de tirets injectés). */
@media (max-width: 768px) {
  h1, h2, h3, h4 {
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
  }
}

/* ---------- BUG E — breadcrumb PDP titre tronqué sur mobile ----------
   Partie CSS : on cache la version complète sur ≤768px et on affiche
   la version courte (Liquid truncate: 24). La version complète reste
   visible desktop. */
.crumb-short { display: none; }
@media (max-width: 768px) {
  .u-pdp-crumb .crumb-full { display: none; }
  .u-pdp-crumb .crumb-short { display: inline; }
  /* Filet de sécurité : si la version courte est encore trop large,
     ellipsis sur l'item courant uniquement */
  .u-pdp-crumb [aria-current="page"] {
    display: inline-block;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}

/* ============================================================
   V14 RETOURS CLIENT — 2026-05-28
   1. Titres pcard mobile trop gros sur grid 2 cols collection.
   2A. Galerie atelier en carousel scroll-snap mobile.
   2B. SVG stroke contraste fixe selon univers (lerp friendly).
   ============================================================ */

/* ---------- RETOUR 1 : pcard mobile trop gros sur grid 2 cols ----------
   Symptôme : sur /collections/all en mobile, le nom du produit
   (.pcard__name = Fraunces italique 1.2rem hérité) est disproportionné
   par rapport à l'image dans une grid 2 cols.
   Fix : tighten la typo + padding ≤768px et plus encore ≤480px. */
@media (max-width: 768px) {
  .pcard__name {
    font-size: clamp(0.85rem, 3vw, 1rem) !important;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .pcard__sub {
    font-size: 0.72rem !important;
    margin-top: 2px;
  }
  .pcard__price {
    font-size: 0.9rem !important;
  }
  .pcard__status {
    font-size: 0.55rem !important;
    margin-top: 4px;
  }
  .pcard__body {
    padding-top: 0.75rem !important;
    gap: 0.15rem 0.6rem;
  }
  .pcard__pill {
    font-size: 0.55rem !important;
    padding: 4px 8px !important;
    letter-spacing: 0.08em !important;
  }
}
@media (max-width: 480px) {
  .pcard__name { font-size: clamp(0.8rem, 3.4vw, 0.95rem) !important; }
  .pcard__sub { font-size: 0.68rem !important; }
  .pcard__price { font-size: 0.85rem !important; }
  .pcard__body { padding-top: 0.6rem !important; }
}

/* ---------- RETOUR 2A : galerie atelier en carousel mobile ----------
   Symptôme : .u-atelier-gallery__grid est stack vertical sur mobile
   (6 figures hautes les unes après les autres, scroll long).
   Fix : même pattern que .u-presentation__grid — flex horizontal
   scroll-snap, peek next ~22%, hint "Glisser pour voir". */
@media (max-width: 768px) {
  .u-atelier-gallery {
    overflow-x: hidden;
  }
  .u-atelier-gallery__in {
    overflow-x: hidden;
  }
  .u-atelier-gallery__grid {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--gutter, 1.25rem) !important;
    gap: 12px !important;
    padding: 0.25rem var(--gutter, 1.25rem) 1.5rem !important;
    margin-inline: calc(-1 * var(--gutter, 1.25rem)) !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  .u-atelier-gallery__grid::-webkit-scrollbar {
    display: none !important;
    height: 0;
  }
  .u-atelier-gallery__grid > .u-atelier-gallery__item {
    flex: 0 0 78% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always;
    min-width: 0;
  }
  /* Bleed-end pour atteindre le dernier item proprement */
  .u-atelier-gallery__grid::after {
    content: '';
    flex: 0 0 calc(var(--gutter, 1.25rem) - 12px);
  }
  /* Hint "Glisser pour voir" sous la galerie */
  .u-atelier-gallery__head::after {
    content: 'Glisser pour voir';
    display: block;
    text-align: center;
    font-family: var(--f-mono, "JetBrains Mono", monospace);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute, rgba(27, 27, 27, 0.5));
    opacity: 0.7;
    margin-top: 1rem;
    pointer-events: none;
  }
}
@media (max-width: 600px) {
  .u-atelier-gallery__grid > .u-atelier-gallery__item {
    flex: 0 0 82% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .u-atelier-gallery__grid { scroll-behavior: auto; }
}

/* ---------- RETOUR 2B : lisibilité SVG line-art atelier au scroll ----------
   Problème : les SVG line-art utilisent stroke="currentColor" qui suit --fg.
   Pendant le lerp d'univers (ivoire → bleu nuit → brun → sable), le --fg
   change et les SVG deviennent peu contrastés sur certains backgrounds.
   Fix : forcer le stroke selon le data-universe (override currentColor).
   Sélecteur [stroke] matche les éléments avec attribut stroke (line, path,
   circle, etc. — y compris ceux à currentColor).

   Univers SOMBRES (background sombre, fg ivoire) → stroke ivoire :
     u0 = bleu nuit hero
     u3 = brun foncé (CTA finale)
     u4 = noir laqué / sombre
   Univers CLAIRS (background clair, fg sumi) → stroke sumi #1B1B1B :
     u1 = ivoire chaud
     u2 = sable atelier
     u5 = sable foncé
   On garde un fallback safe pour les sections sans data-universe. */

/* Univers sombres → SVG line-art atelier en ivoire */
[data-universe="u0"] .u-atelier-process__list svg [stroke],
[data-universe="u0"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u0"] .u-atelier-hero__svg-wrap svg [stroke],
[data-universe="u3"] .u-atelier-process__list svg [stroke],
[data-universe="u3"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u3"] .u-atelier-hero__svg-wrap svg [stroke],
[data-universe="u4"] .u-atelier-process__list svg [stroke],
[data-universe="u4"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u4"] .u-atelier-hero__svg-wrap svg [stroke] {
  stroke: #F2EBDD !important;
}
/* Univers clairs → SVG line-art atelier en sumi */
[data-universe="u1"] .u-atelier-process__list svg [stroke],
[data-universe="u1"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u1"] .u-atelier-hero__svg-wrap svg [stroke],
[data-universe="u2"] .u-atelier-process__list svg [stroke],
[data-universe="u2"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u2"] .u-atelier-hero__svg-wrap svg [stroke],
[data-universe="u5"] .u-atelier-process__list svg [stroke],
[data-universe="u5"] .u-atelier-gallery__svg svg [stroke],
[data-universe="u5"] .u-atelier-hero__svg-wrap svg [stroke] {
  stroke: #1B1B1B !important;
}
/* Booster contraste : opacity full sur le wrapper svg pour qu'on lise
   bien le stroke fixé (les styles par défaut avaient opacity 0.72). */
.u-atelier-gallery__svg svg,
.u-atelier-process__list svg,
.u-atelier-hero__svg-wrap svg {
  opacity: 0.92 !important;
}

/* ============================================================================
   BUG FIX — breadcrumb hero (mod-explique / histoire / atelier)
   ----------------------------------------------------------------------------
   Avant : le <nav class="crumb"> était à l'intérieur de __copy, qui passait
   visuellement SOUS __visual sur mobile (à cause de `order: -1` sur __visual).
   Résultat : le breadcrumb se retrouvait sous l'image. Cassé visuellement.

   Fix : le breadcrumb est sorti de __copy et placé comme premier enfant DIRECT
   de __in (AVANT le wrapper __grid qui héberge le copy/visual). Du coup il
   apparaît toujours tout en haut, quel que soit l'ordre CSS du reste.

   Côté CSS : on déplace le grid de __in vers __grid pour préserver le layout
   2 colonnes existant (et son `order: -1` mobile sur __visual).
   ============================================================================ */

/* Neutraliser le grid existant sur __in : il devient un flex column qui
   empile crumb + grid */
.u-mod-explique-hero__in,
.u-histoire-hero__in,
.u-atelier-hero__in {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Re-injecter le grid 2 colonnes sur __grid (copie des règles d'origine
   appliquées à __in) */
.u-mod-explique-hero__grid,
.u-histoire-hero__grid,
.u-atelier-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: center;
  width: 100%;
}

/* Style commun du nouveau breadcrumb — éditorial, mono, sobre */
.u-page-crumb {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute, rgba(27, 27, 27, 0.45));
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 2rem;
  margin: 0;
}
.u-page-crumb a {
  color: var(--fg-soft, rgba(27, 27, 27, 0.7));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.u-page-crumb a:hover,
.u-page-crumb a:focus-visible {
  color: var(--c-accent, #B83228);
  border-bottom-color: currentColor;
  outline: none;
}
.u-page-crumb__sep {
  opacity: 0.4;
  user-select: none;
}
.u-page-crumb [aria-current="page"] {
  color: var(--fg, #1B1B1B);
  font-weight: 500;
}

/* Mobile : grid 1 colonne + breadcrumb plus compact */
@media (max-width: 900px) {
  .u-mod-explique-hero__grid,
  .u-histoire-hero__grid,
  .u-atelier-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .u-page-crumb {
    font-size: 0.55rem;
    padding-bottom: 1.2rem;
    letter-spacing: 0.14em;
  }
}

/* ============================================================================
   FOOTER MEMORIA — refonte v2 (mobile + desktop)
   ----------------------------------------------------------------------------
   Structure 4 colonnes desktop (≥900px), stack mobile.
   Bg brun foncé #2E2419 (u3) + fg ivoire #F2EBDD.
   Liens mono uppercase + accent or laiton sur hover.
   Newsletter form Shopify natif inline.
   ============================================================================ */

.memoria-foot {
  --foot-bg: #2E2419;
  --foot-fg: #F2EBDD;
  --foot-fg-soft: rgba(242, 235, 221, 0.72);
  --foot-fg-mute: rgba(242, 235, 221, 0.5);
  --foot-rule: rgba(242, 235, 221, 0.12);
  --foot-accent: #D9B85A;
  --foot-vermillon: #B83228;

  background: var(--foot-bg);
  color: var(--foot-fg);
  padding: 5rem var(--gutter, 24px) 0;
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
}

.memoria-foot__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 4rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 4rem;
  align-items: start;
}

/* --- Colonne 1 : Brand --- */
.memoria-foot__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.memoria-foot__logo {
  font-family: var(--f-display, "Fraunces", Georgia, serif);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--foot-fg);
  font-variation-settings: 'SOFT' 60;
}
.memoria-foot__logo-dot {
  color: var(--foot-accent);
}
.memoria-foot__logo-img {
  height: auto;
  width: 120px;
  filter: brightness(0) invert(0.92);
}
.memoria-foot__tagline {
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--foot-fg-soft);
  margin: 0;
  max-width: 28ch;
}
.memoria-foot__addr {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-fg-mute);
  line-height: 1.7;
  margin: 0.5rem 0 0;
  font-style: normal;
}

/* --- Colonnes 2 & 3 : Nav + Service --- */
.memoria-foot__col h4 {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foot-accent);
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.memoria-foot__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.memoria-foot__col a {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 220ms, border-color 220ms;
  display: inline-block;
}
.memoria-foot__col a:hover,
.memoria-foot__col a:focus-visible {
  color: var(--foot-accent);
  border-bottom-color: var(--foot-accent);
  outline: none;
}

/* --- Colonne 4 : Newsletter / contact --- */
.memoria-foot__news h4 {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foot-accent);
  margin: 0 0 1rem;
  font-weight: 500;
}
.memoria-foot__news-hint {
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--foot-fg-soft);
  margin: 0 0 1.25rem;
  max-width: 32ch;
}
.memoria-foot__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--foot-rule);
  background: rgba(242, 235, 221, 0.04);
  transition: border-color 220ms;
}
.memoria-foot__form:focus-within {
  border-color: var(--foot-accent);
}
.memoria-foot__form-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--foot-fg);
  font-family: var(--f-body, "Inria Serif", Georgia, serif);
  font-size: 0.92rem;
  padding: 0.85rem 1rem;
  outline: none;
}
.memoria-foot__form-input::placeholder {
  color: var(--foot-fg-mute);
  font-style: italic;
}
.memoria-foot__form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--foot-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--foot-bg) inset;
}
.memoria-foot__form-submit {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--foot-rule);
  color: var(--foot-accent);
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: background 220ms, color 220ms;
  white-space: nowrap;
}
.memoria-foot__form-submit:hover,
.memoria-foot__form-submit:focus-visible {
  background: var(--foot-accent);
  color: var(--foot-bg);
  outline: none;
}
.memoria-foot__form-msg {
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foot-accent);
  margin-top: 0.75rem;
  display: block;
}
.memoria-foot__form-msg--error {
  color: var(--foot-vermillon);
}
.memoria-foot__contact {
  margin-top: 1.5rem;
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-fg-mute);
  line-height: 1.8;
}
.memoria-foot__contact a {
  color: var(--foot-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 220ms, border-color 220ms;
}
.memoria-foot__contact a:hover,
.memoria-foot__contact a:focus-visible {
  color: var(--foot-accent);
  border-bottom-color: var(--foot-accent);
  outline: none;
}

/* --- Bottom bar --- */
.memoria-foot__bot {
  border-top: 1px solid var(--foot-rule);
  padding: 1.75rem 0 2rem;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  font-family: var(--f-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--foot-fg-mute);
}
.memoria-foot__bot-left {
  justify-self: start;
}
.memoria-foot__bot-center {
  justify-self: center;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--foot-fg-soft);
}
.memoria-foot__bot-flag {
  font-size: 0.85rem;
  line-height: 1;
}
.memoria-foot__bot-right {
  justify-self: end;
}
.memoria-foot__bot a {
  color: var(--foot-fg-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 220ms, border-color 220ms;
}
.memoria-foot__bot a:hover,
.memoria-foot__bot a:focus-visible {
  color: var(--foot-accent);
  border-bottom-color: var(--foot-accent);
  outline: none;
}

/* Tablet (900-1080) : ajuster columns */
@media (max-width: 1080px) and (min-width: 901px) {
  .memoria-foot__top {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2.5rem;
    row-gap: 3rem;
  }
  .memoria-foot__brand {
    grid-column: 1 / -1;
  }
}

/* Mobile (<900px) : stack vertical complet */
@media (max-width: 900px) {
  .memoria-foot {
    padding: 4rem var(--gutter, 24px) 0;
  }
  .memoria-foot__top {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    padding-bottom: 2.75rem;
  }
  .memoria-foot__brand {
    gap: 1rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--foot-rule);
  }
  .memoria-foot__col {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--foot-rule);
  }
  .memoria-foot__news {
    padding-bottom: 0.5rem;
  }
  .memoria-foot__form {
    flex-direction: column;
  }
  .memoria-foot__form-submit {
    border-left: 0;
    border-top: 1px solid var(--foot-rule);
    padding: 0.85rem 1rem;
  }
  .memoria-foot__bot {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 1.5rem 0;
    gap: 0.85rem;
  }
  .memoria-foot__bot-left,
  .memoria-foot__bot-center,
  .memoria-foot__bot-right {
    justify-self: center;
  }
}

/* Reduced motion : couper toutes les transitions */
@media (prefers-reduced-motion: reduce) {
  .memoria-foot *,
  .memoria-foot *::before,
  .memoria-foot *::after {
    transition: none !important;
  }
}

/* Visually hidden (a11y headings) */
.memoria-foot .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}