/* ============================================================
   assets/css/mes-rc-vitrine.css · Mes RC, Parc RC en vue « vitrine »
   Le cadre en vedette est une scène sombre quel que soit le thème (comme un écran
   de sélection de véhicule) ; les cartes suivent les couleurs du site.
   Téléphone d'abord : cibles de 44 px, min-width:0 sur les enfants de grille.
   ============================================================ */

/* ---------- Bascule Vitrine / Liste ---------- */
.vit-bascule { display:inline-grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--surface-2); border-radius:12px; }
.vit-bascule a { min-height:44px; min-width:104px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 12px; border-radius:9px;
  color:var(--text-muted); font-weight:600; font-size:.88rem; text-decoration:none; }
.vit-bascule a[aria-current="true"] { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.mesrc-titre-droite { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ---------- Scène : la machine en vedette ---------- */
.vit-hero { position:relative; isolation:isolate; overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.12); background:#0b0a08; color:#f4efe8; margin:0 0 22px; scroll-margin-top:84px; }
.vit-fond { position:absolute; inset:-30px; z-index:-3; background-size:cover; background-position:center; filter:blur(34px) saturate(1.2) brightness(.45); transform:scale(1.1); }
.vit-hero::before { /* le faisceau du projecteur */
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 38% 70% at 66% -8%, rgba(255,255,255,.34), rgba(255,255,255,.07) 55%, transparent 72%),
    linear-gradient(180deg, rgba(10,8,6,.55), rgba(10,8,6,.15) 40%, rgba(10,8,6,.85));
}
.vit-hero::after { /* quadrillage discret */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.35; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 80%); mask-image:linear-gradient(180deg, #000, transparent 80%);
}
.vit-hero-grille { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:22px; padding:26px 28px 32px; align-items:center; }
.vit-hero-texte { min-width:0; }
.vit-etiquette { display:inline-flex; align-items:center; gap:6px; color:#fb923c; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.74rem; }
.vit-hero h2 { margin:6px 0 8px; font-size:clamp(1.7rem, 4.2vw, 3rem); line-height:1.04; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; font-style:italic; overflow-wrap:anywhere; color:#fff; }
.vit-hero-etoiles { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 10px; }
.vit-hero .gear-etoiles button { color:rgba(255,255,255,.5); }
.vit-hero .gear-etoiles .pleine { color:#fbbf24; }
.vit-hero .gear-etoiles .gear-etoiles-effacer { color:rgba(255,255,255,.6); }
.vit-muet { color:rgba(255,255,255,.6); font-size:.8rem; }

.vit-pastilles { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; }
.vit-pastilles-carte { margin:0; }
.vit-pastille { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; border:1px solid rgba(249,115,22,.55); color:#ffd2ad; background:rgba(249,115,22,.1); font-size:.76rem; font-weight:700; }
.vit-pastille-ok { border-color:rgba(74,222,128,.5); color:#bff5d2; background:rgba(74,222,128,.1); }
.vit-pastille-panne { border-color:rgba(248,113,113,.6); color:#fecaca; background:rgba(248,113,113,.12); }
.vit-pastille-autre { border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.8); background:rgba(255,255,255,.08); }
.vit-point { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:#4ade80; box-shadow:0 0 8px #4ade80; }
.vit-point-panne { background:#f87171; box-shadow:0 0 8px #f87171; }
.vit-point-autre { background:#a79f93; box-shadow:none; }

.vit-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0 0 14px; max-width:440px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(0,0,0,.38); overflow:hidden; }
.vit-stats > div { padding:9px 12px; min-width:0; }
.vit-stats > div + div { border-left:1px solid rgba(255,255,255,.14); }
.vit-stats small { display:block; color:rgba(255,255,255,.62); font-size:.72rem; }
.vit-stats b { font-size:1.12rem; color:#fff; overflow-wrap:anywhere; }
.vit-hero .mesrc-etat-plan { white-space:normal; }
.vit-hero [class^="mesrc-plan-"] { margin:0 0 6px; }
.vit-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.vit-actions .btn { min-height:44px; }
.vit-hero .btn-ghost { color:#f4efe8; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.07); }

.vit-scene { position:relative; min-width:0; }
.vit-cadre { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:#000; box-shadow:0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.1); }
.vit-cadre img { width:100%; height:100%; object-fit:cover; display:block; }
.vit-cadre::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55)); pointer-events:none; }
.vit-cadre .vit-sans-photo { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); }
.vit-podium { position:absolute; left:6%; right:6%; bottom:-16px; height:34px; border-radius:50%; z-index:-1;
  background:radial-gradient(ellipse at 50% 50%, rgba(249,115,22,.75), rgba(249,115,22,.18) 55%, transparent 72%); filter:blur(7px); }
.vit-photo-lien { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:2; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 14px; border-radius:999px;
  background:rgba(0,0,0,.65); color:#fff; font-weight:700; font-size:.84rem; text-decoration:none; border:1px solid rgba(255,255,255,.3); }

/* ---------- Cartes du parc ---------- */
.vit-titre { display:block; margin:0 0 2px; font-size:1.05rem; text-transform:uppercase; letter-spacing:.06em; }
.vit-titre span { color:var(--primary-text, var(--primary)); }
.vit-aide { margin:0 0 12px; color:var(--text-muted); font-size:.84rem; }
.vit-cartes { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px; margin-bottom:18px; }
.vit-cartes > * { min-width:0; }
.vit-carte { position:relative; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; background:var(--surface); overflow:hidden; scroll-margin-top:84px; transition:border-color .15s, transform .15s; }
.vit-carte:hover { border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); transform:translateY(-2px); }
.vit-carte-courante { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary), 0 10px 30px -12px color-mix(in srgb, var(--primary) 55%, transparent); }
.vit-carte-haut { display:flex; gap:12px; padding:12px; color:var(--text); text-decoration:none; min-height:44px; }
.vit-carte-img { flex:0 0 112px; height:112px; border-radius:12px; overflow:hidden; background:var(--surface-2); display:block; box-shadow:0 0 0 1px var(--border); }
.vit-carte-img img { width:100%; height:100%; object-fit:cover; display:block; }
.vit-carte-img .vit-sans-photo { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.vit-carte-corps { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.vit-carte-corps b { font-size:1.02rem; line-height:1.15; overflow-wrap:anywhere; }
.vit-carte .vit-pastille { border-color:color-mix(in srgb, var(--primary) 55%, transparent); color:var(--primary-text, var(--primary)); background:color-mix(in srgb, var(--primary) 10%, transparent); }
.vit-etat { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.86rem; margin-top:auto; }
.vit-meta { color:var(--text-muted); font-size:.8rem; }
.vit-carte > [class^="mesrc-plan-"] { padding:0 12px 8px; }
.vit-carte-bas { margin-top:auto; display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--border); background:color-mix(in srgb, #000 12%, transparent); }
.vit-carte-bas .btn { flex:1 1 0; min-width:0; min-height:44px; }
.vit-marque { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--primary); color:#1a0d02; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.vit-sans-photo { display:flex; }

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .vit-hero { border-radius:18px; }
  .vit-hero-grille { grid-template-columns:minmax(0,1fr); padding:18px 16px 28px; gap:18px; }
  .vit-scene, .vit-scene-nav { order:-1; }
  .vit-hero::before { background:radial-gradient(ellipse 70% 50% at 50% -6%, rgba(255,255,255,.3), transparent 70%), linear-gradient(180deg, rgba(10,8,6,.5), rgba(10,8,6,.15) 40%, rgba(10,8,6,.85)); }
  .vit-stats { max-width:none; }
  .vit-cartes { grid-template-columns:minmax(0,1fr); }
  .vit-bascule { width:100%; }
  .vit-actions .btn { flex:1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .vit-carte { transition:none; } .vit-carte:hover { transform:none; } }

/* ---------- Photo détourée (lot 2) : la machine posée, sans cadre ---------- */
.vit-sur-podium { position:relative; aspect-ratio:4/3; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6%; }
/* L'image remplit la boîte (et non plus sa taille naturelle) pour que l'éclat, masqué par la même image, épouse la machine au pixel près. */
.vit-sur-podium { z-index:1; }
.vit-sur-podium img { position:absolute; inset:0 0 6% 0; width:100%; height:94%; object-fit:contain; object-position:50% 100%; display:block;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.6)); }
.vit-scene .vit-sur-podium + .vit-podium { bottom:-4px; }
.vit-carte-img .vit-decoupe { width:100%; height:100%; object-fit:contain; padding:6px;
  background:radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 70%); filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); }

/* ---------- Halo animé autour de la machine détourée (26/10/2026) : pur CSS, aucune image, aucune dépendance ----------
   De bas en haut : un plateau (deux anneaux de lumière qui tournent en sens inverse, vus en perspective), une aura qui respire,
   des braises qui montent, un éclat qui balaie la machine (masqué par la découpe elle-même). Tout est décoratif (aria-hidden). */
.vit-halo { position:absolute; inset:0; z-index:0; pointer-events:none; }
.vit-aura { position:absolute; left:-6%; right:-6%; top:6%; bottom:-6%; border-radius:50%;
  background:radial-gradient(ellipse 50% 46% at 50% 56%, rgba(249,115,22,.72), rgba(249,115,22,.28) 45%, transparent 74%);
  filter:blur(14px); transform-origin:50% 70%; animation:vit-respire 4.2s ease-in-out infinite; }
.vit-plateau { position:absolute; left:2%; right:2%; bottom:-6px; aspect-ratio:1/.3; }
.vit-anneau { position:absolute; left:50%; top:50%; width:100%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 40%, rgba(249,115,22,.25) 58%, #fb923c 84%, #fff1e0 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent 94%, #000 95%); mask:radial-gradient(farthest-side, transparent 94%, #000 95%);
  filter:drop-shadow(0 0 8px rgba(249,115,22,.95)) drop-shadow(0 0 22px rgba(249,115,22,.6));
  transform:translate(-50%,-50%) scaleY(.3) rotate(0deg); animation:vit-tourne 5.5s linear infinite; }
.vit-anneau-2 { width:74%; opacity:.8; animation-duration:8s; animation-direction:reverse;
  background:conic-gradient(from 90deg, transparent 0 45%, rgba(255,190,120,.2) 62%, #ffd2ad 86%, #fff 100%); }
.vit-braises { position:absolute; left:14%; right:14%; bottom:8%; height:72%; overflow:hidden;
  -webkit-mask:linear-gradient(transparent, #000 22%, #000 62%, transparent); mask:linear-gradient(transparent, #000 22%, #000 62%, transparent); }
.vit-braises::before, .vit-braises::after { content:""; position:absolute; inset:0; opacity:0; animation:vit-monte 6.4s linear infinite;
  background:
    radial-gradient(circle, #ffc48a 0 1.4px, transparent 2.8px) 8% 86% / 8px 8px no-repeat,
    radial-gradient(circle, #ff9a4d 0 1.8px, transparent 3.2px) 27% 64% / 9px 9px no-repeat,
    radial-gradient(circle, #ffe2c2 0 1.2px, transparent 2.4px) 46% 92% / 7px 7px no-repeat,
    radial-gradient(circle, #ffb36b 0 1.6px, transparent 3px) 63% 58% / 8px 8px no-repeat,
    radial-gradient(circle, #ff8a2a 0 1.9px, transparent 3.4px) 81% 80% / 9px 9px no-repeat,
    radial-gradient(circle, #ffd2ad 0 1.3px, transparent 2.6px) 94% 96% / 7px 7px no-repeat; }
.vit-braises::after { animation-delay:-3.2s; transform:scaleX(-1); }
.vit-sur-podium::after { content:""; position:absolute; inset:0 0 6% 0; pointer-events:none;
  -webkit-mask:var(--decoupe) 50% 100% / contain no-repeat; mask:var(--decoupe) 50% 100% / contain no-repeat;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  mix-blend-mode:soft-light; animation:vit-eclat 6s ease-in-out 1.2s infinite; }
.vit-scene .vit-sur-podium + .vit-podium { animation:vit-respire-sol 4.2s ease-in-out infinite; }
.vit-halo ~ .vit-sur-podium img { animation:vit-arrivee .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vit-tourne { to { transform:translate(-50%,-50%) scaleY(.3) rotate(360deg); } }
@keyframes vit-respire { 0%,100% { opacity:.62; transform:scale(.97); } 50% { opacity:1; transform:scale(1.05); } }
@keyframes vit-respire-sol { 0%,100% { opacity:.7; } 50% { opacity:1; } }
@keyframes vit-monte { 0% { opacity:0; transform:translateY(34%); } 18% { opacity:1; } 80% { opacity:.7; } 100% { opacity:0; transform:translateY(-42%); } }
@keyframes vit-eclat { 0%,55% { background-position:160% 0; } 80%,100% { background-position:-60% 0; } }
@keyframes vit-arrivee { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .vit-aura, .vit-anneau, .vit-braises::before, .vit-braises::after, .vit-sur-podium::after, .vit-scene .vit-sur-podium + .vit-podium, .vit-halo ~ .vit-sur-podium img { animation:none; }
  .vit-braises, .vit-sur-podium::after { display:none; }
}

/* ---------- En-tête de la fiche machine : la même scène que « En vedette » (26/10/2026) ---------- */
.vit-hero h1.vit-nom { margin:0 0 8px; font-size:clamp(1.7rem, 4.2vw, 3rem); line-height:1.04; font-weight:900; letter-spacing:-.02em; text-transform:uppercase; font-style:italic; overflow-wrap:anywhere; color:#fff; }
.vit-hero-droite { min-width:0; }
.vit-fiche .vit-puces { display:flex; flex-wrap:wrap; gap:6px; }
.vit-fiche .vit-puces .badge { background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.55); color:#ffd2ad; font-weight:700; }
.vit-fiche .fiche-modele { color:rgba(255,255,255,.7); }
.vit-fiche .fiche-modele b { color:#fff; }
.vit-fiche .fiche-memo span { color:rgba(255,255,255,.6); }
.vit-photo-outils { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 18px; margin:22px 0 0; }
.vit-photo-outils a, .vit-photo-outils .rc-coller { color:rgba(255,255,255,.72) !important; margin-top:0 !important; min-height:32px; font-size:.8rem !important; }
.vit-photo-changer { cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:4px 14px; border-radius:999px; border:1px solid rgba(249,115,22,.6); background:rgba(249,115,22,.14); color:#ffd2ad; font-weight:700; font-size:.84rem; }
.vit-hero-droite [style*="text-muted"] { color:rgba(255,255,255,.62) !important; text-align:center; }
.vit-fiche .fiche-boutons { margin:0; padding:0 28px 28px; border-top:0; position:relative; }
.vit-fiche .fiche-infos[open], .vit-fiche .vit-hero-texte details[open] { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.vit-fiche details[open] .btn-ghost { color:var(--text); border-color:var(--border); background:var(--surface-2); }
@media (max-width: 760px) {
  .vit-hero-droite { order:-1; }
  .vit-fiche .fiche-boutons { padding:0 16px 20px; }
}

/* ---------- Plus de magie (26/10/2026) : braises plus nombreuses et plus lumineuses, orbes lents, étincelles qui scintillent ---------- */
.vit-braises { filter:drop-shadow(0 0 4px rgba(255,150,70,.95)); }
.vit-braises::before, .vit-braises::after { animation-duration:4.6s; }
.vit-braises::before { background:
    radial-gradient(circle, #ffd2ad 0 3.1px, transparent 5.5px) 44% 19% / 11px 11px no-repeat,
    radial-gradient(circle, #ffc48a 0 3.6px, transparent 6.5px) 9% 9% / 13px 13px no-repeat,
    radial-gradient(circle, #ff8a2a 0 2.5px, transparent 4.5px) 49% 74% / 9px 9px no-repeat,
    radial-gradient(circle, #ffb36b 0 2.5px, transparent 4.5px) 30% 4% / 9px 9px no-repeat,
    radial-gradient(circle, #ffc48a 0 2.5px, transparent 4.5px) 56% 8% / 9px 9px no-repeat,
    radial-gradient(circle, #ff8a2a 0 2.5px, transparent 4.5px) 73% 54% / 9px 9px no-repeat,
    radial-gradient(circle, #ffd2ad 0 3.6px, transparent 6.5px) 18% 28% / 13px 13px no-repeat,
    radial-gradient(circle, #ff8a2a 0 3.6px, transparent 6.5px) 77% 7% / 13px 13px no-repeat,
    radial-gradient(circle, #ffc48a 0 2.5px, transparent 4.5px) 53% 6% / 9px 9px no-repeat,
    radial-gradient(circle, #ffb36b 0 3.1px, transparent 5.5px) 74% 17% / 11px 11px no-repeat,
    radial-gradient(circle, #ff8a2a 0 2.5px, transparent 4.5px) 21% 69% / 9px 9px no-repeat,
    radial-gradient(circle, #ff9a4d 0 3.6px, transparent 6.5px) 42% 71% / 13px 13px no-repeat,
    radial-gradient(circle, #ffd2ad 0 3.6px, transparent 6.5px) 16% 74% / 13px 13px no-repeat,
    radial-gradient(circle, #ff8a2a 0 2.5px, transparent 4.5px) 27% 47% / 9px 9px no-repeat; }
.vit-braises::after { animation-delay:-2.3s; transform:scaleX(-1); background:
    radial-gradient(circle, #ffc48a 0 3.6px, transparent 6.5px) 94% 8% / 13px 13px no-repeat,
    radial-gradient(circle, #ffd2ad 0 3.1px, transparent 5.5px) 82% 26% / 11px 11px no-repeat,
    radial-gradient(circle, #ffb36b 0 3.1px, transparent 5.5px) 71% 54% / 11px 11px no-repeat,
    radial-gradient(circle, #ffe2c2 0 3.1px, transparent 5.5px) 77% 58% / 11px 11px no-repeat,
    radial-gradient(circle, #ff9a4d 0 3.6px, transparent 6.5px) 34% 23% / 13px 13px no-repeat,
    radial-gradient(circle, #ff8a2a 0 3.1px, transparent 5.5px) 13% 73% / 11px 11px no-repeat,
    radial-gradient(circle, #ffb36b 0 3.6px, transparent 6.5px) 66% 43% / 13px 13px no-repeat,
    radial-gradient(circle, #ffc48a 0 2.5px, transparent 4.5px) 39% 77% / 9px 9px no-repeat,
    radial-gradient(circle, #ffe2c2 0 2.5px, transparent 4.5px) 68% 53% / 9px 9px no-repeat,
    radial-gradient(circle, #ffc48a 0 3.1px, transparent 5.5px) 22% 62% / 11px 11px no-repeat,
    radial-gradient(circle, #ff8a2a 0 3.6px, transparent 6.5px) 88% 9% / 13px 13px no-repeat,
    radial-gradient(circle, #ffe2c2 0 3.6px, transparent 6.5px) 43% 43% / 13px 13px no-repeat,
    radial-gradient(circle, #ffb36b 0 3.6px, transparent 6.5px) 79% 63% / 13px 13px no-repeat,
    radial-gradient(circle, #ffb36b 0 3.1px, transparent 5.5px) 11% 11% / 11px 11px no-repeat; }
.vit-orbes { position:absolute; left:8%; right:8%; bottom:6%; height:84%; overflow:hidden; filter:blur(.6px) drop-shadow(0 0 10px rgba(255,140,50,.9));
  -webkit-mask:linear-gradient(transparent, #000 20%, #000 55%, transparent); mask:linear-gradient(transparent, #000 20%, #000 55%, transparent); }
.vit-orbes::before, .vit-orbes::after { content:""; position:absolute; inset:0; opacity:0; animation:vit-orbe 9s ease-in-out infinite; background:
    radial-gradient(circle, rgba(249,115,22,.7) 0 6.2px, transparent 11.0px) 92% 28% / 22px 22px no-repeat,
    radial-gradient(circle, rgba(249,115,22,.7) 0 9.5px, transparent 17.0px) 92% 59% / 34px 34px no-repeat,
    radial-gradient(circle, rgba(249,115,22,.7) 0 7.8px, transparent 14.0px) 90% 77% / 28px 28px no-repeat,
    radial-gradient(circle, rgba(255,214,170,.65) 0 6.2px, transparent 11.0px) 52% 64% / 22px 22px no-repeat,
    radial-gradient(circle, rgba(255,170,90,.75) 0 9.5px, transparent 17.0px) 48% 41% / 34px 34px no-repeat,
    radial-gradient(circle, rgba(255,214,170,.65) 0 6.2px, transparent 11.0px) 66% 27% / 22px 22px no-repeat; }
.vit-orbes::after { animation-delay:-4.5s; animation-duration:11s; transform:scaleX(-1); }
.vit-etincelles { position:absolute; inset:0; }
.vit-etincelles::before, .vit-etincelles::after { content:""; position:absolute; inset:0; opacity:0; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(255,190,120,.9)); animation:vit-scintille 3.2s ease-in-out infinite; background:
    radial-gradient(circle, #fff4e0 0 1.7px, transparent 3.0px) 19% 33% / 6px 6px no-repeat,
    radial-gradient(circle, #fff4e0 0 1.4px, transparent 2.5px) 66% 12% / 5px 5px no-repeat,
    radial-gradient(circle, #fff 0 1.7px, transparent 3.0px) 54% 72% / 6px 6px no-repeat,
    radial-gradient(circle, #ffe2b8 0 1.7px, transparent 3.0px) 58% 72% / 6px 6px no-repeat,
    radial-gradient(circle, #fff4e0 0 2.0px, transparent 3.5px) 56% 47% / 7px 7px no-repeat,
    radial-gradient(circle, #fff 0 1.4px, transparent 2.5px) 32% 21% / 5px 5px no-repeat,
    radial-gradient(circle, #fff 0 2.0px, transparent 3.5px) 22% 31% / 7px 7px no-repeat,
    radial-gradient(circle, #fff 0 2.0px, transparent 3.5px) 4% 64% / 7px 7px no-repeat,
    radial-gradient(circle, #fff 0 1.4px, transparent 2.5px) 36% 38% / 5px 5px no-repeat,
    radial-gradient(circle, #ffe2b8 0 1.7px, transparent 3.0px) 56% 70% / 6px 6px no-repeat,
    linear-gradient(#fff,#fff) 78% calc(44% + -0.7px) / 1px 11px no-repeat,
    linear-gradient(#fff,#fff) calc(78% + 3.1px) 44% / 11px 1px no-repeat,
    linear-gradient(#fff,#fff) 94% calc(69% + 2.8px) / 1px 15px no-repeat,
    linear-gradient(#fff,#fff) calc(94% + 6.6px) 69% / 15px 1px no-repeat,
    linear-gradient(#fff,#fff) 89% calc(10% + -5.2px) / 1px 13px no-repeat,
    linear-gradient(#fff,#fff) calc(89% + 5.1px) 10% / 13px 1px no-repeat,
    linear-gradient(#fff,#fff) 93% calc(75% + 3.2px) / 1px 13px no-repeat,
    linear-gradient(#fff,#fff) calc(93% + 5.6px) 75% / 13px 1px no-repeat; }
.vit-etincelles::after { animation-delay:-1.6s; animation-duration:3.9s; transform:scale(-1,1) translateY(4%); }
@keyframes vit-orbe { 0% { opacity:0; transform:translate(0,30%); } 25% { opacity:1; } 50% { transform:translate(5%,-8%); } 75% { opacity:.8; } 100% { opacity:0; transform:translate(-4%,-40%); } }
@keyframes vit-scintille { 0%,100% { opacity:0; transform:scale(.6); } 45%,55% { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .vit-orbes, .vit-etincelles { display:none; }
}

/* ---------- Interaction au pointeur (assets/js/mes-rc-vitrine.js) : inclinaison, profondeur, lumière, gerbe au clic ---------- */
.vit-scene { touch-action:pan-y; transform:perspective(900px) rotateX(calc(var(--my, 0) * -6deg)) rotateY(calc(var(--mx, 0) * 8deg)); will-change:transform; }
.vit-aura { translate:calc(var(--mx, 0) * -12px) calc(var(--my, 0) * -9px); }
.vit-plateau { translate:calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px); }
.vit-sur-podium { translate:calc(var(--mx, 0) * 9px) calc(var(--my, 0) * 6px); }
.vit-braises, .vit-orbes, .vit-etincelles { translate:calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 11px); }
/* La lumière déborde de la scène (inset négatif) : sinon son bord se verrait quand le curseur approche d'un côté.
   🔴 TOUTE LA LARGEUR DU CADRE (Yann, 27/10/2026 : « un effet noir mat vertical, à la limite de la souris ») :
   avec 200 px seulement, la lueur était coupée net dès que le curseur passait côté texte. 2 400 px de chaque
   côté couvrent tout le cadre, qui lui-même coupe (overflow:hidden) aux bords arrondis. */
/* La lumière posée sur le cadre entier, au-dessus de tout, en « éclaircir » (screen) : elle passe sur le texte et
   les compteurs sans rien masquer ni rendre opaque. Le cadre coupe ses bords (overflow:hidden). */
.vit-lumiere { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--lo, 0); mix-blend-mode:screen;
  background:radial-gradient(circle 200px at var(--hx, 66%) var(--hy, 45%), rgba(255,205,150,.32), rgba(249,115,22,.11) 55%, transparent 75%); }
@media (prefers-reduced-motion: reduce) { .vit-lumiere { display:none; } }
.vit-fx { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:visible; }
.vit-onde { position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; border:2px solid #ffd2ad; box-shadow:0 0 14px rgba(255,150,70,.9), inset 0 0 10px rgba(255,150,70,.6);
  animation:vit-onde .8s ease-out forwards; }
.vit-etin { position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:#fff4e0; box-shadow:0 0 6px 2px rgba(255,170,90,.95);
  animation:vit-gerbe .9s cubic-bezier(.1,.7,.3,1) forwards; }
.vit-etin-grande { width:8px; height:8px; margin:-4px 0 0 -4px; background:#ffb36b; }
@keyframes vit-onde { from { transform:scale(.4); opacity:1; } to { transform:scale(12); opacity:0; } }
@keyframes vit-gerbe { 0% { transform:translate(0,0) scale(1); opacity:1; } 70% { opacity:1; } 100% { transform:translate(var(--dx), calc(var(--dy) + 36px)) scale(.15); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .vit-scene { transform:none; } .vit-fx { display:none; } }


/* ── Vedette repliable et vignettes de toutes les machines (27/10/2026) ──────────
   Yann : « en mode smartphone, c'est long pour faire défiler jusqu'aux autres modèles ». */
.vit-choix { display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding:2px 2px 10px; margin:0 0 10px; -webkit-overflow-scrolling:touch; }
.vit-choix-item { flex:0 0 auto; width:84px; display:grid; justify-items:center; gap:4px; scroll-snap-align:start; text-decoration:none; color:var(--text-muted); font-size:.74rem; font-weight:600; }
.vit-choix-img { width:64px; height:64px; border-radius:16px; overflow:hidden; display:grid; place-items:center; background:var(--surface-2); border:2px solid var(--border); }
.vit-choix-img img { width:100%; height:100%; object-fit:contain; }
.vit-choix-img .vit-sans-photo svg { width:22px; height:22px; }
.vit-choix-nom { max-width:84px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vit-choix-courant .vit-choix-img { border-color:#f97316; box-shadow:0 0 12px rgba(249,115,22,.45); }
.vit-choix-courant .vit-choix-nom { color:var(--text); }
.vit-hero-haut { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vit-replier { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25);
               background:rgba(0,0,0,.35); color:#fff; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.vit-replier[hidden] { display:none; }
.vit-replier i { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-135deg); margin-top:4px; transition:transform .15s; }
.vit-hero-titre { display:flex; align-items:center; gap:12px; min-width:0; }
.vit-mini { display:none; flex:none; width:56px; height:56px; border-radius:14px; overflow:hidden; background:rgba(0,0,0,.35); }
.vit-mini img { width:100%; height:100%; object-fit:contain; }
/* Repliée : le nom, la vignette, les pastilles. Le reste attend « Déplier ». */
.vit-hero-replie .vit-scene, .vit-hero-replie .fs, .vit-hero-replie .vit-actions, .vit-hero-replie .vit-hero-etoiles,
.vit-hero-replie .vit-rappels, .vit-hero-replie .vit-fond { display:none !important; }
.vit-hero-replie .vit-mini { display:block; }
.vit-hero-replie .vit-hero-grille { min-height:0 !important; }
.vit-hero-replie .vit-replier i { transform:rotate(45deg); margin-top:-4px; }
@media (prefers-reduced-motion: reduce) { .vit-replier i { transition:none; } }

/* ── Les flèches de la scène (01/11/2026, Michel-Ange : « des flèches droite gauche pour faire défiler les voitures ») ── */
.vit-scene-nav { position:relative; min-width:0; }
.vit-fleche { position:absolute; top:50%; z-index:5; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18); color:#fff; backdrop-filter:blur(4px); transition:background .15s, transform .15s; }
.vit-fleche:hover, .vit-fleche:focus-visible { background:#f97316; color:#1a1008; outline:none; transform:scale(1.06); }
.vit-fleche-g { left:8px; }
.vit-fleche-d { right:8px; }
.vit-fleche svg { width:26px; height:26px; }