/* =========================================================
   ERYX — Homepage (maquettes Homepage 1440 et M-Home 390)
   Coordonnées = maquette, relatives au haut de chaque écran.
   ========================================================= */

/* ---------- 1 · Promesse ---------- */
.hero__title {
  position: absolute; left: 0; right: 0; top: calc(38 * var(--u)); margin: 0; text-align: center;
  font-size: calc(63 * var(--u)); line-height: calc(66 * var(--u)); letter-spacing: -0.005em; color: var(--text);
}
.hero__rule {
  position: absolute; left: calc(661 * var(--u)); top: calc(214 * var(--u)); width: calc(117 * var(--u)); height: 1.5px;
  background: linear-gradient(90deg, rgba(100, 98, 99, 0) 0%, #6E6B6B 25%, #B09E9E 52%, #6B5258 78%, rgba(107, 82, 88, 0) 100%);
}
.hero__base {
  position: absolute; left: 0; right: 0; top: calc(242 * var(--u)); margin: 0; text-align: center;
  font-size: calc(11 * var(--u)); font-weight: 400; letter-spacing: 0.52em; color: #9A9696; line-height: normal;
}

/* ---------- 2 · Avant / après ---------- */
.duo.only-d { position: absolute; left: calc(120 * var(--u)); top: calc(11 * var(--u)); width: calc(1202 * var(--u)); height: calc(496 * var(--u)); }
.duo.only-d .ba__av { left: 0; top: 0; width: calc(595 * var(--u)); height: calc(496 * var(--u)); }
.duo.only-d .ba__ap { left: calc(607 * var(--u)); top: 0; width: calc(595 * var(--u)); height: calc(496 * var(--u)); }
.ba__lbl { top: calc(28 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 400; letter-spacing: 0.16em; line-height: normal; }
.ba__lbl--av { left: calc(38 * var(--u)); color: #1A1411; }
.ba__lbl--ap { right: calc(40 * var(--u)); color: var(--text); }
.duo.only-d .ba__dev { top: calc(84 * var(--u)); width: calc(545 * var(--u)); height: calc(344 * var(--u)); }
.duo.only-d .ba__av .ba__dev { left: calc(20 * var(--u)); }
.duo.only-d .ba__ap .ba__dev { left: calc(30 * var(--u)); }
.ba__ctas .btn-red { position: absolute; left: calc(518 * var(--u)); top: calc(545 * var(--u)); }
.ba__ctas .btn-metal { position: absolute; left: calc(574 * var(--u)); top: calc(631 * var(--u)); }

/* ---------- 3 · Citation ivoire ---------- */
.quote {
  position: absolute; left: calc(166 * var(--u)); top: calc(21 * var(--u)); width: calc(1108 * var(--u)); height: calc(436 * var(--u)); margin: 0;
  border-radius: calc(32 * var(--u)); background: linear-gradient(180deg, #F6F2EB 0%, #ECE6DC 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(52 * var(--u));
}
.quote__mark { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.quote__txt { margin: calc(28 * var(--u)) 0 0; font-size: calc(44 * var(--u)); line-height: calc(52 * var(--u)); font-weight: 300; letter-spacing: -0.02em; color: #1D1A18; }
.quote__txt span { color: #8E1F2E; }
.quote__sub { margin: calc(22 * var(--u)) 0 0; font-size: calc(19 * var(--u)); line-height: calc(31 * var(--u)); font-weight: 400; color: #6B615B; }

/* ---------- 4 · Étapes ---------- */
.steps { list-style: none; margin: 0; padding: 0; }
.steps.only-d { position: absolute; left: calc(72 * var(--u)); top: calc(26 * var(--u)); width: calc(1290 * var(--u)); height: calc(277 * var(--u)); }
.steps.only-d > li { top: 0; width: calc(315 * var(--u)); height: calc(277 * var(--u)); }
.steps.only-d > li:nth-child(1) { left: 0; }
.steps.only-d > li:nth-child(2) { left: calc(325 * var(--u)); }
.steps.only-d > li:nth-child(3) { left: calc(650 * var(--u)); }
.steps.only-d > li:nth-child(4) { left: calc(975 * var(--u)); }
.steps.only-d .st__n { left: calc(44 * var(--u)); top: calc(42 * var(--u)); font-size: calc(28 * var(--u)); line-height: 1; }
.steps.only-d .st__t { left: calc(44 * var(--u)); top: calc(88 * var(--u)); margin: 0; font-size: calc(27 * var(--u)); line-height: 1.15; white-space: nowrap; }
.steps.only-d .st__r { left: calc(44 * var(--u)); top: calc(141 * var(--u)); width: calc(56 * var(--u)); height: 1.5px; }
.steps.only-d .st__d { left: calc(44 * var(--u)); top: calc(162 * var(--u)); width: calc(240 * var(--u)); margin: 0; font-size: calc(16.5 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 400; }
.steps [data-tone="iv"] .st__n, .steps [data-tone="iv"] .st__t { color: #17120F; }
.steps [data-tone="iv"] .st__r { background: #8E2A36; }
.steps [data-tone="iv"] .st__d { color: #4A4440; }
.steps [data-tone="rd"] .st__n, .steps [data-tone="rd"] .st__t { color: #FBF8F6; }
.steps [data-tone="rd"] .st__r { background: #D9A9AF; }
.steps [data-tone="rd"] .st__d { color: #EAD9D9; }

/* ---------- Pied de page ---------- */
.foot {
  position: relative; height: calc(120 * var(--u) + var(--bh, 0px)); scroll-snap-align: end;
  font-size: calc(10 * var(--u)); font-weight: 400; letter-spacing: 0.42em; line-height: calc(19 * var(--u)); color: var(--grey);
}
.foot__l { position: absolute; left: calc(73 * var(--u)); top: calc(30 * var(--u)); }
.foot__r { position: absolute; right: calc(72 * var(--u)); top: calc(30 * var(--u)); text-align: right; }
.foot__c { position: absolute; left: 50%; top: calc(30 * var(--u)); width: calc(400 * var(--u)); margin-left: calc(-200 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(22 * var(--u)); }
.foot__c span { display: block; width: calc(158 * var(--u)); height: 1px; background: linear-gradient(90deg, rgba(150, 145, 145, 0), rgba(150, 145, 145, 0.5)); }
.foot__c span:last-child { background: linear-gradient(90deg, rgba(150, 145, 145, 0.5), rgba(150, 145, 145, 0)); }
.foot__c svg { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }

/* ---------- Arcs (un par écran, entier dans l'écran) ---------- */
.arc--h1 { width: min(716px, 78vh); aspect-ratio: 1; left: 83.5vw; top: 50%; translate: 0 -50%; border-color: rgba(210, 52, 70, 0.9); box-shadow: 0 0 20px rgba(200, 36, 54, 0.55), inset 0 0 40px rgba(170, 26, 44, 0.45), inset 0 0 130px rgba(100, 12, 24, 0.35); -webkit-mask-image: linear-gradient(200deg, rgba(0, 0, 0, 0.2) 18%, #000 58%); mask-image: linear-gradient(200deg, rgba(0, 0, 0, 0.2) 18%, #000 58%); }
.arc--h2 { width: min(604px, 74vh); aspect-ratio: 1; left: 84vw; top: 50%; translate: 0 -50%; -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.25) 70%); mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.25) 70%); }
.arc--h3 { width: min(660px, 78vh); aspect-ratio: 1; left: -26.3vw; top: 50%; translate: 0 -50%; border-color: rgba(210, 52, 70, 0.8); box-shadow: 0 0 20px rgba(200, 36, 54, 0.45), inset 0 0 40px rgba(170, 26, 44, 0.35), inset 0 0 130px rgba(100, 12, 24, 0.28); -webkit-mask-image: linear-gradient(270deg, #000 30%, rgba(0, 0, 0, 0.2) 75%); mask-image: linear-gradient(270deg, #000 30%, rgba(0, 0, 0, 0.2) 75%); }
.arc--h4 { width: min(604px, 74vh); aspect-ratio: 1; left: 82vw; top: 50%; translate: 0 -50%; -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.25) 70%); mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.25) 70%); }

/* =========================================================
   MOBILE (M-Home)
   ========================================================= */
@media (max-width: 699px) {
  .hero__title { left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(22 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(38 * var(--u)); letter-spacing: -0.01em; }
  .hero__rule { left: 50%; top: calc(186 * var(--u)); width: calc(80 * var(--u)); margin-left: calc(-40 * var(--u)); background: linear-gradient(90deg, rgba(100, 98, 99, 0), #B09E9E, rgba(107, 82, 88, 0)); }
  .hero__base { top: calc(202 * var(--u)); font-size: calc(9.5 * var(--u)); letter-spacing: 0.4em; line-height: calc(17 * var(--u)); }

  .duo.only-m .ba__av { left: calc(20 * var(--u)); top: calc(12 * var(--u)); width: calc(350 * var(--u)); height: calc(300 * var(--u)); z-index: 2; }
  .duo.only-m .ba__ap { left: calc(20 * var(--u)); top: calc(322 * var(--u)); width: calc(350 * var(--u)); height: calc(300 * var(--u)); z-index: 1; }
  .ba__lbl { font-size: calc(13 * var(--u)); }
  .ba__lbl--av { left: calc(24 * var(--u)); top: calc(20 * var(--u)); }
  .ba__lbl--ap { right: calc(24 * var(--u)); top: calc(26 * var(--u)); }
  .duo.only-m .ba__dev { left: calc(14 * var(--u)); width: calc(322 * var(--u)); height: calc(220 * var(--u)); }
  .duo.only-m .ba__av .ba__dev { top: calc(50 * var(--u)); }
  .duo.only-m .ba__ap .ba__dev { top: calc(64 * var(--u)); }
  .ba__ctas .btn-red { left: calc(20 * var(--u)); top: calc(656 * var(--u)); }
  .ba__ctas .btn-metal { left: calc(60 * var(--u)); top: calc(728 * var(--u)); }

  .quote { left: calc(20 * var(--u)); top: calc(20 * var(--u)); width: calc(350 * var(--u)); height: calc(410 * var(--u)); border-radius: calc(24 * var(--u)); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45); padding: calc(40 * var(--u)) calc(26 * var(--u)) 0; }
  .quote__mark { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .quote__txt { margin-top: calc(22 * var(--u)); font-size: calc(28 * var(--u)); line-height: calc(34 * var(--u)); }
  .quote__sub { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(24 * var(--u)); }

  .steps.only-m > li { left: calc(20 * var(--u)); width: calc(350 * var(--u)); height: calc(196 * var(--u)); }
  .steps.only-m > li:nth-child(1) { top: calc(18 * var(--u)); z-index: 6; }
  .steps.only-m > li:nth-child(2) { top: calc(222 * var(--u)); z-index: 5; }
  .steps.only-m > li:nth-child(3) { top: calc(426 * var(--u)); z-index: 4; }
  .steps.only-m > li:nth-child(4) { top: calc(630 * var(--u)); z-index: 3; }
  .steps.only-m .st__n { left: calc(28 * var(--u)); top: calc(34 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 300; line-height: normal; }
  .steps.only-m .st__t { left: calc(76 * var(--u)); top: calc(34 * var(--u)); margin: 0; font-size: calc(22 * var(--u)); font-weight: 300; line-height: normal; }
  .steps.only-m .st__r { left: calc(28 * var(--u)); top: calc(78 * var(--u)); width: calc(46 * var(--u)); height: 1.5px; }
  .steps.only-m .st__d { left: calc(28 * var(--u)); top: calc(94 * var(--u)); width: calc(296 * var(--u)); margin: 0; font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); }

  .foot { height: calc(150 * var(--u) + var(--bh, 0px)); font-size: calc(9.5 * var(--u)); letter-spacing: 0.4em; line-height: calc(18 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); padding-top: calc(20 * var(--u)); text-align: center; }
  .foot__l, .foot__r, .foot__c { position: static; margin: 0; width: auto; }
  .foot__c { order: -1; gap: calc(16 * var(--u)); }
  .foot__c span { width: calc(90 * var(--u)); }
  .foot__c svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .foot__r { text-align: center; }

  .arc { box-shadow: 0 0 18px rgba(200, 36, 54, 0.45), inset 0 0 30px rgba(170, 26, 44, 0.35); }
  .arc--h1 { width: calc(300 * var(--k) * 1px); left: calc(100vw - 140 * var(--k) * 1px); top: calc(var(--hh) + 8px); translate: none; border-color: rgba(210, 52, 70, 0.85); -webkit-mask-image: linear-gradient(200deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); mask-image: linear-gradient(200deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); }
  .arc--h2 { width: calc(300 * var(--k) * 1px); left: calc(100vw - 110 * var(--k) * 1px); top: 50%; border-color: rgba(210, 52, 70, 0.7); -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); }
  .arc--h3 { width: calc(320 * var(--k) * 1px); left: calc(-200 * var(--k) * 1px); top: 50%; border-color: rgba(210, 52, 70, 0.7); -webkit-mask-image: linear-gradient(270deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); mask-image: linear-gradient(270deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); }
  .arc--h4 { width: calc(300 * var(--k) * 1px); left: calc(100vw - 130 * var(--k) * 1px); top: 50%; border-color: rgba(210, 52, 70, 0.6); -webkit-mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); mask-image: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, 0.15) 75%); }
}