/* ==========================================================
   Base — Capital Talent Invest
   Typographie, layout, helpers utilitaires.
   ========================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
}

/* ===== Typographie ===== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

p {
  line-height: 1.65;
  color: var(--ink-soft);
}

p + p {
  margin-top: 1em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}

a {
  color: var(--brand-deep);
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--brand-cyan);
}

strong, b {
  font-weight: 600;
  color: var(--ink);
}

em {
  font-style: italic;
}

/* Highlight typographique (utilisé sur le hero) */
.highlight {
  background: linear-gradient(180deg, transparent 62%, rgba(43, 188, 217, 0.28) 62%);
  padding: 0 0.15em;
}

/* Texte de marque (accent) */
.text-deep   { color: var(--brand-deep); }
.text-cyan   { color: var(--brand-cyan); }
.text-green  { color: var(--brand-green); }
.text-soft   { color: var(--ink-soft); }
.text-mute   { color: var(--ink-mute); }

/* ===== Layout — conteneurs ===== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  width: 100%;
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-prose {
  width: 100%;
  max-width: var(--wrap-prose);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-wide {
  width: 100%;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== Sections génériques avec respiration ===== */

.section {
  padding-block: clamp(var(--space-10), 8vw, var(--space-12));
}

.section-tight {
  padding-block: clamp(var(--space-9), 6vw, var(--space-11));
}

.section-cream { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-deep  { background: var(--brand-deep); color: var(--white); }
.section-deep-dark { background: var(--brand-deep-darker); color: var(--white); }

.section-deep h1, .section-deep h2, .section-deep h3,
.section-deep-dark h1, .section-deep-dark h2, .section-deep-dark h3 {
  color: var(--white);
}

.section-deep p, .section-deep-dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* En-tête de section (eyebrow + title + lead) */
.section-head {
  text-align: center;
  margin-bottom: var(--space-9);
}

.section-head-left {
  text-align: left;
  margin-bottom: var(--space-8);
}

/* ===== Utilitaires ===== */

.center { text-align: center; }
.left   { text-align: left; }
.right  { text-align: right; }

.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--brand-cyan);
  margin-bottom: var(--space-3);
}

.eyebrow-deep  { color: var(--brand-deep); }
.eyebrow-green { color: var(--brand-green-dark); }
.eyebrow-light { color: var(--brand-cyan-light); }

/* Stacks verticaux : ajoutent un margin-top progressif aux enfants suivants */
.stack-1 > * + * { margin-top: var(--space-2); }
.stack-2 > * + * { margin-top: var(--space-4); }
.stack-3 > * + * { margin-top: var(--space-6); }
.stack-4 > * + * { margin-top: var(--space-8); }
.stack-5 > * + * { margin-top: var(--space-10); }

/* Grilles génériques (auto-fit responsive) */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (min-width: 768px) {
  .grid-2-md { grid-template-columns: repeat(2, 1fr); }
  .grid-3-md { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4-lg { grid-template-columns: repeat(4, 1fr); }
}

/* Flex utilities */
.flex {
  display: flex;
  gap: var(--space-4);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.flex-wrap { flex-wrap: wrap; }

/* Espacements ponctuels */
.mt-1 { margin-top: var(--space-2); }
.mt-2 { margin-top: var(--space-4); }
.mt-3 { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-8); }
.mt-5 { margin-top: var(--space-10); }

.mb-1 { margin-bottom: var(--space-2); }
.mb-2 { margin-bottom: var(--space-4); }
.mb-3 { margin-bottom: var(--space-6); }
.mb-4 { margin-bottom: var(--space-8); }

/* Mention CAE obligatoire (à mettre en pied de section commerciale) */
.cae-disclaimer {
  font-size: var(--fs-micro);
  color: var(--ink-mute);
  text-align: center;
  margin-top: var(--space-7);
  padding: var(--space-3) var(--space-5);
  background: var(--cream);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--brand-cyan);
  display: inline-block;
  max-width: 800px;
  line-height: 1.5;
}

.cae-disclaimer-block {
  display: block;
  max-width: 800px;
  margin-inline: auto;
}