/* ============================================================================
   VITRINE COMMERCIALE Stoodies — avant connexion (note UX §6), direction
   « éditorial audacieux » : fond crème lumineux, typo géante, surlignage
   marqueur, split bicolore vert/bleu, scène animée « écrire → diplôme ».
   100 % CSS/SVG local (ADR-009), animations respectant prefers-reduced-motion.
   Partagée par la racine et les deux portails.
   ============================================================================ */

:root {
  --sco: #08c86d; --sco-d: #0c9d59; --pro: #3B82F6; --pro-d: #2563EB;
  --cream: #f7f2e9; --cream2: #efe8db; --ink: #101522; --muted: #6f7684;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink); background: var(--cream); line-height: 1.55;
  overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.v-wrap { max-width: 82rem; margin: 0 auto; padding: 0 2rem; }

/* univers PRO : l'accent passe du vert au bleu (portail pro) */
body.u-pro { --sco: #3B82F6; --sco-d: #2563EB; }

/* ---- header ---- */
.v-haut { display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 2rem; max-width: 82rem; margin: 0 auto; position: sticky;
  top: 0; z-index: 50; background: #fbf7efd9; backdrop-filter: blur(10px); }
.v-logo { display: inline-flex; flex-direction: column; align-items: flex-start;
  line-height: 1; }
.v-logo .lg-img { height: 2.1rem; width: auto; display: block; }
.v-logo .lg-slogan { font-size: .62rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-top: .3rem;
  padding-left: .15rem; }
/* logo sur fond sombre (footer) : posé sur une pastille claire pour rester
   lisible (le « St » foncé du PNG ne ressortirait pas sur le fond sombre) */
.v-pied .v-logo { align-items: center; }
.v-pied .v-logo .lg-img { height: 2.6rem; background: var(--cream);
  padding: .5rem .8rem; border-radius: .8rem; }
.v-pied .v-logo .lg-slogan { color: #ffffff99; }
/* badge « Pro » à côté du logo */
.v-logo small { font-weight: 700; color: var(--muted); font-size: .82rem;
  margin-left: .4rem; align-self: center; }
.v-logo small { font-weight: 600; color: var(--muted); font-size: .62em;
  margin-left: .4em; }
.v-haut-liens { display: flex; gap: 1.6rem; font-weight: 700; font-size: .95rem; }
.v-haut-liens a:hover { color: var(--sco); }
.v-haut-actions { display: flex; gap: .6rem; align-items: center; }
@media (max-width: 820px) { .v-haut-liens { display: none; } }

/* ---- barre de rôles « Je suis… » (orientation dès le haut de page) ---- */
.v-jesuis { background: var(--cream2); border-bottom: 2px solid #0B122012;
  padding: .65rem 1rem; }
.v-jesuis-in { max-width: 82rem; margin: 0 auto; display: flex;
  align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.v-jesuis-lbl { font-size: .82rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em; margin-right: .3rem; }
.v-jesuis a { font-size: .88rem; font-weight: 800; padding: .42rem .95rem;
  border-radius: 999px; border: 2px solid #0B122022; background: #fff;
  min-height: 36px; display: inline-flex; align-items: center; gap: .35rem;
  transition: transform .12s, border-color .12s; }
.v-jesuis a:hover { transform: translateY(-2px); border-color: var(--ink); }
.v-jesuis a.actif { background: var(--ink); color: var(--cream);
  border-color: var(--ink); }

/* ---- boutons (relief « sticker ») ---- */
.v-btn { font-weight: 800; border-radius: 999px; padding: .72rem 1.4rem;
  font-size: .95rem; display: inline-flex; align-items: center; gap: .4rem;
  border: 3px solid var(--ink); cursor: pointer;
  transition: transform .12s, box-shadow .12s; }
.v-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.v-btn-plein { background: var(--ink); color: var(--cream); }
.v-btn-sco { background: var(--sco); color: #04150f; }
.v-btn-clair { background: var(--cream); color: var(--ink); }
.v-btn-lg { padding: .95rem 1.7rem; font-size: 1.05rem; }

/* ---- HERO PHOTO (racine) : photo réelle d'élève + cartes flottantes ---- */
.v-herophoto { display: grid; grid-template-columns: 1fr 1.05fr; gap: 2.5rem;
  align-items: center; max-width: 82rem; margin: 0 auto; padding: 3rem 2rem 2rem;
  position: relative; }
.v-herophoto h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 900;
  line-height: .98; letter-spacing: -.03em; color: var(--ink); }
.v-herophoto h1 .b { color: var(--pro); }
.v-herophoto h1 .g { color: var(--sco-d); }
.v-hp-lead { font-size: 1.25rem; line-height: 1.55; max-width: 34rem;
  margin: 1.4rem 0 0; color: #2a2f42; }
.v-hp-photo { position: relative; }
.v-hp-photo img { width: 100%; border-radius: 1.6rem; display: block;
  box-shadow: 0 30px 70px rgba(16, 21, 34, .22); }
/* cartes flottantes sur la photo */
.v-hp-card { position: absolute; background: #fff; border-radius: 1.1rem;
  padding: .9rem 1.1rem; box-shadow: 0 16px 40px rgba(16, 21, 34, .18);
  display: flex; align-items: center; gap: .7rem; font-weight: 800;
  font-size: .92rem; color: var(--ink); border: 1px solid #ececec; }
.v-hp-card .ic { width: 2.4rem; height: 2.4rem; border-radius: .7rem; flex: none;
  display: grid; place-items: center; }
.v-hp-card small { display: block; font-weight: 600; color: var(--muted);
  font-size: .78rem; }
.v-hp-c1 { top: 8%; left: -1.5rem; animation: v-fl1 5s ease-in-out infinite; }
.v-hp-c2 { top: 44%; right: -1.5rem; animation: v-fl2 6s ease-in-out infinite; }
.v-hp-c3 { bottom: 6%; left: 8%; animation: v-fl1 5.5s ease-in-out infinite; }
.v-hp-c1 .ic { background: #e8f0ff; color: var(--pro); }
.v-hp-c2 .ic { background: #eafaf2; color: var(--sco-d); }
.v-hp-c3 .ic { background: #fff3df; color: #d47b00; }
@keyframes v-fl1 { 50% { transform: translateY(-10px); } }
@keyframes v-fl2 { 50% { transform: translateY(10px); } }
@media (max-width: 860px) { .v-herophoto { grid-template-columns: 1fr; }
  .v-hp-card { font-size: .82rem; padding: .7rem .8rem; }
  .v-hp-c1 { left: 0; } .v-hp-c2 { right: 0; } }

/* ---- section « comment ça marche » avec photos (racine) ---- */
.v-etapes-photo { max-width: 82rem; margin: 0 auto; padding: 2rem 2rem 1rem;
  display: grid; gap: 2.5rem; }
.v-ep { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
  align-items: center; }
.v-ep:nth-child(even) .v-ep-img { order: -1; }
.v-ep-img img { width: 100%; border-radius: 1.4rem; display: block;
  box-shadow: 0 20px 50px rgba(16, 21, 34, .16); }
.v-ep-num { display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sco);
  color: #04150f; font-weight: 900; margin-bottom: .8rem; }
.v-ep h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900;
  letter-spacing: -.02em; color: var(--ink); margin-bottom: .6rem; }
.v-ep p { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) { .v-ep { grid-template-columns: 1fr; }
  .v-ep:nth-child(even) .v-ep-img { order: 0; } }

/* ---- hero : texte + scène animée ---- */
.v-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem;
  align-items: center; padding: 2.4rem 0 1rem; position: relative;
  max-width: 82rem; margin: 0 auto; }
.v-hero-in { padding: 0 2rem; }
.v-eyebrow { display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sco-d);
  background: #10B9811a; border: 2px solid #10B98140; border-radius: 2rem;
  padding: .4rem 1rem; margin-bottom: 1.2rem; }
.v-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem); font-weight: 900;
  line-height: .92; letter-spacing: -.04em; }
.v-hero h1 .u { position: relative; white-space: nowrap; }
.v-hero h1 .u::after { content: ""; position: absolute; left: -.05em;
  right: -.05em; bottom: .06em; height: .34em; background: var(--sco);
  z-index: -1; transform: rotate(-1.5deg); border-radius: .2em; }
.v-hero h1 .b { color: var(--pro); }
.v-hero-lead { font-size: 1.3rem; font-weight: 500; max-width: 32rem;
  margin: 1.4rem 0 0; color: #2a2f42; }
.v-hero-cta { display: flex; gap: 1rem; margin: 1.9rem 0 1.1rem; flex-wrap: wrap; }
.v-hero-preuves { display: flex; gap: 1.3rem; font-size: .85rem;
  color: var(--muted); flex-wrap: wrap; font-weight: 600; }
.v-hero-preuves b { color: var(--ink); }
.v-blob { position: absolute; border-radius: 42% 58% 63% 37%/45% 45% 55% 55%;
  z-index: -1; width: 20rem; height: 20rem; background: #10B98122;
  top: -2rem; right: -3rem; animation: v-morph 16s ease-in-out infinite; }
@keyframes v-morph { 50% { border-radius: 58% 42% 37% 63%/55% 55% 45% 45%;
  transform: scale(1.08) rotate(8deg); } }

/* ---- scène animée « écrire → diplôme » (portails scolaire/pro) ---- */
.v-scene { position: relative; aspect-ratio: 1/1; max-width: 26rem;
  margin: 0 auto; width: 100%; }
.v-scene svg { width: 100%; height: 100%; overflow: visible; }
.v-paper { fill: #fff; stroke: #e3d9c6; stroke-width: 2; }
.v-rule { stroke: #d8e8ff; stroke-width: 2; }
.v-pen { transform-origin: center; animation: v-write 4s ease-in-out infinite; }
@keyframes v-write {
  0%, 8% { transform: translate(-20px, 8px) rotate(-8deg); }
  20% { transform: translate(0, -2px) rotate(-8deg); }
  35% { transform: translate(30px, 6px) rotate(-8deg); }
  50% { transform: translate(70px, -4px) rotate(-8deg); }
  58%, 100% { transform: translate(70px, -4px) rotate(-8deg); } }
.v-ink { stroke: var(--pro); stroke-width: 4; fill: none; stroke-linecap: round;
  stroke-dasharray: 120; stroke-dashoffset: 120;
  animation: v-inkdraw 4s ease-in-out infinite; }
@keyframes v-inkdraw { 0%, 8% { stroke-dashoffset: 120; }
  52% { stroke-dashoffset: 0; } 70% { stroke-dashoffset: 0; opacity: 1; }
  85%, 100% { opacity: 0; } }
.v-star { fill: var(--sco); opacity: 0; transform-origin: center; }
.v-s1 { animation: v-spop 4s ease-in-out infinite .8s; }
.v-s2 { animation: v-spop 4s ease-in-out infinite 1.3s; }
.v-s3 { animation: v-spop 4s ease-in-out infinite 1.8s; }
@keyframes v-spop { 0%, 15% { opacity: 0; transform: scale(0); }
  25% { opacity: 1; transform: scale(1.2); } 35% { transform: scale(1); }
  60% { opacity: 1; } 75%, 100% { opacity: 0; transform: scale(.6); } }
.v-cap { transform-origin: center; opacity: 0;
  animation: v-grad 4s ease-in-out infinite; }
@keyframes v-grad {
  0%, 60% { opacity: 0; transform: translateY(30px) scale(.5) rotate(-10deg); }
  72% { opacity: 1; transform: translateY(-8px) scale(1.15) rotate(4deg); }
  80% { transform: translateY(0) scale(1) rotate(0); }
  95% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; } }
.v-tassel { transform-origin: top center; animation: v-sway 1.2s ease-in-out infinite; }
@keyframes v-sway { 50% { transform: rotate(10deg); } }

/* ---- DÉMO PRODUIT ANIMÉE : un vrai écran Stoodies qui se joue tout seul.
   4 scènes en boucle (exercice → IA s'adapte → progression → parcours),
   cycle de 24 s. 100 % CSS local. Le produit se montre, il ne se raconte pas. */
.v-demo { position: relative; width: 100%; max-width: 32rem; margin: 0 auto; }
.v-prod { position: relative; background: #fff; border: 1px solid #e5dccd;
  border-radius: 1.6rem; box-shadow: 0 26px 60px rgba(16, 21, 34, .18);
  overflow: hidden; animation: v-float 6s ease-in-out infinite; }
@keyframes v-float { 50% { transform: translateY(-9px); } }
.v-prod-bar { height: 3.4rem; padding: 0 1.1rem; display: flex;
  align-items: center; justify-content: space-between; background: #fffefc;
  border-bottom: 1px solid #eee4d6; }
.v-prod-dots { display: flex; gap: .42rem; }
.v-prod-dots i { width: .58rem; height: .58rem; border-radius: 50%; }
.v-prod-dots i:nth-child(1) { background: #ff9185; }
.v-prod-dots i:nth-child(2) { background: #ffd76d; }
.v-prod-dots i:nth-child(3) { background: #78d891; }
.v-prod-logo { font-weight: 900; font-size: .95rem; color: var(--ink); }
.v-prod-logo span { color: var(--sco); }
.v-prod-lvl { font-size: .72rem; font-weight: 800; color: #707887;
  background: #f3efe8; border-radius: 999px; padding: .35rem .6rem; }
.v-vp { position: relative; height: 27rem; overflow: hidden; }
.v-sc { position: absolute; inset: 0; padding: 1.7rem; opacity: 0;
  transform: translateX(24px) scale(.985); pointer-events: none; }
.v-sc h3 { font-size: 1.35rem; line-height: 1.2; margin: .5rem 0 1rem;
  color: var(--ink); }
.v-sc .kick { font-size: .72rem; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sco-d); }
.v-sc-1 { animation: v-s1 24s infinite; } .v-sc-2 { animation: v-s2 24s infinite; }
.v-sc-3 { animation: v-s3 24s infinite; } .v-sc-4 { animation: v-s4 24s infinite; }
@keyframes v-s1 { 0%, 22% { opacity: 1; transform: none; }
  25%, 100% { opacity: 0; transform: translateX(-24px) scale(.985); } }
@keyframes v-s2 { 0%, 24% { opacity: 0; } 27%, 47% { opacity: 1; transform: none; }
  50%, 100% { opacity: 0; transform: translateX(-24px) scale(.985); } }
@keyframes v-s3 { 0%, 49% { opacity: 0; } 52%, 72% { opacity: 1; transform: none; }
  75%, 100% { opacity: 0; transform: translateX(-24px) scale(.985); } }
@keyframes v-s4 { 0%, 74% { opacity: 0; } 77%, 97% { opacity: 1; transform: none; }
  100% { opacity: 0; } }
/* scène 1 : fractions */
.v-frac { display: flex; gap: .6rem; margin: .6rem 0 1.5rem; }
.v-sq { width: 3rem; height: 3rem; border-radius: .7rem;
  border: 2px solid #cfd8e6; background: #fff; }
.v-sq.fill { background: linear-gradient(135deg, var(--pro), #6aa2ff);
  border-color: #4f83ee; }
.v-sc-1 .v-sq { opacity: .2; transform: scale(.7); animation: v-pop 24s infinite; }
.v-sc-1 .v-sq:nth-child(2) { animation-delay: .15s; }
.v-sc-1 .v-sq:nth-child(3) { animation-delay: .3s; }
.v-sc-1 .v-sq:nth-child(4) { animation-delay: .45s; }
@keyframes v-pop { 0%, 2% { opacity: .2; transform: scale(.7); }
  5%, 22% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: .2; transform: scale(.7); } }
.v-ansrow { display: flex; gap: .7rem; }
.v-ans { flex: 1; height: 3.6rem; border: 2px solid #d7deea; border-radius: 1rem;
  background: #fff; padding: 0 1rem; display: flex; align-items: center;
  font-size: 1.5rem; font-weight: 900; color: var(--ink); }
.v-ans::after { content: ""; animation: v-type 24s steps(3, end) infinite; }
@keyframes v-type { 0%, 8% { content: ""; } 10% { content: "3"; }
  12% { content: "3/"; } 14%, 100% { content: "3/4"; } }
.v-valider { border: none; border-radius: 1rem; background: var(--ink);
  color: #fff; font-weight: 900; padding: 0 1.4rem; }
.v-fb { margin-top: 1.1rem; border: 1px solid #bdebd0; background: #eefbf3;
  border-radius: 1rem; padding: .9rem 1.1rem; opacity: 0;
  transform: translateY(8px); animation: v-fb1 24s infinite; }
@keyframes v-fb1 { 0%, 15% { opacity: 0; transform: translateY(8px); }
  18%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }
.v-fb b { display: block; color: var(--sco-d); margin-bottom: .2rem; }
/* scène 2 : l'IA s'adapte */
.v-ai { background: #f2f6ff; border: 1px solid #d5e1ff; border-radius: 1.1rem;
  padding: 1.1rem; margin-top: .5rem; }
.v-ai-lbl { font-size: .72rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .08em; color: #2f6ee5; margin-bottom: .5rem; }
.v-ai-txt { min-height: 4.5rem; font-size: 1.05rem; line-height: 1.45;
  color: var(--ink); }
.v-ai-txt span { opacity: 0; }
.v-ai-txt .w1 { animation: v-w1 24s infinite; }
.v-ai-txt .w2 { animation: v-w2 24s infinite; }
.v-ai-txt .w3 { animation: v-w3 24s infinite; }
@keyframes v-w1 { 0%, 27% { opacity: 0; } 30%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes v-w2 { 0%, 31% { opacity: 0; } 34%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes v-w3 { 0%, 35% { opacity: 0; } 38%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
.v-sugg { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  margin-top: 1rem; }
.v-choice { border: 1px solid #dbe4f4; border-radius: 1rem; padding: .8rem;
  background: #fff; font-weight: 800; font-size: .9rem; color: var(--ink);
  opacity: 0; }
.v-choice:nth-child(1) { animation: v-c1 24s infinite; }
.v-choice:nth-child(2) { animation: v-c2 24s infinite; }
@keyframes v-c1 { 0%, 39% { opacity: 0; transform: translateY(6px); }
  41%, 47% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@keyframes v-c2 { 0%, 41% { opacity: 0; transform: translateY(6px); }
  43%, 47% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
/* scène 3 : progression */
.v-skills { display: grid; gap: .8rem; }
.v-skill { border: 1px solid #e4ddcf; border-radius: 1rem; background: #fff;
  padding: .9rem 1rem; }
.v-skill-top { display: flex; justify-content: space-between; font-size: .9rem;
  font-weight: 900; color: var(--ink); }
.v-bar { height: .55rem; background: #eee9e1; border-radius: 999px;
  margin-top: .6rem; overflow: hidden; }
.v-bar i { display: block; height: 100%; width: 0; border-radius: 999px; }
.v-skill:nth-child(1) .v-bar i { background: var(--sco); animation: v-b1 24s infinite; }
.v-skill:nth-child(2) .v-bar i { background: var(--pro); animation: v-b2 24s infinite; }
.v-skill:nth-child(3) .v-bar i { background: #f5b940; animation: v-b3 24s infinite; }
@keyframes v-b1 { 0%, 52% { width: 0; } 57%, 72% { width: 91%; } 75%, 100% { width: 0; } }
@keyframes v-b2 { 0%, 54% { width: 0; } 60%, 72% { width: 73%; } 75%, 100% { width: 0; } }
@keyframes v-b3 { 0%, 56% { width: 0; } 63%, 72% { width: 48%; } 75%, 100% { width: 0; } }
.v-reco { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 1rem;
  background: #fff7df; border: 1px solid #f1d896; color: var(--ink);
  opacity: 0; animation: v-reco 24s infinite; }
@keyframes v-reco { 0%, 63% { opacity: 0; transform: translateY(6px); }
  66%, 72% { opacity: 1; transform: none; } 75%, 100% { opacity: 0; } }
/* scène 4 : parcours */
.v-path { display: grid; gap: .7rem; margin-top: .5rem; }
.v-pstep { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem;
  border: 1px solid #e4ddcf; border-radius: 1rem; background: #fff;
  opacity: .35; transform: translateX(10px); color: var(--ink); }
.v-pstep .num { width: 2rem; height: 2rem; border-radius: 50%; display: grid;
  place-items: center; font-size: .8rem; font-weight: 900; background: #eef1f6;
  flex: none; }
.v-pstep.done .num { background: #eafaf1; color: var(--sco-d); }
.v-pstep.cur .num { background: #eaf1ff; color: #2f6ee5; }
.v-pstep small { color: var(--muted); }
.v-sc-4 .v-pstep:nth-child(1) { animation: v-p1 24s infinite; }
.v-sc-4 .v-pstep:nth-child(2) { animation: v-p2 24s infinite; }
.v-sc-4 .v-pstep:nth-child(3) { animation: v-p3 24s infinite; }
.v-sc-4 .v-pstep:nth-child(4) { animation: v-p4 24s infinite; }
@keyframes v-p1 { 0%, 77% { opacity: .35; transform: translateX(10px); }
  80%, 97% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes v-p2 { 0%, 79% { opacity: .35; transform: translateX(10px); }
  82%, 97% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes v-p3 { 0%, 81% { opacity: .35; transform: translateX(10px); }
  84%, 97% { opacity: 1; transform: none; } 100% { opacity: .35; } }
@keyframes v-p4 { 0%, 83% { opacity: .35; transform: translateX(10px); }
  86%, 97% { opacity: 1; transform: none; } 100% { opacity: .35; } }
.v-pbanner { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 1rem;
  background: linear-gradient(135deg, #eefbf3, #edf4ff); border: 1px solid #d8e8df;
  font-weight: 900; color: var(--ink); opacity: 0; animation: v-pban 24s infinite; }
@keyframes v-pban { 0%, 88% { opacity: 0; transform: scale(.97); }
  91%, 97% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
/* orbes décoratifs derrière le mockup */
.v-orb { position: absolute; border-radius: 50%; z-index: -1; }
.v-orb1 { width: 20rem; height: 20rem; right: -3rem; top: -2rem;
  background: #d7f1df; }
.v-orb2 { width: 9rem; height: 9rem; left: -2rem; bottom: 2rem;
  background: #dbe8ff; opacity: .8; }
@media (max-width: 860px) { .v-vp { height: 25rem; } }

/* ---- bande niveaux ---- */
.v-niveaux { background: var(--ink); color: var(--cream); padding: 1.4rem 2rem; }
.v-niveaux-in { max-width: 82rem; margin: 0 auto; display: flex;
  align-items: center; gap: 1rem; justify-content: center; flex-wrap: wrap;
  font-weight: 800; font-size: 1.05rem; }
.v-niv-step { display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border-radius: 999px; background: #ffffff12; }
.v-niv-arr { color: var(--sco); font-weight: 900; }

/* ---- chiffres ---- */
.v-stats { display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 3rem 2rem; gap: 1.2rem; max-width: 82rem; margin: 0 auto; }
.v-stat { background: #fff; border: 3px solid var(--ink); border-radius: 1.2rem;
  padding: 1.4rem 1.3rem; box-shadow: 6px 6px 0 #0B122018; }
.v-stat .n { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--pro), var(--sco));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-stat h3 { font-size: 1.02rem; font-weight: 900; margin: .15rem 0 .3rem; }
.v-stat p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 900px) { .v-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .v-stats { grid-template-columns: 1fr; } }

/* ---- mockup navigateur (le produit réel dès le premier écran) ---- */
.v-hero-fig { position: relative; }
.v-mock { border: 4px solid var(--ink); border-radius: 1.1rem; overflow: hidden;
  background: #fff; box-shadow: 12px 12px 0 #0B122022;
  transform: rotate(1.2deg); }
.v-mock-bar { display: flex; gap: .38rem; padding: .55rem .8rem;
  background: var(--ink); }
.v-mock-bar span { width: .6rem; height: .6rem; border-radius: 50%;
  background: #ffffff42; }
.v-mock img { display: block; width: 100%; }
.v-scene-mini { position: absolute; width: 9.5rem; left: -2.2rem;
  bottom: -2.2rem; background: var(--cream); border: 3px solid var(--ink);
  border-radius: 1rem; padding: .3rem; box-shadow: 6px 6px 0 #0B122022;
  transform: rotate(-3deg); }
@media (max-width: 860px) { .v-scene-mini { display: none; } }

/* ---- split bicolore ---- */
.v-split { display: grid; grid-template-columns: 1fr 1fr;
  border-top: 4px solid var(--ink); }
.v-half { padding: 3.5rem 2.5rem; min-height: 26rem; position: relative;
  overflow: hidden; }
.v-half-sco { background: var(--sco); color: #04150f; }
.v-half-pro { background: var(--pro); color: #fff; border-left: 4px solid var(--ink); }
.v-half .tag { font-weight: 900; font-size: .82rem; letter-spacing: .12em;
  text-transform: uppercase; }
.v-half h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
  line-height: 1; margin: .6rem 0 1rem; letter-spacing: -.03em; }
.v-half ul { list-style: none; padding: 0; font-size: 1.05rem; font-weight: 600;
  display: grid; gap: .5rem; max-width: 24rem; }
.v-half li::before { content: "→ "; font-weight: 900; }
.v-half .go { display: inline-block; margin-top: 1.6rem; font-weight: 900;
  font-size: 1.1rem; border-bottom: 4px solid currentColor; padding-bottom: .15rem; }
.v-half:hover .shot { transform: rotate(-3deg) translateY(-10px); }
.v-half .shot { position: absolute; right: -3rem; bottom: -2.5rem; width: 22rem;
  border-radius: .7rem; box-shadow: 0 30px 60px #0005; transform: rotate(-6deg);
  border: 6px solid #fff; opacity: .92;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 860px) { .v-split { grid-template-columns: 1fr; }
  .v-half-pro { border-left: 0; border-top: 4px solid var(--ink); } }

/* ---- comment ça marche ---- */
.v-how { padding: 4.5rem 2rem; max-width: 82rem; margin: 0 auto; }
.v-section-titre { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900;
  text-align: center; letter-spacing: -.03em; text-wrap: balance; }
.v-section-sous { text-align: center; color: var(--muted); font-size: 1.1rem;
  margin: .7rem auto 0; max-width: 34rem; }
.v-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: 2.6rem; }
.v-step-c { background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem;
  padding: 2rem 1.6rem; position: relative; box-shadow: 6px 6px 0 var(--ink); }
.v-step-c .num { position: absolute; top: -1.2rem; left: 1.6rem; width: 2.6rem;
  height: 2.6rem; border-radius: 50%; background: var(--sco);
  border: 3px solid var(--ink); display: grid; place-items: center;
  font-weight: 900; font-size: 1.2rem; }
.v-step-c .ico { font-size: 2.2rem; }
.v-step-c h3 { font-size: 1.25rem; font-weight: 900; margin: .8rem 0 .4rem; }
/* icône illustrée maison (remplace les émoji) — hérite de --ac selon l'univers.
   Posée dans une pastille douce pour la présence visuelle. */
.v-ico { width: 2.6rem; height: 2.6rem; display: block; --ac: var(--sco); }
.v-step-c .v-ico, .v-carte .v-ico { width: 3.4rem; height: 3.4rem;
  padding: .55rem; border-radius: .9rem;
  background: color-mix(in srgb, var(--sco) 12%, transparent);
  box-sizing: content-box; }
.v-step-c .v-ico { margin-bottom: .5rem; }
.v-step-c p { color: var(--muted); }
@media (max-width: 760px) { .v-steps { grid-template-columns: 1fr; } }

/* ---- bénéfices / rôles (cartes stickers) ---- */
.v-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: 2.4rem; }
.v-carte { background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem;
  padding: 1.8rem 1.6rem; box-shadow: 6px 6px 0 #0B122022;
  display: flex; flex-direction: column;
  transition: transform .14s, box-shadow .14s; }
.v-carte:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.v-carte .ico { font-size: 2rem; }
.v-carte .v-ico { margin-bottom: .2rem; }
.v-carte h3 { font-size: 1.2rem; font-weight: 900; margin: .5rem 0 .3rem; }
.v-carte p { color: var(--muted); flex: 1; }
.v-carte-cta { margin-top: 1rem; font-weight: 900; color: var(--sco-d);
  border-bottom: 3px solid var(--sco); align-self: flex-start; padding-bottom: .1rem; }
@media (max-width: 760px) { .v-cartes { grid-template-columns: 1fr; } }

/* ---- section « engagements » épurée (sans cartes, illustrations riches) ---- */
.v-eyebrow-centre { display: block; text-align: center; font-size: .78rem;
  font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sco-d); margin-bottom: .6rem; }
.v-conf-titre { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 900;
  text-align: center; letter-spacing: -.02em; color: var(--ink); }
.v-conf-titre .grad { color: var(--sco-d); }
.v-engagements { max-width: 82rem; margin: 2.6rem auto 0; padding: 0 2rem;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.6rem; }
.v-eng { text-align: center; min-width: 0; }
.v-eng-il { width: 6.5rem; height: 6.5rem; margin: 0 auto .6rem; display: block;
  object-fit: contain; }
.v-eng h3 { font-size: 1rem; font-weight: 900; color: var(--ink);
  margin-bottom: .35rem; }
.v-eng p { font-size: .82rem; line-height: 1.5; color: var(--muted); }
/* la grille reste sur une rangée le plus longtemps possible, puis se replie
   proprement (3, puis 2) — jamais une seule colonne empilée à gauche */
@media (max-width: 1000px) { .v-engagements {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.4rem; } }
@media (max-width: 560px) { .v-engagements {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; } }

/* ---- témoignages ---- */
.v-temo { padding: 4.5rem 2rem; background: var(--cream2); }
.v-temo-in { max-width: 82rem; margin: 0 auto; }
.v-temo-note { text-align: center; font-size: .85rem; color: #b06a00;
  background: #ffedcc; border: 2px dashed #e0a94a; border-radius: .8rem;
  padding: .6rem 1rem; max-width: 42rem; margin: 1rem auto 0; font-weight: 700; }
.v-tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  margin-top: 2rem; }
.v-tcard { background: #fff; border: 3px solid var(--ink); border-radius: 1.4rem;
  padding: 1.8rem; box-shadow: 6px 6px 0 #0B122022; }
.v-tcard .stars { color: #ffb700; font-size: 1.1rem; }
.v-tcard p { font-size: 1.05rem; font-weight: 500; margin: .6rem 0 1rem; }
.v-tcard .who { display: flex; align-items: center; gap: .7rem; font-weight: 800; }
.v-tcard .av { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--sco); font-weight: 900; }
.v-tcard .who small { display: block; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .v-tcards { grid-template-columns: 1fr; } }

/* ---- guide de choix (details natif) ---- */
.v-guide { max-width: 44rem; margin: 2rem auto 0; }
.v-guide summary { cursor: pointer; font-weight: 800; text-align: center;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  gap: .5rem; }
.v-guide-corps { background: #fff; border: 3px solid var(--ink);
  border-radius: 1.2rem; padding: 1.2rem 1.4rem; margin-top: .8rem;
  box-shadow: 4px 4px 0 #0B122022; }
.v-guide-corps ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.v-guide-corps a { color: var(--sco-d); font-weight: 800; }

/* ---- CTA final ---- */
.v-final { padding: 5rem 2rem; text-align: center; background: var(--ink);
  color: var(--cream); }
.v-final h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900;
  letter-spacing: -.03em; text-wrap: balance; }
.v-final p { color: #c9cede; margin: .9rem auto 2rem; max-width: 32rem;
  font-size: 1.2rem; }
.v-final .v-btn-sco:hover { box-shadow: 4px 4px 0 var(--cream); }

/* ---- pied ---- */
.v-pied { padding: 2.5rem 2rem; text-align: center; color: var(--muted);
  font-size: .88rem; background: var(--ink); border-top: 1px solid #ffffff1a;
  line-height: 1.9; }
.v-pied strong { color: var(--cream); }
.v-pied a { color: var(--sco); font-weight: 700; }

/* ---- apparition au scroll (sûreté : masqué SEULEMENT si <html.js>) ---- */
html.js .rev { opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .rev.vu { opacity: 1; transform: none; }
.rev-d1 { transition-delay: .08s; } .rev-d2 { transition-delay: .16s; }
.rev-d3 { transition-delay: .24s; } .rev-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v-blob, .v-prod, .v-pen, .v-ink, .v-star, .v-cap, .v-tassel { animation: none; }
  .v-cap { opacity: 1; } .v-ink { stroke-dashoffset: 0; }
  .rev { opacity: 1; transform: none; transition: none; }
  .v-btn, .v-carte, .v-half .shot { transition: none; }
  /* démo produit : on fige sur la scène 1 (l'exercice), tout visible, immobile */
  .v-sc, .v-sq, .v-ans::after, .v-fb, .v-ai-txt span, .v-choice,
  .v-bar i, .v-reco, .v-pstep, .v-pbanner { animation: none !important; }
  .v-sc-1 { opacity: 1; transform: none; }
  .v-sc-2, .v-sc-3, .v-sc-4 { display: none; }
  .v-sc-1 .v-sq { opacity: 1; transform: none; }
  .v-ans::after { content: "3/4"; }
  .v-fb { opacity: 1; transform: none; }
}