/* ============================================================
   Deta Piece — MD3 tokens
   Palette : anthracite → bleu accent → blanc
   ============================================================ */

:root {
  /* Noirs / anthracite (identité) */
  --ink-950: #07080a;
  --ink-900: #0d0f12;
  --ink-800: #14171c;
  --ink-700: #1c2027;
  --ink-600: #262b34;
  --ink-500: #343a46;

  /* Bleu accent */
  --blue-600: #1a56db;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --blue-100: #dbe6ff;

  /* Neutres clairs */
  --white:    #ffffff;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #dfe3ea;
  --gray-400: #9aa4b5;
  --gray-700: #2b3446;
  --gray-900: #0b1220;

  /* Layout */
  --header-h: 64px;

  /* MD3 semantic — LIGHT */
  --md-primary:              var(--blue-600);
  --md-primary-hover:        #1646b3;
  --md-on-primary:           var(--white);
  --md-primary-container:    var(--blue-100);
  --md-on-primary-container: var(--ink-900);

  --md-surface:    var(--white);
  --md-surface-2:  var(--gray-50);
  --md-on-surface: var(--ink-900);
  --md-outline:    var(--gray-200);

  --md-radius:    12px;
  --md-radius-lg: 16px;
  --md-elev-1: 0 1px 2px rgba(7,8,10,.06), 0 1px 3px rgba(7,8,10,.06);
  --md-elev-2: 0 4px 12px rgba(7,8,10,.08);
  --md-elev-3: 0 12px 28px rgba(7,8,10,.14);

  --md-ease: cubic-bezier(.2,.8,.2,1);
  --md-dur: 200ms;
}

:root[data-theme="dark"] {
  --md-primary:              var(--blue-400);
  --md-primary-hover:        #60a5fa;
  --md-on-primary:           var(--ink-950);
  --md-primary-container:    var(--ink-700);
  --md-on-primary-container: var(--blue-100);

  --md-surface:    var(--ink-950);
  --md-surface-2:  var(--ink-900);
  --md-on-surface: #e9ecf2;
  --md-outline:    #232830;

  --md-elev-1: 0 1px 2px rgba(0,0,0,.6);
  --md-elev-2: 0 4px 12px rgba(0,0,0,.6);
  --md-elev-3: 0 12px 28px rgba(0,0,0,.7);
}

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

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

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  background: var(--md-surface);
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--md-dur) var(--md-ease),
              color var(--md-dur) var(--md-ease);
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

/* ---------- MD3 primitives ---------- */
.md-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.15rem;
  border: 0;
  border-radius: 999px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--md-elev-1);
  transition: background var(--md-dur) var(--md-ease),
              transform var(--md-dur) var(--md-ease),
              box-shadow var(--md-dur) var(--md-ease);
}
.md-btn:hover  { background: var(--md-primary-hover); box-shadow: var(--md-elev-2); transform: translateY(-1px); }
.md-btn:active { transform: translateY(0) scale(.98); }
.md-btn.full   { width: 100%; }

.md-card {
  background: var(--md-surface-2);
  border-radius: var(--md-radius-lg);
  box-shadow: var(--md-elev-1);
  transition: transform var(--md-dur) var(--md-ease),
              box-shadow var(--md-dur) var(--md-ease);
}
.md-card:hover { transform: translateY(-4px); box-shadow: var(--md-elev-3); }

/* ---------- Ripple ---------- */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(255,255,255,.45);
  pointer-events: none;
  animation: ripple .6s var(--md-ease);
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--md-ease), transform .5s var(--md-ease);
}
.reveal.in { opacity: 1; transform: none; }

.no-js .reveal { opacity: 1; transform: none; }

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