/* ============================================
   NautiPro — Base (reset, typography, a11y)
   ============================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  /* R13 — bascule dark dominant (cannesa7 style) */
  background: var(--abyss);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* R13 — pages légales gardent le fond ivory pour lisibilité administrative */
body.is-legal,
body.page-legal {
  background: var(--ivory);
  color: var(--ink);
}
body.page-legal main { background: var(--ivory); }

img, picture, video, svg {
  max-width: 100%;
  display: block;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  /* R13 — inherit du body (ivory sur abyss / ink sur ivory) */
  color: inherit;
}

em { font-style: italic; }

/* ============================================
   Skip link
   ============================================ */
.skip-link {
  position: absolute;
  top: -80px;
  left: 0;
  background: var(--abyss);
  color: var(--ivory);
  padding: 12px 20px;
  z-index: 9999;
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
}
.skip-link:focus { top: 0; }

/* ============================================
   Focus
   ============================================ */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
}

/* ============================================
   Selection
   ============================================ */
::selection {
  background: var(--brass);
  color: var(--abyss);
}

/* ============================================
   Eyebrow + filets (signature)
   ============================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 24px 0;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--brass);
}
.eyebrow--soft { color: var(--brass-soft); }
.eyebrow--soft::before { background: var(--brass-soft); }

/* ============================================
   Typography helpers
   ============================================ */
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 1.2;
}

.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lede);
  line-height: var(--lh-base);
  /* R13 — par défaut sur abyss : ivory-soft. Surchargé dans .section--ivory ci-dessous */
  color: var(--ivory-soft);
  font-variation-settings: "opsz" 24;
}
.lede--dark { color: var(--ivory-soft); }
.section--ivory .lede,
.section--ivory-2 .lede,
.section--pearl .lede { color: var(--slate); }

.body-serif {
  font-family: var(--font-serif);
  font-size: var(--fs-body-serif);
  font-variation-settings: "opsz" 24;
  line-height: var(--lh-loose);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--slate-soft);
  line-height: var(--lh-base);
}
.section--ivory .caption,
.section--ivory-2 .caption,
.section--pearl .caption { color: var(--slate-2); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
}

.text-center { text-align: center; }
.text-muted { color: var(--slate-soft); }
.section--ivory .text-muted,
.section--ivory-2 .text-muted,
.section--pearl .text-muted { color: var(--slate); }
.text-ivory { color: var(--ivory); }

/* ============================================
   Containers + sections
   ============================================ */
.container { max-width: var(--container-wide); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--prose  { max-width: var(--container-prose);  margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.container--ultra  { max-width: var(--container-ultra);  margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }

.section { padding: var(--s-9) 0; }
.section--signature { padding: var(--s-11) 0; }
.section--dense { padding: var(--s-8) 0; }

@media (min-width: 768px) {
  .section { padding: var(--s-10) 0; }
  .section--signature { padding: var(--s-11) 0; }
}

/* R13 — Section variants
   Default sections (no variant) héritent de body abyss ivory.
   .section--ivory / --ivory-2 / --pearl = respirations light explicites.
   .section--abyss / --midnight / --abyss-deep = explicites pour les zones les plus profondes. */
.section--ivory     { background: var(--ivory); color: var(--ink); }
.section--ivory-2   { background: var(--ivory-2); color: var(--ink); }
.section--pearl     { background: var(--pearl); color: var(--ink); }
.section--abyss     { background: var(--abyss); color: var(--ivory); }
.section--abyss-deep { background: var(--abyss-deep); color: var(--ivory); }
.section--midnight  { background: var(--midnight); color: var(--ivory); }

/* Sections light : titres en ink */
.section--ivory h1, .section--ivory h2, .section--ivory h3, .section--ivory h4,
.section--ivory-2 h1, .section--ivory-2 h2, .section--ivory-2 h3, .section--ivory-2 h4,
.section--pearl h1, .section--pearl h2, .section--pearl h3, .section--pearl h4 { color: var(--ink); }

/* Sections light : eyebrow en brass-deep */
.section--ivory .eyebrow,
.section--ivory-2 .eyebrow,
.section--pearl .eyebrow { color: var(--brass-deep); }
.section--ivory .eyebrow::before,
.section--ivory-2 .eyebrow::before,
.section--pearl .eyebrow::before { background: var(--brass-deep); }

/* Sections dark explicites : eyebrow en brass-soft */
.section--midnight .eyebrow,
.section--abyss .eyebrow,
.section--abyss-deep .eyebrow { color: var(--brass-soft); }
.section--midnight .eyebrow::before,
.section--abyss .eyebrow::before,
.section--abyss-deep .eyebrow::before { background: var(--brass-soft); }

/* Sections dark : titres ivory + brass em */
.section--midnight h1, .section--midnight h2, .section--midnight h3, .section--midnight h4,
.section--abyss h1, .section--abyss h2, .section--abyss h3, .section--abyss h4,
.section--abyss-deep h1, .section--abyss-deep h2, .section--abyss-deep h3, .section--abyss-deep h4 { color: var(--ivory); }
.section--midnight h1 em, .section--midnight h2 em, .section--midnight h3 em,
.section--abyss h1 em, .section--abyss h2 em, .section--abyss h3 em,
.section--abyss-deep h1 em, .section--abyss-deep h2 em, .section--abyss-deep h3 em { color: var(--brass-soft); }

/* Body default (sans .section--*) — abyss dominant : titres ivory */
body > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h1,
body > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h2,
body > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h3,
body > main > .section:not(.section--ivory):not(.section--ivory-2):not(.section--pearl) h4 { color: var(--ivory); }

/* Filets (filet laiton signature) */
.rule { display: block; width: 100%; height: 1px; background: var(--rule-brass-dark); border: 0; margin: 0; }
.rule--dark { background: var(--rule-dark); }
.section--ivory .rule,
.section--ivory-2 .rule,
.section--pearl .rule { background: var(--rule); }
.rule--brass-24 { width: 24px; height: 1px; background: var(--brass); border: 0; margin: 24px 0; }
.rule--brass-40 { width: 40px; height: 1px; background: var(--brass); border: 0; margin: 24px 0; }
.rule--brass-80 { width: 80px; height: 1px; background: var(--brass); border: 0; margin: 32px 0; }

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}