/* ===== AlonePC — Explorateur · style partagé ===== */
:root{
  --blue:#1B4F8A;--blue-dark:#143A66;--blue-soft:#EAF1FA;
  --red:#D11E3C;--red-dark:#A81730;--green:#178A3C;--green-dark:#0F6B2C;
  --ink:#16263A;--slate:#51637A;--bg:#FFFFFF;--border:#E2E9F1;
  --ff-head:'Plus Jakarta Sans',sans-serif;--ff-body:'Figtree',system-ui,sans-serif;
  --tb:56px;--radius:12px;
  --shadow:0 28px 70px -25px rgba(11,30,55,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ff-body);color:var(--ink);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ff-head);line-height:1.15;letter-spacing:-.01em}
a{color:var(--blue)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.3rem;border-radius:11px;font-family:var(--ff-head);font-weight:700;font-size:.96rem;border:2px solid transparent;text-decoration:none;transition:transform .2s,background .2s,border-color .2s}
.btn svg{width:18px;height:18px}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:var(--green-dark);transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark);transform:translateY(-2px)}
.btn-out{background:#fff;color:var(--blue);border-color:var(--border)}.btn-out:hover{border-color:var(--blue);background:var(--blue-soft)}
.stars{color:#F6A609;letter-spacing:2px}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:700;color:var(--blue);background:var(--blue-soft);padding:.4rem .8rem;border-radius:999px}

/* ===== SEO fallback / no-JS one-page ===== */
#seo{max-width:880px;margin:0 auto;padding:40px 22px 90px}
#seo h1{font-size:clamp(1.9rem,4.5vw,2.6rem);color:var(--ink);margin-bottom:1rem}
#seo .lead{font-size:1.12rem;color:var(--slate);margin-bottom:1.6rem}
#seo section{padding:1.6rem 0;border-top:1px solid var(--border)}
#seo h2{font-size:1.5rem;color:var(--blue);margin-bottom:.6rem}
#seo p{color:var(--slate);margin-bottom:.7rem}
#seo ul{margin:.4rem 0 .8rem 1.1rem}#seo li{margin-bottom:.3rem}
#seo .discover{display:inline-block;margin-top:.4rem;font-weight:700}
.no-js-hint{background:var(--blue-soft);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem;font-size:.9rem;color:var(--blue);margin-bottom:1.4rem}

/* When JS runs, the desktop covers the SEO content (still in DOM for crawlers) */
.js body{overflow:hidden;height:100vh}
.js .no-js-hint{display:none}

/* ===== DESKTOP ===== */
#desktop{position:fixed;inset:0 0 var(--tb) 0;z-index:500;overflow:hidden;
  background:radial-gradient(1100px 700px at 80% -10%,rgba(255,255,255,.10),transparent 60%),linear-gradient(160deg,var(--blue),var(--blue-dark))}
#desktop::before{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 8 82 45 45 82 8 45Z' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E")}
.toast{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:560;background:rgba(255,255,255,.95);color:var(--ink);padding:.6rem 1.1rem;border-radius:999px;font-size:.86rem;font-weight:600;box-shadow:0 10px 30px -10px rgba(0,0,0,.4);transition:opacity .5s}
#icons{position:absolute;inset:18px auto auto 18px;display:flex;flex-direction:column;flex-wrap:wrap;gap:6px;max-height:calc(100% - 36px);align-content:flex-start;z-index:520}
.icon{width:104px;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.7rem .4rem;border:1px solid transparent;border-radius:10px;background:transparent;color:#fff;text-align:center;text-decoration:none;transition:background .15s,border-color .15s}
.icon:hover,.icon:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.icon .glyph{width:50px;height:50px;display:grid;place-items:center;font-size:1.7rem;background:rgba(255,255,255,.16);border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.icon .lbl{font-size:.78rem;font-weight:600;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.icon .ext{font-size:.62rem;opacity:.85}

/* Backdrop + window (centered modal) */
.backdrop{position:fixed;inset:0 0 var(--tb) 0;z-index:600;background:rgba(11,30,55,.45);display:none}
.backdrop.show{display:block}
.win{position:fixed;z-index:650;left:50%;top:calc(50% - (var(--tb)/2));transform:translate(-50%,-50%);
  width:min(620px,92vw);max-height:82vh;background:var(--bg);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;animation:pop .22s ease}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1}}
.win-tb{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:var(--blue-soft);border-bottom:1px solid var(--border)}
.win-tb .wi{width:26px;height:26px;display:grid;place-items:center;font-size:1.1rem;background:#fff;border-radius:7px;border:1px solid var(--border)}
.win-tb .wt{font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--ink);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-cls{width:30px;height:26px;border:0;border-radius:7px;background:#fff;color:var(--slate);font-size:.95rem;display:grid;place-items:center}
.win-cls:hover{background:var(--red);color:#fff}
.win-addr{display:flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-bottom:1px solid var(--border);background:#fafcff;font-size:.78rem;color:var(--slate)}
.win-addr b{color:var(--blue)}
.win-body{padding:1.5rem 1.6rem 1.7rem;overflow:auto}
.win-body h2{font-size:1.4rem;margin-bottom:.5rem;color:var(--ink)}
.win-body p{color:var(--slate);margin-bottom:.7rem;font-size:.98rem;line-height:1.65}
.win-body strong{color:var(--ink)}
.win-body ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0 .9rem}
.win-body li{display:flex;gap:.5rem;align-items:flex-start;font-weight:600;font-size:.95rem}
.win-body li::before{content:"✓";color:var(--green);font-weight:800}
.win-body .map{border:1px solid var(--border);border-radius:10px;overflow:hidden;height:230px;margin-top:.6rem}
.win-body .map iframe{width:100%;height:100%;border:0}
.win-body .discover{display:none}            /* the inline SEO link is replaced by a styled button in-window */
.cta-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* Taskbar */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:var(--tb);z-index:700;display:flex;align-items:center;gap:.5rem;padding:0 .6rem;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-top:1px solid var(--border)}
#startBtn{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 .9rem;border-radius:9px;border:1px solid var(--border);background:#fff;font-family:var(--ff-head);font-weight:800;color:var(--blue)}
#startBtn:hover{background:var(--blue-soft)}
.mk{width:22px;height:22px;position:relative;display:grid;place-items:center}
.mk .d{position:absolute;inset:1px;border:2px solid var(--red);transform:rotate(45deg);border-radius:3px}
.mk span{position:relative;font-weight:800;font-size:.8rem;color:var(--blue)}
#taskSpacer{flex:1}
.tray{display:flex;align-items:center;gap:.55rem}
.tray .call{display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem;border-radius:9px;background:var(--green);color:#fff;font-family:var(--ff-head);font-weight:800;font-size:.9rem;text-decoration:none}
.tray .call:hover{background:var(--green-dark)}
.tray .call svg{width:16px;height:16px}
.tray .wa{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid var(--border);color:var(--green)}
.tray .wa svg{width:20px;height:20px}
.tray .clock{font-family:var(--ff-head);font-weight:700;font-size:.82rem;color:var(--ink);text-align:right;line-height:1.1;padding:0 .3rem}
.tray .clock small{display:block;font-weight:500;color:var(--slate);font-size:.68rem}

/* Start menu */
#startMenu{position:fixed;left:.6rem;bottom:calc(var(--tb) + 8px);z-index:720;width:330px;max-width:calc(100vw - 1.2rem);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:1rem;display:none}
#startMenu.open{display:block}
#startMenu h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin:.3rem 0 .5rem}
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.9rem}
.sm-item{display:flex;align-items:center;gap:.55rem;padding:.55rem .6rem;border-radius:9px;border:1px solid transparent;background:transparent;text-align:left;font-weight:600;font-size:.86rem;color:var(--ink);width:100%;text-decoration:none}
.sm-item:hover{background:var(--blue-soft)}
.sm-item .g{font-size:1.1rem;width:26px;text-align:center}
.sm-eco .sm-item{border:1px solid var(--border)}
.sm-foot{display:flex;gap:.5rem;margin-top:.4rem;border-top:1px solid var(--border);padding-top:.7rem}
.sm-foot a{flex:1}

/* ===== SERVICE PAGES ===== */
.svc-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;height:60px;padding:0 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.svc-topbar .home{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-head);font-weight:800;color:var(--ink);text-decoration:none}
.svc-topbar .home:hover{color:var(--blue)}
.page-wrap{max-width:920px;margin:30px auto;padding:0 22px 60px}
.win-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.win-card .win-tb{cursor:default}
.win-card .win-body{padding:2rem 2.2rem 2.4rem}
.page-hero{background:linear-gradient(160deg,var(--blue-soft),#fff);border-bottom:1px solid var(--border);padding:1.8rem 2.2rem}
.page-hero .crumb{font-size:.8rem;color:var(--slate);margin-bottom:.6rem}
.page-hero .crumb a{color:var(--blue)}
.page-hero h1{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--ink)}
.page-hero p{color:var(--slate);margin-top:.6rem;font-size:1.05rem}
.svc-body{padding:2rem 2.2rem}
.svc-body h2{font-size:1.35rem;color:var(--blue);margin:1.6rem 0 .6rem}
.svc-body h2:first-child{margin-top:0}
.svc-body p{color:var(--slate);margin-bottom:.8rem}
.svc-body strong{color:var(--ink)}
.feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.6rem 0 1rem}
.feat li{display:flex;gap:.5rem;align-items:flex-start;font-weight:600;font-size:.97rem}
.feat li::before{content:"✓";color:var(--green);font-weight:800}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin:1rem 0 .5rem}
.step{background:var(--blue-soft);border:1px solid var(--border);border-radius:12px;padding:1.1rem}
.step .n{font-family:var(--ff-head);font-weight:800;color:var(--red);font-size:1.4rem}
.step h3{font-size:1rem;margin:.3rem 0}
.step p{font-size:.9rem;margin:0}
.cta-band{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:14px;padding:1.8rem;text-align:center;color:#fff;margin-top:1.6rem}
.cta-band h2{color:#fff;margin:0 0 .4rem}
.cta-band p{color:rgba(255,255,255,.85);margin-bottom:1rem}
.cta-band .cta-row{justify-content:center}
.cta-band .btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cta-band .btn-out:hover{background:rgba(255,255,255,.12)}
.related{margin-top:1.8rem}
.related h2{font-size:1.1rem;color:var(--ink);margin-bottom:.7rem}
.related .links{display:flex;flex-wrap:wrap;gap:.5rem}
.related a{font-weight:600;font-size:.9rem;padding:.5rem .85rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;background:#fff;color:var(--blue)}
.related a:hover{border-color:var(--blue);background:var(--blue-soft)}
.svc-foot{border-top:1px solid var(--border);background:var(--ink);color:#cdd7e2;padding:34px 22px}
.svc-foot .in{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;font-size:.88rem}
.svc-foot a{color:#cdd7e2}.svc-foot a:hover{color:#fff}
.svc-foot .eco{display:flex;flex-wrap:wrap;gap:1rem}

/* Floating call (mobile) */
.fab{display:none;position:fixed;right:16px;bottom:16px;z-index:1100;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;align-items:center;justify-content:center;box-shadow:0 12px 26px -8px rgba(15,107,44,.7)}
.fab svg{width:25px;height:25px}

@media(max-width:760px){
  #icons{flex-direction:row;flex-wrap:wrap;inset:14px;max-height:none;gap:5px;justify-content:flex-start}
  .icon{width:30%}
  .win{position:fixed;inset:8px 8px calc(var(--tb) + 8px) 8px;transform:none;left:auto;top:auto;width:auto;max-height:none;animation:none}
  #startBtn .txt{display:none}
  .tray .clock{display:none}
  .steps,.feat{grid-template-columns:1fr}
  .fab{display:flex}
  .svc-topbar .call-txt{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Écran d'accueil (lock/login) ===== */
#lock{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(1100px 700px at 80% -10%,rgba(255,255,255,.12),transparent 60%),linear-gradient(160deg,var(--blue),var(--blue-dark));
  transition:opacity .55s ease}
#lock::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 8 82 45 45 82 8 45Z' fill='none' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E")}
#lock.hide{opacity:0;pointer-events:none}
.lock-card{position:relative;color:#fff;padding:2.4rem 1.6rem;max-width:600px}
.brand-xl{display:inline-flex;align-items:center;gap:1rem;justify-content:center}
.mark-xl{width:74px;height:74px;position:relative;display:grid;place-items:center;background:#fff;border-radius:18px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.mark-xl .d{position:absolute;inset:8px;border:3px solid var(--red);transform:rotate(45deg);border-radius:5px}
.mark-xl span{position:relative;font-family:var(--ff-head);font-weight:800;font-size:1.7rem;color:var(--blue)}
.brand-xl .word{font-family:var(--ff-head);font-weight:800;font-size:clamp(2.4rem,8vw,3.6rem);color:#fff;letter-spacing:-.02em}
.lock-tag{margin-top:1.1rem;font-family:var(--ff-head);font-weight:700;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.lock-sub{margin-top:.7rem;font-size:1.15rem;color:rgba(255,255,255,.92)}
.lock-trust{margin-top:.5rem;color:rgba(255,255,255,.8);font-weight:600}
.lock-trust .stars{color:#FFC53D}
.lock-cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.lock-cta .btn svg{width:18px;height:18px}
.lock-clock{margin-top:2rem;font-family:var(--ff-head);font-weight:700;font-size:1rem;color:rgba(255,255,255,.85)}

/* Filigrane de marque sur le bureau */
#wm{position:absolute;inset:0 0 var(--tb) 0;display:grid;place-items:center;pointer-events:none;z-index:505}
#wm .t{font-family:var(--ff-head);font-weight:800;font-size:clamp(3rem,13vw,9rem);color:rgba(255,255,255,.06);letter-spacing:-.03em;user-select:none}
@media(max-width:760px){#wm .t{font-size:18vw}}

/* ===== Écran d'accueil v2 (logo réel + fond + infos) ===== */
#lock{flex-direction:column;align-items:center;justify-content:flex-start;overflow:auto;padding:clamp(22px,5vh,64px) 18px;
  background:linear-gradient(160deg,rgba(27,79,138,.90),rgba(20,58,102,.94)),url("bg-circuit.webp") center/cover no-repeat fixed}
.lock-top{width:100%;text-align:center;color:#fff;margin-bottom:clamp(14px,3vh,26px)}
.lock-time{font-family:var(--ff-head);font-weight:800;font-size:clamp(2.3rem,7vw,3.9rem);letter-spacing:.01em;text-shadow:0 2px 16px rgba(0,0,0,.35);text-transform:capitalize}
.lock-card{background:rgba(255,255,255,.97);color:var(--ink);border-radius:22px;box-shadow:0 40px 90px -28px rgba(0,0,0,.7);padding:clamp(1.5rem,4vw,2.4rem);max-width:660px;width:100%;margin:0 auto;text-align:center}
.lock-logo-img{width:clamp(180px,42vw,240px);height:auto;margin:0 auto .6rem;display:block}
.lock-sub{font-size:1.1rem;color:var(--slate);margin-bottom:.45rem}
.lock-sub strong{color:var(--blue)}
.lock-trust{font-weight:700;color:var(--ink);margin-bottom:1.1rem}
.lock-trust .stars{color:#F6A609}
.lock-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.3rem}
.lock-chips span{font-size:.84rem;font-weight:700;color:var(--blue);background:var(--blue-soft);border:1px solid var(--border);padding:.42rem .8rem;border-radius:999px}
.lock-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:1.3rem}
.lock-tile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.85rem .4rem;border:1px solid var(--border);border-radius:12px;background:#fff;font-family:var(--ff-head);font-weight:700;font-size:.82rem;color:var(--ink);transition:transform .2s,border-color .2s,background .2s}
.lock-tile:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
.lock-tile .ti{font-size:1.45rem}
.lock-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-bottom:1.3rem}
.btn-wa{background:#fff;color:var(--green);border-color:var(--border)}
.btn-wa:hover{border-color:var(--green);background:#E9F7EE}
.lock-foot{border-top:1px solid var(--border);padding-top:1rem;display:flex;flex-direction:column;gap:.45rem;font-size:.84rem;color:var(--slate)}
.lock-foot .eco a{font-weight:700}
@media(max-width:520px){.lock-tiles{grid-template-columns:repeat(2,1fr)}#lock{background-attachment:scroll}}

/* ============================================================
   v3 — Modernisation du bureau + correctif mobile écran d'accueil
   ============================================================ */
:root{--tb:78px}

/* ---- Fond de bureau : dégradé mesh moderne (fini le bleu plat) ---- */
#desktop{inset:0;background:
  radial-gradient(820px 620px at 14% 16%, rgba(72,140,232,.55), transparent 60%),
  radial-gradient(760px 560px at 86% 10%, rgba(37,99,235,.42), transparent 55%),
  radial-gradient(680px 680px at 80% 90%, rgba(225,29,72,.20), transparent 55%),
  radial-gradient(900px 720px at 22% 96%, rgba(15,37,71,.65), transparent 60%),
  linear-gradient(155deg,#1A4378,#0E2247)}
#desktop::before{opacity:.07}
#wm{inset:0}
#wm .t{color:rgba(255,255,255,.07)}
.backdrop{inset:0}

/* ---- Icônes modernes (tuiles verre, ombrage doux, anim d'entrée) ---- */
.icon{width:108px;border-radius:14px;padding:.7rem .35rem .55rem}
.icon .glyph{width:60px;height:60px;border-radius:17px;font-size:1.85rem;
  background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.28);
  transition:transform .2s ease, box-shadow .2s ease}
.icon:hover .glyph,.icon:focus-visible .glyph{transform:translateY(-4px);box-shadow:0 16px 30px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.4)}
.icon .lbl{font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.icon .ext{opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:no-preference){
  .icon{animation:iconIn .45s ease both}
  @keyframes iconIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---- Barre des tâches : dock flottant arrondi, verre dépoli ---- */
#taskbar{left:50%;transform:translateX(-50%);right:auto;bottom:12px;height:56px;
  width:min(980px,calc(100% - 24px));border-radius:18px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(18,38,66,.42);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:0 22px 50px -22px rgba(0,0,0,.65);padding:0 .55rem}
#startBtn{background:#fff;border-color:transparent;box-shadow:0 4px 12px -6px rgba(0,0,0,.4)}
#startBtn:hover{background:#fff;transform:translateY(-1px)}
.tray .clock{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.tray .clock small{color:rgba(255,255,255,.78)}
.tray .wa{background:rgba(255,255,255,.92)}
#startMenu{bottom:calc(var(--tb) + 16px);left:50%;transform:translateX(-50%);border-radius:18px}

/* ---- Écran d'accueil : ordre + compacité (CTA au-dessus de la ligne de flottaison sur mobile) ---- */
.lock-card{display:flex;flex-direction:column}
.lock-logo-img{order:1}
.lock-sub{order:2}
.lock-trust{order:3}
.lock-chips{order:4}
.lock-tiles{order:5}
.lock-cta{order:6}
.lock-foot{order:7}

@media(max-width:600px){
  #lock{padding:14px 14px 90px}
  .lock-top{margin-bottom:10px}
  .lock-time{font-size:1.65rem}
  .lock-card{padding:1.25rem 1.1rem;border-radius:18px}
  .lock-logo-img{width:148px;margin-bottom:.25rem}
  .lock-sub{font-size:.98rem;margin-bottom:.25rem}
  .lock-trust{margin-bottom:.7rem}
  /* CTA juste après la note → visible sans scroller */
  .lock-cta{order:4;margin:.1rem 0 .9rem}
  .lock-chips{order:5;margin-bottom:.8rem}
  .lock-tiles{order:6}
  .lock-foot{order:7;font-size:.8rem}
  .lock-cta .btn{flex:1 1 100%;min-height:50px}
  #startMenu{width:calc(100vw - 1.2rem)}
}

/* ============================================================
   v4 — Widgets de bureau + logo lockup propre
   ============================================================ */
/* Logo lockup vectoriel (interface) */
.brandlock{display:flex;align-items:center;gap:.7rem}
.bl-mark{width:56px;height:56px;flex:0 0 56px;position:relative;display:grid;place-items:center;background:#fff;border:1px solid var(--border);border-radius:15px;box-shadow:0 8px 18px -10px rgba(20,58,102,.4)}
.bl-mark .d{position:absolute;inset:8px;border:2.5px solid var(--red);transform:rotate(45deg);border-radius:4px}
.bl-mark .at{position:relative;font-family:var(--ff-head);font-weight:800;font-size:1.45rem;color:var(--blue)}
.bl-text{display:flex;flex-direction:column;text-align:left}
.bl-word{font-family:var(--ff-head);font-weight:800;font-size:1.55rem;color:var(--blue);line-height:1}
.bl-word b{color:var(--red)}
.bl-tag{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:.25rem}

/* Panneau de widgets */
#widgets{position:absolute;top:32px;right:32px;width:344px;max-height:calc(100% - 64px);display:flex;flex-direction:column;gap:14px;z-index:515;overflow:auto}
.wgt{background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 20px 46px -24px rgba(0,0,0,.55);padding:1.3rem}
.wgt h4{font-size:.73rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin-bottom:.7rem}
.wgt .sub{color:var(--slate);font-size:.92rem;margin:.85rem 0 .35rem;line-height:1.55}
.wgt-brand .rate{font-weight:700;color:var(--ink);margin-bottom:1rem}
.wgt-brand .rate .stars{color:#F6A609}
.wgt .row{display:flex;gap:.5rem;flex-wrap:wrap}
.wgt .row .btn{min-height:44px;flex:1 1 auto;padding:0 1rem;font-size:.92rem}
.eco-mini{display:flex;flex-direction:column;gap:.5rem}
.eco-mini a{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:12px;font-family:var(--ff-head);font-weight:700;font-size:.92rem;color:var(--ink);background:#fff;transition:.2s}
.eco-mini a small{margin-left:auto;color:var(--slate);font-weight:600;font-size:.74rem}
.eco-mini a:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateX(2px)}
.eco-mini .g{font-size:1.15rem}
.wgt-info .sub{font-size:.88rem}

@media (prefers-reduced-motion:no-preference){
  .wgt{animation:wgtIn .5s ease both}
  .wgt:nth-child(2){animation-delay:.06s}.wgt:nth-child(3){animation-delay:.12s}.wgt:nth-child(4){animation-delay:.18s}
  @keyframes wgtIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media(max-width:1180px){#widgets{width:312px}}
@media(max-width:980px){#widgets{display:none}}

/* ============================================================
   v5 — Écran de démarrage (boot)
   ============================================================ */
.boot{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 650px at 50% 38%,#1A4378,#0A1730);transition:opacity .6s ease}
.boot.hide{opacity:0;pointer-events:none}
.boot-inner{text-align:center;color:#fff;width:min(320px,78vw)}
.boot-mark{width:88px;height:88px;margin:0 auto 1.3rem;border-radius:22px;box-shadow:0 22px 55px -18px rgba(0,0,0,.7);animation:bootPulse 1.6s ease-in-out infinite}
.boot-mark .d{inset:12px;border-width:3px}
.boot-mark .at{font-size:2.1rem}
@keyframes bootPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.boot-name{font-family:var(--ff-head);font-weight:800;font-size:1.9rem;letter-spacing:.02em;margin-bottom:1.4rem}
.boot-bar{height:6px;width:100%;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.boot-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#3B82F6,#E11D48);border-radius:999px;animation:bootFill 2.1s ease forwards}
@keyframes bootFill{0%{width:0}60%{width:72%}100%{width:100%}}
.boot-txt{margin-top:.95rem;font-size:.85rem;color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){.boot-mark{animation:none}.boot-bar span{animation:none;width:100%}}

/* ============================================================
   v6 — Fonctionnalités : formulaire, diagnostic, screensaver,
   notifications, recherche, boutons barre, fenêtres libres, thème clair
   ============================================================ */
/* Fenêtres déplaçables / redimensionnables */
.win-body{flex:1 1 auto}
.win-tb{cursor:grab}.win-tb:active{cursor:grabbing}
.win-resize{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;
  background:linear-gradient(135deg,transparent 50%,var(--slate) 50%,var(--slate) 60%,transparent 60%,transparent 70%,var(--slate) 70%,var(--slate) 80%,transparent 80%);opacity:.5}
@media(max-width:760px){.win-resize{display:none}.win-tb{cursor:default}}

/* Formulaire de contact */
.cform{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}
.cform label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.82rem;color:var(--ink)}
.cform input,.cform select,.cform textarea{font-family:var(--ff-body);font-size:.95rem;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;width:100%}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.cform .crow{display:flex;gap:.7rem}.cform .crow label{flex:1}
.cform textarea{resize:vertical}
.cnote{font-size:.78rem;color:var(--slate);margin-top:.2rem}

/* Diagnostic express */
.diag .dq{font-family:var(--ff-head);font-weight:700;color:var(--ink);margin-bottom:.8rem}
.dopts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.dopt,.dopt2{text-align:left;background:#fff;border:1px solid var(--border);border-radius:11px;padding:.7rem .8rem;font-weight:600;font-size:.9rem;color:var(--ink);transition:.18s}
.dopt:hover,.dopt2:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-2px)}
.dbox{background:var(--blue-soft);border:1px solid var(--border);border-radius:11px;padding:.8rem 1rem;font-weight:700;color:var(--blue);margin:.3rem 0 .6rem}
.dredo{margin-top:.9rem;background:none;border:0;color:var(--slate);font-weight:700;font-size:.88rem}
.dredo:hover{color:var(--blue)}
@media(max-width:520px){.dopts{grid-template-columns:1fr}}

/* Poste de travail / Corbeille */
.sysinfo{list-style:none;display:flex;flex-direction:column;gap:.1rem;margin:.4rem 0 .6rem}
.sysinfo li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--border);font-size:.95rem}
.sysinfo li::before{content:none}
.sysinfo b{color:var(--slate);font-weight:700}.sysinfo span{font-weight:700;color:var(--ink)}
.sysinfo .ok{color:var(--green)}
.trash{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.5rem 0 .9rem}
.trash li{display:flex;gap:.5rem;align-items:center;font-weight:600}
.trash li::before{content:none}

/* Recherche menu Démarrer */
.sm-search{width:100%;border:1px solid var(--border);border-radius:10px;padding:.6rem .8rem;font-family:var(--ff-body);font-size:.92rem;margin-bottom:.8rem;background:var(--bg-alt)}
.sm-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}

/* Boutons de la barre des tâches */
.trayb{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.14);font-size:1.05rem;line-height:1;transition:.18s}
.trayb:hover{background:rgba(255,255,255,.28)}
#installBtn{background:#fff;color:var(--blue);font-weight:800;border-color:transparent}
@media(max-width:760px){.trayb{width:36px;height:36px}}

/* Notifications système */
.sysnotif{position:fixed;right:16px;bottom:calc(var(--tb) + 16px);z-index:760;max-width:320px;background:#fff;color:var(--ink);
  border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 50px -22px rgba(0,0,0,.6);padding:1rem 2.2rem 1rem 1rem;font-weight:600;font-size:.92rem;
  transform:translateY(20px);opacity:0;transition:transform .35s ease,opacity .35s ease}
.sysnotif.show{transform:none;opacity:1}
.sysnotif a{font-weight:800}
.sn-x{position:absolute;top:.5rem;right:.5rem;border:0;background:none;color:var(--slate);font-size:.9rem;width:24px;height:24px;border-radius:6px}
.sn-x:hover{background:var(--bg-alt);color:var(--ink)}
@media(max-width:760px){.sysnotif{left:12px;right:12px;max-width:none;bottom:calc(var(--tb) + 14px)}}

/* Économiseur d'écran */
.saver{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;cursor:pointer;
  background:radial-gradient(900px 650px at 50% 40%,#16335c,#070f1f)}
.saver-c{text-align:center;color:#fff;animation:floaty 6s ease-in-out infinite}
.saver-mark{margin:0 auto 1.4rem;animation:none}
.saver-q{font-family:var(--ff-head);font-weight:700;font-size:1.4rem;opacity:.9}
.saver-num{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-head);font-weight:800;font-size:clamp(1.8rem,6vw,3rem);color:#fff;margin:.6rem 0}
.saver-num svg{width:30px;height:30px}
.saver-hint{font-size:.85rem;color:rgba(255,255,255,.6)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.saver-c{animation:none}}

/* ===== Thème clair ===== */
.theme-light #desktop{background:
  radial-gradient(820px 620px at 14% 16%, rgba(120,170,235,.5), transparent 60%),
  radial-gradient(760px 560px at 86% 10%, rgba(37,99,235,.18), transparent 55%),
  linear-gradient(160deg,#EAF1FA,#D4E2F2)}
.theme-light #desktop::before{opacity:.5}
.theme-light #wm .t{color:rgba(20,45,85,.07)}
.theme-light .icon{color:var(--ink)}
.theme-light .icon .lbl{text-shadow:none}
.theme-light .icon .ext{color:var(--slate);text-shadow:none}
.theme-light #taskbar{background:rgba(255,255,255,.72);border-color:rgba(20,45,85,.12)}
.theme-light .trayb{background:rgba(20,45,85,.06);border-color:rgba(20,45,85,.12);color:var(--ink)}
.theme-light .tray .clock{color:var(--ink);text-shadow:none}
.theme-light .tray .clock small{color:var(--slate)}

/* ===== Correctif : l'attribut [hidden] doit toujours masquer (sinon écran de veille bloquant) ===== */
[hidden]{display:none!important}

/* ============================================================
   v7 — Gros package : clic droit, plein écran, FAQ, tarifs,
   ouvert/fermé, cookies, fond nuit, logo boot
   ============================================================ */
/* Logo réel au boot */
.boot-logo{width:130px;height:auto;margin:0 auto 1.5rem;display:block;background:#fff;border-radius:24px;padding:14px;box-shadow:0 22px 55px -18px rgba(0,0,0,.7);animation:bootPulse 1.6s ease-in-out infinite}
.saver-logo{width:110px;height:auto;margin:0 auto 1.3rem;display:block;background:#fff;border-radius:22px;padding:12px}
@media (prefers-reduced-motion:reduce){.boot-logo{animation:none}}

/* Fenêtre plein écran (double-clic barre de titre) */
.win.max{inset:10px 10px calc(var(--tb) + 10px) 10px!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;max-height:none;transform:none!important}

/* FAQ (fenêtre + fallback) */
details.faq{border:1px solid var(--border);border-radius:10px;margin-bottom:.5rem;overflow:hidden;background:#fff}
details.faq summary{cursor:pointer;padding:.7rem .9rem;font-family:var(--ff-head);font-weight:700;font-size:.95rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--blue);font-weight:800}
details.faq[open] summary::after{content:"–"}
details.faq[open] summary{color:var(--blue)}
details.faq p{padding:0 .9rem .8rem;margin:0;color:var(--slate);font-size:.94rem}

/* Statut ouvert / fermé */
.openstate{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.84rem;margin:.1rem 0 .9rem;padding:.35rem .7rem;border-radius:999px}
.openstate .dot{width:8px;height:8px;border-radius:50%}
.openstate.is-open{color:var(--green-dark);background:#E4F5E9}.openstate.is-open .dot{background:var(--green);box-shadow:0 0 0 3px rgba(23,138,60,.18)}
.openstate.is-closed{color:var(--slate);background:var(--bg-alt)}.openstate.is-closed .dot{background:var(--slate)}

/* Menu clic droit */
.ctxmenu{position:fixed;z-index:1150;min-width:206px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 26px 60px -22px rgba(0,0,0,.55);padding:.4rem}
.ctxmenu button{display:flex;width:100%;gap:.6rem;align-items:center;padding:.58rem .7rem;border:0;background:none;border-radius:8px;font-family:var(--ff-body);font-weight:600;font-size:.9rem;color:var(--ink);text-align:left}
.ctxmenu button:hover{background:var(--blue-soft);color:var(--blue)}

/* Bannière cookies */
.cookie{position:fixed;left:50%;bottom:calc(var(--tb) + 14px);z-index:780;max-width:580px;width:calc(100% - 32px);display:flex;gap:1rem;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 22px 50px -22px rgba(0,0,0,.55);padding:.85rem 1rem;font-size:.85rem;color:var(--slate);
  transform:translateX(-50%) translateY(18px);opacity:0;transition:opacity .35s,transform .35s}
.cookie.show{opacity:1;transform:translateX(-50%)}
.cookie .btn{min-height:40px;padding:0 1.2rem;flex:none}
@media(max-width:600px){.cookie{flex-direction:column;align-items:stretch;text-align:center}.cookie .btn{width:100%}}

/* Fond NUIT */
.wall-night #desktop{background:
  radial-gradient(820px 620px at 18% 12%, rgba(60,110,185,.34), transparent 60%),
  radial-gradient(700px 600px at 85% 92%, rgba(225,29,72,.16), transparent 55%),
  linear-gradient(160deg,#0C1D38,#05070F)}
.wall-night #desktop::before{opacity:.05}
.wall-night #wm .t{color:rgba(255,255,255,.05)}

/* ============================================================
   v8 — Disponibilité (message + rappel) : badge sur 2 lignes
   ============================================================ */
.openstate{display:flex;align-items:center;gap:.55rem;font-weight:700;margin:.1rem 0 .9rem;padding:.5rem .75rem;border-radius:13px}
.openstate .dot{flex:none;width:9px;height:9px;border-radius:50%}
.openstate .ostxt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.openstate .ostxt b{font-size:.85rem}
.openstate .ostxt small{font-weight:600;font-size:.73rem;opacity:.9}
.openstate.is-open{color:var(--green-dark);background:#E4F5E9}.openstate.is-open .dot{background:var(--green);box-shadow:0 0 0 3px rgba(23,138,60,.18)}
.openstate.is-msg{color:#9A5E0E;background:#FBF0DD}.openstate.is-msg .dot{background:#E8842B;box-shadow:0 0 0 3px rgba(232,132,43,.18)}
.openstate.is-closed{color:var(--slate);background:var(--bg-alt)}.openstate.is-closed .dot{background:var(--slate)}
.availline{font-size:.86rem;color:var(--slate);background:var(--bg-alt);border:1px solid var(--border);border-radius:10px;padding:.7rem .85rem;margin:.2rem 0 1rem;line-height:1.5}

/* ============================================================
   v9 — Espace Tutos + widgets Diagnostic 50 € & Formations
   ============================================================ */
.tuto-h{font-family:var(--ff-head);font-weight:700;font-size:1.02rem;color:var(--ink);margin:1.3rem 0 .7rem}
.tuto-h:first-child{margin-top:.2rem}
.tutos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.tuto-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;transition:transform .2s,border-color .2s,box-shadow .2s;text-decoration:none}
.tuto-card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 14px 28px -16px rgba(0,0,0,.4)}
.tuto-card .thumb{position:relative;aspect-ratio:16/9;background:#0b1a33 center/cover no-repeat;display:grid;place-items:center}
.tuto-card .fbthumb{background:linear-gradient(135deg,#1877F2,#0a3d8f)}
.tuto-card .play{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;font-size:.95rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tuto-card .tt{padding:.6rem .65rem .15rem;font-family:var(--ff-head);font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.25;flex:1}
.tuto-card .src{padding:.1rem .65rem .65rem;font-size:.7rem;font-weight:800}
.tuto-card .yt{color:#DC2626}.tuto-card .fbsrc{color:#1877F2}

/* Widget Diagnostic 50 € */
.wgt-diag50 .d50{font-family:var(--ff-head);font-weight:800;font-size:2.1rem;color:var(--blue);margin:.1rem 0 .6rem}
.d50list{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:0 0 1rem}
.d50list li{font-size:.85rem;color:var(--slate);line-height:1.35}
.d50list li::before{content:none}
.d50list b{color:var(--ink)}

/* ============================================================
   v10 — Effets waouh : fond vivant, Spotlight, dock magnétique
   ============================================================ */
#bgfx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#wm{z-index:1}
#icons{position:relative;z-index:2}

/* Animation d'ouverture des fenêtres */
@media (prefers-reduced-motion:no-preference){
  .win{animation:winIn .22s cubic-bezier(.2,.8,.2,1) both}
  @keyframes winIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1}}
}

/* Spotlight */
.spot{position:fixed;inset:0;z-index:1400;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;
  background:rgba(8,18,38,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.spot.show{opacity:1}
.spot-box{width:min(560px,92vw);background:#fff;border-radius:18px;box-shadow:0 44px 100px -34px rgba(0,0,0,.65);overflow:hidden;transform:translateY(-12px);transition:transform .2s}
.spot.show .spot-box{transform:none}
.spot-top{display:flex;align-items:center;gap:.6rem;padding:1rem 1.1rem;border-bottom:1px solid var(--border)}
.spot-ic{font-size:1.1rem}
.spot-input{flex:1;border:0;outline:none;font-family:var(--ff-body);font-size:1.05rem;color:var(--ink);background:none}
.spot-list{max-height:48vh;overflow:auto;padding:.4rem}
.spot-item{display:flex;width:100%;align-items:center;gap:.7rem;padding:.6rem .7rem;border:0;background:none;border-radius:10px;text-align:left;cursor:pointer}
.spot-item:hover,.spot-item.on{background:var(--blue-soft)}
.spot-item .si{font-size:1.2rem;width:30px;text-align:center}
.spot-item .st{display:flex;flex-direction:column;line-height:1.2}
.spot-item .st b{font-size:.92rem;color:var(--ink)}
.spot-item .st small{font-size:.76rem;color:var(--slate)}
.spot-empty{padding:1.2rem;color:var(--slate);text-align:center}
.spot-hint{padding:.6rem 1.1rem;border-top:1px solid var(--border);font-size:.73rem;color:var(--slate);text-align:center}

/* Dock magnétique */
.dock{display:flex;align-items:flex-end;gap:.35rem;padding:0 .4rem}
.dock-spacer{flex:1}
.dock-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;line-height:1;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);transition:transform .12s ease,background .2s;transform-origin:bottom center;will-change:transform}
.dock-i:hover{background:rgba(255,255,255,.32)}
.theme-light .dock-i{background:rgba(20,45,85,.06);border-color:rgba(20,45,85,.12)}
@media(max-width:760px){.dock,.dock-spacer{display:none}}

/* ============================================================
   v11 — Logo central + mise en page Tarifs
   ============================================================ */
#wm{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
#wm .wm-logo{width:min(190px,24vw);height:auto;padding:18px;background:rgba(255,255,255,.9);border-radius:32px;
  box-shadow:0 30px 80px -28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.6);opacity:.55}
.wall-night #wm .wm-logo{opacity:.5}
.theme-light #wm .wm-logo{background:rgba(255,255,255,.96);opacity:.7;box-shadow:0 24px 60px -26px rgba(20,45,85,.4)}

/* Tarifs — mise en page soignée */
.tarif-head{display:flex;align-items:center;gap:1rem;background:var(--blue-soft);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1rem}
.tarif-price{font-family:var(--ff-head);font-weight:800;font-size:2.5rem;color:var(--blue);line-height:1;flex:none}
.tarif-head b{font-family:var(--ff-head);font-size:1.05rem;color:var(--ink)}
.tarif-cases{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.tcase{display:flex;gap:.75rem;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem;background:#fff}
.tcase .tc-ic{font-size:1.25rem;flex:none;width:28px;text-align:center;line-height:1.4}
.tcase b{font-family:var(--ff-head);font-size:.95rem;color:var(--ink)}
.tcase p{margin:.2rem 0 0;font-size:.9rem;color:var(--slate);line-height:1.45}
.tcase p b{color:var(--ink);font-family:var(--ff-body);font-weight:700}

/* ============================================================
   v12 — Vrai logo (carte marque + bouton Démarrer)
   ============================================================ */
.wgt-logo{display:block;width:min(170px,72%);height:auto;margin:.1rem auto .6rem}
.mk-img{width:22px;height:22px;border-radius:6px;flex:none;object-fit:contain}
#startBtn{align-items:center;gap:.5rem}

/* ============================================================
   v13 — Icônes réparties en grille sur le bureau
   ============================================================ */
#icons{position:absolute;top:22px;left:16px;right:392px;bottom:94px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));grid-auto-rows:max-content;
  gap:26px 8px;align-content:start;z-index:2;overflow:auto;max-height:none}
#icons .icon{width:100%;max-width:120px;justify-self:center}
@media(max-width:1180px){#icons{right:336px}}
@media(max-width:980px){#icons{right:16px}}
@media(max-width:760px){
  #icons{top:14px;left:10px;right:10px;bottom:86px;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:18px 6px}
  #icons .icon{max-width:92px}
}

/* ============================================================
   v14 — Liens légaux (menu Démarrer)
   ============================================================ */
.sm-legal{display:flex;flex-wrap:wrap;gap:.2rem .9rem;justify-content:center;padding:.7rem .2rem .2rem;border-top:1px solid var(--border);margin-top:.6rem}
.sm-legal a{font-size:.74rem;color:var(--slate);font-weight:600}
.sm-legal a:hover{color:var(--blue)}

/* ============================================================
   v15 — Icônes dispatchées en plusieurs rangées (façon bureau)
   ============================================================ */
#icons{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));justify-content:stretch;gap:30px 14px}
#icons .icon{width:100%;max-width:128px;justify-self:center}
@media(max-width:760px){
  #icons{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 6px}
  #icons .icon{max-width:96px}
}

/* ============================================================
   v16 — Icônes regroupées par thème avec séparateurs
   ============================================================ */
#icons{display:flex;flex-direction:column;gap:22px}
.icon-group-h{font-family:var(--ff-head);font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.74);margin:0 0 .6rem;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.16);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.theme-light .icon-group-h{color:var(--slate);border-color:rgba(20,45,85,.16);text-shadow:none}
.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,96px);gap:18px 8px;justify-content:start}
#icons .icon-grid .icon{width:96px;max-width:96px}
@media(max-width:760px){
  .icon-grid{grid-template-columns:repeat(auto-fill,78px);gap:14px 6px}
  #icons .icon-grid .icon{width:78px}
}

/* ============================================================
   v17 — Boîte à outils (QR, pipette, mot de passe, infos PC)
   ============================================================ */
.tool{display:flex;flex-direction:column;gap:14px}
.tool label{font-weight:700;font-size:.92rem;display:flex;flex-direction:column;gap:.4rem}
.tool input[type=text]{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:1rem}
.chip-row{display:flex;gap:.5rem;flex-wrap:wrap}
.chipb{border:1px solid var(--border);background:#fff;border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;color:var(--slate)}
.chipb:hover{border-color:var(--blue);color:var(--blue)}
.qr-out{display:flex;justify-content:center;padding:14px;background:#fff;border:1px solid var(--border);border-radius:14px;min-height:120px;align-items:center}
.qr-out img,.qr-out canvas{display:block;border-radius:8px}
.col-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.col-pick{width:74px;height:54px;border:1px solid var(--border);border-radius:12px;background:none;cursor:pointer;padding:4px}
.col-codes{display:flex;flex-direction:column;gap:.55rem}
.codeb{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;text-align:left;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;transition:.15s;position:relative}
.codeb:hover{background:var(--cloud)}
.codeb.copied{border-color:var(--green);color:var(--green)}
.codeb.copied::after{content:'✓ copié';position:absolute;right:.8rem;font-size:.75rem;font-family:var(--ff-body)}
.cnote{font-size:.82rem;color:var(--muted);margin:0}
.pw-out{display:flex;gap:.5rem}
.pw-val{flex:1;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;letter-spacing:.5px;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;background:var(--cloud)}
.pw-lenL{flex-direction:row !important;align-items:center;gap:.6rem;flex-wrap:wrap}
.pw-range{flex:1;min-width:140px}
.pw-opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem}
.pw-opts label{flex-direction:row;align-items:center;gap:.45rem;font-weight:500;font-size:.9rem}
.pw-bar{height:8px;border-radius:999px;background:var(--border);overflow:hidden}
.pw-bar span{display:block;height:100%;width:0;border-radius:999px;transition:width .25s,background .25s}
.sysinfo{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.sysinfo li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem .9rem;font-size:.92rem}
.sysinfo li:nth-child(odd){background:var(--cloud)}
.sysinfo li b{color:var(--slate)}
.sysinfo li span{color:var(--ink);font-family:ui-monospace,Menlo,Consolas,monospace}
.theme-light .chipb,.theme-light .qr-out,.theme-light .codeb{background:#fff}

/* ============================================================
   v18 — Icônes en rangées (façon étagères) + menu Démarrer mobile
   ============================================================ */
/* Bureau : chaque thème = un libellé, puis SA rangée d'icônes */
.icon-grid{display:flex;flex-wrap:wrap;gap:18px 10px;justify-content:flex-start}
#icons .icon-grid .icon{flex:0 0 auto;width:96px;max-width:96px}
@media(max-width:760px){
  #icons{gap:18px}
  .icon-grid{gap:14px 8px}
  #icons .icon-grid .icon{width:74px}
}

/* Menu Démarrer : ne plus être coupé en haut + lisible sur petit écran */
#startMenu{max-height:calc(100vh - var(--tb) - 30px);overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(max-width:600px){
  #startMenu{max-height:calc(100dvh - var(--tb) - 24px);padding:.85rem;top:auto}
  #startMenu .sm-grid{grid-template-columns:1fr}          /* un élément par ligne = plus lisible */
  #startMenu .sm-grid.sm-eco{grid-template-columns:1fr 1fr}  /* l'univers reste compact */
  #startMenu .sm-item{font-size:.92rem;padding:.6rem .65rem}
  #startMenu h4{margin:.15rem 0 .45rem}
  .sm-foot{position:sticky;bottom:-.85rem;background:#fff;padding-bottom:.2rem}
}

/* ============================================================
   v19 — Correctifs mobile : icônes scrollables, n° tel, menu fenêtre
   ============================================================ */
/* (1) Zone d'icônes = une seule colonne qui défile (plus de 2e colonne hors écran) */
#icons{flex-wrap:nowrap;overflow:hidden auto;-webkit-overflow-scrolling:touch;padding-bottom:16px}
@media(max-width:760px){ #icons{flex-wrap:nowrap;flex-direction:column} }

/* (2) Bouton téléphone : jamais coupé sur 2 lignes */
.tray .call{white-space:nowrap}
@media(max-width:760px){
  .tray .call .call-num{display:none}      /* icône seule, compacte */
  .tray .call{padding:0 .8rem;gap:0}
  .tray .call svg{width:18px;height:18px}
}

/* (3) Bouton Menu dans la barre de titre des fenêtres */
.win-home{width:30px;height:30px;border:1px solid var(--border);background:#fff;border-radius:8px;font-size:1rem;line-height:1;color:var(--blue);cursor:pointer;display:grid;place-items:center}
.win-home:hover{background:var(--blue-soft)}
.win-cls{margin-left:.15rem}

/* ============================================================
   v20 — Nouveaux outils (notes, wifi, whatsapp, image, conv, tva, etc.)
   ============================================================ */
.tool textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:.98rem;line-height:1.5;resize:vertical;background:#fff}
.tool select{width:100%;padding:.65rem .8rem;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:.95rem;background:#fff}
.tool input[type=number],.tool input[type=date]{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;font:inherit;font-size:1rem;background:#fff}
.nt-foot{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--muted)}
.nt-saved{color:var(--green);font-weight:700;white-space:nowrap}
.cv-row{display:flex;gap:.5rem;align-items:stretch}
.cv-row input{flex:1;min-width:0}
.cv-row select{width:auto;min-width:84px;flex:0 0 auto}
.cv-out{list-style:none;margin:.1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:.5rem}
.cv-out li{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;background:var(--cloud);border:1px solid var(--border);border-radius:10px;padding:.55rem .7rem}
.cv-out li::before{content:none}            /* annule la puce ✓ héritée de .win-body li */
.cv-out li b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1rem;color:var(--ink);font-weight:700}
.cv-out li span{color:var(--muted);font-size:.82rem;font-weight:600}
.tv-mode{display:flex;gap:1.2rem;flex-wrap:wrap}
.tv-mode label{flex-direction:row;align-items:center;gap:.4rem;font-weight:500;font-size:.92rem}
.dt-block{border:1px solid var(--border);border-radius:12px;padding:.85rem .9rem;display:flex;flex-direction:column;gap:.55rem}
.tool-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);margin:0;font-weight:800}
.tool .im-pickL{display:inline-flex;justify-content:center;cursor:pointer}
.im-prev img{max-width:100%;border-radius:10px;border:1px solid var(--border);display:block;margin-top:.3rem}
.wa-link,.db-out{word-break:break-all}
.tp-list li b{font-family:var(--ff-body)}

/* ============================================================
   v21 — Barre du bas dans les fenêtres + nouveaux outils
   ============================================================ */
/* Barre Démarrer / Tél / WhatsApp en bas de chaque fenêtre */
.win-foot{display:none;gap:.5rem;padding:.6rem .8rem;border-top:1px solid var(--border);background:var(--bg-alt,#f6f8fb)}
.win-foot button,.win-foot a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:46px;border-radius:10px;font-family:var(--ff-head);font-weight:800;font-size:.92rem;text-decoration:none;border:1px solid var(--border);cursor:pointer}
.win-foot .wf-start{background:#fff;color:var(--blue)}
.win-foot .wf-call{background:var(--green);color:#fff;border-color:transparent}
.win-foot .wf-wa{background:#fff;color:var(--green)}
@media(max-width:760px){
  .win-foot{display:flex}      /* visible dans les prestations sur mobile, comme l'accueil */
  .fab{display:none}           /* remplacé par la barre du bas */
}

/* Signature email */
.sg-prev{border:1px dashed var(--border);border-radius:10px;padding:.9rem;background:#fff;overflow:auto}
/* Raccourcis clavier */
table.kb{width:100%;border-collapse:collapse;font-size:.9rem}
table.kb th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--slate);padding:.4rem .5rem;border-bottom:2px solid var(--border)}
table.kb td{padding:.45rem .5rem;border-bottom:1px solid var(--border)}
table.kb tr:last-child td{border-bottom:none}
kbd{display:inline-block;background:var(--cloud);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:.1rem .45rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--ink);white-space:nowrap}
.win-body table.kb td::before{content:none}

/* ============================================================
   v22 — Mobile : le dock du bas reste visible sur l'affichage des services
   ============================================================ */
@media(max-width:760px){
  /* La fenêtre s'arrête au-dessus du dock flottant (plus de plein écran qui le masque) */
  .win{position:fixed!important;top:8px!important;right:8px!important;bottom:84px!important;left:8px!important;width:auto!important;max-width:none!important;max-height:none!important;transform:none!important}
  /* Le dock (Démarrer · Tél · WhatsApp · outils) passe au premier plan, comme sur l'accueil */
  #taskbar{z-index:1200}
  .backdrop{bottom:78px}        /* l'assombrissement s'arrête au-dessus du dock */
  .win-foot{display:none!important}  /* on garde le vrai dock, pas de double barre */
}

/* ============================================================
   v23 — Le haut de la fenêtre (titre) toujours visible
   ============================================================ */
.win-tb{flex:0 0 auto}
.win-addr{flex:0 0 auto}
.win-body{min-height:0}          /* clé flexbox : c'est le corps qui défile, pas la fenêtre */
@media(max-width:760px){
  .win{top:max(8px, env(safe-area-inset-top))!important}   /* sous l'encoche / barre d'état */
  .win-body{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================
   v24 — Barre flottante (Bureau · Tél · WhatsApp) sur les pages services/légales
   ============================================================ */
.page-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:1200;display:flex;gap:.5rem;padding:.5rem;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 40px -16px rgba(11,30,55,.45)}
.pd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:46px;padding:0 1.05rem;border-radius:12px;
  font-family:var(--ff-head);font-weight:800;font-size:.95rem;text-decoration:none;border:1px solid var(--border);white-space:nowrap}
.pd-home{background:#fff;color:var(--blue)}
.pd-home:hover{background:var(--blue-soft)}
.pd-call{background:var(--green);color:#fff;border-color:transparent}
.pd-wa{background:#fff;color:var(--green)}
body:has(.page-dock){padding-bottom:92px}
@media(max-width:760px){
  .page-dock{left:8px;right:8px;transform:none;justify-content:space-between}
  .pd-btn{flex:1;padding:0 .5rem;font-size:.9rem}
}
/* Polices auto-hébergées (RGPD) */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/figtree-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/figtree-latin.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}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/jakarta-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/jakarta-latin.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}

/* ============================================================
   v25 — Fenêtre Bienvenue compacte + app "Mon Bureau"
   ============================================================ */
/* Bienvenue compacte : on aperçoit les icônes derrière */
.win.win-compact{width:min(420px,90vw)}
@media(min-width:761px){.win.win-compact{max-height:min(66vh,500px)}}
@media(max-width:760px){.win.win-compact{top:auto!important;bottom:96px!important;left:16px!important;right:16px!important;width:auto!important;max-height:58vh!important}}

/* Mon Bureau */
.bu{display:flex;flex-direction:column;gap:14px}
.bu-bar{display:flex;gap:.5rem;flex-wrap:wrap}
.bu-form{border:1px solid var(--border);border-radius:12px;padding:.9rem;background:var(--cloud)}
.bu-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .8rem}
.bu-grid label{display:flex;flex-direction:column;gap:.3rem;font-weight:700;font-size:.85rem}
.bu-grid input,.bu-grid select{padding:.55rem .65rem;border:1px solid var(--border);border-radius:9px;font:inherit;font-size:.95rem;background:#fff}
.bu-grid .bu-icon{width:70px;text-align:center;font-size:1.15rem}
.bu-fold-grp{margin-top:.2rem}
.bu-fold-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--slate);border-bottom:1px solid var(--border);padding-bottom:.35rem;margin-bottom:.6rem}
.bu-foldel{border:none;background:none;cursor:pointer;font-size:.95rem;opacity:.55}
.bu-foldel:hover{opacity:1}
.bu-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:.6rem}
.bu-tile{position:relative;border:1px solid var(--border);border-radius:12px;background:#fff;overflow:hidden}
.bu-link{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.85rem .5rem;text-decoration:none;color:var(--ink)}
.bu-link:hover{background:var(--cloud)}
.bu-ic{font-size:1.65rem;line-height:1}
.bu-nm{font-size:.82rem;font-weight:600;text-align:center;word-break:break-word}
.bu-acts{position:absolute;top:4px;right:4px;display:flex;gap:3px;opacity:0;transition:.15s}
.bu-tile:hover .bu-acts,.bu-tile:focus-within .bu-acts{opacity:1}
.bu-acts button{border:1px solid var(--border);background:#fff;border-radius:7px;width:25px;height:25px;cursor:pointer;font-size:.78rem;line-height:1;color:var(--slate)}
.bu-acts button:hover{color:var(--blue);border-color:var(--blue)}
.win-body .bu-tiles p::before{content:none}
@media(max-width:760px){.bu-grid{grid-template-columns:1fr}.bu-acts{opacity:1}}