/* Weslia · hero 3D (prototype, deuxième passe). Se charge après story.css et ne remplace que la scène. */

/* Fond : une table d'atelier. Un mur sombre, un plan légèrement plus clair, une nappe de lumière sous le socle. */
.hero-world{background:
  radial-gradient(ellipse 34% 13% at 69% 83%,#2A5F7E55 0%,#1A455E33 45%,#0B1B2600 100%),
  linear-gradient(180deg,#07131C 0%,#0A1A25 46%,#0E2331 66%,#0C1E2B 100%)}
.hero-world::before,.hero-world::after{content:none}

/* Scène : l'image d'attente fixe la hauteur, le canevas se pose dessus sans déplacer la page.
   La marge gauche laisse aux trois cartes un axe commun, à cheval sur le bord des plateaux. */
.home-page{--scene-ratio:1.3223}
.artboard{aspect-ratio:1600/1210;--scene-ml:.085;--scene-mr:.02;--scene-mt:.045;--scene-mb:.07}
.scene-poster,.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-poster,.scene-canvas{-webkit-mask-image:linear-gradient(to bottom,#000 92%,transparent 100%),linear-gradient(to right,#000 96%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 92%,transparent 100%),linear-gradient(to right,#000 96%,transparent 100%);mask-composite:intersect}
.scene-poster{object-fit:contain;transition:opacity .6s ease}
.scene-canvas{opacity:0;transition:opacity .6s ease}
.hero-figure[data-scene="3d"] .scene-canvas{opacity:1}
.hero-figure[data-scene="3d"] .scene-poster{opacity:0}

/* Étiquette du site, posée au-dessus de l'angle arrière de la photographie. */
.scene-tag{position:absolute;left:20.07%;top:4.5%;transform:translateY(calc(-100% - 9px));font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:#9DB6C4;white-space:nowrap;padding-left:14px}
.scene-tag::before{content:'';position:absolute;left:0;top:50%;width:8px;height:1px;background:currentColor;opacity:.7}

/* Cartes : du texte HTML à plat. Même largeur, même bord gauche ; chacune tient au bord de son plateau. */
.trace3d{position:absolute;transform:translate(-27%,-50%);display:flex;align-items:center;gap:11px;width:302px;padding:8px 14px 8px 12px;box-sizing:border-box;
  background:linear-gradient(120deg,#0C2332D9,#0A1E2BCC);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #BFE3F226;border-radius:9px;
  box-shadow:0 8px 20px #02090E59,inset 0 1px 0 #FFFFFF10;transition:border-color .6s,background .6s,box-shadow .6s}
.trace3d .trace-index{font-size:12px;line-height:1;flex-shrink:0;padding-right:11px;color:var(--glace);border-right:1px solid #CFE6F230;font-variant-numeric:tabular-nums}
.trace3d>div{min-width:0}
.trace3d .trace-method{display:block;font-size:12.5px;line-height:1.25;color:#B9CEDA}
.trace3d strong{display:block;font-size:16px;line-height:1.3;font-weight:500;color:#F2F6F8;white-space:nowrap;margin-top:1px}
.trace3d small{display:block;font-size:12.5px;line-height:1.35;color:#AFC2CE;white-space:nowrap;margin-top:1px}
.t3-source{left:9.64%;top:31.25%}
.t3-analysis{left:9.64%;top:56.29%}
.t3-decision{left:9.64%;top:83.19%}
.t3-decision .trace-index{color:var(--accent)}
.trace3d.is-active{border-color:#8FD3EA8C;background:linear-gradient(120deg,#123750FA,#0D283AF5);box-shadow:0 14px 30px #02090E80,0 0 0 3px #8FD3EA14,inset 0 1px 0 #FFFFFF1A}
.t3-decision.is-active{border-color:#E8743AA6;background:linear-gradient(120deg,#272F36FA,#132A38F5);box-shadow:0 14px 30px #02090E80,0 0 0 3px #E8743A17,inset 0 1px 0 #FFFFFF1A}
.mobile-evidence li{transition:background .6s}
.mobile-evidence li.is-active{background:linear-gradient(90deg,#8FD3EA12,transparent)}
.mobile-evidence li[data-stage="decision"].is-active{background:linear-gradient(90deg,#E8743A14,transparent)}
.mobile-evidence li[data-stage="decision"] .mobile-index{color:var(--accent)}

/* Grand écran : le titre reprend la main, la maquette tient dans la hauteur disponible. */
@media(min-width:1201px){
  .home-page{--home-title-max:62px}
  .home-page .hero-figure{max-width:min(1280px,max(540px,calc((100dvh - var(--home-header) - var(--home-footer) - var(--home-spacing) - 14px)*var(--scene-ratio))))}
  .hero-layout{grid-template-columns:minmax(360px,470px) minmax(0,1fr);gap:clamp(16px,1.6vw,36px)}
  .home-page .scene-foot{position:absolute;left:0;right:0;bottom:0;margin:0 1% 0 2%}
}
@media(min-width:1201px) and (max-width:1250px){.home-page{--home-title-max:56px}}
@media(min-width:1700px){.home-page{--home-title-max:72px}.hero-layout{grid-template-columns:minmax(440px,530px) minmax(0,1fr)}}
@media(min-width:1201px) and (max-width:1400px),(min-width:1201px) and (max-height:700px){
  .trace3d{width:276px;padding:6px 12px 6px 10px;gap:9px}.trace3d strong{font-size:15px}.trace3d small,.trace3d .trace-method{font-size:12px}.trace3d .trace-index{padding-right:9px}
}
/* Tablette et mobile : la maquette seule ; les trois étapes se lisent dans la liste placée dessous. */
@media(max-width:1200px){
  .artboard{aspect-ratio:1200/987;--scene-ml:.03;--scene-mr:.03;--scene-mt:.075;--scene-mb:.07}
  .scene-tag{left:15.14%;top:7.57%;font-size:9.5px}
}
@media(max-width:720px){
  .hero-world{background:radial-gradient(ellipse 80% 9% at 50% 61%,#2A5F7E44 0%,#0B1B2600 100%),linear-gradient(180deg,#07131C 0%,#0A1A25 40%,#0D2130 100%)}
  .artboard{width:100%;margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .scene-poster,.scene-canvas,.trace3d,.mobile-evidence li{transition:none}
}
.animation-toggle[hidden]{display:none}
/* v126.14 : au repos, les cartes s'effacent derrière la maquette ; seule la carte de l'étape en cours est pleine. */
.trace3d{background:linear-gradient(120deg,#0C2332B8,#0A1E2BA6);border-color:#BFE3F21F;box-shadow:0 6px 16px #02090E40,inset 0 1px 0 #FFFFFF0D}
.trace3d.is-active{border-color:#8FD3EA8C;background:linear-gradient(120deg,#123750FA,#0D283AF5);box-shadow:0 14px 30px #02090E80,0 0 0 3px #8FD3EA14,inset 0 1px 0 #FFFFFF1A}
.t3-decision.is-active{border-color:#E8743AA6;background:linear-gradient(120deg,#272F36FA,#132A38F5);box-shadow:0 14px 30px #02090E80,0 0 0 3px #E8743A17,inset 0 1px 0 #FFFFFF1A}
/* v126.17 : la mention « Exemple fictif » se lit mieux (elle porte la crédibilité de la page). */
@media(min-width:1201px){.home-page .scene-foot{font-size:12.5px;color:#BCCFDA}}