/* =====================================
   HERO GRADIENT – Greenshift/Gutenberg ready
   Set 5 bulles + Dézoom mathématique (--zoom)
   ===================================== */

/* 0) Fallback statique (frame 0%) */
.gs-hero-gradient {
  background-color: hsla(278, 14%, 77%, 1);
  background-image:
    radial-gradient(circle at 52% 11%, hsla(278, 56%, 87%, 1) 16%, transparent 53%),
    radial-gradient(circle at 90% 64%, hsla(356, 78%, 79%, 1) 16%, transparent 53%),
    radial-gradient(circle at 75% 73%, hsla(25, 32%, 61%, 1) 16%, transparent 53%),
    radial-gradient(circle at 9% 62%,  hsla(191.91176470588266, 52%, 62%, 1) 16%, transparent 53%),
    radial-gradient(circle at 59% 56%, hsla(183.97058823529414, 61%, 64%, 1) 16%, transparent 53%);
  background-blend-mode: normal, normal, normal, normal, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 1) Helper éditeur (pour voir la zone dans Gutenberg) */
.editor-styles-wrapper .gs-hero-gradient {
  min-height: 260px;
}

/* 2) Déclarations @property (Houdini) pour toutes les variables animées */
/* Bulle 0 */
@property --c-0        { syntax: '<color>';      inherits: false; initial-value: hsla(278, 56%, 87%, 1) }
@property --y-0        { syntax: '<percentage>'; inherits: false; initial-value: 11% }
@property --x-0        { syntax: '<percentage>'; inherits: false; initial-value: 52% }
@property --s-start-0  { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --s-end-0    { syntax: '<percentage>'; inherits: false; initial-value: 53% }

/* Bulle 1 */
@property --s-start-1  { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --s-end-1    { syntax: '<percentage>'; inherits: false; initial-value: 53% }
@property --y-1        { syntax: '<percentage>'; inherits: false; initial-value: 64% }
@property --c-1        { syntax: '<color>';      inherits: false; initial-value: hsla(356, 78%, 79%, 1) }
@property --x-1        { syntax: '<percentage>'; inherits: false; initial-value: 90% }

/* Bulle 2 */
@property --s-start-2  { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --s-end-2    { syntax: '<percentage>'; inherits: false; initial-value: 53% }
@property --x-2        { syntax: '<percentage>'; inherits: false; initial-value: 75% }
@property --c-2        { syntax: '<color>';      inherits: false; initial-value: hsla(25, 32%, 61%, 1) }
@property --y-2        { syntax: '<percentage>'; inherits: false; initial-value: 73% }

/* Bulle 3 */
@property --x-3        { syntax: '<percentage>'; inherits: false; initial-value: 9% }
@property --s-start-3  { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --s-end-3    { syntax: '<percentage>'; inherits: false; initial-value: 53% }
@property --c-3        { syntax: '<color>';      inherits: false; initial-value: hsla(191.91176470588266, 52%, 62%, 1) }
@property --y-3        { syntax: '<percentage>'; inherits: false; initial-value: 62% }

/* Bulle 4 */
@property --c-4        { syntax: '<color>';      inherits: false; initial-value: hsla(183.97058823529414, 61%, 64%, 1) }
@property --y-4        { syntax: '<percentage>'; inherits: false; initial-value: 56% }
@property --s-start-4  { syntax: '<percentage>'; inherits: false; initial-value: 16% }
@property --s-end-4    { syntax: '<percentage>'; inherits: false; initial-value: 53% }
@property --x-4        { syntax: '<percentage>'; inherits: false; initial-value: 59% }

/* Facteur de dézoom global (Option 1) : 1 = taille d’origine ; <1 = dézoom */
@property --zoom       { syntax: '<number>';     inherits: false; initial-value: 0.80 }

/* 3) Keyframes – exactement ton set, inchangé */
@keyframes hero-gradient-animation {
  0% {
    --c-0: hsla(278, 56%, 87%, 1);
    --y-0: 11%;
    --x-0: 52%;
    --s-start-0: 16%;
    --s-end-0: 53%;

    --s-start-1: 16%;
    --s-end-1: 53%;
    --y-1: 64%;
    --c-1: hsla(356, 78%, 79%, 1);
    --x-1: 90%;

    --s-start-2: 16%;
    --s-end-2: 53%;
    --x-2: 75%;
    --c-2: hsla(25, 32%, 61%, 1);
    --y-2: 73%;

    --x-3: 9%;
    --s-start-3: 16%;
    --s-end-3: 53%;
    --c-3: hsla(191.91176470588266, 52%, 62%, 1);
    --y-3: 62%;

    --c-4: hsla(183.97058823529414, 61%, 64%, 1);
    --y-4: 56%;
    --s-start-4: 16%;
    --s-end-4: 53%;
    --x-4: 59%;
  }

  100% {
    --c-0: hsla(25.147058823529296, 49%, 78%, 1);
    --y-0: 40%;
    --x-0: 23%;
    --s-start-0: 16%;
    --s-end-0: 53%;

    --s-start-1: 16%;
    --s-end-1: 53%;
    --y-1: 73%;
    --c-1: hsla(12, 79%, 62%, 1);
    --x-1: 24%;

    --s-start-2: 16%;
    --s-end-2: 53%;
    --x-2: 70%;
    --c-2: hsla(261, 45%, 91%, 1);
    --y-2: 43%;

    --x-3: 30%;
    --s-start-3: 16%;
    --s-end-3: 53%;
    --c-3: hsla(315, 64%, 70%, 1);
    --y-3: 88%;

    --c-4: hsla(328, 47%, 84%, 1);
    --y-4: 84%;
    --s-start-4: 16%;
    --s-end-4: 53%;
    --x-4: 10%;
  }
}

/* 4) Application – valeurs initiales + dézoom + image basée variables + animation */
.gs-hero-gradient {
  /* a) Valeurs initiales (cohérentes avec 0%) */
  --c-0: hsla(278, 56%, 87%, 1);
  --y-0: 11%;
  --x-0: 52%;

  --s-start-0: 16%;
  --s-end-0: 53%;
  --s-start-1: 16%;
  --s-end-1: 53%;

  --y-1: 64%;
  --c-1: hsla(356, 78%, 79%, 1);
  --x-1: 90%;

  --s-start-2: 16%;
  --s-end-2: 53%;
  --x-2: 75%;
  --c-2: hsla(25, 32%, 61%, 1);
  --y-2: 73%;

  --x-3: 9%;
  --s-start-3: 16%;
  --s-end-3: 53%;
  --c-3: hsla(191.91176470588266, 52%, 62%, 1);
  --y-3: 62%;

  --c-4: hsla(183.97058823529414, 61%, 64%, 1);
  --y-4: 56%;
  --s-start-4: 16%;
  --s-end-4: 53%;
  --x-4: 59%;

  /* b) Dézoom global : 1 = taille d’origine ; 0.6 = dézoom marqué ; 0.9 = subtil */
  --zoom: 0.80;

  /* c) Variables “zoomées” (recentrage autour de 50% + rayons réduits) */
  /* Positions recalculées */
  --zx-0: calc(50% + (var(--x-0) - 50%) * var(--zoom));
  --zy-0: calc(50% + (var(--y-0) - 50%) * var(--zoom));

  --zx-1: calc(50% + (var(--x-1) - 50%) * var(--zoom));
  --zy-1: calc(50% + (var(--y-1) - 50%) * var(--zoom));

  --zx-2: calc(50% + (var(--x-2) - 50%) * var(--zoom));
  --zy-2: calc(50% + (var(--y-2) - 50%) * var(--zoom));

  --zx-3: calc(50% + (var(--x-3) - 50%) * var(--zoom));
  --zy-3: calc(50% + (var(--y-3) - 50%) * var(--zoom));

  --zx-4: calc(50% + (var(--x-4) - 50%) * var(--zoom));
  --zy-4: calc(50% + (var(--y-4) - 50%) * var(--zoom));

  /* Rayons réduits */
  --zs-start-0: calc(var(--s-start-0) * var(--zoom));
  --zs-end-0:   calc(var(--s-end-0)   * var(--zoom));

  --zs-start-1: calc(var(--s-start-1) * var(--zoom));
  --zs-end-1:   calc(var(--s-end-1)   * var(--zoom));

  --zs-start-2: calc(var(--s-start-2) * var(--zoom));
  --zs-end-2:   calc(var(--s-end-2)   * var(--zoom));

  --zs-start-3: calc(var(--s-start-3) * var(--zoom));
  --zs-end-3:   calc(var(--s-end-3)   * var(--zoom));

  --zs-start-4: calc(var(--s-start-4) * var(--zoom));
  --zs-end-4:   calc(var(--s-end-4)   * var(--zoom));

  /* d) Image basée variables “zoomées” (surclasse le fallback si supporté) */
  background-image:
    radial-gradient(circle at var(--zx-0) var(--zy-0), var(--c-0) var(--zs-start-0), transparent var(--zs-end-0)),
    radial-gradient(circle at var(--zx-1) var(--zy-1), var(--c-1) var(--zs-start-1), transparent var(--zs-end-1)),
    radial-gradient(circle at var(--zx-2) var(--zy-2), var(--c-2) var(--zs-start-2), transparent var(--zs-end-2)),
    radial-gradient(circle at var(--zx-3) var(--zy-3), var(--c-3) var(--zs-start-3), transparent var(--zs-end-3)),
    radial-gradient(circle at var(--zx-4) var(--zy-4), var(--c-4) var(--zs-start-4), transparent var(--zs-end-4));

  animation: hero-gradient-animation 10s linear infinite alternate;
  background-blend-mode: normal, normal, normal, normal, normal;
  will-change: background-image;
}

/* 5) Accessibilité : respecte "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .gs-hero-gradient { animation: none !important; }
}

/*------------------------------------------------------------------------------------------------------*/


/* =====================================
   HERO GRADIENT (Soft) – Greenshift ready
   Basé sur ton nouveau set + dézoom (--zoom)
   ===================================== */

/* 0) Fallback statique (frame 0%) */
.gs-hero-gradient-soft {
  background-color: hsla(206.47058823529423, 81%, 94%, 1);
  background-image:
    radial-gradient(circle at 24% 30%, hsla(251.47058823529406, 64%, 52%, 1) 7.067456893012%, transparent 60%),
    radial-gradient(circle at 54% 6%,  hsla(263, 26%, 63%, 1) 12%, transparent 60%),
    radial-gradient(circle at 58% 9%,  hsla(248, 58%, 89%, 1) 12%, transparent 60%),
    radial-gradient(circle at 21% 95%, hsla(198.46153846153848, 30%, 66%, 1) 12%, transparent 60%);
  background-blend-mode: normal, normal, normal, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 1) Helper éditeur */
.editor-styles-wrapper .gs-hero-gradient-soft {
  min-height: 260px;
}

/* 2) Déclarations @property */
@property --y-0        { syntax: '<percentage>'; inherits: false; initial-value: 30% }
@property --c-0        { syntax: '<color>';      inherits: false; initial-value: hsla(251.47058823529406, 64%, 52%, 1) }
@property --s-start-0  { syntax: '<percentage>'; inherits: false; initial-value: 7.067456893012% }
@property --s-end-0    { syntax: '<percentage>'; inherits: false; initial-value: 60% }
@property --x-0        { syntax: '<percentage>'; inherits: false; initial-value: 24% }

@property --s-start-1  { syntax: '<percentage>'; inherits: false; initial-value: 12% }
@property --s-end-1    { syntax: '<percentage>'; inherits: false; initial-value: 60% }
@property --x-1        { syntax: '<percentage>'; inherits: false; initial-value: 54% }
@property --y-1        { syntax: '<percentage>'; inherits: false; initial-value: 6% }
@property --c-1        { syntax: '<color>';      inherits: false; initial-value: hsla(263, 26%, 63%, 1) }

@property --c-2        { syntax: '<color>';      inherits: false; initial-value: hsla(248, 58%, 89%, 1) }
@property --x-2        { syntax: '<percentage>'; inherits: false; initial-value: 58% }
@property --s-start-2  { syntax: '<percentage>'; inherits: false; initial-value: 12% }
@property --s-end-2    { syntax: '<percentage>'; inherits: false; initial-value: 60% }
@property --y-2        { syntax: '<percentage>'; inherits: false; initial-value: 9% }

@property --y-3        { syntax: '<percentage>'; inherits: false; initial-value: 95% }
@property --c-3        { syntax: '<color>';      inherits: false; initial-value: hsla(198.46153846153848, 30%, 66%, 1) }
@property --x-3        { syntax: '<percentage>'; inherits: false; initial-value: 21% }
@property --s-start-3  { syntax: '<percentage>'; inherits: false; initial-value: 12% }
@property --s-end-3    { syntax: '<percentage>'; inherits: false; initial-value: 60% }

/* Facteur de dézoom */
@property --zoom       { syntax: '<number>';     inherits: false; initial-value: 0.80 }

/* 3) Keyframes (renommés pour éviter conflit) */
@keyframes hero-gradient-animation-soft {
  0% {
    --y-0: 30%;
    --c-0: hsla(251.47058823529406, 64%, 52%, 1);
    --s-start-0: 7.067456893012%;
    --s-end-0: 60%;
    --x-0: 24%;

    --s-start-1: 12%;
    --s-end-1: 60%;
    --x-1: 54%;
    --y-1: 6%;
    --c-1: hsla(263, 26%, 63%, 1);

    --c-2: hsla(248, 58%, 89%, 1);
    --x-2: 58%;
    --s-start-2: 12%;
    --s-end-2: 60%;
    --y-2: 9%;

    --y-3: 95%;
    --c-3: hsla(198.46153846153848, 30%, 66%, 1);
    --x-3: 21%;
    --s-start-3: 12%;
    --s-end-3: 60%;
  }

  100% {
    --y-0: 30%;
    --c-0: hsla(255.4411764705882, 76%, 65%, 1);
    --s-start-0: 11.07309539516906%;
    --s-end-0: 60%;
    --x-0: 98%;

    --s-start-1: 12%;
    --s-end-1: 60%;
    --x-1: 74%;
    --y-1: 100%;
    --c-1: hsla(198.52941176470594, 57%, 56%, 1);

    --c-2: hsla(206.00000000000014, 55%, 75%, 1);
    --x-2: 68%;
    --s-start-2: 12%;
    --s-end-2: 60%;
    --y-2: 99%;

    --y-3: 36%;
    --c-3: hsla(198.46153846153868, 65%, 59%, 1);
    --x-3: 42%;
    --s-start-3: 12%;
    --s-end-3: 60%;
  }
}

/* 4) Application avec dézoom */
.gs-hero-gradient-soft {
  /* Valeurs initiales */
  --y-0: 30%;
  --c-0: hsla(251.47058823529406, 64%, 52%, 1);
  --x-0: 24%;

  --x-1: 54%;
  --y-1: 6%;
  --c-1: hsla(263, 26%, 63%, 1);

  --c-2: hsla(248, 58%, 89%, 1);
  --x-2: 58%;
  --y-2: 9%;

  --y-3: 95%;
  --c-3: hsla(198.46153846153848, 30%, 66%, 1);
  --x-3: 21%;

  /* Dézoom global */
  --zoom: 0.80;

  /* Positions recalculées */
  --zx-0: calc(50% + (var(--x-0) - 50%) * var(--zoom));
  --zy-0: calc(50% + (var(--y-0) - 50%) * var(--zoom));

  --zx-1: calc(50% + (var(--x-1) - 50%) * var(--zoom));
  --zy-1: calc(50% + (var(--y-1) - 50%) * var(--zoom));

  --zx-2: calc(50% + (var(--x-2) - 50%) * var(--zoom));
  --zy-2: calc(50% + (var(--y-2) - 50%) * var(--zoom));

  --zx-3: calc(50% + (var(--x-3) - 50%) * var(--zoom));
  --zy-3: calc(50% + (var(--y-3) - 50%) * var(--zoom));

  /* Rayons réduits */
  --zs-start-0: calc(var(--s-start-0) * var(--zoom));
  --zs-end-0:   calc(var(--s-end-0)   * var(--zoom));
  --zs-start-1: calc(var(--s-start-1) * var(--zoom));
  --zs-end-1:   calc(var(--s-end-1)   * var(--zoom));
  --zs-start-2: calc(var(--s-start-2) * var(--zoom));
  --zs-end-2:   calc(var(--s-end-2)   * var(--zoom));
  --zs-start-3: calc(var(--s-start-3) * var(--zoom));
  --zs-end-3:   calc(var(--s-end-3)   * var(--zoom));

  /* Image basée sur variables zoomées */
  background-image:
    radial-gradient(circle at var(--zx-0) var(--zy-0), var(--c-0) var(--zs-start-0), transparent var(--zs-end-0)),
    radial-gradient(circle at var(--zx-1) var(--zy-1), var(--c-1) var(--zs-start-1), transparent var(--zs-end-1)),
    radial-gradient(circle at var(--zx-2) var(--zy-2), var(--c-2) var(--zs-start-2), transparent var(--zs-end-2)),
    radial-gradient(circle at var(--zx-3) var(--zy-3), var(--c-3) var(--zs-start-3), transparent var(--zs-end-3));

  animation: hero-gradient-animation-soft 10s linear infinite alternate;
  background-blend-mode: normal, normal, normal, normal;
  will-change: background-image;
}

/* 5) Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .gs-hero-gradient-soft { animation: none !important; }
}



/*-------------------------------------------------------------------------------------------------------------------------*/


/* =====================================
   HERO GRADIENT (Soft-2) – Nouvelle version
   Dézoom (--zoom) + animation
   ===================================== */

/* 0) Fallback statique (frame 0%) */
.gs-hero-gradient-soft-2 {
  background-color: hsla(181.3235294117648, 40%, 73%, 1);
  background-image:
    radial-gradient(circle at 98% 31%, hsla(14.558823529411763, 85%, 77%, 1) 17%, transparent 52.86302710080698%),
    radial-gradient(circle at 34% 86%, hsla(195.88235294117646, 97%, 68%, 1) 17%, transparent 74%),
    radial-gradient(circle at 70% 98%, hsla(187.00000000000009, 58%, 73%, 1) 17%, transparent 74%),
    radial-gradient(circle at 57% 99%, hsla(185, 62%, 56%, 1) 17%, transparent 74%);
  background-blend-mode: normal, normal, normal, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 1) Helper éditeur */
.editor-styles-wrapper .gs-hero-gradient-soft-2 {
  min-height: 260px;
}

/* 2) Déclarations @property */
@property --c-0        { syntax: '<color>';      inherits: false; initial-value: hsla(14.558823529411763, 85%, 77%, 1) }
@property --x-0        { syntax: '<percentage>'; inherits: false; initial-value: 98% }
@property --y-0        { syntax: '<percentage>'; inherits: false; initial-value: 31% }
@property --s-start-0  { syntax: '<percentage>'; inherits: false; initial-value: 17% }
@property --s-end-0    { syntax: '<percentage>'; inherits: false; initial-value: 52.86302710080698% }

@property --c-1        { syntax: '<color>';      inherits: false; initial-value: hsla(195.88235294117646, 97%, 68%, 1) }
@property --x-1        { syntax: '<percentage>'; inherits: false; initial-value: 34% }
@property --y-1        { syntax: '<percentage>'; inherits: false; initial-value: 86% }
@property --s-start-1  { syntax: '<percentage>'; inherits: false; initial-value: 17% }
@property --s-end-1    { syntax: '<percentage>'; inherits: false; initial-value: 74% }

@property --c-2        { syntax: '<color>';      inherits: false; initial-value: hsla(187.00000000000009, 58%, 73%, 1) }
@property --x-2        { syntax: '<percentage>'; inherits: false; initial-value: 70% }
@property --y-2        { syntax: '<percentage>'; inherits: false; initial-value: 98% }
@property --s-start-2  { syntax: '<percentage>'; inherits: false; initial-value: 17% }
@property --s-end-2    { syntax: '<percentage>'; inherits: false; initial-value: 74% }

@property --c-3        { syntax: '<color>';      inherits: false; initial-value: hsla(185, 62%, 56%, 1) }
@property --x-3        { syntax: '<percentage>'; inherits: false; initial-value: 57% }
@property --y-3        { syntax: '<percentage>'; inherits: false; initial-value: 99% }
@property --s-start-3  { syntax: '<percentage>'; inherits: false; initial-value: 17% }
@property --s-end-3    { syntax: '<percentage>'; inherits: false; initial-value: 74% }

/* Facteur de dézoom */
@property --zoom       { syntax: '<number>';     inherits: false; initial-value: 0.80 }

/* 3) Keyframes (renommés) */
@keyframes hero-gradient-animation-soft-2 {
  0% {
    --c-0: hsla(14.558823529411763, 85%, 77%, 1);
    --x-0: 98%;
    --y-0: 31%;
    --s-start-0: 17%;
    --s-end-0: 52.86302710080698%;

    --c-1: hsla(195.88235294117646, 97%, 68%, 1);
    --x-1: 34%;
    --y-1: 86%;
    --s-start-1: 17%;
    --s-end-1: 74%;

    --c-2: hsla(187.00000000000009, 58%, 73%, 1);
    --x-2: 70%;
    --y-2: 98%;
    --s-start-2: 17%;
    --s-end-2: 74%;

    --c-3: hsla(185, 62%, 56%, 1);
    --x-3: 57%;
    --y-3: 99%;
    --s-start-3: 17%;
    --s-end-3: 74%;
  }

  100% {
    --c-0: hsla(0, 78%, 77%, 1);
    --x-0: 49%;
    --y-0: 100%;
    --s-start-0: 13.384503178105291%;
    --s-end-0: 61.23310217960948%;

    --c-1: hsla(252.7941176470588, 70%, 71%, 1);
    --x-1: 85%;
    --y-1: 20%;
    --s-start-1: 17%;
    --s-end-1: 74%;

    --c-2: hsla(221.00000000000006, 75%, 74%, 1);
    --x-2: 48%;
    --y-2: 16%;
    --s-start-2: 17%;
    --s-end-2: 74%;

    --c-3: hsla(250.1470588235294, 84%, 57%, 1);
    --x-3: 34%;
    --y-3: 41%;
    --s-start-3: 17%;
    --s-end-3: 74%;
  }
}

/* 4) Application avec dézoom */
.gs-hero-gradient-soft-2 {
  /* Valeurs initiales */
  --c-0: hsla(14.558823529411763, 85%, 77%, 1);
  --x-0: 98%;
  --y-0: 31%;

  --c-1: hsla(195.88235294117646, 97%, 68%, 1);
  --x-1: 34%;
  --y-1: 86%;

  --c-2: hsla(187.00000000000009, 58%, 73%, 1);
  --x-2: 70%;
  --y-2: 98%;

  --c-3: hsla(185, 62%, 56%, 1);
  --x-3: 57%;
  --y-3: 99%;

  /* Dézoom global */
  --zoom: 0.80;

  /* Positions recalculées */
  --zx-0: calc(50% + (var(--x-0) - 50%) * var(--zoom));
  --zy-0: calc(50% + (var(--y-0) - 50%) * var(--zoom));

  --zx-1: calc(50% + (var(--x-1) - 50%) * var(--zoom));
  --zy-1: calc(50% + (var(--y-1) - 50%) * var(--zoom));

  --zx-2: calc(50% + (var(--x-2) - 50%) * var(--zoom));
  --zy-2: calc(50% + (var(--y-2) - 50%) * var(--zoom));

  --zx-3: calc(50% + (var(--x-3) - 50%) * var(--zoom));
  --zy-3: calc(50% + (var(--y-3) - 50%) * var(--zoom));

  /* Rayons réduits */
  --zs-start-0: calc(var(--s-start-0) * var(--zoom));
  --zs-end-0:   calc(var(--s-end-0)   * var(--zoom));
  --zs-start-1: calc(var(--s-start-1) * var(--zoom));
  --zs-end-1:   calc(var(--s-end-1)   * var(--zoom));
  --zs-start-2: calc(var(--s-start-2) * var(--zoom));
  --zs-end-2:   calc(var(--s-end-2)   * var(--zoom));
  --zs-start-3: calc(var(--s-start-3) * var(--zoom));
  --zs-end-3:   calc(var(--s-end-3)   * var(--zoom));

  /* Image basée sur variables zoomées */
  background-image:
    radial-gradient(circle at var(--zx-0) var(--zy-0), var(--c-0) var(--zs-start-0), transparent var(--zs-end-0)),
    radial-gradient(circle at var(--zx-1) var(--zy-1), var(--c-1) var(--zs-start-1), transparent var(--zs-end-1)),
    radial-gradient(circle at var(--zx-2) var(--zy-2), var(--c-2) var(--zs-start-2), transparent var(--zs-end-2)),
    radial-gradient(circle at var(--zx-3) var(--zy-3), var(--c-3) var(--zs-start-3), transparent var(--zs-end-3));

  animation: hero-gradient-animation-soft-2 10s linear infinite alternate;
  background-blend-mode: normal, normal, normal, normal;
  will-change: background-image;
}

/* 5) Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .gs-hero-gradient-soft-2 { animation: none !important; }
}


/*-------------------------------------------------------------------------------------------------------------------------*/



/* =====================================
   HERO GRADIENT (Tertiary) – Greenshift ready
   Basé sur ton nouveau set (2 bulles) + Dézoom Option 1
   ===================================== */

/* 0) Fallback statique (frame 0% – visible partout) */
.gs-hero-gradient-tertiary {
  background-color: hsla(222.00000000000034, 0%, 100%, 1); /* blanc */
  background-image:
    radial-gradient(circle at 95% 8%,  hsla(228.97058823529414, 98%, 61%, 1) 3.50385423966363%, transparent 43.60977352492527%),
    radial-gradient(circle at 68% 14%, hsla(276.6176470588236, 85%, 47%, 0.48) 3.50385423966363%, transparent 44.805091478311695%);
  background-blend-mode: normal, normal;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 1) Helper d'édition (Gutenberg) */
.editor-styles-wrapper .gs-hero-gradient-tertiary {
  min-height: 260px; /* ajuste si besoin */
}

/* 2) Déclarations @property (Houdini) */
@property --c-0 { syntax: '<color>';      inherits: false; initial-value: hsla(228.97058823529414, 98%, 61%, 1) }
@property --x-0 { syntax: '<percentage>'; inherits: false; initial-value: 95% }
@property --y-0 { syntax: '<percentage>'; inherits: false; initial-value: 8% }
@property --s-start-0 { syntax: '<percentage>'; inherits: false; initial-value: 3.50385423966363% }
@property --s-end-0   { syntax: '<percentage>'; inherits: false; initial-value: 43.60977352492527% }

@property --c-1 { syntax: '<color>';      inherits: false; initial-value: hsla(276.6176470588236, 85%, 47%, 0.48) }
@property --x-1 { syntax: '<percentage>'; inherits: false; initial-value: 68% }
@property --y-1 { syntax: '<percentage>'; inherits: false; initial-value: 14% }
@property --s-start-1 { syntax: '<percentage>'; inherits: false; initial-value: 3.50385423966363% }
@property --s-end-1   { syntax: '<percentage>'; inherits: false; initial-value: 44.805091478311695% }

/* Facteur de zoom (Option 1) : 1 = taille d’origine ; <1 = dézoom */
@property --zoom { syntax: '<number>'; inherits: false; initial-value: 0.80 }

/* 3) Keyframes (renommés pour éviter les collisions globales) */
@keyframes hero-gradient-animation-tertiary {
  0% {
    --c-0: hsla(228.97058823529414, 98%, 61%, 1);
    --x-0: 95%;
    --y-0: 8%;
    --s-start-0: 3.50385423966363%;
    --s-end-0: 43.60977352492527%;

    --c-1: hsla(276.6176470588236, 85%, 47%, 0.48);
    --x-1: 68%;
    --y-1: 14%;
    --s-start-1: 3.50385423966363%;
    --s-end-1: 44.805091478311695%;
  }

  100% {
    --c-0: hsla(228.97058823529414, 98%, 61%, 1);
    --x-0: 94%;
    --y-0: 35%;
    --s-start-0: 7.349075528318416%;
    --s-end-0: 40.72532083196464%;

    --c-1: hsla(276.6176470588236, 85%, 47%, 0.48);
    --x-1: 38%;
    --y-1: 15%;
    --s-start-1: 4.379841778215762%;
    --s-end-1: 41.238530075483844%;
  }
}

/* 4) Application (valeurs initiales + dézoom + image basée variables + animation) */
.gs-hero-gradient-tertiary {
  /* a) Valeurs initiales = frame 0% */
  --c-0: hsla(228.97058823529414, 98%, 61%, 1);
  --x-0: 95%;
  --y-0: 8%;
  --s-start-0: 3.50385423966363%;
  --s-end-0: 43.60977352492527%;

  --c-1: hsla(276.6176470588236, 85%, 47%, 0.48);
  --x-1: 68%;
  --y-1: 14%;
  --s-start-1: 3.50385423966363%;
  --s-end-1: 44.805091478311695%;

  /* b) Dézoom global (ajuste : 0.6 = plus petit ; 0.9 = subtil) */
  --zoom: 0.80;

  /* c) Variables “zoomées” (recentrage autour de 50% + rayons réduits) */
  --zx-0: calc(50% + (var(--x-0) - 50%) * var(--zoom));
  --zy-0: calc(50% + (var(--y-0) - 50%) * var(--zoom));
  --zx-1: calc(50% + (var(--x-1) - 50%) * var(--zoom));
  --zy-1: calc(50% + (var(--y-1) - 50%) * var(--zoom));

  --zs-start-0: calc(var(--s-start-0) * var(--zoom));
  --zs-end-0:   calc(var(--s-end-0)   * var(--zoom));
  --zs-start-1: calc(var(--s-start-1) * var(--zoom));
  --zs-end-1:   calc(var(--s-end-1)   * var(--zoom));

  /* d) Image basée sur variables “zoomées” */
  background-image:
    radial-gradient(circle at var(--zx-0) var(--zy-0), var(--c-0) var(--zs-start-0), transparent var(--zs-end-0)),
    radial-gradient(circle at var(--zx-1) var(--zy-1), var(--c-1) var(--zs-start-1), transparent var(--zs-end-1));

  animation: hero-gradient-animation-tertiary 10s linear infinite alternate;
  background-blend-mode: normal, normal;
  will-change: background-image;
}

/* 5) Accessibilité : préfère moins d’animations */
@media (prefers-reduced-motion: reduce) {
  .gs-hero-gradient-tertiary { animation: none !important; }
}

/* 6) (Optionnel) Responsive – peaufine le dézoom si besoin
@media (min-width: 1200px) {
  .gs-hero-gradient-tertiary { --zoom: 0.75; }
}
@media (max-width: 599px) {
  .gs-hero-gradient-tertiary { --zoom: 0.85; }
}
*/