/* ============================================================
   main.css — Grizee
   Reset · Variables · Typographie · Utilitaires globaux
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; }

/* ── Variables — Light mode (défaut) ─────────────────────── */
html:not([data-theme]),
html[data-theme="light"] {
  --brand:       #F5B800;
  --brand-dark:  #D9A100;
  --brand-light: #FFF8E1;
  --brand-dim:   rgba(245,184,0,.13);
  --brand-text:  #8A6A00;   /* jaune assombri, lisible sur fond clair (4,6:1) */

  --dark:   #1D1D1F;   /* Apple near-black */
  --text:   #1D1D1F;
  --muted:  #6E6E73;   /* Apple gray */
  --border: #E5E5EA;   /* Apple separator */
  --bg:     #FFFFFF;
  --bg-alt: #F5F5F7;   /* Apple section gray */
  --white:  #FFFFFF;
  --danger: #FF3B30;   /* Apple red */

  /* Sections intentionnellement sombres (reforme, CTA) */
  --panel-dark:       #000000;
  --panel-dark-text:  #F5F5F7;
  --panel-dark-muted: rgba(245,245,247,.60);

  --shadow-sm:    0 1px 4px rgba(0,0,0,.07), 0 2px 12px rgba(0,0,0,.05);
  --shadow-md:    0 2px 8px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);
  --shadow-lg:    0 4px 16px rgba(0,0,0,.10), 0 20px 60px rgba(0,0,0,.12);
  --shadow-brand: 0 4px 24px rgba(245,184,0,.38);

  --r:    20px;
  --r-sm: 12px;
  --r-xs: 6px;

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Variables — Dark mode ───────────────────────────────── */
html[data-theme="dark"] {
  --brand:       #F5B800;
  --brand-dark:  #D9A100;
  --brand-light: rgba(245,184,0,.14);
  --brand-text:  #F5B800;   /* sur fond sombre, l'accent d'origine est lisible */
  --brand-dim:   rgba(245,184,0,.10);

  --dark:   #F0F6FC;
  --text:   #C9D1D9;
  --muted:  #8B949E;
  --border: #30363D;
  --bg:     #0D1117;
  --bg-alt: #0A0F16;
  --white:  #161B22;
  --danger: #FF453A;   /* Apple dark red */

  --panel-dark:       #1A2332;
  --panel-dark-text:  #F0F6FC;
  --panel-dark-muted: #8B949E;

  --shadow-sm:    0 1px 3px rgba(0,0,0,.4), 0 1px 8px rgba(0,0,0,.3);
  --shadow-md:    0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:    0 2px 8px rgba(0,0,0,.5), 0 12px 40px rgba(0,0,0,.45);
  --shadow-brand: 0 4px 20px rgba(245,184,0,.25);

  --r:    16px;
  --r-sm: 10px;
  --r-xs: 6px;

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Typography base ─────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--dark);
}

/* ── Layout ──────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 760px; }
.container--wide   { max-width: 1300px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; border-radius: 100px;
  transition:
    background-color 160ms var(--ease-out),
    color            160ms var(--ease-out),
    border-color     160ms var(--ease-out),
    box-shadow       200ms var(--ease-out),
    transform        140ms var(--ease-out);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97) !important; transition-duration: 80ms !important; }

.btn--primary {
  background: var(--brand); color: var(--dark);
  box-shadow: var(--shadow-brand);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(245,184,0,.5);
  }
}

.btn--outline {
  background: var(--white); color: var(--text);
  border: 1.5px solid var(--border);
}
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { border-color: var(--brand); color: var(--brand-dark); transform: translateY(-2px); }
}

.btn--ghost {
  background: none; color: var(--text); border: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--brand-light); color: var(--brand-dark); }
}

.btn--dark {
  background: var(--white); color: var(--dark);
  box-shadow: var(--shadow-brand);
}
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { background: var(--brand-light); transform: translateY(-2px); }
}

/* Sizes */
.btn--sm { font-size: 13px; padding: 8px 16px; }
.btn--md { font-size: 14px; padding: 10px 22px; }
.btn--lg { font-size: 16px; padding: 14px 32px; }
.btn--xl { font-size: 17px; padding: 17px 40px; }

/* ── Theme toggle ────────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  background: none; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); flex-shrink: 0;
  transition:
    border-color 160ms var(--ease-out),
    color        160ms var(--ease-out),
    background   160ms var(--ease-out),
    transform    140ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-light); }
}
.theme-toggle:active { transform: scale(0.93); }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

/* ── Badges / Tags ───────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  padding: 5px 13px; border-radius: 100px;
}
.tag--brand {
  background: var(--brand-light); color: #92650A;
  border: 1px solid rgba(245,184,0,.3);
}
html[data-theme="dark"] .tag--brand { color: var(--brand); }
.tag--dark {
  background: var(--brand-dim); color: var(--brand);
  border: 1px solid rgba(245,184,0,.3);
}
.tag--neutral {
  background: var(--white); color: var(--muted);
  border: 1px solid var(--border);
}
.tag--urgent {
  background: rgba(239,68,68,.15); color: #FCA5A5;
  border: 1px solid rgba(239,68,68,.3);
}
.tag-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* ── Section chrome ──────────────────────────────────────── */
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  /* --brand-dark (#D9A100) sur blanc ne donne que 2,32:1 pour du 12 px :
     ton assombri, reserve au petit texte, l'accent de marque est inchange. */
  color: var(--brand-text); margin-bottom: 12px;
}
.section-title {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800;
  letter-spacing: -.025em; color: var(--dark);
  margin-bottom: 14px;
}
.section-sub {
  font-size: 18px; color: var(--muted); line-height: 1.65;
  max-width: 540px;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white); border-radius: var(--r);
  border: 1.5px solid var(--border);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* ── Animations reveal ───────────────────────────────────── */
.reveal {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(20px) scale(0.98);
  transition:
    opacity   .60s var(--ease-out),
    filter    .55s var(--ease-out),
    transform .60s var(--ease-out);
}
.reveal.visible { opacity: 1; filter: blur(0); transform: none; }

/* ── Word-level reveal ───────────────────────────────────── */
.word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
  transition:
    opacity   0.5s var(--ease-out),
    filter    0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.words-visible .word { opacity: 1; filter: blur(0); transform: none; }
.reveal-d1 { transition-delay: .06s; }
.reveal-d2 { transition-delay: .12s; }
.reveal-d3 { transition-delay: .18s; }
.reveal-d4 { transition-delay: .24s; }
.reveal-d5 { transition-delay: .30s; }

/* ── Boutons — micro-interaction flèche ─────────────────── */
.btn svg {
  transition: transform 160ms var(--ease-out);
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateY(2px); }
}

/* ── Utilities ───────────────────────────────────────────── */
.text-brand  { color: var(--brand); }
.text-dark   { color: var(--dark); }
.text-muted  { color: var(--muted); }
.text-center { text-align: center; }
.mt-xs { margin-top: 8px; }
.mt-sm { margin-top: 16px; }
.mt-md { margin-top: 32px; }
.mt-lg { margin-top: 56px; }
.mb-sm { margin-bottom: 16px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Grid helpers ────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; }
.grid-4 > * { background: var(--white); }

@media (max-width: 960px)  { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 720px)  { .grid-4 { grid-template-columns: repeat(2,1fr); } }