/* Deck Le Magellan · système Escale · mobile-first scroll, slides au desktop, imprimable */
:root {
  --nuit: #0E1826; --nuit-2: #132133; --nuit-3: #0A111C;
  --laiton: #B08D3E; --laiton-clair: #D3B56A;
  --ivoire: #F2EDE4; --brume: #93A0B3; --pourpre: #8A2D52; --wa: #1EBE57;
  --serif: "Marcellus", serif; --sans: "Outfit", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--nuit); color: var(--ivoire); font-family: var(--sans); font-weight: 300; }
img { max-width: 100%; display: block; }

.slide { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 64px 6vw; position: relative; overflow: hidden; border-bottom: 1px solid rgba(242,237,228,.06); }
.slide .inner { max-width: 1080px; margin: 0 auto; width: 100%; }
.kicker { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--laiton-clair); }
.slide h2 { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); font-weight: 400; line-height: 1.15; margin-top: 16px; max-width: 24ch; }
.slide .lede { margin-top: 18px; font-size: 15.5px; line-height: 1.75; color: var(--brume); max-width: 60ch; }
.gold { color: var(--laiton-clair); }
.num { position: absolute; top: 26px; right: 6vw; font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: rgba(147,160,179,.6); }

.cover { text-align: center; }
.cover .compass { width: 74px; height: 74px; margin: 0 auto 26px; }
.cover h1 { font-family: var(--serif); font-size: clamp(36px, 5.6vw, 62px); font-weight: 400; line-height: 1.12; max-width: 20ch; margin: 18px auto 0; }
.cover .sub { margin-top: 24px; color: var(--brume); font-size: 14px; letter-spacing: .06em; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 38px; }
.rcard { background: var(--nuit-2); border: 1px solid rgba(242,237,228,.09); border-radius: 8px; overflow: hidden; }
.rcard .shot { height: 300px; overflow: hidden; border-bottom: 1px solid rgba(242,237,228,.08); background: var(--nuit-3); }
.rcard .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rcard .cap { padding: 16px 18px; }
.rcard .cap b { display: block; font-family: var(--serif); font-weight: 400; font-size: 16.5px; margin-bottom: 6px; }
.rcard .cap p { font-size: 13px; color: var(--brume); line-height: 1.6; }
.punch { margin-top: 34px; font-family: var(--serif); font-size: clamp(19px, 2.4vw, 25px); color: var(--ivoire); border-left: 2px solid var(--laiton); padding-left: 18px; max-width: 32ch; line-height: 1.4; }

.list { margin-top: 30px; display: grid; gap: 14px; max-width: 640px; }
.list .it { display: flex; gap: 14px; align-items: baseline; font-size: 15px; line-height: 1.65; color: var(--brume); }
.list .it::before { content: "◆"; color: var(--laiton); font-size: 10px; }
.list .it b { color: var(--ivoire); font-weight: 400; }

.duo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; margin-top: 30px; }
.frame { border: 1px solid rgba(176,141,62,.4); border-radius: 8px; overflow: hidden; background: var(--nuit-3); }
.frame img { width: 100%; height: 460px; object-fit: cover; object-position: top; }
.frame.tall img { height: 560px; }
.legend { font-size: 12px; color: var(--brume); letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-top: 1px solid rgba(242,237,228,.08); }

.steps { counter-reset: s; display: grid; gap: 0; margin-top: 34px; max-width: 620px; }
.step { counter-increment: s; display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid rgba(242,237,228,.08); }
.step::before { content: counter(s, decimal-leading-zero); font-family: var(--serif); color: var(--laiton-clair); font-size: 20px; }
.step div b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; }
.step div p { font-size: 13.5px; color: var(--brume); margin-top: 4px; line-height: 1.6; }

.offer { display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; margin-top: 36px; }
.ocard { background: var(--nuit-2); border: 1px solid rgba(176,141,62,.45); border-radius: 10px; padding: 30px; }
.ocard.option { border-style: dashed; border-color: rgba(242,237,228,.25); }
.ocard .tag { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--laiton-clair); }
.ocard h3 { font-family: var(--serif); font-size: 23px; font-weight: 400; margin-top: 10px; }
.ocard ul { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.ocard li { font-size: 13.5px; color: var(--brume); padding-left: 16px; position: relative; line-height: 1.55; }
.ocard li::before { content: "·"; position: absolute; left: 0; color: var(--laiton); }
.price-line { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(242,237,228,.1); display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; }
.fill { display: inline-block; min-width: 130px; border-bottom: 2px dashed var(--pourpre); color: var(--laiton-clair); font-family: var(--serif); font-size: 21px; text-align: center; padding: 0 8px 2px; }
.price-line span.unit { font-size: 12px; color: var(--brume); letter-spacing: .08em; text-transform: uppercase; }
.rationale { margin-top: 26px; font-size: 13.5px; color: var(--brume); font-style: italic; max-width: 56ch; }

.cta { text-align: center; }
.btn-wa { display: inline-flex; align-items: center; gap: 12px; background: var(--wa); color: #fff; padding: 18px 34px; border-radius: 6px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; text-decoration: none; margin-top: 34px; }
.cta .small { margin-top: 18px; font-size: 13px; color: var(--brume); }
.footer-note { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(147,160,179,.55); }

@media (max-width: 860px) {
  .duo, .offer { grid-template-columns: 1fr; }
  .frame img, .frame.tall img { height: 380px; }
  .rcard .shot { height: 230px; }
  .num { display: none; }
}
@media print {
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .slide { min-height: auto; page-break-after: always; padding: 40px; }
  .btn-wa { color: #fff; }
}