/* =====================================================================
   Here's how it works, en fenetres (Elio, 26/10/2026)
   Une seule image derriere : la machine vue de dessus qui tourne
   (hero-how-carre, en 720 px dans media/sw), floue ; devant, la fenetre
   en verre depoli de How it works (.cc-win) et du chapitre System du reel
   What we do : meme chrome (feux de 12 px au pas de 20, barre de 44),
   meme rayon, memes ombres, la palette de l'app Claude. Une app par
   temps, la meme semaine de Rhino.fi d'un temps a l'autre. Le verre ne
   disparait jamais : seul le contenu change (fondu croise). Le mode est
   pose sur <html> (.sw-ui) avant le corps ; ?hiw=classic le retire et la
   section redevient exactement celle de la production (home.css, home.js
   intouches). Le deroule est dans home-sw.js.
   ===================================================================== */
/* le mono des puces de code (Geist Mono, comme .cc) sous un nom propre a
   cette section : charge sous son vrai nom, il changerait les scenes .vx de la
   page, qui l'appellent ; la version 3D doit rester celle de la production */
@font-face{font-family:"SW Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(https://fonts.gstatic.com/s/geistmono/v6/or3yQ6H-1_WfwkMZI_qYPLs1a-t7PU0AbeE9KK5U5Cl4PuCTfNg.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* la version 3D : rien de ce fichier ne se montre */
.sw-frame,.sw-panel{display:none}

/* la palette des fenetres : celle de l'app Claude (comme .cc dans
   how-it-works.css), pour qu'on reconnaisse l'app ; la couleur vient du
   contenu (marques, avatars, visuels du client) */
.hiw .sw-frame,.hiw .sw-panel{--sw-bg:#faf9f5;--sw-glass:rgba(250,249,245,.56);--sw-side:rgba(243,241,234,.4);--sw-ink:#1f1e1d;--sw-mute:#76746d;--sw-faint:#a8a69f;
  --sw-line:rgba(31,30,29,.1);--sw-user:rgba(239,235,226,.8);--sw-code:rgba(31,30,29,.055);--sw-field:rgba(255,255,255,.75);--sw-view:rgba(239,237,230,.35);
  --sw-on:rgba(31,30,29,.07);--sw-lit:rgba(255,255,255,.62);--sw-card:rgba(255,255,255,.5);--sw-coral:#d97757;--sw-ok:#2bac76;--sw-link:#1264a3;--sw-blur:22px;--sw-bb:2px;
  --sw-shadow:0 1px 2px rgba(26,23,20,.06),0 32px 64px -40px rgba(26,23,20,.4);
  --sw-rhino:#EF5801;--sw-sel:rgba(26,115,232,.1);--sw-folder:#5f6368;--sw-done:rgba(43,172,118,.14);--sw-done-t:#1f7a54;--sw-rev:rgba(224,163,30,.16);--sw-rev-t:#8a5d00;
  --sw-prog:rgba(18,100,163,.11);--sw-prog-t:#1264a3;--sw-sec:rgba(255,255,255,.45);--sw-toast:#2b2b29;--sw-toast-t:#f3f1ea;--sw-toast-ok:#7fd8ad;--sw-x:#0f1419}
:root[data-theme="night"] .hiw .sw-frame,:root[data-theme="night"] .hiw .sw-panel{--sw-bg:#262624;--sw-glass:rgba(38,38,36,.62);--sw-side:rgba(31,30,29,.45);--sw-ink:#f3f1ea;--sw-mute:#a6a49d;--sw-faint:#75736d;
  --sw-line:rgba(255,255,255,.09);--sw-user:rgba(53,52,49,.8);--sw-code:rgba(255,255,255,.07);--sw-field:rgba(48,48,46,.75);--sw-view:rgba(28,28,27,.35);
  --sw-on:rgba(255,255,255,.07);--sw-lit:rgba(255,255,255,.075);--sw-card:rgba(255,255,255,.05);--sw-ok:#3cc48a;--sw-link:#5aa9e6;
  --sw-shadow:0 1px 2px rgba(0,0,0,.3),0 32px 64px -36px rgba(0,0,0,.7);
  --sw-sel:rgba(138,180,248,.14);--sw-folder:#a8acb2;--sw-done:rgba(60,196,138,.16);--sw-done-t:#7fd8ad;--sw-rev:rgba(236,178,46,.16);--sw-rev-t:#f0c66b;
  --sw-prog:rgba(90,169,230,.16);--sw-prog-t:#8cc4f0;--sw-sec:rgba(255,255,255,.03);--sw-toast:#f3f1ea;--sw-toast-t:#1f1e1d;--sw-toast-ok:#1f7a54;--sw-x:#e7e9ea}

/* la version UI : la machine de chaque temps s'efface, la scene garde sa
   case ; sous 1000 px, chaque temps a son panneau a la place de sa scene */
.sw-ui .hiw .man-frame{display:none}
@media (min-width:1000px){
  .sw-ui .hiw .man-stage{container-type:size}
  .sw-ui .hiw .sw-frame{display:block;position:absolute;inset:0;z-index:1}
}

/* ---- l'image de fond : la machine qui tourne, floue -------------------------
   carree, plus grande que la scene (le disque deborde, comme dans le reel) ;
   elle se deplace un peu a chaque temps, sous le verre (--gx, --gy) */
.sw-bg{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none;background:var(--cell)}
.sw-bg-in{position:absolute;left:50%;top:50%;width:max(118cqw,118cqh);aspect-ratio:1;
  transform:translate(-50%,-50%) translate(var(--gx,0%),var(--gy,0%));filter:blur(var(--sw-bb));transition:transform 1.6s var(--ease)}
.sw-bg-in>img,.sw-bg-in>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw-bg-in>video{opacity:0;transition:opacity .6s ease}
.sw-bg-in>video.is-live{opacity:1}
.sw-frame[data-cur="1"],.sw-panel[data-step="1"]{--gx:-9%;--gy:5%}
.sw-frame[data-cur="2"],.sw-panel[data-step="2"]{--gx:7%;--gy:-7%}
.sw-frame[data-cur="3"],.sw-panel[data-step="3"]{--gx:-4%;--gy:-9%}
.sw-frame[data-cur="4"],.sw-panel[data-step="4"]{--gx:9%;--gy:6%}
.sw-frame[data-cur="5"],.sw-panel[data-step="5"]{--gx:-7%;--gy:9%}

/* ---- le verre (.cc-win) ------------------------------------------------------- */
.sw-win{position:absolute;inset:var(--s-32);overflow:hidden;container:sw/size;border:1px solid var(--sw-line);border-radius:12px;background:var(--sw-glass);color:var(--sw-ink);
  -webkit-backdrop-filter:blur(var(--sw-blur)) saturate(1.05);backdrop-filter:blur(var(--sw-blur)) saturate(1.05);
  font:400 14px/1.45 var(--f);letter-spacing:-.005em;text-align:left;box-shadow:var(--sw-shadow);-webkit-user-select:none;user-select:none;cursor:default}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sw-win{background:var(--sw-bg)}}
.sw-win::before{content:"";position:absolute;left:0;right:0;top:0;height:44px;border-bottom:1px solid var(--sw-line);background:var(--sw-side);pointer-events:none}
.sw-lights{position:absolute;z-index:2;left:14px;top:16px;display:flex;gap:8px}
.sw-lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.sw-lights i:nth-child(2){background:#febc2e}
.sw-lights i:nth-child(3){background:#28c840}
.sw-win :where(p,ul,ol,figure){margin:0;padding:0}
.sw-win p{text-wrap:pretty}
.sw-win :where(ul,ol){list-style:none}
.sw-win b{font-weight:500}
.sw-win img{max-width:none}
.sw-win code{font-family:"SW Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:0;white-space:nowrap}
.sw-ic{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sw-logo{display:block;flex:none;width:16px;height:16px;fill:currentColor;color:var(--sw-ink)}
.sw-ink{color:var(--sw-ink)}

/* une app par temps, posee dans le verre : la sortante s'efface (0,2 s), la
   suivante arrive par-dessus 0,12 s plus tard ; le verre et ses feux restent */
.sw-pane{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s ease,transform 0s .2s,visibility 0s .2s}
.sw-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease .12s,transform .5s var(--ease-reveal) .12s,visibility 0s}
.sw-bar{flex:none;display:flex;align-items:center;gap:16px;height:44px;padding:0 14px 0 90px;font-size:13px;color:var(--sw-mute);white-space:nowrap}
.sw-crumb{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden}
.sw-crumb>.sw-logo{margin-right:2px}
.sw-sep{color:var(--sw-faint)}
.sw-title{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--sw-ink)}
.sw-title .sw-ic{width:14px;height:14px}
.sw-bar-r{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto}
.sw-body{position:relative;flex:1 1 auto;min-height:0}
.sw-faces{display:flex}
.sw-faces>*{width:20px;height:20px;margin-left:-5px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--sw-bg)}
.sw-faces>:first-child{margin-left:0}
.sw-ini{display:grid;place-items:center;color:#fff;font:500 10px/1 var(--f);font-style:normal;letter-spacing:0}
.sw-ini-m{background:#5f8596}
.sw-ini-t{background:#b5895b}
.sw-btn{display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1px solid var(--sw-line);border-radius:7px;font-size:12.5px;color:var(--sw-ink);background:var(--sw-card);
  transition:transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease)}

/* ce qui entre : une rangee s'ouvre (0fr -> 1fr) et les autres glissent ;
   un element pose monte de 6 px ; une rangee qui passe le haut d'une
   conversation s'efface en entier (.is-past) */
.sw-grow{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s var(--ease-reveal),opacity .35s ease .1s}
.sw-grow>*{min-height:0;overflow:hidden}
.sw-grow[data-at]:not(.is-in),.sw-grow[data-from]:not(.is-on){grid-template-rows:0fr;opacity:0}
.sw-rise{transition:opacity .35s ease,transform .45s var(--ease-reveal)}
.sw-rise[data-at]:not(.is-in){opacity:0;transform:translateY(6px)}
.sw-win .is-past{opacity:0!important;transition:opacity .2s ease}
.sw-caret{display:inline-block;width:1.5px;height:1.1em;margin-left:1px;vertical-align:-.18em;background:currentColor;opacity:0}
.sw-caret.is-on{opacity:1;animation:sw-caret 1s steps(1) infinite}
@keyframes sw-caret{50%{opacity:0}}
/* rien ne tourne dans une app cachee, hors de l'ecran ou en version 3D */
.sw-pane:not(.is-on) *,.sw-frame.is-idle *,.sw-panel:not(.is-in) *{animation-play-state:paused!important}

/* ---- au survol (souris seulement) : seuls les boutons des apps reagissent
   (Elio, 26/10/2026 : "pas du hover partout") ; ils se soulevent d'1 px,
   les outils de Figma prennent l'encre */
@media (hover:hover) and (pointer:fine){
  .sw-btn:hover,.sw-chip:hover,.sw-ccsend:hover{transform:translateY(-1px);box-shadow:0 3px 8px -4px rgba(26,23,20,.35)}
  .sw-ui3 .sw-ic:hover{color:var(--sw-ink)}
}

/* ---- 01 Communication : le Slack du client, #astraos -------------------------- */
.sw-sl{display:grid;grid-template-columns:176px minmax(0,1fr)}
.sw-side{padding:12px 8px;border-right:1px solid var(--sw-line);background:var(--sw-side);font-size:13.5px;color:var(--sw-mute);overflow:hidden}
.sw-ws{display:flex;align-items:center;gap:4px;margin:0 8px 14px!important;font-weight:500;font-size:15px;color:var(--sw-ink)}
.sw-ws .sw-ic{width:14px;height:14px}
.sw-side-h{margin:12px 8px 4px!important;font-size:12.5px;color:var(--sw-faint)}
.sw-ch{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px;white-space:nowrap;overflow:hidden}
.sw-ch .sw-ic{width:14px;height:14px}
.sw-ch.is-cur{background:var(--sw-on);color:var(--sw-ink);font-weight:500}
.sw-ch img,.sw-ch .sw-ini{flex:none;width:18px;height:18px;border-radius:5px;object-fit:cover}
.sw-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.sw-chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 32px);mask:linear-gradient(transparent,#000 32px)}
.sw-msgs{flex:none;min-height:100%;display:flex;flex-direction:column;padding:8px 0 6px}
.sw-intro{padding:10px 18px 14px}
.sw-intro-t{display:flex;align-items:center;gap:2px;font-weight:500;font-size:19px;letter-spacing:-.01em}
.sw-intro-t .sw-ic{width:18px;height:18px}
.sw-intro p:last-child{font-size:13.5px;color:var(--sw-mute)}
.sw-day{display:flex;align-items:center;padding:4px 18px;font-size:12px;color:var(--sw-mute)}
.sw-day::before,.sw-day::after{content:"";flex:1 1 auto;height:1px;background:var(--sw-line)}
.sw-day span{margin:0 10px;padding:1px 10px;border:1px solid var(--sw-line);border-radius:999px;background:var(--sw-bg)}
.sw-msg{display:flex;gap:10px;padding:6px 18px}
.sw-av{position:relative;flex:none;width:34px;height:34px;border-radius:8px}
.sw-av>img:first-child{display:block;width:34px;height:34px;border-radius:8px;object-fit:cover}
.sw-av.sw-ini{font-size:13px}
.sw-org{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:4px;box-shadow:0 0 0 1.5px var(--sw-bg)}
.sw-m{flex:1 1 auto;min-width:0}
.sw-who{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.sw-who b{font-weight:500}
.sw-who time{font-size:11.5px;color:var(--sw-faint)}
.sw-m>p b{font-weight:500}
.sw-chipl{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px;border:1px solid var(--sw-line);border-radius:8px;background:var(--sw-card);font-size:13px}
.sw-chipl .sw-ic{width:14px;height:14px;color:var(--sw-mute)}
.sw-att{display:block;width:168px;margin-top:8px;overflow:hidden;border-radius:8px;outline:1px solid var(--sw-line);outline-offset:-1px}
.sw-att img{display:block;width:168px;height:168px;object-fit:cover}
.sw-thread{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12.5px;color:var(--sw-faint)}
.sw-thread .sw-faces>*{width:18px;height:18px;border-radius:5px;margin-left:-3px}
.sw-thread .sw-faces>:first-child{margin-left:0}
.sw-thread b{font-weight:500;color:var(--sw-link)}
.sw-list{display:flex;flex-direction:column;padding:2px 0 0!important;font-size:13.5px;line-height:1.38}
.sw-list li>span{display:flex;align-items:center;gap:8px;padding-top:4px}
.sw-list .sw-ic{width:15px;height:15px;color:var(--sw-mute)}
.sw-list .sw-ok{color:var(--sw-ok)}
.sw-call{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border:1px solid var(--sw-line);border-radius:10px;background:var(--sw-card)}
.sw-call .sw-logo{width:22px;height:22px}
.sw-call-t{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.sw-call-t b{font-size:13.5px;font-weight:500}
.sw-call-t span{font-size:12px;color:var(--sw-mute)}
.sw-call .sw-btn{margin-left:auto}
.sw-compose{flex:none;display:flex;align-items:center;gap:12px;height:40px;margin:6px 16px 0;padding:0 12px;border:1px solid var(--sw-line);border-radius:10px;
  background:var(--sw-field);color:var(--sw-faint)}
.sw-field{flex:1 1 auto;min-width:0;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-typing{flex:none;display:flex;align-items:center;gap:6px;height:24px;padding:0 18px;font-size:12px;color:var(--sw-mute);opacity:0;transition:opacity .25s ease}
.sw-typing.is-on{opacity:1}
.sw-dots{display:flex;gap:2.5px}
.sw-dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
.sw-typing.is-on .sw-dots i{animation:sw-dots 1s ease-in-out infinite}
.sw-typing.is-on .sw-dots i:nth-child(2){animation-delay:.15s}
.sw-typing.is-on .sw-dots i:nth-child(3){animation-delay:.3s}
@keyframes sw-dots{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-2.5px);opacity:1}}

/* ---- 02 Strategy : le fichier Brand foundation dans Figma ----------------------
   la planche (360 x 662) tient en entier dans le canevas (home-sw.js pose
   --z, --bx, --by) ; noms de sections et de frames, curseurs et commentaire
   gardent leur taille a l'ecran (1 / --z), comme dans Figma */
.sw-share{border-color:transparent;background:#0d99ff;color:#fff}
.sw-mp>*{box-shadow:0 0 0 1px var(--sw-bg),0 0 0 2.5px var(--c)}
.sw-mp-e{--c:#9747ff}.sw-mp-a{--c:#14ae5c}.sw-mp-m{--c:#f24822}
.sw-fg{display:grid;grid-template-columns:200px minmax(0,1fr)}
.sw-layers{padding:12px 8px;border-right:1px solid var(--sw-line);background:var(--sw-side);font-size:12.5px;overflow:hidden}
.sw-layers .sw-side-h{margin:0 8px 8px!important}
.sw-tree{display:flex;flex-direction:column;gap:1px}
.sw-ly{display:flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 24px;border-radius:6px;color:var(--sw-mute);white-space:nowrap;overflow:hidden;
  transition:opacity .3s ease,background-color .2s ease,color .2s ease}
.sw-ly .sw-ic{width:13px;height:13px;stroke-width:1.8}
.sw-ly.is-sec{padding-left:8px;color:var(--sw-ink)}
.sw-ly[data-at]:not(.is-in){opacity:0}
.sw-ly.is-sel{background:rgba(13,153,255,.14);color:var(--sw-ink)}
:root[data-theme="night"] .sw-ly.is-sel{background:rgba(13,153,255,.24)}
.sw-canvas{position:relative;overflow:hidden;background:var(--sw-view)}
.sw-board{position:absolute;left:0;top:0;width:360px;height:662px;transform-origin:0 0;transform:translate(var(--bx,0px),var(--by,0px)) scale(var(--z,1))}
.sw-sec{position:absolute;left:14px;top:calc(var(--y) * 1px + 14px);width:332px;height:calc(var(--h) * 1px);border:1px solid var(--sw-line);border-radius:4px;
  background:var(--sw-sec);transition:opacity .35s ease}
.sw-sec[data-at]:not(.is-in){opacity:0}
.sw-sec-l,.sw-fr-l,.sw-cur,.sw-pin-c{scale:calc(1 / var(--z,1))}
.sw-sec-l{position:absolute;left:8px;top:6px;padding:2px 7px;border-radius:4px;background:var(--sw-on);font-size:11px;line-height:1.3;color:var(--sw-mute);transform-origin:0 0}
.sw-fr{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);
  transition:opacity .3s ease,transform .45s var(--ease-reveal)}
.sw-fr[data-at]:not(.is-in){opacity:0;transform:translateY(6px)}
.sw-fr>img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.sw-fr:not(.sw-fr-line){overflow:visible}
.sw-fr-l{position:absolute;left:0;bottom:100%;max-width:calc(var(--w) * var(--z,1) * 1px);margin-bottom:3px;font-size:10.5px;line-height:1.2;color:var(--sw-faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:0 100%}
.sw-board.is-tiny .sw-fr-l{opacity:0}
.sw-fr::after{content:"";position:absolute;inset:-2px;border:1.5px solid var(--c);border-radius:2px;opacity:0;transition:opacity .15s ease;pointer-events:none;
  background:linear-gradient(var(--c),var(--c)) 0 0/5px 5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/5px 5px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/5px 5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/5px 5px no-repeat}
.sw-fr.is-sel::after{opacity:1}
.sw-fr-line{display:flex;align-items:center;padding:10px 16px;background:#fff;border-radius:2px;box-shadow:0 0 0 .5px rgba(0,0,0,.12)}
.sw-fr-line::after{background:none}
.sw-fr-line p{font-size:15px;line-height:1.3;letter-spacing:-.02em;color:#1a1714}
.sw-fr-line .sw-caret{background:#9747ff}
.sw-cur{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:flex-start;transform-origin:0 0;translate:calc(var(--px,0) * 1px) calc(var(--py,0) * 1px);pointer-events:none}
.sw-cur[data-at]:not(.is-in){opacity:0}
.sw-cur svg{width:16px;height:16px;fill:var(--c);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25))}
.sw-cur b{margin:13px 0 0 -3px;padding:2px 6px;border-radius:5px 5px 5px 2px;background:var(--c);color:#fff;font-size:10.5px;line-height:1.3;white-space:nowrap}
.sw-pin-c{position:absolute;left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);z-index:2;display:grid;place-items:center;width:26px;height:26px;padding:3px;
  border-radius:50% 50% 50% 3px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.22);transform-origin:0 100%;translate:0 -100%;transition:opacity .3s ease}
.sw-pin-c .sw-ini{width:20px;height:20px;border-radius:50%}
.sw-pin-c:not(.is-in){opacity:0}
.sw-ui3{position:absolute;left:50%;bottom:12px;display:flex;align-items:center;gap:12px;padding:5px 10px 5px 5px;border:1px solid var(--sw-line);border-radius:10px;
  background:var(--sw-bg);color:var(--sw-mute);transform:translateX(-50%);box-shadow:0 4px 14px -6px rgba(26,23,20,.25)}
.sw-ui3 .sw-ic{stroke-width:1.8;transition:color var(--d-hover) ease}
.sw-tool{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#0d99ff;color:#fff}
.sw-tool .sw-ic{width:14px;height:14px}
.sw-zoom{padding-left:10px;border-left:1px solid var(--sw-line);font-size:11.5px;line-height:16px;font-variant-numeric:tabular-nums}

/* ---- 03 Production : le plan des lancements, une liste Slack -------------------
   qui fait quoi : AstraOS, ou l'equipe du client avec Photon */
.sw-tbl{padding:4px 0;font-size:13.5px;overflow:hidden}
.sw-tr{display:grid;grid-template-columns:minmax(0,1fr) 140px 46px 88px;align-items:center;gap:8px;min-height:58px;padding:0 16px;border-bottom:1px solid var(--sw-line)}
.sw-th{min-height:32px;font-size:12px;color:var(--sw-faint)}
.sw-th>:last-child{text-align:right}
.sw-grp{padding:16px 16px 6px;font-size:12px;font-weight:500;color:var(--sw-mute)}
.sw-pc{display:flex;align-items:center;gap:10px;min-width:0;line-height:1.25}
.sw-pc img{flex:none;width:34px;height:34px;border-radius:6px;object-fit:cover;outline:1px solid var(--sw-line);outline-offset:-1px}
.sw-pc>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sw-by{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--sw-mute);white-space:nowrap}
.sw-by img,.sw-by .sw-ini{flex:none;width:20px;height:20px;border-radius:50%;object-fit:cover}
.sw-photon{padding:1px 6px;border-radius:4px;background:var(--sw-on);font-size:11px;font-style:normal;line-height:1.35;color:var(--sw-mute)}
.sw-dt{color:var(--sw-mute);font-size:13px}
.sw-stc{display:flex;justify-content:flex-end}
.sw-st{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 7px;border-radius:999px;font-size:11.5px;font-style:normal;
  line-height:1.4;white-space:nowrap;background:var(--sw-on);color:var(--sw-mute)}
.sw-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sw-st.is-done{background:var(--sw-done);color:var(--sw-done-t)}
.sw-st.is-rev{background:var(--sw-rev);color:var(--sw-rev-t)}
.sw-st.is-prog{background:var(--sw-prog);color:var(--sw-prog-t)}
.sw-flip{display:inline-grid;justify-items:end}
.sw-flip>*{grid-area:1/1;transition:opacity .25s ease}
.sw-flip>.is-b,.sw-flip.is-flipped>.is-a{opacity:0}
.sw-flip.is-flipped>.is-b{opacity:1}
.sw-add{display:flex;align-items:center;gap:8px;height:48px;padding:0 16px;color:var(--sw-mute);font-size:13px}
.sw-add .sw-ic{width:15px;height:15px}

/* ---- 04 Autonomy : Photon dans Claude (la fenetre du reel) --------------------- */
.sw-ccb{display:flex;flex-direction:column}
.sw-cchat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 32px);mask:linear-gradient(transparent,#000 32px)}
.sw-cclist{flex:none;min-height:100%;display:flex;flex-direction:column;padding:12px 24px 10px}
.sw-q{display:flex;justify-content:flex-end;padding-top:12px}
.sw-user{max-width:86%;padding:10px 14px;border-radius:14px;background:var(--sw-user);font-size:15px;line-height:1.45}
.sw-tline,.sw-log p{display:flex;align-items:center;gap:8px;min-width:0;padding:5px 6px;margin:0 -6px;border-radius:7px;font-size:13.5px;line-height:1.4;color:var(--sw-mute);white-space:nowrap}
.sw-tline{padding-top:12px}
.sw-tline b,.sw-log b{color:var(--sw-ink)}
.sw-tline code,.sw-log code{min-width:0;padding:1px 6px;border-radius:5px;background:var(--sw-code);color:var(--sw-mute);overflow:hidden;text-overflow:ellipsis}
.sw-log{padding-top:6px!important}
.sw-say{padding-top:10px;font-size:15px;line-height:1.55}
.sw-spin{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;padding-top:10px;font-size:13.5px;color:var(--sw-coral)}
.sw-glyph{width:15px;text-align:center;font-size:15px}
.sw-ph3{grid-area:1/2;transition:opacity .2s ease}
.sw-ph3:not(.is-on){opacity:0}
.sw-art{width:min(100%,320px);padding-top:10px}
.sw-art>img{display:block;width:100%;height:auto;aspect-ratio:613/460;border-radius:8px;object-fit:cover;box-shadow:0 1px 2px rgba(26,23,20,.08),0 18px 36px -24px rgba(26,23,20,.45)}
.sw-art{overflow:hidden;border-radius:8px}
.sw-art figcaption{display:flex;align-items:center;gap:6px;padding:6px 2px 2px;font-size:12.5px;color:var(--sw-mute)}
.sw-art figcaption .sw-ic{width:14px;height:14px}
.sw-ccin{flex:none;margin:0 16px 16px;padding:12px 12px 10px 14px;border:1px solid var(--sw-line);border-radius:14px;background:var(--sw-field);box-shadow:0 1px 3px rgba(26,23,20,.05)}
.sw-ccq{display:grid;min-height:44px;font-size:15px;line-height:1.45}
.sw-ccq>span{grid-area:1/1}
.sw-tyw:not(.is-on){display:none}
.sw-ph{color:var(--sw-faint)}
.sw-ph:not(.is-on){opacity:0}
.sw-ccrow{display:flex;align-items:center;gap:8px;margin-top:6px}
.sw-chip{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--sw-line);border-radius:8px;font-size:12.5px;color:var(--sw-mute);
  transition:transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease)}
.sw-chip:first-child{width:28px;padding:0;justify-content:center}
.sw-chip .sw-ic{width:15px;height:15px}
.sw-ccsend{display:grid;place-items:center;width:30px;height:30px;margin-left:auto;border-radius:8px;background:var(--sw-coral);color:#fff;opacity:.4;
  transition:opacity .2s ease,transform var(--d-hover) var(--ease),box-shadow var(--d-hover) var(--ease)}
.sw-ccsend.is-on{opacity:1}
.sw-press{display:grid;place-items:center;transition:transform .12s ease}
.sw-press.is-on{transform:scale(.88)}

/* ---- 05 Quality : un post X programme, verifie avant de partir ---------------
   la piece est passee au bleu ; Adeline le note, la couche bleue s'efface
   d'un balayage et laisse l'orange de Rhino.fi (puis disparait : aucun
   liseré bleu ne reste au bord) */
.sw-xb{display:flex;flex-direction:column}
.sw-sched{flex:none;display:flex;align-items:center;gap:8px;height:42px;padding:0 20px;border-bottom:1px solid var(--sw-line);font-size:13px;color:var(--sw-mute)}
.sw-sched .sw-ic{width:15px;height:15px}
.sw-tweet{flex:1 1 auto;min-height:0;display:flex;gap:12px;padding:16px 20px 12px;overflow:hidden}
.sw-rav{flex:none;width:40px;height:40px;border-radius:50%;background:var(--sw-rhino) url(case-studies/assets/rhino/brand/logo-mark.svg) 50% 54%/60% auto no-repeat}
.sw-tw{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-width:0}
.sw-tw>p:nth-child(2){font-size:15px;line-height:1.4}
.sw-tw .sw-who{align-items:center;gap:4px;font-size:15px}
.sw-tw .sw-who b{font-weight:500}
.sw-tw .sw-who span{margin-left:2px;font-size:14px;color:var(--sw-mute)}
.sw-vf{width:17px;height:17px;flex:none}
.sw-media{position:relative;flex:none;aspect-ratio:613/460;max-height:calc(100cqh - 336px);overflow:hidden;border-radius:16px}
.sw-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw-media::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px var(--sw-line);pointer-events:none}
.sw-off{position:absolute;inset:0;overflow:hidden;filter:hue-rotate(185deg) saturate(.9);clip-path:inset(0);transition:clip-path .7s cubic-bezier(.65,0,.3,1),opacity 0s}
.sw-off.is-in{clip-path:inset(0 0 0 100%);opacity:0;transition:clip-path .7s cubic-bezier(.65,0,.3,1),opacity 0s .7s}
.sw-pin{position:absolute;z-index:1;top:12px;left:12px;width:28px;height:28px;transform-origin:0 100%;transition:opacity .3s ease,transform .35s var(--ease)}
.sw-pin:not(.is-in){opacity:0;transform:scale(.85)}
.sw-pin>*{grid-area:auto;position:absolute;inset:0;display:grid;place-items:center}
.sw-pin-f{padding:2px;border-radius:50% 50% 50% 4px;background:var(--sw-bg);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sw-pin-f img{display:block;width:24px;height:24px;border-radius:50%}
.sw-okdot{inset:3px!important;border-radius:50%;background:var(--sw-ok);color:#fff;box-shadow:0 0 0 2px var(--sw-bg),0 2px 8px rgba(0,0,0,.2)}
.sw-okdot .sw-ic{width:13px;height:13px;stroke-width:3}
.sw-pin.sw-flip>*{transition:opacity .25s var(--ease)}
.sw-note{position:absolute;z-index:1;top:12px;left:48px;max-width:64%;padding:10px 12px;border:1px solid var(--sw-line);border-radius:10px;
  background:color-mix(in srgb,var(--sw-bg) 94%,transparent);font-size:13px;line-height:1.4;box-shadow:0 8px 24px -12px rgba(0,0,0,.3);
  opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .35s var(--ease-reveal)}
.sw-note.is-on{opacity:1;transform:none}
.sw-note .sw-who{margin-bottom:2px!important}
.sw-note .sw-who b{font-size:13px}
.sw-checked{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:13.5px}
.sw-checked .sw-ic{color:var(--sw-ok)}
.sw-checked span:last-child{font-size:13px;color:var(--sw-mute)}
.sw-reply{flex:none;display:flex;align-items:center;gap:6px;height:40px;margin:0 20px 0 72px;border-bottom:1px solid var(--sw-line);font-size:13.5px;font-weight:500;color:#1d9bf0}
.sw-reply .sw-ic{width:15px;height:15px}
.sw-xtools{flex:none;display:flex;align-items:center;gap:16px;height:58px;padding:0 20px 0 72px;color:#1d9bf0}
.sw-xtools .sw-ic{width:18px;height:18px;stroke-width:1.8}
.sw-xbtn{height:34px;margin-left:auto;padding:0 18px;border:0;border-radius:999px;background:var(--sw-x);color:var(--sw-bg);font-size:14px;font-weight:500}

/* ---- 06 Organization : le drive partage du client, tout a son nom ------------- */
.sw-dv{padding:16px 18px;font-size:13.5px;overflow:hidden}
.sw-dl{margin:0 2px 10px!important;font-size:13px;font-weight:500;color:var(--sw-ink)}
.sw-folders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:20px!important}
.sw-folders li{display:flex;align-items:center;gap:9px;height:42px;padding:0 12px;border:1px solid var(--sw-line);border-radius:10px;background:var(--sw-card);
  white-space:nowrap;overflow:hidden}
.sw-gf{flex:none;width:18px;height:18px;color:var(--sw-folder);--sw-on-folder:var(--sw-bg)}
.sw-dr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:10px;height:46px;padding:0 10px;
  border-bottom:1px solid var(--sw-line);transition:background-color .6s ease}
.sw-dh{height:32px;font-size:12px;color:var(--sw-faint)}
.sw-dr:not(.sw-dh)>:nth-child(3){color:var(--sw-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-dr.is-sel{background:var(--sw-sel)}
.sw-dn{display:flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-dn .sw-logo{width:18px;height:18px}
.sw-own{display:flex;align-items:center;gap:7px;white-space:nowrap}
.sw-rhino{flex:none;width:18px;height:18px;border-radius:50%;background:var(--sw-rhino) url(case-studies/assets/rhino/brand/logo-mark.svg) 50% 55%/12px auto no-repeat}
.sw-toast{position:absolute;left:16px;bottom:16px;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;background:var(--sw-toast);
  color:var(--sw-toast-t);font-size:12.5px;box-shadow:0 8px 24px -8px rgba(0,0,0,.35);
  opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .45s var(--ease-reveal)}
.sw-toast.is-on{opacity:1;transform:none}
.sw-toast .sw-ic{color:var(--sw-toast-ok)}

/* ---- une fenetre etroite (la scene de 1000 a 1279 px, les telephones) -------
   les apps rangent leurs panneaux et leurs extras comme dans une vraie
   fenetre etroite ; le texte ne retrecit jamais */
@container sw (max-width:520px){
  .sw-bar-r .sw-faces,.sw-bar-r>.sw-ic,.sw-wide{display:none}
  .sw-sl,.sw-fg{grid-template-columns:minmax(0,1fr)}
  .sw-side,.sw-layers{display:none}
  .sw-msg{padding:6px 14px}
  .sw-intro,.sw-day{padding-left:14px;padding-right:14px}
  .sw-compose{margin:6px 12px 0}
  .sw-tr{grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"th nm st" "th by dt";align-content:center;column-gap:10px;row-gap:3px;min-height:58px;padding:0 14px}
  .sw-th{display:none}
  .sw-pc{display:contents}
  .sw-pc img{grid-area:th}
  .sw-pc>span{grid-area:nm;align-self:end}
  .sw-by{grid-area:by;align-self:start;overflow:hidden;font-size:12px}
  .sw-by img,.sw-by .sw-ini{width:16px;height:16px;font-size:8.5px}
  .sw-dt{grid-area:dt;align-self:start;justify-self:end;font-size:12px;line-height:20px}
  .sw-stc{grid-area:st;align-self:end}
  .sw-grp,.sw-add{padding-left:14px;padding-right:14px}
  .sw-cclist{padding:12px 18px 10px}
  .sw-ccin{margin:0 12px 12px}
  .sw-tweet{padding:14px 16px 10px}
  .sw-rav{width:36px;height:36px}
  .sw-tw .sw-who span{display:none}
  .sw-sched{padding:0 16px}
  .sw-xtools{padding:0 16px;gap:14px}
  .sw-reply{margin:0 16px}
  .sw-note{max-width:76%}
  .sw-dv{padding:14px}
  .sw-folders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sw-dr{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .sw-dr>:nth-child(3){display:none}
}
@container sw (max-width:400px){
  .sw-share,.sw-thread{display:none}
  .sw-att,.sw-att img{width:128px}
  .sw-att img{height:128px}
  .sw-xtools .sw-ic:nth-child(4){display:none}
}
@container sw (max-width:340px){
  .sw-org-n{display:none}
  .sw-att,.sw-att img{width:104px!important}
  .sw-att img{height:104px!important}
  .sw-art{width:min(100%,240px)}
}
/* une fenetre basse : la piece jointe et la vignette du fil raccourcissent */
@container sw (max-height:640px){
  .sw-att,.sw-att img{width:128px}
  .sw-att img{height:128px}
  .sw-thread{display:none}
  .sw-msg{padding-top:4px;padding-bottom:4px}
  .sw-list li>span{padding-top:2px}
  .sw-call{margin-top:6px;padding:8px 12px}
  .sw-art{width:min(100%,240px)}
  .sw-intro{display:none}
  .sw-tr{min-height:52px}
  .sw-grp{padding-top:12px}
}

/* ---- sous 1000 px : un panneau par temps --------------------------------------
   pleine largeur de la case, l'image de fond derriere, la fenetre au
   milieu (600 px au plus) ; home-sw.js y place l'app du temps et y deplace
   la video de fond quand le panneau est a l'ecran */
@media (max-width:999px){
  .sw-ui .hiw .man-step-img{display:none}
  /* la piste prend la hauteur de ses temps (.hiw .man-scroll garde sinon
     rh + 420vh sous 1000 px aussi) */
  .sw-ui .hiw .man-scroll{height:auto}
  .sw-ui .hiw .man-step-in{align-self:stretch;width:100%}
  .sw-ui .hiw .sw-panel{position:relative;display:block;margin:4px calc(-1 * var(--pad)) 0;padding:var(--s-24) var(--s-16);overflow:hidden;
    border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line)}
  .sw-panel .sw-win{position:relative;inset:auto;max-width:600px;height:var(--mh,600px);margin:0 auto}
  .sw-panel .sw-pane{transition:none}
  .sw-panel[data-step="0"]{--mh:min(720px,calc(100svh - 60px))}
  .sw-panel[data-step="1"]{--mh:560px}
  .sw-panel[data-step="2"]{--mh:640px}
  .sw-panel[data-step="3"]{--mh:660px}
  .sw-panel[data-step="4"]{--mh:630px}
  .sw-panel[data-step="5"]{--mh:580px}
}
@media (max-width:599px){
  .sw-ui .hiw .sw-panel{padding:var(--s-24) 10px}
}
@media (min-width:600px) and (max-width:999px){
  .sw-ui .hiw .sw-panel{padding:var(--s-32)}
}

/* captures (?t=) et reduced motion : l'image posee d'un coup */
.sw-instant,.sw-instant *,.sw-still .sw-win,.sw-still .sw-win *,.sw-still .sw-bg-in{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .sw-win,.sw-win *,.sw-bg-in{transition:none!important}
  .sw-win *{animation:none!important}
}