/* ============================================================
   CADRAN — Motion design
   Animations inspirées du teaser (Construction, Mouvement,
   Rubriques, Complications, Signature).
   Tout est désactivé si prefers-reduced-motion: reduce.
   ============================================================ */

:root {
  --m-ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --m-ruby:     #9B2335;
  --m-steel:    #0E1628;
}

/* ─────────────────────────────────────────────
   I — CONSTRUCTION : intro (accueil, 1× par session)
   ───────────────────────────────────────────── */
.m-intro { display: none; }
html.m-intro-on .m-intro {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(ellipse at center, #111a2e 0%, #080C14 70%);
  color: #D4AF6A;
  cursor: pointer;
  animation: m-intro-out 0.7s var(--m-ease-io) 2.55s forwards;
}
html.m-intro-on body { overflow: hidden; }
.m-intro__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,175,106,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,106,0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  mask-image: radial-gradient(circle at center, black 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 65%);
  opacity: 0;
  animation: m-fade-in 0.8s ease 0.05s forwards;
}
.m-intro__axis {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(240,235,224,0.7), transparent);
}
.m-intro__axis--h {
  top: calc(50% - 36px); left: 0; right: 0; height: 1px;
  transform: scaleX(0);
  animation: m-scale-x 0.9s var(--m-ease) 0.15s forwards;
}
.m-intro__axis--v {
  left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(240,235,224,0.5), transparent);
  transform: scaleY(0);
  animation: m-scale-y 0.9s var(--m-ease) 0.25s forwards;
}
.m-intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.m-intro__dial {
  width: min(260px, 56vw);
  height: auto;
  overflow: visible;
}
.m-intro__spark {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: m-spark 1.1s ease 0s forwards;
}
.m-intro__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: m-draw 1.1s var(--m-ease-io) forwards;
}
.m-intro__ticks line {
  opacity: 0;
  animation: m-fade-in 0.25s ease forwards;
}
.m-intro__hand {
  transform-origin: 130px 130px;
  opacity: 0;
}
.m-intro__hand--h { animation: m-hand-h 1s var(--m-ease) 1.05s forwards; }
.m-intro__hand--m { animation: m-hand-m 1.1s var(--m-ease) 1.05s forwards; }
.m-intro__word {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: #F0EBE0;
  display: flex;
}
.m-intro__word span {
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  animation: m-letter 0.7s var(--m-ease) forwards;
  animation-delay: calc(1.25s + var(--i) * 0.09s);
}
.m-intro__word span.or { color: #D4AF6A; }
.m-intro__tag {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.6);
  opacity: 0;
  animation: m-fade-in 0.6s ease 1.9s forwards;
}
.m-intro__skip {
  position: absolute;
  bottom: 28px;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.35);
}
.m-intro__code {
  position: absolute;
  top: 26px; right: 30px;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: rgba(240,235,224,0.35);
  font-variant-numeric: tabular-nums;
}
.m-intro__code b { color: #D4AF6A; font-weight: 400; }
.m-intro__chapter {
  position: absolute;
  bottom: 26px; left: 30px;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.4);
}
.m-intro__chapter i { font-family: var(--f-display); font-size: 0.9rem; color: #D4AF6A; margin-right: 10px; letter-spacing: 0; }
html.m-intro-on .m-intro.is-leaving { animation: m-intro-out 0.5s var(--m-ease-io) forwards; }

@keyframes m-intro-out {
  to { opacity: 0; visibility: hidden; transform: scale(1.04); }
}
@keyframes m-fade-in { to { opacity: 1; } }
@keyframes m-scale-x { to { transform: scaleX(1); } }
@keyframes m-scale-y { to { transform: scaleY(1); } }
@keyframes m-draw    { to { stroke-dashoffset: 0; } }
@keyframes m-spark {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.6); }
}
@keyframes m-hand-h { from { opacity: 0; transform: rotate(-120deg); } 20% { opacity: 1; } to { opacity: 1; transform: rotate(0deg); } }
@keyframes m-hand-m { from { opacity: 0; transform: rotate(-300deg); } 20% { opacity: 1; } to { opacity: 1; transform: rotate(0deg); } }
@keyframes m-letter { to { opacity: 1; transform: none; filter: blur(0); } }

/* ─────────────────────────────────────────────
   Entrée du hero (après l'intro si elle joue)
   ───────────────────────────────────────────── */
.m-js .hero__brand-title .m-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.m-js .hero__brand-title .m-line > span {
  display: inline-block;
  transform: translateY(105%);
  animation: m-rise 1.1s var(--m-ease) forwards;
  animation-delay: calc(var(--m-hero-delay, 0.15s) + var(--i) * 0.12s);
}
.m-js .hero__brand-sub,
.m-js .hero__brand-ctas {
  opacity: 0;
  transform: translateY(16px);
  animation: m-rise-fade 0.9s var(--m-ease) forwards;
  animation-delay: calc(var(--m-hero-delay, 0.15s) + 0.45s);
}
.m-js .hero__brand-ctas { animation-delay: calc(var(--m-hero-delay, 0.15s) + 0.6s); }
.m-js .hero__featured {
  opacity: 0;
  animation: m-fade-in 1s ease forwards;
  animation-delay: calc(var(--m-hero-delay, 0.15s) + 0.8s);
}
html.m-intro-on { --m-hero-delay: 2.75s; }
@keyframes m-rise { to { transform: none; } }
@keyframes m-rise-fade { to { opacity: 1; transform: none; } }

/* ─────────────────────────────────────────────
   II — MOUVEMENT : rouages du hero
   ───────────────────────────────────────────── */
.m-gears {
  position: absolute;
  right: -5%;
  bottom: -7%;
  width: min(620px, 46vw);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  mix-blend-mode: screen;
  animation: m-fade-in-gears 2.2s ease forwards;
  animation-delay: calc(var(--m-hero-delay, 0.15s) + 0.3s);
  will-change: transform;
}
.m-gears-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url('images/nautilus-mask.png') center / cover no-repeat;
          mask: url('images/nautilus-mask.png') center / cover no-repeat;
}
.m-gears svg { width: 100%; height: 100%; overflow: visible; }
.m-gears .m-gear-body   { fill: url(#m-gold-fill); stroke: #D4AF6A; stroke-width: 1.1; stroke-opacity: 0.55; }
.m-gears .m-gear-line   { fill: none; stroke: #D4AF6A; stroke-opacity: 0.35; }
.m-gears .m-gear-spoke  { stroke: #D4AF6A; stroke-opacity: 0.28; stroke-linecap: round; }
.m-gears .m-ruby        { fill: var(--m-ruby); stroke: #D4AF6A; stroke-width: 1.2; stroke-opacity: 0.7; }
.m-gears .m-ruby-shine  { fill: rgba(255,255,255,0.55); }
.m-gears .m-bridge      { fill: rgba(18,26,48,0.72); stroke: #D4AF6A; stroke-width: 1; stroke-opacity: 0.45; }
.m-gears .m-screw       { fill: rgba(40,56,96,0.9); stroke: #D4AF6A; stroke-opacity: 0.6; }
body.light .m-gears { mix-blend-mode: multiply; }
body.light .m-gears .m-bridge { fill: rgba(245,240,232,0.35); }
.hero__dial { display: none; }
@media (max-width: 760px) {
  .m-gears { width: 92vw; right: -38vw; bottom: -10%; opacity: 0.55; }
  .m-gears { animation-name: m-fade-in-soft; }
}
@keyframes m-fade-in-soft { to { opacity: 0.45; } }
@keyframes m-fade-in-gears { to { opacity: 0.8; } }
.hero__featured { z-index: 2; }

/* ─────────────────────────────────────────────
   Survol des cartes : cotes de plan (Construction)
   ───────────────────────────────────────────── */
.card__img,
.micro-card__img,
.brand-spotlight__visual { position: relative; }
.card__img::after,
.micro-card__img::after,
.brand-spotlight__visual::after {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  z-index: 3;
  --m-c: rgba(212,175,106,0.95);
  --m-l: 0px;
  background:
    linear-gradient(var(--m-c), var(--m-c)) top left     / var(--m-l) 1px no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) top left     / 1px var(--m-l) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) top right    / var(--m-l) 1px no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) top right    / 1px var(--m-l) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom left  / var(--m-l) 1px no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom left  / 1px var(--m-l) no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom right / var(--m-l) 1px no-repeat,
    linear-gradient(var(--m-c), var(--m-c)) bottom right / 1px var(--m-l) no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.35s ease, transform 0.6s var(--m-ease), --m-l 0.6s var(--m-ease);
}
@property --m-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
.card:hover .card__img::after,
.card:focus-visible .card__img::after,
.micro-card:hover .micro-card__img::after,
.brand-spotlight:hover .brand-spotlight__visual::after {
  opacity: 1;
  transform: none;
  --m-l: 18px;
}
/* ligne de cote + réticule centraux */
.m-cote {
  position: absolute;
  left: 10px; right: 10px; top: 50%;
  height: 1px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(90deg, rgba(212,175,106,0.8), rgba(212,175,106,0.15) 30%, transparent 45%, transparent 55%, rgba(212,175,106,0.15) 70%, rgba(212,175,106,0.8));
  transform: scaleX(0);
  transition: transform 0.7s var(--m-ease) 0.05s;
}
.m-cote::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid rgba(212,175,106,0.85);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s var(--m-ease) 0.2s;
  box-shadow: 0 0 12px rgba(212,175,106,0.35);
}
.card:hover .m-cote,
.micro-card:hover .m-cote { transform: scaleX(1); }
.card:hover .m-cote::before,
.micro-card:hover .m-cote::before { transform: scale(1); }

/* ─────────────────────────────────────────────
   III — RUBRIQUES : lunette rotative
   ───────────────────────────────────────────── */
.m-bezel {
  position: relative;
  overflow: hidden;
  padding: var(--sp-2xl) 0 var(--sp-3xl);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(184,146,74,0.08), transparent 70%),
    var(--c-bg);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  outline: none;
}
.m-bezel__eyebrow {
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-or);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: var(--sp-lg);
}
.m-bezel__eyebrow::before,
.m-bezel__eyebrow::after { content: ''; width: 36px; height: 1px; background: var(--c-or); opacity: 0.6; }
.m-bezel__ring {
  display: block;
  width: 100%;
  height: clamp(150px, 22vw, 280px);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.m-bezel__ring:active { cursor: grabbing; }
.m-bezel__rot {
  transform-box: view-box;
  transform-origin: 600px 1100px;
  transition: transform 1s var(--m-ease);
}
.m-bezel__band   { fill: none; stroke: var(--c-bg-3); stroke-width: 58; }
.m-bezel__edge   { fill: none; stroke: var(--c-or); stroke-opacity: 0.55; stroke-width: 1; }
.m-bezel__edge--in { stroke-opacity: 0.3; }
.m-bezel__tick   { stroke: var(--c-or); stroke-opacity: 0.45; }
.m-bezel__tick--major { stroke-opacity: 0.9; stroke-width: 1.5; }
.m-bezel__label {
  font-family: var(--f-ui);
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  fill: var(--c-text-3);
  cursor: pointer;
  transition: fill 0.5s ease;
}
.m-bezel__label.is-active { fill: var(--c-text); }
.m-bezel__label:hover { fill: var(--c-or-light); }
.m-bezel__pointer { fill: var(--c-or); }
.m-bezel__stem { stroke: var(--c-or); stroke-opacity: 0.6; }
body.light .m-bezel__band { stroke: var(--c-bg-2); }

.m-bezel__center {
  position: relative;
  text-align: center;
  margin-top: calc(-1 * clamp(40px, 7vw, 90px));
  padding: 0 var(--sp-lg);
  min-height: 190px;
}
.m-bezel__count {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  color: var(--c-or);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-md);
}
.m-bezel__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1;
  color: var(--c-text);
  margin-bottom: var(--sp-md);
}
.m-bezel__title em { font-style: italic; color: var(--c-or-light); }
.m-bezel__sub {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: var(--sp-xl);
}
.m-bezel__swap { transition: opacity 0.35s ease, transform 0.6s var(--m-ease), filter 0.35s ease; }
.m-bezel.is-swapping .m-bezel__swap { opacity: 0; transform: translateY(12px); filter: blur(4px); }
.m-bezel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
}
.m-bezel__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-border-2);
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--t-fast), color var(--t-fast), transform 0.3s var(--m-ease);
}
.m-bezel__arrow:hover { border-color: var(--c-or); color: var(--c-or); }
.m-bezel__arrow:active { transform: scale(0.92); }
.m-bezel__ghost {
  position: absolute;
  right: 4%;
  bottom: -0.18em;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(7rem, 18vw, 15rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-border-2);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.8s var(--m-ease);
}
.m-bezel.is-swapping .m-bezel__ghost { opacity: 0; transform: translateY(20px); }
@media (max-width: 640px) {
  .m-bezel__label { font-size: 24px; letter-spacing: 0.2em; }
  .m-bezel__ghost { display: none; }
}

/* ─────────────────────────────────────────────
   IV — COMPLICATIONS : chiffres animés
   ───────────────────────────────────────────── */
.m-comp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2xl);
  max-width: 980px;
  margin: 0 auto;
}
.m-comp__head {
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-or);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: var(--sp-2xl);
}
.m-comp__head::before, .m-comp__head::after { content: ''; width: 48px; height: 1px; background: var(--c-or); opacity: 0.6; }
.m-comp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.m-comp__dial {
  position: relative;
  width: min(220px, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-lg);
  background:
    radial-gradient(circle at 50% 38%, #1a2644 0%, #0c1426 62%, #070b15 100%);
  box-shadow:
    0 0 0 3px #7a5f2c,
    0 0 0 5px #D4AF6A,
    0 0 0 7px #5d4720,
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 0 30px rgba(0,0,0,0.6);
  transition: transform 0.6s var(--m-ease);
}
.m-comp__item:hover .m-comp__dial { transform: translateY(-4px) rotate(-2deg); }
.m-comp__dial svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-comp__tick { stroke: rgba(212,175,106,0.6); }
.m-comp__tick--major { stroke: #D4AF6A; stroke-width: 2; }
.m-comp__num { font-family: var(--f-ui); font-size: 9px; fill: rgba(240,235,224,0.55); letter-spacing: 0.05em; }
.m-comp__needle {
  transform-origin: 100px 100px;
  transform: rotate(-150deg);
  transition: transform 2.2s cubic-bezier(0.34, 1.35, 0.5, 1);
}
.m-comp.is-on .m-comp__needle { transform: rotate(var(--m-angle, 126deg)); }
.m-comp__value {
  position: absolute;
  bottom: 13%;
  font-family: var(--f-display);
  font-size: 1.7rem;
  color: #F0EBE0;
  font-variant-numeric: tabular-nums;
}
.m-comp__value small { font-family: var(--f-ui); font-size: 0.5rem; letter-spacing: 0.1em; color: rgba(240,235,224,0.5); margin-left: 3px; }

/* compteur à rouleaux */
.m-odo {
  position: relative;
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #05080f, #141b2c 50%, #05080f);
  border: 1px solid #D4AF6A;
  border-radius: 3px;
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.8), 0 0 0 3px #0a0f1c;
}
.m-odo__col {
  width: 0.72em;
  height: 1.2em;
  overflow: hidden;
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1.2em;
  color: #0b1020;
  background: linear-gradient(180deg, #b7b0a0, #F5F0E8 30%, #F5F0E8 70%, #a8a190);
  border-radius: 2px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.m-odo__col--sep { width: 0.3em; background: none; }
.m-odo__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 0.12s);
}
.m-comp.is-on .m-odo__strip { transform: translateY(calc(var(--m-to) * -1.2em)); }
.m-comp__caption {
  position: absolute;
  bottom: 24%;
  font-family: var(--f-ui);
  font-size: 0.5rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(240,235,224,0.45);
}

/* guichet du jour */
.m-day {
  position: relative;
  width: 104px;
  height: 52px;
  overflow: hidden;
  border: 1px solid #D4AF6A;
  border-radius: 4px;
  background: #F5F0E8;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.45), 0 0 0 3px #0a0f1c;
}
.m-day__strip {
  display: flex;
  flex-direction: column;
  transition: transform 2.6s cubic-bezier(0.7, 0, 0.2, 1) 0.2s;
}
.m-day__strip span {
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-family: var(--f-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #0b1020;
}
.m-day__strip span.is-sun { color: var(--m-ruby); }
.m-comp.is-on .m-day__strip { transform: translateY(calc(var(--m-to) * -52px)); }
.m-comp__dots circle { fill: rgba(212,175,106,0.5); }

.m-comp__label {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text);
  margin-bottom: 6px;
}
.m-comp__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--c-or-light);
}
@media (max-width: 760px) {
  .m-comp { grid-template-columns: 1fr; gap: var(--sp-2xl); }
}

/* Score de verdict (article) */
.rating-score.m-counting { font-variant-numeric: tabular-nums; }

/* ─────────────────────────────────────────────
   SIGNATURE : logo en cascade + sceau du footer
   ───────────────────────────────────────────── */
.logo__name .m-l {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(4px);
  animation: m-letter 0.8s var(--m-ease) forwards;
  animation-delay: calc(0.1s + var(--i) * 0.07s);
}
.logo__name .m-l.or { color: var(--c-or); }
.logo__name.m-static .m-l { animation: none; opacity: 1; transform: none; filter: none; }
.site-footer .logo__name .m-l { animation-play-state: paused; }
.site-footer.m-in .logo__name .m-l { animation-play-state: running; }

.m-seal {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: var(--sp-lg);
  flex-shrink: 0;
}
.m-seal svg { width: 100%; height: 100%; overflow: visible; }
.m-seal__ring {
  transform-origin: 60px 60px;
  animation: gearSpin 50s linear infinite;
}
.m-seal__text {
  font-family: var(--f-ui);
  font-size: 6.6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--c-text-3);
}
.m-seal__text tspan.dot { fill: var(--c-or); }
.m-seal__case { fill: none; stroke: var(--c-or); stroke-width: 2; }
.m-seal__face { fill: var(--m-steel); }
body.light .m-seal__face { fill: #152038; }
.m-seal__idx  { stroke: #D4AF6A; stroke-width: 1.2; }
.m-seal__hand { stroke: #D4AF6A; stroke-linecap: round; }
.m-seal__orbit { fill: none; stroke: var(--c-border-2); stroke-width: 0.6; }

/* ─────────────────────────────────────────────
   Barre de lecture chronographe (article)
   ───────────────────────────────────────────── */
.m-chrono {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: 68px;
  height: 68px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.6s var(--m-ease);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.45));
}
.m-chrono.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.m-chrono svg { width: 100%; height: 100%; overflow: visible; }
.m-chrono__case { fill: #0c1426; stroke: var(--c-or); stroke-width: 2; }
.m-chrono__track { fill: none; stroke: rgba(212,175,106,0.15); stroke-width: 3; }
.m-chrono__arc {
  fill: none;
  stroke: var(--c-or-light);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 40px 40px;
}
.m-chrono__tick { stroke: rgba(240,235,224,0.35); }
.m-chrono__hand { stroke: #F0EBE0; stroke-width: 1.2; stroke-linecap: round; }
.m-chrono__pin  { fill: var(--c-or); }
.m-chrono__min  { font-family: var(--f-ui); font-size: 9px; fill: #F0EBE0; letter-spacing: 0.05em; }
.m-chrono__lbl  { font-family: var(--f-ui); font-size: 5px; fill: rgba(240,235,224,0.5); letter-spacing: 0.2em; }
.m-chrono__pusher { fill: var(--c-or); }
.m-chrono:hover .m-chrono__case { stroke: var(--c-or-light); }
.m-chrono:focus-visible { outline: 1px solid var(--c-or); outline-offset: 4px; }
@media (max-width: 640px) {
  .m-chrono { width: 56px; height: 56px; right: 14px; bottom: 14px; }
}

/* ─────────────────────────────────────────────
   Accessibilité : pas d'animation si demandé
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.m-intro-on .m-intro { display: none; }
  html.m-intro-on body { overflow: auto; }
  .m-js .hero__brand-title .m-line > span,
  .m-js .hero__brand-sub,
  .m-js .hero__brand-ctas,
  .m-js .hero__featured,
  .logo__name .m-l,
  .m-gears { animation: none !important; opacity: 1; transform: none; filter: none; }
  .m-gears { opacity: 0.8; }
  .m-seal__ring { animation: none; }
  .m-bezel__rot, .m-comp__needle, .m-odo__strip, .m-day__strip { transition: none !important; }
  .card__img::after, .micro-card__img::after, .brand-spotlight__visual::after, .m-cote, .m-cote::before { transition: none; }
}

/* ─────────────────────────────────────────────
   Transitions de page en iris
   ───────────────────────────────────────────── */
.m-iris {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  display: none;
  --r: 0px;
  --x: 50%;
  --y: 50%;
  background: radial-gradient(circle at var(--x) var(--y), #121b31 0%, #080C14 60%);
  -webkit-mask: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at var(--x) var(--y), transparent var(--r), #000 calc(var(--r) + 1px));
}
.m-iris.is-on { display: block; pointer-events: auto; }
.m-iris__ring {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: calc(var(--r) * 2 + 2px);
  height: calc(var(--r) * 2 + 2px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(212,175,106,0.85);
  box-shadow: 0 0 0 5px rgba(212,175,106,0.10), 0 0 30px rgba(212,175,106,0.18);
}

/* ─────────────────────────────────────────────
   Bouton jour/nuit : disque de phase de lune
   ───────────────────────────────────────────── */
.m-mode { display: block; overflow: visible; }
.m-mode__disc {
  transform-box: view-box;
  transform-origin: 16px 30px;
  transition: transform 1.1s var(--m-ease);
}
.m-mode__night { fill: #0b1a3a; }
.m-mode__day   { fill: #7fb2e5; }
.m-mode__moon  { fill: #E8C98A; }
.m-mode__star  { fill: #F0EBE0; }
.m-mode__sun circle { fill: #F2C14E; }
.m-mode__sun line   { stroke: #F2C14E; stroke-width: 1.1; stroke-linecap: round; }
.m-mode__frame { fill: none; stroke: var(--c-or); stroke-width: 1.2; }
.m-mode-btn:hover .m-mode__frame { stroke: var(--c-or-light); }

/* légende phase de lune (footer) */
.m-moon-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 var(--sp-lg);
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.m-moon-caption__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F5E3B3, #B8924A);
  opacity: calc(0.35 + var(--lit, 1) * 0.65);
  box-shadow: 0 0 6px rgba(212,175,106,0.5);
}

/* ─────────────────────────────────────────────
   Échappement animé (guide mécanique)
   ───────────────────────────────────────────── */
.m-esc {
  position: relative;
  margin: var(--sp-2xl) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.m-esc__sticky {
  position: sticky;
  top: 72px;
  z-index: 2;
  background: var(--c-bg);
  padding: var(--sp-lg) 0 var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.m-esc__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.m-esc__eyebrow {
  font-family: var(--f-ui);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-or);
}
.m-esc__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--c-text);
  margin: 4px 0 0;
}
.m-esc__title em { font-style: italic; color: var(--c-or-light); }
.m-esc__tools { display: flex; align-items: center; gap: 10px; }
.m-esc__badge {
  font-family: var(--f-ui);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  border: 1px solid var(--c-border-2);
  padding: 4px 8px;
}
.m-esc__pause {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-border-2);
  background: none;
  color: var(--c-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.m-esc__pause:hover { border-color: var(--c-or); color: var(--c-or); }
.m-esc__pause svg { fill: currentColor; }
.m-esc__i-play { display: none; }
.m-esc.is-paused .m-esc__i-play { display: inline; }
.m-esc.is-paused .m-esc__i-pause { display: none; }
.m-esc__svg { display: block; width: 100%; height: auto; max-height: 36vh; }
.m-esc__grid line { stroke: var(--c-border); stroke-width: 0.5; opacity: 0.55; }
.m-esc__part { transition: opacity 0.6s ease, filter 0.6s ease; }
.m-esc.has-step .m-esc__part:not(.is-active) { opacity: 0.22; filter: saturate(0.3); }
.m-esc__metal  { fill: url(#m-esc-gold); stroke: #D4AF6A; stroke-width: 0.9; }
.m-esc__pinion { fill: rgba(200,205,215,0.55); stroke: #cfd3da; }
.m-esc__ew     { fill: rgba(190,198,212,0.35); stroke: #dfe4ec; }
.m-esc__drum   { fill: rgba(8,12,20,0.55); stroke: #D4AF6A; stroke-opacity: 0.6; }
.m-esc__spring { fill: none; stroke: #8fa6c9; stroke-width: 1; }
.m-esc__arbor  { fill: #1c2640; stroke: #D4AF6A; }
.m-esc__line   { fill: none; stroke: #D4AF6A; stroke-opacity: 0.5; }
.m-esc__spoke  { stroke: #D4AF6A; stroke-opacity: 0.55; stroke-width: 4; stroke-linecap: round; }
.m-esc__spoke--bal { stroke-width: 5; stroke-opacity: 0.75; }
.m-esc__anchor { fill: rgba(143,166,201,0.45); stroke: #b8c6dc; stroke-width: 0.9; }
.m-esc__ruby   { fill: var(--m-ruby); stroke: #e0707f; stroke-width: 0.6; }
.m-esc__rim    { fill: none; stroke: #D4AF6A; stroke-width: 8; }
.m-esc__screw  { fill: #e3c47f; stroke: #8a6a30; stroke-width: 0.6; }
.m-esc__roller { fill: #1c2640; stroke: #D4AF6A; stroke-width: 0.8; }
.m-esc__hairspring { fill: none; stroke: #8fa6c9; stroke-width: 0.7; }
.m-esc__label { opacity: 0; transition: opacity 0.5s ease; }
.m-esc__label.is-active { opacity: 1; }
.m-esc__leader { fill: none; stroke: var(--c-or); stroke-width: 0.8; }
.m-esc__leader-dot { fill: var(--c-or); }
.m-esc__label-text { font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--c-text); }
body.light .m-esc__drum, body.light .m-esc__roller, body.light .m-esc__arbor { fill: #1c2640; }
body.light .m-esc__ew { fill: rgba(60,70,90,0.25); stroke: #4a5570; }
body.light .m-esc__anchor { fill: rgba(60,80,120,0.35); stroke: #4a5a78; }
body.light .m-esc__pinion { fill: rgba(80,90,110,0.4); stroke: #5a6480; }

.m-esc__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: var(--sp-sm) 0 0;
  padding: 0;
  list-style: none;
}
.m-esc__dots li {
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
  border: 1px solid var(--c-border);
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.m-esc__dots li.is-active { color: var(--c-or); border-color: var(--c-or); }
.m-esc__steps { padding: 30vh 0 10vh; }
.m-esc__step {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.m-esc__step.is-active { opacity: 1; }
.m-esc__num { font-family: var(--f-ui); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--c-or); }
.m-esc__step h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; color: var(--c-text); margin: 6px 0 8px; }
.m-esc__step p { margin: 0; }
.m-esc__more {
  display: inline-block;
  margin-top: var(--sp-lg);
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-or);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.m-esc__more:hover { color: var(--c-or-light); }
@media (max-width: 640px) {
  .m-esc__sticky { top: 64px; }
  .m-esc__svg { max-height: 34vh; }
  .m-esc__badge { display: none; }
  .m-esc__step { min-height: 46vh; }
  .m-esc__label-text { font-size: 15px; }
}

/* ─────────────────────────────────────────────
   Fiche technique vivante
   ───────────────────────────────────────────── */
.m-spec { display: block; margin-top: 8px; max-width: 260px; }
.m-spec__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-top: 4px;
}
.m-spec__track {
  position: relative;
  display: block;
  height: 8px;
  border: 1px solid var(--c-border-2);
  background: var(--c-bg-3);
  overflow: hidden;
}
.m-spec__track i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-border-2); z-index: 1; }
.m-spec__track i.maj { background: var(--c-text-3); }
.m-spec__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #8a6a30, var(--c-or-light));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.8s var(--m-ease) 0.2s;
}
.m-specs-on .m-spec__fill { transform: scaleX(var(--m-v)); }

.m-spec__water {
  position: relative;
  display: block;
  height: 10px;
  border: 1px solid var(--c-border-2);
  background: linear-gradient(90deg, #7fb2e5 0%, #2a5d9a 45%, #0b1a3a 100%);
  overflow: hidden;
}
.m-spec__water::after {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  background: var(--c-bg-3);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 2s var(--m-ease) 0.2s;
}
.m-specs-on .m-spec__water::after { transform: scaleX(calc(1 - var(--m-v))); }
.m-spec__diver {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #F0EBE0;
  box-shadow: 0 0 6px #7fb2e5;
  z-index: 2;
  transition: left 2s var(--m-ease) 0.2s;
}
.m-specs-on .m-spec__diver { left: calc(var(--m-v) * 100%); }

.m-spec--freq {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.m-spec--freq svg { width: 22px; height: 22px; flex-shrink: 0; }
.m-spec--freq circle { fill: none; stroke: var(--c-or); stroke-width: 1.4; }
.m-spec--freq circle:last-child { fill: var(--c-or); stroke: none; }
.m-spec__bal line { stroke: var(--c-or); stroke-width: 1.2; }
.m-spec__bal {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: m-balance var(--m-period, 0.25s) ease-in-out infinite alternate;
  animation-play-state: paused;
}
.m-specs-on .m-spec__bal { animation-play-state: running; }
@keyframes m-balance { from { transform: rotate(-110deg); } to { transform: rotate(110deg); } }

.m-spec--cote { display: flex; align-items: center; gap: 10px; }
.m-spec__cote {
  position: relative;
  display: block;
  width: calc(var(--m-v) * 160px);
  min-width: 30px;
  height: 10px;
  flex-shrink: 0;
}
.m-spec__cote i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--c-or);
  transform: scaleX(0);
  transition: transform 1.2s var(--m-ease) 0.2s;
}
.m-spec__cote::before, .m-spec__cote::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--c-or);
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}
.m-spec__cote::before { left: 0; }
.m-spec__cote::after { right: 0; }
.m-specs-on .m-spec__cote i { transform: scaleX(1); }
.m-specs-on .m-spec__cote::before, .m-specs-on .m-spec__cote::after { opacity: 1; }
.m-spec__cote-lbl { font-family: var(--f-ui); font-size: 0.55rem; letter-spacing: 0.12em; color: var(--c-or); white-space: nowrap; }

/* ─────────────────────────────────────────────
   404 : montre arrêtée
   ───────────────────────────────────────────── */
.m-stopped {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  margin-top: var(--sp-xl);
}
.m-stopped__watch {
  width: min(340px, 82vw);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
  touch-action: none;
}
.m-stopped__ticks line { stroke: rgba(212,175,106,0.55); stroke-width: 1; }
.m-stopped__ticks line.maj { stroke: #D4AF6A; stroke-width: 3; }
.m-stopped__knurl line { stroke: rgba(60,40,10,0.55); stroke-width: 1.2; }
.m-stopped__crown { cursor: ns-resize; outline: none; }
.m-stopped__crown:focus-visible rect:first-child { stroke: #fff; stroke-width: 1.5; }
.m-stopped.is-winding .m-stopped__crown rect:first-child { filter: brightness(1.2); }
.m-stopped__pr-track { fill: none; stroke: rgba(240,235,224,0.12); stroke-width: 5; stroke-linecap: round; }
.m-stopped__pr-fill {
  fill: none;
  stroke: #D4AF6A;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.25s ease;
}
.m-stopped__pr-lbl { font-family: var(--f-ui); font-size: 6.5px; letter-spacing: 0.22em; text-transform: uppercase; fill: rgba(240,235,224,0.5); }
.m-stopped__pr-min { font-family: var(--f-ui); font-size: 7px; fill: rgba(240,235,224,0.45); }
.m-stopped__brand { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.4em; fill: rgba(240,235,224,0.85); }
.m-stopped__date { font-family: var(--f-display); font-size: 15px; font-weight: 600; fill: var(--m-ruby); letter-spacing: 0.08em; }
.m-stopped__hint {
  font-family: var(--f-ui);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-text-3);
  text-align: center;
  line-height: 1.8;
  max-width: 340px;
}
.m-stopped__arrow { color: var(--c-or); font-size: 0.9rem; display: inline-block; vertical-align: -1px; animation: m-nudge 1.6s ease-in-out infinite; }
@keyframes m-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.m-stopped__status { min-height: 1.2em; font-family: var(--f-display); font-style: italic; color: var(--c-or-light); font-size: 1.05rem; }
.m-stopped.is-click .m-stopped__watch { animation: m-tick 0.12s ease; }
@keyframes m-tick { 50% { transform: rotate(0.6deg); } }
.m-stopped[data-state="running"] .m-stopped__hint { opacity: 0; }

/* ─────────────────────────────────────────────
   Chiffres qui défilent + menu « trotteuse »
   ───────────────────────────────────────────── */
.m-roll__col {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
  line-height: 1;
}
.m-roll__strip {
  display: flex;
  flex-direction: column;
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--d, 0s) + var(--i) * 0.1s);
}
.m-roll__strip span { height: 1em; line-height: 1; }
.m-roll-on .m-roll__strip { transform: translateY(calc(var(--m-to) * -1em)); }
.m-roll__static { display: inline-block; }

/* soulignement du menu qui avance par à-coups, comme une trotteuse */
.main-nav a:hover::after { transition: width 0.6s steps(6, jump-end); }

/* ─────────────────────────────────────────────
   Schémas animés « La mécanique de A à Z » (mecanique.js)
   ───────────────────────────────────────────── */
.m-fig {
  margin: var(--sp-2xl) 0;
  padding: var(--sp-lg) 0 var(--sp-md);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  min-height: 320px;
}
.m-fig.is-ready { min-height: 0; }
.m-fig__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.m-fig__num {
  font-family: var(--f-ui);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-or);
}
.m-fig__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  color: var(--c-text);
  margin: 4px 0 0;
  line-height: 1.2;
}
.m-fig__tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.m-fig__badge {
  font-family: var(--f-ui);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-text-3);
  border: 1px solid var(--c-border-2);
  padding: 4px 8px;
}
.m-fig__play {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--c-border-2);
  background: none;
  color: var(--c-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.m-fig__play:hover { border-color: var(--c-or); color: var(--c-or); }
.m-fig__play svg { width: 11px; height: 11px; fill: currentColor; }
.m-fig__stage { position: relative; }
.m-fig__svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.m-fig__phase {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: baseline;
  margin: var(--sp-sm) 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--c-or);
  background: var(--c-bg-2);
  min-height: 4.2em;
}
.m-fig__phase b {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--c-or-light);
  white-space: nowrap;
}
.m-fig__phase span { font-size: 0.9rem; line-height: 1.55; color: var(--c-text-2); }
.m-fig__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: var(--sp-md);
}
.m-fig__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-or);
  background: none;
  border: 1px solid var(--c-or);
  padding: 9px 14px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  touch-action: manipulation;
}
.m-fig__btn:hover, .m-fig__btn:focus-visible { background: var(--c-or); color: var(--c-bg); }
.m-fig__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.m-fig__seg { display: inline-flex; border: 1px solid var(--c-border-2); }
.m-fig__seg button {
  font-family: var(--f-ui);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  background: none;
  border: 0;
  border-right: 1px solid var(--c-border-2);
  padding: 9px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.m-fig__seg button:last-child { border-right: 0; }
.m-fig__seg button.is-on { color: var(--c-bg); background: var(--c-or); }
.m-fig__hint {
  font-family: var(--f-ui);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.m-fig__readout {
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}
.m-fig__readout b { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--c-or-light); font-variant-numeric: tabular-nums; margin-left: 4px; }
.m-fig__range { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 220px; }
.m-fig__range span { font-family: var(--f-ui); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); white-space: nowrap; }
.m-fig__range input { flex: 1; accent-color: var(--c-or); min-width: 120px; }
.m-fig__legend {
  list-style: none;
  margin: var(--sp-md) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 20px;
}
.m-fig__legend li { display: flex; gap: 10px; align-items: baseline; font-size: 0.82rem; line-height: 1.45; color: var(--c-text-2); cursor: default; }
.m-fig__legend b {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--c-or);
  color: var(--c-or);
  font-family: var(--f-ui);
  font-size: 0.6rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  transform: translateY(3px);
}
.m-fig__legend li:hover b { background: var(--c-or); color: var(--c-bg); }
.m-fig__caption {
  margin-top: var(--sp-md);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--c-text-2);
}

/* pièces dessinées */
.mf-grid line { stroke: var(--c-border); stroke-width: 0.5; opacity: 0.5; }
.mf-metal { fill: url(#mf-gold); stroke: #D4AF6A; stroke-width: 0.9; }
.mf-metal-solid { fill: url(#mf-gold-solid); stroke: #8A6A30; stroke-width: 0.8; }
.mf-steel { fill: url(#mf-steel); stroke: #cfd6e2; stroke-width: 0.8; }
.mf-steel-solid { fill: url(#mf-steel-solid); stroke: #5d6a85; stroke-width: 0.6; }
.mf-ruby { fill: url(#mf-ruby); stroke: #e0707f; stroke-width: 0.6; }
.mf-ruby-shine { fill: rgba(255,255,255,0.6); }
.mf-line { fill: none; stroke: #D4AF6A; stroke-opacity: 0.5; stroke-width: 1; }
.mf-spoke { stroke: #D4AF6A; stroke-opacity: 0.55; stroke-linecap: round; }
.mf-spoke--ghost { stroke-opacity: 0.22; }
.mf-mark { fill: #F0EBE0; }
.mf-drum { fill: rgba(8,12,20,0.6); stroke: #D4AF6A; stroke-opacity: 0.6; }
.mf-drum--light { fill: rgba(8,12,20,0.35); stroke-opacity: 0.35; }
.mf-spring { fill: none; stroke: #8fa6c9; stroke-width: 1; }
.mf-spring--main { stroke-width: 1.6; stroke: #a9bddc; }
.mf-springwire { fill: none; stroke: #b8c6dc; stroke-width: 2; stroke-linecap: round; }
.mf-arbor { fill: #1c2640; stroke: #D4AF6A; stroke-width: 1; }
.mf-knurl { stroke: rgba(60,40,10,0.55); stroke-width: 1.2; }
.mf-screw { fill: #2a3656; stroke: #D4AF6A; stroke-width: 1; }
.mf-sunray { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 0.6; }
.mf-rim { fill: none; stroke: #D4AF6A; stroke-width: 6; }
.mf-rim--ghost { stroke-opacity: 0.35; stroke-width: 9; }
.mf-roller { fill: rgba(28,38,64,0.9); stroke: #D4AF6A; stroke-width: 1; }
.mf-roller--safety { fill: rgba(28,38,64,0.6); }
.mf-anchor { fill: url(#mf-steel-solid); stroke: #5d6a85; stroke-width: 0.8; }
.mf-anchor-arm { stroke: url(#mf-steel-solid); stroke: #aab6cc; stroke-width: 13; stroke-linecap: round; opacity: 0.85; }
.mf-anchor-arm--fork { stroke-width: 9; }
.mf-dart { stroke: #cfd6e2; stroke-width: 2; }
.mf-ew { fill: rgba(200,208,222,0.4); }
.mf-dialface { fill: url(#mf-dial); stroke: #D4AF6A; stroke-width: 1.2; }
.mf-idx { stroke: #D4AF6A; stroke-width: 1.2; }
.mf-hand { stroke: #F0EBE0; stroke-width: 2; stroke-linecap: round; }
.mf-hand--h { stroke-width: 3; stroke: #D4AF6A; }
.mf-handshape { fill: #F0EBE0; stroke: #8A6A30; stroke-width: 0.8; }
.mf-sec { stroke: #d2465a; stroke-width: 2; stroke-linecap: round; }
.mf-sec-hub { fill: #d2465a; }
.mf-gauge { fill: var(--c-bg-3); stroke: var(--c-border-2); }
.mf-gauge-fill { fill: #D4AF6A; }
.mf-hit { fill: transparent; cursor: ns-resize; touch-action: none; }
.mf-clic { font-family: var(--f-display); font-style: italic; font-size: 15px; fill: var(--c-or-light); }
.mf-cap { font-family: var(--f-ui); font-size: 10px; letter-spacing: 0.22em; fill: var(--c-text-3); }
.mf-note { font-family: var(--f-display); font-style: italic; font-size: 13px; fill: var(--c-text-3); }
.mf-link { stroke: var(--c-border-2); stroke-width: 1.5; }
.mf-link--dash { stroke-dasharray: 4 5; }
.mf-pulse { fill: #F0D594; filter: drop-shadow(0 0 4px rgba(212,175,106,0.9)); }
.mf-node { cursor: pointer; outline: none; }
.mf-node__ring { fill: var(--c-bg-2); stroke: var(--c-border-2); stroke-width: 1.5; transition: stroke 0.3s; }
.mf-node:hover .mf-node__ring, .mf-node:focus-visible .mf-node__ring, .mf-node.is-hl .mf-node__ring { stroke: var(--c-or); }
.mf-leader { stroke: var(--c-or); stroke-width: 0.8; stroke-opacity: 0.7; }
.mf-leader-dot { fill: var(--c-or); }
.mf-badge { fill: var(--c-bg); stroke: var(--c-or); stroke-width: 1.2; }
.mf-badge-n { font-family: var(--f-ui); font-size: 11px; font-weight: 600; fill: var(--c-or); }
.mf-callout.is-hl .mf-badge { fill: var(--c-or); }
.mf-callout.is-hl .mf-badge-n { fill: var(--c-bg); }
.mf-part { transition: filter 0.3s ease; }
.mf-part.is-hl, .mf-part.is-active { filter: drop-shadow(0 0 6px rgba(240,213,148,0.95)); }
.mf-wheel.is-blur { opacity: 0.28; filter: blur(1.2px); }
.is-blur { opacity: 0.25; }
body.light .mf-drum, body.light .mf-roller, body.light .mf-arbor, body.light .mf-screw { fill: #1c2640; }
body.light .mf-ew { fill: rgba(60,70,90,0.25); }
body.light .mf-steel { fill: rgba(90,100,125,0.35); stroke: #4a5570; }
body.light .mf-node__ring { fill: var(--c-bg-3); }

.m-fig__btn--ghost { border-color: var(--c-border-2); color: var(--c-text-2); }
.m-fig__btn--ghost:hover, .m-fig__btn--ghost.is-on { border-color: var(--c-or); color: var(--c-or); background: none; }
.m-fig__btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.m-fig__val { font-family: var(--f-display); font-weight: 500; color: var(--c-or-light); min-width: 3.6em; font-variant-numeric: tabular-nums; }
.m-fig__readout--line { margin: 0; width: 100%; font-size: 0.58rem; }
.mf-sign { font-family: var(--f-display); font-size: 22px; fill: var(--c-or); }
.mf-dialnum { font-family: var(--f-display); font-size: 16px; fill: rgba(240,235,224,0.7); }
.mf-dialring { fill: none; stroke: var(--c-border-2); stroke-width: 1.5; stroke-dasharray: 2 4; }
.mf-refhand { stroke: #8fa6c9; stroke-width: 1.5; stroke-linecap: round; transition: opacity 0.4s; }
.mf-sec--gold { stroke: #F0D594; }
.mf-sec-hub--gold { fill: #F0D594; }
.mf-screw--gold { fill: #e3c47f; stroke: #8a6a30; }
.mf-rim--bal { stroke-width: 8; }
.mf-hairspring { stroke: #a9bddc; }
.m-fig.is-quartz [data-n="1"], .m-fig.is-quartz .mf-hairspring, .m-fig.is-quartz [data-n="3"] { opacity: 0.12; }
.mf-lever { stroke-linejoin: round; }
.mf-case { fill: none; stroke: #D4AF6A; stroke-width: 6; }
.mf-plate { fill: #121a2e; stroke: rgba(212,175,106,0.35); }
.mf-rotor { fill: url(#mf-gold); stroke: #D4AF6A; stroke-width: 1.2; }
.mf-rotor-txt { font-family: var(--f-display); font-size: 13px; letter-spacing: 0.4em; fill: rgba(240,235,224,0.6); }
.mf-ball { fill: #e6ebf2; }
.mf-gravity { fill: none; stroke: var(--c-text-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mf-rev .mf-metal { fill-opacity: 0.85; }
.mf-clutch { fill: none; stroke: var(--c-border-2); stroke-width: 2; stroke-dasharray: 3 3; transition: fill 0.15s, stroke 0.15s; }
.mf-clutch.is-drive { stroke: #F0D594; stroke-dasharray: none; fill: rgba(240,213,148,0.18); filter: drop-shadow(0 0 5px rgba(240,213,148,0.8)); }
.mf-flow { stroke: var(--c-or); stroke-width: 1.4; stroke-dasharray: 3 4; }
.mf-slip { fill: var(--c-or-light); transition: opacity 0.4s; }
.mf-hit--rotate { cursor: grab; }
.mf-hit--rotate:active { cursor: grabbing; }
.mf-brass { fill: #7a6232; }
.mf-hatch { stroke: rgba(240,213,148,0.45); stroke-width: 1.4; }
.mf-cut { stroke: #D4AF6A; stroke-width: 1; }
.mf-oil { fill: rgba(120,190,230,0.55); }
.mf-stripe { stroke: rgba(255,255,255,0.35); stroke-width: 2; }
.mf-lyre { fill: none; stroke: #cfd6e2; stroke-width: 2.4; stroke-linecap: round; }
.mf-broken { transition: opacity 0.2s; }
.m-fig.is-broken [data-n="5"] { filter: drop-shadow(0 0 6px rgba(210,70,90,0.9)); }
.mf-flash { fill: none; stroke: #F0D594; stroke-width: 3; opacity: 0; }
.mf-cage-ring { fill: none; stroke: #b8c6dc; stroke-width: 7; }
.mf-cage-arm { fill: rgba(143,166,201,0.35); stroke: #b8c6dc; stroke-width: 1.2; }
.mf-marker { fill: #F0D594; }
body.light .mf-plate { fill: #1c2640; }

/* ── Schémas : répétition minutes ── */
.m-fig__time { display: inline-flex; align-items: center; gap: 10px; }
.m-fig__time span { font-family: var(--f-ui); font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); }
.m-fig__time input {
  font-family: var(--f-display);
  font-size: 1.15rem;
  color: var(--c-text);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border-2);
  padding: 4px 8px;
  color-scheme: dark;
}
body.light .m-fig__time input { color-scheme: light; }
.m-fig__counts { display: flex; flex-wrap: wrap; gap: 6px 18px; width: 100%; margin: 0; font-family: var(--f-ui); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-3); }
.m-fig__counts span { transition: color 0.2s; }
.m-fig__counts b, .m-fig__counts i { font-family: var(--f-display); font-style: normal; font-size: 1.15rem; font-weight: 500; letter-spacing: 0; color: var(--c-text-2); margin-right: 2px; }
.m-fig__counts span.is-on, .m-fig__counts span.is-on b { color: var(--c-or-light); }
.mf-dialbrand { font-family: var(--f-display); font-size: 14px; letter-spacing: 0.4em; fill: rgba(240,235,224,0.85); }
.mf-dialsub { font-family: var(--f-ui); font-size: 7px; letter-spacing: 0.26em; fill: rgba(240,235,224,0.5); }
.mf-slot { fill: #05080f; stroke: rgba(212,175,106,0.4); }
.mf-gong__wire { fill: none; stroke: #cfd6e2; stroke-width: 3.2; stroke-linecap: round; transition: stroke 0.2s; }
.mf-gong.is-ringing .mf-gong__wire { stroke: #F0D594; filter: drop-shadow(0 0 5px rgba(240,213,148,0.9)); }
.mf-hammer-arm { stroke: #b8c6dc; stroke-width: 5; stroke-linecap: round; }
.mf-hammer-head { fill: url(#mf-steel-solid); stroke: #5d6a85; }
.mf-ripple { fill: none; stroke: #F0D594; stroke-width: 1.6; opacity: 0; }
.mf-snail { stroke-width: 1.2; }
.mf-rack { stroke-width: 0.8; }
.mf-anchor-arm--thin { stroke-width: 7; }
.mf-drum-inner { fill: #0f1627; stroke: #D4AF6A; stroke-width: 1.2; }
.mf-friction { fill: none; stroke: #F0D594; stroke-width: 4; opacity: 0; filter: drop-shadow(0 0 6px rgba(240,213,148,0.9)); }
.mf-dot-low { fill: #D4AF6A; }
.mf-dot-high { fill: #cfd6e2; }
.mf-playhead { stroke: #F0EBE0; stroke-width: 2; }

/* ── Schémas : chronographe ── */
.mf-bezel { fill: #0a0f1c; stroke: #D4AF6A; stroke-width: 1.2; }
.mf-tachy { font-family: var(--f-ui); font-size: 8px; letter-spacing: 0.04em; fill: rgba(240,235,224,0.7); }
.mf-subdial { fill: rgba(5,8,15,0.55); stroke: rgba(212,175,106,0.6); }
.mf-subtxt { font-family: var(--f-ui); font-size: 6px; letter-spacing: 0.2em; fill: rgba(240,235,224,0.5); }
.mf-subhand { stroke: #F0EBE0; stroke-width: 1.6; stroke-linecap: round; }
.mf-pusher { cursor: pointer; outline: none; }
.mf-pusher:focus-visible rect { stroke: #fff; stroke-width: 1.5; }
.mf-readout { font-family: var(--f-display); font-size: 34px; fill: var(--c-text); font-variant-numeric: tabular-nums; }
.mf-lever-arm { stroke: #aab6cc; stroke-width: 9; stroke-linecap: round; opacity: 0.9; }
.mf-lever-arm--short { stroke-width: 7; }
.mf-brakepad { fill: #d2465a; stroke: #7a1f2c; }
.mf-column { stroke-width: 0.8; }
.mf-heart { stroke-width: 1.2; }
.mf-force { fill: none; stroke: #F0D594; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(240,213,148,0.8)); }
.m-fig.is-engaged [data-n="4"] { filter: drop-shadow(0 0 6px rgba(240,213,148,0.95)); }

/* ── Schémas : oscillateurs ── */
.mf-plotbox { fill: var(--c-bg-2); stroke: var(--c-border); }
.mf-trace { stroke: #d2465a; stroke-width: 1.8; stroke-linejoin: round; }
.mf-battery { fill: #7d8aa3; stroke: #cfd6e2; stroke-width: 1.2; }
.mf-battery-top { fill: #b8c2d4; }
.mf-capsule { fill: rgba(200,208,222,0.18); stroke: #cfd6e2; stroke-width: 1.2; }
.mf-quartz { fill: rgba(220,235,255,0.85); stroke: #9fb4d8; stroke-width: 0.8; }
.mf-chip { fill: #111726; stroke: #3a4666; stroke-width: 1.4; }
.mf-pin { stroke: #b8c6dc; stroke-width: 2.4; }
.mf-led-base { fill: #0b101d; stroke: var(--c-border-2); }
.mf-led { fill: #2a2418; transition: fill 0.05s; }
.mf-led.is-on { fill: #F0D594; filter: drop-shadow(0 0 5px rgba(240,213,148,0.9)); }
.mf-led.is-blur { fill: rgba(240,213,148,0.55); filter: none; }
.mf-ledlabel { font-family: var(--f-ui); font-size: 9px; fill: var(--c-text-3); letter-spacing: 0.04em; }
.mf-stator { fill: none; stroke: #8a94a8; stroke-width: 10; stroke-linejoin: round; }
.mf-coil { fill: #7a4a1f; stroke: #c98a3c; stroke-width: 1; transition: filter 0.1s; }
.mf-coil.is-pulse { filter: drop-shadow(0 0 8px rgba(255,190,90,1)); }
.mf-coilwire { stroke: #e0a55a; stroke-width: 1; }
.mf-magnet-n { fill: #b0364a; }
.mf-magnet-s { fill: #3a5d9a; }
.mf-mag { font-family: var(--f-ui); font-size: 9px; font-weight: 600; fill: #fff; }
.mf-wire { fill: none; stroke: #c98a3c; stroke-width: 1.6; stroke-linejoin: round; }
.mf-wire--thin { stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.7; }
.m-fig.is-off .mf-quartz, .m-fig.is-off .mf-led, .m-fig.is-off .mf-wire { opacity: 0.35; }
.mf-field { fill: none; stroke: #7fb2e5; stroke-width: 10; opacity: 0.15; filter: blur(2px); }
.mf-gauge-arc { fill: none; stroke: var(--c-border-2); stroke-width: 8; stroke-linecap: round; }
.mf-target { stroke: #F0D594; stroke-width: 2; }
.mf-needle { stroke: #d2465a; stroke-width: 2.4; stroke-linecap: round; }
.mf-axis { stroke: var(--c-text-3); stroke-width: 1; }
.mf-gridline { stroke: var(--c-border); stroke-width: 0.8; stroke-dasharray: 2 4; }
.mf-series { stroke-width: 2.4; stroke-linejoin: round; }
.mf-series-dot { stroke: none; }
.mf-series-lab { font-family: var(--f-ui); font-size: 10px; letter-spacing: 0.06em; fill: var(--c-text-2); }
.mf-line-mech { stroke: #D4AF6A; fill: #D4AF6A; }
.mf-line-quartz { stroke: #8fa6c9; fill: #8fa6c9; }
.mf-line-sd { stroke: #d2465a; fill: #d2465a; }
.mf-line-haq { stroke: #7fc4a0; fill: #7fc4a0; }
polyline.mf-series { fill: none; }
@media (max-width: 640px) {
  .mf-readout { font-size: 40px; }
  .mf-tachy { font-size: 10px; }
  .mf-ledlabel { font-size: 12px; }
  .mf-series-lab { font-size: 13px; }
}

/* tableau comparatif (article quartz / mécanique / Spring Drive) */
.m-compare { width: 100%; border-collapse: collapse; margin: var(--sp-xl) 0; font-size: 0.9rem; }
.m-compare th, .m-compare td { padding: 11px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; line-height: 1.5; color: var(--c-text-2); }
.m-compare thead th { font-family: var(--f-ui); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-or); border-bottom-color: var(--c-or); }
.m-compare tbody td:first-child { font-family: var(--f-ui); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); white-space: nowrap; }
@media (max-width: 640px) { .m-compare { display: block; overflow-x: auto; } }

/* ── Schémas : calendriers ── */
.m-fig__lk { color: var(--c-text); font-weight: 500; }
.mf-step { cursor: pointer; outline: none; }
.mf-step__bar { fill: var(--c-bg-3); stroke: var(--c-border-2); transition: fill 0.3s, stroke 0.3s; }
.mf-step:hover .mf-step__bar, .mf-step:focus-visible .mf-step__bar, .mf-step.is-hl .mf-step__bar { fill: rgba(212,175,106,0.18); stroke: var(--c-or); }
.mf-step__num { font-family: var(--f-display); font-size: 26px; fill: var(--c-or-light); }
.mf-step__lab { font-family: var(--f-ui); font-size: 8.5px; letter-spacing: 0.14em; fill: var(--c-text-2); }
.mf-danger { fill: rgba(210,70,90,0.12); stroke: rgba(210,70,90,0.5); stroke-dasharray: 3 3; transition: fill 0.3s; }
.m-fig.is-danger .mf-danger { fill: rgba(210,70,90,0.28); }
.mf-ring { stroke-width: 0.8; }
.mf-ringnum { font-family: var(--f-ui); font-size: 9px; fill: #F0EBE0; }
.mf-window { fill: none; stroke: #F0D594; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(240,213,148,0.7)); }
.m-fig.is-wrong .mf-window { stroke: #d2465a; filter: drop-shadow(0 0 5px rgba(210,70,90,0.9)); }
.mf-tiny { font-family: var(--f-ui); font-size: 7px; letter-spacing: 0.06em; fill: rgba(240,235,224,0.75); }
.mf-inst { stroke: #F0D594; }
.mf-warn { color: #e0707f; margin-left: 6px; text-transform: none; letter-spacing: 0.04em; }
.mf-bigdisc { fill: #F5F0E8; stroke: #c9bfae; }
.mf-bigdigit { font-family: var(--f-display); font-size: 34px; font-weight: 500; fill: #0b1020; }
.mf-dialmask { fill: var(--c-bg-2); opacity: 0.9; }
.mf-disp { font-family: var(--f-display); font-size: 17px; letter-spacing: 0.08em; fill: var(--c-or-light); }
.m-fig.is-flash .mf-plotbox { stroke: #d2465a; }
.mf-moon { fill: #E8C98A; }
.mf-moonframe { fill: none; stroke: #D4AF6A; stroke-width: 2.4; }
.mf-readoutsm { font-family: var(--f-display); font-size: 17px; fill: var(--c-text-2); }
.mf-sun { fill: #F2C14E; filter: drop-shadow(0 0 5px rgba(242,193,78,0.9)); }
@media (max-width: 640px) {
  .mf-ringnum { font-size: 11px; }
  .mf-tiny { font-size: 9px; }
  .mf-step__lab { font-size: 10px; }
  .mf-readoutsm { font-size: 20px; }
}

/* ── Schémas : fuseaux horaires ── */
.m-fig__time select {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  color: var(--c-text);
  background: var(--c-bg-2);
  border: 1px solid var(--c-border-2);
  padding: 6px 8px;
  color-scheme: dark;
  max-width: 220px;
}
body.light .m-fig__time select { color-scheme: light; }
.mf-ray { stroke: rgba(242,193,78,0.35); stroke-width: 2; stroke-dasharray: 6 8; }
.mf-night { fill: rgba(5,8,20,0.55); }
.mf-hournum { font-family: var(--f-ui); font-size: 10px; fill: rgba(240,235,224,0.85); }
.mf-hournum--dark { fill: #1a1408; font-weight: 600; }
.mf-earth { fill: #16305a; stroke: #7fb2e5; stroke-width: 1.2; }
.mf-meridian { stroke: rgba(127,178,229,0.35); stroke-width: 0.8; }
.mf-shade { fill: rgba(3,6,14,0.55); pointer-events: none; }
.mf-citydot { fill: #F0D594; }
.mf-citylab { font-family: var(--f-ui); font-size: 8px; fill: rgba(240,235,224,0.75); }
.mf-city.is-key .mf-citylab { fill: #F0D594; font-weight: 600; }
.mf-city.is-key .mf-citydot { fill: #d2465a; }
.mf-bezelnum { font-family: var(--f-display); font-size: 17px; fill: #F0EBE0; }
.mf-bezelnum--sm { font-size: 13px; }
.mf-readmark { fill: none; stroke: #d2465a; stroke-width: 2; }
.mf-bezel-day { fill: #b89452; stroke: #8a6a30; }
.mf-bezel-night { fill: #13254a; stroke: #0a1122; }
.mf-bezel-day + .mf-bezel-night ~ text { fill: #F0EBE0; }
.mf-gmthand { stroke: #d2465a; stroke-width: 2.4; stroke-linecap: round; }
.mf-gmttip { fill: #d2465a; }
.mf-datewin { font-family: var(--f-display); font-size: 17px; font-weight: 500; fill: #0b1020; }
.m-fig .mf-window + .mf-datewin { fill: #F0EBE0; }
.mf-cityring { fill: #0a0f1c; stroke: rgba(212,175,106,0.6); }
.mf-citytxt { font-family: var(--f-ui); font-size: 7px; letter-spacing: 0.08em; fill: rgba(240,235,224,0.85); }
.mf-halfcities { opacity: 0; transition: opacity 0.4s; }
.m-fig.is-half .mf-halfcities { opacity: 1; }
.mf-halfdot { fill: #d2465a; }

/* ── Schémas : chronographe (mesures) ── */
.mf-splithand { stroke: #7fb2e5; stroke-width: 2.4; stroke-linecap: round; }
.mf-road { stroke: var(--c-border-2); stroke-width: 3; stroke-dasharray: 10 8; }
.mf-car { fill: #d2465a; stroke: #7a1f2c; }
.mf-bolt { fill: none; stroke: #F2C14E; stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(242,193,78,0.9)); transition: opacity 0.1s; }
.mf-soundwave { fill: none; stroke: #8fa6c9; stroke-width: 2; stroke-dasharray: 4 4; }
.mf-listener { fill: #F0D594; }
.mf-heartbeat { fill: #d2465a; }

/* ── Schémas : fréquence ── */
.mf-finish { stroke: #F0D594; stroke-width: 3; stroke-dasharray: 6 4; }
.mf-ball-big { fill: url(#mf-steel-solid); stroke: #5d6a85; }
.mf-barlab { font-family: var(--f-ui); font-size: 10px; letter-spacing: 0.04em; fill: #0b1020; font-weight: 600; }
@media (max-width: 640px) {
  .mf-citylab { font-size: 11px; }
  .mf-citytxt { font-size: 9px; }
  .mf-hournum { font-size: 12px; }
  .m-fig__time select { max-width: 100%; }
}

/* échappement : ce qui travaille pendant chaque phase */
.m-fig[data-phase="degagement"] .mf-part--pin,
.m-fig[data-phase="degagement"] .mf-part--fork,
.m-fig[data-phase="impulsion"] .mf-part--pin,
.m-fig[data-phase="impulsion"] .mf-part--stone.is-active,
.m-fig[data-phase="chute"] .mf-part--wheel,
.m-fig[data-phase="verrouillage"] .mf-part--stone.is-active { filter: drop-shadow(0 0 7px rgba(240,213,148,1)); }

@media (max-width: 640px) {
  .m-fig__badge { display: none; }
  .m-fig__readout { margin-left: 0; width: 100%; }
  .m-fig__phase { grid-template-columns: 1fr; }
  .mf-cap { font-size: 14px; }
  .mf-note { font-size: 17px; }
  .mf-badge { r: 14px; }
  .mf-badge-n { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-part { transition: none; }
}

/* glossaire de l'article « de A à Z » */
.m-glossary {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 0;
  margin: var(--sp-lg) 0;
  border-top: 1px solid var(--c-border);
}
.m-glossary dt, .m-glossary dd {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
  margin: 0;
}
.m-glossary dt {
  font-family: var(--f-display);
  font-size: 1.08rem;
  color: var(--c-or-light);
  padding-right: var(--sp-lg);
}
.m-glossary dd { font-size: 0.92rem; line-height: 1.6; color: var(--c-text-2); }
@media (max-width: 560px) {
  .m-glossary { grid-template-columns: 1fr; }
  .m-glossary dt { border-bottom: 0; padding-bottom: 0; }
}

/* ─────────────────────────────────────────────
   Accessibilité (compléments)
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m-mode__disc, .m-roll__strip, .m-spec__fill, .m-spec__water::after, .m-spec__diver,
  .m-spec__cote i, .m-esc__part, .m-esc__label, .m-esc__step { transition: none !important; }
  .m-spec__bal, .m-stopped__arrow { animation: none !important; }
  .main-nav a:hover::after { transition: none; }
}