/* ───────────────────────────────────────────────────────────────
   OptiDress · pages produit (OptiDress, OptiSize, OptiMove, FR et EN)
   Chargée après site.css par ces six pages seulement : build_v2.py
   pose body.produit et le lien vers cette feuille. Le contenu ne change
   pas, seule la mise en scène met la marque en avant :
   · en-tête sur fond bleu clair, monogramme OptiDress en filigrane ;
   · pastille produit bleue à la place du libellé gris ;
   · visuels cerclés de bleu, légendes et chiffres aux couleurs de la marque ;
   · étapes numérotées sur carrés bleus, sections grises teintées de bleu ;
   · bandeau de fin de page en bleu de marque.
─────────────────────────────────────────────────────────────── */

/* ── en-tête ── */
.produit .sub-hero {
  background:
    radial-gradient(48% 62% at 78% 42%, rgba(0, 85, 254, .13), transparent 72%),
    linear-gradient(180deg, #f3f7ff 0%, #fbfcff 62%, #fff 100%);
}
.produit .sub-hero::before {
  background-image:
    linear-gradient(rgba(0, 85, 254, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 85, 254, .08) 1px, transparent 1px);
  opacity: 1;
}
/* le monogramme OptiDress en filigrane, derrière le visuel */
.produit .sub-hero::after {
  content: ""; position: absolute; z-index: -1;
  right: -6%; bottom: -16%; width: min(760px, 62vw); aspect-ratio: 375 / 231;
  background: linear-gradient(135deg, rgba(0, 85, 254, .11), rgba(0, 40, 153, .05));
  -webkit-mask: url("/assets/marque/od-mark.svg") center / contain no-repeat;
          mask: url("/assets/marque/od-mark.svg") center / contain no-repeat;
  pointer-events: none;
}
/* libellé de l'en-tête → pastille produit (monogramme sur rond bleu + nom) */
.produit .sub-hero .kicker {
  position: relative; gap: 10px; height: 36px; padding: 0 15px 0 42px;
  border-radius: 999px; background: #fff; border: 1px solid rgba(0, 85, 254, .22);
  color: var(--blue); font-weight: 600;
  box-shadow: 0 10px 24px -14px rgba(0, 85, 254, .55);
}
.produit .sub-hero .kicker::before {
  content: ""; position: absolute; left: 5px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; background: linear-gradient(135deg, #4a86ff, var(--blue) 45%, var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.produit .sub-hero .kicker::after {
  content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 10px; margin-top: -5px;
  background: #fff;
  -webkit-mask: url("/assets/marque/od-mark.svg") center / contain no-repeat;
          mask: url("/assets/marque/od-mark.svg") center / contain no-repeat;
}
.produit .sub-visual-cap { color: var(--blue); }
/* visuels : liseré et halo bleus */
.produit .sub-visual-video video,
.produit .sub-visual > img {
  border: 1px solid rgba(0, 85, 254, .22);
  box-shadow: 0 0 0 7px rgba(0, 85, 254, .06), 0 50px 100px -44px rgba(0, 40, 153, .6);
}
.produit .od-sim {
  position: relative; overflow: hidden;
  border-color: rgba(0, 85, 254, .2);
  box-shadow: 0 0 0 7px rgba(0, 85, 254, .06), 0 50px 100px -44px rgba(0, 40, 153, .55);
}
.produit .od-sim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--blue) 55%, #7aa4ff);
}
.produit .od-sim-kicker { color: var(--blue); }
.produit .od-sim-curseurs input[type=range] { accent-color: var(--blue); }
/* OptiMove : « disponible très prochainement » en pastille bleue */
.produit .sub-soon { border-color: rgba(0, 85, 254, .3); background: var(--blue-50); color: var(--blue); }

/* ── sections ── */
.produit .sub-sec-alt { background: linear-gradient(180deg, #f3f6fd 0%, #eef3ff 100%); }
.produit .section-head .kicker { color: var(--blue); }

/* chiffres : filet bleu, valeurs en dégradé de la marque */
.produit .sub-stats { position: relative; border-top-color: transparent; }
.produit .sub-stats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, var(--navy), var(--blue) 55%, #7aa4ff);
}
.produit .sub-stat b {
  background: linear-gradient(120deg, var(--navy) 5%, var(--blue) 62%, #4f8aff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.produit .sub-stat + .sub-stat { border-left-color: rgba(0, 85, 254, .16); }

/* étapes : numéros sur carrés bleus, cartes blanches qui se soulèvent */
.produit .sub-steps { gap: 16px; border-top: 0; }
.produit .sub-step,
.produit .sub-step + .sub-step {
  padding: 28px 26px 30px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 40, 153, .05), 0 14px 34px -22px rgba(0, 40, 153, .28);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s;
}
.produit .sub-step:hover { transform: translateY(-5px); border-color: rgba(0, 85, 254, .38); box-shadow: 0 2px 4px rgba(0, 40, 153, .06), 0 28px 50px -26px rgba(0, 85, 254, .45); }
.produit .sub-step-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #4a86ff, var(--blue) 45%, var(--navy));
  color: #fff; font-size: 13px; letter-spacing: 0;
  box-shadow: 0 10px 20px -10px rgba(0, 85, 254, .85), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.produit .sub-step h3 { margin-top: 22px; }
/* 4e élément éventuel (note pleine largeur) : même carte, sans numéro mis en avant */
.produit .sub-steps > .sub-step:nth-child(4):last-child { margin-top: 0; }

/* logos clients de la page OptiDress : bleu nuit plutôt que gris */
.produit .od-logos-set img { opacity: .72; filter: brightness(0) invert(11%) sepia(92%) saturate(4150%) hue-rotate(228deg) brightness(84%); }

/* ── bandeau de fin de page : le bleu de la marque ── */
.produit .od-dark {
  background:
    radial-gradient(60% 120% at 92% -15%, rgba(110, 160, 255, .5), transparent 62%),
    radial-gradient(55% 100% at 0% 115%, rgba(0, 16, 92, .55), transparent 68%),
    linear-gradient(115deg, #001c70 0%, var(--navy) 34%, #0a43dc 74%, var(--blue) 100%);
}
.produit .od-dark::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
}
.produit .od-dark::after { background: radial-gradient(closest-side, rgba(170, 198, 255, .35), transparent 72%); }
.produit .od-dark h2 em { color: #d2e1ff; }
.produit .od-dark p { color: rgba(255, 255, 255, .8); }
.produit .od-dark-site { border-color: rgba(255, 255, 255, .45); }
.produit .od-dark-demo { background: #fff; color: var(--blue); box-shadow: 0 14px 30px -14px rgba(0, 20, 90, .7); }
.produit .od-dark-demo:hover { background: #eef3ff; }

/* ── petits écrans ── */
@media (max-width: 1040px) {
  .produit .sub-hero::after { right: -20%; bottom: -8%; width: 90vw; opacity: .8; }
}
@media (max-width: 760px) {
  .produit .sub-steps { gap: 12px; }
}