html, body {
      margin: 0; padding: 0; overflow: hidden; height: 100%;
      background: #1e1e1e;
    }
    /* --- Lien site bergall.fr --- */
    #site-link {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10;
      display: flex;
      align-items: center;
      background: #fff;
      padding: 4px 16px 4px 4px;
      border-radius: 999px;
      text-decoration: none;
      color: #111;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.85rem;
      line-height: 1.2;
      transition: transform 0.2s ease;
      pointer-events: auto;
    }
    #site-link:hover {
      transform: scale(1.05);
    }
    #site-link img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 8px;
    }

    #canvas-container {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    #map-ui {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
      pointer-events: none; /* éviter d'interférer avec la carte */
    }
    #minimap {
      display: block;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 3px;
      pointer-events: auto;
      cursor: crosshair;
    }
    #zoom-controls {
      position: absolute;
      bottom: 10px;
      left: 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 10;
      pointer-events: auto;
    }
    #zoom-controls button {
      font-size: 1.5rem;
      padding: 5px 10px;
      cursor: pointer;
      background: #333;
      color: white;
      border: none;
      border-radius: 4px;
      user-select: none;
    }
    #zoom-controls button:hover {
      background: #555;
    }

    /* --- Panel POI --- */
    #poi-panel {
      position: fixed;
      top: 0;
      right: 0;
      width: min(33vw, 600px);
      height: 100%;
      background: #fff;
      color: #111;
      font-family: 'Inter', sans-serif;
      z-index: 100;
      overflow-y: auto;
      padding: 48px 28px 32px;
      box-sizing: border-box;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      box-shadow: -4px 0 24px rgba(0,0,0,0.15);
    }
    #poi-panel.open {
      transform: translateX(0);
    }
    #poi-close {
      position: absolute;
      top: 14px;
      right: 16px;
      background: none;
      border: none;
      color: #999;
      font-size: 1.2rem;
      cursor: pointer;
      line-height: 1;
      font-family: 'Inter', sans-serif;
    }
    #poi-close:hover { color: #111; }
    #poi-content img {
      width: 100%;
      border-radius: 6px;
      margin-bottom: 20px;
    }
    #poi-content h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 16px; color: #111; }
    #poi-content h2 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin: 2rem 0 1rem; color: #888; }
    #poi-content p  { font-size: 1rem; line-height: 1.7; color: #444; margin: 0 0 1rem; }
    #poi-content ul { padding-left: 1.25rem; color: #444; font-size: 1rem; line-height: 1.8; }
    #poi-content a  { color: #111; text-underline-offset: 3px; }
    #poi-content a:hover { color: #555; }
    #poi-content hr { border: none; border-top: 1px solid #eee; margin: 20px 0; }
    #poi-content iframe {
      max-width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      border-radius: 6px;
      margin: 1rem 0;
    }

    @media (max-width: 768px) {
      #poi-panel { width: 90vw; }
    }

    /* --- Splash screen --- */
    #splash {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease;
    }
    #splash.parting {
      background: transparent;
    }
    #splash-text {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(1.2rem, 3vw, 2rem);
      letter-spacing: 0.25em;
      text-transform: lowercase;
      color: #111;
      opacity: 1;
      transition: opacity 0.6s ease;
      z-index: 1;
    }
    #splash-text.fade { opacity: 0; }

    .cloud {
      position: absolute;
      border-radius: 50%;
      background: white;
      will-change: transform, opacity;
    }