/* ==========================================================================
   Nivlak Studio — core.css
   Tokens, reset, typographie, rythme des sections, boutons, formulaires,
   système de reveal. Tout le reste en dépend.
   ========================================================================== */

/* ------------------------------------------------------------------ fontes */
@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Fraunces : variable 300–800. Instrument Serif n'existait qu'en 400, ce qui
   rendait les titres trop maigres face aux boutons — d'où le changement. */
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Repli métriquement ajusté : supprime le décalage au swap (anti-CLS).
   Réglé pour approcher les métriques d'Instrument Sans. */
@font-face {
  font-family: "Nivlak Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans");
  size-adjust: 97%;
  ascent-override: 96%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */
:root {
  /* encre */
  --ink: #303030;
  --ink-deep: #202020;
  --fg: var(--ink);
  --fg-muted: #5e5e64;
  --fg-faint: #8c8c94;

  /* accent — #8090F0 ne porte JAMAIS de texte (2,93:1 sur blanc) */
  --accent: #8090f0;
  --accent-2: #80a0f0;
  --accent-600: #4e5fd6;      /* tout support portant du texte blanc — 5,2:1 */
  --accent-700: #3f4fbe;
  --accent-050: #f1f3fe;
  --accent-100: #e3e7fc;

  /* papier */
  --paper: #ffffff;
  --paper-alt: #f7f8fc;
  --line: #e7e9f2;
  --card-bg: var(--paper);

  /* rayons */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* élévations — teintées, jamais grises */
  --shadow-sm: 0 1px 2px rgba(32, 32, 32, .04), 0 4px 12px -4px rgba(48, 48, 48, .06);
  --shadow-md: 0 2px 4px rgba(32, 32, 32, .04), 0 12px 28px -10px rgba(48, 48, 48, .10);
  --shadow-lift: 0 2px 4px rgba(32, 32, 32, .04), 0 18px 40px -16px rgba(78, 95, 214, .22);

  /* courbes — la longue traîne est ce qui lit « premium » */
  --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .30, 1);
  --ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* typographie */
  --font-sans: "Instrument Sans", "Nivlak Fallback", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --display-weight: 700;

  --step--1: clamp(.8125rem, .79rem + .12vw, .875rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + .37vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.22rem + .73vw, 1.75rem);
  --step-3: clamp(1.625rem, 1.33rem + 1.46vw, 2.375rem);
  --step-4: clamp(2rem, 1.5rem + 2.44vw, 3.25rem);
  /* 390px → 42px · 1440px → 88px */
  --display: clamp(2.625rem, 1.556rem + 4.38vw, 5.5rem);

  --measure: 68ch;
  --measure-tight: 34ch;

  /* espacements */
  --gutter: clamp(1.25rem, .8rem + 2vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gap-block: clamp(2rem, 1.4rem + 2.4vw, 4rem);
  --container: 1220px;
  --container-wide: 1400px;

  --hdr-h: 72px;
  --hdr-top: 16px;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
  scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

img { height: auto; }

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

button { background: none; border: 0; }

ul[class],
ol[class] { list-style: none; padding: 0; }

a { color: var(--accent-600); text-decoration-thickness: 1px; text-underline-offset: .18em; }

:target { scroll-margin-top: calc(var(--hdr-h) + 32px); }

/* focus — visible partout, jamais supprimé */
:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  translate: -50% -120%;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink-deep);
  color: #fff;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: translate 200ms var(--ease-out-quint);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ------------------------------------------------------------ typographie */
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.display,
h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-optical-sizing: auto;
  font-size: var(--display);
  line-height: 1.02;
  letter-spacing: -.028em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-optical-sizing: auto;
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -.024em;
}

h3, .h3 {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.015em;
}

h4, .h4 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.012em;
}

.accent { color: var(--accent-600); }

/* sur fond anthracite l'accent clair redevient lisible et vibrant */
.section--ink .accent { color: var(--accent); }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.lead {
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.muted { color: var(--fg-muted); }

/* --------------------------------------------------- rythme des sections */
.section {
  background: var(--section-bg, var(--paper));
  color: var(--fg);
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  --section-bg: var(--paper-alt);
  --card-bg: var(--paper);
  --line: #e2e5f0;
}

.section--ink {
  --section-bg: var(--ink-deep);
  --fg: #ffffff;
  --fg-muted: #b4b4bc;
  --fg-faint: #9a9aa4;
  --line: rgba(255, 255, 255, .12);
  --card-bg: rgba(255, 255, 255, .05);
}

.section--tight { padding-block: calc(var(--section-y) * .62); }
.section--bleed { padding-inline: 0; }

.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.container--wide { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.container--narrow { width: min(760px, 100% - 2 * var(--gutter)); }

/* en-tête de section */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: var(--gap-block);
  max-width: 46rem;
}
.sec-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* ---------------------------------------------------------------- boutons */
.btn {
  --btn-bg: var(--accent-600);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .75rem 1.6rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out-quint),
    border-color 200ms var(--ease-out-quint),
    box-shadow 240ms var(--ease-out-quint),
    transform 240ms var(--ease-out-quint);
}
.btn:hover {
  --btn-bg: var(--accent-700);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
}
.btn--ghost:hover {
  --btn-bg: var(--accent-050);
  --btn-bd: var(--accent-100);
  --btn-fg: var(--accent-700);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--accent-700);
}
.btn--light:hover { --btn-bg: #f2f4ff; }

.btn--on-ink {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .28);
}
.btn--on-ink:hover {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-bd: rgba(255, 255, 255, .5);
}

.btn--lg { min-height: 56px; padding: .9rem 2rem; font-size: var(--step-1); }
.btn--block { width: 100%; }

/* Sur mobile les gros boutons écrasaient le titre : on les ramène
   à une échelle cohérente avec le texte. */
@media (max-width: 600px) {
  .btn { min-height: 46px; padding: .65rem 1.25rem; font-size: var(--step-0); }
  .btn--lg { min-height: 50px; padding: .75rem 1.5rem; font-size: var(--step-0); }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* lien fléché */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent-600);
}
.link-arrow svg,
.link-arrow .arw {
  transition: translate 240ms var(--ease-out-quint);
}
.link-arrow:hover svg,
.link-arrow:hover .arw { translate: 4px 0; }

/* ------------------------------------------------------------------ cartes */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
}

.card--lift {
  transition:
    transform 320ms var(--ease-out-quint),
    box-shadow 320ms var(--ease-out-quint),
    border-color 320ms var(--ease-out-quint);
}
.card--lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent-100);
}

/* pastille d'icône */
.icon-chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--accent-050);
  color: var(--accent-600);
  border: 1px solid var(--accent-100);
}
.section--ink .icon-chip {
  background: rgba(128, 144, 240, .16);
  border-color: rgba(128, 144, 240, .3);
  color: #fff;
}
.icon-chip svg { width: 20px; height: 20px; }

/* pastille texte */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--card-bg);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--fg-muted);
}
.pill--accent {
  background: var(--accent-050);
  border-color: var(--accent-100);
  color: var(--accent-700);
}

/* ------------------------------------------------------------ formulaires */
.field { display: flex; flex-direction: column; gap: .4rem; }

.label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .01em;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color 180ms var(--ease-out-quint), box-shadow 180ms var(--ease-out-quint);
}
.textarea { min-height: 140px; resize: vertical; padding-top: .85rem; }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--accent-600);
  box-shadow: 0 0 0 3px rgba(78, 95, 214, .16);
}

.input:user-invalid,
.textarea:user-invalid,
.select:user-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.hint { font-size: var(--step--1); color: var(--fg-faint); }

/* ------------------------------------------------------- système de reveal
   L'état masqué ne s'applique QUE si .js est présent — un plantage de
   app.js ne peut donc pas produire une page blanche.
   On utilise translate:/scale: (propriétés indépendantes) et non transform:,
   sinon le hover translateY(-6px) des cartes écrase l'état du reveal.        */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    translate: 0 var(--reveal-y, 28px);
    scale: var(--reveal-s, 1);
    transition:
      opacity var(--reveal-dur, 720ms) var(--ease-out-expo) var(--reveal-delay, 0ms),
      translate var(--reveal-dur, 720ms) var(--ease-out-quint) var(--reveal-delay, 0ms),
      scale var(--reveal-dur, 720ms) var(--ease-out-quint) var(--reveal-delay, 0ms);
    will-change: opacity, translate;
  }

  .js [data-reveal="up-sm"] { --reveal-y: 16px; }
  .js [data-reveal="up-lg"] { --reveal-y: 48px; }
  .js [data-reveal="scale"] { --reveal-y: 20px; --reveal-s: .97; }
  .js [data-reveal="fade"] { --reveal-y: 0px; }

  .js [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    will-change: auto;
  }
}

/* ------------------------------------------------------- mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------ pastille d'appel
   Fixe, présente sur toutes les pages. Sous le header (100) et sous le menu
   plein écran (99) : elle disparaît donc naturellement quand le menu est
   ouvert, qui propose déjà le numéro.                                      */
.fab {
  position: fixed;
  right: clamp(14px, 3vw, 24px);
  bottom: clamp(14px, 3vw, 24px);
  z-index: 90;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-600);
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 6px 20px -6px rgba(78, 95, 214, .55),
    0 2px 6px rgba(32, 32, 32, .12);
  transition:
    background-color 200ms var(--ease-out-quint),
    transform 240ms var(--ease-out-quint),
    box-shadow 240ms var(--ease-out-quint);
}
.fab:hover {
  background: var(--accent-700);
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px -8px rgba(78, 95, 214, .6),
    0 2px 6px rgba(32, 32, 32, .14);
}
.fab:active { transform: translateY(0); }
.fab > svg { width: 22px; height: 22px; }

/* anneau qui pulse — purement décoratif */
.fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  pointer-events: none;
}

/* infobulle avec le numéro, uniquement là où il y a un vrai survol */
.fab__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  translate: 6px -50%;
  padding: .4rem .75rem;
  border-radius: var(--r-pill);
  background: var(--ink-deep);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 200ms var(--ease-out-quint),
    translate 240ms var(--ease-out-quint);
}
@media (hover: hover) {
  .fab:hover .fab__label { opacity: 1; translate: 0 -50%; }
}
.fab:focus-visible .fab__label { opacity: 1; translate: 0 -50%; }

/* Pas de fill-mode ni de délai sur l'entrée : la pastille reste visible même
   si l'animation ne se joue pas. */
@media (prefers-reduced-motion: no-preference) {
  .fab { animation: fabIn 520ms var(--ease-spring); }
  .fab::before { animation: fabPulse 2.8s var(--ease-out-quint) infinite; }
  .fab > svg { animation: fabRing 5s ease-in-out infinite; }
}
@keyframes fabIn {
  from { opacity: 0; scale: .5; }
  to { opacity: 1; scale: 1; }
}
@keyframes fabPulse {
  0%        { transform: scale(1);    opacity: .5; }
  70%, 100% { transform: scale(1.45); opacity: 0; }
}
@keyframes fabRing {
  0%, 86%, 100% { rotate: 0deg; }
  88% { rotate: -13deg; }
  90% { rotate: 11deg; }
  92% { rotate: -8deg; }
  94% { rotate: 5deg; }
  96% { rotate: -2deg; }
}

/* --------------------------------------------------------------- utilitaires */
.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }