/* =========================================================================
   Disruptive Closing — tokens de la charte graphique 2026
   Source : Charte graphique Disruptive Closing 2026.pdf + Figma « Assets Disruptive Closing »

   Utilisation : copier le dossier « 05 Web » (ce fichier + fonts/) dans le projet,
   puis <link rel="stylesheet" href="tokens.css">.
   Voix : ajouter data-voice="people" (Aurélien, terracotta) ou data-voice="system"
   (Florent, bleu roi) sur un conteneur ; par défaut l'accent est le vert émeraude.
   ========================================================================= */

/* ---------- Polices (fichiers dans fonts/, sous-ensemble latin) ---------- */
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-SemiboldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-HeavyItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ---------- Couleurs de la charte ---------- */
  --dc-charbonneux: #252525;   /* Gris charbonneux — fonds & textes */
  --dc-creme:       #F7F1E6;   /* Blanc crème — fonds & textes */
  --dc-vert:        #1E8551;   /* Vert émeraude — primaire, voix Disruptive Closing */
  --dc-terracotta:  #C0550F;   /* Orange terracotta — voix BUILD THE PEOPLE (Aurélien) */
  --dc-bleu:        #052DBB;   /* Bleu roi — voix BUILD THE SYSTEM (Florent) */

  /* ---------- Rôles ---------- */
  --dc-bg: var(--dc-creme);
  --dc-text: var(--dc-charbonneux);
  --dc-bg-inverse: var(--dc-charbonneux);
  --dc-text-inverse: var(--dc-creme);
  --dc-accent: var(--dc-vert);           /* redéfini par data-voice */
  --dc-on-accent: var(--dc-creme);
  --dc-text-muted: color-mix(in srgb, var(--dc-charbonneux) 65%, var(--dc-creme));
  --dc-border: color-mix(in srgb, var(--dc-charbonneux) 15%, var(--dc-creme));

  /* ---------- Dégradés (réservés aux moments de convergence) ---------- */
  --dc-gradient-hybridation: linear-gradient(90deg, var(--dc-bleu) 0%, var(--dc-vert) 50%, var(--dc-terracotta) 100%);
  --dc-gradient-system: linear-gradient(90deg, var(--dc-bleu), var(--dc-vert));
  --dc-gradient-people: linear-gradient(90deg, var(--dc-vert), var(--dc-terracotta));

  /* ---------- Typographie ---------- */
  --dc-font-title: "Instrument Serif", Georgia, "Times New Roman", serif;
  --dc-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --dc-weight-regular: 400;
  --dc-weight-medium: 500;
  --dc-weight-semibold: 600;
  --dc-weight-bold: 700;
  --dc-weight-extrabold: 800;
  --dc-leading-title: 1.05;   /* titres serrés, comme sur les visuels */
  --dc-leading-body: 1.45;
  --dc-tracking-label: 0.12em; /* capitales espacées : « BUILD THE SYSTEM » */

  /* Échelle web (proposition : la charte ne fixe pas de tailles pour le web) */
  --dc-size-xs: 0.8125rem;
  --dc-size-sm: 0.9375rem;
  --dc-size-base: 1.0625rem;
  --dc-size-lg: 1.25rem;
  --dc-title-sm: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --dc-title-md: clamp(2.25rem, 1.7rem + 2vw, 3.25rem);
  --dc-title-lg: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  /* ---------- Formes ---------- */
  --dc-radius: 0;          /* angles droits partout… */
  --dc-radius-pill: 999px; /* …sauf boutons et badges en pilule */
  --dc-space-1: 0.25rem;
  --dc-space-2: 0.5rem;
  --dc-space-3: 1rem;
  --dc-space-4: 1.5rem;
  --dc-space-5: 2.5rem;
  --dc-space-6: 4rem;
}

/* ---------- Voix ---------- */
[data-voice="people"] { --dc-accent: var(--dc-terracotta); }
[data-voice="system"] { --dc-accent: var(--dc-bleu); }
[data-voice="dc"]     { --dc-accent: var(--dc-vert); }

/* ---------- Thèmes de fond ---------- */
.dc-theme-creme   { background: var(--dc-creme); color: var(--dc-charbonneux); }
.dc-theme-sombre  { background: var(--dc-charbonneux); color: var(--dc-creme); --dc-text-muted: color-mix(in srgb, var(--dc-creme) 70%, var(--dc-charbonneux)); }
.dc-theme-accent  { background: var(--dc-accent); color: var(--dc-creme); }

/* ---------- Composants de base ---------- */

/* Titre : Instrument Serif ; <em> met un mot clé en italique (« la <em>performance</em>. ») */
.dc-title {
  font-family: var(--dc-font-title);
  font-weight: 400;
  line-height: var(--dc-leading-title);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.dc-title em { font-style: italic; }

/* Texte courant : Lato ; les mots clés passent en gras */
.dc-body { font-family: var(--dc-font-body); line-height: var(--dc-leading-body); }
.dc-body strong, .dc-body b { font-weight: var(--dc-weight-bold); }

/* Mot clé coloré dans la couleur de la voix (« dans <span class="dc-key">un état</span> ») */
.dc-key { color: var(--dc-accent); font-weight: var(--dc-weight-bold); }

/* Label en capitales espacées ; <strong> pour le mot fort (BUILD THE <strong>SYSTEM</strong>) */
.dc-label {
  font-family: var(--dc-font-body);
  font-size: var(--dc-size-sm);
  font-weight: var(--dc-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--dc-tracking-label);
}
.dc-label strong { font-weight: var(--dc-weight-extrabold); }

/* Surlignage : fond plein couleur de la voix, texte crème, ligne par ligne */
.dc-highlight {
  background: var(--dc-accent);
  color: var(--dc-creme);
  padding: 0.05em 0.3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Bouton d'appel à l'action : pilule pleine couleur de la voix */
.dc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--dc-font-body);
  font-size: var(--dc-size-base);
  font-weight: var(--dc-weight-semibold);
  color: var(--dc-on-accent);
  background: var(--dc-accent);
  border: 0;
  border-radius: var(--dc-radius-pill);
  padding: 0.7em 1.4em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.dc-btn:hover { filter: brightness(1.08); }
.dc-btn:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 3px; }

/* Badge (« ATELIER GRATUIT ») : petite pilule crème, texte charbonneux en capitales */
.dc-badge {
  display: inline-block;
  font-family: var(--dc-font-body);
  font-size: var(--dc-size-xs);
  font-weight: var(--dc-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--dc-tracking-label);
  color: var(--dc-charbonneux);
  background: var(--dc-creme);
  border-radius: var(--dc-radius-pill);
  padding: 0.35em 1.1em;
}

/* Halo derrière un portrait : crème au centre → couleur de la voix (suit data-voice) */
.dc-halo { background: radial-gradient(circle, var(--dc-creme) 0%, var(--dc-accent) 100%); }

/* Bandeau de voix (bas des bannières) ; ajouter --hybridation, --system ou --people */
.dc-band {
  display: flex; align-items: center; justify-content: center;
  padding: var(--dc-space-3);
  color: var(--dc-creme);
  background: var(--dc-gradient-hybridation);
}
.dc-band--system { background: var(--dc-gradient-system); }
.dc-band--people { background: var(--dc-gradient-people); }