/* ═══════════════════════════════════════════════════════════
   duck-pond.css
   NOTE: .dp-pond-area n'est JAMAIS redimensionné ici.
   JS (applyMobileSplit/removeMobileSplit) gère la hauteur
   via window.innerHeight pour contourner les bugs iOS Safari.
   ═══════════════════════════════════════════════════════════ */
/* Transitions thème : déléguées à html.theme-switching dans styles.css */

/* ── Sélection texte : tout verrouillé sauf les champs de saisie ───────── */
.dp-ed-shell,
.dp-pond-area {
  user-select: none;
  -webkit-user-select: none;
}
.dp-text-input,
.dp-textarea {
  user-select: text;
  -webkit-user-select: text;
}

.dp-pond-title {
  position: absolute;
  top: 10px;
  left: 14px;
  z-index: 21;
  font-family: 'Nunito', sans-serif;
  letter-spacing: 0.01em;
  color: #e1f1f2;
  text-shadow: 0 2px 8px rgba(0,30,30,0.4);
}

[data-theme="dark"] .dp-pond-title {
  color: #d0f0e8;
  text-shadow: 0 2px 8px rgba(0,30,30,0.4);
}

.dp-zoom-ctrl {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 2px;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 20px; padding: 4px 6px; z-index: 15;
  border: 1px solid rgba(255,255,255,0.14);
}
.dp-zoom-btn {
  background: none; border: none; color: rgba(255,255,255,0.85);
  font-size: 20px; font-weight: 300; line-height: 1;
  width: 30px; height: 30px; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; transition: background 0.15s;
}
.dp-zoom-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.dp-zoom-label {
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.8);
  font-family: 'Nunito', sans-serif; min-width: 38px; text-align: center;
}

/* ══════════════════════════════════════════════════════
   EDITOR — DESKTOP
   ══════════════════════════════════════════════════════ */
.dp-editor {
  background: #f0f7f4; border-top: 2px solid #cde5d8;
  height: 280px; min-height: 280px; max-height: 280px;
  overflow: hidden; position: relative;
  font-family: 'Nunito', sans-serif; flex-shrink: 0;
}
.dp-ed-shell {
  display: flex; height: 100%; position: relative;
  max-width: 1300px; margin: 0 auto;
}
.dp-ed-close-btn {
  position: absolute; top: 8px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.08);
  color: #6a8a7a; cursor: pointer; font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 5; line-height: 1;
  font-family: 'Nunito', sans-serif; transition: background 0.15s, color 0.15s;
}
.dp-ed-close-btn:hover { background: rgba(0,0,0,0.18); color: #3a5a4a; }
.dp-ed-col-preview {
  flex: 0 0 auto; width: 200px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 12px 10px 10px 14px;
}

/* ── Groupe de boutons haut-droite (Flexbox) ── */
.dp-top-actions {
  position: absolute;
  top: 10px;
  right: 55px;
  z-index: 25;
  display: flex;
  gap: 10px; /* L'espace exact entre les boutons */
}

/* On annule le placement absolu des boutons puisqu'ils sont gérés par le groupe */
.dp-top-actions .dp-help-btn,
.dp-top-actions .dp-theme-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* Bascule des emojis de son */
#dpSoundToggle .icon-sound-on { display: none; }
#dpSoundToggle.active .icon-sound-on { display: block; }
#dpSoundToggle.active .icon-sound-off { display: none; }

.dp-sound-toggle:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Gestion des icônes selon l'état */
.dp-sound-toggle .icon-sound-on { display: none; }
.dp-sound-toggle.active .icon-sound-on { display: block; }
.dp-sound-toggle.active .icon-sound-off { display: none; }

/* --- FOND DU GÉNÉRATEUR AVEC FONDU JOUR/NUIT --- */
.dp-ed-preview-wrap {
  position: relative; 
  width: 184px; 
  height: 152px;
  background: linear-gradient(180deg, #7aacb3, #277781); /* Mode Jour par défaut */
  border-radius: 14px; 
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,60,60,0.18);
  display: flex; align-items: center; justify-content: center;
  z-index: 1; /* Indispensable pour la superposition */
}

/* Le mode Nuit est un calque caché qui va apparaître en fondu */
.dp-ed-preview-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #253a47, #10191f); /* Mode Nuit */
  opacity: 0; /* Invisible de jour */
  transition: opacity 0.3s ease; /* Le fameux délai de transition ! */
  z-index: -1; /* On le glisse juste sous le canard */
}

/* Quand on passe en mode sombre, le calque devient visible */
[data-theme="dark"] .dp-ed-preview-wrap::before {
  opacity: 1;
}.dp-ed-preview-svg { display: block; }
.dp-ed-reset-ico {
  position: absolute; top: 7px; right: 7px;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.85); border-radius: 50%;
  width: 26px; height: 26px; font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font-family: 'Nunito', sans-serif; transition: background 0.15s;
}
.dp-ed-reset-ico:hover { background: rgba(255,255,255,0.28); color: #fff; }
.dp-ed-size-row { display: flex; align-items: center; gap: 6px; width: 100%; }
.dp-size-emoji { font-size: 14px; flex-shrink: 0; }
.dp-size-range  { flex: 1; }
.dp-ed-col-scroll { flex: 1 1 0; min-width: 0; display: flex; overflow: hidden; }
.dp-ed-col-options {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  padding: 10px 10px 10px 12px;
  overflow-y: auto; overflow-x: hidden;
  touch-action: pan-y;
}
.dp-ed-col-identity {
  flex: 0 0 auto; width: 185px;
  display: flex; flex-direction: column;
  gap: 8px; padding: 12px 38px 12px 12px;
  justify-content: center; overflow-y: auto;
  touch-action: pan-y;
}
.dp-ed-section { margin-bottom: 10px; }
.dp-ed-section--row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.dp-ed-section-title {
  font-size: 9px; font-weight: 800; color: #7a9a8a;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px;
}
.dp-btn-row { display: flex; gap: 4px; flex-wrap: wrap; }
.dp-pill {
  border: 1.5px solid #d4e6dc; border-radius: 20px;
  padding: 4px 12px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: 'Nunito', sans-serif;
  background: #fff; color: #6a8a7a; user-select: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s; white-space: nowrap;
}
.dp-pill:hover { border-color: #7ab89a; color: #3a6a5a; }
.dp-pill--on { background: #2e7a5e; border-color: #2e7a5e; color: #fff; }
.dp-pill--toggle { padding: 4px 11px; }
.dp-ed-group { display: flex; flex-direction: column; gap: 3px; }
.dp-arrow-sel { display: flex; align-items: center; gap: 3px; }
.dp-arrow-btn {
  border: 1.5px solid #d4e6dc; border-radius: 8px;
  width: 24px; height: 24px; font-size: 11px; cursor: pointer;
  background: #fff; color: #5a7a6a; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font-family: 'Nunito', sans-serif; transition: background 0.1s;
}
.dp-arrow-btn:hover { background: #e8f5f0; }
.dp-arrow-val { min-width: 54px; text-align: center; font-size: 10.5px; font-weight: 600; color: #2a5a4a; }
.dp-hsl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.dp-hsl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-hsl-header { display: flex; align-items: center; gap: 5px; margin-bottom: 1px; }
.dp-hsl-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.dp-ed-label { font-size: 10px; font-weight: 700; color: #4a6a5a; margin: 0; }
.dp-hsl-label { font-size: 8.5px; color: #9ab8aa; margin-top: 2px; }
.dp-hsl-hue { background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); border-radius: 3px; padding: 1px 0; }
.dp-range { width: 100%; height: 5px; border-radius: 3px; cursor: pointer; -webkit-appearance: auto; }
.dp-identity-field { display: flex; flex-direction: column; gap: 3px; }
.dp-identity-label { font-size: 10px; font-weight: 700; color: #5a7a6a; }
.dp-required { color: #e06060; }
.dp-text-input {
  width: 100%; padding: 7px 10px; border-radius: 10px;
  border: 1.5px solid #c8ddd2; font-size: 12px;
  font-family: 'Nunito', sans-serif; color: #2a5a4a;
  outline: none; background: #fff; box-sizing: border-box; transition: border-color 0.15s;
}
.dp-text-input:focus { border-color: #4a9a7a; }
.dp-textarea {
  width: 100%; padding: 7px 10px; border-radius: 10px;
  border: 1.5px solid #c8ddd2; font-size: 12px;
  font-family: 'Nunito', sans-serif; color: #2a5a4a;
  outline: none; background: #fff; box-sizing: border-box;
  resize: none; height: 50px; transition: border-color 0.15s;
}
.dp-textarea:focus { border-color: #4a9a7a; }
.dp-submit {
  width: 100%; padding: 10px 0; border-radius: 12px; border: none;
  font-size: 13px; font-weight: 800; cursor: pointer;
  background: linear-gradient(135deg, #3a9a72, #2a7a5a); color: #fff;
  font-family: 'Nunito', sans-serif;
  box-shadow: 0 3px 14px rgba(30,90,60,0.28);
  transition: transform 0.1s, box-shadow 0.1s; margin-top: 4px;
}
.dp-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(30,90,60,0.32); }
.dp-submit:disabled { background: #c8d8d0; color: #9ab8aa; cursor: not-allowed; box-shadow: none; }

/* ══════════════════════════════════════════════════════
   PROFILE CARD
   ══════════════════════════════════════════════════════ */
.dp-profile-card {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%) translateY(-18px);
  z-index: 20; display: none;
  flex-direction: row; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.28); border-radius: 18px;
  min-width: 200px;
  max-width: min(340px, calc(100% - 24px));
  box-sizing: border-box;
  padding: 10px 14px 10px 10px;
  box-shadow: 0 4px 24px rgba(0,30,40,0.18);
  pointer-events: auto; opacity: 0;
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
}
.dp-profile--in  { opacity: 1; transform: translateX(-50%) translateY(0); }
.dp-profile--out {
  opacity: 0; transform: translateX(-50%) translateY(-10px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
@keyframes dpProfileUpdate {
  0%,100% { background: rgba(255,255,255,0.15); }
  50%      { background: rgba(255,255,255,0.30); }
}
.dp-profile--update { animation: dpProfileUpdate 0.28s ease; }
.dp-profile-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; font-size: 15px; cursor: pointer;
  color: rgba(255,255,255,0.75); line-height: 1; font-weight: 700;
  font-family: 'Nunito', sans-serif; padding: 0; transition: color 0.15s;
}
.dp-profile-close:hover { color: #fff; }
.dp-profile-avatar {
  flex: 0 0 90px; height: 56px;
  background: rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.dp-profile-info { flex: 1; min-width: 0; }
.dp-profile-name {
  font-weight: 800; font-size: 14px; color: #fff;
  font-family: 'Nunito', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-right: 18px;
}
.dp-profile-msg {
  font-size: 12px; font-style: italic; color: rgba(255,255,255,0.78);
  font-family: 'Nunito', sans-serif; line-height: 1.35; margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   MOBILE ≤ 768px
   La hauteur de l'étang et de l'éditeur est définie
   exclusivement par JS via window.innerHeight.
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dp-editor { overflow: hidden; }
  .dp-ed-shell { flex-direction: column; height: 100%; }
  .dp-ed-close-btn { top: 6px; right: 8px; z-index: 10; width: 30px; height: 30px; font-size: 15px; }
  .dp-ed-col-preview {
    flex: 0 0 auto; width: 100%;
    flex-direction: row; align-items: center;
    gap: 12px; padding: 8px 44px 8px 12px;
    border-right: none;
    position: sticky; top: 0; z-index: 4;
  }
  .dp-ed-preview-wrap { width: 120px; height: 90px; flex-shrink: 0; border-radius: 12px; }
  .dp-ed-size-row { flex: 1; flex-direction: row; align-items: center; gap: 6px; }
  .dp-size-range { flex: 1; }
  .dp-ed-col-scroll {
    flex: 1 1 0; flex-direction: column;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .dp-ed-col-options {
    flex: 0 0 auto; width: 100%;
    border-right: none;
    padding: 10px 12px; overflow: visible;
  }
  .dp-ed-col-identity {
    flex: 0 0 auto; width: 100%;
    padding: 10px 12px 20px; justify-content: flex-start;
  }
  .dp-hsl-grid { gap: 6px 8px; }
  .dp-submit { font-size: 14px; padding: 13px 0; }
  .dp-textarea { height: 44px; }
  /* Popup : sous le titre "L'étang à la carte" — fond sombre sans glassmorphism */
  .dp-profile-card {
    top: 52px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 16px 12px;
    background: rgba(42, 90, 85, 0.65);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255,255,255,0.12);
    transition: none; 
  }

  .dp-profile--update {
    animation: none; 
  }

  .dp-profile-avatar {
    flex: 0 0 auto;
    width: 110px;
    height: 70px;
  }
  .dp-profile-name { padding-right: 0; }
  .dp-profile-close { top: 8px; right: 10px; }
  .dp-zoom-ctrl { bottom: 10px; right: 10px; }
  .dp-zoom-btn  { width: 26px; height: 26px; font-size: 18px; }
  .dp-zoom-label { font-size: 10px; min-width: 32px; }
}

@media (max-width: 380px) {
  .dp-ed-preview-wrap { width: 100px; height: 76px; }
  .dp-pill { padding: 4px 9px; font-size: 11px; }
  .dp-hsl-grid { gap: 4px 6px; }
}

/* ══════════════════════════════════════════════════════
   TUTORIAL ONBOARDING
   ══════════════════════════════════════════════════════ */
/* ── Tutoriel : overlay assombrissement + clip-path trou ── */
.dp-tut-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent;
  z-index: 99;
  pointer-events: none;
  transition: background 0.3s ease,
              clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              -webkit-clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.dp-tut-overlay.dp-tut--active {
  pointer-events: auto;
  background: rgba(0, 30, 30, 0.28);
}

/* ── Flou direct sur les enfants du pond pendant le tutoriel ── */
.dp-container.dp-tut-active .dp-pond-area > *:not(.dp-tut-overlay):not(.dp-tut-spot):not(.dp-tut-card):not(.dp-tut-bravo-toast) {
  filter: blur(4px);
  transition: filter 0.3s ease;
}

/* L'élément spotlighté est dé-flouté */
.dp-tut-focus {
  filter: none !important;
}

/* ── Spotlight (assombrissement principal via box-shadow) ── */
.dp-tut-spot {
  position: absolute;
  z-index: 100;
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(0, 30, 30, 0.45);
  pointer-events: none;
  opacity: 0;
  transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              left 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-radius 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.25s ease;
}
.dp-tut-spot.dp-tut--active {
  pointer-events: auto;
}

/* ── Carte tooltip ── */
.dp-tut-card {
  position: absolute;
  z-index: 101;
  background: #f0f7f4;
  border-radius: 16px;
  padding: 20px 22px 16px;
  max-width: 340px;
  box-shadow: 0 10px 30px rgba(0, 40, 40, 0.3);
  font-family: 'Nunito', sans-serif;
  color: #2a5a4a;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
}
.dp-tut-card.dp-tut-pop {
  transform: scale(0.85);
  transform-origin: center center;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dp-tut-card.dp-tut-pop.visible {
  opacity: 1;
  transform: scale(1);
}
.dp-tut-card.dp-tut-move {
  transform: none;
  transition: top 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              left 0.45s cubic-bezier(0.25, 1, 0.5, 1),
              width 0.35s ease,
              opacity 0.2s ease;
}
.dp-tut-card.dp-tut-move.visible {
  opacity: 1;
}

/* ── Texte ── */
.dp-tut-text {
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  margin: 0 0 16px;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dp-tut-text.dp-tut-bravo {
  color: #2a9a62;
}
[data-theme="dark"] .dp-tut-text.dp-tut-bravo {
  color: #5adb8a;
}

/* ── Toast bravo centrée sur l'étang ── */
.dp-tut-bravo-toast {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  z-index: 200;
  background: rgba(240, 247, 244, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  padding: 18px 32px;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #2a9a62;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 60, 40, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dp-tut-bravo-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
[data-theme="dark"] .dp-tut-bravo-toast {
  background: rgba(30, 40, 38, 0.92);
  color: #5adb8a;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

@keyframes dpTutBravo {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Bouton fermer ── */
.dp-tut-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: none;
  font-size: 18px; color: #7a9a8a;
  cursor: pointer; padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s;
}
.dp-tut-close:hover { color: #2a5a4a; }

/* ── Pied de carte ── */
.dp-tut-footer {
  display: flex; align-items: center; gap: 12px;
}
.dp-tut-dots {
  display: flex; gap: 7px; flex: 1;
}
.dp-tut-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #7a9a8a;
  opacity: 0.3;
  cursor: pointer;
  position: relative;
  transition: opacity 0.25s, background-color 0.25s, transform 0.25s;
}
.dp-tut-dot::before {
  content: '';
  position: absolute;
  inset: -8px;
}
.dp-tut-dot:hover {
  opacity: 0.6;
  transform: scale(1.3);
}
.dp-tut-dot.active {
  opacity: 1;
  background: #3a9a72;
  transform: scale(1.25);
}

.dp-tut-btn-group {
  display: flex; gap: 8px; align-items: center;
}
.dp-tut-skip {
  background: none; border: none; color: #7a9a8a; font-size: 12px; font-weight: 700;
  cursor: pointer; padding: 6px 10px; font-family: inherit; transition: color 0.15s;
  white-space: nowrap;
}
.dp-tut-skip:hover { color: #4a7a6a; }
.dp-tut-next {
  background: linear-gradient(135deg, #3a9a72, #2a7a5a); color: #fff;
  border: none; border-radius: 30px; padding: 7px 18px; font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: inherit; box-shadow: 0 3px 10px rgba(30, 90, 60, 0.2);
  transition: transform 0.1s, box-shadow 0.1s;
  white-space: nowrap;
}
.dp-tut-next:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 90, 60, 0.3); }
.dp-tut-next:active { transform: translateY(1px); }

/* ── Mobile ── */
@media (max-width: 480px) {
  .dp-tut-card {
    max-width: calc(100% - 24px);
    padding: 16px 18px 14px;
    border-radius: 14px;
  }
  .dp-tut-text { font-size: 13px; }
}

/* --- BOUTON HELP (?) & BOUTON THEME (Lumière) --- */
.dp-help-btn, .dp-theme-btn {
  position: absolute;
  top: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 18px;
  transition: background 0.2s, transform 0.1s;
  padding: 0;
}

/* Espacement sur grand écran */
.dp-theme-btn { right: 64px; }  
.dp-help-btn { right: 112px; } 

.dp-help-btn:hover, .dp-theme-btn:hover { background: rgba(255, 255, 255, 0.3); }

.dp-theme-btn svg, .dp-help-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* Adaptation sur mobile */
@media (max-width: 480px) {
  .dp-help-btn, .dp-theme-btn { 
    top: 12px; 
    width: 40px; 
    height: 40px; 
    font-size: 18px; 
  }
  .dp-theme-btn { right: 60px; }   /* 12px + 40px + 8px = 60px */
  .dp-help-btn { right: 108px; } /* 60px + 40px + 8px = 108px */
}

/* =======================================================================
   DARK THEME - GÉNÉRATEUR (Éditeur & Tutoriel)
   ======================================================================= */

/* 1. Structure principale */
[data-theme="dark"] .dp-editor {
  background: var(--bg) !important;
  color-scheme: dark;
}

[data-theme="dark"] .dp-editor,
[data-theme="dark"] .dp-ed-shell,
[data-theme="dark"] .dp-ed-col-preview,
[data-theme="dark"] .dp-ed-col-scroll,
[data-theme="dark"] .dp-ed-col-options,
[data-theme="dark"] .dp-ed-section--row {
  border-color: rgba(255, 255, 255, 0.08) !important; 
}

/* 2. Textes & Titres */
[data-theme="dark"] .dp-ed-section-title { color: var(--text-dim); }
[data-theme="dark"] .dp-ed-label,
[data-theme="dark"] .dp-identity-label { color: var(--text-main); }
[data-theme="dark"] .dp-hsl-label { color: var(--text-dim); }
[data-theme="dark"] .dp-ed-close-btn { color: var(--text-dim); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .dp-ed-close-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.14); }

/* 3. Boutons Pilules (Type, Chapeau, Yeux...) */
[data-theme="dark"] .dp-pill {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}
[data-theme="dark"] .dp-pill:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-main);
}
[data-theme="dark"] .dp-pill--on {
  background: var(--text-main);
  border-color: var(--text-main);
  color: var(--bg); /* Texte noir/gris très foncé pour contraster */
}

/* 4. Boutons Flèches (Variantes) */
[data-theme="dark"] .dp-arrow-btn {
  background: var(--bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}
[data-theme="dark"] .dp-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
}
[data-theme="dark"] .dp-arrow-val { color: var(--text-main); }

/* 5. Champs de saisie */
[data-theme="dark"] .dp-text-input,
[data-theme="dark"] .dp-textarea {
  background: var(--msg-bot-bg);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--text-main);
}
[data-theme="dark"] .dp-text-input:focus,
[data-theme="dark"] .dp-textarea:focus { border-color: rgba(255, 255, 255, 0.3); }

[data-theme="dark"] {
  color-scheme: dark !important;
}


[data-theme="dark"] .dp-hsl-hue {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) !important;
}

[data-theme="dark"] .dp-size-range {
  accent-color: var(--text-main) !important;
}

[data-theme="dark"] .dp-hsl-swatch { border-color: rgba(255, 255, 255, 0.2); }

[data-theme="dark"] .dp-submit {
  background: var(--text-main);
  color: var(--bg);
  box-shadow: 0 4px 15px var(--shadow-dark);
}
[data-theme="dark"] .dp-submit:hover:not(:disabled) {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .dp-submit:disabled {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
}

/* 7. Tutoriel Spotlight */
[data-theme="dark"] .dp-tut-spot {
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .dp-tut-overlay.dp-tut--active {
  background: rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .dp-tut-card {
  background: var(--bg);
  color: var(--text-main);
  box-shadow: 0 10px 30px var(--shadow-dark);
}
[data-theme="dark"] .dp-tut-close { color: var(--text-dim); }
[data-theme="dark"] .dp-tut-close:hover { color: var(--text-main); }
[data-theme="dark"] .dp-tut-dot { background: var(--text-dim); }
[data-theme="dark"] .dp-tut-dot.active { background: var(--accent, #3a9a72); }
[data-theme="dark"] .dp-tut-skip { color: var(--text-dim); }
[data-theme="dark"] .dp-tut-skip:hover { color: var(--text-main); }
[data-theme="dark"] .dp-tut-next { background: var(--text-main); color: var(--bg); }

/* =======================================================================
   LAMPE DE POCHE (Séparation Parfaite + Transitions Fluides)
   ======================================================================= */

/* 1. LE FOND SECRET (Nuit pré-calculée)
   Toujours présent tout au fond. C'est l'eau de Nuit totale. */
.dp-pond-area {
  background: linear-gradient(180deg, #5c91b1, #283e4d) !important;
  /* On verrouille les variables pour que l'eau de l'étang SVG reste TOUJOURS
     en mode jour, même quand le thème global passe en dark ! */
  --pond-top: #7aacb3 !important;
  --pond-bottom: #277781 !important;
  position: relative;
}

/* 2. L'EAU DU SVG (L'eau de Jour classique)
   Au lieu de disparaître brutalement, elle devient transparente en douceur
   pour révéler la Nuit (le fond secret) qui est derrière. */
.dp-pond-area > svg > g > rect[fill="url(#dpWG)"] {
  opacity: 1;
  transition: opacity 0.8s ease; /* Le temps du fondu (0.8s) */
}
[data-theme="dark"] .dp-pond-area > svg > g > rect[fill="url(#dpWG)"] {
  opacity: 0; 
}

/* On s'assure que les canards du SVG sont au-dessus du fond, mais sous l'ombre */
.dp-pond-area > svg {
  position: relative;
  z-index: 2;
}

/* 3. L'EAU DE JOUR SOUS LA LAMPE */
.dp-pond-area::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  background: linear-gradient(180deg, #7aacb3, #277781);

  -webkit-mask-image: radial-gradient(circle var(--light-radius, 350px) at var(--fx, 50%) var(--fy, 50%), black 0%, transparent 100%);
  mask-image: radial-gradient(circle var(--light-radius, 350px) at var(--fx, 50%) var(--fy, 50%), black 0%, transparent 100%);

  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity, filter;
}

[data-theme="dark"] .dp-pond-area::before {
  opacity: 1;
  animation: flashlightScintillate 0.2s infinite alternate;
}

/* 4. L'OBSCURITÉ */
.dp-pond-area::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 10;
  background: rgba(0, 0, 0, 0.65);

  -webkit-mask-image: radial-gradient(circle var(--light-radius, 350px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, black 100%);
  mask-image: radial-gradient(circle var(--light-radius, 350px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, black 100%);

  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity, filter;
}
[data-theme="dark"] .dp-pond-area::after {
  opacity: 1;
  animation: flashlightScintillate 0.2s infinite alternate;
}

/* Le panneau de Zoom reste au-dessus de tout ça */
.dp-zoom-ctrl {
  z-index: 20 !important;
}

/* ══════════════════════════════════════════════════════
   MINIMAP (tous appareils, créée par JS)
   ══════════════════════════════════════════════════════ */
.dp-minimap {
  position: absolute;
  bottom: 48px; left: 14px;
  width: 110px; height: 66px;
  background: linear-gradient(180deg, rgba(90,130,140,0.6), rgba(30,70,80,0.6));
  border: 2px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  z-index: 21;
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dp-minimap:hover {
  border-color: rgba(255,255,255,0.75);
}
[data-theme="dark"] .dp-minimap {
  background: linear-gradient(180deg, rgba(40,58,71,0.7), rgba(16,25,31,0.7));
  border-color: rgba(255,255,255,0.3);
}
.dp-minimap-vp {
  position: absolute;
  border: 1.5px solid #fff;
  border-radius: 3px;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
  transition: left 0.08s linear, top 0.08s linear, width 0.08s linear, height 0.08s linear;
}
[data-theme="dark"] .dp-minimap-vp {
  border-color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
}
.dp-minimap-dot {
  position: absolute;
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  pointer-events: none;
}
[data-theme="dark"] .dp-minimap-dot {
  background: rgba(200,238,228,0.65);
}

/* ══════════════════════════════════════════════════════
   MOBILE PERF
   - will-change plein-écran sur pseudo-éléments = risque OOM iOS
   - flashlightScintillate n'a pas de @keyframes → animation fantôme
   - backdrop-filter sur éléments au-dessus du SVG animé = crash
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .dp-pond-area::before,
  .dp-pond-area::after {
    will-change: auto;
  }
  [data-theme="dark"] .dp-pond-area::before,
  [data-theme="dark"] .dp-pond-area::after {
    animation: none;
  }
  .dp-tut-bravo-toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(240, 247, 244, 0.97);
  }
  /* Mobile : pas de filter:blur sur les enfants (risque OOM iOS)
     → fond opaque plus fort sur l'overlay pour compenser */
  .dp-container.dp-tut-active .dp-pond-area > *:not(.dp-tut-overlay):not(.dp-tut-spot):not(.dp-tut-card):not(.dp-tut-bravo-toast) {
    filter: none;
  }
  .dp-tut-overlay.dp-tut--active {
    background: rgba(0, 30, 30, 0.55);
  }
  [data-theme="dark"] .dp-tut-overlay.dp-tut--active {
    background: rgba(0, 0, 0, 0.6);
  }
  .dp-help-btn, .dp-theme-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(42, 90, 85, 0.65);
  }
  .dp-minimap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(60, 110, 115, 0.7), rgba(30, 70, 75, 0.7));
  }
}