/* === templates.css === Extrait de styles.css lignes 432-1999 === */
/* ============================================================
   DESIGN SYSTEM RAPPORT DE BRANCHE — typo, grille, templates
   ============================================================
   Une seule échelle typographique, une grille fixe, 4 templates.
   Toute slide DOIT utiliser ces classes — pas d'inline styles.
*/

/* --- Échelle typographique --- */
.t-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 7);    /* ~120px à 16 */
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--lfc-teal);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--text-size, 16px) * 3);     /* ~52px */
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--lfc-teal);
}
.t-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--text-size, 16px) * 0.78);  /* ~13px */
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lfc-corail);
  display: inline-block;
}
.t-lead {
  font-family: var(--font);
  font-weight: 400;
  font-size: calc(var(--text-size, 16px) * 1.1);   /* ~18px */
  line-height: 1.5;
  color: var(--lfc-text);
}
.t-body {
  font-family: var(--font);
  font-weight: 400;
  font-size: calc(var(--text-size, 16px) * 1);     /* 16px */
  line-height: 1.55;
  color: var(--lfc-text);
}
.t-caption {
  font-family: var(--font);
  font-weight: 500;
  font-size: calc(var(--text-size, 16px) * 0.78);  /* ~13px */
  line-height: 1.4;
  color: var(--lfc-text-2);
  letter-spacing: 0.01em;
}

/* --- Grille de référence --- */
/* Marges canoniques :
     - Top    : 80px (sous le meta-top à 18+24px)
     - Bottom : 70px (au-dessus de la progress bar)
     - Sides  : 80px
   Tout template hérite de ces marges via .tpl-grid */
.tpl-grid {
  position: absolute;
  inset: 80px 80px 70px 80px;
  display: flex;
  flex-direction: column;
}

/* === TEMPLATE : SECTION (ouverture de partie) === */
/* Bandeau teal vertical à gauche occupant 38% de la largeur,
   contenu (kicker + h1 + lead) sur fond clair à droite */
.tpl-section {
  position: absolute;
  /* Couvre toute la slide pour que le bandeau teal monte jusqu'en haut et descende
     jusqu'en bas (les boutons home/burger sont en blanc dessus via le selector :has).
     La zone safe est respectée via le padding du tpl-section-body, pas via l'inset. */
  inset: 0;
  display: grid;
  grid-template-columns: 38% 62%;
  z-index: 1;
  overflow: hidden;
}
.tpl-section-rail {
  background: linear-gradient(180deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  position: relative;
  overflow: hidden;
}
.tpl-section-rail::after {
  /* Filets décoratifs subtils */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(254,192,144,0.18) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(127,183,126,0.18) 0%, transparent 50%);
}
.tpl-section-rail-counter {
  position: absolute;
  bottom: 60px;
  left: 60px;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(var(--text-size, 16px) * 1.0);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.tpl-section-rail-num {
  position: absolute;
  top: 90px;
  left: 60px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 9);
  line-height: 0.9;
  color: rgba(255,255,255,0.10);
  letter-spacing: -0.04em;
}
.tpl-section-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Padding qui inclut la zone safe (top + bottom) pour que le contenu textuel
     ne passe jamais sous le meta-bandeau ni sous la progress bar */
  padding: calc(var(--slide-safe-top) + 40px) 80px calc(var(--slide-safe-bottom) + 40px) 80px;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
}
.tpl-section-body .t-kicker {
  color: var(--lfc-corail);
  font-size: calc(var(--text-size, 16px) * 1.0);  /* override local : kicker plus présent sur les slides intro */
}
.tpl-section-body .t-h1 {
  /* Titre de partie : plus gros que les H1 des autres templates (qui sont en clamp(26,...,36)).
     Responsive selon la hauteur du viewport, uniforme entre les slides section. */
  font-size: clamp(48px, calc(var(--real-vh, 675px) * 0.095), 72px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.tpl-section-body .t-h1.t-h1-centered {
  text-align: center;
}
.tpl-section-body .t-lead {
  max-width: 520px;
  margin-top: 6px;
  font-size: calc(var(--text-size, 16px) * 1.25);  /* override local : lead plus généreux sur les slides intro */
}

/* === TEMPLATE : STORY (chiffre clé + photo lifestyle) === */
.tpl-story {
  position: absolute;
  /* Respecte la zone safe (haut: meta-bandeau, bas: progress bar) */
  inset: var(--slide-safe-top) 0 var(--slide-safe-bottom) 0;
  display: grid;
  grid-template-columns: 38% 62%;
  grid-template-rows: auto 1fr;       /* contenu en haut, note suit directement (le 1fr absorbe le vide en bas si la slide est haute) */
  z-index: 1;
  /* pas d'overflow:hidden ici sinon ça clip le border-radius de la photo en carré.
     Le clipping est fait au niveau des cells (content) qui peuvent déborder. */
}
.tpl-story.reverse { grid-template-columns: 62% 38%; }
.tpl-story-photo {
  grid-column: 1; grid-row: 1 / 3;          /* span sur les deux rows pour descendre tout en bas */
  position: relative;
  overflow: hidden;
  margin: 16px 0 0 var(--slide-safe-side);
  border-radius: 14px;
  background: var(--lfc-jaune);
}
.tpl-story.reverse .tpl-story-photo {
  grid-column: 2;
  margin: 16px var(--slide-safe-side) 0 0;
}
.tpl-story-photo img,
.tpl-story-photo .img-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
.tpl-story-content {
  grid-column: 2; grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 16px var(--slide-safe-side) 12px 60px;
  gap: 12px;
  min-height: 0;
  /* pas d'overflow:hidden : autoFitText() mesure scrollHeight et adapte --text-size.
     Si exceptionnellement ça déborde encore, mieux vaut un avertissement console que clipper. */
}
.tpl-story-content .tpl-story-hero {
  margin-top: 14px;     /* suit directement le texte, plus d'ancrage en bas */
}
/* Quand la slide n'a pas de note méthodo, le content prend les 2 rows et se centre
   verticalement pour répartir l'espace vide en haut et en bas (sinon : trou en bas
   sur grand écran). */
.tpl-story:not(:has(.tpl-story-note)) .tpl-story-content {
  grid-row: 1 / 3;
  justify-content: center;
}
.tpl-story.reverse .tpl-story-content {
  grid-column: 1;
  padding: 16px 60px 12px var(--slide-safe-side);
}
.tpl-story.reverse .tpl-story-note {
  grid-column: 1;
  margin: 0 60px 0 var(--slide-safe-side);
}
.tpl-story-content .t-h1 {
  max-width: 22em;        /* scale avec la police au lieu d'être figé en px */
  /* Taille basée sur la hauteur du viewport (responsive),
     mais identique entre slides à un viewport donné (pas autoFit) */
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.18;
}
.tpl-story-content .t-lead {
  max-width: 42em;        /* longueur de ligne lisible, mais qui scale avec la slide */
  color: var(--lfc-text);
  font-size: calc(var(--text-size, 16px) * 1.1);
  line-height: 1.55;
}
.tpl-story-content .t-lead strong { color: var(--lfc-teal); }
.tpl-story-hero {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--lfc-gray);
  padding-top: 16px;
  max-width: 42em;
}
.tpl-story-hero .t-hero {
  font-size: calc(var(--text-size, 16px) * 4.8);
  line-height: 0.95;
}
.tpl-story-hero .t-caption {
  /* Légende du chiffre-héro : taille corps, couleur principale, pas italique */
  font-size: calc(var(--text-size, 16px) * 1);
  font-weight: 500;
  font-style: normal;
  color: var(--lfc-text);
  letter-spacing: 0;
  max-width: 36em;
}
/* Note méthodo dans la colonne de droite uniquement (sous le content, pas sous la photo) */
.tpl-story-note {
  grid-column: 2; grid-row: 2;
  align-self: start;                  /* suit directement le content au lieu de s'étirer ou se caler en bas */
  margin: 12px var(--slide-safe-side) 0 60px;
  background: rgba(247,246,220,0.55);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(var(--text-size, 16px) * 0.85);
  color: var(--lfc-text-2);
  line-height: 1.45;
}
.tpl-story-note::before {
  content: "✱";
  color: var(--lfc-corail);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1.2;
}

/* === TEMPLATE : CHART (slide minimaliste : titre + graphe + source) ===
   Pour les slides "graphe pur" sans analyse ni remarque méthodo. */
.tpl-chart {
  position: absolute;
  inset: var(--slide-safe-top) var(--slide-safe-side) var(--slide-safe-bottom) var(--slide-safe-side);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 16px;
  z-index: 1;
}
.tpl-chart-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.tpl-chart-head .t-h1 {
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.18;
  text-align: center;
}
.tpl-chart-viz {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(254,192,144,0.10) 0%, rgba(254,192,144,0) 100%);
  border-radius: 16px;
  padding: 14px 8px 38px 8px;
  overflow: hidden;
  container-type: size;
}
.tpl-chart-viz .viz-source {
  position: absolute;
  bottom: 10px;
  left: 16px;
  font-size: calc(var(--text-size, 16px) * 0.75);
  font-weight: 400;
  color: var(--lfc-text-2);
  font-style: italic;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* === TEMPLATE : DATA VIZ ===
   Structure complète d'une page data du rapport :
     - HEAD       (auto)  : kicker + H1
     - INTRO+VIZ  (1fr)   : grid 1.1fr / 1fr → texte contextuel | bulles
     - NOTE       (auto)  : remarque méthodologique (encart corail léger)
     - SOURCE     (auto)  : source à gauche, légende à droite */
.tpl-dataviz {
  position: absolute;
  inset: var(--slide-safe-top) var(--slide-safe-side) var(--slide-safe-bottom) var(--slide-safe-side);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  z-index: 1;
}
.tpl-dataviz-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tpl-dataviz-head .t-kicker {
  font-size: calc(var(--text-size, 16px) * 0.72);  /* kicker plus discret */
}
.tpl-dataviz-head .t-h1 {
  /* H1 dataviz : la data est la star, titre modeste mais uniforme entre slides */
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.18;
  text-align: center;
}

.tpl-dataviz-main {
  display: grid;
  grid-template-columns: 1fr 3fr;        /* défaut : analyse 25% / graphe 75% */
  gap: 28px;
  min-height: 0;
  align-items: stretch;
}
/* Variante text-heavy : analyse plus large, graphe plus petit.
   Utile quand l'analyse est volumineuse et le graphe une simple répartition
   (donut, par ex.) qui se lit en petit. */
.tpl-dataviz.text-heavy .tpl-dataviz-main {
  grid-template-columns: 1fr 1.3fr;     /* analyse 43% / graphe 57% — graph un peu plus large */
}

/* Variante map-focused : ratio resserré pour les visualisations à aspect "carré"
   (carte de France, etc.) qui ne remplissent pas une colonne 3fr large.
   Le texte gagne de la place, la viz remplit mieux sa colonne. */
.tpl-dataviz.map-focused {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}
.tpl-dataviz.map-focused .tpl-dataviz-main {
  grid-template-columns: 0.62fr 1.88fr;   /* analyse ~25% / viz ~75% */
}
.tpl-dataviz.map-focused .tpl-dataviz-viz {
  padding: 6px 4px 24px 4px;
}
.tpl-dataviz.map-focused .tpl-dataviz-viz > .chart-france-map {
  padding: 0;
}
.tpl-dataviz.map-focused .france-map-svg-wrap {
  height: 100%;
}
.tpl-dataviz.map-focused .france-map-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
  transform: scale(1.08);
  transform-origin: center center;
}
.tpl-dataviz.map-focused .tpl-dataviz-viz .viz-source {
  bottom: 6px;
}

/* Variante viz-top : head — 2 zones viz côte à côte — texte d'analyse pleine largeur dessous.
   Utile quand on a 2 graphs distincts à présenter et un texte d'analyse court qui les commente. */
.tpl-dataviz.viz-top .tpl-dataviz-main {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  gap: 16px;
}
.tpl-dataviz-viz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  width: 100%;
}
.tpl-dataviz.viz-top .tpl-dataviz-intro {
  align-self: start;
  gap: 8px;                                            /* paragraphes plus serrés */
}
.tpl-dataviz.viz-top .tpl-dataviz-intro .t-lead {
  font-size: calc(var(--text-size, 16px) * 0.95);      /* override : analyse plus dense dans viz-top */
}
/* Empêche le min-height: 360px de .csp-vbars de faire déborder le graph
   sur la source dans une zone réduite (cas viz-top à 2 graphs côte à côte). */
.tpl-dataviz-viz-row .tpl-dataviz-viz > .csp-vbars,
.tpl-dataviz-viz-stack .tpl-dataviz-viz > .csp-vbars {
  min-height: 0;
}
.tpl-dataviz-viz-row .csp-vbar-plot,
.tpl-dataviz-viz-stack .csp-vbar-plot {
  min-height: 0;
}

/* Variante triptyque : donut | texte étroit central | donut.
   Le texte sert de pont d'analyse entre deux répartitions. */
.tpl-dataviz.triptyque .tpl-dataviz-main {
  grid-template-columns: 1.1fr minmax(190px, 0.85fr) 1.1fr;
  gap: 14px;
  align-items: stretch;
}
.tpl-dataviz.triptyque .zz-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 0 4px;
}
.tpl-dataviz.triptyque .zz-text .t-lead {
  color: var(--lfc-text);
  font-size: calc(var(--text-size, 16px) * 1.1);
  line-height: 1.55;
  text-align: center;
}
.tpl-dataviz.triptyque .zz-text .t-lead strong { color: var(--lfc-teal); }
.tpl-dataviz.triptyque .zz-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, rgba(254,192,144,0.10) 0%, rgba(254,192,144,0) 100%);
  border-radius: 14px;
  /* padding-bottom plus grand : réserve la place pour la source absolute (sinon elle
     se superpose à la légende du donut). Cohérent avec le standard .tpl-dataviz-viz
     (padding: 14px 8px 38px 8px). */
  padding: 10px 6px 32px 6px;
  container-type: size;
  position: relative;
}
.tpl-dataviz.triptyque .zz-viz > .viz-title {
  /* Hérite du style standard .viz-title (Bricolage 700, 0.95×, teal, centré). */
  margin: 0 8px 6px 8px;
}
.tpl-dataviz.triptyque .zz-viz > .chart-donut {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.tpl-dataviz.triptyque .zz-viz .viz-source {
  /* Aligné sur le standard .tpl-dataviz-viz .viz-source */
  position: absolute;
  bottom: 10px;
  left: 16px;
  font-size: calc(var(--text-size, 16px) * 0.75);
  font-weight: 400;
  font-style: italic;
  color: var(--lfc-text-2);
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  text-align: left;
  margin-top: 0;
}
.tpl-dataviz-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;            /* indispensable pour que le grid respecte les fractions */
}
.tpl-dataviz-intro .t-lead {
  color: var(--lfc-text);
  font-size: calc(var(--text-size, 16px) * 1.1);
  line-height: 1.55;
}
.tpl-dataviz-intro .t-lead strong { color: var(--lfc-teal); }
.tpl-dataviz-intro .takeaway-inline {
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--lfc-jaune);
  border-left: 3px solid var(--lfc-corail);
  border-radius: 8px;
  font-size: calc(var(--text-size, 16px) * 0.92);
  color: var(--lfc-teal-dark);
}
.tpl-dataviz-intro .takeaway-inline strong { color: var(--lfc-teal); }

/* Zone graphe : prend 100% de sa cellule, container queries pour adapter le contenu */
.tpl-dataviz-viz {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;          /* titre éventuel au-dessus, graphe au milieu, source en bas */
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(254,192,144,0.10) 0%, rgba(254,192,144,0) 100%);
  border-radius: 16px;
  padding: 14px 8px 38px 8px;
  overflow: hidden;
  container-type: size;
}
/* Le composant graphe interne (chart-donut, chart-bars, chart-line, etc.) prend l'espace restant */
.tpl-dataviz-viz > .chart-donut,
.tpl-dataviz-viz > .chart-bars,
.tpl-dataviz-viz > .chart-vbars,
.tpl-dataviz-viz > .chart-hbars,
.tpl-dataviz-viz > .bars-modern,
.tpl-dataviz-viz > .chart-line,
.tpl-dataviz-viz > .donut-pair,
.tpl-dataviz-viz > .chart-france-map,
.tpl-dataviz-viz > .metric-stack {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* === Pile d'indicateurs ===
   Pour afficher plusieurs indicateurs qui ne partagent pas une même échelle
   de comparaison (ex : euros annuels et euros horaires). */
.metric-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 12px 28px 18px;
}
.metric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(47,93,98,0.14);
}
.metric-row:first-child {
  border-top: 0;
}
.metric-label {
  min-width: 0;
  color: var(--lfc-text);
  font-weight: 700;
  line-height: 1.18;
}
.metric-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1em;
  line-height: 0.95;
  color: var(--lfc-teal);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.metric-row.is-main .metric-value {
  color: var(--lfc-corail);
}

/* === Stack vertical de 2 zones viz dans la même colonne === */
/* Utilisé quand on veut 2 graphs distincts (chacun avec son fond/arrondi/padding/source)
   empilés verticalement à la place d'une seule zone tpl-dataviz-viz. */
.tpl-dataviz-viz-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.tpl-dataviz-viz-stack > .tpl-dataviz-viz {
  flex: 1 1 0;
  min-height: 0;
}
.tpl-dataviz.viz-left .tpl-dataviz-viz-stack { order: 1; }

/* === donut-pair : 2 donuts côte à côte (catégorie juridique + NAF, etc.) === */
.donut-pair {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.donut-pair-cell {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.donut-pair-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.78em;
  color: var(--lfc-teal-dark);
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.25;
}
.donut-pair-cell > .chart-donut {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.tpl-dataviz-viz .viz-source {
  position: absolute;
  bottom: 10px;
  left: 16px;
  font-size: calc(var(--text-size, 16px) * 0.75);
  font-weight: 400;
  color: var(--lfc-text-2);
  font-style: italic;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
}

.tpl-dataviz-note {
  background: rgba(247,246,220,0.55);
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: calc(var(--text-size, 16px) * 0.85);
  color: var(--lfc-text-2);
  line-height: 1.45;
}
.tpl-dataviz-note::before {
  content: "✱";
  color: var(--lfc-corail);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1.1em;
  line-height: 1.2;
}
.tpl-dataviz-note strong { color: var(--lfc-teal); font-weight: 700; }

/* Slide priorites de branche : blocs thematiques sans graphique */
.tpl-priorities {
  position: absolute;
  inset: var(--slide-safe-top) var(--slide-safe-side) var(--slide-safe-bottom) var(--slide-safe-side);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  z-index: 1;
}
.tpl-priorities-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.tpl-priorities-head .t-h1 {
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
}
.tpl-priorities-head .t-lead {
  max-width: 900px;
  margin: 0 auto;
  font-size: calc(var(--text-size, 16px) * 0.98);
  line-height: 1.42;
}
.priority-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  min-height: 0;
}
.priority-card {
  min-width: 0;
  min-height: 0;
  padding: 22px 24px;
  border-radius: 10px;
  background: white;
  border-top: 4px solid var(--lfc-corail);
  box-shadow: 0 6px 22px -10px rgba(47,93,98,0.28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.priority-card h2 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--lfc-teal);
  font-size: calc(var(--text-size, 16px) * 1.42);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
}
.priority-card p {
  margin: 0;
  color: var(--lfc-text-2);
  font-size: calc(var(--text-size, 16px) * 0.92);
  line-height: 1.38;
}
.priority-quote {
  margin: 4px 0 0 0;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid var(--lfc-corail);
  background: rgba(247,246,220,0.42);
  color: var(--lfc-text);
  font-size: calc(var(--text-size, 16px) * 0.78);
  font-style: italic;
  line-height: 1.28;
}
.tpl-priorities > .viz-source {
  font-size: calc(var(--text-size, 16px) * 0.75);
  font-weight: 400;
  color: var(--lfc-text-2);
  font-style: italic;
  letter-spacing: 0;
}

/* Graphiques simples inspirés du PDF source : empilés, groupés, barres horizontales */
.pdf-charts-stack {
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.pdf-chart-block {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pdf-chart-title {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--lfc-teal);
  text-align: center;
  line-height: 1.15;
  font-size: calc(var(--text-size, 16px) * 0.86);
  margin-bottom: 10px;
}
.stacked-bars {
  display: grid;
  gap: 10px;
  padding: 4px 14px;
}
.stacked-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 10px;
  font-size: calc(var(--text-size, 16px) * 0.76);
  color: var(--lfc-text-2);
  font-weight: 600;
}
.stacked-track {
  display: flex;
  height: 28px;
  overflow: hidden;
  background: rgba(47,93,98,0.08);
}
.stacked-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lfc-teal-dark);
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 0.74);
  font-weight: 800;
}
.stacked-seg.teal-light { background: #63c9be; }
.stacked-seg.teal-dark { background: #2F5D62; color: white; }
.grouped-bars {
  display: grid;
  gap: 8px;
  padding: 2px 8px;
}
.group-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.82fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 10px;
}
.group-label {
  font-size: calc(var(--text-size, 16px) * 0.66);
  font-weight: 700;
  color: var(--lfc-text-2);
  text-align: right;
  line-height: 1.05;
}
.group-bars {
  display: grid;
  grid-template-rows: repeat(3, auto);
  gap: 4px;
  align-items: center;
}
.group-bar {
  width: var(--w, 0%);
  height: 9px;
  min-width: 3px;
  position: relative;
  background: var(--bar-color, #63c9be);
}
.group-bar::after {
  content: attr(data-value);
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 0.62);
  font-weight: 800;
  color: var(--lfc-text-2);
  white-space: nowrap;
}
.group-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 4px;
  font-size: calc(var(--text-size, 16px) * 0.68);
  color: var(--lfc-text-2);
}
.group-legend span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  background: var(--dot);
  vertical-align: middle;
}
.csp-chart-block {
  min-height: min(440px, 100%);
}

/* === Variante : viz à gauche, analyse à droite ===
   Cas du slide sexe & âge inspiré du PDF d'origine. Le défaut .tpl-dataviz-main
   est texte 1fr / viz 3fr ; ici on inverse l'ordre et on rééquilibre. */
.tpl-dataviz.viz-left .tpl-dataviz-main {
  grid-template-columns: 1fr 1fr;
}
.tpl-dataviz.viz-left .tpl-dataviz-viz { order: 1; }
.tpl-dataviz.viz-left .tpl-dataviz-intro { order: 2; }

.chart-vbars {
  width: 100%;
  height: 100%;
}
.csp-vbars {
  display: grid;
  grid-template-columns: repeat(var(--vbar-count, 4), minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  height: 100%;
  min-height: 360px;
  padding: 24px 8px 4px;
}
.csp-vbar-cell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  height: 100%;
  min-width: 0;
}
.csp-vbar-plot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 260px;
  border-bottom: 2px solid rgba(47,93,98,0.18);
}
.csp-vbar {
  width: min(58px, 72%);
  min-height: 7px;
  height: 0;
  position: relative;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--lfc-corail) 0%, var(--lfc-salmon) 100%);
  box-shadow: 0 -2px 8px -2px rgba(232,160,144,0.35);
  animation: csp-vbar-rise 700ms cubic-bezier(.2,.85,.25,1) forwards;
}
@keyframes csp-vbar-rise {
  to { height: var(--h, 0%); }
}
.csp-vbar.is-main {
  background: linear-gradient(180deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  box-shadow: 0 -2px 10px -2px rgba(47,93,98,0.35);
}
.csp-vbar span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 0.78);
  font-weight: 800;
  color: var(--lfc-teal-dark);
  white-space: nowrap;
}
.csp-vbar-label {
  min-height: 42px;
  font-size: calc(var(--text-size, 16px) * 0.66);
  line-height: 1.08;
  text-align: center;
  font-weight: 700;
  color: var(--lfc-text);
}

/* === Mode groupé : barres regroupées par "paquets" avec un label par groupe ===
   Structure : N plots en row 1, nGroups labels en row 2 (chacun span = group-size).
   Le label par barre est remplacé par un label par groupe.
   Les barres "fin de groupe" reçoivent un margin-right pour aérer entre groupes. */
.csp-vbars.is-grouped {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: repeat(var(--vbar-count, 4), minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 12px;
  /* Override le align-items:end hérité de .csp-vbars : sinon les plots ne
     s'étirent pas verticalement dans la grille 2 rangs et la hauteur en %
     des barres enfants vaut 0. */
  align-items: stretch;
}
.csp-vbars.is-grouped .csp-vbar-plot {
  grid-row: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 2px solid rgba(47,93,98,0.18);
}
.csp-vbars.is-grouped .csp-vbar-plot.is-group-end {
  margin-right: 28px;
}

/* Source alignée tout à gauche de la slide (et non au niveau d'un chart en
   particulier). Variante du .viz-source destinée à être placée à la racine
   du template (ex : 3e ligne du grid .tpl-dataviz). */
.slide-source {
  font-size: calc(var(--text-size, 16px) * 0.72);
  font-weight: 400;
  color: var(--lfc-text-2);
  font-style: italic;
  text-align: left;
  letter-spacing: 0;
}
.csp-vbar-group-label {
  grid-row: 2;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 0.85);
  color: var(--lfc-teal-dark);
  padding-top: 4px;
}
/* Quand les libellés de groupe sont rendus hors du chart (mode "labels externes"),
   le grid n'a qu'une seule ligne — on supprime la 2e row réservée. */
.csp-vbars.is-grouped.is-grouped-no-labels {
  grid-template-rows: minmax(0, 1fr);
}

/* === Légende couleur (placée sous un chart-vbars, hors de sa zone graphique) === */
.vbars-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  font-size: calc(var(--text-size, 16px) * 0.72);
  font-weight: 700;
  color: var(--lfc-text);
}
/* Rangée 2 colonnes alignée sur tpl-dataviz-viz-row (1 cellule par chart).
   Chaque cellule empile : libellés d'axe (années, etc.) puis légende couleur. */
.tpl-dataviz-legends-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vbars-axis-and-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vbars-axis-labels {
  display: flex;
  justify-content: space-around;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 0.85);
  color: var(--lfc-teal-dark);
}
.vbars-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vbars-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.tpl-dataviz-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.tpl-dataviz-source .t-caption { font-style: italic; }
.tpl-dataviz-source .legend {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: calc(var(--text-size, 16px) * 0.78);
  color: var(--lfc-text-2);
}
.tpl-dataviz-source .legend-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

/* === Flag de débordement : appliqué par autoFitText() quand un template
   continue à déborder même à --text-size minimum. Bordure dashed rouge
   + pastille pour que l'éditeur voie le problème immédiatement. */
[class*="tpl-"].is-overflowing {
  outline: 2px dashed #c2402b;
  outline-offset: -2px;
}
[class*="tpl-"].is-overflowing::after {
  content: "⚠ contenu trop volumineux";
  position: absolute;
  bottom: 6px;
  right: 12px;
  background: #c2402b;
  color: white;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0;
  z-index: 99;
  pointer-events: none;
}

/* === Composant CASCADE : rail de calcul horizontal ===
   Quatre blocs de valeur reliés par des opérations lisibles. */
.tpl-chart-viz.cascade-viz {
  background: transparent;
  padding: 0 8px 68px 8px;
}
.cascade {
  display: grid;
  grid-template-columns:
    minmax(0, 1.05fr) minmax(74px, 0.44fr)
    minmax(0, 0.95fr) minmax(74px, 0.44fr)
    minmax(0, 0.95fr) minmax(74px, 0.44fr)
    minmax(0, 1.1fr);
  align-items: center;
  justify-items: center;
  column-gap: 12px;
  width: 100%;
  height: 100%;
  padding: 18px 0 8px 0;
  transform: translateY(-44px);
}
.cascade-step {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  animation: cascade-rise 600ms cubic-bezier(.2,.85,.35,1) forwards;
  z-index: 2;
}
.cascade-step:nth-child(1) { grid-column: 1; animation-delay: 100ms; }
.cascade-step:nth-child(3) { grid-column: 3; animation-delay: 320ms; }
.cascade-step:nth-child(5) { grid-column: 5; animation-delay: 540ms; }
.cascade-step:nth-child(7) { grid-column: 7; animation-delay: 760ms; }
@keyframes cascade-rise {
  to { opacity: 1; transform: translateY(0); }
}
.cascade-card {
  background: white;
  border-radius: 10px;
  padding: 18px 18px 16px 18px;
  box-shadow: 0 4px 16px -6px rgba(47,93,98,0.18);
  border-top: 4px solid var(--lfc-corail);
  width: 100%;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.cascade-card.is-final {
  background: linear-gradient(135deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  border-top-color: var(--lfc-corail);
  box-shadow: 0 6px 20px -6px rgba(47,93,98,0.45);
}
.cascade-card.is-final .cascade-card-label,
.cascade-card.is-final .cascade-card-value,
.cascade-card.is-final .cascade-card-note { color: white; }
.cascade-card-label {
  font-family: var(--font);
  font-weight: 650;
  font-size: 0.92em;
  color: var(--lfc-text-2);
  line-height: 1.25;
}
.cascade-card-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.05em;
  color: var(--lfc-teal);
  letter-spacing: -0.015em;
  line-height: 0.98;
}
.cascade-card-note {
  font-size: 0.72em;
  line-height: 1.25;
  color: var(--lfc-text-2);
}
.cascade-card-source {
  align-self: flex-start;
  font-size: 0.68em;
  font-weight: 700;
  color: var(--lfc-teal);
  background: rgba(247,246,220,0.8);
  border-radius: 999px;
  padding: 3px 8px;
}
.cascade-link {
  width: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: cascade-link-fade 500ms ease-out forwards;
  z-index: 1;
}
.cascade-link:nth-child(2) { grid-column: 2; animation-delay: 220ms; }
.cascade-link:nth-child(4) { grid-column: 4; animation-delay: 440ms; }
.cascade-link:nth-child(6) { grid-column: 6; animation-delay: 660ms; }
@keyframes cascade-link-fade { to { opacity: 1; } }
.cascade-link::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(254,192,144,0.85) 0%, rgba(47,93,98,0.55) 100%);
  transform: translateY(-50%);
  opacity: 0.65;
}
.cascade-link-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: min(130px, 100%);
  font-size: 0.74em;
  color: var(--lfc-text);
  line-height: 1.16;
  text-align: center;
  padding: 8px 9px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(47,93,98,0.12);
  border-radius: 8px;
  box-shadow: 0 4px 14px -8px rgba(47,93,98,0.28);
}
.cascade-link-text strong {
  color: var(--lfc-teal);
  font-weight: 800;
  font-size: 1.18em;
  line-height: 1;
}
.cascade-link-delta {
  color: var(--lfc-corail);
  font-weight: 800;
  font-size: 0.95em;
}
.cascade-link::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--lfc-teal);
  opacity: 0.7;
}

@container (max-width: 980px) {
  .tpl-chart-viz.cascade-viz {
    padding: 0 8px 26px 8px;
  }
  .cascade {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 108px) minmax(0, 1fr);
    grid-template-rows: auto 46px auto;
    column-gap: 12px;
    row-gap: 10px;
    padding: 4px 0;
    transform: none;
  }
  .cascade-step:nth-child(1) { grid-column: 1; grid-row: 1; }
  .cascade-link:nth-child(2) { grid-column: 2; grid-row: 1; }
  .cascade-step:nth-child(3) { grid-column: 3; grid-row: 1; }
  .cascade-link:nth-child(4) {
    grid-column: 1 / 4;
    grid-row: 2;
    justify-self: center;
    width: min(260px, 64%);
  }
  .cascade-step:nth-child(5) { grid-column: 1; grid-row: 3; }
  .cascade-link:nth-child(6) { grid-column: 2; grid-row: 3; }
  .cascade-step:nth-child(7) { grid-column: 3; grid-row: 3; }
  .cascade-card {
    min-height: 112px;
    padding: 12px 16px;
    gap: 5px;
  }
  .cascade-card-value {
    font-size: 1.72em;
  }
  .cascade-link-text {
    width: min(128px, 100%);
    font-size: 0.72em;
    padding: 7px 8px;
  }
  .cascade-link:nth-child(4)::before {
    left: 50%;
    right: auto;
    top: -12px;
    bottom: -12px;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(254,192,144,0.85) 0%, rgba(47,93,98,0.55) 100%);
  }
  .cascade-link:nth-child(4)::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -13px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--lfc-teal);
    border-bottom: 0;
  }
}

/* === Composant CALC BRIDGE : calcul explicite depart -> resultat === */
.tpl-chart-viz.calc-viz {
  background: transparent;
  padding: 0 0 54px 0;
}
.calc-bridge {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1.35fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: center;
  transform: translateY(-28px);
}
.calc-card,
.calc-panel {
  border-radius: 10px;
  box-shadow: 0 6px 22px -10px rgba(47,93,98,0.28);
}
.calc-card {
  min-height: 220px;
  padding: 22px 24px;
  background: white;
  border-top: 4px solid var(--lfc-corail);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.calc-card.is-result {
  background: linear-gradient(135deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  color: white;
}
.calc-eyebrow {
  align-self: flex-start;
  font-size: 0.72em;
  font-weight: 800;
  color: var(--lfc-teal);
  background: rgba(247,246,220,0.85);
  border-radius: 999px;
  padding: 4px 9px;
}
.calc-card.is-result .calc-eyebrow {
  color: white;
  background: rgba(255,255,255,0.16);
}
.calc-card-label {
  font-weight: 700;
  color: var(--lfc-text-2);
  font-size: 1em;
  line-height: 1.25;
}
.calc-card.is-result .calc-card-label { color: white; }
.calc-card-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.55em;
  line-height: 0.95;
  color: var(--lfc-teal);
  letter-spacing: -0.015em;
}
.calc-card.is-result .calc-card-value { color: white; }
.calc-card-note {
  font-size: 0.82em;
  line-height: 1.25;
  color: var(--lfc-text-2);
}
.calc-card.is-result .calc-card-note { color: rgba(255,255,255,0.88); }
.calc-panel {
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(47,93,98,0.10);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calc-panel-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lfc-teal);
  font-size: 1.04em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.calc-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid rgba(47,93,98,0.12);
}
.calc-row:first-of-type { border-top: 0; }
.calc-row-op {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lfc-jaune);
  color: var(--lfc-teal);
  font-weight: 800;
  font-size: 0.9em;
}
.calc-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.calc-row-label {
  font-weight: 700;
  color: var(--lfc-text);
  font-size: 0.9em;
  line-height: 1.2;
}
.calc-row-detail {
  color: var(--lfc-text-2);
  font-size: 0.76em;
  line-height: 1.2;
}
.calc-row-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15em;
  color: var(--lfc-teal);
  white-space: nowrap;
}
.calc-row-formula {
  grid-column: 2 / 4;
  color: var(--lfc-text-2);
  font-size: 0.75em;
  line-height: 1.2;
  margin-top: -4px;
}

@container (max-width: 980px) {
  .tpl-chart-viz.calc-viz {
    padding: 0 0 26px 0;
  }
  .calc-bridge {
    grid-template-columns: 0.92fr 1.18fr;
    grid-template-rows: auto auto;
    gap: 12px;
    transform: none;
  }
  .calc-card {
    min-height: 126px;
    padding: 14px 16px;
    gap: 6px;
  }
  .calc-card-value {
    font-size: 1.72em;
  }
  .calc-panel {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 12px 14px;
    gap: 6px;
  }
  .calc-card.is-result {
    grid-column: 1;
    grid-row: 2;
  }
  .calc-row {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 0;
  }
  .calc-row-op {
    width: 24px;
    height: 24px;
  }
  .calc-row-label {
    font-size: 0.78em;
  }
  .calc-row-detail,
  .calc-row-formula {
    font-size: 0.68em;
  }
  .calc-row-amount {
    font-size: 0.96em;
  }
}

/* === Composant STEP PATH : etapes decalees pour garder des cartes larges === */
.tpl-chart-viz.step-path-viz {
  background: transparent;
  padding: 0 0 46px 0;
}
.step-path {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(118px, 0.36fr) minmax(260px, 1fr);
  grid-template-rows: auto minmax(90px, 0.42fr) auto;
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
  transform: none;
}
.step-card,
.step-op {
  position: relative;
  z-index: 2;
}
.step-card {
  min-width: 0;
  min-height: 138px;
  padding: 18px 20px;
  border-radius: 10px;
  background: white;
  border-top: 4px solid var(--lfc-corail);
  box-shadow: 0 6px 22px -10px rgba(47,93,98,0.28);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.step-card.is-1 { grid-column: 1; grid-row: 1; }
.step-card.is-2 { grid-column: 3; grid-row: 1; }
.step-card.is-3 { grid-column: 3; grid-row: 3; }
.step-card.is-result {
  grid-column: 1;
  grid-row: 3;
  min-height: 148px;
  background: linear-gradient(135deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  border-top-color: var(--lfc-corail);
  color: white;
}
.step-label {
  font-weight: 700;
  color: var(--lfc-text-2);
  font-size: 0.93em;
  line-height: 1.25;
}
.step-card.is-result .step-label { color: white; }
.step-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.98em;
  line-height: 0.96;
  color: var(--lfc-teal);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.step-card.is-result .step-value {
  color: white;
  font-size: 2.2em;
}
.step-note {
  font-size: 0.72em;
  color: var(--lfc-text-2);
  line-height: 1.25;
}
.step-card.is-result .step-note { color: rgba(255,255,255,0.88); }
.step-badge {
  align-self: flex-start;
  font-size: 0.68em;
  font-weight: 800;
  color: var(--lfc-teal);
  background: rgba(247,246,220,0.85);
  border-radius: 999px;
  padding: 3px 8px;
}
.step-card.is-result .step-badge {
  color: white;
  background: rgba(255,255,255,0.16);
}
.step-op {
  --connector-overlap: 10px;
  min-width: 0;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 132px;
  padding: 9px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(47,93,98,0.12);
  box-shadow: 0 4px 14px -8px rgba(47,93,98,0.28);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78em;
  line-height: 1.16;
  overflow-wrap: normal;
}
.step-op.is-1 { grid-column: 2; grid-row: 1; transform: none; }
.step-op.is-2 { grid-column: 3; grid-row: 2; transform: none; }
.step-op.is-3 { grid-column: 2; grid-row: 3; transform: none; }
.step-op strong {
  color: var(--lfc-teal);
  font-weight: 800;
  font-size: 1.22em;
  line-height: 1;
}
.step-op-delta {
  color: var(--lfc-corail);
  font-weight: 800;
  font-size: 0.96em;
}
.step-path::before {
  content: "";
  position: absolute;
}
.step-path {
  position: relative;
}
.step-op::before,
.step-op::after {
  content: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1;
}
.step-op.is-2::before {
  left: 50%;
  right: auto;
  top: -22px;
  bottom: auto;
  width: 2px;
  height: 22px;
  transform: translateX(-50%);
  background: rgba(47,93,98,0.45);
}
.step-op.is-2::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -22px;
  width: 2px;
  height: 22px;
  transform: translateX(-50%);
  background: rgba(47,93,98,0.45);
}
.step-op::before {
  left: calc(-1 * var(--connector-overlap));
  right: calc(100% + var(--connector-overlap));
  height: 2px;
  background: rgba(47,93,98,0.45);
}
.step-op::after {
  left: calc(100% + var(--connector-overlap));
  right: calc(-1 * var(--connector-overlap));
  height: 2px;
  background: rgba(47,93,98,0.45);
}

@container (max-width: 980px) {
  .tpl-chart-viz.step-path-viz {
    padding: 0 0 24px 0;
  }
  .step-path {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 108px) minmax(0, 1fr);
    grid-template-rows: auto 42px auto;
    column-gap: 12px;
    row-gap: 10px;
    transform: none;
  }
  .step-card {
    min-height: 112px;
    padding: 12px 16px;
    gap: 5px;
  }
  .step-card.is-1 { grid-column: 1; grid-row: 1; }
  .step-card.is-2 { grid-column: 3; grid-row: 1; }
  .step-card.is-3 { grid-column: 3; grid-row: 3; }
  .step-card.is-result {
    grid-column: 1;
    grid-row: 3;
    min-height: 112px;
  }
  .step-value,
  .step-card.is-result .step-value {
    font-size: 1.72em;
  }
  .step-op {
    --connector-overlap: 8px;
    width: min(118px, 100%);
    padding: 7px 8px;
    font-size: 0.68em;
  }
  .step-op.is-1 { grid-column: 2; grid-row: 1; transform: none; }
  .step-op.is-2 {
    grid-column: 3;
    grid-row: 2;
    justify-self: center;
    width: min(150px, 52%);
    transform: none;
  }
  .step-op.is-3 { grid-column: 2; grid-row: 3; transform: none; }
  .step-op.is-2::before {
    left: 50%;
    right: auto;
    top: -10px;
    bottom: auto;
    width: 2px;
    height: 10px;
    transform: translateX(-50%);
  }
  .step-op.is-2::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -10px;
    width: 2px;
    height: 10px;
    transform: translateX(-50%);
  }
}

/* === TEMPLATE : PROCESS (2 colonnes : bullets vs étapes) === */
.tpl-process {
  position: absolute;
  inset: var(--slide-safe-top) var(--slide-safe-side) var(--slide-safe-bottom) var(--slide-safe-side);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  z-index: 1;
}
.tpl-process-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.tpl-process-head .t-h1 {
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}
.report-flow {
  display: grid;
  grid-template-columns: minmax(190px, 0.78fr) minmax(0, 2fr) minmax(190px, 0.78fr);
  gap: 22px;
  align-items: center;
  min-height: 0;
  position: relative;
}
.flow-start,
.flow-result {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.flow-step {
  min-width: 0;
  border-radius: 10px;
  background: white;
  border-top: 4px solid var(--lfc-corail);
  box-shadow: 0 8px 26px -14px rgba(47,93,98,0.34);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-step span {
  align-self: flex-start;
  color: var(--lfc-teal);
  background: rgba(247,246,220,0.85);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: calc(var(--text-size, 16px) * 0.68);
  font-weight: 800;
  line-height: 1.15;
}
.flow-step strong {
  font-family: var(--font-display);
  color: var(--lfc-teal);
  font-size: calc(var(--text-size, 16px) * 1.28);
  line-height: 1.08;
  font-weight: 800;
}
.flow-step p {
  margin: 0;
  color: var(--lfc-text-2);
  font-size: calc(var(--text-size, 16px) * 0.82);
  line-height: 1.32;
}
.flow-step-result {
  background: white;
  color: var(--lfc-text);
}
.flow-lanes {
  min-width: 0;
  display: grid;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.flow-lane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.flow-lane:has(.flow-lane-label-bottom) {
  grid-template-rows: minmax(0, 1fr) auto;
}
.flow-lane-label {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--lfc-teal);
  font-size: calc(var(--text-size, 16px) * 0.98);
  line-height: 1.12;
  text-align: center;
}
.flow-track {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  position: relative;
}
.flow-track-questionnaire {
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr) 30px minmax(0, 1fr);
}
.flow-track::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  background: rgba(47,93,98,0.16);
  z-index: 0;
}
.flow-node {
  position: relative;
  z-index: 1;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 10px;
  border-radius: 8px;
  background: white;
  box-shadow: 0 6px 20px -14px rgba(47,93,98,0.34);
  border: 1px solid rgba(47,93,98,0.10);
  color: var(--lfc-text);
  font-weight: 700;
  font-size: calc(var(--text-size, 16px) * 0.72);
  line-height: 1.25;
}
.flow-arrow {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  justify-self: center;
  align-self: center;
  border-radius: 999px;
  background: var(--lfc-corail);
}
.flow-arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 3px solid var(--lfc-teal-dark);
  border-top: 3px solid var(--lfc-teal-dark);
  transform: translate(-60%, -50%) rotate(45deg);
}

/* === TEMPLATE : SOURCES METHODOLOGIQUES === */
.tpl-sources {
  position: absolute;
  inset: var(--slide-safe-top) var(--slide-safe-side) var(--slide-safe-bottom) var(--slide-safe-side);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 24px;
  z-index: 1;
}
.tpl-sources-head {
  text-align: center;
}
.tpl-sources-head .t-h1 {
  font-size: min(clamp(28px, calc(var(--real-vh, 675px) * 0.052), 40px), calc(var(--text-size, 16px) * 2.4));
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}
.sources-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  min-height: 0;
}
.source-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  border-radius: 8px;
  background: white;
  box-shadow: 0 8px 26px -14px rgba(47,93,98,0.34);
  overflow: hidden;
  border: 1px solid rgba(47,93,98,0.10);
}
.source-card-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 2.1);
  line-height: 1;
  color: white;
  background: var(--lfc-teal);
}
.source-card-questionnaire .source-card-num {
  background: var(--lfc-corail);
  color: var(--lfc-teal-dark);
}
.source-card-body {
  min-width: 0;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.source-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 1.65);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--lfc-teal);
}
.source-card p {
  margin: 0;
  color: var(--lfc-text);
  font-size: calc(var(--text-size, 16px) * 0.98);
  line-height: 1.42;
}
.source-card .source-highlight {
  padding-top: 14px;
  border-top: 1px solid rgba(47,93,98,0.12);
  color: var(--lfc-text-2);
  font-size: calc(var(--text-size, 16px) * 0.88);
  line-height: 1.35;
}
.sources-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(247,246,220,0.64);
  border-left: 4px solid var(--lfc-corail);
  color: var(--lfc-text-2);
  font-size: calc(var(--text-size, 16px) * 0.86);
  line-height: 1.35;
}
.sources-note strong {
  color: var(--lfc-teal);
  font-weight: 800;
  white-space: nowrap;
}

/* Quand un template "tpl-*" est utilisé, neutraliser le content-text par défaut
   (padding, max-width, justification…) pour laisser le template gérer sa mise en page.
   Les .tpl-* sont en position:absolute inset:0 et débordent jusqu'aux bords du slide. */
.content-text:has(> .tpl-section),
.content-text:has(> .tpl-story),
.content-text:has(> .tpl-dataviz),
.content-text:has(> .tpl-process),
.content-text:has(> .tpl-sources),
.content-text:has(> .tpl-chart) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  position: relative !important;
  overflow: visible !important;
}
/* Le slide-body parent doit lui aussi laisser le template plein écran */
.slide-body:has(.tpl-section),
.slide-body:has(.tpl-story),
.slide-body:has(.tpl-dataviz),
.slide-body:has(.tpl-process),
.slide-body:has(.tpl-sources),
.slide-body:has(.tpl-chart) {
  padding: 0 !important;
  position: relative;
}
/* Les templates eux-mêmes ne sont positionnés qu'à l'intérieur du slide-body
   (bandeau LFC top et progress bottom restent visibles) */


.bubbles-modern {
  display: flex;
  align-items: stretch;        /* toutes les cells à la même hauteur → pcts alignés */
  justify-content: center;
  gap: calc(var(--text-size, 16px) * 2);
  width: 100%;
  margin: calc(var(--text-size, 16px) * 1.5) 0 calc(var(--text-size, 16px) * 0.8) 0;
  padding: 0 calc(var(--text-size, 16px) * 1);
}
.bubbles-modern .bubble-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;  /* pct en haut, bulle en bas → tous alignés */
  position: relative;
  opacity: 0;
  transform: translateY(8px) scale(0.6);
  animation: bubble-rise 700ms cubic-bezier(.2,.85,.35,1.05) forwards;
}
.bubbles-modern .bubble-cell:nth-child(1) { animation-delay: 200ms; }
.bubbles-modern .bubble-cell:nth-child(2) { animation-delay: 380ms; }
.bubbles-modern .bubble-cell:nth-child(3) { animation-delay: 560ms; }
.bubbles-modern .bubble-cell:nth-child(4) { animation-delay: 740ms; }
@keyframes bubble-rise {
  0%   { opacity: 0; transform: translateY(20px) scale(0.4); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.bubbles-modern .bubble-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--text-size, 16px) * 1);
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: -0.005em;
}
.bubbles-modern .bubble-pct.up   { color: var(--lfc-teal); background: rgba(127,183,126,0.22); }
.bubbles-modern .bubble-pct.down { color: #B23B2A; background: rgba(232,160,144,0.30); }
.bubbles-modern .bubble-pct.neutral {
  visibility: hidden;
}

.bubbles-modern .bubble {
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  background: linear-gradient(135deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  box-shadow: 0 14px 32px -10px rgba(47,93,98,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  position: relative;
  cursor: default;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Tailles de bulles en cqw (% de la largeur de la zone graphe).
   17+17+22+28 = 84 cqw + 3 gaps × 2 = 90 cqw → laisse ~10% de marge.
   Les bulles occupent maintenant pleinement leur zone. */
.bubbles-modern .bubble.size-1 { width: 17cqw; height: 17cqw; font-size: 2cqw;   }
.bubbles-modern .bubble.size-2 { width: 17cqw; height: 17cqw; font-size: 2cqw;   }
.bubbles-modern .bubble.size-3 { width: 22cqw; height: 22cqw; font-size: 2.4cqw; }
.bubbles-modern .bubble.size-4 { width: 28cqw; height: 28cqw; font-size: 2.9cqw; }
/* Espacement plus serré pour donner plus de place aux bulles */
.bubbles-modern { gap: 1cqw; padding: 0; }
.bubbles-modern .bubble .bubble-yr {
  /* Année DANS la bulle, sous le chiffre */
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.52em;
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-top: 2px;
}
/* La bulle-year en cellule séparée n'est plus utilisée — masquée pour ne pas prendre de place */
.bubbles-modern .bubble-cell > .bubble-year { display: none; }
.bubbles-modern .bubble.tone-soft {
  background: linear-gradient(135deg, var(--lfc-corail) 0%, var(--lfc-salmon) 100%);
  color: var(--lfc-teal-dark);
  box-shadow: 0 14px 32px -10px rgba(232,160,144,0.55);
}
.bubbles-modern .bubble.tone-mute {
  background: linear-gradient(135deg, var(--lfc-gray) 0%, #c9c4c4 100%);
  color: var(--lfc-teal-dark);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.18);
}
.bubbles-modern .bubble:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 20px 38px -10px rgba(47,93,98,0.65);
}

.bubbles-modern .bubble-year {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: calc(var(--text-size, 16px) * 1.25);
  font-weight: 600;
  color: var(--lfc-teal);
  letter-spacing: -0.01em;
}

/* Tooltip détail au hover */
.bubbles-modern .bubble-tip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: var(--lfc-teal-dark);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.85em;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  z-index: 10;
}
.bubbles-modern .bubble-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--lfc-teal-dark);
}
.bubbles-modern .bubble-cell:hover .bubble-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Compat avec l'ancien rendu (au cas où d'autres slides l'utilisent encore) */
.bubble-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; }
.bubble-cell { display: flex; flex-direction: column; align-items: center; flex: 1; }
.bubble { background: var(--lfc-teal); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-display); }
.bubble-year { margin-top: 8px; font-size: 0.85em; color: var(--lfc-text-2); }
.bubble-pct { font-weight: 700; margin-bottom: 8px; }
.bubble-pct.up { color: var(--lfc-green); }
.bubble-pct.down { color: var(--lfc-salmon); }

/* === Graphe en courbe SVG (component .chart-line) === */
.chart-line {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-line-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}
.chart-line-svg .cl-area {
  opacity: 0;
  animation: cl-area-fade 1.6s ease-out 1.2s forwards;
}
@keyframes cl-area-fade { to { opacity: 1; } }

.chart-line-svg .cl-line {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: cl-line-draw 1.8s cubic-bezier(.22,.85,.3,1) 0.3s forwards;
}
@keyframes cl-line-draw { to { stroke-dashoffset: 0; } }

.chart-line-svg .cl-point {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.4);
  animation: cl-point-rise 500ms cubic-bezier(.2,.85,.35,1.05) forwards;
}
@keyframes cl-point-rise {
  to { opacity: 1; transform: scale(1); }
}

/* === Graphe en barres verticales (charte LFC) ===
   Conteneur prend 100% de la hauteur de la zone graphe.
   Chaque cell : pct (delta vs n-1) + valeur + barre + année.
   Hauteur de la barre = ratio × 100% de la zone barre, calculée par JS depuis les valeurs. */
.bars-modern {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 3cqw;
  width: 100%;
  height: 100%;
  padding: 1cqw 1cqw 0 1cqw;
  position: relative;
}
.bars-modern .bar-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  position: relative;
  opacity: 0;
  animation: bar-cell-fade 600ms ease-out forwards;
}
.bars-modern .bar-cell:nth-child(1) { animation-delay: 100ms; }
.bars-modern .bar-cell:nth-child(2) { animation-delay: 250ms; }
.bars-modern .bar-cell:nth-child(3) { animation-delay: 400ms; }
.bars-modern .bar-cell:nth-child(4) { animation-delay: 550ms; }
.bars-modern .bar-cell:nth-child(5) { animation-delay: 700ms; }
@keyframes bar-cell-fade {
  to { opacity: 1; }
}

/* Le label (pct + valeur) est positionné en absolute juste au-dessus de la barre,
   donc il "monte" automatiquement avec la barre lors de l'animation */
.bars-modern .bar-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  white-space: nowrap;
}

.bars-modern .bar-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9cqw;
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: -0.005em;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.12);
}
.bars-modern .bar-pct.up   {
  color: white;
  background: linear-gradient(135deg, var(--lfc-green) 0%, #6aa069 100%);
}
.bars-modern .bar-pct.down {
  color: white;
  background: linear-gradient(135deg, var(--lfc-salmon) 0%, #d18879 100%);
}

.bars-modern .bar-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4cqw;
  color: var(--lfc-teal);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.bars-modern .bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.bars-modern .bar {
  position: relative;             /* contexte pour .bar-label en absolute */
  width: 70%;
  max-width: 14cqw;
  background: linear-gradient(180deg, var(--lfc-corail) 0%, var(--lfc-salmon) 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px -2px rgba(232,160,144,0.4);
  min-height: 4px;
  --ratio: 0;
  height: 0;
  animation: bar-rise 1000ms cubic-bezier(.2,.85,.25,1) forwards;
}
.bars-modern .bar.is-current {
  background: linear-gradient(180deg, var(--lfc-teal) 0%, var(--lfc-teal-dark) 100%);
  box-shadow: 0 -2px 12px -2px rgba(47,93,98,0.4);
}
@keyframes bar-rise {
  /* 70cqh = max 70% de la hauteur de la zone graphe ; le reste (30%) est pour
     pct + valeur au-dessus + année en dessous + paddings */
  to { height: calc(var(--ratio) * 70cqh); }
}
.bars-modern .bar-cell:nth-child(1) .bar { animation-delay: 200ms; }
.bars-modern .bar-cell:nth-child(2) .bar { animation-delay: 350ms; }
.bars-modern .bar-cell:nth-child(3) .bar { animation-delay: 500ms; }
.bars-modern .bar-cell:nth-child(4) .bar { animation-delay: 650ms; }
.bars-modern .bar-cell:nth-child(5) .bar { animation-delay: 800ms; }

.bars-modern .bar-year {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.85cqw;
  color: var(--lfc-text);
  letter-spacing: -0.01em;
}

/* Timeline d'hypothèses (page 12) */
.hypotheses-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--text-size, 16px) * 2);
  align-items: center;
  width: 100%;
}
.hypotheses-list { display: flex; flex-direction: column; gap: 16px; }
.hypotheses-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.hypotheses-bullet {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
  margin-top: 6px;
}
.hypotheses-arrows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.hypotheses-arrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.hypotheses-arrow {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hypotheses-arrow svg { width: 100%; height: 100%; }

/* Source label sous les graphes */
.source {
  font-size: 0.8em;
  color: var(--text-light);
  margin-top: 8px;
}

/* Placeholder graphe (en attendant les vrais SVG) */
.chart-placeholder {
  flex: 1;
  background: rgba(79,168,160,0.08);
  border: 2px dashed var(--accent);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);
  font-size: 0.95em;
  font-weight: 600;
  text-align: center;
  padding: 24px;

  min-height: 60%;
}
.chart-placeholder::before {
  content: "📊";
  font-size: 2em;
  margin-bottom: 12px;
  display: block;
}

/* Placeholder enrichi pour graphes "à coder" : affiche label + données prévues
   pour qu'on visualise le contenu attendu sans coder le graphe maintenant. */
.chart-placeholder[data-todo] {
  background: linear-gradient(135deg, rgba(254,192,144,0.12) 0%, rgba(127,183,126,0.10) 100%);
  border: 2px dashed var(--lfc-corail);
  color: var(--lfc-teal-dark);
  font-weight: 500;
  text-align: center;
  padding: 18px 24px;
  gap: 10px;
}
.chart-placeholder[data-todo]::before {
  content: "🚧 à coder · " attr(data-todo);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--lfc-corail);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  display: block;
}
.chart-placeholder-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05em;
  color: var(--lfc-teal);
  line-height: 1.25;
  margin-bottom: 6px;
}
.chart-placeholder-data {
  font-family: var(--font);
  font-size: 0.85em;
  font-weight: 400;
  color: var(--lfc-text-2);
  line-height: 1.5;
  font-style: italic;
  max-width: 90%;
}

/* === Composant CHART-DONUT : répartition en parts (donut SVG)
   Pour les répartitions catégorielles : taille d'entreprises, code NAF,
   catégorie juridique, EQTP, etc.
   Le SVG est généré par chart-donut.js depuis l'attribut data-segments. */
.chart-donut {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  position: relative;
}
.chart-donut-svg-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.chart-donut-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  overflow: visible;
}
.chart-donut-svg .donut-arc {
  transition: opacity 0.2s ease;
  transform-origin: 50% 50%;
}
.chart-donut-svg .donut-arc.is-current {
  /* Mise en avant possible */
}
.chart-donut-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.chart-donut-center-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6em;
  color: var(--lfc-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}
.chart-donut-center-label {
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.78em;
  color: var(--lfc-text-2);
  margin-top: 4px;
  line-height: 1.2;
}
.chart-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* 2 colonnes → 4 entrées tiennent en 2 lignes */
  gap: 6px 18px;
  width: 100%;
  font-size: 0.85em;
}
/* Donuts à exactement 2 segments : légende compacte sur 1 colonne (stack vertical) */
.chart-donut-legend:has(> .chart-donut-legend-row:nth-child(2):last-child) {
  grid-template-columns: 1fr;
  gap: 3px;
  max-width: 220px;
  margin: 0 auto;
}
/* Masque les valeurs dans la légende (utile quand les % sont déjà affichés sur le donut
   et que la valeur en légende fait double emploi) */
.chart-donut[data-hide-legend-values="true"] .chart-donut-legend-value,
.chart-donut[data-hide-legend-values="true"] .chart-donut-legend-pct {
  display: none;
}
.chart-donut-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.3;
}
.chart-donut-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.chart-donut-legend-label {
  flex: 1;
  color: var(--lfc-text);
  font-weight: 500;
}
.chart-donut-legend-value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lfc-teal);
  font-size: 1.05em;
  white-space: nowrap;
}
.chart-donut-legend-pct {
  font-family: var(--font);
  font-size: 0.85em;
  color: var(--lfc-text-2);
  white-space: nowrap;
  margin-left: 4px;
}

/* Tooltip sur les rangs de légende qui ont un data-tip (ex: code NAF complet).
   IMPORTANT : au repos le pseudo n'a aucune dimension (content: ''), sinon sa bbox
   serait comptée dans scrollWidth/scrollHeight des ancêtres et déclencherait
   à tort le flag is-overflowing de autoFitText. */
.chart-donut-legend-row[data-tip] { position: relative; cursor: help; }
.chart-donut-legend-row .has-tip {
  text-decoration: underline dotted var(--lfc-text-2);
  text-underline-offset: 3px;
}
.chart-donut-legend-row[data-tip]::after,
.chart-donut-legend-row[data-tip]::before {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.chart-donut-legend-row[data-tip]:hover::after,
.chart-donut-legend-row[data-tip]:focus-within::after {
  content: attr(data-tip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--lfc-teal-dark, #1f3f43);
  color: #fff;
  font-family: var(--font);
  font-size: calc(var(--text-size, 16px) * 1.0);
  font-weight: 500;
  line-height: 1.4;
  padding: 12px 16px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  height: auto;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 20;
}
.chart-donut-legend-row[data-tip]:hover::before,
.chart-donut-legend-row[data-tip]:focus-within::before {
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--lfc-teal-dark, #1f3f43);
  width: 0;
  height: 0;
  z-index: 20;
}

@keyframes donut-arc-fade {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.chart-donut-svg .donut-arc {
  transform-origin: 50% 50%;
}

/* === Titre interne d'un graphique (sous-titre du composant viz) === */
.viz-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--text-size, 16px) * 0.95);
  color: var(--lfc-teal);
  text-align: center;
  line-height: 1.25;
  margin: 0 8px 8px 8px;
  letter-spacing: -0.005em;
}

/* === Composant CHART-HBARS : barres horizontales centrées (style PDF rapport) ===
   Layout : label à gauche | track avec barre CENTRÉE sur axe milieu | valeur dans la barre.
   Donne un aspect "miroir" / "entonnoir" très lisible pour les répartitions. */
.chart-hbars {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  width: 100%;
  height: 100%;
  align-content: center;
  padding: 4px 8px;
}
.chart-hbar {
  display: contents;     /* éclate la cellule pour que label + track tombent dans le grid parent */
}
.chart-hbar-label {
  color: var(--lfc-text);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  font-size: 0.85em;
  align-self: center;
}
.chart-hbar-track {
  position: relative;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;     /* la barre est CENTRÉE sur l'axe vertical */
}
.chart-hbar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--lfc-corail) 0%, var(--lfc-salmon) 100%);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hbar-grow 700ms cubic-bezier(.22,.85,.3,1) forwards;
  box-shadow: 0 1px 3px rgba(232,160,144,0.25);
}
@keyframes hbar-grow {
  to { width: var(--hbar-width); }
}
.chart-hbar-value {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--lfc-teal-dark);
  font-size: 0.85em;
  white-space: nowrap;
  padding: 0 6px;
  letter-spacing: -0.01em;
}

/* === Composant chart-france-map ===
   Choroplèthe régional (métropole + DOM-TOM) avec légende d'intensité.
   Le SVG est injecté dynamiquement par expandFranceMaps() depuis assets/maps/regions-fr.svg. */
.chart-france-map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 4px;
  container-type: size;
}
.france-map-svg-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Bloc DOM-TOM regroupé sur la gauche du wrap : vignette des contours empilés
   verticalement + caption "DOM-TOM | < 1 %". Position absolute en bas à gauche
   pour ne pas piquer de la place à la carte métropolitaine. */
.fr-domtom {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.fr-domtom-vignette {
  background: #FFE6D5;
  border-radius: 7px;
  padding: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.fr-domtom-mini-svg {
  display: block;
  width: 30px;
  height: 104px;
}
.fr-domtom-caption {
  text-align: center;
  line-height: 1.05;
}
.fr-domtom-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 0.62);
  color: var(--lfc-teal-dark, #1f3f43);
  letter-spacing: 0;
}
.fr-domtom-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--text-size, 16px) * 0.78);
  color: var(--lfc-teal, #2F5D62);
  letter-spacing: 0;
  margin-top: 3px;
}
.france-map-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
}
.france-map-svg .fr-region {
  transition: filter 0.15s ease, opacity 0.15s ease;
  cursor: default;
}
.france-map-svg .fr-region:hover {
  filter: brightness(0.94) saturate(1.1);
  stroke: var(--lfc-teal-dark, #1f3f43);
  stroke-width: 1.5;
}
.france-map-svg [data-secret="1"] {
  fill: #ededed !important;
  /* Hachure légère pour signaler "secret stat" */
  stroke-dasharray: 2 3;
}

/* Légende d'intensité (en bas de la carte) */
.chart-france-map .fr-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  padding: 6px 4px 0 4px;
  font-size: 0.72em;
  color: var(--lfc-text-2);
}
.chart-france-map .fr-legend-title {
  font-family: var(--font);
  font-weight: 600;
  color: var(--lfc-teal-dark);
  margin-right: 6px;
}
.chart-france-map .fr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chart-france-map .fr-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.chart-france-map .fr-legend-secret {
  background: #ededed;
  background-image: linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 50%, #d8d8d8 50%, #d8d8d8 75%, transparent 75%);
  background-size: 6px 6px;
}

/* Tooltip flottante au survol d'une région */
.chart-france-map .fr-tooltip {
  position: absolute;
  background: var(--lfc-teal-dark, #1f3f43);
  color: #fff;
  font-family: var(--font);
  font-size: 0.85em;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  white-space: nowrap;
  z-index: 30;
  display: none;
}