/**
 * DC Blob Widget — Styles
 * v1.0.0
 */

/* ─────────────────────────────────────────
   Container outer (aligne le widget)
───────────────────────────────────────── */
.dc-blob-outer {
  display: flex;
  width: 100%;
}

/* ─────────────────────────────────────────
   Mode BLOC (inline)
───────────────────────────────────────── */
.dc-blob-mode-block .dc-blob-wrap {
  position: relative;
  display: block;
  /* Largeur/hauteur fixées par les contrôles Elementor via selectors */
  /* Fallback si aucun contrôle n'est défini */
  width: 400px;
  height: 400px;
  min-width: 80px;
  min-height: 80px;
  overflow: hidden;
}

/* ─────────────────────────────────────────
   Mode BACKGROUND
───────────────────────────────────────── */
.dc-blob-mode-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.dc-blob-mode-bg .dc-blob-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─────────────────────────────────────────
   Canvas
───────────────────────────────────────── */
.dc-blob-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ─────────────────────────────────────────
   Responsive — tablette
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .dc-blob-mode-block .dc-blob-wrap {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────
   Responsive — mobile
───────────────────────────────────────── */
@media (max-width: 767px) {
  .dc-blob-outer {
    justify-content: center !important;
  }
  .dc-blob-mode-block .dc-blob-wrap {
    max-width: 100%;
    /* Hauteur auto sur mobile si définie en px fixe */
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}

/* ─────────────────────────────────────────
   prefers-reduced-motion
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dc-blob-canvas {
    /* Le JS gère déjà la pause, ce CSS est en renfort */
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────
   Éditeur Elementor — panel preview
───────────────────────────────────────── */
.elementor-editor-active .dc-blob-mode-bg {
  /* Visible en éditeur même si la section parente n'est pas relative */
  position: absolute;
}