/* ==========================================================================
   smartpal.css — Page produit « SmartPal »
   Composants propres à la page SmartPal. S'appuie sur tokens.css + styles.css
   (header, footer, boutons, modale, nav, responsive réutilisés à l'identique).
   Accent produit : bleu SmartPal (couleur de la palette).
   ========================================================================== */

:root {
  --sp-blue: #35b6f3;      /* accent produit (couleur palette) */
  --sp-blue-ink: #0e88c9;  /* variante assombrie pour texte/contraste */
}

/* Garde anti-scroll horizontal : les scènes d'animation (particules, faisceaux,
   halos) débordent volontairement de leur boîte — on empêche tout débordement
   de créer un défilement latéral, sans bloquer le défilement vertical. */
main { overflow-x: clip; }

/* ==========================================================================
   Héro produit (PDF p.1)
   ========================================================================== */
.sp-hero { background-image: var(--hero-ground); border-bottom: 1px solid var(--line); padding-block: 26px 72px; }
.sp-hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px;
  align-items: center; padding-block: 44px 0;
}
.sp-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--forest);
}
.sp-hero .lead { margin-top: 18px; font-size: 1.16rem; color: var(--muted); max-width: 40ch; }
.sp-hero-quote {
  margin-top: 20px; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em;
}
.sp-hero-points {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 22px;
}
.sp-hero-points li {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .84rem; color: var(--ink);
}
.sp-hero-points i { color: var(--flux-ink); }

/* visuel palette : carte blanche soignée */
.sp-hero-visual {
  position: relative; margin: 0;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow);
  padding: 26px; display: grid; place-items: center;
}
.sp-hero-visual img { width: 100%; height: auto; display: block; }
.sp-badge {
  position: absolute; left: 18px; bottom: 16px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sp-blue-ink);
  background: color-mix(in srgb, var(--sp-blue) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sp-blue) 34%, transparent);
  border-radius: var(--r-pill); padding: 4px 11px;
}

/* ==========================================================================
   Le problème (PDF p.2) — 4 statistiques
   ========================================================================== */
.sp-stats {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.sp-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sp-stat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--signal) 30%, var(--line));
  /* halo rouge diffus sous la tuile (thématique « pertes ») */
  box-shadow: 0 1px 2px rgba(11, 79, 65, .06),
              0 18px 36px -14px color-mix(in srgb, var(--signal) 55%, transparent);
}
.sp-stat-num {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--signal); line-height: 1;
}
.sp-stat-lab { font-family: var(--font-mono); font-size: .82rem; color: var(--ink); font-weight: 500; }
.sp-stat-txt { font-size: .86rem; color: var(--muted); line-height: 1.5; margin-top: 4px; }

.sp-note { margin-top: 20px; font-size: .76rem; color: var(--muted); font-style: italic; }

/* Section « Le problème » : en-tête = titre à gauche, animation à droite (hors cadre) */
.sp-prob-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.sp-prob-head .sec-head { margin-bottom: 0; flex: 1 1 auto; }

/* ---- Animation « fuite de palettes » (sans cadre, compacte) ---- */
.sp-leak {
  position: relative; flex: none; margin-right: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sp-leak-scene { position: relative; width: 200px; height: 150px; }

/* Hub central : l'entrepôt */
.sp-leak-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 15px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(140deg, var(--forest), var(--forest-soft));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--forest) 70%, transparent);
}
/* Anneau « radar » qui cherche les palettes… en vain */
.sp-leak-ring {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 2px solid var(--signal); opacity: 0;
  animation: sp-leak-ring 2.6s ease-out infinite;
}
@keyframes sp-leak-ring {
  0% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}

/* Particules (palettes) émises par le JS : partent du centre et dérivent au loin */
.sp-leak-particles { position: absolute; inset: 0; }
.sp-leak-p {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  font-size: .95rem; color: var(--amber);
  transform: translate(-50%, -50%);
  animation: sp-leak-drift var(--dur, 3s) cubic-bezier(.3,.1,.5,1) forwards;
}
@keyframes sp-leak-drift {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(var(--rot, 20deg)); }
}

/* Palettes « fantômes » figées en fond (perdues, translucides) */
.sp-leak-ghost { position: absolute; z-index: 1; color: var(--muted); opacity: .18; }
.sp-leak-ghost i { display: block; }
.sp-leak-ghost-1 { top: 8%; left: 6%; font-size: 1rem; animation: sp-leak-float 5s ease-in-out infinite; }
.sp-leak-ghost-2 { bottom: 10%; right: 8%; font-size: 1.2rem; animation: sp-leak-float 6.5s ease-in-out infinite .8s; }
@keyframes sp-leak-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Compteur de pertes */
.sp-leak-readout { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sp-leak-count {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  color: var(--signal); letter-spacing: -.02em; line-height: 1;
  display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums;
}
.sp-leak-count i { font-size: .85rem; }
.sp-leak-lab { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---- Animation « signal temps réel » : tags émetteurs + antenne réceptrice ---- */
.sp-live {
  position: relative; flex: none; margin-right: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sp-live-scene {
  --r: 66px; /* rayon de placement des tags autour de l'antenne */
  position: relative; width: 200px; height: 200px; display: grid; place-items: center;
}
/* Antenne centrale (réception) */
.sp-live-hub {
  position: relative; z-index: 4; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%; font-size: 1.3rem; color: #fff;
  background: linear-gradient(140deg, var(--forest), var(--forest-soft));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--forest) 70%, transparent);
}
/* Tags périphériques (émetteurs), répartis à 0/90/180/270° via --a */
.sp-live-tag {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  font-size: .82rem; color: #fff;
  background: linear-gradient(140deg, var(--flux), var(--flux-ink));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--flux) 65%, transparent);
  transform: translate(-50%, -50%)
             rotate(calc(var(--a) * 90deg)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -90deg));
}
/* Halo émis PAR le tag : un anneau qui part du tag et s'éloigne (émission) */
.sp-live-tag::before {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 2px solid var(--flux); opacity: 0;
  animation: sp-live-emit 2.6s ease-out infinite;
  animation-delay: calc(var(--a) * .55s);
}
@keyframes sp-live-emit {
  0% { opacity: .6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
/* Faisceau de chaque tag vers l'antenne : une impulsion qui « voyage » vers le centre */
.sp-live-beam {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 8px; height: 8px; border-radius: 50%; background: var(--flux);
  box-shadow: 0 0 8px color-mix(in srgb, var(--flux) 80%, transparent);
  transform: translate(-50%, -50%);
  offset-path: none;
  animation: sp-live-beam-0 2.4s ease-in infinite;
  animation-delay: calc(var(--a) * .4s);
}
/* Chaque faisceau part de la position de son tag (angle --a) et converge au centre */
.sp-live-beam[style*="--a:0"] { animation-name: sp-live-beam-top; }
.sp-live-beam[style*="--a:1"] { animation-name: sp-live-beam-right; }
.sp-live-beam[style*="--a:2"] { animation-name: sp-live-beam-bottom; }
.sp-live-beam[style*="--a:3"] { animation-name: sp-live-beam-left; }
@keyframes sp-live-beam-top {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 66px)) scale(.8); }
  20% { opacity: 1; } 80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
}
@keyframes sp-live-beam-right {
  0% { opacity: 0; transform: translate(calc(-50% + 66px), -50%) scale(.8); }
  20% { opacity: 1; } 80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
}
@keyframes sp-live-beam-bottom {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 66px)) scale(.8); }
  20% { opacity: 1; } 80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
}
@keyframes sp-live-beam-left {
  0% { opacity: 0; transform: translate(calc(-50% - 66px), -50%) scale(.8); }
  20% { opacity: 1; } 80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
}
/* Readout : point live + barres d'égaliseur + libellé */
.sp-live-readout { display: inline-flex; align-items: center; gap: 9px; }
.sp-live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--flux); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--flux) 55%, transparent);
  animation: sp-live-pulse 1.6s ease-out infinite;
}
@keyframes sp-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--flux) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
/* Barres d'égaliseur animées (activité du signal) */
.sp-live-bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; }
.sp-live-bars i {
  display: block; width: 3px; border-radius: 2px; background: var(--flux-ink);
  animation: sp-live-eq 1.1s ease-in-out infinite;
}
.sp-live-bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.sp-live-bars i:nth-child(2) { height: 70%; animation-delay: .15s; }
.sp-live-bars i:nth-child(3) { height: 100%; animation-delay: .3s; }
.sp-live-bars i:nth-child(4) { height: 60%; animation-delay: .45s; }
.sp-live-bars i:nth-child(5) { height: 85%; animation-delay: .6s; }
@keyframes sp-live-eq {
  0%, 100% { transform: scaleY(.4); }
  50% { transform: scaleY(1); }
}
.sp-live-bars i { transform-origin: bottom; }
.sp-live-lab { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---- Animation « badge de conformité » (en-tête « Conforme par construction ») ---- */
.sp-comp {
  position: relative; flex: none; margin-right: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.sp-comp-scene { position: relative; width: 172px; height: 150px; display: grid; place-items: center; }
/* bouclier central + coche tracée */
.sp-comp-shield {
  position: relative; z-index: 3; display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 20px; color: #fff;
  background: linear-gradient(140deg, var(--flux), var(--forest-soft));
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--flux) 70%, transparent);
}
.sp-comp-shield > i { font-size: 1.5rem; opacity: .35; }
.sp-comp-check { position: absolute; width: 34px; height: 34px; color: #fff; }
.sp-comp-check path { stroke-dasharray: 32; stroke-dashoffset: 32; animation: sp-comp-draw 2.8s ease-in-out infinite; }
@keyframes sp-comp-draw {
  0%, 8% { stroke-dashoffset: 32; }
  32%, 70% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 32; }
}
/* anneau de validation qui pulse */
.sp-comp-ring {
  position: absolute; left: 50%; top: 50%; width: 66px; height: 66px;
  transform: translate(-50%, -50%); border-radius: 22px;
  border: 2px solid var(--flux); opacity: 0;
  animation: sp-comp-ring 2.8s ease-out infinite;
}
@keyframes sp-comp-ring {
  0%, 25% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  40% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
/* pastilles réglementaires cochées, autour du bouclier */
.sp-comp-chip {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500; color: var(--flux-ink);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--flux) 30%, var(--line));
  border-radius: var(--r-pill); padding: 4px 9px; box-shadow: var(--shadow);
  opacity: 0; transform: scale(.6);
  animation: sp-comp-pop 2.8s ease-in-out infinite;
}
.sp-comp-chip i { font-size: .72rem; }
.sp-comp-chip-1 { top: 6px; left: 2px;  animation-delay: .3s; }
.sp-comp-chip-2 { top: 40%; right: 0;   animation-delay: .6s; }
.sp-comp-chip-3 { bottom: 8px; left: 12px; animation-delay: .9s; }
@keyframes sp-comp-pop {
  0%, 10% { opacity: 0; transform: scale(.6); }
  28%, 78% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(.6); }
}
.sp-comp-lab {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--flux-ink); font-weight: 500;
}

/* ---- Bras robot articulé (piloté par sp-robot.js, en-tête « Fabriquée en France ») ----
   La cinématique (positions des segments) est calculée en JS : ici, uniquement
   l'apparence des éléments. */
.sp-robot {
  position: relative; flex: none; margin-right: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.sp-robot-svg { width: 210px; height: auto; display: block; overflow: visible; }

.sp-rb-stand { fill: color-mix(in srgb, var(--forest) 16%, var(--surface-2)); }
.sp-rb-foot  { fill: var(--forest); }
.sp-rb-mast  { fill: var(--forest); }
.sp-rb-upperarm { stroke: var(--forest); stroke-width: 8; stroke-linecap: round; }
.sp-rb-forearm  { stroke: var(--forest-soft); stroke-width: 7; stroke-linecap: round; }
.sp-rb-pivot { fill: #fff; stroke: var(--forest); stroke-width: 3; }
.sp-rb-elbow { fill: #fff; stroke: var(--forest-soft); stroke-width: 2.5; }
.sp-rb-finger { stroke: var(--flux-ink); stroke-width: 3; stroke-linecap: round; }
.sp-rb-load { fill: var(--flux); }
.sp-rb-pal { fill: var(--flux); }
[data-sp-load] { transition: opacity .12s linear; }

.sp-robot-lab {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}

/* ==========================================================================
   Contexte réglementaire (PDF p.3)
   ========================================================================== */
.sp-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sp-reg-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 24px 24px 20px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sp-reg-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--forest) 22%, var(--line));
  box-shadow: 0 1px 2px rgba(11, 79, 65, .06), 0 22px 44px -20px rgba(11, 79, 65, .5);
}
.sp-reg-name {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
  color: var(--forest); margin: 0 0 14px; letter-spacing: -.01em;
}
.sp-reg-name i { color: var(--flux-ink); margin-right: 4px; }
.sp-reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-reg-list li {
  position: relative; padding-left: 20px; font-size: .9rem; color: var(--muted); line-height: 1.5;
}
.sp-reg-list li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--flux);
}

/* bandeau des 4 chiffres-cibles */
.sp-targets {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sp-target {
  background: var(--forest); color: #eafff6; border-radius: var(--r-card);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-target:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--forest) 75%, transparent);
}
.sp-target b {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1;
}
.sp-target span { font-size: .78rem; color: #bff3df; line-height: 1.35; }

/* ==========================================================================
   Notre réponse (PDF p.4) — 5 arguments numérotés
   ========================================================================== */
.sp-args {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
  counter-reset: none;
}
.sp-arg {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow);
  padding: 20px 18px; display: flex; flex-direction: column; gap: 12px;
  border-top: 3px solid var(--c, var(--flux));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Apparition en cascade « de gauche à droite » : chaque tuile glisse depuis la
   gauche avec un délai croissant basé sur --i (posé dans le HTML). */
.sp-arg[data-reveal] {
  opacity: 0; transform: translateX(-28px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.sp-arg[data-reveal].in { opacity: 1; transform: none; }
/* Le survol doit primer sur .in (même spécificité, déclaré plus loin) */
.sp-arg[data-reveal]:hover,
.sp-arg:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11, 79, 65, .06),
              0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-arg-n {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; font-family: var(--font-display); font-weight: 700;
  font-size: 1.05rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 60%, #000));
}
.sp-arg-txt { display: flex; flex-direction: column; gap: 5px; }
.sp-arg-txt b {
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.2;
}
.sp-arg-txt span { font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   La palette (PDF p.5) — visuel + specs
   ========================================================================== */
.sp-palette-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center;
}
.sp-palette-visual {
  margin: 0; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 24px;
}
.sp-palette-visual img { width: 100%; height: auto; display: block; }
.sp-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-spec {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 15px 16px; display: flex; flex-direction: column; gap: 3px;
}
.sp-spec b {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--forest); letter-spacing: -.01em; line-height: 1.1;
}
.sp-spec span { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.sp-spec-accent { border-color: color-mix(in srgb, var(--sp-blue) 34%, transparent); background: color-mix(in srgb, var(--sp-blue) 7%, var(--surface)); }
.sp-spec-accent b { color: var(--sp-blue-ink); font-size: 1rem; }
.sp-spec-accent b i { margin-right: 4px; }

/* ==========================================================================
   Fiche technique (PDF p.6) — tableau + plan
   ========================================================================== */
.sp-tech-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; align-items: start; }
.sp-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow);
}
.sp-table th, .sp-table td { text-align: left; padding: 12px 16px; font-size: .88rem; vertical-align: top; }
.sp-table th {
  font-family: var(--font-mono); font-weight: 500; color: var(--muted);
  width: 48%; background: var(--surface-2);
}
.sp-table td { color: var(--ink); font-weight: 500; }
.sp-table tr + tr th, .sp-table tr + tr td { border-top: 1px solid var(--line); }

.sp-tech-plan { margin: 0; }
.sp-tech-plan img {
  width: 100%; height: auto; display: block;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px;
}
.sp-tech-plan figcaption {
  margin-top: 8px; font-family: var(--font-mono); font-size: .72rem;
  color: var(--muted); text-align: center;
}

/* ==========================================================================
   Le pilotage temps réel (PDF p.7) — 4 étapes
   ========================================================================== */
.sp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sp-step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 3px solid var(--c, var(--flux));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Entrée en cascade « par le haut » : chaque étape descend avec un délai
   croissant basé sur --i (posé dans le HTML). */
.sp-step[data-reveal] {
  opacity: 0; transform: translateY(-26px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.sp-step[data-reveal].in { opacity: 1; transform: none; }
/* Survol : soulèvement + halo assorti à la couleur de l'étape */
.sp-step[data-reveal]:hover,
.sp-step:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11, 79, 65, .06),
              0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-step-n {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  color: color-mix(in srgb, var(--c, var(--forest)) 30%, transparent);
}
.sp-step-ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  font-size: 1.15rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 62%, #000));
}
.sp-step b {
  font-family: var(--font-display); font-size: .98rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.2;
}
.sp-step span:not(.sp-step-n):not(.sp-step-ico) { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.sp-pilotage-foot {
  margin-top: 22px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--forest); letter-spacing: -.01em;
}

/* ==========================================================================
   Dashboard « Vue flotte » réutilisé (PDF p.8)
   ========================================================================== */
.sp-fleet { max-width: 760px; margin: 0 auto; }
.sp-fleet-note {
  padding: 10px 18px 14px; margin: 0;
  font-size: .72rem; color: var(--muted); font-style: italic; text-align: right;
}

/* ==========================================================================
   L'offre & le prix (PDF p.9)
   ========================================================================== */
.sp-offer-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: stretch; }

/* ---- Carte prix « premium » ---- */
.sp-price {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--flux) 30%, transparent), transparent 60%),
    linear-gradient(155deg, var(--forest), #06382f);
  color: #eafff6; border-radius: var(--r-card-lg);
  box-shadow: 0 24px 48px -24px rgba(11, 79, 65, .6);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
}
/* ruban d'angle « Tarif unique » : bandeau à 45° dans le coin haut-droit.
   Largeur fixe centrée sur le coin ; les extrémités passent sous les bords
   (overflow:hidden de la carte), donc rien n'est tronqué visuellement. */
/* Ruban d'angle centré (méthode déterministe) :
   - largeur fixe W = 170px, ancré au coin haut-droit à (0,0) ;
   - on translate son centre sur la diagonale du coin puis on tourne de 45°
     AUTOUR de ce centre → le texte centré tombe pile au milieu du ruban.
   Le décalage D règle la distance au coin (plus grand = ruban plus vers l'intérieur). */
.sp-price-ribbon {
  position: absolute; top: 0; right: 0; width: 170px;
  text-align: center; transform-origin: center;
  /* place le centre du ruban à ~48px du coin sur la diagonale, puis rotation 45° */
  transform: translate(50%, -50%) translate(-44px, 44px) rotate(45deg);
  background: var(--flux); color: #fff; font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  padding: 6px 0; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4);
}
.sp-price-main { display: flex; flex-direction: column; gap: 4px; }
.sp-price-val { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; color: #fff; }
.sp-price-unit { font-family: var(--font-mono); font-size: .82rem; color: #bff3df; }

/* jauge « coût dégressif » */
.sp-price-gauge { display: flex; flex-direction: column; gap: 7px; }
.sp-gauge-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: #bff3df; }
.sp-gauge-tag { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.sp-gauge-bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.sp-gauge-fill {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #bff3df, var(--flux));
  transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}

.sp-price-list { list-style: none; margin: 4px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 16px; }
.sp-price-list li { display: flex; gap: 12px; align-items: flex-start; }
.sp-price-list li > i {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px;
  font-size: .9rem; color: #eafff6; background: rgba(255,255,255,.12);
}
.sp-price-list b { display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 600; }
.sp-price-list em { font-style: normal; font-size: .82rem; color: #bff3df; line-height: 1.4; }

/* ---- Cartes « inclus » à icônes colorées ---- */
.sp-includes { display: flex; flex-direction: column; }
.sp-includes-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--forest); margin: 0 0 14px; }
.sp-inc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sp-inc {
  display: flex; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--flux));
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
/* apparition en cascade des cartes inclus */
.sp-inc[data-reveal] {
  opacity: 0; transform: translateX(24px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.sp-inc[data-reveal].in { opacity: 1; transform: none; }
.sp-inc[data-reveal]:hover,
.sp-inc:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(11,79,65,.06), 0 22px 40px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-inc-ico {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px;
  font-size: 1.05rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 62%, #000));
}
.sp-inc-txt { min-width: 0; }
.sp-inc-txt b { display: block; font-size: .92rem; color: var(--ink); font-weight: 600; }
.sp-inc-txt em { font-style: normal; font-size: .83rem; color: var(--muted); line-height: 1.45; }
.sp-inc-check { margin-left: auto; flex: none; color: var(--flux-ink); font-size: 1.15rem; }
/* Coche qui « valide » à l'apparition */
.sp-inc[data-reveal] .sp-inc-check { opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--i, 0) * 110ms + .2s); }
.sp-inc[data-reveal].in .sp-inc-check { opacity: 1; transform: scale(1); }
/* variante « info » (abonnement séparé) : pas de coche, teinte ambre */
.sp-inc-warn { border-left-color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }

/* ==========================================================================
   Coût dégressif + simulateur (PDF p.10)
   ========================================================================== */
.sp-deg-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }

/* Carte graphique */
.sp-chart-card {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 20px 22px 14px;
  display: flex; flex-direction: column;
}
.sp-curve { width: 100%; height: auto; display: block; overflow: visible; }
/* axes pleins + grille en pointillé + graduations */
.sp-curve .sp-axis { stroke: var(--line-strong); stroke-width: 1.2; }
.sp-curve .sp-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.sp-curve .sp-tick { stroke: var(--line-strong); stroke-width: 1; }
/* valeurs des graduations */
.sp-curve .sp-tick-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.sp-curve .sp-tick-y { text-anchor: end; dominant-baseline: middle; }
.sp-curve .sp-tick-x { text-anchor: middle; dominant-baseline: hanging; }
/* libellés d'axes */
.sp-curve .sp-axis-lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: var(--flux-ink); letter-spacing: .04em; }
.sp-curve .sp-axis-lbl-x { text-anchor: middle; }
.sp-curve .sp-axis-lbl-y { text-anchor: middle; }
.sp-curve-marker { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--forest) 55%, transparent)); opacity: 0; transition: cx .25s ease, cy .25s ease, opacity .25s ease; }

/* Simulateur */
.sp-sim {
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong); border-radius: var(--r-card-lg);
  box-shadow: var(--shadow); padding: 24px 24px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.sp-sim-readout { display: flex; flex-direction: column; gap: 3px; }
.sp-sim-lab { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sp-sim-cost { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--forest); line-height: 1; font-variant-numeric: tabular-nums; }
.sp-sim-total { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.sp-sim-total em { font-style: normal; }

.sp-sim-control { display: flex; flex-direction: column; gap: 8px; }
.sp-sim-control-lab { display: flex; align-items: baseline; justify-content: space-between; font-size: .84rem; color: var(--ink); }
.sp-sim-control-lab b { font-family: var(--font-mono); font-size: 1.1rem; color: var(--flux-ink); font-variant-numeric: tabular-nums; }
/* curseur aux couleurs TGF */
.sp-sim input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 14%, var(--surface)); outline-offset: 4px; cursor: pointer;
}
.sp-sim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--flux); border: 3px solid var(--surface);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--forest) 60%, transparent);
}
.sp-sim input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--flux);
  border: 3px solid var(--surface); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--forest) 60%, transparent);
}
.sp-sim-hint { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.sp-sim-cta { align-self: flex-start; }

/* Table dégressive */
.sp-deg-table {
  width: 100%; border-collapse: collapse; margin-top: 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow);
}
.sp-deg-table caption { text-align: left; }
.sp-deg-table th, .sp-deg-table td { padding: 10px 16px; font-size: .86rem; text-align: right; font-variant-numeric: tabular-nums; }
.sp-deg-table th:first-child, .sp-deg-table td:first-child { text-align: left; }
.sp-deg-table thead th { font-family: var(--font-mono); font-weight: 500; color: var(--muted); background: var(--surface-2); }
.sp-deg-table tbody tr + tr td { border-top: 1px solid var(--line); }
.sp-deg-table tbody td { color: var(--ink); transition: background .15s ease; }
.sp-deg-table tbody td:last-child { color: var(--flux-ink); font-weight: 600; }
/* Mise en évidence de la ligne au survol */
.sp-deg-table tbody tr:hover td { background: color-mix(in srgb, var(--flux) 9%, var(--surface)); }
.sp-deg-table tbody tr:hover td:last-child { color: var(--flux-ink); }

/* ==========================================================================
   Comparaison des coûts (PDF p.11)
   ========================================================================== */
.sp-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }

/* Graphique en colonnes (axes X/Y + valeurs) */
.sp-col-chart {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 18px 20px 12px;
}
.sp-cols { width: 100%; height: auto; display: block; overflow: visible; }
.sp-cols .sp-axis { stroke: var(--line-strong); stroke-width: 1.2; }
.sp-cols .sp-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.sp-cols .sp-tick { stroke: var(--line-strong); stroke-width: 1; }
.sp-cols .sp-tick-lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }
.sp-cols .sp-tick-y { text-anchor: end; dominant-baseline: middle; }
.sp-cols .sp-col-cat { font-family: var(--font-mono); font-size: 11px; fill: var(--ink); text-anchor: middle; dominant-baseline: hanging; }
.sp-cols .sp-col-val {
  font-family: var(--font-display); font-size: 13px; font-weight: 700; text-anchor: middle;
  transform-box: fill-box; transform-origin: center;
  transition: transform .18s ease;
}
/* survol d'une colonne (groupe barre + valeur) */
.sp-cols .sp-col { cursor: pointer; }
.sp-cols .sp-col-bar {
  transform-box: fill-box; transform-origin: bottom;
  transition: transform .2s ease, filter .2s ease;
}
.sp-cols .sp-col:hover .sp-col-bar {
  transform: scaleX(1.06) scaleY(1.03);
  filter: brightness(1.08) drop-shadow(0 6px 12px color-mix(in srgb, var(--forest) 30%, transparent));
}
.sp-cols .sp-col:hover .sp-col-val { transform: scale(1.25); }

.sp-cmp-detail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sp-cmp-detail li {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--flux);
  border-radius: var(--r-card); padding: 12px 16px;
}
.sp-cmp-detail b { display: block; font-family: var(--font-display); font-size: .9rem; color: var(--ink); margin-bottom: 3px; }
.sp-cmp-detail span { font-size: .82rem; color: var(--muted); line-height: 1.45; }

/* Barres horizontales (utilisées par la section Avantages poids/volume) */
.sp-bar-track { height: 14px; border-radius: 8px; background: color-mix(in srgb, var(--forest) 8%, var(--surface)); overflow: hidden; }
.sp-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 8px; background: var(--muted);
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Conforme par construction (PDF p.12)
   ========================================================================== */
.sp-conf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sp-conf-col {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--c, var(--flux));
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 24px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* apparition en fondu (opacité), décalée par --i */
.sp-conf-col[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 130ms);
}
.sp-conf-col[data-reveal].in { opacity: 1; transform: none; }
/* survol : soulèvement + halo assorti à la couleur */
.sp-conf-col[data-reveal]:hover,
.sp-conf-col:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11,79,65,.06), 0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-conf-ico {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  font-size: 1.25rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 62%, #000));
  margin-bottom: 14px;
}
.sp-conf-col h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--forest); margin: 0 0 8px; letter-spacing: -.01em; }
.sp-conf-col p { font-size: .88rem; color: var(--muted); line-height: 1.55; }
.sp-conf-band {
  display: flex; align-items: center; gap: 12px; margin-top: 22px;
  background: color-mix(in srgb, var(--flux) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--flux) 22%, transparent);
  border-radius: var(--r-card); padding: 14px 18px;
  font-size: .88rem; color: var(--ink);
}
.sp-conf-band i { color: var(--flux-ink); font-size: 1.15rem; flex: none; }

/* ==========================================================================
   Avantages poids / volume (PDF p.13)
   ========================================================================== */
.sp-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.sp-adv-charts { display: flex; flex-direction: column; gap: 24px; }
.sp-adv-chart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: 18px 20px;
}
.sp-adv-chart-title { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.sp-vs { display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.sp-vs:last-of-type { margin-bottom: 0; }
.sp-vs-lab { font-size: .8rem; color: var(--ink); }
.sp-vs-val { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-fill-good { background: linear-gradient(90deg, var(--flux), var(--forest-soft)) !important; }
.sp-fill-bad { background: color-mix(in srgb, var(--amber) 55%, var(--muted)) !important; }
.sp-adv-badge {
  display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: .74rem;
  color: var(--flux-ink); background: color-mix(in srgb, var(--flux) 12%, transparent);
  border-radius: var(--r-pill); padding: 4px 11px;
}

.sp-adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.sp-adv-list li { display: flex; gap: 13px; align-items: flex-start; }
.sp-adv-list i {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px;
  font-size: .95rem; color: var(--flux-ink); background: color-mix(in srgb, var(--flux) 10%, transparent);
}
.sp-adv-list b { display: block; font-size: .92rem; color: var(--ink); font-weight: 600; }
.sp-adv-list em { font-style: normal; font-size: .84rem; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   DSI Plastics (PDF p.14)
   ========================================================================== */
.sp-dsi-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 32px; align-items: center; }
.sp-dsi-logo { margin: 0; text-align: center; }
.sp-dsi-logo img {
  width: 100%; max-width: 300px; height: auto; display: block; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px;
}
.sp-dsi-logo figcaption { margin-top: 12px; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.sp-dsi-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-dsi-fact {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px;
}
.sp-dsi-fact-wide { grid-column: 1 / -1; }
.sp-dsi-fact b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--forest); letter-spacing: -.02em; line-height: 1; }
.sp-dsi-fact-wide b { font-size: 1rem; }
.sp-dsi-fact-wide b i { color: var(--flux-ink); margin-right: 5px; }
.sp-dsi-fact span { font-size: .84rem; color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   La boucle fermée (PDF p.15)
   ========================================================================== */
.sp-boucle { background-image: var(--hero-ground); }
.sp-loop { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sp-loop-step {
  flex: 1 1 190px; max-width: 240px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  border-top: 3px solid var(--c, var(--flux));
  box-shadow: var(--shadow); padding: 22px 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* intro en cascade de gauche à droite */
.sp-loop-step[data-reveal] {
  opacity: 0; transform: translateX(-26px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.sp-loop-step[data-reveal].in { opacity: 1; transform: none; }
/* survol : soulèvement + halo assorti à la couleur */
.sp-loop-step[data-reveal]:hover,
.sp-loop-step:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11,79,65,.06), 0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-loop-n { font-family: var(--font-mono); font-size: .8rem; color: var(--c, var(--flux-ink)); font-weight: 500; }
.sp-loop-ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  font-size: 1.2rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 62%, #000));
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--c, var(--flux)) 60%, transparent);
}
/* l'icône Font Awesome hérite du blanc (au cas où FA impose sa propre couleur) */
.sp-loop-ico i, .sp-loop-ico svg { color: #fff; fill: currentColor; }
.sp-loop-step b { font-family: var(--font-display); font-size: .98rem; font-weight: 600; color: var(--ink); }
.sp-loop-step span { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.sp-loop-arrow { display: flex; align-items: center; color: color-mix(in srgb, var(--forest) 55%, transparent); font-size: 1.8rem; }
.sp-loop-foot {
  margin-top: 24px; text-align: center; font-family: var(--font-display);
  font-weight: 600; font-size: 1.02rem; color: var(--forest); letter-spacing: -.01em;
}

/* ==========================================================================
   Cas d'usage par segment (PDF p.16)
   ========================================================================== */
.sp-seg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sp-seg {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card-lg);
  box-shadow: var(--shadow); padding: 24px 24px 22px;
}
.sp-seg-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--forest); margin: 0 0 16px; letter-spacing: -.01em; }
.sp-seg-title i { color: var(--flux-ink); margin-right: 6px; }
.sp-seg-pain, .sp-seg-fix { margin: 0 0 12px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.sp-seg-fix { margin-bottom: 0; }
.sp-seg-tag {
  display: inline-block; margin-right: 6px; font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
  border-radius: var(--r-pill); padding: 2px 9px; vertical-align: middle;
}
.sp-tag-pain { color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent); }
.sp-tag-fix { color: var(--flux-ink); background: color-mix(in srgb, var(--flux) 14%, transparent); }

/* ==========================================================================
   Votre parcours (PDF p.17) — timeline
   ========================================================================== */
.sp-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sp-journey-step {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--c, var(--flux));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* intro en cascade de gauche à droite */
.sp-journey-step[data-reveal] {
  opacity: 0; transform: translateX(-24px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.sp-journey-step[data-reveal].in { opacity: 1; transform: none; }
/* survol : soulèvement + halo assorti à la couleur */
.sp-journey-step[data-reveal]:hover,
.sp-journey-step:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11,79,65,.06), 0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-journey-dur {
  font-family: var(--font-display); font-size: 1.7rem; font-weight: 800;
  color: var(--c, var(--forest)); letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sp-journey-dur span { font-size: .9rem; font-weight: 600; color: var(--muted); }
/* la couleur --c s'applique au nombre ; on assombrit un peu pour la lisibilité */
.sp-journey-dur [data-countup] { color: color-mix(in srgb, var(--c, var(--forest)) 80%, #000); }
.sp-journey-step b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.sp-journey-step > span:not(.sp-journey-dur) { font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Pourquoi TheGreenFlux (PDF p.18)
   ========================================================================== */
.sp-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sp-why {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card-lg);
  box-shadow: var(--shadow); padding: 24px 22px; border-top: 3px solid var(--c, var(--flux));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* intro en cascade de gauche à droite */
.sp-why[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.sp-why[data-reveal].in { opacity: 1; transform: none; }
.sp-why[data-reveal]:hover,
.sp-why:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--c, var(--flux)) 45%, var(--line));
  box-shadow: 0 1px 2px rgba(11,79,65,.06), 0 22px 44px -18px color-mix(in srgb, var(--c, var(--flux)) 55%, transparent);
  transition-delay: 0s;
}
.sp-why-ico {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  font-size: 1.2rem; color: #fff;
  background: linear-gradient(140deg, var(--c, var(--flux)), color-mix(in srgb, var(--c, var(--flux)) 62%, #000));
  margin-bottom: 14px; transition: transform .25s ease;
}
.sp-why-ico i, .sp-why-ico svg { color: #fff; }
.sp-why:hover .sp-why-ico { transform: scale(1.08) rotate(-4deg); }
.sp-why h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--forest); margin: 0 0 8px; letter-spacing: -.01em; }
.sp-why p { font-size: .86rem; color: var(--muted); line-height: 1.55; }

/* ==========================================================================
   Citation finale — 3 variantes (bandeau « moment fort » de conclusion)
   ========================================================================== */
.sp-finale {
  position: relative; overflow: hidden; margin: 34px 0 0;
  padding: 44px 40px; border-radius: var(--r-band); text-align: center;
  background: linear-gradient(155deg, var(--forest), #06382f);
  box-shadow: 0 26px 52px -26px rgba(11,79,65,.6);
}
.sp-finale-quote {
  position: relative; z-index: 2; margin: 0 auto; max-width: 52ch;
  font-family: var(--font-display); font-weight: 700; color: #eafff6;
  font-size: clamp(1.15rem, 2.3vw, 1.6rem); letter-spacing: -.01em; line-height: 1.4;
}
/* révélation mot à mot : chaque .w monte + apparaît, décalé via --wi (posé en JS) */
.sp-finale-quote .w { display: inline-block; opacity: 0; transform: translateY(14px); }
.sp-finale.is-in .sp-finale-quote .w {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--wi, 0) * 55ms);
}

/* fond vivant : halos verts qui dérivent lentement en arrière-plan */
.sp-finale-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sp-finale-bg span {
  position: absolute; border-radius: 50%; opacity: .18;
  background: radial-gradient(circle, var(--flux), transparent 68%);
  animation: sp-finale-float 14s ease-in-out infinite;
}
.sp-finale-bg span:nth-child(1) { width: 260px; height: 260px; top: -90px; left: -60px; animation-delay: 0s; }
.sp-finale-bg span:nth-child(2) { width: 200px; height: 200px; bottom: -80px; right: 8%; animation-delay: 3s; opacity: .14; }
.sp-finale-bg span:nth-child(3) { width: 150px; height: 150px; top: 20%; right: -50px; animation-delay: 6s; opacity: .12; }
@keyframes sp-finale-float {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(24px,-18px) scale(1.12); }
}

/* mot clé « piloté » qui s'illumine : soulignement animé + glow qui pulse */
.sp-finale .key { position: relative; color: #fff; }
.sp-finale.is-in .key { animation: sp-key-glow 2.6s ease-in-out 1.1s infinite; }
.sp-finale .key::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; border-radius: 3px;
  background: var(--flux); transform: scaleX(0); transform-origin: left;
}
.sp-finale.is-in .key::after { animation: sp-key-underline .6s ease 1.1s forwards; }
@keyframes sp-key-underline { to { transform: scaleX(1); } }
@keyframes sp-key-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 14px color-mix(in srgb, var(--flux) 90%, transparent); }
}

/* ==========================================================================
   CTA final (PDF p.19)
   ========================================================================== */
.sp-cta-band {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
  background: var(--forest); color: #eafff6; border-radius: var(--r-band);
  padding: 40px 44px; box-shadow: var(--shadow);
}
.sp-cta-copy h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.sp-cta-lead { margin-top: 12px; font-family: var(--font-mono); font-size: 1rem; color: #bff3df; }
.sp-cta-sub { margin-top: 6px; font-size: .95rem; color: #d6f5e8; }
.sp-cta-band .hero-cta { margin-top: 22px; }
/* Dans le bandeau forest, le bouton primaire passe en clair pour le contraste */
.sp-cta-band .btn-primary { background: #fff; color: var(--forest); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); }

.sp-cta-contact {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-card); padding: 22px 24px;
  display: flex; flex-direction: column; gap: 4px;
}
.sp-cta-contact-title { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #bff3df; }
.sp-cta-org { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 8px; }
.sp-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sp-contact-list li { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: #eafff6; }
.sp-contact-list i { color: #bff3df; width: 16px; text-align: center; flex: none; }
.sp-contact-list a { color: #eafff6; text-decoration: none; }
.sp-contact-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .sp-prob-head { flex-direction: column; align-items: stretch; gap: 24px; margin-bottom: 32px; }
  /* empilé : les animations d'en-tête perdent leur marge droite (débordement)
     et se recentrent sous le titre. */
  .sp-leak, .sp-live, .sp-comp, .sp-robot { margin-right: 0; align-self: center; }
  .sp-steps { grid-template-columns: 1fr 1fr; }
  .sp-offer-grid { grid-template-columns: 1fr; gap: 20px; }
  .sp-deg-grid { grid-template-columns: 1fr; gap: 20px; }
  .sp-cmp-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-conf-grid { grid-template-columns: 1fr; }
  .sp-adv-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-dsi-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-seg-grid { grid-template-columns: 1fr; }
  .sp-journey { grid-template-columns: 1fr; }
  /* Boucle empilée : colonne centrée, cartes de largeur uniforme, flèches
     entre elles pointant vers le bas — alignement vertical garanti. */
  .sp-loop { flex-direction: column; align-items: center; gap: 4px; }
  .sp-loop-step { flex: none; width: 100%; max-width: 320px; }
  .sp-loop-arrow { transform: rotate(90deg); }
  .sp-why-grid { grid-template-columns: 1fr 1fr; }
  .sp-cta-band { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .sp-hero-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 28px 0; }
  .sp-stats { grid-template-columns: 1fr 1fr; }
  .sp-reg-grid { grid-template-columns: 1fr; }
  .sp-targets { grid-template-columns: 1fr 1fr; }
  .sp-args { grid-template-columns: 1fr 1fr; }
  .sp-palette-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-tech-grid { grid-template-columns: 1fr; gap: 26px; }
  .sp-tech-plan { max-width: 460px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .sp-stats { grid-template-columns: 1fr; }
  .sp-targets { grid-template-columns: 1fr 1fr; }
  .sp-args { grid-template-columns: 1fr; }
  .sp-specs { grid-template-columns: 1fr 1fr; }
  .sp-steps { grid-template-columns: 1fr; }
  .sp-dsi-facts { grid-template-columns: 1fr; }
  .sp-why-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Lightbox (agrandissement d'image)
   ========================================================================== */
/* Indice visuel : les images agrandissables réagissent au survol */
.is-zoomable { cursor: zoom-in; transition: transform .2s ease, box-shadow .2s ease; }
.is-zoomable:hover { transform: scale(1.01); }
.is-zoomable:focus-visible { outline: 2px solid var(--flux); outline-offset: 3px; }

.sp-lightbox { padding: 4vmin; }
.sp-lb-panel {
  position: relative; margin: 0; max-width: min(1100px, 96vw); max-height: 92dvh;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: modal-in .2s ease both;
}
.sp-lb-img {
  max-width: 100%; max-height: 82dvh; width: auto; height: auto; display: block;
  background: #fff; border-radius: var(--r-card-lg); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  padding: 8px;
}
.sp-lb-cap { color: #fff; font-size: .84rem; text-align: center; max-width: 60ch; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* bouton fermer : posé au-dessus, en clair sur le voile sombre */
.sp-lb-close {
  position: absolute; top: -6px; right: -6px; width: 40px; height: 40px;
  background: var(--surface); border-radius: 50%; box-shadow: var(--shadow);
  color: var(--ink); font-size: 1.1rem; z-index: 1;
}
.sp-lb-close:hover { background: var(--surface-2); color: var(--ink); }

/* ==========================================================================
   Accessibilité : mouvement réduit (animations propres à SmartPal)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sp-curve-line { transition: none !important; stroke-dashoffset: 0 !important; }
  .sp-curve-area { transition: none !important; opacity: 1 !important; }
  .sp-curve-marker { transition: none; }
  .sp-bar-fill { transition: none; }
  .sp-cols .sp-col-bar, .sp-cols .sp-col-val { transition: none; }
  .sp-cols .sp-col:hover .sp-col-bar { transform: none; filter: none; }
  .sp-cols .sp-col:hover .sp-col-val { transform: none; }
  .sp-stat, .sp-reg-card, .sp-target { transition: none; }
  .sp-stat:hover, .sp-reg-card:hover, .sp-target:hover { transform: none; }
  .sp-arg, .sp-arg[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-arg[data-reveal] { opacity: 1; transform: none; }
  .sp-arg:hover { transform: none; }
  .sp-step, .sp-step[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-step[data-reveal] { opacity: 1; transform: none; }
  .sp-step:hover { transform: none; }
  .sp-gauge-fill { transition: none; }
  .sp-inc, .sp-inc[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-inc[data-reveal] { opacity: 1; transform: none; }
  .sp-inc:hover { transform: none; }
  .sp-inc[data-reveal] .sp-inc-check { opacity: 1; transform: none; transition: none; }
  .sp-conf-col, .sp-conf-col[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-conf-col[data-reveal] { opacity: 1; transform: none; }
  .sp-conf-col:hover { transform: none; }
  .sp-loop-step, .sp-loop-step[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-loop-step[data-reveal] { opacity: 1; transform: none; }
  .sp-loop-step:hover { transform: none; }
  .sp-journey-step, .sp-journey-step[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-journey-step[data-reveal] { opacity: 1; transform: none; }
  .sp-journey-step:hover { transform: none; }
  .sp-why, .sp-why[data-reveal] { transition: none; transition-delay: 0s; }
  .sp-why[data-reveal] { opacity: 1; transform: none; }
  .sp-why:hover { transform: none; }
  .sp-why:hover .sp-why-ico { transform: none; }
  /* Citation finale : texte + décor affichés directement, sans mouvement */
  .sp-finale-quote .w { opacity: 1; transform: none; transition: none; }
  .sp-finale.is-in .sp-finale-quote .w { transition: none; }
  .sp-finale-bg span { animation: none; }
  .sp-finale.is-in .key, .sp-finale.is-in .key::after { animation: none; }
  .sp-finale .key::after { transform: scaleX(1); }
  /* Animation « fuite » : scène figée (hub + fantômes visibles), sans mouvement */
  .sp-leak-ring, .sp-leak-ghost-1, .sp-leak-ghost-2 { animation: none; }
  .sp-leak-ring { opacity: 0; }
  /* Signal temps réel : scène figée (antenne + tags visibles, sans mouvement) */
  .sp-live-dot, .sp-live-bars i, .sp-live-tag::before, .sp-live-beam { animation: none; }
  .sp-live-tag::before { opacity: 0; }
  .sp-live-beam { opacity: 0; }
  .sp-live-bars i { transform: scaleY(.7); }
  /* Badge de conformité : scène figée (bouclier + coche + pastilles visibles) */
  .sp-comp-check path, .sp-comp-ring, .sp-comp-chip { animation: none; }
  .sp-comp-check path { stroke-dashoffset: 0; }
  .sp-comp-ring { opacity: 0; }
  .sp-comp-chip { opacity: 1; transform: none; }
  /* Bras robot : la pose statique de repos est gérée par sp-robot.js (reduce). */
  .is-zoomable { transition: none; }
  .is-zoomable:hover { transform: none; }
  .sp-lb-panel { animation: none; }
}