/* Couche micro-interactions du site MaConsole.
   Ne change aucun design : uniquement du mouvement sur les composants existants.
   Reprend les tokens du site (--t-rapide, --t-standard, --t-lent, --e-doux) et
   ajoute des ressorts (--mi-vif, --mi-rebond, --mi-elastique, calculés par garde.js). */
:root {
  --mi-vif: cubic-bezier(.22, 1, .36, 1);
  --mi-rebond: cubic-bezier(.34, 1.56, .64, 1);
  --mi-elastique: cubic-bezier(.34, 1.8, .64, 1);
  --mi-entree: cubic-bezier(.05, .7, .1, 1);
}

/* ---------- Navigation entre pages (View Transitions inter-documents) ---------- */
@view-transition { navigation: auto; }
/* Fondu enchaîné net : l'ancienne page s'efface vite, la nouvelle arrive juste après (pas de voile gris). */
::view-transition-old(root) { animation: 140ms ease-in both mi-vt-sortie; }
::view-transition-new(root) { animation: 260ms var(--mi-entree) 60ms both mi-vt-entree; }
@keyframes mi-vt-sortie { to { opacity: 0; } }
@keyframes mi-vt-entree { from { opacity: 0; } }
::view-transition-group(mi-produit) { animation-duration: 460ms; animation-timing-function: var(--mi-vif); }

/* ---------- Squelette : une seule vague teintée MaConsole pour toute la page ---------- */
html.mi body :is(.skeleton, .carte-visuel:not(:has(img)), .console-art:not(:has(img)), .cover-art:not(:has(img)), .offre-vignette, .plan, .squelette) {
  background-color: color-mix(in srgb, var(--action-bg, #1090d2) 5%, var(--ghost, #f5f6f6));
  background-image: linear-gradient(100deg,
    transparent 0 38%,
    color-mix(in srgb, var(--action-bg, #1090d2) 10%, transparent) 46%,
    color-mix(in srgb, #fff 55%, transparent) 50%,
    color-mix(in srgb, var(--action-bg, #1090d2) 10%, transparent) 54%,
    transparent 62% 100%);
  background-size: 160vw 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: mi-vague 1.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
[data-theme="dark"] .mi body :is(.skeleton, .carte-visuel:not(:has(img)), .cover-art:not(:has(img))) {
  background-color: color-mix(in srgb, var(--action-bg, #1090d2) 8%, var(--ghost, #1a1a1a));
}
@keyframes mi-vague { from { background-position: 130vw 0; } to { background-position: -130vw 0; } }
/* La vraie photo sort du flou au lieu d'apparaître d'un coup. */
img.mi-arrivee { animation: mi-flou-net 700ms var(--mi-entree) both; }
@keyframes mi-flou-net { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } }

/* ---------- Cartes produit ---------- */
@media (hover: hover) {
  html.mi .carte { transition: transform var(--t-standard, 260ms) var(--mi-vif), box-shadow var(--t-standard, 260ms) var(--mi-vif); }
  html.mi :is(.carte:hover, .carte.mi-force) { transform: translateY(-5px); box-shadow: var(--shadow-card); }
  html.mi .carte .carte-visuel img { transition: transform 420ms var(--mi-vif); }
  html.mi :is(.carte:hover, .carte.mi-force) .carte-visuel img { transform: scale(1.07); }
}

/* ---------- Header ---------- */
@media (hover: hover) {
  html.mi .hdr-nav a svg { transition: transform 420ms var(--mi-rebond); }
  html.mi .hdr-nav a:nth-child(1):is(:hover, .mi-force) svg { transform: translateY(-2px) rotate(-10deg); }
  html.mi .hdr-nav a:nth-child(2):is(:hover, .mi-force) svg { transform: rotate(180deg); }
  html.mi .hdr-nav a:nth-child(3):is(:hover, .mi-force) svg { transform: rotate(-30deg); }
  html.mi .hdr-nav a:nth-child(4):is(:hover, .mi-force) svg { transform: perspective(40px) rotateX(-25deg); }
  html.mi .hdr-nav a:nth-child(5):is(:hover, .mi-force) svg { transform: rotate(-12deg) scale(1.12); }
  html.mi .hdr-nav a:nth-child(6):is(:hover, .mi-force) svg { transform: translateX(3px); }
  html.mi .hdr-act svg { transition: transform 420ms var(--mi-rebond); }
  html.mi .hdr-act[data-toggle-theme]:hover svg { transform: rotate(45deg); }
  html.mi .hdr-act[data-open-search]:hover svg { transform: scale(1.12) rotate(-8deg); }
}
.hdr-badge.mi-pop { animation: mi-pop 520ms var(--mi-elastique); }
@keyframes mi-pop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }

/* ---------- Toast : il entre sur un ressort ---------- */
html.mi .toast { transition: opacity 180ms ease, transform 520ms var(--mi-rebond); }

/* ---------- Popups existantes : seules les entrées/sorties sont animées (JS) ---------- */
.mi-fantome { pointer-events: none !important; }

/* ---------- Tiroir mobile et panneau des filtres ---------- */
html.mi .tiroir.open .tiroir-nav > * { animation: mi-glisse-g 360ms var(--mi-vif) both; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(2) { animation-delay: 40ms; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(3) { animation-delay: 80ms; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(4) { animation-delay: 120ms; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(5) { animation-delay: 160ms; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(6) { animation-delay: 200ms; }
html.mi .tiroir.open .tiroir-nav > *:nth-child(n+7) { animation-delay: 240ms; }
html.mi .filter-panel.open .filter-panel-inner > * { animation: mi-glisse-g 360ms var(--mi-vif) both; }
html.mi .filter-panel.open .filter-panel-inner > *:nth-child(2) { animation-delay: 50ms; }
html.mi .filter-panel.open .filter-panel-inner > *:nth-child(3) { animation-delay: 100ms; }
html.mi .filter-panel.open .filter-panel-inner > *:nth-child(n+4) { animation-delay: 150ms; }
@keyframes mi-glisse-g { from { opacity: 0; transform: translateX(18px); } }
.mi-voile-sortie { position: fixed; inset: 0; z-index: 59; background: rgba(0, 0, 0, .42); pointer-events: none; animation: mi-fondu-sortie 260ms ease forwards; }
@keyframes mi-fondu-sortie { to { opacity: 0; } }

/* ---------- Accueil : entrée réglée (première visite de la session) ---------- */
html.mi-intro .mc-hero-copy > * { animation: mi-monte 760ms var(--mi-entree) both; }
html.mi-intro .mc-hero-copy > .mc-hero-badge { animation-delay: 80ms; }
html.mi-intro .mc-hero-copy > .mc-hero-kicker { animation-delay: 160ms; }
html.mi-intro .mc-hero-copy > h1 { animation: mi-masque 900ms cubic-bezier(.2, .9, .2, 1) 220ms both; }
html.mi-intro .mc-hero-copy > p:not(.mc-hero-kicker) { animation: mi-flou-net 800ms var(--mi-entree) 520ms both; }
html.mi-intro .mc-hero-copy > .mc-lime-button { animation: mi-bouton 700ms var(--mi-rebond) 760ms both; }
@keyframes mi-monte { from { opacity: 0; transform: translateY(14px); } }
@keyframes mi-masque { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(0 0 -10% 0); } }
@keyframes mi-bouton { from { opacity: 0; transform: translateY(12px) scale(.85); } }

/* Bouton lime : la flèche part et revient. */
@media (hover: hover) {
  html.mi .mc-lime-button { transition: transform 300ms var(--mi-vif), box-shadow 300ms var(--mi-vif); }
  html.mi :is(.mc-lime-button:hover, .mc-lime-button.mi-force) { transform: translateY(-2px); box-shadow: 0 12px 30px #0005; }
  html.mi :is(.mc-lime-button:hover, .mc-lime-button.mi-force) span { animation: mi-fleche 520ms var(--mi-vif); }
}
@keyframes mi-fleche { 0% { transform: none; } 40% { transform: translate(14px, -14px); opacity: 0; } 41% { transform: translate(-14px, 14px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* Cartes services : l'illustration 3D se soulève, la flèche glisse. */
@media (hover: hover) {
  html.mi .mc-service-bento .service-ic { transition: transform 520ms var(--mi-rebond); }
  html.mi .mc-service-bento :is(.service:hover, .service.mi-force) .service-ic { transform: translate(-8px, -10px) rotate(-6deg) scale(1.06); }
  html.mi .mc-service-bento .service::after { transition: transform 300ms var(--mi-vif); }
  html.mi .mc-service-bento :is(.service:hover, .service.mi-force)::after { transform: translate(4px, -4px); }
}

/* Avis clients : la carte au centre est mise en avant pendant le défilement. */
@supports (animation-timeline: view(inline)) {
  html.mi .mc-testimonial-card { animation: mi-avis linear both; animation-timeline: view(inline); }
  @keyframes mi-avis { 0% { opacity: .55; transform: scale(.94); } 35%, 65% { opacity: 1; transform: none; } 100% { opacity: .55; transform: scale(.94); } }
}
.mi-etoile { display: inline-block; }
.mi-etoile.mi-allume { animation: mi-etoile 520ms var(--mi-elastique) both; }
@keyframes mi-etoile { from { transform: scale(.2) rotate(-50deg); opacity: 0; } }

/* Sections qui entrent à l'écran (flou + fondu, comme la barre d'achat). */
.mi-revele { opacity: 0; filter: blur(10px); transform: translateY(14px); }
.mi-revele.mi-visible { opacity: 1; filter: none; transform: none; transition: opacity 850ms var(--mi-entree), filter 850ms var(--mi-entree), transform 850ms var(--mi-entree); }

/* Bulle WhatsApp flottante. */
html.mi .whatsapp-bubble { transition: transform 420ms var(--mi-rebond), opacity 220ms ease; }
html.mi .whatsapp-bubble.mi-cache { transform: translateY(90px) scale(.6); opacity: 0; }
.mi-wa-info { position: fixed; right: 16px; bottom: 84px; z-index: 80; max-width: 220px; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); font: 600 13px/1.35 var(--font-sans); transform-origin: 100% 100%; }

/* Cartes consoles de l'installation. */
@media (hover: hover) {
  html.mi .console .console-photo { transition: transform 600ms var(--mi-vif); }
  html.mi :is(.console:hover, .console.mi-force) .console-photo { transform: scale(1.06); }
}

/* Panier vide : le carton flotte. */
html.mi .empty-state .brand-art { animation: mi-flotte 3.2s ease-in-out infinite; }
@keyframes mi-flotte { 50% { transform: translateY(-6px) rotate(-2deg); } }
.mi-piece { position: absolute; width: 12px; height: 12px; border-radius: 50%; z-index: 2; pointer-events: none; }

/* Objets créés par micro.js */
.mi-vol-icone { position: fixed; z-index: 9999; pointer-events: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent, #ec5d4a); color: #fff; box-shadow: 0 10px 22px rgba(236, 93, 74, .38); will-change: transform; }
.mi-vol-icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }
.mi-vol-icone svg { will-change: transform; }
/* traînée de diodes, onde d'arrivée, « +1 » et badge qui attend l'impact */
.mi-led-trace { position: fixed; z-index: 9998; pointer-events: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c), 0 0 12px var(--c); }
.mi-onde { position: fixed; z-index: 9998; width: 44px; height: 44px; border-radius: 50%; pointer-events: none; border: 2px solid var(--accent, #ec5d4a); }
.mi-plus-un { position: fixed; z-index: 9999; pointer-events: none; padding: 2px 7px; border-radius: 999px; background: var(--accent, #ec5d4a); color: #fff;
  font: 700 11px/1.3 Inter, system-ui, sans-serif; box-shadow: 0 6px 14px rgba(236, 93, 74, .35); }
.mi-odo { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; align-items: center; color: inherit; }
.mi-odo > span { display: block; text-align: center; }
.hdr-badge.mi-badge-attente { position: relative; color: transparent !important; }
.hdr-badge.mi-badge-attente::after { content: attr(data-ancien); position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.mi-vol { position: fixed; z-index: 9999; pointer-events: none; overflow: hidden; box-shadow: 0 14px 28px rgba(6, 24, 90, .25); background: var(--raised); }
.mi-eclat { position: fixed; z-index: 9999; pointer-events: none; border-radius: 50%; }
.mi-confettis { position: fixed; inset: 0; z-index: 9998; pointer-events: none; width: 100vw; height: 100vh; }

/* Interrupteur de démo (coin bas gauche) */
.mi-etiquette { position: fixed; left: 12px; bottom: 12px; z-index: 9997; padding: 6px 10px; border-radius: 999px; background: #07122d; color: #edff22; font: 600 11px/1 var(--font-mono, monospace); letter-spacing: .04em; box-shadow: 0 6px 18px #0004; pointer-events: none; opacity: .92; }

/* Mouvement réduit : tout redevient instantané. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.mi *, html.mi *::before, html.mi *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .mi-revele { opacity: 1; filter: none; transform: none; }
}

/* Panneau de démo : forcer un survol sur écran tactile aussi */
html.mi .carte.mi-force { transition: transform 260ms var(--mi-vif), box-shadow 260ms var(--mi-vif); transform: translateY(-5px); box-shadow: var(--shadow-card); }
html.mi .carte.mi-force .carte-visuel img { transition: transform 420ms var(--mi-vif); transform: scale(1.07); }
.mi-sk-demo { background-color: color-mix(in srgb, var(--action-bg, #1090d2) 5%, var(--ghost, #f5f6f6)) !important;
  background-image: linear-gradient(100deg, transparent 0 38%, color-mix(in srgb, var(--action-bg, #1090d2) 10%, transparent) 46%, color-mix(in srgb, #fff 55%, transparent) 50%, color-mix(in srgb, var(--action-bg, #1090d2) 10%, transparent) 54%, transparent 62% 100%) !important;
  background-size: 160vw 100% !important; background-attachment: fixed !important; background-repeat: no-repeat !important; animation: mi-vague 1.6s cubic-bezier(.4, 0, .2, 1) infinite !important; }
.mi-sk-demo img { opacity: 0 !important; }

/* ============ Accueil — Catégories coulissantes (mi/categories.js) ============
   Mobile et tablette : une rangée qui glisse d'un bord à l'autre de l'écran, quatre vignettes
   entières et la cinquième coupée (≈ 40 %) pour montrer qu'on peut faire glisser.
   Ordinateur : la rangée de six reste telle quelle (nouvel ordre). */
@media (max-width: 833px) {
  .acc-categories.mi-categories { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: -16px; padding: 4px 16px 10px; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .acc-categories.mi-categories::-webkit-scrollbar { display: none; }
  .mi-categories .acc-categorie { flex: 0 0 calc((100% - 32px) / 4.4); scroll-snap-align: start; align-content: start;
    font-size: 12px; line-height: 1.25; text-wrap: balance; }
  .mi-categories .acc-categorie-vignette { max-width: none; padding: 9px; border-radius: 18px; }
}

/* ============ Panier en bulle (mi/panier-bulle.js) ============
   Réf. Mobbin : SuperHi, Klook, Depop. La bulle sort de l'icône du panier : elle naît d'un
   cercle posé sur la pointe, gonfle avec un petit rebond, puis le contenu monte en cascade.
   Fermeture : elle rentre dans l'icône. Pointe toujours en face du bouton cliqué. */
.mi-bulle { position: fixed; z-index: 60; display: flex; flex-direction: column; color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  --ressort: cubic-bezier(.3, 1.35, .5, 1);
  transform-origin: var(--pointe, 85%) -8px;
  clip-path: circle(14px at var(--pointe, 85%) -6px); scale: .55; opacity: 0;
  transition: clip-path 300ms cubic-bezier(.5, 0, .75, 0), scale 300ms cubic-bezier(.5, 0, .75, 0), opacity 200ms ease 80ms; }
.mi-bulle.is-ouverte { clip-path: circle(160% at var(--pointe, 85%) -6px); scale: 1; opacity: 1;
  transition: clip-path 620ms cubic-bezier(.22, 1, .36, 1), scale 560ms var(--ressort), opacity 140ms ease; }
.mi-bulle[hidden] { display: none; }
.mi-bulle-pointe { position: absolute; top: -6px; left: var(--pointe, 85%); width: 16px; height: 16px; translate: -50% 0; rotate: 45deg;
  border-radius: 4px 0 0 0; background: var(--page); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.mi-bulle-corps { display: flex; flex-direction: column; min-height: 0; max-height: inherit; overflow: hidden; border-radius: 24px;
  background: var(--page); border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(15, 20, 45, .06), 0 24px 60px -12px rgba(15, 20, 45, .28); }
.mi-bulle-corps > * { animation: mi-bulle-monte 460ms cubic-bezier(.22, 1, .36, 1) both; }
.mi-bulle-corps > :nth-child(2) { animation-delay: 60ms; } .mi-bulle-corps > :nth-child(3) { animation-delay: 120ms; }
@keyframes mi-bulle-monte { from { opacity: 0; translate: 0 10px; } }
.mi-bulle-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 10px 20px; }
.mi-bulle-tete h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.mi-bulle-compte { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--ghost); font-size: 11.5px; font-weight: 600; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.mi-bulle-fermer { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--ghost); color: var(--ink); font-size: 13px; cursor: pointer; transition: background .2s, scale .2s; }
.mi-bulle-fermer:hover { background: var(--line); } .mi-bulle-fermer:active { scale: .9; }
.mi-bulle-liste { list-style: none; margin: 0; padding: 2px 12px 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.mi-bulle-ligne { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 16px;
  animation: mi-bulle-monte 460ms cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(90ms + var(--i, 0) * 45ms);
  transition: opacity 200ms ease, translate 220ms ease; }
.mi-bulle-ligne:hover { background: var(--ghost); }
.mi-bulle-ligne { overflow: hidden; }
/* retrait : la ligne glisse vers la droite et se referme, les suivantes remontent avec elle */
.mi-bulle-ligne.is-retiree { height: 0 !important; padding-block: 0; opacity: 0; translate: 56px 0; animation: none; pointer-events: none;
  transition: height 420ms cubic-bezier(.22, 1, .36, 1) 60ms, padding 420ms cubic-bezier(.22, 1, .36, 1) 60ms,
    opacity 240ms ease, translate 360ms cubic-bezier(.5, 0, .3, 1); }
/* bulle déjà ouverte et contenu remplacé (article ajouté) : pas de nouvelle entrée en cascade */
.mi-bulle-corps.is-calme > *, .mi-bulle-corps.is-calme .mi-bulle-ligne { animation: none; }
/* après un ajout : la ligne ajoutée s'allume puis s'éteint doucement, sa vignette fait un petit saut */
.mi-bulle-corps .mi-bulle-ligne.is-nouveau { animation: mi-bulle-monte 460ms cubic-bezier(.22, 1, .36, 1) both, mi-bulle-allume 1.9s ease-out 180ms both; animation-delay: calc(90ms + var(--i, 0) * 45ms), 180ms; }
.mi-bulle-corps.is-calme .mi-bulle-ligne.is-nouveau { animation: mi-bulle-allume 1.9s ease-out both; }
.mi-bulle-ligne.is-nouveau .mi-bulle-vignette { animation: mi-bulle-saut 620ms cubic-bezier(.3, 1.5, .5, 1) 260ms both; }
@keyframes mi-bulle-allume { 0%, 35% { background: color-mix(in srgb, var(--accent) 13%, transparent); } 100% { background: transparent; } }
@keyframes mi-bulle-saut { 0% { scale: .8; } 100% { scale: 1; } }
html.mi-sans-toast .toast { visibility: hidden; }
.mi-bulle-vignette { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.mi-bulle-vignette img { width: 88%; height: 88%; object-fit: contain; mix-blend-mode: multiply; }
.mi-bulle-infos { display: grid; gap: 3px; min-width: 0; }
.mi-bulle-nom { color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-bulle-nom:hover { text-decoration: underline; }
.mi-bulle-prix { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.is-indispo .mi-bulle-prix { color: color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 500; }
.is-indispo .mi-bulle-vignette { opacity: .5; }
.mi-bulle-qte { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ghost); }
.mi-bulle-qte button, .mi-bulle-retirer { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--page);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transition: scale .15s; }
.mi-bulle-qte button:active, .mi-bulle-retirer:active { scale: .85; }
.mi-bulle-qte output { min-width: 22px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mi-bulle-pied { display: grid; gap: 10px; padding: 12px 20px 20px; border-top: 1px solid var(--line); }
.mi-bulle-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.mi-bulle-total strong { display: inline-block; font-size: 17px; font-variant-numeric: tabular-nums; }
.mi-bulle-note { margin: -4px 0 2px; font-size: 12px; color: color-mix(in srgb, var(--ink) 60%, transparent); }
.mi-bulle .mi-bulle-cta { width: 100%; justify-content: center; min-height: 48px; border-radius: 999px; }
.mi-bulle-vide { display: grid; justify-items: center; text-align: center; padding: 4px 28px 24px; }
.mi-bulle-vide-img { width: 112px; height: auto; margin: 4px 0 10px; rotate: -10deg; animation: mi-bulle-flotte 3.2s ease-in-out infinite alternate; }
@keyframes mi-bulle-flotte { to { translate: 0 -6px; rotate: -6deg; } }
.mi-bulle-vide-titre { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.mi-bulle-vide-texte { margin: 0 0 16px; max-width: 26ch; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--ink) 65%, transparent); }
/* voile flouté derrière la bulle : la page recule, l'en-tête (et donc le panier) reste net */
.mi-bulle-voile { position: fixed; inset: 0; z-index: 35; background: rgba(10, 16, 40, .12); opacity: 0;
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity 320ms ease, backdrop-filter 420ms cubic-bezier(.22, 1, .36, 1), -webkit-backdrop-filter 420ms cubic-bezier(.22, 1, .36, 1); }
.mi-bulle-voile.is-la { opacity: 1; -webkit-backdrop-filter: blur(4px) saturate(.95); backdrop-filter: blur(4px) saturate(.95); }
.mi-bulle-voile[hidden] { display: none; }
[data-theme="dark"] .mi-bulle-voile { background: rgba(0, 0, 0, .35); }
/* le bouton panier « respire » quand la bulle sort */
.mi-panier-presse { animation: mi-panier-presse 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mi-panier-presse { 30% { scale: .86; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mi-bulle-voile { transition: opacity 120ms ease; }
  .mi-bulle, .mi-bulle.is-ouverte { transition: opacity 120ms ease; clip-path: none; scale: 1; }
  .mi-bulle-corps > *, .mi-bulle-ligne, .mi-bulle-corps .mi-bulle-ligne.is-nouveau, .mi-bulle-ligne.is-nouveau .mi-bulle-vignette, .mi-bulle-vide-img, .mi-panier-presse { animation: none; }
}

/* Demande d'installation envoyée : la page attend sous le sombre que la séquence démarre */
html.mi-inst-intro { background: #11111a; }
html.mi-inst-intro body { visibility: hidden; }

/* Page de remerciement : écran du fond choisi jusqu'au départ de la séquence finale */
html.mi-cf-intro { background: var(--mi-cf-voile, #11111a); }
html.mi-cf-intro body { visibility: hidden; }