/* ==========================================================================
   ARIANE YACHTING, site vitrine V2
   Overridé sur le Design System « 7 Juillet » (extrait de l'app) :
   Inter (UI) + Cormorant Garamond italique (éditorial) + JetBrains Mono (méta)
   Ink #0D1B2A · Navy #0B1726/#0A1520 · Cream #F8F7F5 · Light #F0EBE0
   Gold #C9A84C unique accent · coins 12–18px · pilules 999px · ease(.2,.8,.2,1)
   Mêmes classes que v1, seul le design change.
   ========================================================================== */

:root{
  --ink:#0B1726;          /* navy, fonds sombres (sections héro) */
  --ink-cta:#0D1B2A;      /* ink, CTA sombre, texte principal */
  --ink-soft:#102132;     /* carte posée sur navy */
  --ivory:#F8F7F5;        /* cream, fond global */
  --ivory-deep:#F0EBE0;   /* light, surfaces chaudes */
  --gold:#C9A84C;
  --gold-dim:#94793B;     /* or lisible sur cream */
  --night:#0A1520;        /* navy2, footer, CTA final */
  --t-dark:#F2EFE8;       /* texte sur navy */
  --t-light:#0D1B2A;      /* texte sur cream */
  --m-dark:#93A0B0;       /* muted sur navy */
  --m-light:#5B6472;      /* muted sur cream */
  --line:#E5E1D8;
  --line-dark:rgba(242,239,232,.12);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --sh-subtle:0 1px 0 rgba(0,0,0,0.02);
  --sh-card:0 8px 20px rgba(13,27,42,0.16);
  --sh-cta-dark:0 10px 24px rgba(13,27,42,0.22);
  --sh-cta-gold:0 10px 24px rgba(201,168,76,0.35);
  --wrap:1200px;
  --gut:24px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.65;
  color:var(--t-light);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.page-dark{ background:var(--ink); color:var(--t-dark); }

::selection{ background:rgba(201,168,76,.30); }

img{ display:block; max-width:100%; }

a{ color:inherit; text-decoration:none; }
p a, .rich a{ color:var(--gold-dim); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sec-dark p a{ color:var(--gold); }
p a:hover, .rich a:hover{ color:var(--t-light); }
.sec-dark p a:hover{ color:var(--t-dark); }

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

/* ---------- typographie ----------
   Éditorial (displays, citations) : Cormorant Garamond ITALIQUE 500.
   UI (titres de cartes, corps, labels) : Inter. */
h1,h2,.serif{ font-family:var(--serif); font-style:italic; font-weight:500; letter-spacing:-0.01em; }
h3{ font-family:var(--sans); font-weight:600; letter-spacing:-0.02em; }
.d-xl{ font-size:clamp(44px, 9.4vw, 88px); line-height:1.02; }
.d-l { font-size:clamp(34px, 5.6vw, 56px); line-height:1.06; }
.d-m { font-size:clamp(26px, 3.4vw, 34px); line-height:1.25; }
.lead{ font-size:clamp(16.5px, 1.9vw, 18.5px); line-height:1.65; font-weight:400; }
.small{ font-size:14px; }
.caption{ font-size:12.5px; color:var(--m-light); }
.sec-dark .caption{ color:var(--m-dark); }
em{ font-style:italic; }

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--gold-dim); display:block; margin-bottom:20px;
}
.sec-dark .eyebrow, .page-dark .hero .eyebrow{ color:var(--gold); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut); position:relative; z-index:3; }
.wrap-narrow{ max-width:820px; }
.wrap-text{ max-width:68ch; }

.sec{ position:relative; padding:88px 0; }
.sec-dark{ background:var(--ink); color:var(--t-dark); }
.sec-light{ background:var(--ivory); color:var(--t-light); }
.sec-deep{ background:var(--ivory-deep); }
@media (min-width:900px){ .sec{ padding:132px 0; } }

.sec-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%, rgba(20,40,62,.55), transparent 60%);
  opacity:.7;
}
/* Sections sombres consécutives : le voile ne se joue qu'une fois, en tête de la
   suite. Sinon le dégradé redémarre à chaque section et crée une cassure de ton
   horizontale visible (le fond n'est continu que si le voile ne se répète pas). */
.sec-dark + .sec-dark::before{ content:none; }
.sec-dark > *{ position:relative; }

.hairline{ border:none; border-top:1px solid var(--line); }
.sec-dark .hairline{ border-top-color:var(--line-dark); }

/* ---------- boutons / CTA, pilules DS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:0;
  text-transform:none; line-height:1;
  height:50px; padding:0 28px; border-radius:999px; cursor:pointer;
  border:1px solid transparent;
  transition:transform 80ms ease, background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:active{ transform:scale(.98); }
.btn .arr{ font-size:1.05em; line-height:0; transition:transform .2s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }

/* CTA or, action mise en avant (solide, ombre or) */
.btn-gold{ background:var(--gold); color:var(--ink-cta); border-color:var(--gold); box-shadow:var(--sh-cta-gold); }
.btn-gold:hover{ background:#D4B55C; }

/* CTA sombre, sur fond clair */
.btn-ink{ background:var(--ink-cta); color:#fff; border-color:var(--ink-cta); box-shadow:var(--sh-cta-dark); }
.btn-ink:hover{ background:#16283C; }

/* secondaire : lien texte discret (SkipLink) */
.btn-ghost{
  height:50px; padding:0 10px; border:none; background:none; box-shadow:none;
  color:var(--m-dark); font-weight:500;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(147,160,176,.4);
  transition:color .2s var(--ease), transform 80ms ease;
}
.btn-ghost:hover{ color:var(--t-dark); text-decoration-color:var(--gold); }
.sec-light .btn-ghost, .on-light .btn-ghost{ color:var(--m-light); }
.sec-light .btn-ghost:hover{ color:var(--t-light); }

/* lien fléché, label DS */
.link-arrow{
  font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--gold-dim); display:inline-flex; gap:9px; align-items:center;
}
.sec-dark .link-arrow, .hcard .link-arrow{ color:var(--gold); }
.link-arrow .arr{ font-size:1.15em; transition:transform .2s var(--ease); }
.link-arrow:hover .arr{ transform:translateX(3px); }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }

/* ---------- header ---------- */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.hd-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
@media (min-width:900px){ .hd-in{ height:76px; } }

/* wordmark texte, Ariane • YACHTING */
.wordmark{ display:inline-flex; align-items:baseline; white-space:nowrap; color:var(--t-dark); }
.wordmark em{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:25px; letter-spacing:-0.5px; }
.wordmark i{ font-style:normal; color:var(--gold); margin:0 7px; font-size:15px; }
.wordmark span{ font-family:var(--sans); font-style:normal; font-weight:600; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--m-dark); }
.hd.on-light .wordmark, .hd.scrolled .wordmark{ color:var(--t-light); }
.hd.on-light .wordmark span, .hd.scrolled .wordmark span{ color:var(--m-light); }
.hd.menu-open .wordmark{ color:var(--t-dark); }
.hd.menu-open .wordmark span{ color:var(--m-dark); }

.hd-nav{ display:none; }
@media (min-width:1000px){
  .hd-nav{ display:flex; gap:22px; }
  .hd-nav a{
    font-size:13px; font-weight:500; letter-spacing:.01em;
    color:var(--t-dark); opacity:.85; padding:6px 0; position:relative;
  }
  .hd-nav a::after{
    content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
    background:var(--gold); border-radius:2px; transform:scaleX(0); transform-origin:left;
    transition:transform .25s var(--ease);
  }
  .hd-nav a:hover{ opacity:1; }
  .hd-nav a:hover::after, .hd-nav a[aria-current="page"]::after{ transform:scaleX(1); }
  .hd-nav a[aria-current="page"]{ opacity:1; font-weight:600; }
}

.hd-right{ display:flex; align-items:center; gap:16px; }
.btn-compact{ height:42px; padding:0 20px; font-size:13.5px; }
.hd .btn-compact{ display:none; }
@media (min-width:640px){ .hd .btn-compact{ display:inline-flex; } }

.hd-burger{
  width:44px; height:44px; margin-right:-10px; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px;
}
@media (min-width:1000px){ .hd-burger{ display:none; } }
.hd-burger span{ display:block; width:24px; height:1.5px; border-radius:2px; background:var(--t-dark); transition:transform .25s var(--ease), opacity .25s; }
.hd-burger[aria-expanded="true"] span:first-child{ transform:translateY(4.25px) rotate(45deg); }
.hd-burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.25px) rotate(-45deg); }

.hd.on-light .hd-nav a, .hd.scrolled .hd-nav a{ color:var(--t-light); }
.hd.on-light .hd-burger span, .hd.scrolled .hd-burger span{ background:var(--ink-cta); }
.hd.scrolled{
  background:rgba(248,247,245,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), var(--sh-subtle);
}
.hd.menu-open{ background:transparent; box-shadow:none; }
.hd.menu-open .hd-nav a{ color:var(--t-dark); }
.hd.menu-open .hd-burger span{ background:var(--t-dark); }

/* logo signature cursif (image) — bascule ivoire (fond sombre) / encre (fond clair) */
.hd-logo, .ft-logo{ display:inline-flex; align-items:center; }
.hd-logo img{ height:46px; width:auto; display:block; }
/* en-tête : ivoire par défaut (hero sombre), encre quand la barre passe en clair */
.hd-logo .logo-ink{ display:none; }
.hd.on-light .hd-logo .logo-ivory, .hd.scrolled .hd-logo .logo-ivory{ display:none; }
.hd.on-light .hd-logo .logo-ink, .hd.scrolled .hd-logo .logo-ink{ display:block; }
/* pied de page : toujours sombre -> toujours ivoire */
.ft-logo img{ height:53px; width:auto; display:block; }
.ft-logo .logo-ink{ display:none; }

/* menu mobile plein écran */
.menu{
  position:fixed; inset:0; z-index:90; background:var(--night); color:var(--t-dark);
  display:flex; flex-direction:column; justify-content:center; padding:96px var(--gut) 48px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.menu.open{ opacity:1; visibility:visible; }
.menu nav{ display:flex; flex-direction:column; gap:6px; }
.menu nav a{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(30px,8vw,40px); line-height:1.35;
  color:var(--t-dark); opacity:0; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), color .2s;
}
.menu.open nav a{ opacity:1; transform:none; }
.menu nav a:hover, .menu nav a[aria-current="page"]{ color:var(--gold); }
.menu .menu-foot{ margin-top:48px; display:flex; flex-direction:column; gap:16px; align-items:flex-start; }

/* ---------- héros ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--t-dark); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-veil{ position:absolute; inset:0;
  background:linear-gradient(185deg, rgba(10,21,32,.58) 0%, rgba(10,21,32,.14) 42%, rgba(10,21,32,.80) 100%);
}
.hero .wrap{ padding-bottom:clamp(56px, 10vh, 120px); padding-top:140px; width:100%; }
.hero-sub{ margin-top:26px; max-width:46ch; font-size:clamp(16px,1.9vw,18.5px); color:rgba(242,239,232,.92); }
.hero .cta-row{ margin-top:38px; }

.hero-short{ min-height:72svh; }
.hero-light{
  background:var(--ivory); color:var(--t-light); min-height:auto;
  padding-top:170px; padding-bottom:0;
}

/* révélation de lignes du H1 */
.hl{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hl .hl-in{ display:block; transform:translateY(112%); }
body.loaded .hl .hl-in{ transform:none; transition:transform .9s var(--ease); }
body.loaded .hl:nth-child(2) .hl-in{ transition-delay:.1s; }
body.loaded .hl:nth-child(3) .hl-in{ transition-delay:.2s; }
.hero-media img{ transform:scale(1.04); }
body.loaded .hero-media img{ transform:scale(1); transition:transform 2.4s var(--ease); }

/* ---------- révélations au scroll, fadeSlide DS ---------- */
.rv{ opacity:0; transform:translateY(8px); }
.rv.in{ opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:var(--d, 0s); }

@media (prefers-reduced-motion: reduce){
  .rv, .rv.in{ opacity:1; transform:none; transition:none; }
  .hl .hl-in, body.loaded .hl .hl-in{ transform:none; transition:none; }
  .hero-media img, body.loaded .hero-media img{ transform:none; transition:none; }
}

/* ---------- fil d'or ---------- */
.fil-svg{ position:absolute; top:0; left:0; width:100%; pointer-events:none; z-index:4; overflow:visible; }
.fil-svg .fil-path{ fill:none; stroke:var(--gold); stroke-width:1.3; opacity:.55; vector-effect:non-scaling-stroke; }
.fil-svg .fil-node{ fill:var(--gold); opacity:0; transition:opacity .4s var(--ease); }
.fil-svg .fil-node.on{ opacity:.9; }
.fil-svg .fil-end{ r:3.5; }
@media (prefers-reduced-motion: reduce){
  .fil-svg .fil-path{ stroke-dashoffset:0 !important; }
  .fil-svg .fil-node{ opacity:.9; }
}

/* ---------- footer ---------- */
/* Le pied partage le bleu des sections sombres : sa démarcation est le filet
   ci-dessous, pas un écart de ton. Un « presque pareil » se lit comme un défaut
   de rendu, jamais comme une intention — cf. .ctab et .sec-dark + .sec-dark. */
.ft{ background:var(--ink); color:var(--t-dark); padding:72px 0 40px; position:relative; }
.ft::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-dark); }
.ft .wrap{ display:flex; flex-direction:column; gap:44px; }
.ft-top{ display:flex; flex-direction:column; gap:32px; }
@media (min-width:900px){ .ft-top{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.ft .wordmark em{ font-size:30px; }
.ft-tag{ margin-top:14px; font-size:13.5px; color:var(--m-dark); max-width:34ch; }
.ft-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.ft-col{ display:flex; flex-direction:column; gap:10px; min-width:130px; }
.ft-col strong{ font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.ft-col a{ font-size:14px; color:var(--t-dark); opacity:.78; }
.ft-col a:hover{ opacity:1; color:var(--gold); }
.ft-col .ft-loc{ font-size:14px; color:var(--t-dark); opacity:.78; }
.ft-bottom{
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line-dark);
  font-size:12.5px; color:var(--m-dark);
}
.ft-bottom .lang a{ color:var(--m-dark); margin-left:14px; letter-spacing:.08em; }
.ft-bottom .lang a.on{ color:var(--gold); }
.ft-bottom .lang a:hover{ color:var(--t-dark); }

/* ---------- sélecteur de langue (EN · FR · IT · DE) ---------- */
.lang-switch{ display:inline-flex; align-items:center; gap:2px; }
.lang-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; line-height:1;
  background:none; border:none; cursor:pointer; padding:7px 7px; border-radius:999px;
  color:inherit; opacity:.55; transition:opacity .18s var(--ease), color .18s var(--ease);
}
.lang-btn:hover{ opacity:.95; }
.lang-btn.on{ opacity:1; color:var(--gold); }
.lang-btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* header : le switcher hérite de la couleur du header (clair sur héro sombre, encre au scroll) */
.hd .lang-switch{ color:var(--t-dark); margin-right:2px; }
.hd.on-light .lang-switch, .hd.scrolled .lang-switch, .hd.menu-open .lang-switch{ color:var(--t-light); }
@media (max-width:1000px){ .hd .lang-switch{ display:none; } }

/* menu plein écran : switcher visible dans le pied du menu mobile */
.menu .lang-switch{ color:var(--t-dark); margin-top:22px; }
.menu .lang-btn{ font-size:13px; padding:9px 11px; }

/* footer : switcher à la place de l'ancien FR/EN */
.ft-bottom .lang-switch{ color:var(--m-dark); }
.ft-bottom .lang-btn{ padding:5px 7px; }

/* ==========================================================================
   COMPOSANTS
   ========================================================================== */

/* ---------- méthode : les 4 temps ---------- */
.steps{ display:grid; gap:14px; margin-top:56px; position:relative; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); gap:16px; } }
.step{
  position:relative; padding:26px 24px 30px;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--sh-subtle);
}
.step-num{
  width:26px; height:26px; border-radius:13px; background:var(--ink-cta); color:#fff;
  font-family:var(--sans); font-size:12px; font-weight:600; font-style:normal;
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.step h3{ font-size:18px; margin-bottom:8px; }
.step p{ font-size:14px; color:var(--m-light); max-width:30ch; }
.step::before, .step::after{ display:none; }

/* ---------- trio de points (accueil, fond clair) ---------- */
.trio{ display:grid; gap:14px; margin-top:56px; }
@media (min-width:800px){ .trio{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.trio > div{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 24px 30px; box-shadow:var(--sh-subtle); }
.trio h3{ font-size:18px; margin-bottom:8px; }
.trio p{ font-size:14px; color:var(--m-light); }

/* ---------- module signature : MarketVsAriane, deux actes ----------
   Tous les montants (les seuls € du site, illustratifs) sont CALCULÉS
   depuis MVA_CONFIG (ariane.js) et injectés au chargement, jamais écrits
   en dur. Séquence .play à l'entrée du viewport : acte 1 (les frais se
   révèlent ligne à ligne, le compteur grimpe) → le fil traverse → acte 2
   (trois lignes défendues, le compteur redescend, badge or).
   prefers-reduced-motion : tout statique, actes côte à côte. */
.mva{ margin-top:64px; --sp:1; }
.mva .num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }

.mva-acts{ display:grid; align-items:stretch; }
@media (min-width:1020px){ .mva-acts{ grid-template-columns:1fr minmax(48px,72px) 1fr; } }

.mva-act{ position:relative; border-radius:18px; padding:24px 22px 26px; display:flex; flex-direction:column; }
@media (min-width:900px){ .mva-act{ padding:30px 32px 32px; } }
.mva-act > .tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--m-dark); display:block; margin-bottom:18px;
}

/* acte 1, ce que dit le marché */
.mva-market{ background:var(--ink-soft); border:1px solid var(--line-dark); color:var(--m-dark); }
.mva-market .listing{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 18px; flex-wrap:wrap; padding-bottom:14px; }
.mva-market .listing .my{ font-family:var(--serif); font-style:italic; font-size:23px; color:#B9C2CC; }
.mva-market .listing .px{ font-size:13.5px; font-weight:500; }
.mva-market .foot{ margin-top:auto; padding-top:18px; font-family:var(--serif); font-style:italic; font-size:15.5px; color:#AEB8C3; }

.mva-lines{ list-style:none; margin:0; padding:0; }
.mva-line{ padding:13px 0; border-top:1px solid var(--line-dark); }
.mva-line .row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; }
.mva-line .lbl{ font-size:13.5px; }
.mva-line .amt{ font-size:14px; white-space:nowrap; }
.mva-line .why{ margin-top:5px; font-size:12.5px; line-height:1.6; color:var(--m-dark); max-width:52ch; }
.mva-long .mva-line .why{ font-size:13.5px; max-width:none; }

.mva-total{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-top:16px; margin-top:2px; border-top:1px solid rgba(242,239,232,.22); }
.mva-total .lbl{ font-size:13.5px; font-weight:600; }
.mva-total .amt{ font-size:20px; }
.mva-market .mva-total .amt{ color:#D6DBE2; }

/* le fil traverse entre les deux actes */
.mva-thread{ position:relative; height:52px; width:1px; margin-left:50px; }
.mva-thread::before{ content:""; position:absolute; inset:0; background:rgba(201,168,76,.6); transform:scaleY(0); transform-origin:top; }
.mva.play .mva-thread::before{ transform:scaleY(1); transition:transform calc(.55s * var(--sp)) var(--ease) calc(1.9s * var(--sp)); }
@media (min-width:1020px){
  .mva-thread{ height:auto; width:auto; margin:0; }
  .mva-thread::before{ top:50%; bottom:auto; left:-1px; right:-1px; height:1px; transform:scaleX(0); transform-origin:left; }
  .mva.play .mva-thread::before{ transform:scaleX(1); }
}

/* acte 2, ce que nous faisons pour vous */
.mva-ariane{
  background:var(--ink-soft); border:1px solid rgba(201,168,76,.32);
  box-shadow:0 14px 40px -18px rgba(0,0,0,.5);
  opacity:.25; transform:translateY(6px);
}
.mva.play .mva-ariane{ opacity:1; transform:none; transition:opacity calc(.55s * var(--sp)) var(--ease) calc(2.25s * var(--sp)), transform calc(.55s * var(--sp)) var(--ease) calc(2.25s * var(--sp)); }
.mva-ariane > .tag{ color:var(--gold); }
.mva-ariane .mva-line{ padding-left:16px; position:relative; }
.mva-ariane .mva-line::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:1.5px; border-radius:2px; background:var(--gold); transform:scaleY(0); transform-origin:top; }
.mva-ariane .lbl{ font-size:14px; font-weight:600; color:var(--t-dark); }
.mva-ariane .amt{ color:var(--t-dark); }
.mva-ariane .amt s{ text-decoration:none; position:relative; color:var(--m-dark); font-size:.86em; margin-right:9px; }
.mva-ariane .amt s::after{ content:""; position:absolute; left:-2px; right:-2px; top:52%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.mva-ariane .mva-total{ border-top-color:rgba(201,168,76,.35); }
.mva-ariane .mva-total .lbl{ color:var(--t-dark); }
.mva-ariane .mva-total .amt{ font-size:22px; }

.mva-badge{
  display:inline-flex; align-items:baseline; gap:7px; margin-top:18px; align-self:flex-start;
  padding:9px 16px; border-radius:999px;
  background:rgba(201,168,76,.13); border:1px solid rgba(201,168,76,.5);
  color:var(--gold); font-size:12.5px; font-weight:600; letter-spacing:.01em;
}
.mva-badge .num{ font-size:13px; }

/* séquence d'apparition */
.mva-market .mva-line, .mva-market .mva-total, .mva-market .foot,
.mva-ariane .mva-line, .mva-ariane .mva-total, .mva-ariane .mva-badge{ opacity:0; transform:translateY(5px); }
.mva.play .mva-market .mva-line, .mva.play .mva-market .mva-total, .mva.play .mva-market .foot,
.mva.play .mva-ariane .mva-line, .mva.play .mva-ariane .mva-total, .mva.play .mva-ariane .mva-badge{
  opacity:1; transform:none;
  transition:opacity calc(.5s * var(--sp)) var(--ease) var(--md,0s), transform calc(.5s * var(--sp)) var(--ease) var(--md,0s);
}
.mva.play .mva-market .mva-line:nth-child(1){ --md:calc(.25s * var(--sp)); }
.mva.play .mva-market .mva-line:nth-child(2){ --md:calc(.55s * var(--sp)); }
.mva.play .mva-market .mva-total{ --md:calc(.85s * var(--sp)); }
.mva.play .mva-market .foot{ --md:calc(1.7s * var(--sp)); }
.mva.play .mva-ariane .mva-line:nth-child(1){ --md:calc(2.45s * var(--sp)); }
.mva.play .mva-ariane .mva-line:nth-child(2){ --md:calc(2.65s * var(--sp)); }
.mva.play .mva-ariane .mva-line:nth-child(3){ --md:calc(2.85s * var(--sp)); }
.mva.play .mva-ariane .mva-line::before{ transform:scaleY(1); transition:transform calc(.45s * var(--sp)) var(--ease) calc(var(--md,0s) + (.12s * var(--sp))); }
.mva.play .mva-ariane .amt s::after{ transform:scaleX(1); transition:transform calc(.4s * var(--sp)) var(--ease) calc(2.9s * var(--sp)); }
.mva.play .mva-ariane .mva-total{ --md:calc(3.15s * var(--sp)); }
.mva.play .mva-ariane .mva-badge{ --md:calc(4.05s * var(--sp)); }

/* animation coupée (tweak « Animation » off ou reduced-motion) : état final, statique */
.mva.mva-static .mva-thread::before{ transform:none; transition:none; }
.mva.mva-static .mva-ariane{ opacity:1; transform:none; transition:none; }
.mva.mva-static .mva-market .mva-line, .mva.mva-static .mva-market .mva-total, .mva.mva-static .mva-market .foot,
.mva.mva-static .mva-ariane .mva-line, .mva.mva-static .mva-ariane .mva-total, .mva.mva-static .mva-ariane .mva-badge{ opacity:1; transform:none; transition:none; }
.mva.mva-static .mva-ariane .mva-line::before{ transform:none; transition:none; }
.mva.mva-static .mva-ariane .amt s::after{ transform:none; transition:none; }

.mva-tagline{
  margin-top:48px; font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.7vw,27px); color:var(--t-dark); max-width:36ch;
}
.mva-tagline em{ color:var(--gold); }
.mva-note{ margin-top:14px; font-size:12px; color:var(--m-dark); }

@media (prefers-reduced-motion: reduce){
  .mva-thread::before, .mva.play .mva-thread::before{ transform:none; transition:none; }
  .mva-ariane, .mva.play .mva-ariane{ opacity:1; transform:none; transition:none; }
  .mva-market .mva-line, .mva-market .mva-total, .mva-market .foot,
  .mva-ariane .mva-line, .mva-ariane .mva-total, .mva-ariane .mva-badge,
  .mva.play .mva-market .mva-line, .mva.play .mva-market .mva-total, .mva.play .mva-market .foot,
  .mva.play .mva-ariane .mva-line, .mva.play .mva-ariane .mva-total, .mva.play .mva-ariane .mva-badge{ opacity:1; transform:none; transition:none; }
  .mva-ariane .mva-line::before, .mva.play .mva-ariane .mva-line::before{ transform:none; transition:none; }
  .mva-ariane .amt s::after, .mva.play .mva-ariane .amt s::after{ transform:none; transition:none; }
}

/* ---------- yacht card ---------- */
.ygrid{ display:grid; gap:22px; margin-top:56px; }
@media (min-width:700px){ .ygrid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .ygrid{ grid-template-columns:repeat(3,1fr); } }
.ycard{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; box-shadow:var(--sh-subtle);
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.ycard:hover{ box-shadow:var(--sh-card); transform:translateY(-2px); }
.ycard-img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ivory-deep); }
.ycard-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.ycard:hover .ycard-img img{ transform:scale(1.03); }
.ycard-zone{
  position:absolute; left:12px; bottom:12px; background:rgba(13,27,42,.80); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:10px; letter-spacing:1px; text-transform:uppercase; font-weight:600;
  padding:7px 13px; border-radius:999px;
}
.ycard h3{ font-size:20px; margin:18px 20px 0; }
.ycard-specs{
  display:flex; flex-wrap:wrap; gap:6px 0; margin:8px 20px 0;
  font-size:13px; color:var(--m-light);
}
.ycard-specs span{ display:inline-flex; align-items:center; }
.ycard-specs span + span::before{ content:"·"; margin:0 9px; color:var(--gold); }
.ycard-note{ margin:12px 20px 0; font-family:var(--serif); font-style:italic; font-size:15px; color:var(--m-light); }
.ycard .link-arrow{ margin:14px 20px 20px; }

/* ---------- objection card ---------- */
.ogrid{ display:grid; gap:14px; margin-top:56px; }
@media (min-width:800px){ .ogrid{ grid-template-columns:1fr 1fr; } }
.ocard{ background:var(--ink-soft); border:1px solid var(--line-dark); border-radius:18px; padding:36px 28px 40px; }
@media (min-width:900px){ .ocard{ padding:44px 40px 48px; } }
.ocard .q{
  font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(22px,2.6vw,28px);
  line-height:1.25; color:var(--t-dark); display:block;
}
.ocard .q::before{ content:"« "; color:var(--gold); }
.ocard .q::after{ content:" »"; color:var(--gold); }
.ocard .a{ margin-top:16px; font-size:14.5px; color:var(--m-dark); line-height:1.7; max-width:52ch; }
.ocard .a strong{ color:var(--t-dark); font-weight:600; }
.ocard .stat{ margin-top:16px; font-family:var(--mono); font-size:11.5px; color:var(--gold); }
.ocard .stat sup{ color:var(--m-dark); }

/* ---------- testimonial ---------- */
.tgrid{ display:grid; gap:16px; margin-top:56px; }
@media (min-width:900px){ .tgrid{ grid-template-columns:repeat(3,1fr); } }
.tcard{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 26px 26px; display:flex; flex-direction:column; box-shadow:var(--sh-subtle);
}
.tcard blockquote{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(19px,2vw,21px); line-height:1.45; color:var(--t-light); flex:1;
}
.tcard blockquote::before{ content:"« "; color:var(--gold-dim); }
.tcard blockquote::after{ content:" »"; color:var(--gold-dim); }
.tcard figcaption{ margin-top:20px; font-size:12.5px; color:var(--m-light); font-weight:500; }
.tcard figcaption b{ font-weight:600; color:var(--t-light); }

/* ---------- app phones ---------- */
.phones{ display:flex; justify-content:center; gap:28px; margin-top:64px; perspective:1400px; flex-wrap:wrap; }
.phone{
  width:262px; flex:0 0 auto; aspect-ratio:390/800; background:var(--ivory);
  border-radius:40px; border:1px solid rgba(13,27,42,.85);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55), 0 0 0 4px rgba(13,27,42,.9);
  overflow:hidden; position:relative; color:var(--t-light);
  display:flex; flex-direction:column;
  transition:transform .6s var(--ease);
}
.phone-tilt-l{ transform:rotate(-4deg) translateY(10px); }
.phone-tilt-r{ transform:rotate(4deg) translateY(10px); }
.phones:hover .phone{ transform:rotate(0) translateY(0); }
@media (prefers-reduced-motion: reduce){ .phone{ transition:none; } }

.p-notch{ height:28px; display:flex; justify-content:center; align-items:center; flex:0 0 auto; }
.p-notch::after{ content:""; width:86px; height:8px; border-radius:8px; background:rgba(13,27,42,.9); }
.p-body{ flex:1; padding:10px 16px 0; overflow:hidden; display:flex; flex-direction:column; gap:10px; }
.p-brand{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:20px; text-align:center; }
.p-eyebrow{ font-size:8.5px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--m-light); }
.p-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:13px 14px;
  box-shadow:var(--sh-subtle); font-size:11px;
}
.p-card h4{ font-family:var(--sans); font-size:13.5px; font-weight:600; letter-spacing:-0.2px; line-height:1.25; }
.p-card .p-sub{ color:var(--m-light); font-size:9.5px; margin-top:2px; }
.p-big{ font-family:var(--sans); font-weight:600; font-size:30px; letter-spacing:-0.9px; line-height:1.1; }
.p-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; font-size:10px; }
.p-row .lbl{ color:var(--m-light); }
.p-amt{ filter:blur(4.5px); opacity:.75; user-select:none; }
.p-pill{ font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:20px; }
.p-pill-ok{ background:rgba(31,138,91,.12); color:#1F8A5B; }
.p-pill-wait{ background:rgba(201,168,76,.18); color:var(--gold-dim); }
.p-bar{ height:4px; border-radius:4px; background:var(--ivory-deep); margin-top:10px; overflow:hidden; }
.p-bar i{ display:block; height:100%; width:58%; background:var(--gold); border-radius:4px; }
.p-map{ border-radius:16px; overflow:hidden; position:relative; aspect-ratio:16/11; }
.p-map img{ width:100%; height:100%; object-fit:cover; }
.p-map .pin{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--gold); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.p-nav{
  flex:0 0 auto; display:flex; justify-content:space-around; align-items:center;
  margin:6px 10px 12px; padding:9px 8px; border-radius:999px;
  background:rgba(255,255,255,.82); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:var(--sh-subtle);
}
.p-nav span{ font-size:9px; letter-spacing:.04em; color:var(--m-light); }
.p-nav span.on{ color:var(--t-light); font-weight:600; }
.p-nav span.on::before{ content:"●"; color:var(--gold); font-size:6px; margin-right:4px; vertical-align:1px; }

/* ---------- horizons cards ---------- */
.hgrid{ display:grid; gap:18px; margin-top:56px; }
@media (min-width:800px){ .hgrid{ grid-template-columns:1fr 1fr; } }
.hcard{
  position:relative; overflow:hidden; border-radius:18px;
  aspect-ratio:16/10; display:flex; align-items:flex-end; color:#fff;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
a.hcard:hover{ box-shadow:var(--sh-card); transform:translateY(-2px); }
.hcard.tall{ aspect-ratio:4/3; }
@media (min-width:800px){ .hcard.feature{ grid-column:span 2; aspect-ratio:21/9; } }
.hcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.hcard:hover img{ transform:scale(1.03); }
.hcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(13,27,42,.74) 0%, rgba(13,27,42,.05) 60%);
}
.hcard-in{ position:relative; z-index:2; padding:24px 26px 22px; width:100%; }
.hcard-in .zone{ font-size:10px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:rgba(242,239,232,.85); display:block; margin-bottom:6px; }
.hcard-in h3{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(27px,3.2vw,36px); letter-spacing:-0.4px; }
.hcard-in p{ font-size:13.5px; opacity:.9; margin-top:5px; max-width:48ch; }
.hcard .soon{ border-radius:999px !important; }

/* ---------- itinéraire 7 jours, DayRail DS ---------- */
.iti{ margin-top:48px; position:relative; }
.iti::before{ content:""; position:absolute; left:12px; top:8px; bottom:8px; width:1px; background:var(--line); }
.iti-day{ position:relative; padding:0 0 14px 44px; border-left:none; }
.iti-day:last-child{ padding-bottom:0; }
.iti-day::before{
  content:""; position:absolute; left:5px; top:16px; width:15px; height:15px; border-radius:50%;
  background:#fff; border:1.5px solid var(--ink-cta); z-index:1;
}
.iti-day > *{ position:relative; }
.iti-day .card-in{ display:block; }
.iti-day .j{
  font-size:10px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--m-light);
  display:block; margin-bottom:3px;
}
.iti-day{ --pad:16px; }
.iti-day .j, .iti-day h4, .iti-day p{ margin-left:0; }
.iti-day h4{ font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-0.2px; }
.iti-day p{ font-size:14px; color:var(--m-light); max-width:58ch; margin-top:4px; }
/* carte blanche autour du contenu du jour */
.iti-day .j{ padding-top:14px; }
.iti-day::after{
  content:""; position:absolute; left:32px; right:0; top:0; bottom:14px;
  background:#fff; border:1px solid var(--line); border-radius:16px; z-index:0;
}
.iti-day:last-child::after{ bottom:0; }
.iti-day .j, .iti-day h4, .iti-day p{ z-index:1; padding-left:18px; padding-right:18px; }
.iti-day p{ padding-bottom:16px; }

/* ---------- FAQ ---------- */
.faq{ margin-top:48px; display:grid; gap:12px; border-top:none; }
.faq details{
  border:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:16px; background:#fff; box-shadow:var(--sh-subtle);
  padding:0 22px; overflow:hidden;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:20px 0; font-family:var(--sans); font-size:clamp(15.5px,1.8vw,17px); font-weight:600; letter-spacing:-0.2px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ind{ color:var(--gold-dim); font-size:1.2em; line-height:1; font-weight:400; transition:transform .25s var(--ease); flex:0 0 auto; }
.faq details[open] summary .ind{ transform:rotate(45deg); }
.faq .faq-body{ padding:0 0 22px; max-width:64ch; color:var(--m-light); font-size:14.5px; }
.faq .faq-body p + p{ margin-top:10px; }

/* ---------- bloc CTA final ---------- */
.ctab{ text-align:center; padding:110px 0 120px; }
@media (min-width:900px){ .ctab{ padding:150px 0 160px; } }
.ctab .d-l{ max-width:18ch; margin:0 auto; }
.ctab .cta-row{ justify-content:center; margin-top:44px; }
.ctab .reassure{ margin-top:26px; font-size:13px; color:var(--m-dark); }

/* ---------- divers ---------- */
.foot-src{ margin-top:44px; font-size:12px; color:var(--m-dark); max-width:70ch; }
.sec-light .foot-src{ color:var(--m-light); }
.img-band{ position:relative; height:clamp(220px, 42vw, 460px); overflow:hidden; }
.img-band img{ width:100%; height:100%; object-fit:cover; }
.two-col{ display:grid; gap:44px; align-items:center; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; gap:72px; } }
.two-col .im{ overflow:hidden; border-radius:18px; }
.two-col .im img{ width:100%; height:auto; }
.kicker-rule{ width:56px; height:2px; border-radius:2px; background:var(--gold); margin-bottom:28px; }
.sec-light .kicker-rule{ background:var(--gold-dim); }

/* ============================================================
   FICHE BATEAU — modale galerie éditoriale (Sélection + teaser Accueil)
   (déplacé depuis l'inline de selection.html pour être partagé)
   ============================================================ */
.ycard[data-boat]{ cursor:pointer; }
.ycard[data-boat]:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; border-radius:4px; }
.ycard-cta{ margin-top:4px; }

.boat-modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.boat-modal.open{ display:flex; }
body.bm-locked{ overflow:hidden; }

.bm-scrim{ position:absolute; inset:0; background:rgba(8,16,24,.78); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s var(--ease); }
.boat-modal.open .bm-scrim{ opacity:1; }

.bm-sheet{
  position:relative; z-index:1;
  width:min(1180px, 96vw); height:min(760px, 92vh);
  display:grid; grid-template-columns:1.12fr .88fr;
  background:var(--ivory); color:var(--t-light);
  border-radius:22px; overflow:hidden;
  box-shadow:0 50px 130px -35px rgba(0,0,0,.7);
  opacity:0; transform:translateY(16px) scale(.99);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.boat-modal.open .bm-sheet{ opacity:1; transform:none; }

.bm-close{
  position:absolute; top:14px; right:14px; z-index:6;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(8,16,24,.25);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .2s var(--ease), color .2s var(--ease), transform .08s ease;
}
.bm-close:hover{ background:var(--ink); color:#fff; }
.bm-close:active{ transform:scale(.93); }

.bm-gallery{ position:relative; display:grid; grid-template-rows:1fr auto; background:var(--ink); min-height:0; }
.bm-stage{ position:relative; overflow:hidden; min-height:0; }
.bm-stage-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease); }
.bm-stage::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(8,16,24,.45), transparent 30%); }
.bm-zone{ position:absolute; left:18px; top:16px; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:rgba(8,16,24,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:7px 13px; border-radius:999px; }
.bm-stage-nav{ position:absolute; right:16px; bottom:14px; z-index:2; display:flex; align-items:center; gap:10px; }
.bm-counter{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:#fff; background:rgba(8,16,24,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:6px 11px; border-radius:999px; }
.bm-arrow{ width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.9); color:var(--ink); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease), transform .08s ease; }
.bm-arrow:hover{ background:#fff; }
.bm-arrow:active{ transform:scale(.92); }
.bm-thumbs{ display:flex; gap:8px; padding:12px; overflow-x:auto; background:var(--night); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.bm-thumbs::-webkit-scrollbar{ height:6px; }
.bm-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }
.bm-thumb{ flex:0 0 auto; width:74px; height:52px; padding:0; border:none; border-radius:9px; overflow:hidden; cursor:pointer; opacity:.5; transition:opacity .2s var(--ease); }
.bm-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.bm-thumb:hover{ opacity:.85; }
.bm-thumb.is-active{ opacity:1; box-shadow:inset 0 0 0 2px var(--gold); }
.bm-thumb:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

.bm-panel{ position:relative; display:grid; grid-template-rows:1fr auto; min-height:0; }
.bm-scroll{ overflow-y:auto; padding:46px 40px 26px; min-height:0; }
.bm-eyebrow{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-dim); display:block; }
.bm-name{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(32px,4.4vw,46px); line-height:1; margin-top:12px; }
.bm-tagline{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.35; color:var(--m-light); margin-top:10px; }
.bm-rule{ width:52px; height:2px; border-radius:2px; background:var(--gold); margin:22px 0; }
.bm-keyspecs{ display:flex; gap:24px; }
.bm-key{ display:flex; flex-direction:column; gap:3px; }
.bm-key + .bm-key{ padding-left:24px; border-left:1px solid var(--line); }
.bm-key .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; letter-spacing:-.01em; color:var(--t-light); }
.bm-key .k{ font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--m-light); }
.bm-desc{ margin-top:26px; font-size:15.5px; line-height:1.75; color:#3a4550; }
.bm-spec-h, .bm-feat-h{ font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--gold-dim); margin-top:30px; margin-bottom:2px; }
.bm-specs{ display:grid; grid-template-columns:1fr 1fr; column-gap:32px; }
.bm-spec{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-top:1px solid var(--line); }
.bm-spec .k{ font-size:13px; color:var(--m-light); }
.bm-spec .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--t-light); white-space:nowrap; }
.bm-feats{ margin-top:14px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 26px; }
.bm-feats li{ list-style:none; font-size:14px; line-height:1.5; color:#3a4550; padding-left:18px; position:relative; }
.bm-feats li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.bm-foot{ border-top:1px solid var(--line); background:var(--ivory); padding:18px 40px 22px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; justify-content:space-between; }
.bm-note{ font-family:var(--serif); font-style:italic; font-size:14.5px; color:var(--m-light); flex:1 1 auto; }
.bm-cta{ display:flex; gap:10px; flex:0 0 auto; }
.bm-foot .btn{ height:46px; }
.bm-cta .btn-ghost{ color:var(--m-light); }
.bm-cta .btn-ghost:hover{ color:var(--t-light); }

@media (max-width:900px){
  .boat-modal{ padding:0; }
  .bm-sheet{ width:100vw; height:100vh; height:100dvh; border-radius:0;
    display:block; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:none; }
  .boat-modal.open .bm-sheet{ transform:none; }
  .bm-gallery{ display:block; }
  .bm-stage{ aspect-ratio:4/3; }
  .bm-thumbs{ display:none; }
  .bm-panel{ display:block; }
  .bm-scroll{ overflow:visible; padding:26px 22px 6px; }
  .bm-specs{ grid-template-columns:1fr; }
  .bm-feats{ grid-template-columns:1fr; }
  .bm-foot{ position:static; padding:22px 22px calc(26px + env(safe-area-inset-bottom)); }
  .bm-note{ flex-basis:100%; margin-bottom:12px; }
  .bm-cta{ width:100%; flex-direction:column; gap:10px; }
  .bm-cta .btn{ width:100%; }
  .bm-close{ position:fixed; background:rgba(8,16,24,.55); color:#fff; box-shadow:none; }
  .bm-close:hover{ background:rgba(8,16,24,.85); color:#fff; }
}
@media (prefers-reduced-motion: reduce){
  .bm-scrim, .boat-modal.open .bm-scrim,
  .bm-sheet, .boat-modal.open .bm-sheet,
  .bm-stage-img{ transition:none; transform:none; }
}