/* ==========================================================================
   Alka Gold : feuille de style
   ========================================================================== */

:root {
  --navy-950: #0c1230;
  --navy-900: #121a3b;
  --navy-800: #1a2450;
  --navy-700: #243066;
  --navy-600: #33427f;
  --gold-700: #8a6820;
  --gold-600: #a9842f;
  --gold-500: #c49a45;
  --gold-400: #d8b464;
  --gold-300: #e6cc8f;
  --gold-100: #f4e9cc;
  --gold-50: #faf5e8;
  --paper: #fbfaf6;
  --white: #fff;
  --ink: #151a2d;
  --ink-2: #4b5169;
  --ink-3: #6f7590;
  --line: #e7e2d6;
  --line-dark: rgba(255, 255, 255, .12);
  --ok: #1f7a4d;
  --danger: #b3261e;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(16, 22, 48, .05), 0 10px 30px rgba(16, 22, 48, .08);
  --shadow-lg: 0 30px 80px rgba(5, 9, 28, .45);
  --container: 1180px;
  --header-h: 76px;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0 0 .5em;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* Chiffres alignés : les chiffres « elzéviriens » de Cormorant sont peu lisibles pour des prix */
h1, h2, h3, .pc-main, .calc-out output, .hallmarks b, .step-num { font-variant-numeric: lining-nums tabular-nums; }
h1 { font-size: clamp(2.7rem, 5.6vw, 4.5rem); }
h2 { font-size: clamp(2.1rem, 3.8vw, 3.1rem); }
h3 { font-size: 1.55rem; }
p { margin: 0 0 1em; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; }

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow--light { color: var(--gold-400); }

.section { padding: clamp(72px, 9vw, 120px) 0; }
.section--cream { background: var(--gold-50); }
.section--dark {
  color: #fff;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(216, 180, 100, .12), transparent 60%),
    var(--navy-900);
}

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head p:not(.eyebrow) { color: var(--ink-2); font-size: 1.08rem; }
.section--dark .section-head p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.section-head--split {
  display: flex;
  max-width: none;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.section-head--split > div:first-child { max-width: 640px; }
.section-head--center { margin-inline: auto; margin-bottom: 32px; text-align: center; }
.section-head--split p:last-child { margin-bottom: 0; }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .95em 1.6em;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .95rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-gold {
  color: var(--navy-950);
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  box-shadow: 0 8px 24px rgba(196, 154, 69, .32);
}
.btn-gold:hover { background: linear-gradient(180deg, var(--gold-300), var(--gold-400)); }
.btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-ghost:hover { color: var(--gold-300); border-color: var(--gold-400); }
.btn-navy { color: #fff; background: var(--navy-800); }
.btn-navy:hover { background: var(--navy-700); }
.btn-block { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  color: var(--gold-700);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bandeau des cours ---------- */

.ticker { background: var(--navy-950); color: rgba(255, 255, 255, .72); font-size: .82rem; }
.ticker .container {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ticker-prices {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
}
.ticker-prices li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ticker-prices b { color: #fff; font-weight: 600; }
.ticker .unit { margin-left: -4px; }
.ticker-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-300);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ticker-phone:hover { color: #fff; }

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cd17f;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(76, 209, 127, .55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(76, 209, 127, 0); }
}

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 250, 246, .92);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px rgba(16, 22, 48, .06); }
.header-inner { display: flex; height: var(--header-h); align-items: center; justify-content: space-between; gap: 24px; }

.logo {
  font-family: var(--serif);
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1;
  color: var(--navy-800);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--gold-500); }
.logo--light { color: #fff; }

.nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav a:not(.btn) {
  position: relative;
  padding: 6px 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration: none;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: .75em 1.3em; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy-800);
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(1000px 600px at 90% 10%, rgba(216, 180, 100, .2), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(51, 66, 127, .7), transparent 60%),
    var(--navy-900);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 180, 100, .5), transparent);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  padding: clamp(56px, 8vw, 110px) 0 clamp(80px, 9vw, 120px);
}
.hero h1 em { font-style: italic; color: var(--gold-400); }
.hero .lead { max-width: 34em; font-size: 1.15rem; color: rgba(255, 255, 255, .78); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-tagline {
  margin: 40px 0 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--gold-300);
}
.hero-tagline span { margin: 0 .4em; color: rgba(255, 255, 255, .35); }

.hero-visual { position: relative; }
.hero-visual img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}

.price-card {
  position: relative;
  width: min(350px, 92%);
  margin: -96px 0 0 -44px;
  padding: 22px 24px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(5, 9, 28, .35);
}
.pc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-head .eyebrow { margin: 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf7ef;
  color: var(--ok);
  font-size: .74rem;
  font-weight: 600;
}
.pc-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 14px;
  font-family: var(--serif);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--navy-800);
}
.pc-main small { font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--ink-3); }
.pc-list { margin: 0; border-top: 1px solid var(--line); }
.pc-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .92rem;
}
.pc-list dt { color: var(--ink-2); }
.pc-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-foot { margin: 12px 0 0; font-size: .76rem; color: var(--ink-3); }

/* ---------- Engagements ---------- */

.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 36px 0; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item > .icon {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 12px;
  background: var(--gold-50);
  color: var(--gold-600);
}
.trust-item h2 { margin: 0 0 4px; font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.trust-item p { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Onglets ---------- */

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line-dark);
}
.tab {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .75);
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { background: var(--gold-400); color: var(--navy-950); }
.tabs--light { background: var(--white); border-color: var(--line); }
.tabs--light .tab { color: var(--ink-2); }
.tabs--light .tab:hover { color: var(--ink); }
.tabs--light .tab[aria-selected="true"] { background: var(--navy-800); color: #fff; }

/* Grands onglets centrés (pièces / lingots) */
.tabs--xl { display: flex; width: fit-content; margin: 0 auto 44px; padding: 6px; box-shadow: var(--shadow); }
.tabs--xl .tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  font-size: 1.12rem;
}
.tabs--xl .icon { width: 22px; height: 22px; }
.swatch { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2); }
.swatch--or { background: radial-gradient(circle at 35% 30%, #f6e2a8, #c49a45 60%, #8a6820); }
.swatch--argent { background: radial-gradient(circle at 35% 30%, #ffffff, #c7cbd3 60%, #858b97); }

/* ---------- Tableaux de prix ---------- */

.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.price-table {
  overflow: hidden;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
.pt-head {
  padding: 30px 26px 24px;
  border-bottom: 1px solid var(--line-dark);
  background: rgba(216, 180, 100, .06);
  text-align: center;
}
.pt-head h3 {
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--gold-300);
}
/* Petit trait doré sous le titre */
.pt-head h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--gold-500);
}
.pt-head p { margin: 0; font-size: .98rem; color: rgba(255, 255, 255, .78); }

.price-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table thead th {
  padding: 12px 26px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  color: rgba(255, 255, 255, .5);
}
.price-table thead th:not(:first-child), .price-table td { text-align: right; }
.price-table thead th:nth-child(2):not(:last-child) { padding-right: 0; }
.price-table tbody tr { border-top: 1px solid var(--line-dark); transition: background-color .15s; }
.price-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
.price-table tbody th, .price-table td { padding: 13px 26px; }
.price-table tbody th { font-weight: 500; text-align: left; }
.price-table tbody th small { display: block; font-size: .78rem; font-weight: 400; color: rgba(255, 255, 255, .5); }
.price-table td { font-size: 1.08rem; font-weight: 600; white-space: nowrap; }
.price-table td small { margin-left: 2px; font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .55); }
.price-table td small.ttc { display: block; margin: 2px 0 0; font-size: .76rem; }
.attente { color: rgba(255, 255, 255, .45); font-weight: 400; }
.price-table td.prime { padding-right: 0; font-size: .85rem; font-weight: 600; color: var(--gold-300); }

/* Carte « Investir dans l'or » : onglets Lingots / Pièces et tableau qui défile */
.price-table--invest { display: flex; flex-direction: column; }
.price-table--invest .tab-panel:not([hidden]) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.tabs--card { display: flex; margin: 18px 20px 8px; }
.tabs--card .tab {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 10px;
  font-size: 1.04rem;
}
.tabs--card .icon { width: 20px; height: 20px; }

.table-scroll {
  flex: 1 1 auto;
  height: 0;            /* la hauteur suit la carte « Vendre son or » placée à côté */
  min-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-500) transparent;
}
/* Dégradé en bas tant qu'il reste des lignes à faire défiler */
.table-scroll:not(.is-end) {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 56px), transparent);
}
.table-scroll:focus-visible { outline-offset: -2px; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: #1a2246; box-shadow: 0 1px 0 var(--line-dark); }

.price-table--invest thead th,
.price-table--invest tbody th,
.price-table--invest td { padding-left: 16px; padding-right: 16px; }
.price-table--invest thead th { white-space: nowrap; }
.price-table--invest tbody th small { white-space: nowrap; }
.price-table--invest thead th:nth-child(2) { color: var(--gold-300); }
.price-table--invest thead th:nth-child(3) { color: rgba(255, 255, 255, .8); }
.produit { display: flex; align-items: center; gap: 12px; }
/* Pastille claire : le fond blanc des photos de pièces s'y fond (multiply) */
.vignette {
  display: grid;
  flex: none;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #f7f1e3;
  isolation: isolate;
}
.vignette img { width: 36px; height: 36px; object-fit: contain; mix-blend-mode: multiply; }
.price-table td.offre { font-size: 1.02rem; }
.price-table td.offre small { display: block; margin: 2px 0 0; font-size: .74rem; font-weight: 500; color: rgba(255, 255, 255, .55); }
.price-table td.offre--achat small { color: var(--gold-300); }
.pt-foot {
  margin: 0;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-dark);
  font-size: .8rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}

.price-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 28px 0 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .62);
}
.price-note .icon { margin-top: 2px; color: var(--gold-400); }

/* ---------- Estimation ---------- */

.estimation { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(40px, 6vw, 88px); }
.estimation-text > p { font-size: 1.08rem; color: var(--ink-2); }
.hallmarks { margin-top: 32px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.hallmarks h3 { margin-bottom: 6px; font-size: 1.4rem; }
.hallmarks p { font-size: .94rem; color: var(--ink-2); }
.hallmarks ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.hallmarks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  border-radius: 12px;
  background: var(--gold-50);
  font-size: .78rem;
  color: var(--ink-2);
  text-align: center;
}
.hallmarks b { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold-700); line-height: 1.1; }

.calc {
  padding: clamp(26px, 4vw, 38px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.calc-title { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: var(--serif); font-size: 1.65rem; font-weight: 600; color: var(--navy-800); }
.calc-title .icon { color: var(--gold-600); }
.calc label, .field label { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }

input, select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #d9d4c7;
  border-radius: 12px;
  background: var(--white);
  font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 4px rgba(196, 154, 69, .18); }
.calc select, .calc input { margin-bottom: 18px; }
textarea { resize: vertical; min-height: 130px; }

.calc-entry { display: flex; gap: 10px; }
.calc .calc-entry input { margin-bottom: 0; }
.calc-entry .btn { flex: none; padding-inline: 1.2em; }
.btn-outline { color: var(--navy-800); border-color: #d9d4c7; background: var(--white); }
.btn-outline:hover { border-color: var(--gold-500); color: var(--gold-700); }
.calc-hint { margin: 8px 0 18px; font-size: .8rem; color: var(--ink-3); }
.calc-lignes { display: grid; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.calc-lignes li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 8px 9px 14px;
  border-radius: 10px;
  background: var(--gold-50);
  font-size: .9rem;
}
.calc-lignes strong { font-variant-numeric: tabular-nums; }
.calc-lignes button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.calc-lignes button:hover { background: var(--white); color: var(--danger); }

.calc-out {
  margin: 6px 0 16px;
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: #fff;
}
.calc-out > span { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
.calc-out output {
  display: block;
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
}
.calc-out p { margin: 0; font-size: .86rem; color: rgba(255, 255, 255, .65); }
.calc-disclaimer { margin: 0; font-size: .8rem; color: var(--ink-3); }

/* ---------- Comment ça marche ---------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li { position: relative; }
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 68px;
  right: -16px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-400), var(--line));
}
.step-num {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid var(--gold-300);
  border-radius: 50%;
  background: var(--white);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold-700);
}
.steps h3 { margin-bottom: 6px; font-size: 1.5rem; }
.steps p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- À propos ---------- */

.about { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 6vw, 88px); }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-photos img { width: 100%; aspect-ratio: 4 / 5.2; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-photos img:last-child { margin-top: 48px; }
.about blockquote {
  margin: 8px 0 34px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold-400);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--navy-800);
}
.about blockquote p { margin: 0; }
.about-points { display: grid; gap: 20px; }
.about-points h3 { margin-bottom: 4px; font-family: var(--sans); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.about-points p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ---------- FAQ ---------- */

.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; align-items: start; gap: clamp(40px, 6vw, 88px); }
.faq-intro p:not(.eyebrow) { color: var(--ink-2); font-size: 1.05rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  display: grid;
  flex: none;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--gold-700);
  transition: transform .25s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; padding-right: 46px; color: var(--ink-2); }
.faq details a { color: var(--gold-700); font-weight: 600; }

/* ---------- Espace pro ---------- */

.pro { padding: 0 0 clamp(72px, 9vw, 120px); background: var(--gold-50); }
.pro-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(216, 180, 100, .22), transparent 60%),
    var(--navy-900);
}
.pro-icon { width: 58px; height: 58px; padding: 14px; border-radius: 16px; background: rgba(216, 180, 100, .14); color: var(--gold-400); }
.pro-card h2 { margin-bottom: 6px; font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.pro-card p { margin: 0; max-width: 46em; color: rgba(255, 255, 255, .72); }

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
.contact-info {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(500px 300px at 0% 100%, rgba(216, 180, 100, .16), transparent 60%),
    var(--navy-900);
}
.contact-list { display: grid; gap: 20px; margin: 28px 0 32px; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; color: rgba(255, 255, 255, .85); }
.contact-list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--gold-400); }
.contact-list a { color: #fff; font-weight: 500; text-decoration: none; }
.contact-list a:hover { color: var(--gold-300); }
.open-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .88rem; font-weight: 600; color: #f0b4ad; }
.open-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.open-status:empty { display: none; }
.open-status.is-open { color: #7fe0a6; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.contact-note {
  display: flex;
  gap: 12px;
  margin: auto 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line-dark);
  font-size: .88rem;
  color: rgba(255, 255, 255, .7);
}
.contact-note .icon { width: 22px; height: 22px; color: var(--gold-400); }

.contact-form {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.contact-form h3 { font-size: 2rem; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.optional { font-weight: 400; color: var(--ink-3); }
.consent { font-size: .8rem; color: var(--ink-3); }
.consent a { color: var(--gold-700); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-statut { padding: 14px 16px; border-radius: 12px; font-size: .94rem; font-weight: 500; }
.form-statut.is-ok { background: #eaf7ef; color: var(--ok); }
.form-statut.is-error { background: #fdecea; color: var(--danger); }

/* ---------- Pied de page ---------- */

.site-footer { padding-top: 72px; color: rgba(255, 255, 255, .7); background: var(--navy-950); font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 40px; padding-bottom: 48px; }
.site-footer h2 { margin-bottom: 14px; font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-400); }
.site-footer ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer a:hover { color: var(--gold-300); }
.footer-brand .logo { display: inline-block; margin-bottom: 16px; font-size: 1.7rem; }
.footer-small { font-size: .82rem; color: rgba(255, 255, 255, .5); }
.footer-facts li { position: relative; padding-left: 18px; }
.footer-facts li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; }
.socials a:hover { border-color: var(--gold-400); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line-dark);
  font-size: .8rem;
  color: rgba(255, 255, 255, .45);
}
.footer-bottom p { margin: 0; }
.site-footer--compact { padding-top: 0; }
.site-footer--compact .footer-bottom { border-top: 0; padding-top: 28px; }

/* ---------- Pages légales ---------- */

.legal-hero { padding: clamp(56px, 7vw, 88px) 0 clamp(40px, 5vw, 56px); color: #fff; background: var(--navy-900); }
.legal-hero .container { max-width: 780px; }
.legal-hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.4rem); margin-bottom: 10px; }
.legal-hero p { margin: 0; color: rgba(255, 255, 255, .65); }
.legal { max-width: 780px; padding: clamp(48px, 6vw, 80px) 0 clamp(72px, 9vw, 110px); }
.legal h2 { margin: 2.2em 0 .6em; font-size: 1.8rem; color: var(--navy-800); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { margin: 1.6em 0 .5em; font-family: var(--sans); font-size: 1.02rem; font-weight: 600; letter-spacing: 0; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: .35em; }
.legal a { color: var(--gold-700); }
.legal .note { padding: 18px 20px; border-left: 3px solid var(--gold-400); border-radius: 0 12px 12px 0; background: var(--gold-50); }
.a-completer { padding: 1px 6px; border-radius: 4px; background: #fff3c4; color: #7a5600; font-weight: 600; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .nav ul { gap: 22px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: 8px 16px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(16, 22, 48, .12);
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a:not(.btn) { display: block; padding: 15px 4px; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { width: 100%; margin-top: 18px; }

  .hero-inner { grid-template-columns: 1fr; }
  .price-card { width: auto; max-width: 420px; margin: -72px 16px 0 auto; }
  .price-grid, .estimation, .about, .faq-wrap, .contact { grid-template-columns: 1fr; }
  .table-scroll { flex: none; height: auto; min-height: 0; max-height: 460px; }
  .pro-card { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .steps li::after { display: none; }
}

@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .logo { font-size: 1.6rem; }
  .ticker .hide-sm { display: none; }
  .ticker-prices { gap: 14px; }
  .ticker-phone span { display: none; }
  .price-card { margin: -56px 10px 0; max-width: none; }
  .pc-main { font-size: 2.5rem; }
  .trust-grid { grid-template-columns: 1fr; gap: 20px; padding: 28px 0; }
  .price-table tbody th, .price-table td, .price-table thead th { padding-left: 18px; padding-right: 18px; }
  .pt-head { padding: 24px 18px 20px; }
  .price-table--invest thead th,
  .price-table--invest tbody th,
  .price-table--invest td { padding-left: 10px; padding-right: 10px; }
  .price-table--invest thead th { font-size: .66rem; letter-spacing: .08em; }
  .price-table td.offre { font-size: .94rem; }
  .vignette { display: none; }
  .tabs--card { margin: 14px 12px 6px; }
  .tabs--xl { width: 100%; }
  .tabs--xl .tab { flex: 1; justify-content: center; padding: 14px 10px; font-size: 1rem; }
  .hallmarks ul { grid-template-columns: repeat(3, 1fr); }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .about-photos img:last-child { margin-top: 28px; }
  .faq details p { padding-right: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Écrans de vitrine : base commune (vitrine-tarifs.html, vitrine-rachat.html)
   ========================================================================== */

.vitrine {
  height: 100vh;
  overflow: hidden;
  cursor: none;
  user-select: none;
  background:
    radial-gradient(80vmax 60vmax at 0% 0%, rgba(216, 180, 100, .16), transparent 60%),
    var(--paper);
}
.v-label {
  display: inline-flex;
  align-items: center;
  gap: 1.2vmin;
  font-size: 1.9vmin;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-700);
}
/* Logo Alka Gold : lingot doré, « ALKA » bleu marine, « GOLD » doré, couleurs du logo officiel */
.v-lingot { flex: none; height: auto; }
.v-logo {
  font-family: 'Crimson Pro', var(--serif);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  color: #1f2f66;
}
.v-logo span { color: #c9923c; }
.v-slogan { font-family: 'Source Sans 3', var(--sans); letter-spacing: .03em; color: #1f2f66; }
/* Message flottant des vitrines : pause déjeuner ou magasin fermé.
   Les prix restent visibles derrière, légèrement assombris. */
.v-fermeture {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(12, 18, 48, .38);
}
.v-fermeture[hidden] { display: none; }
.v-fermeture-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vmin;
  max-width: 86vmin;
  padding: 5vmin 9vmin;
  border: .4vmin solid var(--gold-400);
  border-radius: 4vmin;
  background: var(--white);
  box-shadow: 0 4vmin 10vmin rgba(5, 9, 28, .45);
  text-align: center;
  animation: flotter 6s ease-in-out infinite;
}
@keyframes flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.8vmin); }
}
.v-fermeture-icone {
  width: 11vmin;
  height: 11vmin;
  fill: none;
  stroke: var(--gold-600);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v-fermeture[data-etat="pause"] .v-fermeture-icone--ferme,
.v-fermeture[data-etat="ferme"] .v-fermeture-icone--pause { display: none; }
.v-fermeture-titre { margin: 0; font-family: var(--serif); font-size: 11vmin; font-weight: 700; line-height: 1; color: var(--navy-800); }
.v-fermeture-texte { margin: 0; font-size: 3.6vmin; font-weight: 600; color: var(--gold-700); }
.v-fermeture-horaires { margin: 1vmin 0 0; font-size: 2.2vmin; color: var(--ink-3); }

/* Veille des vitrines : écran entièrement noir la nuit (22 h → 7 h 30), par-dessus tout le reste */
.v-veille { position: fixed; inset: 0; z-index: 100; background: #000; cursor: none; }
.v-veille[hidden] { display: none; }

/* Décor d'Halloween des vitrines (31 octobre, ajouté par main.js) : uniquement dans les marges,
   jamais sur les prix. La guirlande occupe le haut de l'écran, qui descend un peu pour lui faire place. */
[data-decor] { display: none; }
.halloween [data-decor] { display: block; }
.halloween.vitrine {
  background:
    radial-gradient(80vmax 60vmax at 0% 0%, rgba(232, 116, 42, .16), transparent 60%),
    radial-gradient(70vmax 50vmax at 100% 100%, rgba(106, 69, 160, .12), transparent 60%),
    var(--paper);
}
.halloween .vt-ecran { position: relative; padding-top: calc(8.4 * var(--u)); }
.halloween .vt-carte {
  background:
    var(--hw-toile) no-repeat right top / calc(14 * var(--u)) auto,
    radial-gradient(calc(70 * var(--u)) calc(40 * var(--u)) at 100% 0%, rgba(232, 116, 42, .2), transparent 60%),
    radial-gradient(calc(60 * var(--u)) calc(40 * var(--u)) at 0% 100%, rgba(106, 69, 160, .22), transparent 60%),
    var(--navy-900);
}
.halloween .vt-progression::after { background: #e8742a; }
.halloween .v-minuteur-anneau { background: conic-gradient(#e8742a calc(var(--progression, 0) * 360deg), var(--line) 0); }
.hw { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.hw-guirlande { position: absolute; top: 0; left: 0; width: calc(100 * var(--u)); height: calc(8 * var(--u)); }
.hw-guirlande text { font: 700 2.7px 'Crimson Pro', Georgia, serif; text-anchor: middle; }
.hw-lueur { animation: hw-lueur 2.6s ease-in-out infinite; }
@keyframes hw-lueur {
  0%, 100% { opacity: 1; }
  40% { opacity: .72; }
  55% { opacity: .95; }
  70% { opacity: .8; }
}
/* Citrouille entre le logo et le cours de l'or */
.vt-head { position: relative; }
.hw-citrouille {
  position: absolute;
  top: 50%;
  left: calc(46.2 * var(--u));
  width: calc(6.4 * var(--u));
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 calc(.4 * var(--u)) calc(.6 * var(--u)) rgba(232, 116, 42, .45));
}
/* Chauves-souris : traversent le haut de l'écran de temps en temps, en battant des ailes.
   Elles passent devant le logo puis s'élèvent au-dessus du cadre du cours de l'or, sans le couvrir. */
.hw-chauve-souris {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(7.5 * var(--u));
  animation: hw-vol 16s linear infinite;
}
.hw-chauve-souris svg { display: block; animation: hw-ailes .28s ease-in-out infinite alternate; }
.hw-chauve-souris--2 { width: calc(5.8 * var(--u)); animation-duration: 21s; animation-delay: -7s; animation-direction: reverse; }
.hw-chauve-souris--3 { top: calc(-1 * var(--u)); width: calc(4.6 * var(--u)); animation-duration: 27s; animation-delay: -18s; }
.hw-chauve-souris--3 svg { animation-duration: .22s; }
@keyframes hw-vol {
  0% { transform: translate(calc(-8 * var(--u)), calc(12 * var(--u))); }
  12% { transform: translate(calc(18 * var(--u)), calc(8.5 * var(--u))); }
  24% { transform: translate(calc(44 * var(--u)), calc(6 * var(--u))); }
  36% { transform: translate(calc(70 * var(--u)), calc(2 * var(--u))); }
  48%, 100% { transform: translate(calc(108 * var(--u)), calc(-1 * var(--u))); }
}
@keyframes hw-ailes { to { transform: scaleY(.35); } }
/* Araignée qui monte et descend au bout de son fil, dans la marge de droite */
.hw-araignee {
  position: absolute;
  top: calc(-60 * var(--u));
  left: calc(98 * var(--u));
  height: calc(60 * var(--u));
  border-left: max(1px, calc(.12 * var(--u))) solid rgba(35, 26, 51, .55);
  animation: hw-fil 9s ease-in-out infinite alternate;
}
.hw-araignee svg {
  position: absolute;
  top: calc(100% - 1 * var(--u));
  left: calc(-1.7 * var(--u));
  width: calc(3.4 * var(--u));
  transform-origin: 50% 28%;
  animation: hw-balance 2.4s ease-in-out infinite alternate;
}
@keyframes hw-fil {
  from { transform: translateY(calc(12 * var(--u))); }
  to { transform: translateY(calc(70 * var(--u))); }
}
@keyframes hw-balance {
  from { rotate: -7deg; }
  to { rotate: 7deg; }
}
/* Scène de chaque minute, calée sur l'horloge par --hw-depart (main.js) : sorcière à :00, fantôme à :20,
   apparition du spectre à :40. Sur 60 s, 1 % = 0,6 s. */
/* Sorcière sur son balai : traverse tout l'écran en 8 s, en montant et en ondulant.
   Les étincelles suivent le même trajet avec un léger retard (--i), ce qui dessine une traînée. */
.hw-vol-sorciere {
  position: absolute;
  top: 0;
  left: 0;
  animation: hw-sorciere 60s linear infinite backwards;
  animation-delay: calc(var(--hw-depart, 0s) + var(--i, 0) * .12s);
}
.hw-vague {
  display: block;
  animation: hw-vague 1.6s ease-in-out infinite alternate backwards;
  animation-delay: calc(var(--hw-depart, 0s) + var(--i, 0) * .12s);
}
.hw-vol-sorciere svg {
  display: block;
  width: calc(34 * var(--u));
  filter: drop-shadow(0 0 calc(.8 * var(--u)) rgba(255, 170, 70, .95));
}
.hw-etincelle {
  display: block;
  width: calc(2.6 * var(--u));
  height: calc(2.6 * var(--u));
  margin: calc(13.3 * var(--u)) 0 0 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 18%, #ffcf4a 36%, rgba(255, 150, 40, 0) 70%);
  opacity: calc(1 - var(--i) * .1);
  scale: calc(1.1 - var(--i) * .08);
  animation: hw-scintille .35s ease-in-out infinite alternate;
}
@keyframes hw-sorciere {
  0% { transform: translate(calc(-38 * var(--u)), calc(78 * var(--u))); }
  13.4%, 100% { transform: translate(calc(104 * var(--u)), calc(34 * var(--u))); }
}
@keyframes hw-vague {
  from { transform: translateY(calc(-3.5 * var(--u))); }
  to { transform: translateY(calc(3.5 * var(--u))); }
}
@keyframes hw-scintille { to { scale: .45; } }
/* Fantôme : 20 s après la sorcière, monte en ondulant le long de la colonne de gauche,
   puis grossit d'un coup (« Bouh ! ») et s'évanouit */
.hw-fantome {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(14 * var(--u));
  opacity: 0;
  filter: drop-shadow(0 0 calc(1.2 * var(--u)) rgba(220, 210, 255, .7));
  animation: hw-fantome 60s ease-in-out infinite backwards;
  animation-delay: calc(var(--hw-depart, 0s) + 20s);
}
.hw-fantome svg { display: block; transform-origin: 50% 20%; animation: hw-ondule .8s ease-in-out infinite alternate; }
@keyframes hw-fantome {
  0% { opacity: 0; transform: translate(calc(6 * var(--u)), calc(140 * var(--u))) scale(.6); }
  2% { opacity: .75; }
  5.3% { transform: translate(calc(16 * var(--u)), calc(116 * var(--u))) scale(.8); }
  9.3% { transform: translate(calc(7 * var(--u)), calc(90 * var(--u))) scale(.9); }
  12.7% { opacity: .75; transform: translate(calc(16 * var(--u)), calc(64 * var(--u))) scale(1); }
  14% { opacity: .95; transform: translate(calc(14 * var(--u)), calc(52 * var(--u))) scale(1.9); }
  15.3%, 100% { opacity: 0; transform: translate(calc(14 * var(--u)), calc(48 * var(--u))) scale(2.4); }
}
@keyframes hw-ondule {
  from { transform: skewX(-5deg) rotate(-3deg); }
  to { transform: skewX(5deg) rotate(3deg); }
}
/* Apparition (6,5 s à :40), sans fond : les prix restent visibles. Un spectre aux yeux rouges apparaît au loin
   au centre de l'écran, clignote en approchant lentement, puis fonce d'un coup sur les passants avec un flash rouge,
   et disparaît. Par-dessus le message « Fermé » (z-index 20), sous l'écran noir de la nuit (100). */
.hw-peur {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: hw-peur-fond 60s linear infinite backwards;
  animation-delay: calc(var(--hw-depart, 0s) + 40s);
}
@keyframes hw-peur-fond {
  0% { opacity: 0; }
  2%, 10.2% { opacity: 1; }
  10.9%, 100% { opacity: 0; }
}
.hw-spectre {
  position: absolute;
  top: 46%;
  left: 50%;
  width: calc(64 * var(--u));
  opacity: 0;
  transform: translate(-50%, -50%) scale(.02);
  filter: drop-shadow(0 0 calc(3 * var(--u)) rgba(255, 40, 30, .6));
  animation: hw-spectre 60s linear infinite backwards;
  animation-delay: calc(var(--hw-depart, 0s) + 40s);
}
/* Le spectre tremble sans cesse : imperceptible au loin, violent quand il est tout près */
.hw-spectre svg { display: block; animation: hw-tremble .09s steps(2) infinite alternate; }
@keyframes hw-tremble { to { transform: translate(1.5%, -1%) rotate(.8deg); } }
@keyframes hw-spectre {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
  2.5% { opacity: 0; transform: translate(-50%, -50%) scale(.03); }
  3.2% { opacity: .9; }
  4.6% { opacity: .9; }
  4.8% { opacity: .2; }
  5% { opacity: .95; }
  5.6% { opacity: .3; }
  5.7% { opacity: 1; }
  8% { transform: translate(-50%, -50%) scale(.16); animation-timing-function: cubic-bezier(.7, 0, 1, 1); }
  8.45% { transform: translate(-50%, -50%) scale(2.6); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(2.75); }
  10.2% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); }
  10.3%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.02); }
}
.hw-peur-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hw-peur-flash 60s linear infinite backwards;
  animation-delay: calc(var(--hw-depart, 0s) + 40s);
}
@keyframes hw-peur-flash {
  0%, 8.3% { opacity: 0; background: #c00000; }
  8.5% { opacity: .4; background: #c00000; }
  9.4% { opacity: 0; background: #c00000; }
  10.05% { opacity: 0; background: #fff; }
  10.2% { opacity: .5; background: #fff; }
  10.9%, 100% { opacity: 0; background: #fff; }
}

/* Page interne listant les écrans de vitrine (vitrines.html) */
.ecrans { padding: clamp(48px, 8vw, 96px) 0; }
.ecrans-intro { max-width: 40em; color: var(--ink-2); font-size: 1.05rem; }
.ecrans-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin: 32px 0; }
.ecran-lien {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s;
}
.ecran-lien:hover { transform: translateY(-3px); border-color: var(--gold-400); }
.ecran-lien strong { font-family: var(--serif); font-size: 1.8rem; color: var(--navy-800); }
.ecran-lien span:last-child { color: var(--ink-2); font-size: .95rem; }
.ecran-format { font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700); }

/* ==========================================================================
   Vitrine tarifs : écran vertical 4K (vitrine-tarifs.html)
   La page est une « affiche » 9:16. --u = 1 % de sa largeur : tout est dimensionné
   avec, donc le rendu est identique en 1080 × 1920 comme en 2160 × 3840 (4K).
   Sur un écran d'un autre format, l'affiche reste entière et centrée.
   ========================================================================== */

.vt { --u: min(1vw, .5625vh); display: grid; place-items: center; }
.vt-ecran {
  display: flex;
  flex-direction: column;
  gap: calc(1.8 * var(--u));
  width: calc(100 * var(--u));
  height: calc(177.7 * var(--u));
  padding: calc(3.5 * var(--u)) calc(4 * var(--u)) calc(2.6 * var(--u));
}

.vt-head { display: flex; align-items: center; justify-content: space-between; gap: calc(3 * var(--u)); }
.vt-marque { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.vt .v-lingot { width: calc(10 * var(--u)); }
.vt .v-logo { margin: 0; font-size: calc(5.4 * var(--u)); }
.vt .v-slogan { margin: calc(.6 * var(--u)) 0 0; font-size: calc(1.9 * var(--u)); }
.vt-cours {
  display: flex;
  gap: calc(4 * var(--u));
  padding: calc(1.8 * var(--u)) calc(3 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(2 * var(--u));
  background: var(--white);
  box-shadow: var(--shadow);
}
.vt-cours > div { display: flex; flex-direction: column; gap: calc(.6 * var(--u)); }
.vt-heure { align-items: flex-end; }
.vt .v-label { gap: calc(1 * var(--u)); font-size: calc(1.5 * var(--u)); }
.vt .v-label .live-dot { width: var(--u); height: var(--u); }
.vt-val {
  font-size: calc(4 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: var(--navy-800);
  font-variant-numeric: tabular-nums;
}
.vt-val small { margin-left: calc(.4 * var(--u)); font-size: calc(2 * var(--u)); font-weight: 500; color: var(--ink-3); }

/* Cartes : leur hauteur suit leur nombre de lignes, l'ensemble remplit l'écran */
.vt-carte {
  display: flex;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  padding: calc(1.8 * var(--u)) calc(3 * var(--u)) calc(1.2 * var(--u));
  border-radius: calc(2.4 * var(--u));
  color: #fff;
  background:
    radial-gradient(calc(70 * var(--u)) calc(40 * var(--u)) at 100% 0%, rgba(216, 180, 100, .16), transparent 60%),
    var(--navy-900);
  box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(16, 22, 48, .22);
}
.vt-rachat { flex: 1 1 0; }

/* Diaporama : les cartes sont superposées, une seule visible ; fondu enchaîné de 1,2 s */
.vt-rotation { position: relative; flex: 1 1 0; min-height: 0; }
.vt-diapo {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.vt-diapo.is-active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }
/* Barre dorée qui se remplit pendant l'affichage de la carte */
.vt-progression {
  flex: none;
  height: calc(.5 * var(--u));
  margin-top: calc(1 * var(--u));
  overflow: hidden;
  border-radius: var(--u);
  background: rgba(255, 255, 255, .1);
}
.vt-progression::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
}
.vt-diapo.is-active .vt-progression::after { animation: vt-progression var(--duree, 15s) linear forwards; }
@keyframes vt-progression { to { transform: scaleX(1); } }
.vt-carte h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  margin: 0 0 calc(.6 * var(--u));
  font-size: calc(5 * var(--u));
  font-weight: 700;
  color: var(--gold-300);
}
.vt-carte h2 span { font-family: var(--sans); font-size: calc(1.8 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .62); }

.vt-table { flex: 1; width: 100%; height: 100%; border-collapse: collapse; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vt-table thead th {
  padding: calc(.8 * var(--u)) 0 calc(.8 * var(--u)) calc(2 * var(--u));
  border-bottom: 1px solid var(--line-dark);
  font-size: calc(1.6 * var(--u));
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: right;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}
.vt-table thead th:first-child { padding-left: 0; text-align: left; }
.vt-table thead th:nth-child(2) { color: var(--gold-300); }
.vt-table tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .08); }
.vt-table tbody th {
  padding: calc(.2 * var(--u)) 0;
  font-size: calc(3.3 * var(--u));
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.vt-table small { line-height: 1.2; }
.vt-table tbody th small { display: block; font-size: calc(1.6 * var(--u)); font-weight: 400; color: rgba(255, 255, 255, .58); }
.vt-lingots tbody th small { display: none; }
.vt-table td {
  padding: calc(.2 * var(--u)) 0 calc(.2 * var(--u)) calc(2 * var(--u));
  font-size: calc(3.6 * var(--u));
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.vt-table td small { display: block; margin-top: calc(.2 * var(--u)); font-size: calc(1.6 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .58); }
.vt-table td.offre--achat small { color: var(--gold-300); }
.vt-table .attente { color: rgba(255, 255, 255, .45); font-weight: 400; }
.vt .produit { display: flex; align-items: center; gap: calc(1.8 * var(--u)); }
.vt .vignette { display: grid; width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); }
.vt .vignette img { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); }

/* Une seule carte à l'écran : chiffres plus grands */
.vt-lingots tbody th { font-size: calc(4.6 * var(--u)); }
/* « 1 once » visible, « Or fin 999,9 ‰ » (déjà dans le titre) masqué */
.vt-lingots tbody th small:not(:last-child) { display: block; font-size: calc(2 * var(--u)); }
.vt-lingots td { font-size: calc(5 * var(--u)); }
.vt-pieces tbody th { font-size: calc(3.6 * var(--u)); }
.vt-pieces td { padding-left: calc(3 * var(--u)); font-size: calc(4 * var(--u)); }
.vt-lingots td small, .vt-pieces td small { font-size: calc(2.1 * var(--u)); }
.vt-pieces tbody th small { font-size: calc(2 * var(--u)); }
.vt-pieces .vignette { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.vt-pieces .vignette img { width: calc(6.8 * var(--u)); height: calc(6.8 * var(--u)); }
.vt-diapo thead th { font-size: calc(1.9 * var(--u)); }

/* Écran « Vendre son or » : 8 titres en très grand, prix au gramme sur la même ligne */
.vt-rachat tbody th { font-size: calc(4.6 * var(--u)); }
.vt-rachat tbody th small { font-size: calc(2 * var(--u)); }
.vt-rachat td { font-size: calc(5.4 * var(--u)); }
.vt-rachat td small { display: inline; margin-left: calc(.6 * var(--u)); font-size: calc(2.4 * var(--u)); }

/* Bon à savoir, sous le tableau de rachat */
.vt-infos-carte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(2.4 * var(--u));
  padding: calc(2.4 * var(--u)) calc(3 * var(--u));
  border: 1px solid var(--line);
  border-radius: calc(2.4 * var(--u));
  background: var(--white);
  box-shadow: var(--shadow);
}
.vt-infos-carte div { display: flex; flex-direction: column; gap: calc(.8 * var(--u)); }
.vt-infos-carte .icon { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); color: var(--gold-600); }
.vt-infos-carte b { font-size: calc(2.2 * var(--u)); color: var(--navy-800); line-height: 1.2; }
.vt-infos-carte span { font-size: calc(1.7 * var(--u)); color: var(--ink-2); line-height: 1.3; }

.vt-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(3 * var(--u));
  font-size: calc(1.45 * var(--u));
  color: var(--ink-3);
}
.vt-pied p { margin: 0; }
.vt-pied p:first-child { margin-bottom: calc(.4 * var(--u)); font-weight: 600; color: var(--navy-700); }

/* Minuteur : compte à rebours jusqu'à la prochaine actualisation du cours (2 min sur les vitrines) */
.v-minuteur {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 1vmin;
  padding: .8vmin 1.8vmin .8vmin 1vmin;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow);
  font-size: 1.7vmin;
  color: var(--ink-2);
  white-space: nowrap;
}
.v-minuteur b { color: var(--navy-800); font-variant-numeric: tabular-nums; }
/* Anneau doré qui se remplit pendant l'attente */
.v-minuteur-anneau {
  width: 2.8vmin;
  height: 2.8vmin;
  border-radius: 50%;
  background: conic-gradient(var(--gold-500) calc(var(--progression, 0) * 360deg), var(--line) 0);
  -webkit-mask: radial-gradient(circle, transparent 50%, #000 52%);
  mask: radial-gradient(circle, transparent 50%, #000 52%);
}