/* ============================================================
   JANET DENESE — Composant BANNIÈRE SIGNATURE ANIMÉE
   Alexis (DAYDGROUP) — vanilla CSS, zéro dépendance, zéro JS
   Variantes : --petals (pétales qui dérivent)
               --wind   (lignes de vent / voyage)
               --accueil (les deux mondes réunis)
   Respecte prefers-reduced-motion. Animations transform/opacity
   uniquement (compositeur GPU), légères sur mobile.
   ============================================================ */

.jd-banniere{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg,28px);
  box-shadow:var(--shadow-2,0 2px 6px rgba(36,26,23,.07),0 14px 34px rgba(36,26,23,.13));
  min-height:clamp(170px,30vw,250px);
  display:flex;align-items:center;
  --chute:360px; /* distance de chute des pétales (> hauteur max) */
}
/* fin filet laiton intérieur — le cadre « papeterie de luxe » */
.jd-banniere::after{
  content:"";position:absolute;inset:10px;pointer-events:none;z-index:2;
  border:1px solid rgba(177,132,85,.38);
  border-radius:calc(var(--r-lg,28px) - 8px);
}
/* variante bord à bord (bande de page, sans arrondi) */
.jd-banniere--pleine{border-radius:0;box-shadow:none}
.jd-banniere--pleine::after{border-radius:0;inset:8px}
/* variante fine (rappel discret en haut de fiche produit) */
.jd-banniere--fine{min-height:clamp(120px,18vw,160px)}

.jd-banniere-decor{position:absolute;inset:0;z-index:1;pointer-events:none}
.jd-banniere-contenu{
  position:relative;z-index:3;width:100%;
  padding:clamp(20px,4vw,40px) clamp(22px,6vw,64px);
}
.jd-banniere-contenu h2,.jd-banniere-contenu .jd-titre{
  font-family:var(--serif,Georgia,serif);font-weight:500;line-height:1.1;
  font-size:clamp(1.5rem,3.6vw,2.5rem);color:var(--ink,#241a17);margin:.2em 0 .15em;
}
.jd-banniere-contenu p{font-size:.92rem;color:var(--ink-soft,#4c3d38);max-width:52ch}
.jd-banniere-contenu .script{font-size:clamp(1.1rem,2.4vw,1.6rem)}

/* ---------- Variante INFINITE PETALS : pétales en dérive ---------- */
.jd-banniere--petals{
  background:
    radial-gradient(680px 240px at 84% 10%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(160deg,#fdeef0 0%,#ede4f7 46%,#def0e4 100%);
}
.jd-banniere--petals .jd-banniere-contenu .eyebrow{color:#5f5090}
.jd-banniere--petals .jd-banniere-contenu .script{color:#5f5090}

/* Un pétale = <i class="petale" style="--x:..%;--taille:..px;--d:..s;--delai:-..s;--pose:..px"></i>
   --x     position horizontale de départ
   --d     durée d'une chute complète
   --delai délai négatif = le ciel est déjà peuplé au chargement
   --pose  position figée si l'utilisateur refuse les animations   */
.jd-banniere .petale{
  position:absolute;top:-38px;left:var(--x,50%);
  width:var(--taille,15px);height:calc(var(--taille,15px)*1.3);
  border-radius:86% 4% 82% 6%;
  background:linear-gradient(135deg,rgba(240,187,202,.9) 0%,rgba(197,175,236,.6) 70%,rgba(139,121,193,.42) 100%);
  box-shadow:0 2px 5px rgba(95,80,144,.16);
  opacity:0;
  animation:jd-petale-chute var(--d,19s) linear infinite;
  animation-delay:var(--delai,0s);
}
.jd-banniere .petale.clair{
  background:linear-gradient(135deg,rgba(255,244,238,.95),rgba(233,213,214,.55));
}
@keyframes jd-petale-chute{
  0%  {transform:translate3d(0,0,0) rotate(8deg);opacity:0}
  7%  {opacity:.85}
  25% {transform:translate3d(24px,calc(var(--chute)*.25),0) rotate(75deg)}
  50% {transform:translate3d(-16px,calc(var(--chute)*.5),0) rotate(150deg);opacity:.8}
  75% {transform:translate3d(20px,calc(var(--chute)*.75),0) rotate(225deg);opacity:.7}
  94% {opacity:0}
  100%{transform:translate3d(-8px,var(--chute),0) rotate(300deg);opacity:0}
}

/* ---------- Variante WIND PATH : trait de vent / lignes de voyage ---------- */
.jd-banniere--wind{
  background:
    radial-gradient(720px 260px at 12% 0%,rgba(255,255,255,.5),transparent 70%),
    linear-gradient(165deg,#f6ecdb 0%,#eaddc6 55%,#e4d2c2 100%);
}
.jd-banniere--wind .jd-banniere-contenu .eyebrow{color:#571a28}
.jd-banniere--wind .jd-banniere-contenu .script{color:#571a28}

.jd-banniere .vent{
  position:absolute;inset:0;width:100%;height:100%;
  animation:jd-vent-derive 14s ease-in-out infinite alternate;
}
@keyframes jd-vent-derive{from{transform:translateX(-8px)}to{transform:translateX(8px)}}

/* Lignes : le souffle « file » via stroke-dashoffset.
   --periode DOIT être un multiple de (trait + espace) du dasharray
   pour une boucle parfaitement fluide. */
.jd-banniere .ligne{
  fill:none;stroke:var(--brass,#b18455);stroke-width:2;stroke-linecap:round;
  opacity:.5;stroke-dasharray:160 90;--periode:250px;
  animation:jd-vent-souffle 10s linear infinite;
}
.jd-banniere .ligne.l2{
  stroke:#722338;opacity:.26;stroke-width:2.4;
  stroke-dasharray:130 120;--periode:250px;
  animation-duration:14s;animation-delay:-4s;
}
.jd-banniere .ligne.l3{
  stroke-width:1.6;opacity:.55;
  stroke-dasharray:2 14;--periode:160px;   /* pointillé : ligne de voyage sur la carte */
  animation-duration:24s;
}
@keyframes jd-vent-souffle{to{stroke-dashoffset:calc(-1*var(--periode,250px))}}

/* ---------- Variante ACCUEIL : les deux mondes se rencontrent ---------- */
.jd-banniere--accueil{
  background:
    radial-gradient(600px 220px at 50% -20%,rgba(255,255,255,.5),transparent 70%),
    linear-gradient(115deg,#fdeef0 0%,#ede4f7 34%,#f5ecdc 62%,#e9dbc4 100%);
}
.jd-banniere--accueil .jd-banniere-contenu{text-align:center}
.jd-banniere--accueil .jd-banniere-contenu p{margin-inline:auto}
.jd-banniere--accueil .ligne{opacity:.34}
.jd-banniere--accueil .ligne.l2{opacity:.18}
.jd-banniere--accueil .petale{opacity:0}

/* ---------- Accessibilité mouvement ----------
   janet.css coupe déjà toutes les animations ; ici on redonne aux
   éléments décoratifs une pose STATIQUE élégante (sinon opacity:0). */
@media(prefers-reduced-motion:reduce){
  .jd-banniere .petale{
    animation:none;opacity:.5;
    transform:translateY(var(--pose,110px)) rotate(40deg);
  }
  .jd-banniere .vent{animation:none;transform:none}
  .jd-banniere .ligne{animation:none;opacity:.4}
  .jd-banniere .ligne.l2{opacity:.2}
}