/* Écran d'attente « carte mentale » (assets/map-loader.php) — CSS pur, aucune image. */
.mmc-loader { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-color, #1e293b); text-align: center; }
.mmc-loader-svg { width: min(300px, 72vw); height: auto; overflow: visible; }
.mmc-loader-msg { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .2px; }

/* Branches : elles se dessinent, restent, puis s'effacent en cascade */
.mmc-l { stroke-dasharray: 120; animation: mmcDraw 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.mmc-leaf, .mmc-n { transform-box: fill-box; transform-origin: center; animation: mmcPop 4.8s ease-in-out infinite; animation-delay: calc(var(--i) * .22s); }
.mmc-core { transform-box: fill-box; transform-origin: center; animation: mmcPulse 2.4s ease-in-out infinite; }
.mmc-ring { transform-box: fill-box; transform-origin: center; animation: mmcRing 2.4s ease-out infinite; }

@keyframes mmcDraw {
  0%   { stroke-dashoffset: 120; opacity: 1; }
  28%  { stroke-dashoffset: 0; }
  86%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes mmcPop {
  0%, 20% { transform: scale(0); opacity: 0; }
  32%     { transform: scale(1.18); opacity: 1; }
  40%     { transform: scale(1); }
  86%     { transform: scale(1); opacity: 1; }
  100%    { transform: scale(.85); opacity: 0; }
}
@keyframes mmcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes mmcRing  { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }

/* Astuces : défilement en CSS seul (visibles même avant le chargement du JavaScript) */
.mmc-tips { position: relative; width: min(380px, 88vw); height: 2.8em; font-size: .85rem; line-height: 1.4; opacity: .8; }
.mmc-tips span { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; opacity: 0; animation: mmcTip 16s infinite; animation-delay: calc(var(--t) * 4s); }
@keyframes mmcTip { 0% { opacity: 0; transform: translateY(4px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; } }

/* Plein écran (création d'une carte) */
.mmc-loader-overlay { position: fixed; inset: 0; z-index: 20000; display: flex; align-items: center; justify-content: center; background: var(--bg-primary, #f4f6fa); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s; }
.mmc-loader-overlay.is-on { opacity: 1; visibility: visible; pointer-events: auto; }

/* Page view.php : le bloc #loading devient un plein écran */
#loading.mmc-loading { position: fixed; inset: 0; top: 0; left: 0; transform: none; z-index: 20000; display: flex; align-items: center; justify-content: center; background: var(--bg-primary, #f4f6fa); transition: opacity .25s ease; }
#loading.mmc-loading.is-leaving { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .mmc-l, .mmc-leaf, .mmc-n, .mmc-core, .mmc-ring { animation: none; }
  .mmc-ring { opacity: 0; }
  .mmc-tips span { animation: none; }
  .mmc-tips span:first-child { opacity: 1; }
  .mmc-loader-overlay, #loading.mmc-loading { transition: none; }
}