/* ============================================
   NautiPro — Pages specific styles
   ============================================ */

/* Emergency page */
.page-emergency main { padding-top: 0; }
.hero-emergency {
  min-height: 100vh;
  background: var(--abyss);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--pad-x) 80px;
  overflow: hidden;
}
.hero-emergency::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(168,52,30,0.06), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(193, 127, 89,0.05), transparent 60%);
  pointer-events: none;
}
.hero-emergency__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ivory);
  margin: 32px 0 24px;
  max-width: 16ch;
}
.hero-emergency__title em {
  font-style: italic;
  color: var(--brass-soft);
}
.hero-emergency__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: rgba(232, 237, 243,0.75);
  max-width: 52ch;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.hero-emergency .hotline {
  margin: 16px 0 32px;
}

/* Sticky bottom bar emergency (mobile) */
.emergency-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--emergency);
  color: var(--ivory);
  padding: 14px 16px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: var(--z-toast);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.2);
}
.emergency-sticky-bar a {
  color: var(--ivory);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.page-emergency .emergency-sticky-bar { display: flex; }
@media (min-width: 768px) { .page-emergency .emergency-sticky-bar { display: none; } }

/* Engagement cards */
.engagement-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .engagement-cards { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.engagement-card {
  background: var(--ivory-2);
  padding: 32px 28px;
  border-radius: var(--r-sm);
  border-left: 2px solid var(--brass);
}
.engagement-card__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.5rem;
  font-variation-settings: "opsz" 96, "wght" 300;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 16px;
}
.engagement-card__rule { width: 32px; height: 1px; background: var(--brass); margin-bottom: 16px; }
.engagement-card__label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 12px;
}
.engagement-card__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--slate);
}

/* App page features grid */
.app-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 640px) {
  .app-features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .app-features { grid-template-columns: repeat(3, 1fr); }
}
.app-feature {
  padding: 32px 28px;
  background: var(--pearl);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.app-feature__icon {
  width: 36px;
  height: 36px;
  color: var(--brass);
  margin-bottom: 20px;
}
.app-feature__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--brass);
  margin-bottom: 8px;
}
.app-feature__title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.app-feature__rule { width: 24px; height: 1px; background: var(--brass); margin-bottom: 14px; }
.app-feature__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate);
}

/* QR placeholder */
.qr-block {
  display: inline-block;
  padding: 16px;
  background: var(--ivory);
  border: 1px solid var(--rule);
}
.qr-block__svg {
  width: 120px;
  height: 120px;
  display: block;
}
.qr-block__caption {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 12px;
  text-align: center;
}

/* App store badges */
.appstore-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink);
  transition: all var(--t-base);
  text-decoration: none;
  min-width: 160px;
}
.appstore-badge:hover { background: var(--midnight); }
.appstore-badge__icon { width: 22px; height: 22px; flex-shrink: 0; }
.appstore-badge__txt { display: flex; flex-direction: column; line-height: 1.15; }
.appstore-badge__txt small {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 237, 243,0.7);
}
.appstore-badge__txt strong {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Pricing duplex */
.pricing-duplex {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .pricing-duplex { grid-template-columns: 1fr 1fr; gap: 0; }
  .pricing-duplex > * + * { border-left: 1px solid var(--rule); }
}
.pricing-card {
  padding: 48px 40px;
  background: var(--pearl);
}
.pricing-card--featured {
  background: var(--ivory-2);
  border-left: 2px solid var(--brass) !important;
}
.pricing-card__label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 16px;
}
.pricing-card__rule { width: 24px; height: 1px; background: var(--brass); margin-bottom: 24px; }
.pricing-card__price {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 3rem;
  font-variation-settings: "opsz" 144, "wght" 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1;
}
.pricing-card__price small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--slate);
  text-transform: uppercase;
  margin-top: 8px;
}
.pricing-card__body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--slate);
  margin-bottom: 24px;
  min-height: 72px;
}

/* Flotte map */
.fleet-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--abyss);
  border-radius: var(--r-sm);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory);
  overflow: hidden;
}
.fleet-map__svg { width: 100%; height: 100%; max-width: 1000px; }
.fleet-map__legend {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 0.75rem;
  color: rgba(232, 237, 243,0.7);
  letter-spacing: 0.04em;
}
.fleet-map__legend span { color: var(--brass-soft); }

/* Port detail rows */
.port-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .port-detail { grid-template-columns: 4fr 8fr; gap: 80px; }
}
.port-detail h3 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  margin-bottom: 12px;
}
.port-detail__city {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 8px;
}
.port-detail__body { font-size: 1rem; line-height: 1.7; color: var(--slate); }
.port-detail__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--slate);
}
@media (min-width: 640px) {
  .port-detail__meta { grid-template-columns: repeat(2, 1fr); }
}
.port-detail__meta strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}

/* Legal pages */
.page-legal main { padding-top: 120px; }
.page-legal .container--prose { padding-bottom: var(--s-10); }
.page-legal main h1 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: 16px;
}
.page-legal main h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 48px 0 16px;
}
.page-legal main h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--ink);
}
.page-legal main p, .page-legal main li {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--slate);
}
.page-legal main ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.page-legal main ul li { margin-bottom: 8px; }
.page-legal main table { width: 100%; border-collapse: collapse; margin: 24px 0; }
.page-legal main table th, .page-legal main table td { padding: 12px; border: 1px solid var(--rule); font-size: 0.875rem; text-align: left; vertical-align: top; }
.page-legal main table th { background: var(--ivory-2); font-weight: 600; }
.page-legal main a { color: var(--brass-deep); text-decoration: underline; text-underline-offset: 4px; }
.page-legal main a:hover { color: var(--brass); }

/* Maintenance/refit/winter list */
.detail-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .detail-list { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.detail-list__item {
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.detail-list__item h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 16px;
}
.detail-list__item p { font-size: 0.9375rem; line-height: 1.7; color: var(--slate); }
.section--abyss .detail-list__item p,
.section--midnight .detail-list__item p { color: rgba(232, 237, 243,0.78); }
.section--abyss .detail-list__item,
.section--midnight .detail-list__item { border-top-color: var(--rule-dark); }

/* Engagements (garanties) */
.engagement-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .engagement-list { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.engagement-item {
  padding: 32px;
  background: var(--pearl);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}
.engagement-item__num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.5rem;
  font-variation-settings: "opsz" 96, "wght" 300;
  color: var(--brass);
  line-height: 1;
  margin-bottom: 16px;
}
.engagement-item__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 16px;
}
.engagement-item__body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--slate);
}

/* Testimonials grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

/* Contact split */
.contact-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .contact-split { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}

.hotline-box {
  background: var(--midnight);
  color: var(--ivory);
  padding: 40px 32px;
  border-radius: var(--r-sm);
  text-align: center;
}
.hotline-box .eyebrow { color: var(--brass-soft); }
.hotline-box .eyebrow::before { background: var(--brass-soft); }
.hotline-box .hotline {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin: 16px 0 24px;
}

/* Contact info cards */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
.contact-info-card {
  padding: 24px;
  background: var(--ivory-2);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--brass);
}
.contact-info-card h4 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 12px;
}
.contact-info-card p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--slate);
}
.contact-info-card a { color: var(--brass); }

/* ---- Round 3 fix: sticky bar mobile masks footer ---- */
@media (max-width: 767px) {
  .page-emergency .footer { padding-bottom: 80px; }
}

/* ============================================
   R13 — Bascule DARK DOMINANT (cannesa7 style)
   Tous les components qui étaient pensés pour fond ivory
   doivent désormais s'adapter à un body abyss.
   Sections light explicites (.section--ivory/.section--pearl)
   gardent leurs valeurs claires.
   ============================================ */

/* Engagement cards : abyss-light élévé */
.engagement-card {
  background: var(--abyss-light);
  border-left: 2px solid var(--brass-soft);
}
.engagement-card__value { color: var(--ivory); }
.engagement-card__rule { background: var(--brass-soft); }
.engagement-card__label { color: var(--brass-soft); }
.engagement-card__body { color: var(--ivory-muted); }

.section--ivory .engagement-card,
.section--ivory-2 .engagement-card,
.section--pearl .engagement-card {
  background: var(--ivory-2);
  border-left-color: var(--brass);
}
.section--ivory .engagement-card__value,
.section--ivory-2 .engagement-card__value,
.section--pearl .engagement-card__value { color: var(--ink); }
.section--ivory .engagement-card__rule,
.section--ivory-2 .engagement-card__rule,
.section--pearl .engagement-card__rule { background: var(--brass); }
.section--ivory .engagement-card__label,
.section--ivory-2 .engagement-card__label,
.section--pearl .engagement-card__label { color: var(--brass); }
.section--ivory .engagement-card__body,
.section--ivory-2 .engagement-card__body,
.section--pearl .engagement-card__body { color: var(--slate); }

/* App features : abyss-light + ivory text */
.app-feature {
  background: var(--abyss-light);
  border: 1px solid var(--rule-dark);
}
.app-feature__icon { color: var(--brass-soft); }
.app-feature__num { color: var(--brass-soft); }
.app-feature__title { color: var(--ivory); }
.app-feature__rule { background: var(--brass-soft); }
.app-feature__body { color: var(--ivory-muted); }

.section--ivory .app-feature,
.section--ivory-2 .app-feature,
.section--pearl .app-feature {
  background: var(--pearl);
  border: 1px solid var(--rule);
}
.section--ivory .app-feature__icon,
.section--ivory-2 .app-feature__icon,
.section--pearl .app-feature__icon { color: var(--brass); }
.section--ivory .app-feature__num,
.section--ivory-2 .app-feature__num,
.section--pearl .app-feature__num { color: var(--brass-deep); } /* AA sur fond clair */
.section--ivory .app-feature__title,
.section--ivory-2 .app-feature__title,
.section--pearl .app-feature__title { color: var(--ink); }
.section--ivory .app-feature__rule,
.section--ivory-2 .app-feature__rule,
.section--pearl .app-feature__rule { background: var(--brass); }
.section--ivory .app-feature__body,
.section--ivory-2 .app-feature__body,
.section--pearl .app-feature__body { color: var(--slate); }

/* QR block — défaut abyss */
.qr-block {
  background: var(--abyss-light);
  border: 1px solid var(--rule-dark);
}
.qr-block__caption { color: var(--ivory-muted); }
.section--ivory .qr-block,
.section--ivory-2 .qr-block,
.section--pearl .qr-block {
  background: var(--ivory);
  border: 1px solid var(--rule);
}
.section--ivory .qr-block__caption,
.section--ivory-2 .qr-block__caption,
.section--pearl .qr-block__caption { color: var(--slate); }

/* Pricing duplex : abyss-light pair, midnight featured */
.pricing-duplex > * + * { border-left-color: var(--rule-dark); }
.pricing-card { background: var(--abyss-light); }
.pricing-card--featured { background: var(--midnight); }
.pricing-card__label { color: var(--brass-soft); }
.pricing-card__rule { background: var(--brass-soft); }
.pricing-card__price { color: var(--ivory); }
.pricing-card__price small { color: var(--brass-soft); }
.pricing-card__body { color: var(--ivory-muted); }

.section--ivory .pricing-duplex > * + *,
.section--ivory-2 .pricing-duplex > * + *,
.section--pearl .pricing-duplex > * + * { border-left-color: var(--rule); }
.section--ivory .pricing-card,
.section--ivory-2 .pricing-card,
.section--pearl .pricing-card { background: var(--pearl); }
.section--ivory .pricing-card--featured,
.section--ivory-2 .pricing-card--featured,
.section--pearl .pricing-card--featured { background: var(--ivory-2); }
.section--ivory .pricing-card__label,
.section--ivory-2 .pricing-card__label,
.section--pearl .pricing-card__label { color: var(--brass); }
.section--ivory .pricing-card__rule,
.section--ivory-2 .pricing-card__rule,
.section--pearl .pricing-card__rule { background: var(--brass); }
.section--ivory .pricing-card__price,
.section--ivory-2 .pricing-card__price,
.section--pearl .pricing-card__price { color: var(--ink); }
.section--ivory .pricing-card__price small,
.section--ivory-2 .pricing-card__price small,
.section--pearl .pricing-card__price small { color: var(--slate); }
.section--ivory .pricing-card__body,
.section--ivory-2 .pricing-card__body,
.section--pearl .pricing-card__body { color: var(--slate); }

/* Port detail : default abyss */
.port-detail { border-top-color: var(--rule-dark); }
.port-detail__city { color: var(--brass-soft); }
.port-detail__body { color: var(--ivory-muted); }
.port-detail__meta { color: var(--ivory-muted); }
.port-detail__meta strong { color: var(--brass-soft); }
.section--ivory .port-detail,
.section--ivory-2 .port-detail,
.section--pearl .port-detail { border-top-color: var(--rule); }
.section--ivory .port-detail__city,
.section--ivory-2 .port-detail__city,
.section--pearl .port-detail__city { color: var(--brass); }
.section--ivory .port-detail__body,
.section--ivory-2 .port-detail__body,
.section--pearl .port-detail__body { color: var(--slate); }
.section--ivory .port-detail__meta,
.section--ivory-2 .port-detail__meta,
.section--pearl .port-detail__meta { color: var(--slate); }
.section--ivory .port-detail__meta strong,
.section--ivory-2 .port-detail__meta strong,
.section--pearl .port-detail__meta strong { color: var(--brass); }

/* Detail list : default abyss */
.detail-list__item { border-top-color: var(--rule-dark); }
.detail-list__item p { color: var(--ivory-muted); }
.section--ivory .detail-list__item,
.section--ivory-2 .detail-list__item,
.section--pearl .detail-list__item { border-top-color: var(--rule); }
.section--ivory .detail-list__item p,
.section--ivory-2 .detail-list__item p,
.section--pearl .detail-list__item p { color: var(--slate); }

/* Engagement items (garanties) : abyss-light */
.engagement-item {
  background: var(--abyss-light);
  border: 1px solid var(--rule-dark);
}
.engagement-item__num { color: var(--brass-soft); }
.engagement-item__body { color: var(--ivory-muted); }
.section--ivory .engagement-item,
.section--ivory-2 .engagement-item,
.section--pearl .engagement-item {
  background: var(--pearl);
  border: 1px solid var(--rule);
}
.section--ivory .engagement-item__num,
.section--ivory-2 .engagement-item__num,
.section--pearl .engagement-item__num { color: var(--brass); }
.section--ivory .engagement-item__body,
.section--ivory-2 .engagement-item__body,
.section--pearl .engagement-item__body { color: var(--slate); }

/* Hotline box : déjà midnight — OK */

/* Contact info cards : abyss-light */
.contact-info-card {
  background: var(--abyss-light);
  border-left: 2px solid var(--brass-soft);
}
.contact-info-card h4 { color: var(--ivory); }
.contact-info-card p { color: var(--ivory-muted); }
.contact-info-card a { color: var(--brass-soft); }
.section--ivory .contact-info-card,
.section--ivory-2 .contact-info-card,
.section--pearl .contact-info-card {
  background: var(--ivory-2);
  border-left-color: var(--brass);
}
.section--ivory .contact-info-card h4,
.section--ivory-2 .contact-info-card h4,
.section--pearl .contact-info-card h4 { color: var(--ink); }
.section--ivory .contact-info-card p,
.section--ivory-2 .contact-info-card p,
.section--pearl .contact-info-card p { color: var(--slate); }
.section--ivory .contact-info-card a,
.section--ivory-2 .contact-info-card a,
.section--pearl .contact-info-card a { color: var(--brass); }

/* Legal pages : on garde le mode ivory (body.is-legal handle it) — pas d'override dark */
.page-legal { background: var(--ivory); }
.page-legal main h3 { color: var(--ink); }
.page-legal main p, .page-legal main li { color: var(--slate); }
.page-legal main table th { background: var(--ivory-2); color: var(--ink); }

/* App Store badges : OK (déjà ink fond) */

/* R13 — Hero__band : reste ivory ribbon (signature éditoriale juste sous le hero fullscreen).
   Le ribbon ivory est la transition smooth depuis l'overlay ivory du hero fullscreen
   vers la zone abyss qui suit. Pas de changement par défaut.
   Sur les pages SANS hero fullscreen, le band ne devrait pas apparaître. */

/* CTA bloc lede & section--abyss / midnight defaults — already adapté plus haut */

/* Fix : .hero--light (utilisé sur pages secondaires ?) garde son fond ivory */
.hero--light { background: var(--ivory); color: var(--ink); }

/* R13 — bloc "showreel-mosaic" sur homepage : on le passe en abyss-deep pour rythme */
.showreel-mosaic {
  background: var(--abyss);
  color: var(--ivory);
}
.showreel-mosaic__head .h2,
.showreel-mosaic__head .h2 em { color: var(--ivory); }
.showreel-mosaic__head .h2 em { color: var(--brass-soft); }
.showreel-mosaic__quote { color: var(--ivory-muted); }
.showreel-mosaic__quote em { color: var(--brass-soft); }

/* R13 — section--ivory-2 sur homepage manifeste : on conserve son fond mais
   on doit lui ajouter une teinte de respiration. Pas de change — c'est la sect light prévue. */


/* ============================================
   Parcours en étapes — composant graphique
   (style Yotipro : pastilles copper, filet de liaison)
   ============================================ */
.parcours { display: grid; grid-template-columns: 1fr; gap: 0; }
.parcours__step { position: relative; }
.parcours__dot {
  flex: 0 0 56px;
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-copper); color: #fff;
  box-shadow: var(--shadow-2);
  position: relative; z-index: 2;
}
.parcours__dot svg { width: 24px; height: 24px; }
.parcours__num {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--brass-deep); margin-bottom: 6px;
}
.parcours__title {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px;
}
.parcours__text { font-size: 0.9375rem; line-height: 1.6; color: var(--slate-2); }

@media (max-width: 899px) {
  .parcours__step { display: flex; gap: 20px; padding-bottom: 36px; }
  .parcours__step:not(:last-child)::after {
    content: ""; position: absolute; left: 27px; top: 64px; bottom: 4px;
    width: 2px; background: var(--rule);
  }
}
@media (min-width: 900px) {
  .parcours { grid-template-columns: repeat(5, 1fr); }
  .parcours__step { display: block; text-align: center; padding: 0 14px; }
  .parcours__dot { margin: 0 auto 22px; }
  .parcours__step:not(:last-child)::after {
    content: ""; position: absolute; top: 27px; left: calc(50% + 40px);
    width: calc(100% - 80px); height: 2px; background: var(--rule);
  }
}
.section--abyss .parcours__title { color: var(--ivory); }
.section--abyss .parcours__text { color: var(--ivory-muted); }
.section--abyss .parcours__step:not(:last-child)::after { background: var(--rule-dark); }
.section--abyss .parcours__num { color: var(--brass-soft); }

/* ============================================
   Vitrine application — mockup + cartes
   ============================================ */
.app-showcase { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .app-showcase { grid-template-columns: minmax(260px, 330px) 1fr; gap: 72px; }
}
.phone-mock {
  width: 100%; max-width: 320px; height: auto; margin: 0 auto; display: block;
  filter: drop-shadow(0 26px 52px rgba(12, 24, 41, 0.20));
}

/* Points clés application — compact, sans cadre */
.app-points { display: grid; grid-template-columns: 1fr; gap: 32px 36px; }
@media (min-width: 620px) { .app-points { grid-template-columns: repeat(2, 1fr); } }
.app-point__icon { width: 28px; height: 28px; color: var(--brass); margin-bottom: 14px; }
.app-point__title {
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px;
}
.app-point__text { font-size: 0.9375rem; line-height: 1.65; color: var(--slate-2); }

/* Grille de principes : pastilles sans filet de liaison */
.section--abyss .parcours[style*="auto-fit"] .parcours__step::after { display: none; }

/* ============================================
   Schéma comparatif « sans / avec »
   ============================================ */
.compare { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 880px) { .compare { grid-template-columns: 1fr 1fr; gap: 32px; } }
.compare__col { border-radius: var(--r-lg); padding: 36px 32px; }
.compare__col--before { background: var(--pearl); border: 1px solid var(--rule); }
.compare__col--after {
  background: var(--grad-ocean); border: 1px solid transparent;
  box-shadow: var(--shadow-3); color: var(--ivory);
}
.compare__label {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.compare__col--before .compare__label { color: var(--slate-2); }
.compare__col--after .compare__label { color: #E8C9AC; } /* copper éclairci : 5.6:1 sur le dégradé navy */
.compare__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin-bottom: 26px; }
.compare__col--before .compare__title { color: var(--ink); }
.compare__col--after .compare__title { color: #FFFFFF; }
.compare__list { list-style: none; display: grid; gap: 15px; margin: 0; padding: 0; }
.compare__item { display: flex; gap: 14px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.55; }
.compare__col--before .compare__item { color: var(--slate-2); }
.compare__col--after .compare__item { color: rgba(255, 255, 255, 0.9); }
.compare__ico {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
}
.compare__ico svg { width: 13px; height: 13px; }
.compare__ico--x { background: rgba(220, 38, 38, 0.10); color: #DC2626; }
.compare__ico--v { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }

/* ============================================
   Bande vidéo pleine largeur
   ============================================ */
.video-band { position: relative; overflow: hidden; height: clamp(300px, 44vh, 480px); }
.video-band video, .video-band img.video-band__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.video-band__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,30,54,.74) 0%, rgba(5,30,54,.58) 100%); }
.video-band__inner {
  position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 0 var(--pad-x);
}
.video-band__title {
  font-family: var(--font-display); color: #FFFFFF;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.12; max-width: 20ch; margin-bottom: 16px;
}
.video-band__sub { color: rgba(255,255,255,.82); font-size: 1.0625rem; max-width: 52ch; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .video-band video { display: none; } }

/* ============================================
   Cartes de service — image + accroche + lien
   ============================================ */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--pearl); border: 1px solid var(--rule);
  border-radius: var(--r-lg); text-decoration: none;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.svc-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.svc-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ivory-2); }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--t-slow); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }
.svc-card__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 28px; }
.svc-card__num {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--brass-deep); margin-bottom: 10px;
}
.svc-card__title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; color: var(--ink); margin-bottom: 10px; }
.svc-card__text { font-size: 0.9375rem; line-height: 1.6; color: var(--slate-2); margin-bottom: 20px; flex: 1; }
.svc-card__link {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-deep);
  display: inline-flex; align-items: center; gap: 8px; transition: gap var(--t-base);
}
.svc-card:hover .svc-card__link { gap: 14px; }
.section--abyss .svc-card, .section--midnight .svc-card { background: var(--abyss-light); border-color: var(--rule-dark); }
.section--abyss .svc-card__title, .section--midnight .svc-card__title { color: var(--ivory); }
.section--abyss .svc-card__text, .section--midnight .svc-card__text { color: var(--ivory-muted); }
.section--abyss .svc-card__num, .section--midnight .svc-card__num,
.section--abyss .svc-card__link, .section--midnight .svc-card__link { color: var(--brass-soft); }

/* Grille de 4 cartes : une seule rangée sur grand écran (pas d'orpheline) */
@media (min-width: 1280px) { .app-features--quad { grid-template-columns: repeat(4, 1fr); } }

/* ============================================
   Correctifs de lisibilité
   ============================================ */
/* Pages légales : main a un fond clair — les titres doivent être sombres.
   (la règle générique les mettait en --ivory, soit la même teinte que le fond) */
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h1,
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h2,
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h3,
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h4 { color: var(--ink); }
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) a { color: var(--brass-deep); }
body.page-legal > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) .eyebrow { color: var(--brass-deep); }

/* Parcours sur fond midnight / abyss-deep : mêmes surcharges que sur abyss */
.section--midnight .parcours__title,
.section--abyss-deep .parcours__title { color: var(--ivory); }
.section--midnight .parcours__text,
.section--abyss-deep .parcours__text { color: var(--ivory-muted); }
.section--midnight .parcours__num,
.section--abyss-deep .parcours__num { color: var(--brass-soft); }
.section--midnight .parcours__step:not(:last-child)::after,
.section--abyss-deep .parcours__step:not(:last-child)::after { background: var(--rule-dark); }

/* Cartes de service sur fond abyss-deep */
.section--abyss-deep .svc-card { background: var(--abyss-light); border-color: var(--rule-dark); }
.section--abyss-deep .svc-card__title { color: var(--ivory); }
.section--abyss-deep .svc-card__text { color: var(--ivory-muted); }

/* ============================================
   Ports — simple liste de vignettes, sans détail
   ============================================ */
.ports-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 700px)  { .ports-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ports-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.port-tile {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  aspect-ratio: 4 / 3; display: block;
  box-shadow: var(--shadow-1);
}
.port-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--t-slow); }
.port-tile:hover img { transform: scale(1.05); }
.port-tile__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,30,54,0) 35%, rgba(5,30,54,.55) 70%, rgba(5,30,54,.85) 100%);
}
.port-tile__name {
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: var(--font-display); font-size: 1.375rem; line-height: 1.15;
  color: #FFFFFF; text-shadow: 0 1px 12px rgba(5,30,54,.5);
}
@media (max-width: 480px) { .port-tile__name { font-size: 1.125rem; left: 14px; right: 14px; bottom: 14px; } }

/* Mobile : sur l'accueil, les cartes de service gardent l'image et le titre,
   le descriptif est masqué pour raccourcir la page */
@media (max-width: 700px) {
  #services .svc-card__text { display: none; }
  #services .svc-card__body { padding: 18px 18px 20px; }
  #services .svc-card__title { margin-bottom: 12px; }
  #services .svc-grid { gap: 16px; grid-template-columns: repeat(2, 1fr); }
  #services .svc-card__media { aspect-ratio: 4 / 3; }
  #services .svc-card__title { font-size: 1.0625rem; }
  #services .svc-card__num { margin-bottom: 6px; }
  #services .svc-card__link { font-size: 0.6875rem; }
}