/* Démo plein écran : trafic place de la Victoire (assets/js/demo.js). */
body.demo-ouverte { overflow: hidden; }
.demo { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-rows: auto 1fr; background: radial-gradient(ellipse at 50% 0%, #0a2656, #01040c 60%); color: var(--texte); opacity: 0; transition: opacity 0.35s; }
.demo[hidden] { display: none; }
.demo.visible { opacity: 1; }
.demo-haut { display: flex; align-items: center; gap: 22px; padding: 12px 22px; border-bottom: 1px solid var(--trait); }
.demo-haut > img { height: 30px; width: auto; }
.demo-titre { display: grid; line-height: 1.2; }
.demo-titre b { font-size: 11px; letter-spacing: 0.24em; color: var(--cyan); }
.demo-titre span { font-size: 14px; color: var(--blanc); }
.demo-etapes { list-style: none; display: flex; gap: 6px; margin-left: auto; counter-reset: e; }
.demo-etapes li { counter-increment: e; padding: 6px 12px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pale); border: 1px solid var(--trait); transition: 0.3s; }
.demo-etapes li::before { content: counter(e, decimal-leading-zero) ' '; }
.demo-etapes li.active { color: var(--blanc); border-color: var(--cyan); background: rgba(79, 216, 255, 0.12); box-shadow: 0 0 16px rgba(79, 216, 255, 0.25); }
.demo-etapes li.faite { color: var(--vert); border-color: rgba(61, 255, 176, 0.4); }
.demo-fermer { position: relative; width: 42px; height: 42px; border: 1px solid var(--trait); flex: none; margin-left: auto; }
.demo-etapes + .demo-fermer { margin-left: 0; }
.demo-fermer:hover { border-color: var(--cyan); }
.demo-fermer span { position: absolute; left: 11px; right: 11px; top: 20px; height: 2px; background: var(--cyan); transform: rotate(45deg); }
.demo-fermer span + span { transform: rotate(-45deg); }
.demo-corps { position: relative; display: grid; grid-template-columns: 320px 1fr 330px; min-height: 0; }
.demo-gauche, .demo-droite { display: flex; flex-direction: column; gap: 14px; padding: 18px; min-height: 0; overflow: auto; }
.demo-gauche { border-right: 1px solid var(--trait); }
.demo-droite { border-left: 1px solid var(--trait); }
.demo-avatar { display: grid; justify-items: center; gap: 6px; }
.demo-avatar .reacteur { width: 190px; }
.demo-statut { font-size: 11px; letter-spacing: 0.24em; color: var(--cyan); }
.reacteur.humain .r-anneau { stroke: var(--argent); }
.reacteur.humain .r-coeur { background: radial-gradient(circle, #fff 0 35%, #c7d3e3 60%, transparent 72%); box-shadow: 0 0 40px 10px rgba(199, 211, 227, 0.45); }
.demo-dialogue { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding-right: 4px; }
.demo-bulle { padding: 12px 14px; font-size: 15px; line-height: 1.5; border-left: 2px solid var(--cyan); background: rgba(79, 216, 255, 0.06); animation: bulle 0.4s ease both; }
.demo-bulle em { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.22em; color: var(--cyan); margin-bottom: 4px; }
.demo-bulle.vous { border-left-color: var(--argent); background: rgba(199, 211, 227, 0.06); color: #c2d0e2; }
.demo-bulle.vous em { color: var(--argent); }
@keyframes bulle { from { opacity: 0; transform: translateY(8px); } }
.demo-carte-zone { position: relative; min-height: 0; overflow: hidden; background: #01040b; }
.demo-carte-zone > .demo-carte { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-carte-zone::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(1, 4, 11, 0.8)); }
.demo-reticule { position: absolute; inset: 16px; pointer-events: none; z-index: 2; }
.demo-reticule i { position: absolute; width: 28px; height: 28px; border: 2px solid var(--cyan); opacity: 0.7; }
.demo-reticule i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.demo-reticule i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.demo-reticule i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.demo-reticule i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.demo-radar { position: absolute; left: 50%; top: 50%; width: min(70vh, 70%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.4s; border: 1px solid rgba(79, 216, 255, 0.35);
  background: repeating-radial-gradient(circle, transparent 0 18%, rgba(79, 216, 255, 0.12) 18% calc(18% + 1px)); }
.demo-radar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(79, 216, 255, 0.45), transparent 22%); animation: tourne 1.6s linear infinite; }
.demo.analyse .demo-radar { opacity: 1; }
.demo-hud { position: absolute; z-index: 2; left: 30px; top: 26px; display: grid; gap: 4px; font-size: 11px; letter-spacing: 0.14em; color: var(--cyan-clair); text-shadow: 0 0 8px rgba(1, 4, 11, 0.9); pointer-events: none; }
.demo-simulation { position: absolute; z-index: 2; left: 30px; bottom: 22px; font-size: 10px; letter-spacing: 0.12em; color: var(--pale); }
.demo-panneau { padding: 16px; border: 1px solid rgba(79, 216, 255, 0.3); background: rgba(2, 9, 24, 0.75); opacity: 0.25; transform: translateX(10px); transition: opacity 0.5s, transform 0.5s; }
.demo-panneau.visible { opacity: 1; transform: none; }
.demo-panneau h3 { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.18em; color: var(--cyan); margin-bottom: 12px; }
.demo-panneau h3 span { color: var(--pale); font-size: 10px; }
.demo-axes, .demo-modes, .demo-infos { list-style: none; display: grid; gap: 8px; }
.axe { display: grid; grid-template-columns: 10px 1fr auto; column-gap: 10px; align-items: center; font-size: 14px; animation: bulle 0.35s ease both; }
.axe i { width: 10px; height: 10px; border-radius: 50%; background: #1fbf7a; box-shadow: 0 0 8px #1fbf7a; }
.axe.dense i { background: #ffb04d; box-shadow: 0 0 8px #ffb04d; }
.axe.bouche i { background: #ff3d6e; box-shadow: 0 0 8px #ff3d6e; animation: pouls 0.8s infinite; }
.axe b { font-size: 10px; letter-spacing: 0.14em; color: #1fbf7a; }
.axe.dense b { color: #ffb04d; }
.axe.bouche b { color: #ff3d6e; }
.axe small { grid-column: 2 / 4; font-size: 11px; color: var(--pale); }
.mode { position: relative; display: grid; grid-template-columns: 1fr auto; padding: 10px 12px; border: 1px solid var(--trait); animation: bulle 0.4s ease both; animation-delay: calc(var(--i) * 0.12s); }
.mode b { color: var(--blanc); font-weight: 600; }
.mode span { font-size: 18px; color: var(--blanc); }
.mode small { grid-column: 1 / 3; font-size: 12px; color: var(--pale); }
.mode.voiture span { color: #ffb04d; }
.mode.conseil { border-color: var(--vert); background: rgba(61, 255, 176, 0.07); box-shadow: 0 0 18px rgba(61, 255, 176, 0.15); }
.mode.conseil span { color: var(--vert); }
.mode.conseil::after { content: 'CONSEILLÉ'; position: absolute; right: 10px; top: -8px; font: 9px var(--mono); letter-spacing: 0.16em; padding: 2px 6px; background: var(--vert); color: var(--noir); }
.demo-meteo { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.demo-meteo b { font-size: 40px; font-weight: 500; color: var(--blanc); text-shadow: 0 0 16px rgba(79, 216, 255, 0.6); }
.demo-meteo span { display: grid; color: var(--blanc); }
.demo-meteo small { color: var(--pale); font-size: 12px; }
.demo-infos li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed rgba(79, 216, 255, 0.18); animation: bulle 0.4s ease both; }
.demo-infos b { font-size: 12px; color: var(--cyan-clair); font-weight: 500; text-align: right; }
.demo-parking { display: flex; align-items: center; gap: 6px; pointer-events: none; animation: bulle 0.5s ease both; }
.demo-parking b { width: 26px; height: 26px; display: grid; place-items: center; background: #1f7bff; color: #fff; font: 700 14px var(--titre); border: 2px solid #fff; box-shadow: 0 0 14px #1f7bff; }
.demo-parking span { padding: 3px 8px; background: rgba(2, 9, 24, 0.9); border: 1px solid #1f7bff; font: 11px var(--mono); color: var(--blanc); white-space: nowrap; }
.demo-parking em { display: block; font-style: normal; color: var(--vert); }
.demo-accueil, .demo-fin { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(1, 4, 12, 0.82); backdrop-filter: blur(8px); }
.demo-fin { background: rgba(1, 4, 12, 0.55); backdrop-filter: blur(3px); }
.demo-accueil[hidden], .demo-fin[hidden] { display: none; }
.demo-accueil-cadre, .demo-fin-cadre { max-width: 560px; text-align: center; display: grid; justify-items: center; gap: 14px; padding: 36px; border: 1px solid rgba(79, 216, 255, 0.4); background: rgba(2, 9, 24, 0.92); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.demo-accueil-cadre .reacteur { width: 150px; }
.demo-accueil-cadre p:not(.surtitre), .demo-fin-cadre p:not(.surtitre) { color: #a9c3e4; }
.demo-accueil-cadre .surtitre, .demo-fin-cadre .surtitre { margin-bottom: 0; }
.demo-note { font-size: 12px; color: var(--pale) !important; }
.demo-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.bouton-demo::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #ff3d6e; box-shadow: 0 0 10px #ff3d6e; animation: pouls 1.2s infinite; }
@media (max-width: 1100px) {
  .demo-corps { grid-template-columns: 1fr; grid-template-rows: 46vh auto auto; overflow: auto; }
  .demo-carte-zone { grid-row: 1; min-height: 46vh; }
  .demo-gauche { grid-row: 2; border: 0; border-top: 1px solid var(--trait); flex-direction: row; align-items: flex-start; overflow: visible; }
  .demo-avatar .reacteur { width: 110px; }
  .demo-dialogue { max-height: 32vh; }
  .demo-droite { grid-row: 3; border: 0; display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); overflow-x: auto; }
  .demo-etapes { display: none; }
  .demo-accueil, .demo-fin { position: fixed; top: 64px; }
}
@media (max-width: 620px) {
  .demo-haut { gap: 12px; padding: 10px 14px; }
  .demo-haut > img { display: none; }
  .demo-gauche { flex-direction: column; align-items: stretch; }
  .demo-avatar { grid-template-columns: 70px 1fr; align-items: center; justify-items: start; }
  .demo-avatar .reacteur { width: 70px; }
  .demo-droite { grid-template-columns: repeat(3, 82vw); scroll-snap-type: x mandatory; }
  .demo-panneau { scroll-snap-align: start; opacity: 1; transform: none; }
  .demo-hud { left: 18px; top: 16px; font-size: 9px; }
  .demo-simulation { left: 18px; bottom: 14px; font-size: 9px; }
  .demo-bulle { font-size: 14px; }
}
.demo-droite > .demo-panneau { flex: none; }
.demo-modes, .demo-axes { align-content: start; }
@media (min-width: 1101px) and (max-height: 980px) {
  .demo-droite { gap: 10px; padding: 14px; }
  .demo-panneau { padding: 12px 14px; }
  .demo-panneau h3 { margin-bottom: 8px; }
  .demo-axes, .demo-modes, .demo-infos { gap: 5px; }
  .axe small { grid-column: auto; display: none; }
  .mode { padding: 7px 10px; }
  .mode small { display: none; }
  .mode span { font-size: 16px; }
  .demo-meteo { margin-bottom: 6px; }
  .demo-meteo b { font-size: 30px; }
  .demo-avatar .reacteur { width: 150px; }
}
@media (max-width: 1100px) { .demo-etapes + .demo-fermer, .demo-fermer { margin-left: auto; } }