/* MyAiCompany · vitrine — gris clair de la plateforme, un accent teal, les couleurs des campus comme signaux */
:root{--ground:#F3F4F6;--panel:#FFFFFF;--panel-2:#F8F9FB;--line:#E3E5EA;--ink:#171A20;--muted:#5F6672;--faint:#8B92A0;
  --maic:#1E8C8A;--maic-2:#DDF1F0;--ocre:#C98B3A;--violet:#9A5BA8;--slate:#5B7BB5;--dark:#1B1F27;--dark-2:#242A34;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;--ui:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px;--gutter:clamp(16px,4vw,48px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.55 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}a{color:inherit}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;line-height:1.1;margin-bottom:18px}h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 12px}.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);color:var(--muted);line-height:1.55}.narrow{max-width:62ch}.muted{color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,96px) var(--gutter)}
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band.dark{background:var(--dark);color:#F2F4F7;border-color:var(--dark)}.band.dark .lead,.band.dark .muted{color:#B9C0CC}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:11px 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-weight:700;line-height:1.1;transition:transform .12s,background .12s}
.btn:hover{background:var(--maic);transform:translateY(-1px)}.btn.big{padding:15px 26px;font-size:1.05rem}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}.btn.ghost:hover{background:var(--panel-2);border-color:var(--ink);color:var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--maic);outline-offset:2px}
/* nav */
.nav{display:flex;align-items:center;gap:18px;padding:18px var(--gutter);max-width:1280px;margin:0 auto}
.nav .brand img{display:block;width:150px;height:auto}.nav nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav nav a{text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 12px;border-radius:999px;color:var(--muted)}.nav nav a:hover{color:var(--ink);background:var(--panel)}
.nav nav a.btn{color:#fff}.nav nav a.btn:hover{background:var(--maic)}.nav nav a.lang{border:1px solid var(--line);color:var(--ink)}
@media (max-width:760px){.nav nav a:not(.btn):not(.lang){display:none}}
/* hero */
.hero{max-width:1280px;margin:0 auto;padding:clamp(24px,5vw,64px) var(--gutter) clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
.kicker{font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--maic);margin-bottom:14px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);font-weight:800;line-height:1.02}.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--maic),var(--slate));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .soft{font-weight:600;color:var(--muted);font-size:.62em;display:inline-block;margin-top:10px}
.hero .lead{margin:22px 0 26px;max-width:52ch}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.note{font-size:.88rem;color:var(--faint);margin-top:14px}
.hero-city{min-width:0}.stage{position:relative;aspect-ratio:5/3;border-radius:18px;overflow:hidden;background:#DCE0E6;box-shadow:0 30px 60px -30px rgba(23,26,32,.35),0 0 0 1px var(--line)}
.stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:opacity .8s ease}.stage .poster.off{opacity:0;pointer-events:none}
.labels{position:absolute;inset:0;pointer-events:none;z-index:3}.lbl{position:absolute;transform:translate(-50%,0);background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 6px rgba(20,30,50,.16);display:flex;align-items:center;gap:6px;opacity:0;transition:opacity .4s}
.stage.live .lbl{opacity:1}.lbl i{width:6px;height:6px;border-radius:50%;background:#2E9E5B;display:none}.lbl.on i{display:block}.lbl.tower{background:var(--maic-2);color:#12605E}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:8px;white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s;z-index:4}.tip.on{opacity:1}
.caption{font-size:.85rem;color:var(--faint);margin:10px 4px 0;text-align:center}
/* campus */
.campus{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:28px}
.campus article{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;position:relative;overflow:hidden}
.campus article::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}.campus h3{display:flex;align-items:center;gap:8px;margin-bottom:6px}.campus h3 i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.campus p{margin:0;color:var(--muted);font-size:.95rem}
/* la ville grandit */
.grow{margin-top:18px;background:var(--panel-2);border:1px solid var(--line);border-left:5px solid var(--maic);border-radius:var(--r);padding:18px 20px;max-width:760px}.grow h3{margin-bottom:6px}.grow p{margin:0;color:var(--muted)}
/* steps */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.steps li .shot{background:var(--panel-2);border-bottom:1px solid var(--line);overflow:hidden}.steps li .shot img{display:block;width:100%;height:auto;max-height:250px;object-fit:cover;object-position:top}
.steps li .t{padding:16px 18px 18px}.steps li h3::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:.85rem;margin-right:10px}
.steps li p{margin:8px 0 0;color:var(--muted)}
/* price */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}@media (max-width:900px){.price{grid-template-columns:minmax(0,1fr)}}
.amount{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}.amount b{font-family:var(--display);font-size:clamp(3rem,7vw,5rem);font-weight:800;letter-spacing:-.03em;line-height:1}.amount span{color:#B9C0CC;font-size:1.1rem}
.credits{display:flex;align-items:center;gap:10px;font-weight:700;color:#8FD9D6;margin-bottom:14px}.credits img{width:28px;height:28px}
.price-ex{background:var(--dark-2);border-radius:var(--r);padding:22px 24px}.price-ex h3{margin-bottom:10px;color:#F2F4F7}
.price-ex table{width:100%;border-collapse:collapse}.price-ex td{padding:10px 0;border-top:1px solid #343B47;font-variant-numeric:tabular-nums;vertical-align:top}.price-ex tr:first-child td{border-top:0}.price-ex td:first-child{padding-right:12px}.price-ex td:last-child{width:1%;white-space:nowrap;text-align:right;font-weight:700;color:#8FD9D6}.price-ex .small{font-size:.85rem;margin:14px 0 0;line-height:1.5}
.price-card h2{max-width:14ch}
/* grids */
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}.band .card{background:var(--panel-2)}.card h3{margin-bottom:6px}.card p{margin:0;color:var(--muted)}
.market{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}@media (max-width:900px){.market{grid-template-columns:minmax(0,1fr)}}
.market .grid3{grid-template-columns:minmax(0,1fr)}.market .card{border-left:5px solid var(--ocre)}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}@media (max-width:760px){.gallery{grid-template-columns:minmax(0,1fr)}}
.gallery figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.gallery img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}.gallery figcaption{padding:12px 16px;color:var(--muted);font-size:.95rem}
/* trust */
.checks{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 24px}.checks li{padding-left:28px;position:relative;color:var(--muted)}.checks li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;background:var(--maic-2)}.checks li::after{content:"";position:absolute;left:5px;top:9px;width:6px;height:9px;border:solid var(--maic);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* join */
.join{background:linear-gradient(180deg,#fff,#EEF6F6)}.join-form{max-width:900px}.join-form .row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:18px}
.join-form .f{display:flex;flex-direction:column;gap:6px;flex:1 1 220px}.join-form .f.wide{flex:2 1 300px}.join-form .f span{font-size:.85rem;font-weight:600;color:var(--muted)}
.join-form input{font:inherit;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%}.join-form input:focus{border-color:var(--maic)}
.hp{display:none!important}.join-form .note.ok{color:#1F7A4A;font-weight:600}.join-form .note.err{color:#B23B3B;font-weight:600}
/* pied de page du groupe — même hiérarchie que ninabot.ch, ninjob.ch, sokkan.ch : l'éditeur, trois colonnes, la ligne légale */
.foot{background:var(--dark);color:#B9C0CC;font-size:.94rem;margin-top:0}
.foot a{color:#E6E9EE;text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-in{max-width:1180px;margin:0 auto;padding:56px var(--gutter) 36px;display:grid;grid-template-columns:1fr 2.4fr;gap:40px}
.foot-brand img{display:block;width:170px;height:auto}
.foot-brand .foot-tag{margin:16px 0 6px;color:#F2F4F7;font-family:var(--display);font-weight:700;font-size:1.05rem}
.foot-brand p{margin:0;line-height:1.5}.foot-brand p a{text-decoration:underline;text-underline-offset:3px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col .h{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:700;color:#8B92A0;margin-bottom:4px}
.foot-bottom{max-width:1180px;margin:0 auto;padding:18px var(--gutter) 28px;border-top:1px solid var(--dark-2);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;font-size:.85rem;color:#8B92A0}
.foot-lang{display:flex;gap:6px;align-items:center}
.foot-lang a,.foot-lang b{padding:4px 10px;border:1px solid #3A414D;border-radius:999px;font-weight:600}
.foot-lang b{background:#F2F4F7;color:var(--dark);border-color:#F2F4F7}
@media (max-width:760px){.foot-in{grid-template-columns:1fr;gap:32px}.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.foot-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}

/* Le film, en tête de page. Muet, en boucle, sans contrôle : c'est une image qui bouge, pas un lecteur.
   Né d'une mesure du 23.09 — zéro visiteur sur 36 n'a cliqué pour aller voir la ville, donc elle vient à eux. */
.hero-city video{display:block;width:100%;height:auto;border-radius:18px;background:#DCE0E6;
  box-shadow:0 30px 60px -30px rgba(23,26,32,.35),0 0 0 1px rgba(23,26,32,.06)}
/* Sur téléphone, le film passe AVANT le titre. Mesuré le 23.09 sur un iPhone simulé : sous le texte du hero il
   tombait à 792 px sur un écran de 844 — il jouait, mais au ras du bord. Or la moitié des visiteurs vient du
   mobile. Le film EST l'argument : il doit être ce qu'on voit, pas ce qu'on atteint en descendant. */
@media (max-width:900px){.hero .hero-city:not(.ville){order:-1;margin-bottom:8px}}
/* La ville 3D descend dans la section qui en parle : elle garde sa place, elle n'est plus la première chose vue. */
.band .hero-city.ville{margin:28px 0 8px}
@media (max-width:760px){.hero-city video{border-radius:12px}}
@media (prefers-reduced-motion:reduce){.hero-city video{display:none}}

/* ============================================================================
   MyAiCompany · page d'accueil v2 — la ville qui se construit, PUIS qui se manipule.
   Concaténé après site.css par build.py (→ dist/assets/site-v2.css) : ce fichier
   n'ajoute que la section de la ville. Il ne touche NI au héros, NI aux couleurs,
   NI à la typographie — la page de production est la référence de beauté.

   Trois consignes fermes de Nick (23.09.2026) tenues ici :
   - AUCUN thème sombre : un seul rendu, celui de la page actuelle ;
   - les couleurs sont celles de site.css, aucune réinterprétation ;
   - le film reste le visuel du héros, la ville vient après.

   Et deux règles du prototype : scène `position: sticky` NATIVE (aucun ancêtre
   transformé, sinon le sticky casse), état de repos déjà correct sans JS — le
   texte des actes ne s'éteint que si le pilote a pris la main (`.acts.on`).
   ============================================================================ */

/* ---------------------------------------------------------------- la saga : la scène tient, le récit défile */
.saga{
  margin-top:clamp(22px,3vw,34px);
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);
  column-gap:clamp(22px,3.5vw,56px);align-items:start;
}
.saga .stage-col{position:sticky;top:clamp(10px,2.4vh,26px);align-self:start}
.saga .acts{display:flex;flex-direction:column;min-width:0}

/* la scène reprend le cadre de la vitrine (rayon, ombre, fond) : même objet, même main */
.saga .stage{
  aspect-ratio:auto;height:min(72vh,620px);
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(23,26,32,.35),0 0 0 1px var(--line);
}
.saga .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.saga .stage .poster{z-index:2}

.stage-head,.stage-foot{
  position:absolute;left:0;right:0;z-index:5;pointer-events:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;
}
.stage-head{top:0}
.stage-foot{bottom:0}
.tag,.chip,.count{
  font-family:var(--ui);font-size:12px;font-weight:700;line-height:1.2;
  padding:6px 11px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.93);color:var(--ink);
  box-shadow:0 1px 10px rgba(20,30,50,.16);
}
.tag.right{font-variant-numeric:tabular-nums}
.chip{max-width:58%;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s ease}
.chip.swap{opacity:0}
.count{font-variant-numeric:tabular-nums;font-weight:600}
.count b{font-weight:800}
/* scène figée (sans WebGL, mouvement réduit, machine trop lente) : l'affiche montre la ville FINIE.
   Un compteur qui annonce « 0 capacités » devant une ville pleine est un mensonge à l'écran. */
.stage.still .chip,.stage.still .count,.stage.still .explorer{display:none}
/* la fiche ouverte fait place nette : elle porte déjà le nom, le résumé et le prix */
.stage.fiche-on .explorer,.stage.fiche-on .stage-foot{display:none}

/* ---------------------------------------------------------------- on manipule : infobulle, bouton, fiche */
/* l'infobulle du produit, reprise telle quelle : fond encre, texte blanc, pointe vers le bâtiment */
.saga .tip{
  position:absolute;z-index:7;pointer-events:none;
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:8px;white-space:nowrap;
  transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity .12s;
}
.saga .tip.on{opacity:1}

.explorer{
  position:absolute;z-index:6;right:15px;bottom:52px;
  font:inherit;font-size:12.5px;font-weight:700;line-height:1;
  padding:10px 15px;border-radius:999px;border:0;cursor:pointer;
  background:var(--ink);color:#fff;box-shadow:0 6px 18px -8px rgba(20,30,50,.6);
  transition:background .12s,transform .12s;
}
.explorer:hover{background:var(--maic);transform:translateY(-1px)}
.stage.libre .explorer{background:var(--maic)}
/* en exploration, le doigt tourne la ville au lieu de faire défiler la page */
.stage.libre canvas{touch-action:none;cursor:grab}
.stage.libre{box-shadow:0 30px 60px -30px rgba(23,26,32,.35),0 0 0 2px var(--maic)}

.fiche{
  position:absolute;z-index:8;left:15px;right:15px;bottom:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 18px;box-shadow:0 18px 40px -22px rgba(20,30,50,.55);
  max-width:420px;
}
.fiche .fermer{
  position:absolute;top:8px;right:10px;border:0;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;color:var(--faint);padding:4px 6px;
}
.fiche .fermer:hover{color:var(--ink)}
.fiche-campus{
  font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--maic);margin:0 0 4px;
}
.fiche h3{margin:0 0 7px;font-size:1.08rem}
.fiche-sum{margin:0 0 8px;color:var(--muted);font-size:.94rem;line-height:1.5}
.fiche-prix{
  margin:0;font-size:.85rem;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------------- les actes */
.act{
  min-height:78vh;display:flex;flex-direction:column;justify-content:center;
  gap:13px;padding-block:4vh;
  transition:opacity .45s ease;
}
.act .k{
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--maic);margin:0;
}
.act h2{font-size:clamp(1.4rem,2.5vw,2rem);margin:0;max-width:22ch;line-height:1.12}
.act p{margin:0;color:var(--muted);max-width:44ch;font-size:1rem;line-height:1.6}
.act .tags{font-weight:700;color:var(--ink);font-size:.93rem;max-width:38ch}
.act .fine{font-size:.84rem;color:var(--faint);max-width:42ch;line-height:1.5}
.act .cta-row{margin-top:6px}
/* le texte n'est éteint QUE si le pilote JS a pris la main : sans JS tout reste lisible */
.acts.on .act{opacity:.32}
.acts.on .act.is-on{opacity:1}

.saga .caption{text-align:left;margin:10px 4px 0}

/* ---------------------------------------------------------------- téléphone : la scène se cale en haut, les actes défilent dessous */
@media (max-width:959px){
  .saga{display:block}
  .saga .stage-col{
    position:sticky;top:0;z-index:6;
    padding:10px 0 12px;background:var(--panel);
    box-shadow:0 12px 18px -14px rgba(0,0,0,.35);
  }
  .saga .stage{height:44vh;min-height:224px;border-radius:14px}
  .act{min-height:auto;padding-block:26px;gap:11px}
  .acts.on .act{opacity:1}          /* un seul acte tient l'écran : rien à éteindre */
  .tag,.chip,.count{font-size:11px;padding:5px 9px}
  .chip{max-width:50%}
  .explorer{bottom:48px;right:12px;padding:9px 13px}
  .fiche{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 16px 16px}
  .saga .caption{margin-top:8px}
}
@media (max-width:420px){
  .act h2{font-size:1.28rem}
  .saga .stage{height:40vh;min-height:200px}
  .fiche h3{font-size:1rem}
  .fiche-sum{font-size:.9rem}
}

/* ---------------------------------------------------------------- mouvement réduit : plus rien ne bouge, tout reste lu */
@media (prefers-reduced-motion:reduce){
  .acts.on .act{opacity:1}
  .act{transition:none}
}
/* « Featured on » (accueil anglais seulement, cf FEATURED dans build.py) */
.featured-on{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin:28px 0 0}
.featured-on img{display:block;height:auto;max-width:100%}
.foot-social img{display:block;width:32px;height:32px}