/* =========================================================================
   THÈME CARROUSEL — Dinap
   Design partagé entre tous les carrousels.
   Un carrousel = un fichier HTML qui charge ce thème et remplit les slides.
   Tout ce qui touche au look (couleurs, polices, marges) se règle ICI.
   ========================================================================= */

/* ---- 1. Tokens de design (les seules valeurs à toucher) ---------------- */
:root {
  /* Couleurs */
  --bg:        #0f1115;   /* fond de slide */
  --bg-2:      #171a21;   /* fond alternatif (slides pairs si besoin) */
  --ink:       #f4f5f7;   /* texte principal */
  --ink-soft:  #a2a9b4;   /* texte secondaire / légendes */
  --accent:    #4f8cff;   /* couleur d'accent (liens, surlignage) */
  --accent-2:  #ffcf5c;   /* accent secondaire (chiffres, emphase) */
  --line:      #2a2f3a;   /* filets, séparateurs */

  /* Format : 4:5 (1080x1350), idéal feed LinkedIn + Instagram */
  --w: 1080px;
  --h: 1350px;

  /* Rythme typographique */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pad: 96px;            /* marge intérieure des slides */
  --radius: 28px;
}

/* ---- 2. Reset minimal -------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #05060a;
  font-family: var(--font);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px 20px;
  -webkit-font-smoothing: antialiased;
}

/* ---- 3. La slide (le composant réutilisable) -------------------------- */
.slide {
  position: relative;
  width: var(--w);
  height: var(--h);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.slide--alt { background: var(--bg-2); }

/* Zone de contenu : centrée verticalement par défaut */
.slide__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

/* ---- 4. Blocs typographiques ------------------------------------------ */
.eyebrow {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

.title {
  font-size: 92px;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.02em;
}

.title--sm { font-size: 68px; }

.lead {
  font-size: 46px;
  font-weight: 400;
  line-height: 1.32;
  color: var(--ink);
}

.lead .soft { color: var(--ink-soft); }
.hl  { color: var(--accent-2); font-weight: 700; }
.accent { color: var(--accent); }

/* Liste "ce que ça fait" */
.list { display: flex; flex-direction: column; gap: 24px; }
.list li {
  list-style: none;
  font-size: 42px;
  line-height: 1.3;
  padding-left: 56px;
  position: relative;
}
.list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Gros numéro d'index (slides "étape" / "mur n°X") */
.num {
  font-size: 128px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}
.num small { font-size: 46px; color: var(--ink-soft); font-weight: 600; }

/* Pastille / étiquette */
.tag {
  align-self: flex-start;
  font-size: 28px;
  font-weight: 600;
  padding: 12px 26px;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* ---- 5. En-tête / pied de slide (marque + pagination) ----------------- */
.slide__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28px;
  color: var(--ink-soft);
}
.brand { font-weight: 700; color: var(--ink); }
.brand span { color: var(--accent); }

/* Points de progression */
.dots { display: flex; gap: 12px; }
.dots i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--line); display: inline-block;
}
.dots i.on { background: var(--accent); }

/* Flèche "swipe" sur la cover */
.swipe {
  font-size: 30px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- 6. Export : une slide par page A4/carrée à l'impression ---------- */
@media print {
  body { background: #fff; gap: 0; padding: 0; }
  .slide {
    border-radius: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }
  @page { size: 1080px 1350px; margin: 0; }
}