/* ===================================================================
   SVG & FORMES — clip-paths + expressions inline hero
   Fichier unique pour éditer silhouettes, couleurs, tailles et positions.
   =================================================================== */

/* ===================================================================
   MOTEUR .shape-deco
   Silhouettes = clipPaths inline (#shape-clips dans index.html).
   Ombre = ::before décalé · Remplissage + texture = ::after
   =================================================================== */

.shape-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform:
    translate(var(--shape-tx, 0), var(--shape-ty, 0))
    rotate(var(--shape-rotate, 0deg))
    scale(var(--shape-scale-x, 1), var(--shape-scale-y, 1));
  transform-origin: center center;
}

.shape-deco::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--shape-shadow-color, #5C6845);
  -webkit-clip-path: var(--shape-clip);
          clip-path: var(--shape-clip);
  transform: translate(var(--shape-shadow-x, 8px), var(--shape-shadow-y, 10px)) translateZ(0);
  pointer-events: none;
}

.shape-deco::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    var(--shape-tex, url(../textures/texture1.jpeg)) center / var(--shape-tex-size, 340px) repeat,
    var(--shape-fill, #C5D8C0);
  background-blend-mode: multiply, normal;
  -webkit-clip-path: var(--shape-clip);
          clip-path: var(--shape-clip);
  transform: translateZ(0);
  pointer-events: none;
}

/* --- Titres section (bubble-title) --- */
.title-block .shape-deco {
  --shape-shadow-x: 8px;
  --shape-shadow-y: 8px;
  --shape-tex-size: 340px;
  transform-origin: center center;
}

/* Positionnement des formes par bloc titre */
.title-block--maj .shape-deco {
  width: 97%;
  height: 130%;
  left: 2%;
  top: -2%;
}

.maj-page .title-block--maj-page .shape-deco {
  width: 118%;
  height: 135%;
  left: -9%;
  top: -20%;
}

/* #quoi — « C'est quoi ? » */
.bt-cloud-sage {
  --shape-fill: #EDDD5E;
  --shape-shadow-color: #D8C84A;
  --shape-clip: url(#clip-forme_8);
  --shape-tex: url(../textures/texture1.jpeg);
  transform-origin: top left;
}

/* #bande — « Les p'tits potes » */
.bt-coral {
  --shape-fill: #E3635D;
  --shape-shadow-color: #C9888C;
  --shape-clip: url(#clip-forme_12);
  --shape-tex: url(../textures/texture2.jpeg);
}

/* #apropos — « Qui sommes-nous ? » */
.bt-cloud-cream {
  --shape-fill: #2B65CC;
  --shape-shadow-color: #1E4FA0;
  --shape-clip: url(#clip-forme_21);
  --shape-tex: url(../textures/texture3.jpeg);
}

/* #contact — « On est là pour toi ! » */
.bt-orange {
  --shape-fill: #E8B07A;
  --shape-shadow-color: #D9883D;
  --shape-clip: url(#clip-forme_9);
  --shape-tex: url(../textures/texture4.jpeg);
}

/* #maj — mise à jour */
.bt-yellow {
  --shape-fill: #EDDD5E;
  --shape-shadow-color: #D8C84A;
  --shape-clip: url(#clip-forme_9);
  --shape-tex: url(../textures/texture1.jpeg);
}

/* page maj — titre principal */
.bt-forme-16 {
  --shape-fill: #EDDD5E;
  --shape-shadow-color: #D9883D;
  --shape-clip: url(#clip-forme_16);
  --shape-tex: url(../textures/texture2.jpeg);
}

/* #maj teaser sur index */
.bt-maj-index {
  --shape-fill: #EDDD5E;
  --shape-shadow-color: #D8C84A;
  --shape-clip: url(#clip-forme_9);
  --shape-tex: url(../textures/texture1.jpeg);
  --shape-scale-x: -1;
  --shape-shadow-x: -8px;
}

/* Étoile « Où adopter ? » */
.star-block--adopter .shape-deco {
  top: 50%;
  left: 50%;
  --shape-tx: -50%;
  --shape-ty: -50%;
  --shape-shadow-x: 10px;
  --shape-shadow-y: 10px;
  --shape-tex-size: 360px;
  transform-origin: center center;
}

.sb-adopter {
  --shape-fill: #A3CAEA;
  --shape-shadow-color: #1E4FA0;
  --shape-clip: url(#clip-forme_4);
  --shape-tex: url(../textures/texture2.jpeg);
  --shape-tex-size: 360px;
  --shape-scale-x: 1.36;
  --shape-scale-y: 1.32;
}

/* Provocation (si utilisé) */
.sb-provoc {
  --shape-fill: #EDDD5E;
  --shape-shadow-color: #D9883D;
  --shape-clip: url(#clip-forme_18);
}

/* Citations potes (bulles de dialogue) */
.shape-deco--quote-1,
.shape-deco--quote-2,
.shape-deco--quote-3 {
  --shape-fill: #FAF7F0;
  --shape-shadow-x: 4px;
  --shape-shadow-y: 5px;
  --shape-tex: url(../textures/texture2.jpeg);
  --shape-tex-size: 280px;
  --shape-scale-y: 1;
  transform-origin: center center;
}

.shape-deco--quote-1 {
  --shape-clip: url(#clip-forme_13);
  --shape-shadow-color: #5B7FA0;
}

.shape-deco--quote-2 {
  --shape-clip: url(#clip-forme_14);
  --shape-shadow-color: #C9888C;
}

.shape-deco--quote-3 {
  --shape-clip: url(#clip-forme_22);
  --shape-shadow-color: #D9883D;
}

.pote-quote.shape-host .shape-deco {
  z-index: -1;
}

/* Hero — étoile totem (forme_18) */
.shape-deco--totem-hero {
  --shape-clip: url(#clip-forme_18);
  --shape-fill: #2B65CC;
  --shape-shadow-color: #1E4FA0;
  --shape-shadow-x: 8px;
  --shape-shadow-y: 9px;
  --shape-tex: url(../textures/texture4.jpeg);
  --shape-tex-size: 340px;
  transform-origin: center center;
}

.hero-star .shape-deco--totem-hero {
  transform-origin: center center;
}

/* Hero — fond de bulle d'expression (masqué) */
.shape-deco--hero-bubble {
  display: none;
  --shape-fill: #FAF7F0;
  --shape-shadow-color: #5C6845;
  --shape-shadow-x: 4px;
  --shape-shadow-y: 5px;
  --shape-tex: url(../textures/texture2.jpeg);
  --shape-tex-size: 280px;
  --shape-scale-x: 1.45;
  --shape-scale-y: 1.15;
  transform-origin: center center;
}

#expr-bubble-29 .shape-deco--hero-bubble,
#expr-bubble-31 .shape-deco--hero-bubble {
  --shape-scale-x: 1.08;
}

/* ===================================================================
   EXPRESSIONS SVG INLINE — hero (scribbles + bulles)
   Scale ×1.18 déjà inclus dans les px ci-dessous.
   =================================================================== */

.hero-scribbles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.hero-bubbles {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.hero-scribble {
  position: absolute;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.hero-scribble.is-fading {
  opacity: 0;
}

.hero-scribble svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.hero-scribble path {
  stroke: currentColor;
  fill: currentColor;
  stroke-width: 4px;
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}

#expr-scribble-23 { width: 103.84px; z-index: 4; }
#expr-scribble-24 { width: 89.68px;  z-index: 4; }
#expr-scribble-25 { width: 118px;    z-index: 2; }
#expr-scribble-26 { width: 99.12px; }
#expr-scribble-27 { width: 68.44px; }
#expr-scribble-28 { width: 92.04px; }

.hero-bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  overflow: visible;
  isolation: isolate;
}

.hero-bubble.is-fading {
  opacity: 0;
}

.hero-bubble .shape-deco {
  z-index: -1;
}

.hero-bubble-glyphs {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: none;
}

.hero-bubble-glyphs svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.hero-bubble-glyphs path {
  fill: #1A1A1A;
}

#expr-bubble-29 {
  width: 125.08px;
  height: 125.08px;
}

#expr-bubble-31 {
  width: 129.8px;
  height: 129.8px;
}

#expr-glyphs-29 {
  width: 28px;
  height: 24px;
}

#expr-glyphs-31 {
  width: 34px;
  height: 48px;
}

.hero-bubble.zone-top-left     { left: 24%; top: 12%;  --shape-rotate: -33deg; }
.hero-bubble.zone-top-right    { left: 76%; top: 12%;  --shape-rotate: 33deg; }
.hero-bubble.zone-bottom-left  { left: 24%; top: 88%;  --shape-rotate: -147deg; }
.hero-bubble.zone-bottom-right { left: 76%; top: 88%;  --shape-rotate: 147deg; }

.hero-scribble.zone-top-left     { left: 16%; top: 16%; transform: translate(-50%, -100%) rotate(-45deg); }
.hero-scribble.zone-top-right    { left: 84%; top: 16%; transform: translate(-50%, -100%) rotate(45deg); }
.hero-scribble.zone-bottom-left  { left: 14%; top: 92%; transform: translate(-50%, -100%) rotate(-139deg); }
.hero-scribble.zone-bottom-right { left: 86%; top: 92%; transform: translate(-50%, -100%) rotate(139deg); }

/* ===================================================================
   MOBILE
   =================================================================== */
@media (max-width: 900px) {
  .title-block--quoi .bt-cloud-sage {
    /* rotate: 88deg !important; */
    transform-origin: top left;
    /* top: 10% !important;
    left: 75% !important;
    --shape-tx: -65%;
    --shape-ty: -46.2%; */
  }

  .title-block--ecoute .bt-orange {
    /* top: 56% !important;
    left: 50% !important; */
  }

  #expr-bubble-29,
  #expr-bubble-31 {
    width: 106.2px;
    height: 106.2px;
  }

  #expr-glyphs-29 {
    width: 24px;
    height: 20px;
  }

  #expr-glyphs-31 {
    width: 28px;
    height: 38px;
  }

  #expr-scribble-23 { width: 84.96px; }
  #expr-scribble-24 { width: 73.16px; }
  #expr-scribble-25 { width: 96.76px; }
  #expr-scribble-26 { width: 80.24px; }
  #expr-scribble-27 { width: 56.64px; }
  #expr-scribble-28 { width: 75.52px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bubble,
  .hero-scribble {
    transition: none;
  }
}