/* ================= Le sas de l'écosystème (accueil, 14/11/2026, demande Axel, référence « Cosmoq ») =================
   Scène collante : la page passe en nuit (--n), une aurore OpterIA se lève (--a), le titre apparaît (--t), l'appli Bobby monte de l'horizon (--w),
   puis la page revient au jour. Valeurs de 0 à 1 posées par sas.js. Aucune ombre portée : la fenêtre n'a qu'un filet. */
.sas { position: relative; background: var(--paper); --x: 0; --n: 0; --a: 0; --t: 0; --w: 0; --o: 1; }
.sas__piste { position: relative; height: 430vh; }
.sas__scene { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }

/* --- la nuit, l'aurore et l'horizon --- */
.sas__nuit { position: absolute; inset: 0; z-index: -2; background: #07070a;   /* entrée : un dôme de nuit qui monte de l'horizon (--n) ; jamais de fondu gris */
  clip-path: ellipse(calc(var(--n) * 135%) calc(var(--n) * 175%) at 50% 100%); }
.sas__jour { position: absolute; inset: 0; z-index: -1; background: var(--paper); pointer-events: none;   /* sortie : le jour remonte par le bas, derrière la fenêtre (--x) */
  clip-path: inset(calc((1 - var(--x)) * 100%) 0 0 0 round 56px 56px 0 0); }
.sas__nuit i { position: absolute; display: block; pointer-events: none; }
.sas__etoiles { inset: 0; opacity: calc(.75 * var(--a));
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 8%, rgba(255,255,255,.7) 50%, transparent 51%), radial-gradient(1.4px 1.4px at 41% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1px 1px at 73% 22%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 88% 9%, rgba(255,255,255,.8) 50%, transparent 51%), radial-gradient(1px 1px at 93% 31%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 36%, rgba(255,255,255,.6) 50%, transparent 51%), radial-gradient(1px 1px at 66% 34%, rgba(255,255,255,.5) 50%, transparent 51%), radial-gradient(1px 1px at 34% 40%, rgba(255,255,255,.5) 50%, transparent 51%); }
.sas__aurore { left: 50%; bottom: 30vh; width: 150vw; height: 110vh; transform: translate(-50%, calc((1 - var(--a)) * 45vh)); opacity: var(--a); filter: blur(28px);
  background:
    radial-gradient(ellipse 22% 60% at 50% 100%, rgba(255,255,255,.95), rgba(255,236,224,.6) 30%, transparent 70%),
    radial-gradient(ellipse 26% 70% at 36% 100%, rgba(251,77,23,.95), rgba(251,77,23,.35) 45%, transparent 75%),
    radial-gradient(ellipse 22% 60% at 22% 100%, rgba(255,154,112,.75), transparent 72%),
    radial-gradient(ellipse 26% 72% at 64% 100%, rgba(150,128,255,.85), rgba(150,128,255,.3) 48%, transparent 76%),
    radial-gradient(ellipse 20% 55% at 79% 100%, rgba(255,186,150,.55), transparent 72%); }
.sas__rayons { left: 50%; bottom: 30vh; width: 120vw; height: 80vh; transform: translate(-50%, calc((1 - var(--a)) * 45vh)); opacity: calc(.55 * var(--a)); filter: blur(5px); mix-blend-mode: screen;
  background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,240,230,.5) 22px 24px, transparent 24px 41px, rgba(255,220,200,.32) 41px 42px);
  -webkit-mask: radial-gradient(ellipse 45% 100% at 50% 100%, #000 10%, transparent 80%); mask: radial-gradient(ellipse 45% 100% at 50% 100%, #000 10%, transparent 80%);
  animation: sas-rayons 14s linear infinite; }
@keyframes sas-rayons { to { background-position: 130px 0; } }
.sas__planete { left: 50%; top: calc(100vh - 30vh); width: 240vw; height: 240vw; border-radius: 50%; background: #07070a;   /* sans filet : la ligne d'horizon courbe est retirée (demande Axel 15/11/2026) */
  transform: translate(-50%, calc((1 - var(--a)) * 45vh)); }

/* --- le titre --- */
.sas__tete { position: absolute; left: 50%; top: 12vh; width: min(880px, 90vw); text-align: center; color: #fff;
  opacity: calc(var(--t) * var(--o)); transform: translate(-50%, calc((1 - var(--t)) * 28px + (1 - var(--o)) * -40px)); filter: blur(calc((1 - var(--t)) * 10px)); }
.sas__meta { font: 500 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,214,196,.85); margin: 0 0 18px; }
.sas__titre { font: 600 clamp(40px, 5.6vw, 84px)/1.02 var(--font); letter-spacing: -.035em; margin: 0; color: #fff; }
.sas__titre span { color: rgba(255,255,255,.55); }
.sas__texte { font: 400 clamp(16px, 1.25vw, 19px)/1.5 var(--font); color: rgba(255,255,255,.72); max-width: 600px; margin: 20px auto 0; }

/* --- l'appli qui monte de l'horizon --- */
.sas__cadre { position: absolute; left: 50%; bottom: 5vh; width: min(1180px, 88vw); height: min(700px, 76vh); perspective: 1600px; transform: translateX(-50%); }
/* --- l'appli : copie de l'accueil de la maquette Bobby (15/11/2026, demande Axel), données fictives d'un organisme de formation.
   Barre latérale, en-tête, Bobby, la question, la saisie dans le ruban des outils qui tourne et les ondes irisées, « Vos projets » en dossiers.
   Rien n'est cliquable : tout bouge seul. Styles repris de globals.css de la maquette (ruban, ondes, saisie, dossiers .dv/.dm). Aucune ombre. */
.sas-app { --courbe-sortie: cubic-bezier(.22,1,.36,1); --courbe-ressort: cubic-bezier(.34,1.3,.64,1); --duree-moyen: 420ms;
  position: absolute; inset: 0; display: flex; background: #fff; color: #1a1813; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; overflow: hidden; font-family: "Switzer", var(--font); -webkit-font-smoothing: antialiased;
  transform-origin: 50% 0; transform: translate3d(0, calc((1 - var(--w)) * 58vh), 0) rotateX(calc((1 - var(--w)) * 20deg)) scale(calc(.88 + .12 * var(--w))); opacity: min(1, calc(var(--w) * 2.2)); will-change: transform, opacity; }
.sas-app svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sas-app__barre { flex: 0 0 68px; display: flex; flex-direction: column; align-items: center; margin: 14px 0 14px 14px; padding: 14px 0; border: 1px solid rgba(0,0,0,.08); border-radius: 24px; background: #fff; }
.sas-app__marque { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #FB4D17; color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.sas-app__marque svg { width: 26px; height: 26px; }
.sas-app .sas-app__marque svg { stroke-width: 6.5; }
.sas-app .sas-app__mini { stroke-width: 7; }
.sas-app .sas-app__bobby svg { stroke-width: 3.1; }
.sas-app .sas-app__entreprise svg, .sas-app .sas-app__chevron { stroke-width: 2; }
.sas-app__rail { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sas-app__rail i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #66645f; }
.sas-app__rail i.is-actif { background: #1A1813; color: #fff; }
.sas-app__rail i.is-actif::after { content: ""; position: absolute; left: -13px; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: #FB4D17; }
.sas-app__rail i svg { width: 20px; height: 20px; }
.sas-app__rail i .sas-app__partage { width: 19px; height: 19px; }
.sas-app__rail i .sas-app__chevron { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; stroke-width: 2; }
.sas-app__rail b { flex: none; width: 28px; height: 1px; background: rgba(0,0,0,.08); margin: 4px 0; }
.sas-app__rail > span { flex: 1; min-height: 16px; }
.sas-app__corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sas-app__haut { flex: none; display: flex; align-items: center; gap: 14px; height: 72px; padding: 4px 28px 0; }
.sas-app__logo { display: block; height: 22px; width: auto; flex: none; }
.sas-app__entreprise { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 4px 12px 4px 4px; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: #fff; font-size: 14px; line-height: 1; color: #1a1813; white-space: nowrap; min-width: 0; }
.sas-app__entreprise i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f2f1ee; font: 600 11px/1 "Switzer", var(--font); font-style: normal; color: #66645f; }
.sas-app__entreprise span { overflow: hidden; text-overflow: ellipsis; }
.sas-app__entreprise svg { flex: none; width: 14px; height: 14px; color: #66645f; }
.sas-app__droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sas-app__rond { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #fff; display: grid; place-items: center; color: #1a1813; }
.sas-app__rond svg { width: 18px; height: 18px; }
.sas-app__cloche::after { content: ""; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #FB4D17; box-shadow: 0 0 0 1.5px #fff; }
.sas-app__avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #1A1813; color: #fff; display: grid; place-items: center; font: 500 13px/1 "Switzer", var(--font); }
/* l'interrupteur jour / nuit de la maquette (= celui d'opteria.fr), figé sur le jour : piste creusée, bouton de verre, soleil en points, liseré doré, halo ambré */
.sas-bascule { position: relative; flex: none; width: 80px; height: 44px; border-radius: 15px; background: #ebe9e4 linear-gradient(180deg, rgba(0,0,0,.035), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05), inset 0 -1px 0 rgba(255,255,255,.9); }
.sas-bascule::before { content: ""; position: absolute; left: 58px; top: 50%; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,178,36,.45), rgba(255,190,70,.16) 50%, rgba(255,200,90,0) 85%); }
.sas-bascule__rond { position: absolute; z-index: 1; left: 40px; top: 4px; width: 36px; height: 36px; border-radius: 11px;
  background: #fcfaf5 linear-gradient(165deg, rgba(255,255,255,.7), rgba(255,255,255,0) 55%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9), inset -4px -7px 11px -4px rgba(255,170,30,.55); }
.sas-bascule__soleil { position: absolute; inset: 5px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='%231A1813'%3E%3Cpath d='M10.3 6.3h1.4v1.4h-1.4zM12.3 6.3h1.4v1.4h-1.4zM14.3 6.3h1.4v1.4h-1.4zM8.3 8.3h1.4v1.4h-1.4zM10.3 8.3h1.4v1.4h-1.4zM12.3 8.3h1.4v1.4h-1.4zM14.3 8.3h1.4v1.4h-1.4zM16.3 8.3h1.4v1.4h-1.4zM6.3 10.3h1.4v1.4h-1.4zM8.3 10.3h1.4v1.4h-1.4zM10.3 10.3h1.4v1.4h-1.4zM12.3 10.3h1.4v1.4h-1.4zM14.3 10.3h1.4v1.4h-1.4zM16.3 10.3h1.4v1.4h-1.4zM18.3 10.3h1.4v1.4h-1.4zM6.3 12.3h1.4v1.4h-1.4zM8.3 12.3h1.4v1.4h-1.4zM10.3 12.3h1.4v1.4h-1.4zM12.3 12.3h1.4v1.4h-1.4zM14.3 12.3h1.4v1.4h-1.4zM16.3 12.3h1.4v1.4h-1.4zM18.3 12.3h1.4v1.4h-1.4zM6.3 14.3h1.4v1.4h-1.4zM8.3 14.3h1.4v1.4h-1.4zM10.3 14.3h1.4v1.4h-1.4zM12.3 14.3h1.4v1.4h-1.4zM14.3 14.3h1.4v1.4h-1.4zM16.3 14.3h1.4v1.4h-1.4zM18.3 14.3h1.4v1.4h-1.4zM8.3 16.3h1.4v1.4h-1.4zM10.3 16.3h1.4v1.4h-1.4zM12.3 16.3h1.4v1.4h-1.4zM14.3 16.3h1.4v1.4h-1.4zM16.3 16.3h1.4v1.4h-1.4zM10.3 18.3h1.4v1.4h-1.4zM12.3 18.3h1.4v1.4h-1.4zM14.3 18.3h1.4v1.4h-1.4zM12.3 2.3h1.4v1.4h-1.4zM12.3 22.3h1.4v1.4h-1.4zM2.3 12.3h1.4v1.4h-1.4zM22.3 12.3h1.4v1.4h-1.4z'/%3E%3Cpath d='M20.3 20.3h1.4v1.4h-1.4zM20.3 4.3h1.4v1.4h-1.4zM4.3 20.3h1.4v1.4h-1.4zM4.3 4.3h1.4v1.4h-1.4z' fill-opacity='0.8'/%3E%3Cpath d='M12.3 0.3h1.4v1.4h-1.4zM12.3 24.3h1.4v1.4h-1.4zM0.3 12.3h1.4v1.4h-1.4zM24.3 12.3h1.4v1.4h-1.4z' fill-opacity='0.55'/%3E%3C/svg%3E"); }
.sas-app .sas-bascule__lueur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #ffd23f; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 32 68; stroke-dashoffset: 10; filter: drop-shadow(0 0 1.5px #ffb000) drop-shadow(0 0 4px rgba(255,160,0,.75)); }

.sas-app__centre { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 34px; min-height: 0; }
.sas-app__bobby { flex: none; width: 64px; height: 60px; color: #1A1813; }
.sas-antenne { transform-origin: 61.5px 30px; animation: sas-antenne 3.2s ease-in-out infinite; }
@keyframes sas-antenne { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.sas-app__bobby svg { width: 100%; height: 100%; overflow: visible; }
.sas-oeil { transform-box: fill-box; transform-origin: 50% 50%; animation: sas-cligne 5.2s ease-in-out infinite; }
@keyframes sas-cligne { 0%, 92%, 100% { transform: none; } 95% { transform: scaleY(.15); } }
.sas-app__bonjour { font: 500 clamp(24px, 2.5vw, 36px)/1.1 "Switzer", var(--font); letter-spacing: -.025em; color: #1a1813; margin: 6px 0 12px; text-align: center; }

.sas-app__scene { position: relative; width: 100%; height: clamp(196px, 30vh, 250px); display: flex; align-items: center; justify-content: center; overflow-x: clip; }
.sas-ondes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.sas-ondes__a { animation: sas-ondes-a 11s ease-in-out infinite alternate; transform-origin: center; transform-box: view-box; }
.sas-ondes__b { animation: sas-ondes-b 14s ease-in-out infinite alternate; transform-origin: center; transform-box: view-box; }
@keyframes sas-ondes-a { from { transform: translateY(-6px) scaleY(.94); } to { transform: translateY(6px) scaleY(1.06); } }
@keyframes sas-ondes-b { from { transform: translateY(5px) scaleY(1.05); } to { transform: translateY(-5px) scaleY(.95); } }
.sas-ruban { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 980px); transform: translateX(-50%) rotate(-3deg); pointer-events: none; }
.sas-tuile { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 16px; offset-path: var(--chemin); offset-rotate: 0deg; offset-anchor: center;
  animation: sas-ruban-tour 70s linear infinite, sas-ruban-profondeur 70s linear infinite, sas-ruban-flotte 4.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -3.5s), calc(var(--i) * -3.5s), calc(var(--i) * -.9s); will-change: offset-distance, transform; }
.sas-tuile > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; border: 1px solid rgba(0,0,0,.08); background: #fff; }
.sas-tuile img { width: 28px; height: 28px; object-fit: contain; }
@keyframes sas-ruban-tour { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes sas-ruban-profondeur { 0%, 50%, 100% { transform: scale(.9); opacity: .9; } 25% { transform: scale(.72); opacity: .5; } 75% { transform: scale(1.08); opacity: 1; } }
@keyframes sas-ruban-flotte { from { translate: 0 -3px; } to { translate: 0 3px; } }

.sas-saisie { position: relative; z-index: 2; width: min(600px, 66%); padding: 8px; border-radius: 24px; border: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(248,248,248,.68) 100%); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); }
.sas-saisie__idees { display: flex; align-items: center; gap: 6px; padding: 4px 6px 6px; }
.sas-saisie__etincelle { color: #FB4D17; display: grid; } .sas-saisie__etincelle svg { width: 14px; height: 14px; stroke-width: 1.9; }
.sas-pilule { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.08); background: #fff; color: #1a1813; font: 400 12.5px/1 "Switzer", var(--font); white-space: nowrap; }
.sas-pilule svg { width: 15px; height: 15px; stroke-width: 1.7; color: #55534e; }
.sas-saisie__plus-idees { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #fff; display: grid; place-items: center; color: #55534e; }
.sas-saisie__plus-idees svg { width: 15px; height: 15px; }
.sas-saisie__zone { font: 400 16px/24px "Switzer", var(--font); color: #1a1813; min-height: 48px; margin: 0; padding: 8px 12px 0; }
.sas-app__curseur { display: inline-block; width: 1.5px; height: 1.05em; background: #FB4D17; vertical-align: -2px; margin-left: 2px; animation: sas-curseur 1s steps(1) infinite; }
@keyframes sas-curseur { 50% { opacity: 0; } }
.sas-saisie__pied { display: flex; align-items: center; gap: 8px; padding: 0 2px 2px; }
.sas-saisie__bouton { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); background: #fff; display: grid; place-items: center; color: #55534e; }
.sas-saisie__bouton svg { width: 17px; height: 17px; }
.sas-saisie__projet { height: 36px; padding: 0 12px; color: #3d3b37; }
.sas-saisie__projet svg:last-child { width: 12px; height: 12px; }
.sas-saisie__envoi { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.07); color: rgba(26,24,19,.35); display: grid; place-items: center; transition: background .35s var(--courbe-sortie), color .35s, transform .35s var(--courbe-ressort); }
.sas-saisie__envoi svg { width: 17px; height: 17px; stroke-width: 2.2; }
.sas-saisie.is-ecrit .sas-saisie__envoi { background: #FB4D17; color: #fff; }
.sas-saisie.is-envoi .sas-saisie__envoi { transform: scale(.88); }

.sas-projets { width: min(760px, 100%); margin-top: 4px; }
.sas-projets__tete { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 6px; font: 400 13px/1 "Switzer", var(--font); color: #66645f; }
.sas-projets__tete span:last-child { display: inline-flex; align-items: center; gap: 2px; }
.sas-projets__tete svg { width: 13px; height: 13px; }
.sas-projets__rang { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 10px; }
.sas-dossier { width: clamp(100px, 11vw, 134px); flex: none; opacity: 0; transform: translateY(14px); transition: opacity .6s var(--courbe-sortie), transform .7s var(--courbe-sortie); transition-delay: calc(var(--i) * 80ms + 250ms); }
.sas.is-visible .sas-dossier { opacity: 1; transform: none; }
.sas-app__chiffres { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; display: flex; justify-content: center; align-items: center; gap: 5px; font: 400 13.5px/1 "Switzer", var(--font); color: #66645f; }
.sas-app__chiffres svg { width: 14px; height: 14px; animation: sas-bas 2.4s ease-in-out infinite; }
@keyframes sas-bas { 50% { transform: translateY(2px); } }

/* dossiers : repris tels quels de la maquette (.dv / .dm), sans les états de clic ; « is-souleve » posé par sas.js fait le geste du survol */
.dv { --dv-filet: rgba(255,255,255,.7); --dv-poche: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.2) 100%); --dv-poche-filet: rgba(255,255,255,.78); --dv-poche-bas: rgba(0,0,0,.07);
  --dv-texte: #1a1813; --dv-texte-doux: rgba(26,24,19,.58); --dv-page: #fff; --dv-page-filet: rgba(0,0,0,.08); --dv-ligne: #e4e4e2; --dv-ligne-forte: #cfcdc8; --dv-nom: #55534e;
  position: relative; width: 100%; container-type: inline-size; aspect-ratio: 1 / .82; isolation: isolate; }
.dv--peche { --dv-dos: linear-gradient(150deg, #ffd9b0 0%, #ffab70 52%, #fb4d17 115%); }
.dv--bleu { --dv-dos: linear-gradient(150deg, #d6ecff 0%, #8ec4f2 52%, #4b8fe0 115%); }
.dv--vert { --dv-dos: linear-gradient(150deg, #daf4de 0%, #9edcab 52%, #4fb06a 115%); }
.dv--lilas { --dv-dos: linear-gradient(150deg, #efe4ff 0%, #c7acf2 52%, #8f6ade 115%); }
.dv--gris { --dv-dos: linear-gradient(150deg, #f4f4f3 0%, #d7d6d3 52%, #a9a7a2 115%); }
.dv__dos { position: absolute; inset: 11% 0 0 0; border-radius: 9cqw; background: var(--dv-dos); border-top: 1px solid var(--dv-filet); }
.dv__dos::before { content: ""; position: absolute; left: 0; top: -11cqw; width: 44%; height: 22cqw; border-radius: 8cqw 10cqw 0 0; background: var(--dv-dos); background-size: 228% 100%; border-top: 1px solid var(--dv-filet); }
.dv__docs { position: absolute; inset: 0; z-index: 1; }
.dv__doc { position: absolute; left: 13%; top: 15%; width: 74%; aspect-ratio: 4 / 3; transform-origin: 50% 90%; transition: transform var(--duree-moyen) var(--courbe-ressort); will-change: transform; }
.dv__doc:nth-child(1) { transform: translate(-6%, -7%) rotate(-5deg); }
.dv__doc:nth-child(2) { transform: translate(3%, -1%) rotate(3.5deg); }
.dv__doc:nth-child(3) { transform: translate(0, 5%) rotate(-1deg); }
.sas-dossier.is-souleve .dv__doc:nth-child(1) { transform: translate(9%, -40%) rotate(7deg); }
.sas-dossier.is-souleve .dv__doc:nth-child(2) { transform: translate(3%, -9%) rotate(4.5deg); transition-delay: 40ms; }
.sas-dossier.is-souleve .dv__doc:nth-child(3) { transform: translate(0, 2%) rotate(-1.5deg); transition-delay: 70ms; }
.dm { --dm-teinte: #9b9b9b; --dm-fond: color-mix(in srgb, var(--dm-teinte) 16%, var(--dv-page)); display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 6cqw; border: 1px solid var(--dv-page-filet); background: var(--dv-page); }
.dm--pdf { --dm-teinte: #ec5a40; } .dm--doc { --dm-teinte: #4b8fe0; } .dm--tableur { --dm-teinte: #3fa760; } .dm--image { --dm-teinte: #8f6ade; } .dm--presentation { --dm-teinte: #fb4d17; }
.dm__tete { display: flex; align-items: center; gap: 2cqw; height: 22%; padding: 0 5cqw; background: var(--dm-fond); color: var(--dm-teinte); }
.dm__tete svg { width: 8cqw; height: 8cqw; flex: none; }
.dm__tete::after { content: ""; flex: 1; height: 2.4cqw; max-width: 42%; border-radius: 9px; background: color-mix(in srgb, var(--dm-teinte) 45%, transparent); }
.dm__bobby { order: 3; width: 5cqw; height: 5cqw; margin-left: auto; border-radius: 35%; background: #fb4d17; }
.dm__corps { flex: 1; min-height: 0; padding: 5cqw 6cqw 2cqw; }
.dm__lignes { display: flex; flex-direction: column; gap: 3.4cqw; }
.dm__lignes i { display: block; height: 2.6cqw; border-radius: 9px; background: var(--dv-ligne); }
.dm__lignes i:nth-child(1) { width: 70%; background: var(--dv-ligne-forte); } .dm__lignes i:nth-child(3) { width: 88%; } .dm__lignes i:nth-child(4) { width: 56%; }
.dm__tableau { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.6cqw; }
.dm__tableau i { height: 5cqw; border-radius: 1.4cqw; background: var(--dv-ligne); }
.dm__tableau i:nth-child(-n + 4) { background: color-mix(in srgb, var(--dm-teinte) 38%, var(--dv-page)); }
.dm__tableau i:nth-child(7), .dm__tableau i:nth-child(10) { background: color-mix(in srgb, var(--dm-teinte) 22%, var(--dv-page)); }
.dm__image { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 3cqw; background: linear-gradient(170deg, #b9dcf7 0%, #f7d6c8 70%, #ffc7a1 100%); }
.dm__image::before { content: ""; position: absolute; right: 16%; top: 14%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #ffb547; }
.dm__image::after { content: ""; position: absolute; inset: 42% -10% -2% -10%; background: linear-gradient(180deg, #8fd0a0, #4fb06a); clip-path: polygon(0 100%, 0 55%, 22% 18%, 42% 55%, 62% 8%, 100% 60%, 100% 100%); }
.dm__diapo { display: flex; flex-direction: column; gap: 2.6cqw; height: 100%; }
.dm__diapo b { display: block; flex: 1; border-radius: 3cqw; background: linear-gradient(135deg, color-mix(in srgb, var(--dm-teinte) 70%, #ffbd2e), var(--dm-teinte)); }
.dm__diapo i { display: block; height: 2.4cqw; width: 64%; border-radius: 9px; background: var(--dv-ligne); } .dm__diapo i:last-child { width: 40%; }
.dm__nom { padding: 0 5cqw 4cqw; font-size: 6cqw; line-height: 1.2; color: var(--dv-nom); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv__poche { position: absolute; inset: auto 0 0 0; height: 64%; z-index: 2; border-radius: 9cqw; border: 1px solid var(--dv-poche-filet); border-bottom-color: var(--dv-poche-bas); background: var(--dv-poche);
  -webkit-backdrop-filter: blur(4px) saturate(160%); backdrop-filter: blur(4px) saturate(160%); }
.dv__legende { position: absolute; left: 8%; right: 25%; bottom: 9%; z-index: 4; display: flex; flex-direction: column; gap: .5cqw; text-align: left; }
.dv__nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--dv-texte); font-size: clamp(10.5px, 8.8cqw, 15px); line-height: 1.18; letter-spacing: -.01em; }
.dv__meta { color: var(--dv-texte-doux); font-size: clamp(9.5px, 7.6cqw, 12px); line-height: 1.25; white-space: nowrap; }
.dv__rond { position: absolute; right: 7%; bottom: 9%; z-index: 4; display: grid; place-items: center; width: clamp(18px, 16cqw, 28px); height: clamp(18px, 16cqw, 28px); border-radius: 999px; background: #1a1813; color: #fff; }
.dv__rond svg { width: 58%; height: 58%; stroke-width: 2.2; }

/* --- le chantier (15/11/2026, demande Axel, d'après son GIF de chantier en pixels) : avant l'appli, Bobby construit l'écosystème en pixels dans une capsule (sas-chantier.js).
   --c : apparition de la capsule, --e : sortie quand l'appli monte. Aucune ombre portée : la capsule n'a qu'un cadre crème et un filet. */
.sas { --c: 0; --e: 0; }
.sas-chantier { position: absolute; left: 50%; top: 61vh; width: min(780px, 86vw); transform: translate(-50%, calc((1 - var(--c)) * 30px - var(--e) * 40px)) scale(calc(1 - var(--e) * .06));
  opacity: calc(var(--c) * (1 - var(--e))); filter: blur(calc((1 - var(--c)) * 8px + var(--e) * 6px)); pointer-events: none; }
.sas-chantier__capsule { position: relative; height: 168px; border-radius: 999px; background: #efe9dd; border: 7px solid #ece6da; overflow: hidden; }
.sas-chantier__capsule::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(26,24,19,.55); pointer-events: none; }
.sas-chantier__toile { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.sas-chantier__etat { margin: 16px 0 0; text-align: center; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: rgba(255,255,255,.72); min-height: 1.4em; }

.sas__note { position: absolute; left: 0; right: 0; bottom: 1.2vh; margin: 0; text-align: center; font: 400 12px/1.4 var(--font); color: var(--ink-3); opacity: calc(1 - var(--n) + var(--x)); }
.sas__note a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* --- téléphone --- */
@media (max-width: 759px) {
  .sas__tete { top: 11vh; }
  .sas__titre { font-size: clamp(34px, 9.5vw, 44px); }
  .sas__texte { font-size: 15px; }
  .sas__cadre { width: 92vw; height: 66vh; bottom: 6vh; }
  .sas-app { border-radius: 18px; }
  .sas-app__barre, .sas-app__droite .sas-app__rond:not(.sas-app__cloche), .sas-app__avatar, .sas-pc { display: none; }
  .sas-app__droite { gap: 4px; }
  .sas-bascule { order: -1; transform: scale(.82); margin: 0 -6px; }
  .sas-app__cloche { border: 0; width: 38px; }
  .sas-app__haut { height: 60px; gap: 8px; padding: 0 8px 0 14px; }
  .sas-app__logo { height: 18px; }
  .sas-app__entreprise { height: 36px; padding-right: 8px; }
  .sas-app__entreprise i { width: 24px; height: 24px; font-size: 10px; }
  .sas-app__entreprise { font-size: 12px; }
  .sas-app__centre { padding: 0 10px 30px; }
  .sas-app__bonjour { font-size: 20px; }
  .sas-app__bobby { width: 52px; height: 48px; }
  .sas-app__scene { height: 200px; }
  .sas-ruban { width: 135%; }
  .sas-tuile { width: 40px; height: 40px; border-radius: 12px; }
  .sas-tuile img { width: 21px; height: 21px; }
  .sas-saisie { width: 88%; padding: 6px; border-radius: 20px; }
  .sas-pilule { height: 27px; padding: 0 9px; font-size: 11.5px; }
  .sas-saisie__zone { font-size: 15px; min-height: 44px; padding: 6px 8px 0; }
  .sas-saisie__projet { display: none; }
  .sas-saisie__idees { overflow: hidden; }
  .sas-saisie__idees .sas-pilule + .sas-pilule { display: none; }
  .sas-app__entreprise { white-space: nowrap; font-size: 11.5px; }
  .sas-dossier { width: 30%; max-width: 116px; }
  .sas-projets__rang { gap: 8px; }
  .sas__piste { height: 380vh; }
  .sas-chantier { top: 60vh; width: 92vw; }
  .sas-chantier__capsule { height: 150px; border-width: 5px; }
  .sas-chantier__etat { font-size: 11px; }
}

/* --- mouvement réduit : la scène finale, sans défilement collant --- */
@media (prefers-reduced-motion: reduce) {
  .sas { --n: 1; --a: 1; --t: 1; --w: 1; --o: 1; }
  .sas__piste { height: auto; }
  .sas__scene { position: relative; height: auto; min-height: 100vh; padding: 12vh 0 6vh; }
  .sas__tete, .sas__cadre { position: relative; left: auto; top: auto; bottom: auto; transform: none; margin: 0 auto; }
  .sas__cadre { margin-top: 48px; }
  .sas-chantier { display: none; }
  .sas__rayons, .sas-tuile, .sas-ondes__a, .sas-ondes__b, .sas-antenne, .sas-oeil, .sas-app__curseur, .sas-app__chiffres svg { animation-play-state: paused; }
  .sas-dossier { opacity: 1; transform: none; }
  .sas__note { position: relative; margin-top: 20px; color: rgba(255,255,255,.6); }
}