/* Décor feuillage — bannières vertes & fonds de section */

.canopee-foliage-zone{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.canopee-foliage-zone > .container,
.canopee-foliage-zone > .suites-banner-inner,
.canopee-foliage-zone > .news-grid,
.canopee-foliage-zone > .gift-card > *{
  position:relative;
  z-index:1;
}

.canopee-foliage{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
  max-width:none;
  will-change:transform;
}

@keyframes foliage-leaf-sway{
  0%,100%{transform:rotate(-4deg) translate3d(0,0,0)}
  33%{transform:rotate(2deg) translate3d(5px,-6px,0)}
  66%{transform:rotate(5deg) translate3d(2px,-12px,0)}
}
@keyframes foliage-sway-banner-left{
  0%,100%{transform:rotate(-1.5deg) translate3d(0,0,0)}
  50%{transform:rotate(2deg) translate3d(4px,-8px,0)}
}
@keyframes foliage-sway-banner-right{
  0%,100%{transform:rotate(1.5deg) translate3d(0,0,0)}
  50%{transform:rotate(-2deg) translate3d(-4px,6px,0)}
}
@keyframes foliage-sway-section-left{
  0%,100%{transform:rotate(-1deg) translate3d(0,0,0)}
  50%{transform:rotate(1.2deg) translate3d(3px,-5px,0)}
}
@keyframes foliage-sway-section-right{
  0%,100%{transform:rotate(179deg) translate3d(0,0,0)}
  50%{transform:rotate(181deg) translate3d(-3px,5px,0)}
}
@keyframes foliage-bg-breathe{
  0%,100%{opacity:.04}
  50%{opacity:.06}
}

/* Bannières vertes — symbole logo gauche (marron #b4976f, opacity 10%, balancement feuille) */
.canopee-foliage--logo{
  opacity:.1;
}
.canopee-foliage--banner-left{
  left:-4%;
  bottom:-12%;
  width:min(34vw,300px);
  height:auto;
  opacity:.9;
  transform-origin:15% 95%;
  animation:foliage-sway-banner-left 9s var(--ease) infinite;
}
.canopee-foliage--banner-right{
  right:-4%;
  top:-18%;
  width:min(32vw,280px);
  height:auto;
  opacity:.85;
  transform-origin:85% 8%;
  animation:foliage-sway-banner-right 10.5s var(--ease) infinite;
  animation-delay:-2s;
}
.canopee-foliage--logo.canopee-foliage--banner-left{
  left:-2%;
  bottom:-18%;
  width:auto;
  height:min(72vh,440px);
  max-width:min(38vw,320px);
  opacity:.1;
  transform-origin:12% 92%;
  animation:foliage-leaf-sway 9s ease-in-out infinite;
}
.canopee-foliage--compact.canopee-foliage--banner-left{
  left:-8%;
  bottom:-18%;
  width:min(55%,200px);
}
.canopee-foliage--compact.canopee-foliage--banner-right{
  right:-8%;
  top:-22%;
  width:min(50%,180px);
}
.canopee-foliage--logo.canopee-foliage--compact.canopee-foliage--banner-left{
  left:-6%;
  bottom:-22%;
  height:min(55vh,320px);
  max-width:min(48%,220px);
}

/* Sections claires — feuillage discret */
.section-foliage{
  position:relative;
  overflow:hidden;
}
.section-foliage > .container{
  position:relative;
  z-index:1;
}
.canopee-foliage--section-left{
  left:-5%;
  top:12%;
  width:min(220px,24vw);
  height:auto;
  color:var(--green-deep);
  opacity:.11;
  transform-origin:50% 100%;
  animation:foliage-sway-section-left 11s var(--ease) infinite;
  animation-delay:-1.5s;
}
.canopee-foliage--section-right{
  right:-5%;
  bottom:8%;
  width:min(200px,20vw);
  height:auto;
  color:var(--green-deep);
  opacity:.09;
  transform-origin:50% 0%;
  animation:foliage-sway-section-right 12s var(--ease) infinite;
  animation-delay:-4s;
}

/* Motif léger en fond de zone (pages & sections) */
.section-foliage::before,
.page-body--foliage::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.045;
  background:
    url('../img/decor/foliage-section.svg') no-repeat 92% 8% / min(280px,32vw) auto,
    url('../img/decor/foliage-section.svg') no-repeat 4% 72% / min(240px,28vw) auto;
  animation:foliage-bg-breathe 14s ease-in-out infinite;
}

.page-body--foliage{
  position:relative;
  overflow:hidden;
}
.page-body--foliage > .page-body-inner{
  position:relative;
  z-index:1;
}

@media (max-width:768px){
  .canopee-foliage--banner-left{width:min(42vw,200px);bottom:-8%}
  .canopee-foliage--banner-right{width:min(40vw,190px);top:-12%}
  .canopee-foliage--logo.canopee-foliage--banner-left{
    height:min(50vh,280px);max-width:min(44vw,200px);bottom:-12%;
  }
  .canopee-foliage--logo.canopee-foliage--compact.canopee-foliage--banner-left{
    height:min(42vh,240px);max-width:min(52%,180px);
  }
  .canopee-foliage--section-left,
  .canopee-foliage--section-right{width:min(160px,38vw);opacity:.08}
  .section-foliage::before,
  .page-body--foliage::before{opacity:.03}
}

@media (prefers-reduced-motion:reduce){
  .canopee-foliage,
  .section-foliage::before,
  .page-body--foliage::before{
    animation:none!important;
    will-change:auto;
  }
}