/* Scène « Sous la demande » — L’esprit EX’SIE. À plat : aplats, traits, bordures fines. Classes préfixées dm-. */
.dm-carte, .dm-points { position: absolute; left: 0; top: 0; }
.dm-carte { opacity: 0; }
/* Relief : la pile a de l’épaisseur. La scène donne à chaque carte sa hauteur (--dm-h, en px) : sa place dans la pile,
   plus ce qu’elle gagne pendant qu’on la retourne. Les points du petit écran restent au sol. */
.dm-carte { translate: 0 0 calc(var(--dm-h, 0) * 1px * var(--relief)); }

/* Ce qui tourne : les deux faces, dos à dos */
.dm-vol { position: absolute; inset: 0; transform-style: preserve-3d; }
.dm-face { position: absolute; inset: 0; border-radius: var(--r-3); border: 1px solid var(--line-fort); background: var(--surface); color: var(--ink); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Ombre neutre, réservée à la carte au premier plan (son opacité est pilotée par la scène) */
.dm-face::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: var(--flottant); opacity: var(--dm-e, 0); pointer-events: none; }

/* Recto : la demande. Verso : la vraie question, sur une autre teinte de surface, soulignée par l’accent */
.dm-verso { background: var(--bg-doux); border-color: var(--accent); transform: rotateY(180deg); }
/* Le verso porte le sens : son contour d’accent est doublé d’un trait intérieur (2 px au total, sans décaler le contenu) */
.dm-verso::after { content: ""; position: absolute; inset: 0; border-radius: calc(var(--r-3) - 1px); border: 1px solid var(--accent); pointer-events: none; }
.dm-picto { position: absolute; left: 20px; top: 16px; width: 58px; height: 58px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.dm-verso .dm-picto { color: var(--accent); }
/* La mention : une pastille, transparente tant que l’histoire n’est pas résolue (le texte ne bouge pas quand elle se remplit) */
.dm-sur { position: absolute; right: 13px; top: 17px; padding: 6px 11px; border-radius: var(--r-pilule); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--muted); white-space: nowrap; transition: background-color var(--d-2), color var(--d-2); }
.dm-verso .dm-sur { color: var(--accent-texte); }
/* Temps fort : les trois vraies questions sont sur la table, la mention de la dernière passe en aplat */
.dm-resolue .dm-verso .dm-sur { background: var(--accent-fonce); color: #fff; }
.dm-lib { position: absolute; left: 24px; right: 24px; bottom: 12px; font-size: 20.5px; font-weight: 700; line-height: 1.2; color: var(--ink); text-wrap: balance; }
/* Une fois retournée et reposée, la carte redevient plate : il ne reste que le verso */
.dm-retournee .dm-recto { visibility: hidden; }
.dm-retournee .dm-verso { transform: none; }

/* « Mouvement réduit » : pas de rotation 3D, le verso vient en fondu par-dessus le recto */
.dm-doux .dm-vol { transform-style: flat; }
.dm-doux .dm-verso { transform: none; opacity: 0; }
.dm-doux .dm-recto > * { opacity: var(--dm-recto, 1); }
.dm-doux .dm-verso > * { opacity: var(--dm-verso, 1); }

/* Petit écran : une carte plein cadre, trois points dessous */
.dm-compact .dm-picto { left: 20px; top: 20px; width: 76px; height: 76px; stroke-width: 2; }
.dm-compact .dm-sur { right: 15px; top: 24px; }
.dm-compact .dm-lib { left: 26px; right: 26px; bottom: 24px; font-size: 23px; }
.dm-points { display: flex; gap: 10px; transform: translate(-50%, -50%); opacity: 0; }
.dm-points span { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--line-fort); }
.dm-points i { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; }