/* ===================================================================
   SHOOTKAM OS 3.0 — REPLIQUE CLIQUABLE (page Apps, 12/10/2026).
   SHOOTKAM : « la page app est trop simplifiee et il y a trop de photos
   qui ne correspondent pas : cree une replique cliquable de l'OS, animee ».

   ⚠️ CE N'EST PAS UNE MAQUETTE INVENTEE. Les couleurs, l'ordre de la barre,
   les titres et les libelles sont recopies du code de l'app :
     theme.lua            ACCENT #C8253C, textes #F4F7FA / #C3CAD4 / #8E96A1,
                          teintes des pages (N_ROUGE #FF2D55, N_BLEU #00B6FF...)
     ShootkamOS.lua       DESTINATIONS, ORDRE_BARRE, ATELIERS, la barre du haut
                          (reflet toutes les 7 s, liseré rouge qui court en bas)
     nuancier.lua         les teintes constructeurs et leur matiere
   Une page de l'OS qui change doit changer ici aussi : sinon le site montre
   une interface que personne ne peut ouvrir (deja arrive avec la v1.36).
   =================================================================== */

.skos{
  --ac:#C8253C; --pro:#5A0E1B; --tx:#F4F7FA; --tx2:#C3CAD4; --tx3:#8E96A1;
  --pan:rgba(16,16,20,.80); --pan2:rgba(255,255,255,.035); --bd:rgba(255,255,255,.085);
  --ton:#FF2D55;
  --paint:#B31C29; --p1:#d9606a; --p2:#B31C29; --p3:#4a0b11; --gl:.55; --fl:.4; --tn:.06; --tc:#ff6a3d; --ch:0;
  --rim:#c9ccd1; --cal:#d11a2a; --neon:#00E5FF; --neonA:.85; --flame:#ff8a00; --smoke:#dcdcdc; --lift:0px;
  --sk-f:none; --fov:1; --haze:0; --rain:0; --wet:0; --dirt:0;
  --fs:13px;
  position:relative; isolation:isolate; overflow:hidden; border-radius:20px;
  width:min(1340px, calc(100vw - 32px)); margin:0 auto; left:50%; transform:translateX(-50%);
  aspect-ratio:16/9; min-height:700px; max-height:820px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.95), 0 40px 120px -70px var(--glow);
  font:400 var(--fs)/1.35 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color:var(--tx2); text-align:left; user-select:none; -webkit-user-select:none;
  background:#06070a;
}
.skos *{ box-sizing:border-box; }
/* Dans le cadre de la page Apps (titre chrome centre au-dessus), la replique prend
   toute la largeur interieure du cadre : plus de debord a calculer, le cadre le fait deja. */
.osx .skos{ width:100%; left:auto; transform:none; margin:30px 0 0; }
.os-tete .osx{ margin-top:0; }
/* le bandeau de la page ouverte, dans le cadre, juste sous la replique */
.osx .sk-info{ max-width:none; min-height:0; margin:14px 0 0; padding:14px 18px; align-items:center; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid var(--glass-line); }
.osx .sk-info .sk-info-k{ width:44px; height:44px; border-radius:13px; }
.osx .sk-info .sk-info-k svg{ width:20px; height:20px; }
.osx .sk-info h3{ font-size:1.12rem; }
.osx .sk-info p{ font-size:.93rem; }
/* :where() = poids nul : la remise a zero ne doit pas ecraser .sk-chip, .sk-btn... */
:where(.skos) button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:where(.skos) input[type=range]{ font:inherit; }

/* ---------------- la scene derriere l'OS : le ciel, la route ---------------- */
.sk-scene{ position:absolute; inset:0; z-index:-1; filter:var(--sk-f); transition:filter .6s; overflow:hidden; }
.sk-zoom{ position:absolute; inset:-4%; transform:scale(var(--fov)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
/* Le decor : une vraie capture de SHOOTKAM (Shutoko, BMW M4 GTS au coucher du soleil).
   Le skydome choisi vient PAR-DESSUS son ciel, et seulement une fois qu'on a touche a
   l'heure ou au ciel : au depart, la photo reste telle qu'elle a ete prise. */
.sk-photo{ position:absolute; inset:0; background:url('img/os3/fond-os.webp') center 58%/cover; }
.sk-sky{ position:absolute; left:0; right:0; top:0; height:56%; background-size:cover; background-position:center 42%;
  filter:blur(1px) saturate(1.1); opacity:0; transition:opacity 1.2s;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 38%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 38%, transparent 100%); }
.skos.ciel-choisi .sk-sky.on{ opacity:.96; }
.skos:not(.ciel-choisi) .sk-tint, .skos:not(.ciel-choisi) .sk-nuit{ opacity:0; }
/* l'heure : un voile orange au lever et au coucher, un bleu nuit la nuit */
.sk-tint{ position:absolute; inset:0; background:rgb(255,150,95); opacity:var(--ts, 0); mix-blend-mode:multiply; transition:opacity 1s; }
.sk-nuit{ position:absolute; inset:0; background:rgb(26,40,92); opacity:var(--tnu, 0); mix-blend-mode:multiply; transition:opacity 1s; }
.sk-eclair{ position:absolute; inset:0; background:#eef3ff; opacity:0; pointer-events:none; }
.skos.orage .sk-eclair{ animation:skEclair 6s infinite; }
@keyframes skEclair{ 0%,71%,73.5%,76%,100%{ opacity:0; } 72%{ opacity:.55; } 75%{ opacity:.35; } }
.sk-haze{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(200,205,215,.55), rgba(170,175,185,.35));
  opacity:var(--haze); transition:opacity .8s; }
.sk-wet{ position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(150,180,220,.22) 60%, rgba(120,150,200,.30));
  opacity:var(--wet); transition:opacity .8s; mix-blend-mode:screen; }
.sk-rain{ position:absolute; inset:-20% -10%; opacity:var(--rain); transition:opacity .6s; pointer-events:none;
  background-image:repeating-linear-gradient(105deg, rgba(220,230,255,.0) 0 7px, rgba(220,230,255,.32) 7px 8px, rgba(220,230,255,0) 8px 23px);
  background-size:180px 180px; animation:skPluie .45s linear infinite; }
@keyframes skPluie{ to{ background-position:-48px 180px; } }
.sk-vignette{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.55)); }

/* ---------------- la barre du haut ---------------- */
.sk-ui{ position:absolute; inset:0; display:flex; flex-direction:column; }
.sk-bar{ position:relative; margin:14px 16px 0; height:62px; flex:none; display:flex; align-items:center; gap:12px; padding:0 18px 0 14px;
  border-radius:16px; background:rgba(18,18,22,.80); border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.9); overflow:visible; z-index:3; }
.sk-bar::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:linear-gradient(105deg, transparent 0 40%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.085) 47%, transparent 52%) no-repeat;
  background-size:300% 100%; animation:skReflet 7s linear infinite; }
@keyframes skReflet{ 0%{ background-position:130% 0 } 26%,100%{ background-position:-40% 0 } }
.sk-bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--ac), transparent) no-repeat; background-size:240px 2px;
  animation:skLisere 4.5s linear infinite; opacity:.9; }
@keyframes skLisere{ from{ background-position:-240px 0 } to{ background-position:calc(100% + 240px) 0 } }
.sk-logo{ height:38px; width:auto; flex:none; cursor:default; }
.sk-adm{ flex:none; height:38px; display:flex; align-items:center; gap:9px; padding:0 14px 0 10px; border-radius:11px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); text-align:left; transition:background .2s, border-color .2s; }
.sk-adm:hover{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.4); }
.sk-adm svg{ width:15px; height:15px; color:var(--tx3); flex:none; }
.sk-adm b{ display:block; font:italic 900 11.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.08em; color:var(--tx2); }
.sk-adm small{ display:block; font-size:10px; color:var(--tx3); margin-top:2px; }
.sk-adm.oui{ background:color-mix(in srgb, var(--ac) 40%, transparent); border-color:var(--ac); }
.sk-adm.oui b{ color:#fff; } .sk-adm.oui svg{ color:#fff; }
.sk-adm.actif{ background:var(--ac); }
.sk-ics{ flex:1; display:flex; justify-content:center; align-items:center; gap:7px; min-width:0; }
.sk-ic{ position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--tx2);
  transition:background .2s, border-color .2s, color .2s, transform .15s; }
.sk-ic svg{ width:19px; height:19px; }
.sk-ic:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); color:#fff; }
.sk-ic:active{ transform:scale(.93); }
.sk-ic.actif{ color:#fff; background:color-mix(in srgb, var(--c) 34%, transparent); border-color:var(--c);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); animation:skSouffle 2.6s ease-in-out infinite; }
@keyframes skSouffle{ 50%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 34%, transparent), 0 0 18px -2px var(--c); } }
.sk-ic .sk-mot{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,-3px); white-space:nowrap; pointer-events:none;
  font:600 9.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.12em; color:var(--tx2); opacity:0; transition:opacity .15s, transform .15s; }
.sk-ic:hover .sk-mot{ opacity:1; transform:translate(-50%,0); }
.sk-ic.off{ color:var(--tx3); opacity:.55; cursor:default; }
.sk-sep{ width:1px; height:26px; background:rgba(255,255,255,.16); margin:0 4px; flex:none; }
.sk-droite{ flex:none; display:flex; align-items:baseline; gap:22px; }
.sk-heure{ font:700 19px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); font-variant-numeric:tabular-nums; }
.sk-ver{ font:600 13.5px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx2); letter-spacing:.02em; }
.sk-pseudo{ font:italic 900 16px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); letter-spacing:.02em; }

/* ---------------- la fenetre qui se deplie ---------------- */
.sk-win{ position:relative; flex:1; min-height:0; margin:14px 16px 16px; display:flex; flex-direction:column; gap:12px;
  transform-origin:50% 0; transition:opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), clip-path .5s cubic-bezier(.65,0,.2,1); }
.skos:not(.ouvert) .sk-win{ opacity:0; transform:translateY(-14px) scale(.985); clip-path:inset(0 0 100% 0 round 16px); pointer-events:none; }
.skos.ouvert .sk-win{ clip-path:inset(0 0 0 0 round 16px); }
.sk-page{ display:none; flex:1; min-height:0; gap:12px; }
.sk-page.on{ display:grid; }
.sk-page.on > *{ animation:skMonte .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 55ms); }
@keyframes skMonte{ from{ opacity:0; transform:translateY(14px); } }
.sk-col{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.sk-vide{ pointer-events:none; }

/* la rangee d'ateliers (garage) */
.sk-ateliers{ flex:none; align-self:center; display:flex; gap:4px; padding:5px; border-radius:14px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:rgba(18,18,22,.78); border:1px solid rgba(255,255,255,.09); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.sk-ateliers::-webkit-scrollbar{ display:none; }
.sk-at{ flex:none; display:flex; align-items:center; gap:6px; height:30px; padding:0 11px 0 9px; border-radius:9px; border:1px solid transparent;
  font:700 10.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tx2); transition:background .2s, color .2s; }
.sk-at i{ width:7px; height:7px; border-radius:2px; background:var(--c); opacity:.55; transform:rotate(45deg); }
.sk-at:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sk-at.on{ color:#fff; background:color-mix(in srgb, var(--c) 30%, transparent); border-color:var(--c); }
.sk-at.on i{ opacity:1; }

/* ---------------- panneaux ---------------- */
/* ⚠️ padding:0 — les panneaux sont des <section>, et le site donne 64 a 120 px de
   marge verticale a toute section : sans ce zero, chaque titre descendait de 80 px. */
.sk-pan{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; border-radius:16px; overflow:hidden; padding:0;
  background:var(--pan); border:1px solid var(--bd);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -24px rgba(0,0,0,.8); }
.sk-pan::before{ content:""; position:absolute; left:0; right:0; top:0; height:60px; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.sk-h{ flex:none; display:flex; align-items:baseline; gap:10px; padding:12px 16px 10px; min-width:0;
  background:rgba(0,0,0,.22); border-bottom:1px solid rgba(255,255,255,.05); }
.sk-h svg{ width:15px; height:15px; color:var(--ton); flex:none; align-self:center; }
.sk-h b{ font:italic 900 19px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); text-transform:uppercase; letter-spacing:.01em; white-space:nowrap; }
.sk-h small{ font-size:11.5px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sk-h .sk-d{ margin-left:auto; font-size:11px; color:var(--tx3); white-space:nowrap; }
.sk-h .sk-d.vert{ color:#3DE88A; } .sk-h .sk-d.vert b{ font:inherit; color:inherit; }
.sk-sub{ flex:none; display:flex; align-items:center; gap:9px; padding:10px 14px 6px; }
.sk-sub b{ font:italic 900 14.5px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); text-transform:uppercase; }
.sk-sub svg{ width:13px; height:13px; color:var(--ton); }
.sk-sub .sk-d{ margin-left:auto; font-size:11px; color:var(--tx3); }
.sk-in{ flex:1; min-height:0; padding:10px 14px 14px; overflow:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
.sk-bloc{ border-radius:12px; background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.06); margin-bottom:10px; overflow:hidden; }
.sk-bloc:last-child{ margin-bottom:0; }
.sk-bloc > .sk-in2{ padding:6px 12px 12px; }
.sk-pied{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px 12px; border-top:1px solid rgba(255,255,255,.06); }
.sk-pied b{ display:block; font:600 11.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.14em; color:var(--tx2); }
.sk-pied small{ display:block; font-size:10.5px; color:var(--tx3); margin-top:4px; }
.sk-fl{ width:32px; height:32px; flex:none; border-radius:9px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
  color:var(--tx); transition:background .2s, border-color .2s, transform .2s; }
.sk-fl:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5); transform:translateX(2px); }
.sk-fl svg{ width:14px; height:14px; }
.sk-lbl{ font:600 10.5px/1 "Segoe UI", system-ui, sans-serif; letter-spacing:.16em; color:var(--tx3); text-transform:uppercase; margin:12px 0 8px; }
.sk-lbl:first-child{ margin-top:2px; }
.sk-note{ font-size:11px; color:var(--tx3); margin:8px 0 0; }
.sk-note.vert{ color:#3DE88A; }
.sk-ligne{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:12px; }
.sk-ligne span:first-child{ color:var(--tx3); } .sk-ligne span:last-child{ color:var(--tx); text-align:right; }

/* ---------------- controles ---------------- */
.sk-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sk-chips.plein > *{ flex:1; }
.sk-chip{ min-height:30px; padding:6px 12px; border-radius:9px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09);
  font-size:12px; color:var(--tx2); text-align:center; white-space:nowrap; transition:background .18s, border-color .18s, color .18s; }
.sk-chip:hover{ background:rgba(255,255,255,.11); color:#fff; }
.sk-chip.on{ background:#8E1B2C; border-color:var(--ac); color:#fff; box-shadow:0 6px 18px -8px rgba(200,37,60,.8); }
.sk-chip.maj, .sk-chips.maj .sk-chip{ font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:11px; }
.sk-btn{ min-height:32px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  font:600 12px/1.1 "Segoe UI", system-ui, sans-serif; color:var(--tx); transition:background .2s, border-color .2s; }
.sk-btn:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.4); }
.sk-btn em{ font-style:normal; color:#ff4a5e; }
.sk-btn.rouge{ background:linear-gradient(135deg, #e0283f, #a3172b); border-color:#ff4a5e; }
.sk-btn.large{ width:100%; border-radius:12px; }
.sk-tog{ position:relative; width:38px; height:22px; flex:none; border-radius:999px; background:rgba(255,255,255,.12); transition:background .2s; }
.sk-tog::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#d6d8dd; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.sk-tog.on{ background:#e0283f; } .sk-tog.on::after{ transform:translateX(16px); background:#fff; }
.sk-row{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:11px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.sk-row + .sk-row{ margin-top:6px; }
.sk-row .sk-grow{ flex:1; min-width:0; }
.sk-row.on{ background:color-mix(in srgb, var(--ac) 32%, transparent); border-color:color-mix(in srgb, var(--ac) 80%, transparent); }

/* le curseur de l'OS : libelle centre au-dessus, rail rouge -> magenta, valeur en boite */
.sk-sl{ display:grid; grid-template-columns:22px 1fr 62px; align-items:end; gap:4px 10px; padding:5px 0; }
.sk-sl > svg{ width:15px; height:15px; color:var(--tx3); align-self:center; margin-top:12px; }
.sk-sl label{ display:block; text-align:center; font-size:11px; color:var(--tx2); margin-bottom:-2px; }
.sk-sl output{ height:24px; border-radius:7px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  font-size:11.5px; color:var(--tx); font-variant-numeric:tabular-nums; }
.sk-sl.nu{ grid-template-columns:1fr 62px; }
.sk-r{ -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; margin:0; --v:50%; }
.sk-r::-webkit-slider-runnable-track{ height:4px; border-radius:4px; background:linear-gradient(90deg, #e0283f, #d63ad6 var(--v), rgba(255,255,255,.13) var(--v)); }
.sk-r::-moz-range-track{ height:4px; border-radius:4px; background:linear-gradient(90deg, #e0283f, #d63ad6 var(--v), rgba(255,255,255,.13) var(--v)); }
.sk-r::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-5.5px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 3px rgba(0,0,0,.35); transition:transform .15s; }
.sk-r::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.sk-r:hover::-webkit-slider-thumb{ transform:scale(1.18); }
.sk-r.ver{ --v:50%; }
.sk-r.ver::-webkit-slider-runnable-track{ background:linear-gradient(90deg, #00a35a, #3DE88A var(--v), rgba(255,255,255,.13) var(--v)); }
.sk-r.ver::-moz-range-track{ background:linear-gradient(90deg, #00a35a, #3DE88A var(--v), rgba(255,255,255,.13) var(--v)); }
.sk-r.temps::-webkit-slider-runnable-track{ background:linear-gradient(90deg, #0b1630, #1d3c7a 18%, #ff8a3d 27%, #6fb6ff 38%, #8fd0ff 50%, #6fb6ff 62%, #ff8a3d 74%, #1d3c7a 82%, #0b1630); }
.sk-r.temps::-moz-range-track{ background:linear-gradient(90deg, #0b1630, #1d3c7a 18%, #ff8a3d 27%, #6fb6ff 38%, #8fd0ff 50%, #6fb6ff 62%, #ff8a3d 74%, #1d3c7a 82%, #0b1630); }

.sk-sw{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.sk-sw button{ aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s) 55%, #fff), var(--s) 45%, color-mix(in srgb, var(--s) 55%, #000));
  box-shadow:0 3px 8px -2px rgba(0,0,0,.6); transition:transform .15s, box-shadow .15s; max-width:26px; justify-self:center; width:100%; }
.sk-sw button:hover{ transform:scale(1.15); }
.sk-sw button.on{ box-shadow:0 0 0 2px #0b0b0e, 0 0 0 4px #fff; }
.sk-bande{ display:grid; grid-template-columns:repeat(12, 1fr); gap:5px; }
.sk-bande button{ height:22px; border-radius:6px; background:var(--s); border:1px solid rgba(255,255,255,.12); transition:transform .15s; }
.sk-bande button:hover{ transform:translateY(-2px); }
.sk-bande button.on{ outline:2px solid #fff; outline-offset:1px; }

/* ---------------- la voiture (SVG, couleurs en variables) ---------------- */
.sk-car{ display:block; width:100%; height:auto; overflow:visible; }
.sk-car .corps{ transform:translateY(calc(var(--lift) * -1)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.sk-car .neon{ opacity:var(--neonA); transition:opacity .4s; }
.skos.neon-off .sk-car .neon{ opacity:0; }
.skos.neon-pulse .sk-car .neon{ animation:skPulse 1.1s ease-in-out infinite; }
.skos.neon-rgb .sk-car .neon{ animation:skRGB 3s linear infinite; }
@keyframes skPulse{ 50%{ opacity:.12; } }
@keyframes skRGB{ 0%{ fill:#ff2d55 } 20%{ fill:#ff8a00 } 40%{ fill:#ffd60a } 60%{ fill:#00e676 } 80%{ fill:#00b6ff } 100%{ fill:#a855f7 } }
.sk-car .jante{ transform-box:fill-box; transform-origin:center; }
.sk-car.tourne .jante{ animation:skTourne .9s cubic-bezier(.2,.8,.2,1); }
@keyframes skTourne{ from{ transform:rotate(-300deg); } }
.sk-car .ail{ opacity:0; transform:translateY(10px); transition:opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.skos[data-ail="1"] .sk-car .ail1, .skos[data-ail="2"] .sk-car .ail2, .skos[data-ail="3"] .sk-car .ail3{ opacity:1; transform:none; }
.sk-car .flamme{ opacity:0; transform-box:fill-box; transform-origin:right center; }
.skos.flammes .sk-car .flamme{ animation:skFlamme 2.6s infinite; }
@keyframes skFlamme{ 0%,62%,100%{ opacity:0; transform:scaleX(.3); } 66%{ opacity:1; transform:scaleX(1.1); } 70%{ opacity:.7; transform:scaleX(.7); } 74%{ opacity:1; transform:scaleX(1.25); } 80%{ opacity:0; transform:scaleX(.5); } }
.sk-car .fumee circle{ opacity:0; transform-box:fill-box; transform-origin:center; }
.skos.fumee .sk-car .fumee circle{ animation:skFumee 2.2s ease-out infinite; animation-delay:calc(var(--k) * .35s); }
@keyframes skFumee{ 0%{ opacity:0; transform:translate(0,0) scale(.3); } 15%{ opacity:.55; } 100%{ opacity:0; transform:translate(-90px,-34px) scale(2.4); } }
/* trois dessins de jante, un seul visible a la fois */
.skos[data-js="0"] .sk-car .js1, .skos[data-js="0"] .sk-car .js2,
.skos[data-js="1"] .sk-car .js0, .skos[data-js="1"] .sk-car .js2,
.skos[data-js="2"] .sk-car .js0, .skos[data-js="2"] .sk-car .js1{ display:none; }
/* l'aileron se cale avec les curseurs de l'atelier */
.sk-car .aile{ transform-box:fill-box; transform-origin:50% 100%; transition:transform .3s;
  transform:translate(var(--ax, 0px), var(--ay, 0px)) rotate(var(--aa, 0deg)) scale(calc(var(--ae, 1) * var(--aw, 1)), var(--ae, 1)); }
/* phares, feux, clignotants, gyrophares */
.sk-car .phare-l, .sk-car .feu-l{ opacity:.75; transition:opacity .3s; }
.skos.feux-off .sk-car .phare-l, .skos.feux-off .sk-car .feu-l{ opacity:0; }
.skos.feux-off .sk-car .phare{ fill:#9aa7b4; }
.skos.appel .sk-car .phare-l{ animation:skAppel 1s; }
@keyframes skAppel{ 0%,40%,100%{ opacity:.75; } 15%,55%{ opacity:1; transform:scale(1.6); transform-origin:590px 132px; } 30%{ opacity:.1; } }
.sk-car .cligno{ opacity:.3; }
.skos.warn .sk-car .cligno, .skos.cligno1 .sk-car .cligno{ animation:skCli .8s steps(1) infinite; }
@keyframes skCli{ 0%{ opacity:1; filter:drop-shadow(0 0 4px #ffb020); } 50%{ opacity:.25; filter:none; } }
.sk-car .gyro{ opacity:0; transition:opacity .3s; }
.skos.gyro .sk-car .gyro{ opacity:1; }
.skos.gyro .sk-car .g1{ animation:skG 0.6s steps(1) infinite; }
.skos.gyro .sk-car .g2{ animation:skG 0.6s steps(1) infinite reverse; }
@keyframes skG{ 0%{ opacity:1; filter:drop-shadow(0 0 6px currentColor); } 50%{ opacity:.15; } }
.sk-centre{ justify-content:center; pointer-events:none; }
.sk-centre .sk-scene-car{ flex:1; min-height:0; }
.sk-centre .sk-car{ max-height:none; filter:drop-shadow(0 30px 30px rgba(0,0,0,.6)); }
.skos.ouvert .sk-hint{ opacity:0; }
#skAt{ min-height:0; }
#skAt > div{ min-height:0; height:100%; }
.sk-row.on{ cursor:pointer; }
.sk-scene-car{ position:relative; display:flex; align-items:center; justify-content:center; min-height:110px; flex:1; padding:6px 14px 0; }
.sk-scene-car .sk-car{ width:100%; height:100%; max-height:340px; }
.sk-scene-car::after{ content:""; position:absolute; left:8%; right:8%; bottom:4%; height:22%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.07), transparent); pointer-events:none; }
.sk-plaque{ flex:none; display:flex; align-items:center; gap:14px; padding:10px 16px 12px; background:rgba(0,0,0,.35); border-top:1px solid rgba(255,255,255,.06); }
.sk-plaque .sk-grow{ flex:1; min-width:0; }
.sk-plaque b{ display:block; font:italic 900 26px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:uppercase; }
.sk-plaque small{ display:block; font-size:11.5px; color:var(--tx2); letter-spacing:.06em; margin-top:5px; }
.sk-plaque small span{ color:var(--tx3); margin:0 9px; }

/* ---------------- pieces de page ---------------- */
.sk-entete{ flex:none; }
.sk-entete .sk-h{ border-bottom:0; background:transparent; padding:12px 18px; }
.sk-pastille{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff; }
.sk-niv{ display:flex; gap:3px; align-items:center; height:16px; }
.sk-niv i{ width:4px; border-radius:2px; background:#3DE88A; height:30%; animation:skNiv .9s ease-in-out infinite; animation-delay:calc(var(--k) * -.17s); }
.sk-niv.calme i{ animation:none; height:22%; opacity:.4; }
@keyframes skNiv{ 0%,100%{ height:22%; } 30%{ height:100%; } 60%{ height:48%; } }
.sk-jauge{ height:4px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; }
.sk-jauge i{ display:block; height:100%; width:var(--w); background:var(--c, #3DE88A); border-radius:4px; transition:width .25s; }
.sk-anneau{ position:relative; width:104px; height:104px; flex:none; }
.sk-anneau svg{ width:100%; height:100%; transform:rotate(-90deg); }
.sk-anneau b{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; font:700 20px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); }
.sk-anneau small{ display:block; font-size:10.5px; color:var(--tx3); font-weight:400; margin-top:5px; text-align:center; }
.sk-plus{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.sk-plus button{ aspect-ratio:1.05; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--tx3); font-size:20px; transition:background .2s, color .2s; }
.sk-plus button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sk-plus button.plein{ color:#fff; background:color-mix(in srgb, var(--c) 22%, transparent); border-color:var(--c); font-size:10px; font-weight:700; letter-spacing:.08em; }
.sk-dome{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sk-dome button{ position:relative; aspect-ratio:2.2; border-radius:9px; background:#111 center/cover; border:1px solid rgba(255,255,255,.1); transition:transform .2s, box-shadow .2s; }
.sk-dome button:hover{ transform:translateY(-2px); }
.sk-dome button.on{ box-shadow:0 0 0 2px #fff, 0 8px 20px -6px rgba(0,0,0,.8); }
.sk-dome button span{ position:absolute; left:6px; top:4px; font-size:10px; font-weight:700; color:#fff; text-shadow:0 1px 3px #000; }
.sk-meteo{ display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.sk-meteo button{ height:52px; border-radius:10px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px; font-size:11px; color:var(--tx2);
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); transition:background .2s; }
.sk-meteo button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sk-meteo button.on{ background:#7d1018; border-color:#b31c29; color:#fff; }
.sk-arbre{ font-size:12.5px; }
.sk-canal{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.035); margin-top:4px; cursor:pointer; transition:background .2s; }
.sk-canal:hover{ background:rgba(255,255,255,.08); }
.sk-canal.ici{ background:rgba(200,37,60,.38); box-shadow:inset 3px 0 0 #ff4a5e; color:#fff; }
.sk-canal .sk-d{ margin-left:auto; font-size:11px; color:#3DE88A; }
.sk-canal .duel{ margin-left:auto; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:5px; background:#ffd60a; color:#111; letter-spacing:.06em; }
.sk-membre{ padding:2px 0 2px 34px; font-size:12px; color:var(--tx2); display:flex; gap:8px; align-items:center; }
.sk-membre::before{ content:""; width:5px; height:5px; border-radius:50%; background:#ff4a5e; flex:none; }
.sk-membre.toi{ color:#fff; } .sk-membre em{ font-style:normal; color:var(--tx3); margin-left:auto; }
.sk-plan{ position:relative; flex:1; min-height:0; margin:10px 14px 0; border-radius:12px; background:#05060a; border:1px solid rgba(255,255,255,.06); overflow:hidden; cursor:grab; }
.sk-plan svg{ position:absolute; inset:0; width:100%; height:100%; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.sk-plan .sk-zoombt{ position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:8px; z-index:2; }
.sk-plan .sk-zoombt button{ width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.5); color:#fff; font-size:16px; display:grid; place-items:center; }
.sk-plan .sk-zoombt button.moi{ background:#d11a2a; border-color:#ff6a78; }
.sk-legende{ flex:none; display:flex; flex-wrap:wrap; gap:14px; padding:9px 16px 12px; font-size:11px; color:var(--tx2); }
.sk-legende i{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; background:var(--c); }
.sk-stats3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px; }
.sk-stats3 div{ padding:9px 10px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); }
.sk-stats3 small{ display:block; font-size:9.5px; letter-spacing:.14em; font-weight:700; color:var(--c); }
.sk-stats3 b{ display:block; font:italic 900 19px/1 "Segoe UI", system-ui, sans-serif; color:var(--tx); margin-top:5px; }
.sk-console{ font:11.5px/1.5 ui-monospace, Consolas, monospace; color:var(--tx2); min-height:70px; max-height:120px; overflow:auto; }
.sk-console p{ margin:0; } .sk-console .ok{ color:#3DE88A; }
.sk-champ{ height:32px; border-radius:9px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); padding:0 10px; display:flex; align-items:center; font-size:12px; color:var(--tx3); }
.sk-touche{ min-width:86px; height:28px; padding:0 10px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font:600 11.5px/1 ui-monospace, Consolas, monospace; color:#fff; transition:background .2s, border-color .2s; }
.sk-touche.ecoute{ background:rgba(200,37,60,.3); border-color:#ff4a5e; animation:skClign 1s steps(2) infinite; }
@keyframes skClign{ 50%{ border-color:transparent; } }
.sk-app{ display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.sk-app + .sk-app{ margin-top:8px; }
.sk-app .sk-logoapp{ width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; background:linear-gradient(135deg, #2a0a10, #12070a); border:1px solid rgba(200,37,60,.5);
  font:italic 900 12px/1 "Segoe UI", system-ui, sans-serif; color:#fff; }
.sk-app b{ display:block; font-size:13px; color:var(--tx); }
.sk-app small{ display:block; font-size:11px; color:var(--tx3); margin-top:2px; }
.sk-app .sk-btn{ flex:none; min-width:96px; position:relative; overflow:hidden; }
.sk-app .sk-btn i{ position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(61,232,138,.35); transition:width .1s linear; }
.sk-app .sk-btn span{ position:relative; }
.sk-pick{ display:grid; grid-template-columns:1fr 18px 92px; gap:10px; }
.sk-sv{ position:relative; height:150px; border-radius:6px; cursor:crosshair; touch-action:none;
  background:linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(var(--h) 100% 50%)); }
.sk-sv i, .sk-hue i{ position:absolute; pointer-events:none; }
.sk-sv i{ width:12px; height:12px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.6); transform:translate(-50%,-50%); }
.sk-hue{ position:relative; border-radius:5px; cursor:ns-resize; touch-action:none;
  background:linear-gradient(180deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.sk-hue i{ left:-3px; right:-3px; height:4px; border-radius:2px; background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.6); transform:translateY(-50%); }
.sk-boule{ width:58px; height:58px; border-radius:50%; margin:6px auto 4px;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s) 45%, #fff) 0 8%, var(--s) 45%, color-mix(in srgb, var(--s) 45%, #000)); box-shadow:0 8px 20px -6px rgba(0,0,0,.8); }
.sk-cible{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); }
.sk-cible b{ display:block; font:italic 900 20px/1.1 "Segoe UI", system-ui, sans-serif; color:var(--tx); }
.sk-cible small{ display:flex; align-items:center; gap:7px; color:var(--tx2); font-size:11.5px; margin-top:5px; }
.sk-pt{ width:11px; height:11px; border-radius:50%; background:var(--s); box-shadow:0 0 0 1px rgba(255,255,255,.25); flex:none; display:inline-block; }
.sk-pieces{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sk-piece{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); text-align:left; transition:background .2s; }
.sk-piece:hover{ background:rgba(255,255,255,.08); }
.sk-piece.on{ background:rgba(200,37,60,.36); border-color:rgba(255,74,94,.8); }
.sk-piece b{ display:block; font-size:12.5px; font-weight:600; color:var(--tx); }
.sk-piece small{ display:block; font-size:10.5px; color:var(--tx3); }
.sk-piece .sk-pt{ width:14px; height:14px; }
.sk-mat{ display:grid; grid-template-columns:repeat(6, 1fr); gap:6px; }
.sk-mat button{ padding:7px 2px 6px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); font-size:10.5px; color:var(--tx2); transition:background .2s; }
.sk-mat button i{ display:block; width:16px; height:16px; border-radius:50%; margin:0 auto 5px; background:radial-gradient(circle at 35% 30%, #ff9aa5, var(--paint) 50%, #2a0508); }
.sk-mat button.on{ background:#7d1018; border-color:#d11a2a; color:#fff; }
.sk-liste-at{ display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; }
.sk-liste-at button{ display:flex; align-items:center; gap:9px; padding:5px 4px; border-radius:7px; font-size:12.5px; color:var(--tx2); text-align:left; transition:background .2s, color .2s; }
.sk-liste-at button:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sk-liste-at i{ width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:var(--c); flex:none; }
.sk-tuile{ display:flex; align-items:center; gap:12px; padding:0; border-radius:11px; overflow:hidden; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); width:100%; text-align:left; transition:background .2s, border-color .2s; }
.sk-tuile + .sk-tuile{ margin-top:7px; }
.sk-tuile:hover{ background:rgba(255,255,255,.08); }
.sk-tuile.on{ border-color:var(--ac); background:rgba(200,37,60,.22); }
.sk-tuile svg{ width:62px; height:50px; flex:none; background:rgba(255,255,255,.04); }
.sk-tuile span{ font-size:12.5px; color:var(--tx); padding-right:10px; }
.sk-cache{ position:absolute; inset:0; z-index:4; display:grid; place-items:center; pointer-events:none; }
.sk-hint{ position:absolute; left:50%; top:96px; transform:translateX(-50%); z-index:4; pointer-events:none; display:flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:999px; background:rgba(10,10,12,.82); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:12.5px; font-weight:600;
  transition:opacity .4s; animation:skFlotte 2.4s ease-in-out infinite; }
.sk-hint::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--ac); box-shadow:0 0 10px var(--ac); }
.skos.touche .sk-hint{ opacity:0; }
@keyframes skFlotte{ 50%{ transform:translate(-50%, 5px); } }
.sk-toast{ position:absolute; left:50%; bottom:22px; transform:translate(-50%, 20px); z-index:5; padding:9px 16px; border-radius:12px; pointer-events:none;
  background:rgba(12,12,14,.92); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:12.5px; opacity:0; transition:opacity .25s, transform .3s; }
.sk-toast.on{ opacity:1; transform:translate(-50%, 0); }

/* ---------------- le texte sous la replique ---------------- */
.sk-info{ max-width:980px; margin:26px auto 0; display:grid; grid-template-columns:auto 1fr; gap:6px 22px; align-items:start; text-align:left; min-height:92px; }
.sk-info .sk-info-k{ grid-row:span 2; width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:color-mix(in srgb, var(--c) 26%, #0b0b0e); border:1px solid var(--c); box-shadow:0 10px 30px -12px var(--c); transition:background .3s, border-color .3s; }
.sk-info .sk-info-k svg{ width:24px; height:24px; }
.sk-info h3{ margin:2px 0 0; font-style:italic; font-weight:900; text-transform:uppercase; font-size:1.35rem; letter-spacing:.01em; }
.sk-info h3 span{ color:var(--c); }
.sk-info p{ margin:0; color:#cfd0d6; }
.sk-info p b{ color:#fff; }
.sk-info .essaie{ display:block; margin-top:6px; font-size:.88rem; color:var(--soft); }
.sk-info .essaie::before{ content:"Essaie : "; color:var(--red); font-weight:700; font-style:italic; }
.sk-avert{ text-align:center; margin:14px auto 0; font-size:.82rem; color:var(--soft); max-width:760px; }

/* ---------------- grilles des pages (bureau) ---------------- */
.pg-accueil{ grid-template-rows:1.38fr 1fr; }
.pg-accueil .r1{ display:grid; grid-template-columns:1.62fr 1fr; gap:12px; min-height:0; }
.pg-accueil .r2{ display:grid; grid-template-columns:.78fr 1fr 1.08fr .92fr; gap:12px; min-height:0; }
.pg-garage{ grid-template-rows:1fr .92fr; }
.pg-garage .r1{ display:grid; grid-template-columns:.62fr 1.75fr .62fr; gap:12px; min-height:0; }
.pg-garage .r2{ display:grid; grid-template-columns:1fr .9fr .78fr 1.02fr; gap:12px; min-height:0; }
.pg-atelier{ grid-template-columns:1fr 1.05fr 1fr; }
.pg-cotes{ grid-template-columns:1fr 1.15fr 1fr; }
.pg-trois{ grid-template-columns:repeat(3, 1fr); }
.pg-carte{ grid-template-columns:1.7fr 1fr; }
.pg-deux{ grid-template-columns:1fr 1fr; }

/* ---------------- telephone et tablette : la replique se deroule ---------------- */
@media (max-width:1100px){
  .sk-ver{ display:none; }
  .sk-adm small{ display:none; }
}
@media (max-width:980px){
  .skos{ aspect-ratio:auto; min-height:0; max-height:none; width:calc(100vw - 24px); }
  .sk-ui{ position:relative; }
  .sk-bar{ height:auto; flex-wrap:wrap; padding:10px 12px; gap:10px; margin:10px 10px 0; }
  .sk-logo{ height:30px; }
  .sk-droite{ margin-left:auto; gap:12px; }
  .sk-pseudo{ display:none; }
  .sk-ics{ order:3; flex:1 0 100%; justify-content:flex-start; overflow-x:auto; padding:2px 2px 18px; scrollbar-width:none; }
  .sk-ics::-webkit-scrollbar{ display:none; }
  .sk-ic .sk-mot{ opacity:.8; transform:translate(-50%,0); font-size:8px; letter-spacing:.06em; }
  .sk-win{ margin:12px 10px 10px; }
  .skos:not(.ouvert) .sk-win{ display:none; }
  .sk-page.on{ display:flex; flex-direction:column; }
  .sk-page .r1, .sk-page .r2{ display:flex; flex-direction:column; gap:12px; }
  .sk-vide{ display:none; }
  .sk-pan{ max-height:none; }
  .sk-in{ overflow:visible; }
  .sk-hint{ top:auto; bottom:14px; }
  .sk-ui{ min-height:260px; }
  .sk-scene{ position:absolute; }
  .sk-pick{ grid-template-columns:1fr 18px 80px; }
  .sk-plan{ height:300px; flex:none; }
  .sk-info{ grid-template-columns:1fr; }
  .sk-info .sk-info-k{ display:none; }
}
@media (max-width:560px){
  .sk-pieces, .sk-liste-at{ grid-template-columns:1fr; }
  .sk-mat{ grid-template-columns:repeat(3, 1fr); }
  .sk-plaque b{ font-size:19px; }
  .sk-h b{ font-size:17px; }
}
@media (prefers-reduced-motion:reduce){
  .skos *, .skos *::before, .skos *::after{ animation:none !important; transition:none !important; }
}