/* Scènes animées (calques + parallaxe) : partagées par la page d'accueil et les pages d'offres.
   Préfixe sc- pour ne rien mélanger avec le reste du site. */
/* ---------- Offres : scènes animées construites à partir de calques (images/scenes) ----------
   Préfixe sc- pour ne rien mélanger avec le reste du site. */
.sc-scene, .sc-audit { position: absolute; inset: 0; overflow: hidden; }
.sc-plateau { position: absolute; inset: 0; transform: scale(var(--zoom, 1.045)); }
/* Inclinaison 3D de toute la scène avec la souris (--incl en degrés, 0 = aucune) : un changement de point de vue,
   sans que les objets posés au sol glissent les uns sur les autres */
.sc-scene[style*="--incl"] .sc-plateau { transform: perspective(1500px) rotateY(calc(var(--mx, 0) * var(--incl, 0) * 1deg)) rotateX(calc(var(--my, 0) * var(--incl, 0) * -.6deg)) scale(var(--zoom, 1.045)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sc-cq, .sc-an, .sc-bo { position: absolute; inset: 0; }
/* parallaxe : chaque calque se décale selon sa profondeur --p, multipliée par l'intensité --amp de la scène */
.sc-cq { transform: translate3d(calc(var(--mx, 0) * var(--p, 0) * var(--amp, 1) * 1%), calc(var(--my, 0) * var(--p, 0) * var(--amp, 1) * 1.6% + var(--sy, 0) * var(--p, 0) * 1.5%), 0); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sc-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; }
.sc-reflet { filter: brightness(2.1) saturate(.6); mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%); mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: sc-balaye var(--duree, 6s) cubic-bezier(.45,0,.2,1) var(--dr, 0s) infinite; }
@keyframes sc-balaye { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 55%, 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.sc-lueur { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(46,211,160,.75), rgba(46,211,160,.18) 55%, transparent); }
.sc-scene:not(.sc-vu) * { animation-play-state: paused !important; }
.sc-scene:not(.sc-vu) .sc-entree { opacity: 0; }

/* Agents IA : les modules s'emboîtent puis s'allument */
.sc-vu .sc-assemble { animation: sc-assemble 1.5s cubic-bezier(.2,.85,.25,1) var(--d) both; }
@keyframes sc-assemble { 0% { transform: translateX(var(--de)); opacity: 0; } 35% { opacity: 1; } 82% { transform: translateX(calc(var(--de) * -0.025)); } 100% { transform: none; opacity: 1; } }
.sc-mod-lueur { left: 58%; top: 26%; width: 22%; height: 52%; opacity: 0; }
.sc-mod-sol { left: 56%; top: 74%; width: 34%; height: 22%; opacity: 0; }
.sc-vu .sc-mod-lueur, .sc-vu .sc-mod-sol { animation: sc-allume .9s steps(1) 2.1s both, sc-respire 3.4s ease-in-out 3s infinite; }
@keyframes sc-allume { 0% { opacity: 0; } 20% { opacity: .7; } 35% { opacity: .1; } 55% { opacity: .9; } 70% { opacity: .35; } 100% { opacity: .8; } }
@keyframes sc-respire { 0%, 100% { opacity: .8; } 50% { opacity: .45; } }

/* Pack commercial : flux continu de cartes vers le connecteur */
.sc-carte { animation: sc-convoi 4.2s linear var(--d) infinite; }
@keyframes sc-convoi { 0% { transform: translate(calc(var(--dx) * -0.55), calc(var(--dy) * -0.55)); opacity: 0; } 14%, 78% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.sc-liaison-base { opacity: .45; }
.sc-impulsion { filter: brightness(1.6); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-size: 40% 100%; mask-size: 40% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: sc-impulsion 2.6s cubic-bezier(.5,0,.6,1) infinite; }
@keyframes sc-impulsion { 0% { -webkit-mask-position: 40% 0; mask-position: 40% 0; opacity: 0; } 10% { opacity: 1; } 70% { -webkit-mask-position: 140% 0; mask-position: 140% 0; opacity: 1; } 100% { -webkit-mask-position: 140% 0; mask-position: 140% 0; opacity: 0; } }
.sc-fiche { animation: sc-flotte 2.6s ease-in-out infinite; }
.sc-fiche img { animation: sc-recoit 2.6s ease-out infinite; }
@keyframes sc-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7%); } }
@keyframes sc-recoit { 0%, 62%, 100% { filter: none; } 72% { filter: brightness(1.28) drop-shadow(0 0 18px rgba(46,211,160,.55)); } }
.sc-flux-lueur { left: 50%; top: 30%; width: 20%; height: 36%; animation: sc-respire 2.6s ease-in-out infinite; }

/* Formation : les marches se posent une à une */
.sc-vu .sc-pose { animation: sc-pose .9s cubic-bezier(.3,1.35,.5,1) var(--d) both; }
@keyframes sc-pose { 0% { transform: translateY(-16%); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.sc-vu .sc-arrive { animation: sc-arrive 1.3s cubic-bezier(.2,.8,.25,1) var(--d) both; }
@keyframes sc-arrive { 0% { transform: translate(var(--ax), var(--ay)); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.sc-tape { animation: sc-tape 3.2s ease-in-out 3s infinite; }
@keyframes sc-tape { 0%, 78%, 100% { transform: none; } 84% { transform: translate(.4%, 1%); } 90% { transform: none; } }
.sc-eclat { animation: sc-eclat 3.2s ease-out 3s infinite; }
@keyframes sc-eclat { 0%, 82%, 100% { filter: none; } 86% { filter: brightness(1.35); } }

/* Assistant privé : la lumière traverse le prisme */
.sc-vu .sc-revele { animation: sc-revele 2.2s cubic-bezier(.4,0,.2,1) var(--d) both; }
@keyframes sc-revele { 0% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
.sc-revele { -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 55%); mask-image: linear-gradient(90deg, #000 45%, transparent 55%); -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
.sc-courant { filter: brightness(1.7); mix-blend-mode: screen;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 6%, #000 11%, transparent 16%); mask-image: repeating-linear-gradient(90deg, transparent 0 6%, #000 11%, transparent 16%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%; animation: sc-courant 5s linear infinite; }
@keyframes sc-courant { from { -webkit-mask-position: 0 0; mask-position: 0 0; } to { -webkit-mask-position: -100% 0; mask-position: -100% 0; } }
.sc-derive { animation: sc-derive 8s ease-in-out infinite; }
@keyframes sc-derive { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1%); } }
.sc-vu .sc-monte { animation: sc-monte 1.6s cubic-bezier(.2,.8,.25,1) var(--d) both; }
@keyframes sc-monte { 0% { transform: translateY(5%) scale(.98); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Création de site : le verre coulisse de devant l'ouverture, la lumière monte, puis déborde sur le seuil */
.sc-vu .sc-coulisse { animation: sc-coulisse 2.4s cubic-bezier(.5,0,.2,1) 0s both; }
@keyframes sc-coulisse { from { transform: translateX(10%); } to { transform: none; } }
.sc-scene:not(.sc-vu) .sc-coulisse { visibility: hidden; }
.sc-vu .sc-lumiere-monte { animation: sc-lumiere-monte 2.4s cubic-bezier(.5,0,.2,1) 0s both; }
@keyframes sc-lumiere-monte { from { filter: brightness(.12); } to { filter: brightness(1); } }
@keyframes sc-lueur-arrive { from { opacity: 0; } to { opacity: .8; } }
.sc-portail-lueur { left: 49%; top: 22%; width: 20%; height: 48%; opacity: 0; }
.sc-vu .sc-portail-lueur { animation: sc-lueur-arrive 1.6s ease-out .7s both, sc-respire 3.4s ease-in-out 2.3s infinite; }
.sc-portail-sol { left: 36%; top: 62%; width: 36%; height: 30%; opacity: 0; }
.sc-vu .sc-portail-sol { animation: sc-lueur-arrive 1.4s ease-out 1.9s both, sc-respire 3.4s ease-in-out 3.3s infinite; }

/* SEO : les blocs descendent du haut, hors du cadre, et ralentissent jusqu'à leur place (sans rebond ni fondu) */
.sc-vu .sc-descend { animation: sc-descend 1.8s cubic-bezier(.16,1,.3,1) var(--d, 0s) both; }
@keyframes sc-descend { from { transform: translateY(-115%); } to { transform: none; } }

/* SEO : lueur sous le verre arrivé en tête */
.sc-podium-lueur { left: 36%; top: 60%; width: 28%; height: 24%; opacity: 0; }
.sc-vu .sc-podium-lueur { animation: sc-allume .9s steps(1) 2.3s both, sc-respire 3.4s ease-in-out 3.2s infinite; }

/* Visibilité dans les IA : le miroir et son reflet */
.sc-miroir { position: absolute; aspect-ratio: 742 / 1129; }
.sc-miroir-zone { position: absolute; inset: 0; clip-path: polygon(2.56% 9.65%, 93.53% 1.95%, 93.53% 98.05%, 2.70% 92.65%); }
.sc-scene .sc-reflet-mobile { inset: auto; left: 13.48%; top: 10.63%; width: 68.73%; height: 80.16%;
  transform: translate(calc(var(--mx, 0) * var(--amp, 1) * -1%), calc(var(--my, 0) * var(--amp, 1) * -.6%)); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.sc-vu .sc-miroir-zone { animation: sc-reflet-apparait 1.8s cubic-bezier(.3,.6,.2,1) 0s both; }
@keyframes sc-reflet-apparait { from { opacity: 0; filter: brightness(.35); } to { opacity: 1; filter: none; } }
.sc-scene:not(.sc-vu) .sc-miroir-zone { opacity: 0; }
.sc-miroir-sol { left: 48%; top: 72%; width: 30%; height: 18%; opacity: 0; }
.sc-vu .sc-miroir-sol { animation: sc-lueur-arrive 1.2s ease-out .6s both, sc-respire 3.4s ease-in-out 1.8s infinite; }

/* Audit : tuiles et lentille (scène dessinée à 1586 × 992, mise à l'échelle par --k) */
.sc-cadre { position: absolute; left: 0; top: 0; width: 1586px; height: 992px; transform: scale(var(--k, .3)); transform-origin: 0 0; }
.sc-monde { position: absolute; left: 0; top: 0; width: 1586px; height: 992px; transform-origin: 0 0; }
.sc-monde > img { position: absolute; left: 0; top: 0; width: 1586px; height: 992px; transform-origin: 50% 50%; }
.sc-tuile { position: absolute; will-change: transform; transition: filter .35s ease; }
.sc-tuile img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sc-tuile.sc-examine { filter: brightness(1.22); }
.sc-ombre { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,.45) 55%, transparent); }
.sc-verte { opacity: 0; transition: opacity .15s ease; }
.sc-allume .sc-verte { opacity: 1; }
.sc-loupe { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; }
.sc-lentille { position: absolute; left: 0; top: 0; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.sc-ombre-lentille { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.06) 55%, rgba(0,0,0,.55) 78%, transparent); }
.sc-lueur-audit { position: absolute; left: 443px; top: 428px; width: 700px; height: 440px; border-radius: 50%; mix-blend-mode: screen; opacity: 0; transition: opacity .8s ease; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46,211,160,.5), rgba(46,211,160,.12) 55%, transparent); }
.sc-allume .sc-lueur-audit { opacity: 1; transition-duration: .3s; }

/* Sur téléphone (pas de souris) : une dérive lente remplace la parallaxe */
@property --mx { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --my { syntax: "<number>"; inherits: true; initial-value: 0; }
/* Sur écran tactile (pas de souris), c'est le défilement de la page qui fait bouger les calques (--sy, voir scenes.js) */

/* « Réduire les animations » : aucun mouvement ; les objets sont déjà en place (un objet matériel ne surgit jamais
   en fondu) ; seules les lumières et les reflets s'allument */
@keyframes sc-fondu { from { opacity: 0; } }
@keyframes sc-fondu-lueur { from { opacity: 0; } to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .sc-scene *, .sc-scene { animation: none !important; transition: none !important; }
  .sc-scene .sc-cq, .sc-scene .sc-reflet-mobile { transform: none !important; }
  .sc-scene .sc-plateau { transform: scale(var(--zoom, 1.045)) !important; }
  .sc-scene:not(.sc-vu) .sc-entree, .sc-scene:not(.sc-vu) .sc-coulisse { opacity: 1; visibility: visible; }
  .sc-vu .sc-miroir-zone { animation: sc-fondu 1s ease .2s both !important; }
  .sc-vu .sc-lumiere-monte { animation: sc-lumiere-monte 2s ease .3s both !important; }
  .sc-vu .sc-lueur { animation: sc-fondu-lueur 1.6s ease 1s both !important; }
  .sc-impulsion, .sc-courant, .sc-reflet { display: none; }
}