/* Démo 14ter — La circulation sanguine en 3D (Three.js) */

.scene.circulation { background: #05060c; min-height: min(84vh, 860px); container-type: inline-size; }
.circulation .vue { position: absolute; inset: 0; }
.circulation .vue canvas { width: 100%; height: 100%; cursor: grab; touch-action: none; }
.circulation[data-mode="bord"] .vue canvas, .circulation[data-mode="yeux"] .vue canvas { cursor: move; }

/* Dans ses yeux : le bord de la membrane de l'hématie, teinté par son taux d'O₂ */
.voile-yeux {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 58%, color-mix(in srgb, var(--membrane, #d8102c) 35%, transparent) 82%, color-mix(in srgb, var(--membrane, #d8102c) 70%, #000) 100%);
}
.circulation[data-mode="yeux"] .voile-yeux { opacity: 1; }
.calque-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Étiquettes dans la scène */
.etiquette {
  font: 600 .72rem var(--police-texte); color: #e8ecff; white-space: nowrap;
  padding: .15em .55em; border-radius: 999px; background: rgba(8, 10, 22, .62);
  border: 1px solid rgba(255, 255, 255, .14); text-shadow: 0 1px 2px #000;
}
.etiquette.organe { font-size: .8rem; border-color: rgba(125, 211, 252, .45); }
.etiquette.coeur { border-color: rgba(248, 113, 113, .55); }
.etiquette.micro { background: rgba(8, 10, 22, .45); font-weight: 400; }
.etiquette.cliquable { pointer-events: auto; cursor: pointer; }
.etiquette.cliquable:hover { background: rgba(34, 211, 238, .3); }

/* Chargement */
.chargement {
  position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: radial-gradient(circle at 50% 45%, #2a0a12, #05060c 70%); color: #fecdd3; text-align: center;
}
.chargement[hidden] { display: none; }
.chargement .rond { width: 46px; height: 46px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 30px #e11d48; animation: pulser .9s ease-in-out infinite; }
@keyframes pulser { 0%, 100% { transform: scale(.8); } 15% { transform: scale(1.08); } 35% { transform: scale(.9); } 50% { transform: scale(1); } }

/* Onglets des vues */
.circulation .modes {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: calc(100% - 24px);
  background: rgba(10, 12, 24, .72); border: 1px solid var(--ligne);
  -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou));
}
.circulation .modes button {
  border: 0; background: none; cursor: pointer; padding: .45em 1em; border-radius: 999px;
  color: var(--texte-doux); font: 600 .85rem var(--police-texte); white-space: nowrap;
}
.circulation .modes button.actif { background: linear-gradient(135deg, #fb7185, #e11d48); color: #fff; }

/* Cartel : où est notre hématie ? */
.circulation .cartel {
  position: absolute; left: 12px; top: 62px; z-index: 6; width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 190px); overflow: auto; padding: 12px 14px;
  background: rgba(10, 12, 24, .82); border: 1px solid rgba(251, 113, 133, .45); border-radius: var(--rayon);
  -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou));
}
.cartel-lieu { font: .7rem var(--police-code); color: #fda4af; text-transform: uppercase; letter-spacing: .04em; }
.circulation .cartel strong { display: block; font-family: var(--police-titre); font-size: 1.02rem; margin: 3px 0 6px; color: #fff; }
.circulation .cartel p { margin: 0 0 8px; font-size: .86rem; color: #c9cfe3; line-height: 1.45; }
.mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 8px; }
.mesures[hidden] { display: none; }
.mesures div { padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .06); }
.mesures dt { font-size: .66rem; color: var(--texte-doux); }
.mesures dd { margin: 0; font: 600 .8rem var(--police-code); color: #fff; }
.jauge-o2 { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-bottom: 8px; }
.jauge-o2 span { display: block; height: 100%; width: 70%; transition: width .3s, background .3s; }
.legende-echanges { display: grid; gap: 3px; font-size: .78rem !important; }
.legende-echanges[hidden] { display: none; }
.legende-echanges i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 8px currentColor; }
.circulation .cartel .temps { font: .72rem var(--police-code); color: var(--texte-doux); margin: 0; }
#aller { margin: 2px 0 8px; font-size: .85rem; }
#aller[hidden] { display: none; }

/* Panneau de droite : cycle cardiaque et répartition du débit */
.panneau-droit {
  position: absolute; right: 12px; top: 62px; z-index: 6; width: 230px; display: grid; gap: 8px;
}
.panneau-droit > div {
  padding: 8px 10px; border-radius: 14px; background: rgba(10, 12, 24, .78); border: 1px solid var(--ligne);
  -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou));
}
.cycle { display: flex; align-items: center; gap: 10px; }
.cycle canvas { flex: none; }
.cycle b { display: block; font-size: .82rem; color: #fff; }
.cycle span { font-size: .72rem; color: var(--texte-doux); }
.repartition p { margin: 0 0 6px; font-size: .74rem; color: var(--texte-doux); }
.repartition p b { color: #fff; }
.repartition .barre { display: grid; grid-template-columns: 92px 1fr 34px; align-items: center; gap: 6px; font-size: .7rem; color: #d7dcef; margin: 3px 0; }
.repartition .barre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repartition .barre i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #fb7185, #e11d48); max-width: 100%; transition: width .4s; }
.repartition .barre b { font: .68rem var(--police-code); text-align: right; }

/* Bas de la scène : frise du trajet et réglages */
.circulation .bas { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 7; display: grid; gap: 8px; pointer-events: none; }
.circulation .bas > * { pointer-events: auto; }
.circulation .bas .controles { position: static; }
.frise {
  list-style: none; margin: 0; padding: 6px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin;
  background: rgba(10, 12, 24, .7); border: 1px solid var(--ligne); border-radius: 14px;
  -webkit-backdrop-filter: blur(var(--flou)); backdrop-filter: blur(var(--flou));
}
.frise li { flex: none; display: flex; align-items: center; }
.frise li + li::before { content: ""; width: 8px; height: 2px; background: rgba(255, 255, 255, .2); margin-right: 4px; }
.frise button {
  border: 1px solid transparent; background: rgba(255, 255, 255, .05); color: #cdd3e6; cursor: pointer;
  font: .72rem var(--police-texte); padding: .3em .65em .3em .5em; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.frise button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pastille); }
.frise button.passe { opacity: .55; }
.frise button.actif { border-color: #fb7185; background: rgba(251, 113, 133, .2); color: #fff; opacity: 1; }
.circulation .controles select {
  font: inherit; font-size: .82rem; background: #141a2c; color: var(--texte); border: 1px solid var(--ligne); border-radius: 8px; padding: .2em .4em; max-width: 190px;
}
.circulation .controles output { font-family: var(--police-code); min-width: 2em; text-align: right; }
.circulation #pause { min-width: 2.6em; justify-content: center; }
.options { position: relative; }
.options summary { cursor: pointer; list-style: none; }
.options summary::-webkit-details-marker { display: none; }
.options summary::after { content: " ▾"; }
.liste-options {
  position: absolute; bottom: calc(100% + 8px); right: 0; display: grid; gap: 6px; padding: 10px 12px; min-width: 230px;
  background: rgba(10, 12, 24, .95); border: 1px solid var(--ligne); border-radius: 12px;
}
.liste-options label { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.liste-options input { accent-color: #fb7185; }
.liste-options input[type="range"] { width: 90px; }

.circulation .astuce { position: absolute; right: 14px; bottom: 150px; z-index: 5; margin: 0; font-size: .72rem; color: var(--texte-doux); pointer-events: none; text-align: right; }
.circulation[data-mode="ensemble"] .astuce::before { content: "Glisser : tourner · molette : zoomer · clic sur un organe : en savoir plus"; }
.circulation[data-mode="coeur"] .astuce::before { content: "Glisser : tourner · « Affichage » : coupe ou cœur transparent"; }
.circulation[data-mode="bord"] .astuce::before { content: "Glisser : regarder autour · molette : reculer · double-clic : regarder devant · ← → : étapes"; }
.circulation[data-mode="yeux"] .astuce::before { content: "Vous êtes l'hématie · glisser : tourner la tête · double-clic : regarder devant · ← → : étapes"; }
.bouton-vr { position: absolute !important; top: 62px !important; bottom: auto !important; left: auto !important; right: 256px !important; width: auto !important; padding: 8px 14px !important; }

@container (max-width: 820px) {
  .panneau-droit { width: 180px; }
  .repartition { display: none; }
  .circulation .astuce { display: none; }
}
@container (max-width: 600px) {
  .circulation .modes { left: 12px; right: 12px; transform: none; border-radius: 16px; }
  .circulation .modes button { flex: 1; white-space: normal; font-size: .72rem; padding: .4em .5em; border-radius: 12px; }
  .panneau-droit { display: none; }
  .circulation .cartel { top: 70px; max-height: 32%; padding: 9px 11px; }
  .circulation .cartel p { font-size: .8rem; }
  .circulation .cartel #cartel-texte { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .circulation .cartel .mesures { display: none; }
  .circulation .controles { gap: 6px; }
  .circulation .controles .reglage { padding: .35em .6em; font-size: .78rem; }
  .circulation .controles .secondaire { display: none; }
  .circulation .controles select { max-width: 150px; }
  .frise button { font-size: .68rem; }
}