/* ========== 1) Variables + Couleurs ========== */
:root{
  /* Couleurs (différents formats) */
  --bg: #0f172a;                 /* hex */
  --surface: rgb(255, 255, 255); /* rgb */
  --text: #111827;
  --muted: rgba(17, 24, 39, 0.7); /* rgba */
  --accent: hsl(216 92% 60%);     /* hsl */
  --accent-2: hsl(150 70% 45%);

  /* Typo (unités rem) */
  --base: 16px;
  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,0.15);
}

*{ box-sizing: border-box; }

html{
  font-size: var(--base); /* 1rem = 16px */
}

body{
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg), #020617);
}

/* ========== 2) Typographie globale ========== */
h1{
  margin: 8px 0 10px;
  /* clamp(min, fluide, max) : taille responsive */
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: white;
}

h2{
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.2;
}

p{
  margin: 0 0 10px;
  line-height: 1.6; /* très important pour la lisibilité */
}

/* ========== 3) Layout ========== */
.hero{
  padding: 6vh 6vw; /* vh/vw : dépend de la taille de l’écran */
  color: white;
}

.kicker{
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

.lead{
  max-width: 65ch; /* ch = largeur de caractères -> pratique pour les paragraphes */
  color: rgba(255,255,255,0.85);
}

.container{
  padding: 24px 6vw 40px;
  display: grid;
  gap: 16px;
}

.card{
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.hint{
  color: var(--muted);
  font-size: 0.95rem;
}

/* ========== 4) Couleurs : démo ========== */
.swatches{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 8px;
}

.swatch{
  width: 110px;
  height: 60px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 700;
}

.hex{ background: #7c3aed; }                     /* hex */
.rgb{ background: rgb(239, 68, 68); }            /* rgb */
.rgba{ background: rgba(59, 130, 246, 0.7); }    /* rgba (transparent) */
.hsl{ background: hsl(45 100% 50%); color: #111; } /* hsl */

/* ========== 5) Unités : démo ========== */
.badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  margin-right: 8px;
  border: 2px solid #111;
  font-weight: 700;
}

.px{ font-size: 14px; }      /* px = fixe */
.rem{ font-size: 1rem; }     /* rem = dépend de html */
.em{ font-size: 1.1em; }     /* em = dépend du parent */
.pct{ font-size: 110%; }     /* % = dépend du parent */
.vw{ font-size: 2.2vw; }     /* vw = dépend de la largeur écran */

.unit-demo{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.box{
  padding: 12px;
  border-radius: 12px;
  border: 2px solid #111;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white;
  font-weight: 700;
}

.box-px{ width: 220px; }
.box-pct{ width: 60%; min-width: 220px; }
.box-vw{ width: 35vw; min-width: 220px; max-width: 520px; }

/* ========== 6) Typographie : démo ========== */
.typo-1 .caps{
  text-transform: uppercase;
  font-weight: 800;
}

.typo-1 .spacing{
  letter-spacing: 0.15em;
}

.typo-1 .lh{
  background: rgba(0,0,0,0.06);
  padding: 2px 6px;
  border-radius: 8px;
}

.typo-2{
  color: var(--muted);
}

.em-demo{
  font-size: 1.2em; /* dépend de la taille du parent */
  font-weight: 700;
  color: var(--text);
}

.rem-demo{
  font-size: 1.2rem; /* dépend de html (stable) */
  font-weight: 700;
  color: var(--text);
  margin-left: 8px;
}

/* Bouton */
.btn{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.btn:hover{
  background: rgba(255,255,255,0.18);
}

/* Footer */
.footer{
  padding: 18px 6vw 30px;
  color: rgba(255,255,255,0.7);
}