/* === engine.css === Extrait de styles.css lignes 62-431 === */
/* --- Slide container (16:9, taille de design fixe + scale CSS) --- */
/* La slide est rendue à une taille de design fixe (1200 × 675) et zoomée via transform.
   Tout grossit/rapetisse proportionnellement (approche présentation type Keynote/Genially).
   Le scale est calculé en JS via --capsule-scale selon la place disponible. */
#capsule {
  width: 1200px;
  height: 675px;
  transform: scale(var(--capsule-scale, 1));
  transform-origin: center center;
  position: relative;
  border: 0;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(247,246,220,0.55) 0%, rgba(254,192,144,0) 40%),
    radial-gradient(ellipse at 0% 100%, rgba(254,192,144,0.32) 0%, rgba(254,192,144,0) 45%),
    #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.35);
}

/* Blobs organiques décoratifs en arrière-plan (dispatch derrière le contenu) */
.lfc-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.lfc-blob {
  position: absolute;
  filter: blur(3px);
  opacity: 0.55;
}
.lfc-blob.b-jaune {
  top: -15%;
  left: -8%;
  width: 38%;
  height: 50%;
  fill: var(--lfc-jaune);
  opacity: 0.85;
  filter: blur(2px);
}
.lfc-blob.b-corail {
  top: 38%;
  right: -10%;
  width: 32%;
  height: 50%;
  fill: var(--lfc-corail);
  opacity: 0.42;
  filter: blur(4px);
}
.lfc-blob.b-green {
  bottom: -12%;
  left: 18%;
  width: 26%;
  height: 35%;
  fill: var(--lfc-green-light);
  opacity: 0.45;
  filter: blur(4px);
}

/* Le contenu doit passer au-dessus des blobs */
.slide-header, .slide-body, .lfc-meta-top, .lfc-progress-wrap {
  position: relative;
  z-index: 1;
}

/* === Header LFC : meta-top fin et discret === */
.lfc-meta-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 13px 32px 0 128px;  /* padding-left = boutons home/burger (36+6+36=78 + 22 left + 28 d'air) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: calc(var(--text-size, 16px) * 0.7);
  letter-spacing: 0.05em;
  color: var(--lfc-text-2);
  z-index: 4;
  pointer-events: none;
}
.lfc-meta-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;                /* taille fixe pour rester identique sur toutes les slides */
  color: var(--lfc-teal);
  letter-spacing: -0.01em;
  text-transform: none;
}
.lfc-meta-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 500;
}
.lfc-meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--lfc-corail);
}

/* === Progress bar LFC en bas === */
.lfc-progress-wrap {
  position: absolute;
  left: 36px; right: 36px; bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 4;
  pointer-events: none;
}
.lfc-progress-track {
  flex: 1;
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.lfc-progress-seg {
  flex: 1;
  height: 3px;
  background: var(--lfc-gray);
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.lfc-progress-seg.active { background: var(--lfc-teal); }
.lfc-progress-seg.current {
  background: var(--lfc-corail);
  transform: scaleY(1.7);
}
.lfc-progress-label {
  font-size: calc(var(--text-size, 16px) * 0.9);
  color: var(--lfc-text-2);
  font-weight: 500;
  white-space: nowrap;
}
/* Pas de libellé de progression sur la couverture et le sommaire (pas dans un parcours de section) */
#capsule.layout-cover .lfc-progress-label,
#capsule.layout-sommaire .lfc-progress-label {
  display: none;
}
/* Sur la couverture : pas de barre de progression du tout, ni de bandeau brand en haut */
#capsule.layout-cover .lfc-progress-wrap,
#capsule.layout-cover .lfc-meta-top {
  display: none;
}

/* --- Header navigation : intégré sur la même ligne que le meta-top --- */
.slide-header {
  position: absolute;
  top: 8px;
  left: 22px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
  gap: 6px;
  border-bottom: none;
  z-index: 5;
}
/* Sur les slides tpl-section (bandeau teal foncé à gauche),
   on inverse le brand et les icônes en blanc pour qu'ils restent lisibles */
#capsule:has(.tpl-section) .lfc-meta-brand { color: white; }
#capsule:has(.tpl-section) .slide-header .header-icon-home,
#capsule:has(.tpl-section) .slide-header .header-icon-burger {
  border-color: rgba(255,255,255,0.55);
}
#capsule:has(.tpl-section) .slide-header .header-icon-home svg,
#capsule:has(.tpl-section) .slide-header .header-icon-burger svg {
  fill: white;
}
#capsule:has(.tpl-section) .slide-header .header-icon-home:hover,
#capsule:has(.tpl-section) .slide-header .header-icon-burger:hover {
  background: rgba(255,255,255,0.15);
}

.slide-header .header-icon-home,
.slide-header .header-icon-burger {
  background: transparent;
  border: 1px solid var(--lfc-gray);
  width: 36px; height: 36px;
}
.slide-header .header-icon-home svg,
.slide-header .header-icon-burger svg {
  fill: var(--lfc-teal);
  width: 17px; height: 17px;
}
.slide-header .header-icon-home:hover,
.slide-header .header-icon-burger:hover {
  background: var(--lfc-teal);
}
.slide-header .header-icon-home:hover svg,
.slide-header .header-icon-burger:hover svg {
  fill: white;
}
.slide-header .header-logo,
.slide-header .header-separator,
.slide-header .header-section-title,
.slide-header .header-nav {
  display: none;  /* navigation par flèches latérales suffit pour ce format rapport */
}

/* Icons */
.header-icon {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.header-icon:hover { opacity: 0.75; }

/* Home: dark blue square with white house */
.header-icon-home {
  background: var(--primary-dark);
}
.header-icon-home svg { width: 20px; height: 20px; fill: white; }

/* Burger: lighter blue with white bars */
.header-icon-burger {
  background: var(--primary);
}
.header-icon-burger svg { width: 20px; height: 20px; fill: white; }

.header-logo {
  height: 38px;
  margin-left: 6px;
  flex-shrink: 0;
}

/* Thin separator between icons and logos */
.header-separator {
  width: 1px;
  height: 34px;
  background: #cdd2d9;
  margin: 0 4px;
  flex-shrink: 0;
}

/* Section title: centered, bold like Genially */
.header-section-title {
  flex: 1;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  letter-spacing: -0.01em;
}

/* Navigation (right side) */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-next-label {
  font-size: 0.82em;
  font-weight: 500;
  color: var(--text-light);
}

.nav-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.nav-arrow svg {
  width: 16px;
  height: 16px;
  fill: var(--primary);
  transition: fill 0.2s;
}
.nav-arrow:hover { background: var(--primary); }
.nav-arrow:hover svg { fill: white; }

/* --- Slide content area --- */
.slide-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  transition: opacity 0.25s ease;
}

/* --- Content layouts --- */
.content-text {
  padding: 28px 40px 36px 48px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Auto-fit: taille de base, ajustée par JS */
  font-size: var(--text-size, 16px);
  /* Justification sans coupure de mots */
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Page title: the big Genially-style heading */
.page-title {
  font-size: calc(var(--text-size, 16px) * 2.375);
  font-weight: 800;
  color: var(--text);
  line-height: 1.08;
  margin-bottom: 16px;
  text-align: left;
  hyphens: none;
  flex-shrink: 0;
}

.content-text h1 {
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 2.6);
  font-weight: 700;
  color: var(--lfc-teal);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  text-align: left;
  hyphens: none;
}
.content-text h1.page-title {
  font-size: calc(var(--text-size, 16px) * 2.1);
  color: var(--lfc-teal);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
/* H1 page-title centré pour les pages graphes/data */
.layout-text-only .content-text h1.page-title {
  text-align: center;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.content-text h2 { font-family: var(--font-display); font-weight: 600; color: var(--lfc-teal); }
.content-text h3 { font-family: var(--font-display); font-weight: 700; color: var(--lfc-teal); }
/* Page-title centré pour les pages graphes (layout text-only large) */
.layout-text-only .content-text h1.page-title {
  text-align: center;
}
/* Chiffre clé géant en typographie display */
.big-number {
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 6);
  font-weight: 800;
  color: var(--lfc-teal);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin-top: 14px;
}
.big-number-label {
  font-size: 1em;
  color: var(--lfc-text);
  margin-top: 8px;
  font-weight: 500;
  max-width: 480px;
}
.big-number-foot {
  font-size: 0.85em;
  color: var(--lfc-text-2);
  margin-top: 10px;
  font-style: italic;
  line-height: 1.45;
  max-width: 520px;
}