/* ============================================================
   SCIP — optimisation (Optimise). Héros : copie à gauche, trois
   vrais écrans en éventail, mot géant OPTIMISE derrière. Puis :
   les cinq onglets, un bloc par onglet, capture et copie en
   alternance, avec les chiffres réels du jeu de démo.
   ============================================================ */

/* ---------- Héros ---------- */
.hero {
  position: relative; min-height: 94svh; overflow: hidden;
  display: flex; align-items: center;
  padding: clamp(104px, 14vh, 160px) var(--gutter) clamp(56px, 8vh, 104px);
}
.hero .ghost { right: -0.05em; bottom: 3vw; font-size: 25vw; } /* derrière l'éventail : les fenêtres masquent les glyphes */
.hero-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 3vw; align-items: center; width: 100%; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy .t-body { margin-top: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }

/* ---------- Éventail de trois fenêtres ---------- */
.fan-figure { position: relative; z-index: 2; margin-right: calc(-1 * var(--gutter)); }
.fan { position: relative; aspect-ratio: 16 / 9.6; }
.fan .shot-win { position: absolute; width: 56%; }
.fan-a { left: 0; top: 14%; transform: rotate(-5deg); z-index: 1; }
.fan-b { left: 21%; top: 2%; transform: rotate(1deg); z-index: 3; }
.fan-c { right: 2%; top: 20%; transform: rotate(6deg); z-index: 2; }
.fan-figure figcaption { margin-top: 6px; padding-left: 21%; }
@media (max-width: 1000px) {
  .hero { min-height: 0; padding-top: 150px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero .ghost { font-size: 34vw; bottom: 8%; }
  .fan-figure { margin-right: 0; }
  .fan-figure figcaption { padding-left: 0; margin-top: 14px; }
}
@media (max-width: 640px) {
  .hero-actions .btn { width: 100%; }
  .fan { aspect-ratio: 16 / 12; }
  .fan .shot-win { width: 72%; }
  .fan-b { left: 14%; }
}

/* ---------- Un bloc par onglet ---------- */
.tab-block {
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(26px, 4vw, 64px); align-items: center;
  padding: clamp(30px, 4vw, 60px) 0; border-top: 1px solid var(--line);
}
.tab-block.flip .tab-copy { order: 2; }
.tab-block.flip { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); }
.tab-copy .n { display: block; color: var(--muted); margin-bottom: 12px; }
.tab-copy h3 { margin-bottom: 16px; }
.tab-copy .t-body { max-width: 42ch; }
/* le fait chiffré, issu de la capture : .t-data du logiciel */
.fact {
  margin: 20px 0 0; padding: 14px 16px; max-width: 46ch;
  background: var(--surface); border-radius: var(--radius);
  border-left: 2px dashed var(--sim);                       /* provenance : données démo */
  font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
@media (max-width: 960px) {
  .tab-block, .tab-block.flip { grid-template-columns: 1fr; }
  .tab-block.flip .tab-copy { order: 0; }
}
.engines-note { margin: 0; padding-top: clamp(26px, 3vw, 44px); border-top: 1px solid var(--line); max-width: 92ch; font-size: 13.5px; color: var(--muted); }

/* ---------- CTA ---------- */
.cta-section { padding-bottom: clamp(72px, 8vw, 128px); }