/* Bloc « Medibox Lab » — posé sur toutes les pages par outils/bloc-lab.py,
   dans .mb-bureau comme dans .mb-mobile (même balisage, mise en page selon la
   largeur). Le téléphone joue la démo de l'application : assets/js/lab.js.
   Couleurs et composants de la charte Medibox 2026. */

.mbl { --k:.72; max-width:1130px; margin:0 auto; padding:clamp(56px,5.6vw,88px) 68px; }
.mbl + footer { margin-top:0 !important; }
.mbl, .mbl * { box-sizing:border-box; }

.mbl-carte {
  position:relative; overflow:hidden; border-radius:32px; color:#ffffff;
  background-color:#07050D;
  background-image:radial-gradient(760px 520px at 100% 0%, rgba(109,79,208,.55), rgba(109,79,208,0) 62%), radial-gradient(620px 420px at 0% 100%, rgba(76,47,168,.35), rgba(76,47,168,0) 65%);
  padding:clamp(36px,3.8vw,52px) clamp(40px,4.4vw,64px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(32px,4.6vw,72px); align-items:center;
}
/* trame de points, comme derrière le téléphone de l'application */
.mbl-carte::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(196,181,253,.14) 1px, transparent 1.4px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 50%, #000, transparent); mask-image:radial-gradient(60% 70% at 78% 50%, #000, transparent);
}

.mbl-texte { position:relative; min-width:0; display:flex; flex-direction:column; gap:16px; }
.mbl-neon {
  display:inline-flex; align-self:flex-start; align-items:center; padding:10px 20px 9px; border-radius:14px;
  border:1.5px solid rgba(196,181,253,.75); background:linear-gradient(180deg,#2A1B6B 0%,#1A1040 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 18px rgba(109,79,208,.35), 0 10px 26px -6px rgba(109,79,208,.7), 0 18px 34px -18px rgba(167,139,250,.9);
  font-size:15px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:#C4B5FD; white-space:nowrap;
}
.mbl .mbl-titre { margin:0; font-size:clamp(24px,2.5vw,38px); font-weight:800; line-height:1.05; letter-spacing:-.025em; color:#ffffff; }
.mbl-titre span { background:linear-gradient(90deg,#FFFFFF 0%,#D9CCFF 45%,#A78BFA 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.mbl .mbl-accroche { margin:0; font-size:17px; line-height:1.6; color:#E6E0FA; max-width:460px; }

/* ---------- Les fonctionnalités : une ligne par scène de la démo ---------- */
.mbl .mbl-liste { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; max-width:480px; }
.mbl-item {
  position:relative; overflow:hidden; width:100%; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:14px; align-items:center;
  padding:7px 14px 7px 10px; border-radius:14px; border:1px solid transparent; background:none;
  font:inherit; color:#C4B5FD; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .25s, border-color .25s, color .25s;
}
.mbl-item:hover { background:rgba(255,255,255,.06); color:#ffffff; }
.mbl-item:focus-visible { outline:2px solid #A78BFA; outline-offset:2px; }
.mbl-ico {
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(167,139,250,.14); color:#C4B5FD; transition:background .25s, color .25s;
}
.mbl-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mbl-nom { font-size:16px; font-weight:700; line-height:1.25; }
.mbl-phrase { grid-column:2; display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.85,.2,1); }
.mbl-phrase > span { overflow:hidden; font-size:14.5px; line-height:1.5; font-weight:400; color:#E6E0FA; }
.mbl-jauge { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(196,181,253,.18); opacity:0; }
.mbl-jauge::after { content:""; display:block; height:100%; width:100%; background:linear-gradient(90deg,#6D4FD0,#A78BFA); transform:scaleX(0); transform-origin:0 50%; }

.mbl-item[aria-current="true"] { background:rgba(139,92,246,.16); border-color:rgba(167,139,250,.35); color:#ffffff; padding-top:12px; padding-bottom:14px; }
.mbl-item[aria-current="true"] .mbl-ico { background:linear-gradient(135deg,#4C2FA8 0%,#6D4FD0 55%,#8B5CF6 100%); color:#ffffff; align-self:start; }
.mbl-item[aria-current="true"] .mbl-phrase { grid-template-rows:1fr; }
.mbl-item[aria-current="true"] .mbl-phrase > span { padding-top:3px; }
.mbl-item[aria-current="true"] .mbl-jauge { opacity:1; }
.mbl[data-lecture="oui"] .mbl-item[aria-current="true"] .mbl-jauge::after { animation:mbl-avance var(--mbl-duree, 9s) linear forwards; }
@keyframes mbl-avance { from { transform:scaleX(0); } to { transform:scaleX(1); } }

/* texte de la scène en cours, sous les puces (mobile seulement) */
.mbl .mbl-legende { display:none; margin:0; }

.mbl-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.mbl .mbl-store {
  display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 16px; border-radius:14px; background:#ffffff; color:#0F0B1C;
  font-size:15px; font-weight:700; white-space:nowrap; text-decoration:none; transition:transform .15s;
}
.mbl .mbl-store:hover { transform:translateY(-2px); color:#0F0B1C; }
.mbl-store img { width:22px; height:22px; display:block; }
.mbl .mbl-mention { flex:1 0 100%; margin:0 0 2px; font-size:14.5px; line-height:1.4; font-weight:700; color:#D9CCFF; }

/* ---------- Le téléphone ---------- */
.mbl-scene { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; }
.mbl-scene::before { /* halo */
  content:""; position:absolute; left:50%; top:46%; width:130%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(closest-side, rgba(139,92,246,.42), rgba(139,92,246,0));
}
.mbl-tel {
  position:relative; padding:calc(12px * var(--k)); border-radius:calc(66px * var(--k));
  background:linear-gradient(160deg,#3B3552,#15111F 60%);
  box-shadow:0 0 0 1.5px rgba(196,181,253,.22), 0 50px 90px -40px rgba(76,47,168,.75), 0 30px 60px -30px rgba(0,0,0,.8);
}
.mbl-ecran {
  position:relative; overflow:hidden; width:calc(390px * var(--k)); height:calc(844px * var(--k)); border-radius:calc(54px * var(--k));
  background:#07050D; isolation:isolate;
}
.mbl-encoche { position:absolute; z-index:3; top:calc(11px * var(--k)); left:50%; width:calc(118px * var(--k)); height:calc(34px * var(--k)); margin-left:calc(-59px * var(--k)); border-radius:calc(20px * var(--k)); background:#000; pointer-events:none; }
/* écran de démarrage de l'application, tant que la démo n'est pas chargée */
.mbl-seuil { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; background:#07050D radial-gradient(70% 45% at 50% 42%, rgba(109,79,208,.5), rgba(109,79,208,0)); transition:opacity .5s .15s, visibility 0s .7s; }
.mbl-seuil img { width:58%; height:auto; display:block; }
.mbl-pret .mbl-seuil { opacity:0; visibility:hidden; }
.mbl-app { position:absolute; left:0; top:0; width:390px; height:844px; transform:scale(var(--k)); transform-origin:0 0; }
.mbl-app iframe { display:block; width:390px; height:844px; border:0; pointer-events:none; background:#07050D; }

/* le doigt qui pilote la démo */
.mbl-doigt {
  position:absolute; z-index:2; left:0; top:0; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; pointer-events:none;
  background:rgba(139,92,246,.34); border:2px solid rgba(255,255,255,.92);
  box-shadow:0 0 0 1px rgba(20,14,46,.28), 0 6px 16px rgba(20,14,46,.35);
  opacity:0; transform:translate(195px,620px) scale(1);
  transition:transform .42s cubic-bezier(.3,.7,.2,1), opacity .25s;
}
.mbl-doigt.est-la { opacity:1; }
.mbl-doigt::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(167,139,250,.9); opacity:0; }
.mbl-doigt.appuie { background:rgba(139,92,246,.6); }
.mbl-doigt.appuie::after { animation:mbl-onde .45s ease-out; }
@keyframes mbl-onde { from { opacity:.9; transform:scale(1); } to { opacity:0; transform:scale(2.1); } }

.mbl-pause {
  position:relative; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px; border-radius:12px;
  border:1px solid rgba(196,181,253,.3); background:rgba(255,255,255,.06); font:inherit; font-size:13px; font-weight:600; color:#E6E0FA; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.mbl-pause:hover { background:rgba(167,139,250,.18); border-color:rgba(167,139,250,.5); }
.mbl-pause:focus-visible { outline:2px solid #A78BFA; outline-offset:2px; }
.mbl-pause svg { width:12px; height:12px; fill:currentColor; }
.mbl-pause .mbl-p-lire, .mbl[data-lecture="oui"] .mbl-pause .mbl-p-pause { display:inline-flex; align-items:center; gap:8px; }
.mbl-pause .mbl-p-pause, .mbl[data-lecture="oui"] .mbl-pause .mbl-p-lire { display:none; }
.mbl:not(.mbl-pret) .mbl-pause { visibility:hidden; }

/* ---------- Apparition : les blocs montent en fondu ---------- */
.mbl-js .mbl-texte > *, .mbl-js .mbl-scene { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.85,.2,1); }
.mbl-js.mbl-vu .mbl-texte > *, .mbl-js.mbl-vu .mbl-scene { opacity:1; transform:none; }
.mbl-js.mbl-vu .mbl-texte > :nth-child(2) { transition-delay:80ms; }
.mbl-js.mbl-vu .mbl-texte > :nth-child(3) { transition-delay:160ms; }
.mbl-js.mbl-vu .mbl-texte > :nth-child(4) { transition-delay:240ms; }
.mbl-js.mbl-vu .mbl-texte > :nth-child(n+5) { transition-delay:320ms; }
.mbl-js.mbl-vu .mbl-scene { transition-delay:200ms; }

@media (max-width:1040px) { .mbl { --k:.66; padding-left:40px; padding-right:40px; } }

/* ---------- Mobile : puces à faire défiler, téléphone sous le texte ---------- */
@media (max-width:899px) {
  .mbl { --k:.64; padding:48px 16px 0; }
  .mb-mobile .mbl { margin-bottom:48px; }
  .mbl-carte { display:flex; flex-direction:column; align-items:stretch; gap:26px; border-radius:24px; padding:28px 22px 30px; background-image:radial-gradient(360px 260px at 100% 0%, rgba(109,79,208,.55), rgba(109,79,208,0) 65%), radial-gradient(300px 220px at 0% 100%, rgba(76,47,168,.35), rgba(76,47,168,0) 65%); }
  .mbl-carte::before { display:none; }
  .mbl-texte { display:contents; }
  .mbl-neon { padding:8px 14px 7px; border-radius:12px; font-size:12px; letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px -6px rgba(109,79,208,.7); margin-bottom:-14px; }
  .mbl .mbl-titre { font-size:23px; line-height:1.12; margin-bottom:-14px; }
  .mbl .mbl-accroche { font-size:14px; line-height:1.55; margin-bottom:-6px; }
  .mbl .mbl-liste { flex-direction:row; gap:8px; max-width:none; margin:0 -22px -12px; padding:2px 22px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; }
  .mbl .mbl-liste::-webkit-scrollbar { display:none; }
  .mbl-liste li { flex:none; }
  .mbl-item, .mbl-item[aria-current="true"] { display:flex; gap:8px; width:auto; padding:7px 14px 8px 8px; border-radius:12px; border-color:rgba(196,181,253,.22); white-space:nowrap; }
  .mbl-ico, .mbl-item[aria-current="true"] .mbl-ico { width:26px; height:26px; border-radius:8px; align-self:center; }
  .mbl-ico svg { width:14px; height:14px; }
  .mbl-nom { font-size:14px; }
  .mbl-phrase { display:none; }
  .mbl .mbl-legende { display:block; min-height:4.5em; font-size:14.5px; line-height:1.5; color:#E6E0FA; margin-bottom:-12px; }
  .mbl-scene { order:5; }
  .mbl-actions { order:6; gap:10px; margin-top:0; }
  .mbl .mbl-mention { text-align:center; font-size:14px; }
  .mbl .mbl-store { flex:1; justify-content:center; gap:8px; min-height:48px; padding:0 12px; border-radius:12px; font-size:14px; }
  .mbl-store img { width:20px; height:20px; }
}
@media (max-width:359px) { .mbl { --k:.56; } }

@media (prefers-reduced-motion:reduce) {
  .mbl-js .mbl-texte > *, .mbl-js .mbl-scene { opacity:1; transform:none; transition:none; }
  .mbl-doigt { display:none; }
  .mbl-phrase, .mbl-item { transition:none; }
}