/* ===== SYSTÈME TYPOGRAPHIQUE DEKRONIA STUDIO ===== */
:root {
  /* === ÉCHELLE TYPOGRAPHIQUE BASÉE SUR LE NOMBRE D'OR (1.618) === */
  --ratio: 1.618;
  --fs-base: 1rem;              /* 16px - Base pour body text */
  --fs-sm: 0.875rem;            /* 14px - Petit texte */
  --fs-lg: calc(var(--fs-base) * var(--ratio));     /* ~26px - Lead text */
  --fs-xl: calc(var(--fs-lg) * var(--ratio));       /* ~42px - H3 */
  --fs-2xl: calc(var(--fs-xl) * var(--ratio));      /* ~68px - H2 */
  --fs-3xl: calc(var(--fs-2xl) * var(--ratio));     /* ~110px - H1 */
  --fs-4xl: calc(var(--fs-3xl) * var(--ratio));     /* ~178px - Titre héros */

  /* === POLICES PRINCIPALES === */
  --font-title: "Caveat", ui-rounded, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* === POIDS DES POLICES === */
  --fw-light: 300;              /* Inter Light pour body */
  --fw-regular: 400;            /* Caveat Regular pour H3-H6 */
  --fw-medium: 500;             /* Texte mis en valeur */
  --fw-semibold: 600;           /* Strong dans Inter */
  --fw-bold: 700;               /* Caveat Bold pour H1-H2 */

  /* === HAUTEURS DE LIGNE === */
  --lh-tight: 1.1;             /* Titres */
  --lh-normal: 1.5;            /* Body text */
  --lh-relaxed: 1.6;           /* Lead text */

  /* === ESPACEMENT DES LETTRES === */
  --ls-tight: -0.01em;         /* Gros titres */
  --ls-normal: 0;              /* Texte normal */
  --ls-wide: 0.05em;           /* Petits textes en caps */
}

/* === STYLES DE BASE === */
html { 
  font-size: 16px; 
}

body {
  font-family: var(--font-body) !important;
  font-weight: var(--fw-light) !important;         /* Inter Light comme demandé */
  font-size: var(--fs-base) !important;
  line-height: var(--lh-normal) !important;
  letter-spacing: var(--ls-normal) !important;
  color: #e6e6e6;
}

/* === HIÉRARCHIE DES TITRES (CAVEAT) === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--ls-tight) !important;
  margin: 0 0 0.6em !important;
}

/* H1 et H2 en Bold (700) */
h1 { 
  font-size: var(--fs-3xl) !important;            /* ~110px */
  font-weight: var(--fw-bold) !important; 
}

h2 { 
  font-size: var(--fs-2xl) !important;            /* ~68px */
  font-weight: var(--fw-bold) !important; 
}

/* H3-H6 en Regular (400) */
h3 { 
  font-size: var(--fs-xl) !important;             /* ~42px */
  font-weight: var(--fw-regular) !important; 
}

h4 { 
  font-size: var(--fs-lg) !important;             /* ~26px */
  font-weight: var(--fw-regular) !important; 
}

h5 { 
  font-size: calc(var(--fs-base) * 1.125) !important;  /* ~18px */
  font-weight: var(--fw-regular) !important; 
}

h6 { 
  font-size: var(--fs-base) !important;           /* 16px */
  font-weight: var(--fw-regular) !important; 
}

/* === CLASSES UTILITAIRES === */

/* Textes spéciaux */
.text-lead { 
  font-size: var(--fs-lg);             /* ~26px */
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-light);
}

.text-small { 
  font-size: var(--fs-sm);             /* 14px */
  letter-spacing: var(--ls-wide);
}

.text-hero {
  font-size: var(--fs-4xl);            /* ~178px */
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Modificateurs de poids */
.text-light { font-weight: var(--fw-light); }
.text-regular { font-weight: var(--fw-regular); }
.text-medium { font-weight: var(--fw-medium); }
.text-semibold { font-weight: var(--fw-semibold); }
.text-bold { font-weight: var(--fw-bold); }

/* États */
.text-muted { opacity: 0.7; }

/* Strong et Em dans le body (Inter) */
strong, b { 
  font-weight: var(--fw-semibold);     /* 600 pour Inter */
}

em, i {
  font-style: italic;
}

/* Classes de titre spéciales */
.title-display {
  font-family: var(--font-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.subtitle {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  opacity: 0.8;
}

/* === SYSTÈME DE BRUSH STROKES === */
.brush-title {
  position: relative;
  display: inline-block;
  color: white !important;
  z-index: 2;
  padding: 0.5em 1em;
}

.brush-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
}

/* Variantes de brush strokes */
.brush-title.brush-1::before {
  background-image: url('../images/brushs/DDS_BrushStroke_01.svg');
}

.brush-title.brush-2::before {
  background-image: url('../images/brushs/DDS_BrushStroke_02.svg');
}

.brush-title.brush-3::before {
  background-image: url('../images/brushs/DDS_BrushStroke_03.svg');
}

.brush-title.brush-4::before {
  background-image: url('../images/brushs/DDS_BrushStroke_04.svg');
}

/* Adaptation automatique pour les titres */
h1.brush-title::before,
h2.brush-title::before {
  width: 130%;
  height: 140%;
}

h3.brush-title::before,
h4.brush-title::before {
  width: 125%;
  height: 130%;
}

/* Classes utilitaires pour variation */
.brush-wide::before {
  width: 140% !important;
}

.brush-narrow::before {
  width: 110% !important;
}

.brush-tall::before {
  height: 150% !important;
}

/* === CLASSES POUR SOUS-TITRES SUR BRUSH === */
.subtitle-box {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  padding: 16px 32px;
  border-radius: 12px;
  margin: 0 auto;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.subtitle-box p {
  margin: 0;
  color: #333 !important;
}