/* ==========================================================================
   NORVELIS — base.css
   Design tokens, reset, typographie de fondation.
   ========================================================================== */

:root {
  /* ----- Couleurs de marque ----- */
  --nv-navy:        #0B1E3D;   /* bleu marine — couleur signature */
  --nv-navy-900:    #081733;
  --nv-navy-700:    #16305c;
  --nv-navy-500:    #2c4c7e;
  --nv-gold:        #C7A76B;   /* doré — accent rare, jamais dominant */
  --nv-gold-600:    #b8935a;
  --nv-gold-100:    #efe6d4;

  /* ----- Neutres ----- */
  --nv-paper:       #ffffff;   /* fond principal, beaucoup de blanc */
  --nv-mist:        #f6f5f2;   /* fond alterné, blanc cassé très discret */
  --nv-ink:         #101826;   /* texte courant sur fond clair */
  --nv-ink-soft:    #4a5568;   /* texte secondaire */
  --nv-line:        rgba(11, 30, 61, 0.10); /* filets hairline */
  --nv-line-strong: rgba(11, 30, 61, 0.18);
  --nv-on-navy:     rgba(255, 255, 255, 0.92); /* texte sur marine */
  --nv-on-navy-soft:rgba(255, 255, 255, 0.60);

  /* ----- Typographie ----- */
  --nv-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nv-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle typographique fluide (clamp min → max) */
  --nv-fs-eyebrow: 0.75rem;
  --nv-fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --nv-fs-lead:    clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --nv-fs-h4:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --nv-fs-h3:      clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --nv-fs-h2:      clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --nv-fs-h1:      clamp(2.8rem, 1.9rem + 4.4vw, 5.25rem);

  --nv-lh-tight:   1.06;
  --nv-lh-snug:    1.2;
  --nv-lh-body:    1.68;

  /* ----- Rythme spatial (échelle modulaire) ----- */
  --nv-space-2xs:  0.5rem;
  --nv-space-xs:   0.75rem;
  --nv-space-sm:   1rem;
  --nv-space-md:   1.5rem;
  --nv-space-lg:   2.5rem;
  --nv-space-xl:   4rem;
  --nv-space-2xl:  6rem;
  --nv-space-3xl:  clamp(5rem, 4rem + 6vw, 9.5rem); /* respiration verticale des sections */

  /* ----- Structure ----- */
  --nv-container:      1240px;
  --nv-container-slim: 780px;   /* largeur de lecture confortable */
  --nv-gutter:         clamp(1.5rem, 5vw, 5rem); /* très grandes marges */
  --nv-radius:         2px;      /* angles quasi droits, esprit éditorial */
  --nv-radius-lg:      6px;

  /* ----- Mouvement ----- */
  --nv-ease:      cubic-bezier(0.22, 1, 0.36, 1); /* sortie douce, premium */
  --nv-ease-inout:cubic-bezier(0.65, 0, 0.35, 1);
  --nv-dur:       0.6s;
  --nv-dur-fast:  0.28s;

  /* ----- Ombres (rares, très diffuses) ----- */
  --nv-shadow-soft: 0 24px 60px -32px rgba(11, 30, 61, 0.28);
  --nv-shadow-lift: 0 40px 90px -40px rgba(11, 30, 61, 0.40);

  /* ----- Header ----- */
  --nv-header-h: 84px;
  --nv-z-header: 1000;
}

/* ----- Reset maîtrisé ----- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nv-header-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--nv-paper);
  color: var(--nv-ink);
  font-family: var(--nv-font-body);
  font-size: var(--nv-fs-body);
  line-height: var(--nv-lh-body);
  font-weight: 400;
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--nv-dur-fast) var(--nv-ease);
}

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

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

/* ----- Titres ----- */
h1, h2, h3, h4 {
  font-family: var(--nv-font-display);
  font-weight: 500;
  color: var(--nv-navy);
  line-height: var(--nv-lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--nv-space-md);
  text-wrap: balance;
}

h1 { font-size: var(--nv-fs-h1); line-height: var(--nv-lh-tight); }
h2 { font-size: var(--nv-fs-h2); }
h3 { font-size: var(--nv-fs-h3); }
h4 { font-size: var(--nv-fs-h4); font-weight: 600; }

p { margin: 0 0 var(--nv-space-md); max-width: 66ch; }

strong { font-weight: 700; color: var(--nv-navy); }

::selection {
  background: var(--nv-navy);
  color: #fff;
}

/* ----- Accessibilité : lien d'évitement + focus ----- */
.nv-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.85rem 1.25rem;
  background: var(--nv-navy);
  color: #fff;
  font-family: var(--nv-font-body);
  font-weight: 600;
  border-radius: 0 0 var(--nv-radius) 0;
}
.nv-skip-link:focus { left: 0; }

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

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}