/* ============================================================
   SARGAWATT – Page /sargajet (pillar)
   Extends styles.css + sargasses.css (Direction A)
   Only new components live here.
   ============================================================ */

/* ---------- Hero metric badges reuse .proof-badges from sargasses.css ---------- */
.hero-cost-star {
  /* Asterisque discret associe a la precision de conditions sous le titre. */
  font-size: 0.42em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.08em;
}
.hero-cost-note {
  /* Note courte pour qualifier la promesse sans alourdir le H1. */
  margin-top: 10px;
  max-width: 680px;
  color: var(--ink-soft);
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.45;
}

.sargajet-hero-shot .ph-img {
  /* Image decalee a gauche : son bord droit reste cale sur le placeholder. */
  object-position: right center;
}

.sargajet-hero-caption {
  /* Meme logique que les autres legendes .sources, plus proche du visuel hero. */
  margin-top: 10px;
}

/* ============================================================
   PROBLÈME – 3 cartes
   ============================================================ */
.prob-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(30px, 4vw, 44px);
}
.prob {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 26px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.prob:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--teal); }
.prob .prob-ico {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--teal-tint); color: var(--teal-700);
  display: grid; place-items: center; margin-bottom: 18px;
}
.prob .prob-ico svg { width: 24px; height: 24px; }
.prob h3 { font-size: 18.5px; font-family: var(--font-display); font-weight: 600; }
.prob p { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }

.prob-lead {
  max-width: 720px;
  font-size: clamp(16.5px, 1.5vw, 19px);
  color: var(--ink-soft);
  margin-top: 18px;
  line-height: 1.6;
}

/* ============================================================
   FLOW – schéma 4 étapes animé
   ============================================================ */
.flow-wrap { background: var(--surface); border-block: 1px solid var(--line); }
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(34px, 4vw, 52px);
  position: relative;
}
.flow-step {
  position: relative;
  text-align: center;
  padding: 0 22px;
}
/* connecting arrow between steps */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px; top: 26px;
  width: 13px; height: 13px;
  border-top: 2px solid var(--gray-300);
  border-right: 2px solid var(--gray-300);
  transform: rotate(45deg);
  transition: border-color 0.4s var(--ease);
}
.flow-step.lit:not(:last-child)::after { border-color: var(--teal); }

.fs-icon {
  position: relative;
  width: 66px; height: 66px; border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--bg);
  border: 2px solid var(--gray-300);
  color: var(--gray);
  display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--surface);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.fs-icon svg { width: 30px; height: 30px; }
.fs-num {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--gray-300);
  color: var(--gray);
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  display: grid; place-items: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.flow-step.lit .fs-icon {
  background: var(--teal); color: #fff; border-color: var(--teal);
  transform: translateY(-4px);
  box-shadow: 0 0 0 6px var(--surface), 0 12px 26px rgba(0,151,157,0.28);
}
.flow-step.lit .fs-num { background: var(--ink); color: #fff; border-color: var(--ink); }

.flow-step h3 {
  font-size: 16.5px; font-family: var(--font-display); font-weight: 600;
  line-height: 1.2;
}
.flow-step p { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }

/* boat sway on the towing step (discreet) */
.fs-icon.sway svg { transform-origin: 50% 60%; }
.flow-step.lit .fs-icon.sway svg { animation: fs-sway 2.4s var(--ease) infinite; }
@keyframes fs-sway {
  0%, 100% { transform: translateX(-1.5px) rotate(-3deg); }
  50%      { transform: translateX(1.5px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-step .fs-icon, .flow-step.lit .fs-icon { animation: none; }
}

/* ============================================================
   POUR QUI – reuse .card-grid-4 / .icard from sargasses.css
   ============================================================ */

/* ============================================================
   MÉTRIQUES – grands blocs chiffrés
   ============================================================ */
.metrics-wrap { background: var(--bg); }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: clamp(36px, 4vw, 52px);
}
.metric { border-top: 2px solid var(--teal); padding-top: 22px; }
.metric .m-num {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(34px, 4vw, 52px); line-height: 0.98; color: var(--teal-700);
}
.metric .m-num .u { font-size: 0.4em; color: var(--ink); letter-spacing: 0; font-weight: 600; }
.metric .m-label { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25; }
.metric .m-sub { margin-top: 8px; font-size: 13px; color: var(--gray); line-height: 1.45; }

.metrics-note {
  margin-top: clamp(30px, 3.5vw, 42px);
  max-width: 880px;
}
.metrics-note svg { display: none; }
.metrics-note p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }
.metrics-cta { margin-top: clamp(28px, 3.5vw, 40px); }

/* ============================================================
   SARGAMAP + SARGAJET – duo
   ============================================================ */
.duo-wrap { background: var(--surface); border-block: 1px solid var(--line); }
.duo {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(34px, 4vw, 50px);
}
.duo-visual .ph { min-height: 340px; height: 100%; }
/* Vidéo de démo : afficher tout le cadre 16:9 (pas de crop) + note rapprochée. */
.duo-visual:has(video.ph-img) .ph {
  min-height: 0; height: auto;
  aspect-ratio: 16 / 9;
  background-color: #07232b;
}
.duo-visual video.ph-img { object-fit: contain; }
.duo-visual .sources { margin-top: 10px; }
.duo-blocks { display: flex; flex-direction: column; gap: 18px; }
.duo-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.duo-block:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); border-color: var(--teal); }
.duo-block-head { display: flex; align-items: center; gap: 14px; }
.duo-block .db-ico {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  background: var(--teal-tint); color: var(--teal-700);
  display: grid; place-items: center;
}
.duo-block .db-ico svg { width: 25px; height: 25px; }
.duo-block h3 { font-size: 20px; font-family: var(--font-display); font-weight: 600; }
.duo-block p { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.duo-block .link-arrow { margin-top: 16px; }

/* ============================================================
   LOW-TECH – reuse .card-grid-4 / .icard, plus footer note
   ============================================================ */
.lowtech-note {
  max-width: 720px;
  margin-top: clamp(28px, 3.5vw, 40px);
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.35;
  color: var(--ink); letter-spacing: -0.01em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .prob-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .flow-step:nth-child(2)::after { display: none; }
}

@media (max-width: 920px) {
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .duo-visual { order: -1; }
}

@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; row-gap: 36px; }
  .flow-step::after { display: none !important; }
  .metrics { grid-template-columns: 1fr 1fr; }
}