/* Kalent — design tokens
   Couleurs et typo : relevées dans Brand Guidelines (Sept. 2025), valeurs exactes.
   Échelles, radius, ombres : proposées ici, non spécifiées par le document. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-variable-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Couleurs de marque (exactes) ---------- */
  --k-black:         #0A0406;  /* Dark Kalent */
  --k-purple-deep:   #370C82;  /* Dark Purple */
  --k-purple:        #7C3AED;  /* Purple — couleur signature */
  --k-gray-bg:       #F6F6F6;  /* Background Gray */
  --k-purple-bg:     #F7F3FF;  /* Light Purple */
  --k-white:         #FFFFFF;
  --k-gray:          #7E7E7E;  /* Dark Gray Kalent */
  --k-pink:          #EA8DF0;
  --k-cream:         #FCF3E7;  /* stop clair des dégradés */
  /* Blanc de page : très légèrement lavande, pour que le blanc pur des cartes ressorte. */
  --surface-page:    #FAF9FC;
  --k-lavender:      #B88EFF;  /* stop médian des dégradés */

  /* ---------- Rôles ---------- */
  --text-primary:    var(--k-black);
  --text-secondary:  var(--k-gray);
  --text-on-dark:    var(--k-white);
  --accent:          var(--k-purple);
  --surface:         var(--surface-page);
  --surface-soft:    var(--k-purple-bg);
  --surface-neutral: var(--k-gray-bg);

  /* ---------- Dégradés (mêmes 4 stops, répartition différente) ---------- */
  --gradient-light: linear-gradient(135deg,
    var(--k-cream) 0%, var(--k-lavender) 45%, var(--k-purple) 80%, var(--k-purple-deep) 100%);
  --gradient-dark: linear-gradient(135deg,
    var(--k-cream) 0%, var(--k-lavender) 22%, var(--k-purple) 55%, var(--k-purple-deep) 100%);

  /* Hero mesh : clair en haut-gauche, violet vers la droite — cf. slide 29 */
  --gradient-hero:
    radial-gradient(120% 90% at 8% 0%,   var(--k-cream) 0%, transparent 55%),
    radial-gradient(100% 120% at 95% 45%, var(--k-purple) 0%, transparent 62%),
    radial-gradient(90% 100% at 110% 100%, var(--k-purple-deep) 0%, transparent 60%),
    linear-gradient(115deg, #FBF7FF 0%, var(--k-lavender) 58%, var(--k-purple) 100%);

  /* ---------- Typographie ---------- */
  --font-display: 'Outfit', system-ui, sans-serif;  /* titres, Medium 500 */
  --font-body:    'Inter', system-ui, sans-serif;   /* corps */

  --lh-title: 1.05;   /* le guidelines dit 100% ; 105% respire mieux aux grandes tailles */
  --lh-body:  1.55;

  --fs-h1:    clamp(2.5rem, 1.5rem + 3.2vw, 3.75rem);   /* ~60px desktop */
  --fs-h2:    clamp(2rem,   1.2rem + 2.6vw, 3rem);      /* ~48px */
  --fs-h3:    clamp(1.5rem, 1.1rem + 1.2vw, 2rem);      /* ~32px */
  --fs-lead:  clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* ~20px */
  --fs-body:  1rem;
  --fs-small: 0.875rem;

  /* ---------- Espacement ---------- */
  --space-2xs: 0.25rem; --space-xs: 0.5rem;  --space-sm: 0.75rem;
  --space-md:  1rem;    --space-lg: 1.5rem;  --space-xl: 2.5rem;
  --space-2xl: 4rem;    --space-3xl: 6rem;   --space-4xl: 8rem;

  /* Rythme vertical : l'écart entre deux sections. Un seul endroit à bouger. */
  --section-gap:  10rem;

  --container:    1240px;
  --gutter:       clamp(1rem, 0.4rem + 2.5vw, 2.5rem);

  /* ---------- Formes ---------- */
  --radius-pill:  999px;
  --radius-btn:   10px;
  --radius-card:  16px;
  --radius-panel: 20px;

  --shadow-card:  0 1px 2px rgba(10, 4, 6, 0.04), 0 8px 28px rgba(10, 4, 6, 0.07);
  --shadow-float: 0 2px 6px rgba(55, 12, 130, 0.08), 0 20px 50px rgba(55, 12, 130, 0.16);
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;          /* Outfit Medium — la graisse du brand guidelines.
                                La prod est en 700, jugé trop lourd sur ce hero. */
  line-height: var(--lh-title);
  letter-spacing: 0;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ---------- Grain : le noise-pattern.svg du site en prod ---------- */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url('../assets/noise-pattern.svg');
  background-position: 50%;
  background-repeat: repeat;
  opacity: 0.5;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body);
  padding: 0.875rem 1.25rem; border-radius: var(--radius-btn);
  border: 0; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary { background: var(--k-purple); color: var(--k-white); }
.btn--primary:hover { background: #6D2FD9; transform: translateY(-1px); }
.btn--dark { background: var(--k-black); color: var(--k-white); border-radius: 8px; }
.btn--dark:hover { background: #241419; }

/* Bouton avec icône : repris tel quel de la LP Kalent d'origine (.button.is--icon
   + .button_icon_wrapper de Webflow). Hauteur 3rem, rayon 8px, texte en 400,
   carré blanc de 2rem, flèche SVG de la prod en trait de 1.5. */
.btn:has(.btn__arrow) {
  height: 3rem; padding: 0 0.5rem 0 1.5rem; gap: 1rem;
  border-radius: 0.5rem; font-weight: 400; font-size: 1rem;
  transition: color .2s cubic-bezier(.645,.045,.355,1), background-color .2s cubic-bezier(.645,.045,.355,1);
}
.btn--primary:has(.btn__arrow):hover { transform: none; background: var(--k-purple-deep); }
.btn__arrow {
  display: flex; justify-content: center; align-items: center; flex: none;
  width: 2rem; height: 2rem; border-radius: 0.25rem;
  background: var(--k-white); color: var(--k-black);
}

/* ---------- Badge ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--k-purple-bg); color: var(--k-purple);
  font-size: var(--fs-small); font-weight: 500;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-pill);
}

/* ---------- Cartes ---------- */
.card       { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card--float{ border-radius: var(--radius-panel); box-shadow: var(--shadow-float);
              background: rgba(255,255,255,0.72); backdrop-filter: blur(14px); }