/* ═══════════════════════════════════════════════════════════════
   MELODIA FUNÈBRE — Design System v4 « Maison »
   Encre profonde · or patiné · ivoire · retenue éditoriale
   Direction : alternance sombre / ivoire, or en filet, jamais en aplat
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Encres ─── */
  --ink: #040407;
  --ink-2: #08080d;
  --ink-3: #0d0d14;
  --surface: #0b0b11;
  --surface-2: #101018;
  --surface-3: #16161f;

  /* ─── Filets ─── */
  --line: rgba(201, 168, 76, 0.12);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(201, 168, 76, 0.3);

  /* ─── Or ─── */
  --or-deep: #6b5828;
  --or-patina: #97803c;
  --or: #c9a84c;
  --or-bright: #e3c977;
  --or-soft: rgba(201, 168, 76, 0.07);
  --or-grad: linear-gradient(135deg, #97803c 0%, #e3c977 45%, #c9a84c 100%);

  /* ─── Neutres ─── */
  --silver: #d8d8dc;
  --silver-dim: #9a9aa2;
  --paper: #f2efe8;
  --bone: #c4bba6;
  --ash: #8e8878;
  --dust: #5d5a51;

  /* ─── Ivoire (sections claires) ─── */
  --ivory: #f4f1ea;
  --ivory-2: #ebe6db;
  --ivory-line: rgba(10, 8, 4, 0.1);
  --ivory-ink: #17150f;
  --ivory-soft: #55503f;
  --ivory-dim: #7d7663;

  /* ─── Sémantique ─── */
  --green: #4ade80;
  --amber: #fbbf24;
  --cyan: #38bdf8;
  --violet: #a78bfa;
  --red: #f87171;

  /* ─── Typographie ─── */
  --ff-d: 'Cormorant Garamond', 'Instrument Serif', Georgia, serif;
  --ff-b: 'Jost', 'Fraunces', system-ui, -apple-system, sans-serif;
  --ff-m: 'JetBrains Mono', ui-monospace, monospace;

  --fs-hero: clamp(2.7rem, 7.2vw, 6rem);
  --fs-xl: clamp(2rem, 4.6vw, 3.6rem);
  --fs-lg: clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead: clamp(1rem, 1.35vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.92rem;
  --fs-xs: 0.8rem;
  --fs-eyebrow: 0.56rem;

  /* ─── Rythme ─── */
  --sp-section: clamp(4.5rem, 10vw, 9rem);
  --sp-section-sm: clamp(2.5rem, 5vw, 4rem);
  --container: 1200px;
  --container-tight: 780px;
  --pad: clamp(1.2rem, 4vw, 2.2rem);
  --radius: 3px;
  --radius-lg: 6px;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.22s;
  --t-mid: 0.45s;
  --t-slow: 0.9s;
  --sh: 0 20px 60px rgba(0, 0, 0, 0.6);
  --sh-lift: 0 30px 80px rgba(0, 0, 0, 0.75);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); scroll-padding-top: 80px; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--ff-b);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }
ul { list-style: none; }
::selection { background: var(--or); color: var(--ink); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--or-deep); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--or-patina); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }

/* Lien d'évitement — accessibilité clavier */
.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--or); color: var(--ink); padding: 0.7rem 1.2rem;
  font-family: var(--ff-m); font-size: var(--fs-xs); border-radius: var(--radius);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }
.wrap-tight { max-width: var(--container-tight); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 2; }

/* ═══════════════════════════════════════════════════════════════
   GRAIN & VIGNETTE — profondeur de la matière
   ═══════════════════════════════════════════════════════════════ */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIE
   ═══════════════════════════════════════════════════════════════ */
.h-hero, .h-xl, .h-lg {
  font-family: var(--ff-d); font-weight: 300; line-height: 1.04;
  letter-spacing: -0.015em; color: var(--paper);
}
.h-hero { font-size: var(--fs-hero); }
.h-xl { font-size: var(--fs-xl); line-height: 1.08; }
.h-lg { font-size: var(--fs-lg); line-height: 1.2; }
.h-hero em, .h-xl em, .h-lg em {
  font-style: italic;
  background: var(--or-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);
}
.lead {
  font-size: var(--fs-lead); font-weight: 300; line-height: 1.72;
  color: var(--bone); max-width: 62ch;
}
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--ff-m); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--or-patina);
  margin-bottom: 1.4rem; display: flex; align-items: center; gap: 0.8rem;
}
.center .eyebrow { justify-content: center; }
.eyebrow::before, .eyebrow::after {
  content: ''; height: 1px; width: 26px; background: var(--line-strong); flex: none;
}
.eyebrow::before { display: none; }
.center .eyebrow::before { display: block; }

.rule { height: 1px; background: var(--line-soft); border: 0; }
.rule-gold {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--or-deep) 25%, var(--or) 50%, var(--or-deep) 75%, transparent);
  opacity: 0.55;
}
.mono {
  font-family: var(--ff-m); font-size: var(--fs-eyebrow); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--or-patina);
}

/* ═══════════════════════════════════════════════════════════════
   SECTIONS — alternance encre / ivoire
   ═══════════════════════════════════════════════════════════════ */
.section { padding: var(--sp-section) 0; position: relative; }
.section-sm { padding: var(--sp-section-sm) 0; position: relative; }
.section-top { border-top: 1px solid var(--line-soft); }
.section-tight { padding-top: var(--sp-section-sm); }

/* Section ivoire : respiration, lisibilité, contraste éditorial */
.section-light {
  background: var(--ivory);
  color: var(--ivory-ink);
  position: relative; z-index: 2;
}
.section-light::before, .section-light::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--or) 50%, transparent); opacity: 0.4;
}
.section-light::before { top: 0; }
.section-light::after { bottom: 0; }
.section-light .h-hero, .section-light .h-xl, .section-light .h-lg { color: var(--ivory-ink); }
.section-light .lead { color: var(--ivory-soft); }
.section-light .eyebrow { color: var(--or-deep); }
.section-light .eyebrow::before, .section-light .eyebrow::after { background: rgba(107, 88, 40, 0.35); }
.section-light .mono { color: var(--or-deep); }
.section-light .rule { background: var(--ivory-line); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(4, 4, 7, 0.86);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid), transform var(--t-mid) var(--ease);
}
.nav.at-top { background: transparent; border-color: transparent; }
.nav.hidden { transform: translateY(-100%); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0.85rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav-brand { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.nav-logo {
  height: 40px; width: 40px; object-fit: cover; border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid);
}
.nav-brand:hover .nav-logo { transform: scale(1.06); box-shadow: 0 0 22px rgba(201, 168, 76, 0.3); }
.nav-name { display: block; font-family: var(--ff-d); font-size: 1.22rem; line-height: 1; color: var(--paper); }
.nav-sub {
  display: block; font-family: var(--ff-m); font-size: 0.46rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--or-patina); margin-top: 3px;
}
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a {
  font-size: 0.85rem; font-weight: 300; color: var(--bone);
  position: relative; padding: 0.3rem 0; transition: color var(--t-fast);
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--or); transition: width var(--t-mid) var(--ease);
}
.nav-links a:hover { color: var(--paper); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--or); }
.nav-cta {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.5rem 1.1rem !important; color: var(--or) !important;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { background: var(--or-soft); border-color: var(--or); }
.nav-burger { display: none; padding: 0.4rem; }
.nav-burger svg { width: 26px; height: 26px; }
.nav-mobile {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
  background: rgba(4, 4, 7, 0.98); backdrop-filter: blur(24px);
  padding: 5.5rem var(--pad) 2rem; display: flex; flex-direction: column; gap: 0.3rem;
  transform: translateY(-100%); transition: transform var(--t-mid) var(--ease);
  border-bottom: 1px solid var(--line);
}
.nav-mobile.open { transform: translateY(0); }
.nav-mobile a {
  font-family: var(--ff-d); font-size: 1.6rem; color: var(--bone);
  padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft);
  transition: color var(--t-fast), padding-left var(--t-fast);
}
.nav-mobile a:hover, .nav-mobile a:focus-visible { color: var(--or); padding-left: 0.5rem; }
.nav-mobile-cta { margin-top: 1.4rem; display: grid; gap: 0.7rem; }

/* ═══════════════════════════════════════════════════════════════
   BOUTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 2rem; border-radius: var(--radius);
  font-family: var(--ff-m); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  white-space: nowrap; text-align: center; border: 1px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn-gold {
  background: var(--or-grad); color: #120e04; font-weight: 600;
  box-shadow: 0 8px 26px rgba(201, 168, 76, 0.2);
}
.btn-gold:hover { box-shadow: 0 14px 40px rgba(201, 168, 76, 0.36); }
.btn-outline { border-color: var(--line-strong); color: var(--or); background: transparent; }
.btn-outline:hover { background: var(--or-soft); border-color: var(--or); }
.btn-silver { border-color: rgba(216, 216, 220, 0.25); color: var(--silver); background: transparent; }
.btn-silver:hover { background: rgba(216, 216, 220, 0.07); border-color: var(--silver-dim); }
.btn-ghost { color: var(--bone); background: transparent; border-color: transparent; }
.btn-ghost:hover { color: var(--or); }
.btn-dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-dark:hover { background: var(--ink-3); }
.section-light .btn-outline { border-color: rgba(107, 88, 40, 0.4); color: var(--or-deep); }
.section-light .btn-outline:hover { background: rgba(201, 168, 76, 0.1); border-color: var(--or-deep); }
.btn-sm { padding: 0.62rem 1.2rem; font-size: 0.55rem; }
.btn-lg { padding: 1.15rem 2.6rem; font-size: 0.66rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: 0.5; pointer-events: none; }
.btn.is-loading::after {
  content: ''; width: 13px; height: 13px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.center .hero-actions { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   CARTES
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: linear-gradient(160deg, var(--surface) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.2rem); position: relative; overflow: hidden;
  transition: border-color var(--t-mid), transform var(--t-mid) var(--ease), box-shadow var(--t-mid);
}
.card-lift:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: var(--sh-lift); }
.card-gold { border-color: var(--line-strong); background: linear-gradient(160deg, rgba(201, 168, 76, 0.06), var(--ink-2) 70%); }
.card h3 { font-family: var(--ff-d); font-weight: 400; color: var(--paper); margin-bottom: 0.45rem; }
.card p { color: var(--ash); font-size: var(--fs-sm); }
.section-light .card {
  background: #fff; border-color: var(--ivory-line);
  box-shadow: 0 1px 3px rgba(10, 8, 4, 0.05);
}
.section-light .card h3 { color: var(--ivory-ink); }
.section-light .card p { color: var(--ivory-soft); }
.section-light .card-lift:hover { box-shadow: 0 24px 60px rgba(10, 8, 4, 0.13); border-color: rgba(107, 88, 40, 0.3); }

.card-icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); color: var(--or); margin-bottom: 1.2rem; flex: none;
}
.card-icon svg { width: 19px; height: 19px; }
.section-light .card-icon { border-color: rgba(107, 88, 40, 0.35); color: var(--or-deep); }

/* ═══════════════════════════════════════════════════════════════
   BADGES & RÉASSURANCE
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: 100px;
  border: 1px solid var(--line-strong); color: var(--or); background: var(--or-soft);
}
.badge-live { border-color: rgba(74, 222, 128, 0.35); color: var(--green); background: rgba(74, 222, 128, 0.07); }
.badge-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.badge-urgent { border-color: rgba(248, 113, 113, 0.35); color: var(--red); background: rgba(248, 113, 113, 0.07); }

.trust-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.9rem 2.4rem; padding: 1.4rem 0;
}
.trust-item {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--ff-m); font-size: 0.55rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ash);
}
.trust-item svg { width: 15px; height: 15px; color: var(--or-patina); flex: none; }
.section-light .trust-item { color: var(--ivory-dim); }
.section-light .trust-item svg { color: var(--or-deep); }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero-video {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden; padding: 7rem 0 4rem;
}
.hero-video video, .hero-video .hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; opacity: 0.4;
}
.hero-video::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 4, 7, 0.92) 0%, rgba(4, 4, 7, 0.6) 42%, transparent 78%),
    radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(4, 4, 7, 0.6) 68%, var(--ink) 100%),
    linear-gradient(180deg, rgba(4, 4, 7, 0.8) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
}
.hero-caption { position: relative; z-index: 3; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); width: 100%; }
.hero-caption .lead { margin-top: 1.8rem; }
.hero-caption .hero-actions { margin-top: 2.6rem; }
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--dust); text-align: center;
}
.hero-scroll::after {
  content: ''; display: block; width: 1px; height: 34px; margin: 0.7rem auto 0;
  background: linear-gradient(180deg, var(--or-patina), transparent);
  animation: scrollHint 2.4s var(--ease) infinite;
}
@keyframes scrollHint { 0%, 100% { opacity: 0.25; transform: scaleY(0.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Bandeau d'urgence sous la nav */
.urgency-bar {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.03));
  border-bottom: 1px solid var(--line); padding: 0.55rem var(--pad);
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-family: var(--ff-m); font-size: 0.55rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone); text-align: center;
}
.urgency-bar a { color: var(--or); border-bottom: 1px solid var(--line-strong); }
.urgency-bar a:hover { color: var(--or-bright); }

/* ═══════════════════════════════════════════════════════════════
   CHIFFRES & COMPTEURS
   ═══════════════════════════════════════════════════════════════ */
.stat { padding: 1.7rem 1rem; text-align: center; }
.stat-num {
  font-family: var(--ff-d); font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1;
  background: var(--or-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);
}
.stat-label {
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ash); margin-top: 0.65rem;
}
.section-light .stat-label { color: var(--ivory-dim); }

/* ═══════════════════════════════════════════════════════════════
   ACTES / ÉTAPES — ligne de progression
   ═══════════════════════════════════════════════════════════════ */
.acte {
  padding: 2rem 1.6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface), var(--ink-2));
  transition: border-color var(--t-mid), transform var(--t-mid) var(--ease);
}
.acte:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.acte-num {
  font-family: var(--ff-d); font-size: 2.6rem; line-height: 1; color: var(--or-deep);
  margin-bottom: 1rem; transition: color var(--t-mid);
}
.acte:hover .acte-num { color: var(--or); }
.acte h3 { font-family: var(--ff-d); font-size: 1.4rem; font-weight: 400; color: var(--paper); margin-bottom: 0.7rem; }
.acte p { color: var(--ash); font-size: var(--fs-sm); }

.steps { position: relative; display: grid; gap: 2.4rem; }
.steps::before {
  content: ''; position: absolute; left: 27px; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(180deg, var(--or-deep), var(--line-strong), transparent);
}
.step { display: grid; grid-template-columns: 56px 1fr; gap: 1.6rem; align-items: start; position: relative; }
.step-dot {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--ink);
  font-family: var(--ff-d); font-size: 1.4rem; color: var(--or); flex: none; position: relative; z-index: 2;
  transition: background var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid) var(--ease);
}
.step:hover .step-dot { background: var(--or-soft); box-shadow: 0 0 26px rgba(201, 168, 76, 0.2); transform: scale(1.05); }
.step-body h3 { font-family: var(--ff-d); font-size: 1.5rem; font-weight: 400; color: var(--paper); margin-bottom: 0.5rem; }
.step-body p { color: var(--ash); font-size: var(--fs-sm); max-width: 58ch; }
.step-time {
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-patina); margin-top: 0.7rem; display: inline-block;
}
.section-light .steps::before { background: linear-gradient(180deg, var(--or-deep), rgba(107, 88, 40, 0.3), transparent); }
.section-light .step-dot { background: var(--ivory); border-color: rgba(107, 88, 40, 0.35); color: var(--or-deep); }
.section-light .step-body h3 { color: var(--ivory-ink); }
.section-light .step-body p { color: var(--ivory-soft); }

/* ═══════════════════════════════════════════════════════════════
   TARIFS
   ═══════════════════════════════════════════════════════════════ */
.price { display: flex; flex-direction: column; text-align: center; overflow: visible; margin-top: 0.7rem; }
.price.featured {
  border-color: var(--line-strong);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.08), var(--ink-2) 65%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.price.featured::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); padding: 1px;
  background: var(--or-grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.55;
}
.price-tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--or-grad); color: #120e04; font-family: var(--ff-m);
  font-size: 0.48rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.34rem 0.95rem; border-radius: 100px; white-space: nowrap;
}
.price-name {
  font-family: var(--ff-m); font-size: 0.58rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--or-patina); margin-bottom: 1.1rem;
}
.price-amount { font-family: var(--ff-d); font-size: 3.4rem; line-height: 1; color: var(--paper); }
.price-amount span { font-size: 1.4rem; color: var(--or); vertical-align: super; margin-left: 0.1em; }
.price-note {
  font-family: var(--ff-m); font-size: 0.48rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dust); margin-top: 0.5rem;
}
.price-desc { color: var(--ash); font-size: var(--fs-sm); margin: 1rem 0 1.6rem; min-height: 2.8em; }
.price ul { text-align: left; margin-bottom: 1.8rem; display: grid; gap: 0.62rem; flex: 1; }
.price ul li {
  color: var(--bone); font-size: 0.87rem; padding-left: 1.5rem; position: relative; line-height: 1.5;
}
.price ul li::before {
  content: ''; position: absolute; left: 0; top: 0.52em; width: 8px; height: 4px;
  border-left: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or);
  transform: rotate(-45deg);
}
.price ul li.muted { color: var(--dust); }
.price ul li.muted::before { border-color: var(--dust); }
.section-light .price-amount { color: var(--ivory-ink); }
.section-light .price ul li { color: var(--ivory-soft); }
.section-light .price-desc { color: var(--ivory-dim); }

/* Comparatif */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.compare { width: 100%; border-collapse: collapse; min-width: 620px; font-size: var(--fs-sm); }
.compare th, .compare td { padding: 0.95rem 1.1rem; text-align: center; border-bottom: 1px solid var(--line-soft); }
.compare thead th {
  font-family: var(--ff-m); font-size: 0.54rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-patina); background: var(--surface); position: sticky; top: 0;
}
.compare tbody th { text-align: left; font-weight: 400; color: var(--bone); }
.compare td { color: var(--ash); }
.compare .yes { color: var(--green); font-size: 1.05rem; }
.compare .no { color: var(--dust); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .col-hl { background: rgba(201, 168, 76, 0.045); }
.section-light .compare-wrap { border-color: var(--ivory-line); background: #fff; }
.section-light .compare thead th { background: var(--ivory-2); color: var(--or-deep); }
.section-light .compare th, .section-light .compare td { border-color: var(--ivory-line); }
.section-light .compare tbody th { color: var(--ivory-ink); }
.section-light .compare td { color: var(--ivory-soft); }

/* ═══════════════════════════════════════════════════════════════
   CITATIONS & TÉMOIGNAGES
   ═══════════════════════════════════════════════════════════════ */
.quote-band { padding: clamp(3rem, 7vw, 5.5rem) 0; text-align: center; }
.quote-band p {
  font-family: var(--ff-d); font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-style: italic; font-weight: 300; line-height: 1.4; color: var(--bone);
}
.quote-band cite {
  display: block; margin-top: 1.6rem; font-family: var(--ff-m); font-size: 0.52rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--or-patina); font-style: normal;
}

.testi { display: flex; flex-direction: column; height: 100%; }
.testi-stars { color: var(--or); font-size: 0.85rem; letter-spacing: 0.18em; margin-bottom: 1.1rem; }
.testi-text {
  font-family: var(--ff-d); font-style: italic; font-size: 1.15rem; line-height: 1.6;
  color: var(--bone); flex: 1;
}
.testi-who {
  font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--or-patina); margin-top: 1.6rem;
}
.section-light .testi-text { color: var(--ivory-ink); }
.section-light .testi-who { color: var(--or-deep); }

.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; transition: transform var(--t-slow) var(--ease-out); }
.carousel-slide { min-width: 100%; padding: 0 0.3rem; }
.carousel-nav { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dust);
  transition: background var(--t-fast), width var(--t-fast) var(--ease); padding: 0;
}
.carousel-dot.active { background: var(--or); width: 24px; border-radius: 100px; }
.carousel-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--or); transition: background var(--t-fast);
}
.carousel-arrow:hover { background: var(--or-soft); }
.carousel-arrow svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; text-align: left; font-family: var(--ff-d); font-size: 1.18rem;
  font-weight: 400; color: var(--paper); transition: color var(--t-fast);
}
.faq-q:hover { color: var(--or); }
.faq-q::after {
  content: ''; width: 11px; height: 11px; flex: none;
  border-right: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--t-mid) var(--ease);
}
.faq-item.open .faq-q::after { transform: rotate(-135deg) translateY(-3px); }
.faq-item.open .faq-q { color: var(--or); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-mid) var(--ease); }
.faq-a-inner { padding: 0 0 1.5rem; color: var(--ash); font-size: var(--fs-sm); line-height: 1.75; max-width: 68ch; }
.section-light .faq-item { border-color: var(--ivory-line); }
.section-light .faq-q { color: var(--ivory-ink); }
.section-light .faq-q:hover, .section-light .faq-item.open .faq-q { color: var(--or-deep); }
.section-light .faq-q::after { border-color: var(--or-deep); }
.section-light .faq-a-inner { color: var(--ivory-soft); }

/* ═══════════════════════════════════════════════════════════════
   FORMULAIRES
   ═══════════════════════════════════════════════════════════════ */
.field { margin-bottom: 1.35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field-label {
  display: block; font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--or-patina); margin-bottom: 0.55rem;
}
.field-input, .field-area, .field-select {
  width: 100%; background: rgba(255, 255, 255, 0.025); color: var(--paper);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 0.85rem 1rem; font-size: 0.95rem; font-weight: 300;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field-input::placeholder, .field-area::placeholder { color: var(--dust); }
.field-input:focus, .field-area:focus, .field-select:focus {
  outline: none; border-color: var(--or); background: rgba(201, 168, 76, 0.045);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.09);
}
.field-area { min-height: 118px; resize: vertical; line-height: 1.65; }
.field-select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a84c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 15px; padding-right: 2.6rem;
}
.field-select option { background: var(--ink-3); color: var(--paper); }
.field-hint { font-size: 0.78rem; color: var(--dust); margin-top: 0.42rem; line-height: 1.5; }
.field-input.invalid, .field-area.invalid, .field-select.invalid { border-color: var(--red); }
.field-err { font-size: 0.76rem; color: var(--red); margin-top: 0.38rem; display: none; }
.field-input.invalid ~ .field-err, .field-area.invalid ~ .field-err, .field-select.invalid ~ .field-err { display: block; }

.check {
  display: flex; align-items: flex-start; gap: 0.8rem; cursor: pointer;
  color: var(--bone); font-size: 0.88rem; line-height: 1.55; margin-bottom: 1.1rem;
}
.check input { accent-color: var(--or); width: 17px; height: 17px; flex: none; margin-top: 2px; cursor: pointer; }

/* Choix visuels (radio-cards) */
.choices { display: grid; gap: 0.7rem; }
.choices-2 { grid-template-columns: repeat(2, 1fr); }
.choices-3 { grid-template-columns: repeat(3, 1fr); }
.choice {
  position: relative; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem; cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease);
  background: rgba(255, 255, 255, 0.02); display: block; width: 100%;
}
.choice:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.choice.selected { border-color: var(--or); background: var(--or-soft); }
.choice.selected::after {
  content: ''; position: absolute; top: 0.9rem; right: 0.9rem; width: 9px; height: 5px;
  border-left: 1.5px solid var(--or); border-bottom: 1.5px solid var(--or); transform: rotate(-45deg);
}
.choice-title { font-family: var(--ff-d); font-size: 1.1rem; color: var(--paper); }
.choice-sub { font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); margin-top: 0.3rem; }
.choice.selected .choice-sub { color: var(--or-patina); }

.form-msg {
  padding: 0.85rem 1.1rem; border-radius: var(--radius); font-size: 0.86rem;
  margin-bottom: 1.3rem; display: none; border: 1px solid transparent; line-height: 1.55;
}
.form-msg.show { display: block; }
.form-msg.err { display: block; background: rgba(248, 113, 113, 0.09); border-color: rgba(248, 113, 113, 0.3); color: #fca5a5; }
.form-msg.ok { display: block; background: rgba(74, 222, 128, 0.09); border-color: rgba(74, 222, 128, 0.3); color: #86efac; }
.form-msg.info { display: block; background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.28); color: #7dd3fc; }

/* ═══════════════════════════════════════════════════════════════
   WIZARD — tunnel de commande en étapes
   ═══════════════════════════════════════════════════════════════ */
.wizard { position: relative; }
.wz-progress { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 2.4rem; }
.wz-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; position: relative; }
.wz-node::before {
  content: ''; position: absolute; top: 13px; left: -50%; width: 100%; height: 1px;
  background: var(--line-soft); z-index: 0;
}
.wz-node:first-child::before { display: none; }
.wz-node.done::before, .wz-node.active::before { background: var(--or-deep); }
.wz-dot {
  width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-soft); background: var(--ink); position: relative; z-index: 1;
  font-family: var(--ff-m); font-size: 0.6rem; color: var(--dust);
  transition: all var(--t-mid) var(--ease);
}
.wz-node.active .wz-dot { border-color: var(--or); color: var(--or); box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.1); }
.wz-node.done .wz-dot { background: var(--or-grad); border-color: transparent; color: #120e04; }
.wz-label {
  font-family: var(--ff-m); font-size: 0.46rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dust); text-align: center; transition: color var(--t-mid);
}
.wz-node.active .wz-label { color: var(--or); }
.wz-node.done .wz-label { color: var(--ash); }
.wz-step { display: none; animation: wzIn var(--t-mid) var(--ease); }
.wz-step.active { display: block; }
@keyframes wzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wz-title { font-family: var(--ff-d); font-size: 1.75rem; font-weight: 400; color: var(--paper); margin-bottom: 0.5rem; }
.wz-sub { color: var(--ash); font-size: var(--fs-sm); margin-bottom: 1.9rem; max-width: 56ch; }
.wz-actions { display: flex; gap: 0.8rem; margin-top: 1.9rem; align-items: center; }
.wz-actions .btn-gold { margin-left: auto; }

/* Récapitulatif collant */
.wz-recap {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.05), var(--ink-2) 70%);
  padding: 1.5rem; position: sticky; top: 90px;
}
.wz-recap-head {
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--or-patina); margin-bottom: 1.1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line-soft);
}
.wz-line {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0;
  font-size: 0.86rem; color: var(--ash);
}
.wz-line b { color: var(--bone); font-weight: 400; text-align: right; }
.wz-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
}
.wz-total span { font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ash); }
.wz-total b { font-family: var(--ff-d); font-size: 2.1rem; font-weight: 400; color: var(--or); }

/* ═══════════════════════════════════════════════════════════════
   CALCULATEUR B2B
   ═══════════════════════════════════════════════════════════════ */
.calc {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(201, 168, 76, 0.055), var(--ink-2) 70%);
  padding: clamp(1.6rem, 3.4vw, 2.6rem);
}
.calc-row { margin-bottom: 1.7rem; }
.calc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.8rem; gap: 1rem; }
.calc-head label { font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or-patina); }
.calc-val { font-family: var(--ff-d); font-size: 1.5rem; color: var(--paper); }
.calc-range { width: 100%; -webkit-appearance: none; appearance: none; height: 3px; background: rgba(255,255,255,0.1); border-radius: 100px; cursor: pointer; }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--or-grad); cursor: pointer; border: 0;
  box-shadow: 0 3px 12px rgba(201, 168, 76, 0.42);
}
.calc-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--or);
  cursor: pointer; border: 0; box-shadow: 0 3px 12px rgba(201, 168, 76, 0.42);
}
.calc-out {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); overflow: hidden; margin-top: 2rem;
}
.calc-cell { background: var(--ink-2); padding: 1.4rem 0.8rem; text-align: center; }
.calc-cell-num {
  font-family: var(--ff-d); font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1;
  background: var(--or-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);
}
.calc-cell-lbl {
  font-family: var(--ff-m); font-size: 0.46rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ash); margin-top: 0.6rem; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   BARRE CTA MOBILE
   ═══════════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; display: none;
  background: rgba(4, 4, 7, 0.96); backdrop-filter: blur(20px);
  border-top: 1px solid var(--line); padding: 0.7rem var(--pad);
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom));
  gap: 0.6rem; transform: translateY(110%); transition: transform var(--t-mid) var(--ease);
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { flex: 1; padding: 0.85rem 0.8rem; }

/* ═══════════════════════════════════════════════════════════════
   MODALE
   ═══════════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: var(--pad);
  background: rgba(4, 4, 7, 0.88); backdrop-filter: blur(8px);
}
.modal.open { display: flex; animation: fadeIn var(--t-fast) ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box {
  background: linear-gradient(160deg, var(--surface-2), var(--ink-2));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 4vw, 2.6rem); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; position: relative;
  animation: modalIn var(--t-mid) var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px;
  border-radius: 50%; display: grid; place-items: center; color: var(--ash);
  border: 1px solid var(--line-soft); transition: color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { color: var(--or); border-color: var(--line-strong); }
.modal-close svg { width: 15px; height: 15px; }

/* ═══════════════════════════════════════════════════════════════
   BANDEAU DÉFILANT
   ═══════════════════════════════════════════════════════════════ */
.marquee { overflow: hidden; padding: 1.5rem 0; border-block: 1px solid var(--line-soft); position: relative; }
.marquee::before, .marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  font-family: var(--ff-d); font-size: 1.32rem; font-style: italic;
  color: var(--dust); white-space: nowrap; display: flex; align-items: center; gap: 3.5rem;
}
.marquee-item::after { content: '·'; color: var(--or-deep); font-style: normal; }

/* ═══════════════════════════════════════════════════════════════
   PIED DE PAGE
   ═══════════════════════════════════════════════════════════════ */
.footer { border-top: 1px solid var(--line-soft); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; background: var(--ink-2); position: relative; z-index: 2; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.6rem; margin-bottom: 3rem; }
.footer-logo { height: 52px; width: 52px; object-fit: cover; border-radius: 50%; border: 1px solid var(--line); margin-bottom: 1.1rem; }
.footer-tag { color: var(--ash); font-size: 0.86rem; line-height: 1.65; max-width: 30ch; }
.footer-baseline {
  font-family: var(--ff-m); font-size: 0.48rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dust); margin-top: 1.2rem; line-height: 2;
}
.footer h4 {
  font-family: var(--ff-m); font-size: 0.5rem; font-weight: 500; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--or-patina); margin-bottom: 1.1rem;
}
.footer-links { display: grid; gap: 0.62rem; }
.footer-links a { color: var(--ash); font-size: 0.86rem; transition: color var(--t-fast), padding-left var(--t-fast); }
.footer-links a:hover { color: var(--or); padding-left: 4px; }
.footer-bottom {
  border-top: 1px solid var(--line-soft); padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dust);
}
.footer-bottom .gold { color: var(--or-patina); }
.footer-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--or); }

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATION
   ═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 1.6rem; left: 50%; transform: translate(-50%, 130%);
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.9rem 1.5rem; color: var(--paper); font-size: 0.88rem; z-index: 300;
  box-shadow: var(--sh); transition: transform var(--t-mid) var(--ease); max-width: 92vw; text-align: center;
}
.toast.show { transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════════
   RÉVÉLATION AU DÉFILEMENT
   ═══════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .wz-recap { position: static; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .choices-3 { grid-template-columns: repeat(2, 1fr); }
  .sticky-cta { display: flex; }
  body.has-sticky-cta { padding-bottom: 4.5rem; }
  .calc-out { grid-template-columns: 1fr; }
  .wz-label { display: none; }
  .quote-band p br { display: none; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .choices-2, .choices-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .steps::before { left: 21px; }
  .step { grid-template-columns: 44px 1fr; gap: 1.1rem; }
  .step-dot { width: 44px; height: 44px; font-size: 1.15rem; }
  .price-amount { font-size: 2.9rem; }
  .footer-bottom { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT & IMPRESSION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-video video { display: none; }
}
@media print {
  .nav, .nav-mobile, .sticky-cta, .hero-video video, .grain, .toast, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .h-hero, .h-xl, .h-lg, .card h3 { color: #000; }
  .lead, .card p { color: #333; }
  .card, .price { border: 1px solid #ccc; background: #fff; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGES LÉGALES — texte long
   ═══════════════════════════════════════════════════════════════ */
.prose { max-width: 72ch; }
.prose h2 {
  font-family: var(--ff-d); font-size: 1.7rem; font-weight: 400; color: var(--paper);
  margin: 2.8rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-soft);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--ff-d); font-size: 1.25rem; font-weight: 400; color: var(--bone); margin: 1.8rem 0 0.6rem; }
.prose p, .prose li { color: var(--ash); font-size: 0.94rem; line-height: 1.8; margin-bottom: 0.9rem; }
.prose ul { margin: 0 0 1.2rem 0; }
.prose li { padding-left: 1.3rem; position: relative; }
.prose li::before { content: '—'; position: absolute; left: 0; color: var(--or-deep); }
.prose a { color: var(--or); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { color: var(--or-bright); }
.prose strong { color: var(--bone); font-weight: 400; }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.4rem; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line-soft); color: var(--ash); }
.prose th { color: var(--or-patina); font-weight: 400; font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; }
.tofill {
  background: rgba(251, 191, 36, 0.12); border: 1px dashed rgba(251, 191, 36, 0.45);
  border-radius: 3px; padding: 0.05em 0.45em; color: var(--amber);
  font-family: var(--ff-m); font-size: 0.82em;
}
.legal-date { font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust); margin-bottom: 2.5rem; }

/* ═══════════════════════════════════════════════════════════════
   SEUIL D'ENTRÉE — l'ouverture avant le site
   Pensé comme un seuil de maison, pas comme un écran publicitaire :
   sobre, court, franchissable au premier geste.
   ═══════════════════════════════════════════════════════════════ */
.intro {
  position: fixed; inset: 0; z-index: 500;
  background: var(--ink);
  display: grid; place-items: center;
  padding: var(--pad);
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
/* Décidé avant le premier rendu par le script d'en-tête : pas de clignotement
   pour qui a déjà franchi le seuil dans cette session. */
html.intro-off .intro { display: none !important; }
body.intro-open { overflow: hidden; }

.intro::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(201, 168, 76, 0.09), transparent 62%);
}
.intro-inner { position: relative; z-index: 2; max-width: 640px; }

/* Ligne d'horizon, tracée depuis le centre */
.intro-line {
  height: 1px; width: min(420px, 76vw); margin: 0 auto 2.6rem;
  background: linear-gradient(90deg, transparent, var(--or-patina) 30%, var(--or) 50%, var(--or-patina) 70%, transparent);
  transform: scaleX(0); transform-origin: center;
  animation: introLigne 1s var(--ease-out) 0.15s forwards;
}
@keyframes introLigne { to { transform: scaleX(1); } }

/* ─── Le logo, mis en scène ───
   Un anneau d'or se trace autour du médaillon pendant que le logo
   apparaît, un second arc tourne lentement en sens inverse, et trois
   ondes s'échappent du centre comme un son qui se propage dans une
   salle. Tout est dessiné en CSS et en SVG : le seuil doit s'afficher
   à l'instant même, sans attendre le moindre fichier. */
/* Scène et film occupent la même case : ils se superposent au pixel
   près, la place est réservée dès le premier rendu, et le passage de
   l'un à l'autre ne déplace rien. */
.intro-visuel {
  position: relative;
  display: grid; place-items: center;
  width: clamp(230px, 54vw, 380px);
  aspect-ratio: 1040 / 880;
  margin: 0 auto 1.4rem;
}
.intro-visuel > * { grid-area: 1 / 1; position: relative; z-index: 1; }

/* Un halo noir, plus large que le film, posé sous lui. Le noir du film
   s'y fond au lieu de trancher sur le halo doré de la page : masquer
   davantage aurait rogné la colombe et la clef de sol. */
.intro-visuel::before {
  content: ''; position: absolute; inset: -28%; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, #000 42%, rgba(0,0,0,0.55) 62%, transparent 78%);
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s var(--ease);
}
.intro.film-pret .intro-visuel::before { opacity: 1; }

.intro-scene {
  position: relative;
  width: clamp(150px, 30vw, 210px); height: clamp(150px, 30vw, 210px);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease);
}

/* Le film du logo. Fond noir sur fond noir : aucun bord ne se voit, et
   la composition entière — monogramme, colombe, portée, nom — reste
   visible sans qu'on ait à la recadrer. */
.intro-film {
  width: 100%; opacity: 0; pointer-events: none;
  transition: opacity 1.1s var(--ease);
  /* Le noir du film n'est pas exactement celui de la page, qui porte un
     halo doré : sans cela, on verrait un rectangle posé sur le fond. Les
     bords sont donc estompés — assez au large pour ne rogner ni la
     colombe, ni la clef de sol, ni le nom en bas de l'image. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.intro-video { display: block; width: 100%; height: auto; }

/* Le nom est déjà dans le film : l'afficher deux fois le dédouble. */
.intro.film-pret .intro-film { opacity: 1; }
.intro.film-pret .intro-scene { opacity: 0; }
/* Le nom porte une animation « forwards » : elle l'emporterait sur une
   simple opacité. On la coupe en même temps. */
.intro.film-pret .intro-name { animation: none; opacity: 0; transition: opacity 0.8s var(--ease); }

/* Le médaillon */
.intro-logo {
  position: relative; z-index: 3;
  width: 78%; height: 78%;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line-strong);
  opacity: 0; transform: scale(1.14);
  animation: introLogo 1.5s var(--ease-out) 0.45s forwards,
             introHalo 4.5s ease-in-out 2.2s infinite;
}
@keyframes introLogo {
  from { opacity: 0; transform: scale(1.14); filter: blur(6px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes introHalo {
  0%, 100% { box-shadow: 0 0 34px rgba(201, 168, 76, 0.13); }
  50% { box-shadow: 0 0 62px rgba(201, 168, 76, 0.3); }
}

/* Les deux anneaux */
.intro-anneau {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; overflow: visible;
  fill: none;
}
.intro-anneau circle { stroke-linecap: round; }

/* L'anneau se trace depuis le sommet, en un tour complet */
.an-trace {
  stroke: var(--or); stroke-width: 1;
  stroke-dasharray: 603.2; stroke-dashoffset: 603.2;
  transform: rotate(-90deg); transform-origin: 100px 100px;
  animation: introTrace 1.8s var(--ease-out) 0.2s forwards;
}
@keyframes introTrace { to { stroke-dashoffset: 0; } }

/* Un arc plus discret tourne en sens inverse, sans jamais s'arrêter */
.an-arc {
  stroke: var(--or-patina); stroke-width: 1;
  stroke-dasharray: 40 100; opacity: 0;
  transform-origin: 100px 100px;
  animation: introArcParait 1.2s ease 1.6s forwards,
             introArcTourne 14s linear 1.6s infinite;
}
@keyframes introArcParait { to { opacity: 0.55; } }
@keyframes introArcTourne { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* Trois ondes concentriques : le son qui s'échappe du médaillon */
.intro-onde {
  position: absolute; z-index: 1;
  width: 78%; height: 78%; border-radius: 50%;
  border: 1px solid var(--or-patina);
  opacity: 0; pointer-events: none;
  animation: introOnde 4.2s ease-out 2s infinite;
}
.intro-onde:nth-child(2) { animation-delay: 3.4s; }
.intro-onde:nth-child(3) { animation-delay: 4.8s; }
@keyframes introOnde {
  0% { transform: scale(1); opacity: 0.5; }
  70% { opacity: 0.06; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Nom de la maison — l'interlettrage se resserre en apparaissant */
.intro-name {
  font-family: var(--ff-m); font-size: clamp(0.56rem, 1.7vw, 0.7rem);
  text-transform: uppercase; color: var(--or-patina);
  letter-spacing: 0.75em; text-indent: 0.75em;
  opacity: 0;
  animation: introNom 1.3s var(--ease-out) 1s forwards;
}
@keyframes introNom {
  from { opacity: 0; letter-spacing: 0.75em; }
  to { opacity: 1; letter-spacing: 0.34em; }
}

/* Signature musicale : le même motif que le lecteur du site */
.intro-wave {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px; height: 22px; margin: 1.7rem 0 2rem;
  opacity: 0; animation: introFondu 1s ease 1.5s forwards;
}
.intro-wave span {
  width: 2px; height: 3px; border-radius: 2px; background: var(--or-deep);
  animation: introBarre 1.5s ease-in-out infinite;
}
@keyframes introBarre {
  0%, 100% { height: 3px; background: var(--or-deep); }
  50% { height: 20px; background: var(--or-patina); }
}

.intro-claim {
  font-family: var(--ff-d); font-weight: 300;
  font-size: clamp(1.25rem, 3.4vw, 2rem); line-height: 1.35;
  color: var(--paper);
  opacity: 0; transform: translateY(14px);
  animation: introMonte 1.1s var(--ease-out) 1.9s forwards;
}
.intro-claim em {
  font-style: italic;
  background: var(--or-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);
}
@keyframes introMonte { to { opacity: 1; transform: none; } }

.intro-actions {
  margin-top: 2.8rem;
  opacity: 0; animation: introFondu 0.9s ease 2.6s forwards;
}
@keyframes introFondu { to { opacity: 1; } }
.intro-hint {
  display: block; margin-top: 1.4rem;
  font-family: var(--ff-m); font-size: 0.5rem; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--dust);
}

/* Sortie : le voile se lève */
.intro.leaving {
  opacity: 0; transform: scale(1.05);
  transition: opacity 0.85s var(--ease), transform 1.3s var(--ease);
  pointer-events: none;
}

/* Sans JavaScript, le seuil ne doit pas emprisonner le visiteur */
.no-js .intro { display: none; }

@media (prefers-reduced-motion: reduce) {
  .intro-line, .intro-logo, .intro-name, .intro-wave, .intro-wave span,
  .intro-claim, .intro-actions, .an-trace, .an-arc {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: 0.34em;
  }
  .intro-line { transform: scaleX(1) !important; }
  .intro-wave span { height: 10px; }
  /* L'anneau reste dessiné, il ne se trace simplement pas */
  .an-trace { stroke-dashoffset: 0 !important; }
  .an-arc { opacity: 0.5 !important; }
  /* Les ondes n'ont de sens qu'en mouvement */
  .intro-onde { display: none; }
  /* Le film n'est pas chargé en mouvement réduit ; on le masque aussi */
  .intro-film { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — reprise complète
   Le tunnel de commande imposait ses colonnes en style en ligne, ce
   qu'aucune media query ne peut défaire : la colonne tombait à 170 px
   et le texte se brisait à deux mots par ligne. La mise en page passe
   désormais par une classe, et tout ce bloc affine la lecture au doigt.
   ═══════════════════════════════════════════════════════════════ */

/* Mise en page du tunnel — pilotable par media query */
.wz-layout {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 2.4rem;
  align-items: start;
}

/* Indication de défilement des tableaux larges */
.scroll-hint {
  display: none;
  margin-top: 0.8rem;
  text-align: center;
  font-family: var(--ff-m);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
}
.section-light .scroll-hint { color: var(--ivory-dim); }

/* Descriptions des cartes de choix : c'était du monospace capitalisé et
   très espacé pour des phrases entières — illisible dès qu'on réduit. */
.choice-sub {
  font-family: var(--ff-b);
  font-size: 0.83rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ash);
  margin-top: 0.4rem;
}
.choice.selected .choice-sub { color: var(--bone); }

@media (max-width: 1024px) {
  .wz-layout { grid-template-columns: 1fr; gap: 1.3rem; }

  /* Le récapitulatif passe en tête, condensé : le visiteur garde le prix
     sous les yeux sans qu'un pavé s'intercale avant la première question. */
  .wz-recap {
    order: -1;
    position: static;
    padding: 1.1rem 1.3rem;
  }
  .wz-recap-head { margin-bottom: 0.8rem; padding-bottom: 0.7rem; }
  .wz-recap .wz-line { display: none; }
  .wz-recap .wz-line:first-of-type { display: flex; }
  .wz-recap > div:last-child { display: none; }
  .wz-total { margin-top: 0.7rem; padding-top: 0.8rem; }
  .wz-total b { font-size: 1.8rem; }
}

@media (max-width: 860px) {
  .scroll-hint { display: block; }

  /* Le poster transparaît trop derrière un texte qui prend toute la
     largeur : on assombrit franchement sous petit écran. */
  .hero-video::after {
    background:
      linear-gradient(180deg, rgba(4, 4, 7, 0.92) 0%, rgba(4, 4, 7, 0.5) 32%,
                      rgba(4, 4, 7, 0.78) 68%, var(--ink) 100%);
  }
  .hero-video { min-height: 92svh; padding-top: 6rem; }

  /* Les libellés longs ne tiennent pas avec 0.24em d'interlettrage */
  .btn { letter-spacing: 0.15em; white-space: normal; line-height: 1.35; }
  .btn-lg { padding: 1rem 1.6rem; font-size: 0.62rem; }

  .eyebrow { letter-spacing: 0.24em; }
  .eyebrow::before, .eyebrow::after { width: 18px; }

  /* Les consoles restent des outils de bureau, mais ne doivent pas
     déborder si elles sont ouvertes depuis un téléphone. */
  .compare { min-width: 520px; }
}

@media (max-width: 640px) {
  /* Les pages dépassaient 12 000 px de haut : on resserre le rythme
     vertical, sans écraser la respiration éditoriale. */
  :root {
    --sp-section: clamp(2.8rem, 8vw, 4rem);
    --sp-section-sm: clamp(1.8rem, 5vw, 2.6rem);
  }

  .h-hero { line-height: 1.06; }
  .lead { font-size: 1rem; line-height: 1.65; }
  .card { padding: 1.4rem 1.2rem; }
  .acte { padding: 1.5rem 1.2rem; }

  /* Le trait d'union des listes tarifaires mangeait la largeur utile */
  .price ul li { font-size: 0.9rem; }
  .price-desc { min-height: 0; margin-bottom: 1.2rem; }

  /* Bandeau de réassurance : en colonne, il devenait une liste interminable */
  .trust-strip { gap: 0.7rem 1.2rem; }

  /* Étapes du tunnel : six pastilles tiennent, pas six libellés */
  .wz-progress { gap: 0.2rem; margin-bottom: 1.8rem; }
  .wz-dot { width: 26px; height: 26px; }
  .wz-node::before { top: 13px; }
  .wz-title { font-size: 1.45rem; }
  .wz-sub { font-size: 0.88rem; margin-bottom: 1.4rem; }
  .wz-actions { flex-wrap: wrap; gap: 0.6rem; }
  .wz-actions .btn { flex: 1 1 auto; }
  .wz-actions .btn-gold { margin-left: 0; }

  /* Champs : 16px minimum, sinon iOS zoome à la mise au point */
  .field-input, .field-area, .field-select { font-size: 16px; padding: 0.8rem 0.9rem; }
  .field { margin-bottom: 1.1rem; }

  .quote-band p { font-size: 1.35rem; }
  .stat { padding: 1.3rem 0.6rem; }

  /* Lecteur : la ligne de titre et la durée se marchaient dessus */
  .player { padding: 1.1rem; }
  .pt-title { font-size: 1rem; }
  .player-track { gap: 0.7rem; padding: 0.65rem 0.5rem; }

  /* 28 px de haut : on vise mal au pouce. Android demande 48 dp. */
  .footer-links a, .footer-links .lien-rappel {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0.2rem 0;
  }
  .footer-links li { margin-bottom: 0; }
  .prose h2 { font-size: 1.45rem; }
}

@media (max-width: 400px) {
  /* Les corps de texte sont fixés par le plancher typographique, en fin
     de feuille. Il ne reste ici que ce qui tient à la largeur. */
  .h-hero { font-size: clamp(2.3rem, 11vw, 3rem); }
  .intro-claim { font-size: 1.2rem; }
}

/* Mentions et notes de bas de bloc — en classe, donc ajustables sur mobile */
.note {
  font-family: var(--ff-m);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dust);
  line-height: 1.9;
}
.section-light .note { color: var(--ivory-dim); }

/* Sur téléphone, un argument de réassurance à 8 px ne se lit pas :
   on relève le plancher et on desserre l'interlettrage. */
/* Les corps de texte de ce palier ont été repris d'un seul tenant par
   le plancher typographique, en fin de feuille : les déclarations qui
   se trouvaient ici passaient toutes sous 11 px. Ne restent que les
   ajustements de forme, sans équivalent ailleurs. */
@media (max-width: 640px) {
  .trust-item svg { width: 14px; height: 14px; }
  /* Mentions légales : 18 px de haut, on les manquait au pouce */
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-legal { gap: 0.4rem 1.2rem; flex-wrap: wrap; }
}

/* Cartes de choix : titre et description sur deux lignes distinctes.
   Elles étaient toutes deux en ligne, donc collées bout à bout. */
.choice-title, .choice-sub { display: block; }
.choice-title { padding-right: 1.6rem; }

/* Lien « Être rappelé » dans le pied de page : même allure que ses voisins */
.lien-rappel {
  color: var(--ash); font-size: 0.86rem; font: inherit; padding: 0;
  text-align: left; transition: color var(--t-fast), padding-left var(--t-fast);
}
.footer-links .lien-rappel { font-size: 0.86rem; }
.lien-rappel:hover { color: var(--or); padding-left: 4px; }

/* ═══════════════════════════════════════════════════════════════
   CATALOGUE DES RÉALISATIONS
   Chaque hommage composé devient une fiche : la personne, son
   histoire, les mots de la famille, et l'œuvre écoutable sur place.
   Le catalogue grandit — la grille se remplit d'elle-même, aucune
   mise en page n'est à reprendre quand une musique est ajoutée
   depuis la console.
   ═══════════════════════════════════════════════════════════════ */

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1.5rem;
  /* Fiches de hauteur égale : le corps s'étire, la jauge reste en bas.
     Une grille de récits de longueurs inégales se lit sinon en escalier. */
  align-items: stretch;
}
.catalogue.est-vide::after {
  content: 'Aucun hommage dans ce registre pour le moment.';
  grid-column: 1 / -1;
  padding: 3rem 1rem; text-align: center;
  font-family: var(--ff-d); font-size: 1.3rem; color: var(--ash);
}

/* ─── Bandeau : ce que contient la vitrine, et l'écoute intégrale ─── */
.cat-barre {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 1.4rem;
  margin-bottom: 1.8rem;
}
.cat-compte {
  margin: 0; font-family: var(--ff-m); font-size: 0.56rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust);
}
.cat-compte span { color: var(--or-patina); }

.cat-barre .btn { display: inline-flex; align-items: center; gap: 0.65rem; }

/* Petit égaliseur dans le bouton : il s'anime pendant la lecture */
.cat-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cat-eq span {
  width: 2px; height: 4px; border-radius: 2px;
  background: currentColor; opacity: 0.75;
}
.en-lecture .cat-eq span { animation: catEq 0.9s ease-in-out infinite; }
.en-lecture .cat-eq span:nth-child(2) { animation-delay: 0.15s; }
.en-lecture .cat-eq span:nth-child(3) { animation-delay: 0.3s; }
.en-lecture .cat-eq span:nth-child(4) { animation-delay: 0.45s; }
@keyframes catEq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ─── Filtres par registre ─── */
.cat-filtres {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin-bottom: 2.6rem;
}
.cat-filtre {
  font-family: var(--ff-m); font-size: 0.56rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ash);
  background: transparent; border: 1px solid var(--line-soft);
  padding: 0.55rem 1rem; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.cat-filtre span {
  display: inline-block; margin-left: 0.4rem;
  color: var(--dust); font-size: 0.9em;
}
.cat-filtre:hover { color: var(--bone); border-color: var(--line-strong); }
.cat-filtre.actif {
  color: var(--ink); background: var(--or); border-color: var(--or);
}
.cat-filtre.actif span { color: rgba(4, 4, 7, 0.6); }

/* ─── La fiche ───

   Parti pris : de la lumière, pas de l'ornement. La maison compose
   pour des veillées ; le vocabulaire juste est celui d'une flamme
   dans le noir, non celui d'une couronne mortuaire. Chaque fiche est
   donc une lanterne — sombre au repos, qui se réchauffe quand on
   s'en approche, et qui respire au rythme de la musique lorsqu'elle
   joue.

   Deux variables portent toute la mise en scène :
     --chaleur  0 au repos, 1 au survol     (posée par le CSS)
     --lueur    l'amplitude du son, 0 à 1   (posée par catalogue.js)
   Tout le reste — fond, halo, filets, sceau — se calcule à partir
   d'elles. Une seule idée à régler, et non quinze déclarations à
   tenir d'accord.
   ─────────────────────────────────────────────────────────────── */
.oeuvre {
  --chaleur: 0;
  --lueur: 0;
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, calc(0.055 + var(--chaleur) * 0.05));
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* La lumière naît en haut à gauche, là où se tient le sceau : c'est
     lui la source, et le regard y revient naturellement. */
  background:
    radial-gradient(140% 92% at 16% -6%,
      rgba(201, 168, 76, calc(0.055 + var(--chaleur) * 0.05 + var(--lueur) * 0.10)) 0%,
      transparent 58%),
    linear-gradient(178deg, var(--surface-2) 0%, var(--surface) 46%, #090910 100%);
  transition:
    border-color 620ms var(--ease),
    transform 620ms var(--ease),
    box-shadow 620ms var(--ease),
    background 420ms linear;
}

/* Filet de lumière sur la tranche haute : c'est ce qui donne à la
   fiche son épaisseur, comme une arête éclairée. */
.oeuvre::before {
  content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  z-index: 3; pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(201, 168, 76, calc(0.28 + var(--chaleur) * 0.5 + var(--lueur) * 0.4)) 50%,
    transparent);
  transition: left 620ms var(--ease), right 620ms var(--ease);
}

/* Halo diffus, très large et très pâle. Il ne se voit pas ; il se
   sent. C'est lui qui fait qu'une fiche allumée paraît chaude sans
   qu'aucun contour ne change. */
.oeuvre::after {
  content: ''; position: absolute; inset: -30%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(201, 168, 76, calc(var(--chaleur) * 0.05 + var(--lueur) * 0.09)) 0%,
    transparent 72%);
  opacity: calc(0.35 + var(--chaleur) * 0.65 + var(--lueur) * 0.5);
  transition: opacity 520ms var(--ease);
}

/* Entrée en cascade — le décalage est posé par catalogue.js sur les
   fiches qui apparaissent ensemble, quel que soit le nombre de colonnes. */
.oeuvre {
  opacity: 0; transform: translateY(22px);
}
.oeuvre.vu { opacity: 1; transform: none; transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), border-color 620ms var(--ease), box-shadow 620ms var(--ease), background 420ms linear; }

.oeuvre.vu:hover {
  --chaleur: 1;
  transform: translateY(-5px);
  /* Ombre teintée et non noire : une lumière chaude ne projette pas
     de gris. La nuance est infime et fait toute la différence. */
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, 0.75),
    0 0 42px -14px rgba(201, 168, 76, 0.22);
}
.oeuvre.vu:hover::before { left: 0; right: 0; }

/* La fiche en cours d'écoute reste chaude, sans survol */
.oeuvre.actif {
  --chaleur: 0.72;
  border-color: rgba(201, 168, 76, 0.34);
  box-shadow:
    0 26px 64px -18px rgba(0, 0, 0, 0.8),
    0 0 52px -12px rgba(201, 168, 76, calc(0.18 + var(--lueur) * 0.22));
}
.oeuvre.actif::before { left: 0; right: 0; }

/* ─── Le sceau : l'initiale de la personne ───
   Aucune photo n'est demandée à la famille, et chaque fiche se
   distingue tout de même. Un anneau d'or conique lui donne le relief
   d'un médaillon ; pendant l'écoute il tourne, très lentement, comme
   un disque. */
.oeuvre-sceau {
  position: relative; flex: none;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 36% 26%,
      rgba(201, 168, 76, calc(0.20 + var(--chaleur) * 0.14 + var(--lueur) * 0.20)) 0%,
      rgba(201, 168, 76, 0.04) 58%,
      transparent 72%),
    #0a0a10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 calc(14px + var(--lueur) * 22px) rgba(201, 168, 76, calc(0.10 + var(--lueur) * 0.30));
  transition: box-shadow 420ms linear;
}
/* L'anneau est un pseudo-élément : un dégradé conique ne peut pas
   servir de bordure, on le peint donc en fond et on le creuse au
   masque pour n'en garder que le liseré. */
.oeuvre-sceau::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 210deg,
    rgba(107, 88, 40, 0.55), #e3c977 28%, rgba(151, 128, 60, 0.7) 52%,
    #c9a84c 74%, rgba(107, 88, 40, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: calc(0.55 + var(--chaleur) * 0.45 + var(--lueur) * 0.3);
  transition: opacity 420ms linear;
}
.oeuvre-sceau span {
  position: relative; z-index: 1;
  font-family: var(--ff-d); font-size: 1.5rem; line-height: 1;
  background: var(--or-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--or);
  /* Un souffle de lumière derrière la lettre, qui suit la musique */
  filter: drop-shadow(0 0 calc(3px + var(--lueur) * 9px)
                      rgba(227, 201, 119, calc(0.16 + var(--lueur) * 0.4)));
}
/* Pendant l'écoute, l'anneau tourne — un tour en vingt secondes,
   assez lent pour qu'on le remarque sans jamais être distrait. */
.oeuvre.joue .oeuvre-sceau::before { animation: sceauTourne 20s linear infinite; }
@keyframes sceauTourne { to { transform: rotate(1turn); } }

.oeuvre-haut {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oeuvre-lire {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--or);
  background: rgba(201, 168, 76, calc(0.07 + var(--chaleur) * 0.07));
  border: 1px solid rgba(201, 168, 76, calc(0.24 + var(--chaleur) * 0.22));
  transition: color 260ms var(--ease), background 260ms var(--ease),
              border-color 260ms var(--ease), transform 260ms var(--ease),
              box-shadow 260ms var(--ease);
}
.oeuvre-lire svg { width: 15px; height: 15px; margin-left: 1px; }
.oeuvre-lire:hover {
  background: rgba(201, 168, 76, 0.2);
  transform: scale(1.07);
  box-shadow: 0 0 20px -4px rgba(201, 168, 76, 0.45);
}
.oeuvre.joue .oeuvre-lire {
  color: #100c03; background: var(--or-grad); border-color: transparent;
  box-shadow: 0 0 calc(16px + var(--lueur) * 20px)
              rgba(201, 168, 76, calc(0.24 + var(--lueur) * 0.34));
}
.oeuvre.joue .oeuvre-lire svg { margin-left: 0; }

/* Signature musicale — au repos, un simple trait.
   Vingt barres de deux pixels espacées donnaient une rangée de tirets,
   qu'on lisait comme un élément cassé : l'égaliseur n'apparaît que
   pendant la lecture. */
.oeuvre-onde {
  position: relative; flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px; height: 22px; overflow: hidden;
}
.oeuvre-onde::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201, 168, 76, calc(0.14 + var(--chaleur) * 0.16)),
    rgba(201, 168, 76, 0.04));
  transition: opacity var(--t-fast);
}
.oeuvre-onde span {
  flex: 1; min-width: 1px; height: 2px; border-radius: 2px;
  background: var(--or-deep); opacity: 0;
  transition: height var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.oeuvre.joue .oeuvre-onde::before { opacity: 0; }
.oeuvre.joue .oeuvre-onde span { opacity: 1; animation: oeuvreBarre 1.4s ease-in-out infinite; }
@keyframes oeuvreBarre {
  0%, 100% { height: 3px; background: var(--or-deep); }
  50% { height: 16px; background: var(--or-patina); }
}

.oeuvre-duree {
  flex: none; font-family: var(--ff-m); font-size: 0.62rem;
  letter-spacing: 0.08em; color: var(--dust);
  transition: color 420ms var(--ease);
}
.oeuvre.actif .oeuvre-duree { color: var(--or-patina); }

.oeuvre-corps { position: relative; z-index: 2; padding: 1.5rem 1.5rem 1.6rem; flex: 1; }
.oeuvre-style {
  font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--or-patina);
}
.oeuvre-titre {
  font-family: var(--ff-d); font-weight: 300;
  font-size: 1.72rem; line-height: 1.16; margin: 0.55rem 0 0.35rem;
  letter-spacing: 0.005em; color: var(--paper);
}
.oeuvre-titre em { font-style: italic; }
.oeuvre-qui {
  font-size: 0.85rem; color: var(--bone); margin-bottom: 1.15rem;
}
.oeuvre-recit {
  font-size: 0.92rem; line-height: 1.72; color: var(--ash); margin: 0;
}

/* ─── L'extrait des paroles ───
   C'est le plus beau de la fiche, et ce qui prouve le service mieux
   qu'aucun argument : on lui donne la place d'une citation, une
   guillemet ouvrante dessinée dans le corps du titre, et un lavis
   chaud à peine perceptible pour l'isoler du récit. */
.oeuvre-vers {
  position: relative;
  margin: 1.4rem 0 0; padding: 1.1rem 1.1rem 1.1rem 2.3rem;
  border: 0; border-left: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(100deg, rgba(201, 168, 76, 0.055), transparent 78%);
  font-family: var(--ff-d); font-style: italic;
  font-size: 1.14rem; line-height: 1.6; color: var(--or-bright);
  white-space: pre-line;
}
.oeuvre-vers::before {
  content: '“';
  position: absolute; left: 0.5rem; top: 0.15rem;
  font-family: var(--ff-d); font-style: normal;
  font-size: 3rem; line-height: 1; color: var(--or-deep);
  opacity: calc(0.5 + var(--chaleur) * 0.4);
  transition: opacity 520ms var(--ease);
}

/* ─── Les mots de la famille ───
   Trois mots confiés au téléphone, rendus tels quels. En jetons
   distincts plutôt qu'en ligne continue : on voit qu'ils ont été
   donnés un par un. */
.oeuvre-brief {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.oeuvre-brief .mono {
  display: block; font-size: 0.5rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dust);
}
.oeuvre-brief em {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.65rem; font-style: normal;
}
.oeuvre-mot {
  font-family: var(--ff-d); font-style: italic; font-size: 1rem;
  line-height: 1; color: var(--or-patina);
  padding: 0.4rem 0.8rem; border-radius: 100px;
  border: 1px solid rgba(201, 168, 76, calc(0.16 + var(--chaleur) * 0.18));
  background: rgba(201, 168, 76, calc(0.03 + var(--chaleur) * 0.035));
  transition: border-color 520ms var(--ease), background 520ms var(--ease), color 520ms var(--ease);
}
.oeuvre.vu:hover .oeuvre-mot, .oeuvre.actif .oeuvre-mot { color: var(--or); }

/* Sur fond ivoire, la lumière doit s'inverser : on n'éclaire pas du
   blanc, on le creuse. */
.section-light .oeuvre {
  background:
    radial-gradient(140% 92% at 16% -6%,
      rgba(201, 168, 76, calc(0.09 + var(--chaleur) * 0.09)) 0%, transparent 58%),
    linear-gradient(178deg, #ffffff 0%, #fdfcfa 100%);
  border-color: rgba(10, 8, 4, calc(0.09 + var(--chaleur) * 0.06));
}
.section-light .oeuvre.vu:hover {
  box-shadow: 0 26px 60px -20px rgba(10, 8, 4, 0.2), 0 0 40px -16px rgba(151, 128, 60, 0.3);
}
.section-light .oeuvre-titre { color: var(--ivory-ink); }
.section-light .oeuvre-qui { color: var(--ivory-soft); }
.section-light .oeuvre-recit { color: var(--ivory-soft); }
.section-light .oeuvre-style { color: var(--or-deep); }
.section-light .oeuvre-vers { color: var(--or-deep); background: linear-gradient(100deg, rgba(151, 128, 60, 0.07), transparent 78%); }
.section-light .oeuvre-haut { border-bottom-color: var(--ivory-line); }
.section-light .oeuvre-brief { border-top-color: var(--ivory-line); }
.section-light .oeuvre-sceau { background: radial-gradient(circle at 36% 26%, rgba(201, 168, 76, 0.2), transparent 72%), #fffdf8; }
.section-light .oeuvre-mot { color: var(--or-deep); border-color: rgba(151, 128, 60, 0.28); }

/* Mouvement réduit : la lumière reste, le mouvement s'arrête. Une
   lueur douce n'a jamais donné le vertige à personne ; une rotation
   et un balayage, si. */
@media (prefers-reduced-motion: reduce) {
  .oeuvre, .oeuvre.vu, .oeuvre.vu:hover { transition: border-color 200ms, box-shadow 200ms; }
  .oeuvre.vu:hover { transform: none; }
  .oeuvre.joue .oeuvre-sceau::before { animation: none; }
}

/* Bouton de dépliage — masqué tant que la fiche montre tout */
.oeuvre-plus {
  display: none; align-items: center; justify-content: space-between;
  width: 100%; margin-top: 1rem; padding: 0.7rem 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--ff-m); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--or-patina);
  background: none; cursor: pointer;
  transition: color var(--t-fast);
}
.oeuvre-plus svg { width: 15px; height: 15px; transition: transform var(--t-mid) var(--ease); }
.oeuvre-plus:hover { color: var(--or); }
.oeuvre.ouvert .oeuvre-plus svg { transform: rotate(180deg); }
.oeuvre-detail > :first-child { margin-top: 0; }

.oeuvre-jauge { height: 2px; background: var(--line-soft); }
.oeuvre-jauge span {
  display: block; height: 100%; width: 0;
  background: var(--or-grad); transition: width 0.15s linear;
}

/* ═══ Barre d'écoute — suit la lecture pendant qu'on fait défiler ═══ */
.ecoute {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: rgba(6, 6, 11, 0.94);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  animation: ecouteMonte 0.45s var(--ease-out);
}
@keyframes ecouteMonte { from { transform: translateY(100%); } to { transform: none; } }
.ecoute[hidden] { display: none; }
body.a-ecoute { padding-bottom: 5rem; }

.ecoute-inner {
  position: relative;
  max-width: var(--container); margin: 0 auto;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem var(--pad);
}

/* Le spectre passe derrière les commandes, à peine visible */
.ecoute-onde {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 2px; opacity: 0.16; pointer-events: none; overflow: hidden;
}
.ecoute-onde span {
  width: 2px; height: 2px; border-radius: 2px; background: var(--or);
}
.ecoute-inner > *:not(.ecoute-onde) { position: relative; z-index: 1; }

.ecoute-lire, .ecoute-nav, .ecoute-fermer {
  flex: none; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; transition: color var(--t-fast), background var(--t-fast);
}
.ecoute-lire {
  width: 40px; height: 40px; color: var(--ink);
  background: var(--or); border: 1px solid var(--or);
}
.ecoute-lire svg { width: 15px; height: 15px; }
.ecoute-lire:hover { background: var(--or-bright); }
.ecoute-nav, .ecoute-fermer {
  width: 32px; height: 32px; color: var(--ash);
  background: transparent; border: 1px solid transparent;
}
.ecoute-nav svg, .ecoute-fermer svg { width: 14px; height: 14px; }
.ecoute-nav:hover, .ecoute-fermer:hover { color: var(--or); background: rgba(201, 168, 76, 0.1); }

.ecoute-info { min-width: 0; max-width: 26ch; }
.ecoute-info strong {
  display: block; font-family: var(--ff-d); font-weight: 400; font-size: 1.05rem;
  color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecoute-info span {
  display: block; font-family: var(--ff-m); font-size: 0.52rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ecoute-jauge {
  position: relative; flex: 1; min-width: 60px; height: 22px; cursor: pointer;
  display: flex; align-items: center; touch-action: none;
}
.ecoute-jauge::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px; background: rgba(255, 255, 255, 0.14);
}
.ecoute-jauge span {
  position: relative; height: 2px; width: 0;
  background: var(--or-grad); transition: width 0.15s linear;
}
.ecoute-jauge:focus-visible { outline: 1px solid var(--or); outline-offset: 4px; }

.ecoute-temps {
  flex: none; font-family: var(--ff-m); font-size: 0.6rem;
  letter-spacing: 0.06em; color: var(--ash); white-space: nowrap;
}

@media (max-width: 860px) {
  /* L'appel à l'action colle déjà le bas de l'écran : on se pose au-dessus */
  body.has-sticky-cta .ecoute { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  body.a-ecoute { padding-bottom: 4.6rem; }
  body.a-ecoute.has-sticky-cta { padding-bottom: 9rem; }
  .ecoute-inner { gap: 0.55rem; padding: 0.6rem var(--pad); }
  .ecoute-info { max-width: none; flex: 1; }
  .ecoute-nav, .ecoute-temps { display: none; }
  /* La jauge passe en filet sur toute la largeur, au ras du haut de la
     barre : le nom de la personne récupère la place. Sélecteur aussi
     précis que la règle de pile ci-dessus, sinon « relative » l'emporte. */
  .ecoute-inner > .ecoute-jauge {
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px; min-width: 0; padding: 0;
  }
  .ecoute-jauge::before { top: 0; margin-top: 0; height: 3px; }
  .ecoute-jauge span { height: 3px; }
}

/* En-tête de page — en classe, donc ajustable sur téléphone. En style en
   ligne, aucune media query n'aurait pu la resserrer. */
.page-head { padding: 8rem 0 0; }

/* ═══ La vitrine sur téléphone ═══
   Sept récits complets faisaient sept écrans à faire défiler : on ne
   voyait plus la vitrine, on la traversait. La fiche se replie sur
   l'essentiel — qui, quel registre, combien de temps — et l'histoire se
   déplie d'une touche, ou d'elle-même quand l'hommage se met à jouer.
   Sans JavaScript, « compact » n'est jamais posé : tout reste affiché. */
@media (max-width: 720px) {
  /* Le titre repoussait la première note à un écran et demi */
  .page-head { padding-top: 5.5rem; }
  .page-head .lead { margin-top: 1rem; }

  .catalogue { gap: 0.9rem; }
  .catalogue.compact .oeuvre-plus { display: flex; }
  .catalogue.compact .oeuvre:not(.ouvert) .oeuvre-detail { display: none; }
  .catalogue.compact .oeuvre-plus { margin-top: 0.9rem; }
  .catalogue.compact .oeuvre.ouvert .oeuvre-detail { animation: oeuvreOuvre 0.35s var(--ease-out); }
  @keyframes oeuvreOuvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* La fiche qui joue se distingue nettement dans une liste repliée */
  .catalogue.compact .oeuvre.actif { background: var(--surface-2); }

  .oeuvre-haut { padding: 0.9rem 1rem; gap: 0.75rem; }
  .oeuvre-corps { padding: 1.05rem 1rem 1.1rem; }
  .oeuvre-titre { font-size: 1.34rem; margin: 0.35rem 0 0.25rem; }
  .oeuvre-qui { font-size: 0.88rem; margin-bottom: 0; }
  .oeuvre-recit { font-size: 0.95rem; line-height: 1.62; }
  .oeuvre-vers { font-size: 1.02rem; }

  /* Cibles tactiles : Android demande 48 dp, on ne descend pas sous 44 px */
  .oeuvre-sceau { width: 40px; height: 40px; }
  .oeuvre-sceau span { font-size: 1.2rem; }
  .oeuvre-lire { width: 44px; height: 44px; }
  .oeuvre-lire svg { width: 16px; height: 16px; }
  .oeuvre-plus { min-height: 44px; padding: 0.85rem 0; font-size: 0.66rem; }

  /* Un mono à 7,5 px ne se lit pas au bras tendu */
  .oeuvre-style { font-size: 0.64rem; letter-spacing: 0.14em; }
  .oeuvre-duree { font-size: 0.72rem; }
  .oeuvre-brief .mono { font-size: 0.62rem; letter-spacing: 0.14em; }
  .oeuvre-brief em { font-size: 1.02rem; }

  /* Le bandeau tenait sur trois lignes avant la première note */
  .cat-barre { gap: 0.9rem; margin-bottom: 1.2rem; }
  .cat-compte { font-size: 0.66rem; letter-spacing: 0.12em; }

  /* Les registres défilent sur une seule ligne au lieu d'en occuper trois */
  .cat-filtres {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none;
    margin: 0 calc(var(--pad) * -1) 1.6rem;
    padding: 0 var(--pad) 0.3rem;
    scroll-snap-type: x proximity;
  }
  .cat-filtres::-webkit-scrollbar { display: none; }
  .cat-filtre {
    flex: none; scroll-snap-align: start;
    min-height: 42px; padding: 0.6rem 0.95rem;
    font-size: 0.66rem; letter-spacing: 0.1em;
  }
  .cat-filtre span { font-size: 1em; margin-left: 0.5rem; }
}

@media (max-width: 400px) {
  .oeuvre-titre { font-size: 1.24rem; }
  .oeuvre-haut { gap: 0.6rem; padding: 0.85rem 0.9rem; }
  .oeuvre-corps { padding: 1rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .oeuvre, .oeuvre.vu, .oeuvre.vu:hover {
    opacity: 1; transform: none; transition: border-color var(--t-fast);
  }
  .oeuvre.joue .oeuvre-onde span { animation: none; height: 9px; background: var(--or-patina); }
  .oeuvre.joue::after, .oeuvre.joue .oeuvre-sceau, .cat-eq span { animation: none; }
  .en-lecture .cat-eq span { height: 8px; }
  .ecoute { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   RITES ET TRADITIONS
   Chaque tradition tient dans un bloc : ce que la maison propose,
   ce qu'elle refuse. Les deux colonnes ont volontairement le même
   poids — le refus est aussi important que l'offre, et c'est lui
   qui rend la page crédible auprès d'une communauté.
   ═══════════════════════════════════════════════════════════════ */

.rite {
  padding: 2rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.rite:last-of-type { border-bottom: 0; }

.rite-tete {
  display: flex; align-items: baseline; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 0.9rem;
}
.rite-nom {
  font-family: var(--ff-d); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1;
  color: var(--paper); margin: 0;
}
.rite-tenue {
  font-family: var(--ff-m); font-size: 0.6rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--or-patina);
  padding: 0.35rem 0.75rem; border: 1px solid var(--line);
}
.rite-resume {
  font-size: 1rem; line-height: 1.8; color: var(--bone);
  max-width: 76ch; margin: 0 0 1.6rem;
}

.rite-listes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem;
}
.rite-label {
  font-family: var(--ff-m); font-size: 0.54rem; letter-spacing: 0.18em;
  text-transform: uppercase; margin-bottom: 0.7rem;
}
.rite-oui .rite-label { color: var(--green); }
.rite-non .rite-label { color: var(--ash); }

.rite-listes ul { list-style: none; padding: 0; margin: 0; }
.rite-listes li {
  position: relative; padding-left: 1.3rem; margin-bottom: 0.6rem;
  font-size: 0.93rem; line-height: 1.7; color: var(--ash);
}
.rite-listes li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--ff-m); font-size: 0.85rem;
}
.rite-oui li::before { content: '·'; color: var(--green); font-size: 1.4rem; line-height: 1.1; }
.rite-non li::before { content: '×'; color: var(--dust); }
.rite-oui li { color: var(--bone); }

.rite-mot {
  margin: 1.5rem 0 0; padding-left: 1rem;
  border-left: 1px solid var(--line-strong);
  font-family: var(--ff-d); font-style: italic;
  font-size: 1.1rem; line-height: 1.65; color: var(--or-patina);
  max-width: 72ch;
}

@media (max-width: 760px) {
  .rite { padding: 1.6rem 0; }
  .rite-listes { grid-template-columns: 1fr; gap: 1.2rem; }
  .rite-tete { gap: 0.6rem; }
  .rite-tenue { font-size: 0.62rem; letter-spacing: 0.1em; }
  .rite-resume { font-size: 0.96rem; }
  .rite-label { font-size: 0.64rem; letter-spacing: 0.12em; }
  .rite-listes li { font-size: 0.95rem; }
  .rite-mot { font-size: 1.04rem; }
}

/* ═══════════════════════════════════════════════════════════════
   ESPACE PARTENAIRE — mise en page en classes

   Ces règles étaient posées en style « inline » dans le gabarit de la
   page de connexion. Une déclaration inline l'emporte sur toute règle
   de feuille, y compris sur une requête média : les corrections
   mobiles n'avaient donc aucun effet sur cette page. Elles reprennent
   ici leur place normale, ajustables sous téléphone.
   ═══════════════════════════════════════════════════════════════ */
.page-auth { padding-top: 9rem; min-height: 100vh; }
.auth-wrap { max-width: 520px; }
.auth-logo { height: 110px; margin: 0 auto 1.8rem; }
.auth-intro { color: var(--ash); font-size: 0.9rem; margin-bottom: 1.6rem; }
.auth-switch {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap;
}
.auth-switch-solo { justify-content: center; }
.lien-bascule {
  font-family: var(--ff-m); font-size: 0.58rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ash); background: none; border: 0;
  cursor: pointer; padding: 0.35rem 0; transition: color var(--t-fast);
}
.lien-bascule:hover { color: var(--or); }
.lien-bascule-or { color: var(--or); }
.auth-note {
  font-family: var(--ff-m); font-size: 0.52rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dust); margin-top: 2rem; line-height: 1.9;
}

/* ═══════════════════════════════════════════════════════════════
   PLANCHER TYPOGRAPHIQUE — TÉLÉPHONE

   La charte repose sur du mono très interlettré : élégant sur un
   écran de bureau, illisible sur un téléphone, où le même 0,5 rem
   tombe à 8 px. Un relevé sur Galaxy S25, iPhone 15 et Pixel 8 a
   trouvé quatre-vingts textes sous le seuil de lisibilité.

   Le principe retenu : ne jamais descendre sous 12 px sur téléphone,
   et compenser le corps plus gros en resserrant l'interlettrage —
   c'est lui, pas la taille, qui fait déborder les libellés français.
   Le bloc est placé en fin de feuille : à spécificité égale, il
   l'emporte sur les paliers précédents, qui restent lisibles comme
   l'historique des ajustements.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* ─── Surtitres et micro-typographie mono ─── */
  .eyebrow { font-size: 0.75rem; letter-spacing: 0.18em; margin-bottom: 1.1rem; }
  .eyebrow::before, .eyebrow::after { width: 16px; }
  .mono, .card .mono { font-size: 0.75rem; letter-spacing: 0.13em; line-height: 1.7; }
  .note { font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.7; }
  .legal-date { font-size: 0.72rem; letter-spacing: 0.12em; }
  .quote-band cite { font-size: 0.75rem; letter-spacing: 0.16em; }

  /* ─── Repères de valeur : prix, chiffres, réassurance ─── */
  .price-name { font-size: 0.75rem; letter-spacing: 0.18em; }
  .price-note { font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.6; }
  .price-tag  { font-size: 0.7rem;  letter-spacing: 0.12em; padding: 0.38rem 0.9rem; }
  .stat-label { font-size: 0.72rem; letter-spacing: 0.1em; line-height: 1.5; }
  .badge      { font-size: 0.72rem; letter-spacing: 0.09em; padding: 0.42rem 0.85rem; }
  .trust-item { font-size: 0.75rem; letter-spacing: 0.04em; }
  .step-time  { font-size: 0.72rem; letter-spacing: 0.11em; }

  /* ─── Écoute et catalogue ───
     Les sélecteurs sont ici plus longs qu'ailleurs : le palier propre
     au catalogue, écrit plus haut, l'emporterait sinon par
     spécificité et non par ordre. */
  .oeuvre-style { font-size: 0.73rem; letter-spacing: 0.09em; }
  .oeuvre-brief .mono { font-size: 0.73rem; letter-spacing: 0.1em; }
  .oeuvre-duree { font-size: 0.76rem; }
  .oeuvre-plus { font-size: 0.76rem; letter-spacing: 0.08em; }
  .cat-compte { font-size: 0.75rem; letter-spacing: 0.09em; }
  .cat-filtre { font-size: 0.75rem; letter-spacing: 0.07em; }
  .ecoute-info span { font-size: 0.73rem; letter-spacing: 0.09em; }
  .player-head  { font-size: 0.73rem; letter-spacing: 0.11em; }
  .pt-time      { font-size: 0.72rem; }

  /* ─── Rites ─── */
  .rite-tenue { font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.6; }
  .rite-label { font-size: 0.73rem; letter-spacing: 0.1em; }

  /* ─── Formulaires et tunnel de commande ─── */
  .field-label { font-size: 0.75rem; letter-spacing: 0.11em; }
  .field-hint, .field-err { font-size: 0.8rem; }
  .calc-head label { font-size: 0.75rem; letter-spacing: 0.11em; }
  .wz-dot { font-size: 0.72rem; }
  .wz-recap-head, .wz-total span { font-size: 0.75rem; letter-spacing: 0.11em; }
  .check { font-size: 0.92rem; }
  /* « Mot de passe oublié » et « Créer un compte » sont les deux
     seules sorties de l'écran de connexion : 32 px de haut, on les
     manquait au pouce. */
  .lien-bascule {
    font-size: 0.78rem; letter-spacing: 0.09em;
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .auth-note { font-size: 0.72rem; letter-spacing: 0.09em; }

  /* ─── Tableaux comparatifs et juridiques ─── */
  .compare thead th { font-size: 0.72rem; letter-spacing: 0.07em; }
  .compare th, .compare td { padding: 0.85rem 0.75rem; }
  .scroll-hint { font-size: 0.72rem; letter-spacing: 0.08em; }
  .prose th { font-size: 0.72rem; letter-spacing: 0.1em; }

  /* ─── Témoignages ─── */
  .testi-who { font-size: 0.75rem; letter-spacing: 0.11em; line-height: 1.6; }

  /* ─── En-tête et page d'entrée ─── */
  .nav-sub { font-size: 0.7rem; letter-spacing: 0.17em; }
  .hero-scroll { font-size: 0.72rem; letter-spacing: 0.18em; }
  .intro-name { font-size: 0.7rem; letter-spacing: 0.42em; text-indent: 0.42em; }
  .intro-hint { font-size: 0.75rem; letter-spacing: 0.09em; }

  /* ─── Pied de page ─── */
  .footer h4 { font-size: 0.75rem; letter-spacing: 0.15em; }
  .footer-baseline, .footer-bottom { font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.9; }
  .footer-links a, .footer-links .lien-rappel, .lien-rappel { font-size: 0.92rem; }

  /* ─── Boutons ───
     L'action principale d'une page tombait à 9,9 px. On la remonte à
     13 px et on relâche l'interlettrage : « Créer mon compte
     partenaire » tient alors sur deux lignes lisibles plutôt que sur
     trois lignes serrées. La hauteur minimale de 48 px vient de la
     recommandation Android ; iOS demande 44. */
  .btn {
    font-size: 0.8125rem; letter-spacing: 0.09em;
    padding: 0.9rem 1.35rem; min-height: 48px; line-height: 1.3;
  }
  .btn-sm { font-size: 0.76rem; letter-spacing: 0.08em; padding: 0.65rem 1rem; min-height: 42px; }
  .btn-lg { font-size: 0.86rem; letter-spacing: 0.09em; padding: 1.05rem 1.5rem; }
  .btn svg { width: 16px; height: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   ZONES DE TOUCHE — TÉLÉPHONE

   Une pastille de carrousel de 7 px, une case à cocher de 17 px, un
   rail de curseur de 3 px : visibles, mais impossibles à viser au
   pouce. On agrandit la surface tactile sans changer le dessin —
   c'est le remplissage qui grandit, pas la forme.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* Le menu et les flèches : 39 et 40 px, juste sous le seuil */
  .nav-burger { padding: 0.6rem; }
  .carousel-arrow { width: 44px; height: 44px; }

  /* Pastilles du carrousel : 44 × 44 de zone utile, dessin inchangé */
  .carousel-nav { gap: 0.1rem; margin-top: 1.4rem; }
  .carousel-dot {
    padding: 18px 16px; box-sizing: content-box; background-clip: content-box;
  }
  .carousel-dot.active { padding: 18px 8px; }

  /* Cases à cocher : 22 px, et le libellé reste cliquable sur toute sa
     surface — c'est lui qui porte l'essentiel de la cible. */
  .check { padding: 0.35rem 0; gap: 0.7rem; }
  .check input { width: 22px; height: 22px; margin-top: 0; }

  /* Curseur du simulateur : le rail garde ses 3 px, mais le champ
     lui-même monte à 40 px de haut. Il faut alors dessiner le rail
     nous-mêmes et recentrer la pastille dessus. */
  .calc-range { height: 44px; background: transparent; }
  .calc-range::-webkit-slider-runnable-track {
    height: 3px; border-radius: 100px; background: rgba(255, 255, 255, 0.12);
  }
  .calc-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10.5px; }
  .calc-range::-moz-range-track {
    height: 3px; border-radius: 100px; background: rgba(255, 255, 255, 0.12);
  }
  .calc-range::-moz-range-thumb { width: 24px; height: 24px; }

  /* Liens au fil du texte : 15 px de haut, on les manque au pouce.
     Le remplissage d'un élément *en ligne* agrandit la zone cliquable
     sans décaler la mise en page — le texte autour ne bouge pas. Le
     soulignement remplace le filet bas, qui serait parti se poser
     quinze pixels plus bas. La règle ne vise que le texte courant :
     les liens habillés en bouton et ceux du pied de page ont déjà
     leur propre hauteur de touche. */
  .prose p a, .prose li a, .prose .lien-rappel, .note-inline a {
    padding: 0.85rem 0.25rem; margin: 0 -0.25rem;
    border-bottom: 0; text-decoration: underline; text-underline-offset: 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TABLEAUX JURIDIQUES EN FICHES

   Les deux tableaux des CGV et de la politique de confidentialité
   comptent trois colonnes de texte long. Sous 640 px, aucune ne peut
   se réduire assez : la page entière débordait de 41 px et se
   déplaçait latéralement. Chaque ligne devient une fiche, et l'entête
   de colonne est reporté devant chaque valeur — l'information est
   conservée, la lecture reste verticale.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .prose .tab-fiches,
  .prose .tab-fiches tbody,
  .prose .tab-fiches tr,
  .prose .tab-fiches td { display: block; width: 100%; }

  /* La ligne d'entête ne sert plus : les libellés sont sur les cases */
  .prose .tab-fiches tr:first-child { display: none; }

  .prose .tab-fiches tr {
    border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: 0.3rem 1rem 0.7rem; margin-bottom: 0.9rem;
  }
  .prose .tab-fiches td { border-bottom: 0; padding: 0.55rem 0; }
  .prose .tab-fiches td::before {
    content: attr(data-l); display: block;
    font-family: var(--ff-m); font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--or-patina); margin-bottom: 0.2rem;
  }
  .section-light .prose .tab-fiches tr { border-color: var(--ivory-line); }
  .section-light .prose .tab-fiches td::before { color: var(--or-deep); }

  /* Filet de sécurité : tout autre tableau du texte juridique défile
     plutôt que de pousser la page. */
  .prose table:not(.tab-fiches) { display: block; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   DERNIERS AJUSTEMENTS — TRÈS PETITS ÉCRANS (≤ 400 px)
   On ne redescend plus le corps : on resserre l'interlettrage et le
   remplissage, seuls responsables des libellés qui cassent.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .btn { letter-spacing: 0.06em; padding: 0.9rem 1rem; }
  .btn-lg { padding: 1rem 1.1rem; letter-spacing: 0.06em; }
  .eyebrow { letter-spacing: 0.14em; }
  .price-name, .stat-label, .mono, .card .mono { letter-spacing: 0.09em; }
  .footer h4 { letter-spacing: 0.11em; }
  .page-auth { padding-top: 6.5rem; }
  .auth-switch { gap: 0.4rem 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLEAU COMPARATIF — LISIBILITÉ DU DÉFILEMENT

   Le tableau « musique du commerce / Melodia Funèbre » ne se réduit
   pas sous 520 px sans devenir illisible : il défile dans son cadre.
   Encore faut-il que cela se voie. Un dégradé sur le bord droit
   signale la suite, et la mention de défilement passe au-dessus du
   tableau plutôt qu'en dessous, où on ne la lisait qu'après avoir
   cherché.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .compare-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    background-image: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.13));
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 42px 100%;
  }
  .compare th:first-child, .compare td:first-child { scroll-snap-align: start; }
  .scroll-hint { margin-top: 0; margin-bottom: 0.7rem; }
  .scroll-hint::before { content: '↔  '; letter-spacing: 0; }
}

/* Note au pied d'un formulaire : deuxième voie de contact, en retrait
   du bouton principal sans jamais devenir illisible. En classe, donc
   ajustable sous téléphone — ce qu'un style inline interdisait. */
.note-inline {
  font-size: 0.82rem; line-height: 1.65; text-align: center;
  margin-top: 1rem; color: var(--ash);
}
.note-inline a { color: var(--or); text-decoration: underline; text-underline-offset: 2px; }
.section-light .note-inline { color: var(--ivory-dim); }
.section-light .note-inline a { color: var(--or-deep); }
@media (max-width: 720px) { .note-inline { font-size: 0.86rem; } }

/* ═══════════════════════════════════════════════════════════════
   RELECTURE À L'ŒIL — CE QU'UN RELEVÉ AUTOMATIQUE NE VOIT PAS

   Les tailles étaient bonnes et les cibles atteignables, mais les
   captures à 360 px ont montré ce qu'aucune mesure ne signale :
   des blocs qui se marchent dessus, des libellés coupés en deux,
   un médaillon devenu rectangle.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Bas du bandeau d'ouverture ───
   « Découvrir » est posé en absolu à 2 rem du bas. Sur un téléphone,
   le bandeau est plus haut que l'écran : l'indication retombait sur
   la ligne « Dès 149 € · Sans engagement · Révision jusqu'à
   satisfaction », qui est un argument, pas un ornement. Sur écran
   tactile, personne n'a besoin qu'on lui dise que la page défile. */
@media (max-width: 860px) {
  .hero-scroll { display: none; }

  /* Le voile de la barre de navigation ne tient que si le flou du
     fond est rendu. Android le coupe en économie d'énergie, et le
     texte de la page transparaissait alors sous le logo. Sur
     téléphone la barre devient pleine : le voile est une élégance de
     grand écran, la lisibilité n'est pas négociable. */
  .nav { background: var(--ink); }
}

@media (max-width: 720px) {

  /* ─── Barre d'action permanente ───
     « Être rappelé » se coupait en deux lignes quand « Commander »
     tenait sur une : deux boutons côte à côte, de hauteurs de texte
     différentes. On resserre l'interlettrage de cette barre — et
     d'elle seule — plutôt que de raccourcir le libellé. */
  .sticky-cta .btn {
    font-size: 0.78rem; letter-spacing: 0.03em;
    padding: 0.85rem 0.5rem; gap: 0.45rem;
  }
  .sticky-cta .btn svg { width: 15px; height: 15px; }

  /* ─── Simulateur de marge ───
     Libellé à gauche, valeur à droite : sur 360 px, les deux se
     cassaient sur trois lignes chacun et se faisaient face en
     escalier. Empilés, ils se lisent d'un trait. */
  .calc-head {
    flex-direction: column; align-items: flex-start;
    gap: 0.15rem; margin-bottom: 0.9rem;
  }
  .calc-val { font-size: 1.5rem; line-height: 1.15; }
  .calc-row { margin-bottom: 1.4rem; }

  /* ─── Écran de connexion ───
     Le logo est un fichier carré à fond noir : posé tel quel sur la
     page, il se lisait comme un rectangle collé. Il redevient le
     médaillon des autres pages. */
  .auth-logo {
    width: 104px; height: 104px; object-fit: cover;
    border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.35);
  }
  /* Les deux issues dépassaient de deux pixels et se rangeaient l'une
     sous l'autre. Deux pixels d'interlettrage les remettent en ligne. */
  .auth-switch { gap: 0.6rem; }
  .lien-bascule { letter-spacing: 0.06em; }

  /* ─── Coupures de fin de ligne ───
     Une mention centrée qui laisse « CGI » seul sur sa deuxième ligne
     a l'air d'un accident. Le navigateur répartit les lignes quand on
     le lui demande ; là où il ne sait pas le faire, rien ne change. */
  .price-note, .note-inline, .auth-note, .scroll-hint,
  .center .lead, .price-desc, .stat-label {
    text-wrap: balance;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECONDE PASSE — CE QUE LA PREMIÈRE SONDE AVAIT MANQUÉ
   ═══════════════════════════════════════════════════════════════ */

/* Le bas du bandeau d'ouverture reste sur fond quasi plein : la ligne
   « Dès 149 € · Sans engagement · Révision jusqu'à satisfaction » se
   détachait mal du filigrane du logo. */
@media (max-width: 860px) {
  .hero-video::after {
    background:
      linear-gradient(180deg, rgba(4, 4, 7, 0.92) 0%, rgba(4, 4, 7, 0.5) 30%,
                      rgba(4, 4, 7, 0.86) 62%, var(--ink) 86%);
  }
}

@media (max-width: 720px) {
  /* 7,4 px. Le libellé est coupé par un <br>, ce qui l'avait rendu
     invisible au premier relevé — corrigé des deux côtés. */
  .calc-cell-lbl { font-size: 0.72rem; letter-spacing: 0.1em; margin-top: 0.5rem; }

  /* Les deux issues de l'écran de connexion mesurent 157 et 124 px
     pour 281 px de carte : elles ne tiennent pas côte à côte, l'écart
     compris. Plutôt qu'un repli hasardeux, on les empile franchement —
     deux actions distinctes, deux cibles pleines. */
  .auth-switch {
    flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 0;
    border-top: 1px solid var(--line-soft); margin-top: 1.4rem; padding-top: 0.4rem;
  }
  .auth-switch-solo { border-top: 0; padding-top: 0; }
  .lien-bascule { justify-content: flex-start; letter-spacing: 0.09em; }
  .auth-switch-solo .lien-bascule { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MENTION D'UNE FICHE

   Tout le catalogue parle de personnes disparues. Quand une œuvre
   fait exception — un hommage composé pour quelqu'un de vivant, un
   anniversaire, des noces d'or — il faut le dire à l'endroit et au
   moment où on le lit, c'est-à-dire sur la fiche elle-même, avant
   le titre. Sans quoi une famille comprend qu'on lui présente un
   défunt de plus.
   ═══════════════════════════════════════════════════════════════ */
.oeuvre-mention {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.7rem;
  font-family: var(--ff-m); font-size: 0.58rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyan, #38bdf8);
  border: 1px solid rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.07);
  padding: 0.3rem 0.7rem; border-radius: 100px;
}
.oeuvre-mention::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: none;
}
.section-light .oeuvre-mention {
  color: #0d6f96; border-color: rgba(13, 111, 150, 0.3); background: rgba(13, 111, 150, 0.06);
}
@media (max-width: 720px) {
  .oeuvre-mention { font-size: 0.72rem; letter-spacing: 0.08em; padding: 0.34rem 0.7rem; }
}