/* ============================================================
   S02 — SINGULARITÉ RÉUNIONNAISE (slides 8–13)
   Styles spécifiques aux slides de peuplement, métissage,
   comparaison et double singularité.
   Dépend des variables définies dans main.css.
   ============================================================ */

/* ── Citations historiques (slide 9) ────────────────────── */
.history-quotes {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: clamp(10px, 1.8vh, 20px);
  margin-top: clamp(10px, 1.8vh, 22px);
}

.history-quote {
  border-radius: 12px;
  padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.6vw, 24px);
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.history-quote-prosper { border-left: 4px solid var(--teal); }
.history-quote-fuma    { border-left: 4px solid var(--orange); }

.history-quote-text {
  font-family: Georgia, serif;
  font-size: clamp(17px, 1.9vw, 28px);
  line-height: 1.35;
  color: var(--navy);
}

.history-quote-meta {
  margin-top: clamp(8px, 1vh, 14px);
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Grilles et cartes s2 ────────────────────────────────── */
.s2-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vh, 24px);
}

.s2-grid-2--center {
  align-items: center;
}

/* SVG remplit la hauteur disponible — supprime le vide sous le schéma */
.s2-grid-2 .s2-figure {
  display: flex;
  flex-direction: column;
}

.s2-grid-2 .s2-figure svg {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.s2-card {
  background: var(--white);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.7vw, 24px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.s2-card--accent-left-teal   { border-left: 4px solid var(--teal); }
.s2-card--accent-left-orange { border-left: 4px solid var(--orange); }

.s2-card--soft-teal {
  margin-top: clamp(10px, 1.4vh, 18px);
  background: #F8FAFC;
  border-color: rgba(13, 115, 119, .14);
  box-shadow: none;
}

.s2-card--soft-orange {
  background: #FFF7ED;
  border-color: rgba(217, 119, 6, .18);
}

.s2-card--mb { margin-bottom: clamp(10px, 1.6vh, 20px); }
.s2-card--mt { margin-top: clamp(10px, 1.5vh, 20px); }

/* ── Typographie s2 ──────────────────────────────────────── */
.s2-kicker {
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(6px, 1vh, 12px);
}

.s2-kicker--light { color: rgba(255, 255, 255, .72); }

.s2-heading {
  font-size: clamp(22px, 2.3vw, 34px);
  color: var(--navy);
  margin-bottom: clamp(8px, 1.2vh, 14px);
}

.s2-body-lg   { font-size: clamp(16px, 1.8vw, 26px); }
.s2-body-md   { font-size: clamp(15px, 1.7vw, 24px); }
.s2-body-md--mt { margin-top: clamp(8px, 1.2vh, 14px); }
.s2-body-center { text-align: center; }

.s2-note { font-size: clamp(16px, 1.8vw, 24px); font-style: italic; }

.s2-note--teal         { color: var(--teal); }
.s2-note--orange       { color: var(--orange); }
.s2-note--light        { line-height: 1.55; color: rgba(255, 255, 255, .9); }
.s2-note--light-strong { line-height: 1.55; color: rgba(255, 255, 255, .92); }

/* ── Chips ───────────────────────────────────────────────── */
.s2-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(8px, 1.2vh, 14px);
}

.s2-chip {
  border-radius: 999px;
  padding: 6px 12px;
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 700;
  color: var(--navy);
  background: rgba(13, 115, 119, .08);
}

.s2-chip--teal   { background: rgba(13, 115, 119, .12); }
.s2-chip--purple { background: rgba(124, 58, 237, .12); }
.s2-chip--blue   { background: rgba(59, 130, 246, .12); }
.s2-chip--amber  { background: rgba(217, 119, 6, .12); }

/* ── Figures SVG ─────────────────────────────────────────── */
.s2-figure {
  background: linear-gradient(180deg, rgba(248,250,252,.95), rgba(241,245,249,.9));
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  padding: clamp(10px, 1.5vh, 18px);
}

.s2-figure svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Variante ample pour le schéma d'effet fondateur */
.s2-founder-figure svg {
  min-height: clamp(280px, 34vh, 360px);
}

/* ── Légende ─────────────────────────────────────────────── */
.s2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.s2-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.05vw, 13px);
  color: var(--muted);
}

.s2-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.s2-legend-dot--teal   { background: var(--teal); }
.s2-legend-dot--purple { background: var(--purple); }
.s2-legend-dot--blue   { background: var(--blue); }
.s2-legend-dot--amber  { background: var(--amber); }

/* ── Comparaison homogène vs Réunion (slide 11) ──────────── */
.s2-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vh, 24px);
}

.s2-compare-card {
  background: var(--white);
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.7vw, 24px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.s2-compare-title {
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: clamp(8px, 1.1vh, 14px);
}

/* Plafonne la hauteur des figures SVG dans les cartes de comparaison */
.s2-compare-card .s2-figure {
  display: flex;
  align-items: center;
  justify-content: center;
}

.s2-compare-card .s2-figure svg {
  height: clamp(100px, 16vh, 160px);
  width: auto;
  max-width: 100%;
}

/* ── Double singularité (slide 13) ───────────────────────── */
.s2-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vh, 24px);
  margin-bottom: clamp(10px, 1.6vh, 20px);
}

.s2-double-card {
  border-radius: 14px;
  padding: clamp(14px, 2vh, 24px);
  color: var(--white);
}

.s2-double-card h3 {
  font-size: clamp(20px, 2vw, 28px);
  margin-bottom: 8px;
}

.s2-clinical-band {
  border-radius: 12px;
  border: 1px solid rgba(224, 90, 75, .24);
  background: linear-gradient(135deg, #FEF2F0, #FFF7ED);
  padding: clamp(12px, 1.8vh, 22px) clamp(14px, 1.8vw, 24px);
}

.s2-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 18px);
}

.s2-strong--teal   { color: var(--teal); }
.s2-strong--orange { color: var(--orange); }
.s2-strong--coral  { color: var(--coral); }

/* Dégradés des cartes double singularité */
.s2-double-card--teal   { background: linear-gradient(135deg, var(--teal), #0F766E); }
.s2-double-card--orange { background: linear-gradient(135deg, var(--orange), #EA580C); }

/* ── Frise historique (slide 9) ──────────────────────────── */
.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: clamp(12px, 2.2vh, 26px);
}

.timeline-line {
  position: absolute;
  top: clamp(28px, 3.5vh, 40px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
}

.timeline-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 1;
}

.timeline-node {
  width: clamp(56px, 7vh, 80px);
  height: clamp(56px, 7vh, 80px);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: clamp(11px, 1.2vw, 15px);
  line-height: 1;
  text-align: center;
}

.timeline-node--blue   { background: var(--blue); }
.timeline-node--teal   { background: var(--teal); }
.timeline-node--purple { background: var(--purple); }
.timeline-node--orange { background: var(--orange); }

.timeline-label {
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 700;
  text-align: center;
}

.timeline-label--blue   { color: var(--blue); }
.timeline-label--teal   { color: var(--teal); }
.timeline-label--purple { color: var(--purple); }
.timeline-label--orange { color: var(--orange); }

.timeline-copy {
  font-size: clamp(16px, 1.8vw, 26px);
  color: var(--muted);
  text-align: center;
}

/* ── Mise en page top-alignée (slides hautes) ────────────── */
/* Variante pour les slides dont le titre est long : contenu
   ancré en haut pour éviter le rognage sous la navigation. */
.s2-inner-top {
  justify-content: flex-start;
  padding-top: clamp(28px, 4.5vh, 56px);
}

/* Footer ancré en bas via margin-top:auto (flexbox) */
.s2-inner-top .slide-footer {
  margin-top: auto;
}

.s2-inner-top .slide-title {
  font-size: clamp(20px, 2.45vw, 34px);
  max-width: 24ch;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Grilles 2 colonnes → 1 colonne */
  .history-quotes,
  .s2-grid-2,
  .s2-compare,
  .s2-double { grid-template-columns: 1fr; }

  /* Timeline horizontale → verticale (node à gauche, texte à droite) */
  .timeline        { flex-direction: column; gap: clamp(8px, 1.5vh, 14px); }
  .timeline-line   { display: none; }
  .timeline-step   { flex-direction: row; align-items: center;
                     justify-content: flex-start; gap: 12px; }
  .timeline-copy   { text-align: left; }

  /* Schéma effet fondateur — hauteur réduite sur mobile */
  .s2-founder-figure svg { min-height: clamp(160px, 26vh, 260px); }
}