/* Well & Trees – Features of a Fruit Tree (bloc #ws-arbre, préfixe wsa-) */
#ws-arbre,#ws-arbre *,#ws-arbre *::before,#ws-arbre *::after{box-sizing:border-box}
#ws-arbre{--wsa-g:var(--e-global-color-kadence3,#6ca754);--wsa-g2:#3f8f24;--wsa-bg:#f1f9ec;--wsa-bg2:#e4f3dc;--wsa-bd:#c6e4b6;--wsa-ink:#1b2b3c;
  width:100%;max-width:1240px;margin:0 auto;font-family:'Poppins',system-ui,sans-serif;color:#1f2d3a;-webkit-tap-highlight-color:transparent}
#ws-arbre .wsa-ttl{margin:0 0 30px;padding:0;text-align:center;text-transform:none;font-family:'Poppins',sans-serif;font-size:40px;line-height:42px;font-weight:700;letter-spacing:-.015em;color:var(--e-global-color-primary,#182d3a)}
#ws-arbre .wsa-ttl span{font:inherit;color:inherit}
#ws-arbre .wsa-ttl .wsa-hl{position:relative;display:inline-block;color:var(--wsa-g)}
#ws-arbre .wsa-ttl .wsa-hl svg{position:absolute;left:-4px;bottom:-10px;width:calc(100% + 8px);height:12px}
#ws-arbre .wsa-ttl .wsa-leaf{width:34px;height:38px;vertical-align:-6px;margin-left:6px;animation:wsa-bob 3s ease-in-out infinite}
@keyframes wsa-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
#ws-arbre .wsa-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(20px,3.2vw,40px);align-items:center}
#ws-arbre .wsa-art{position:relative;min-width:0}
#ws-arbre .wsa-scene{width:100%;height:auto;display:block;overflow:visible}
#ws-arbre .wsa-list{display:flex;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0}
#ws-arbre .wsa-it{display:flex;gap:14px;align-items:flex-start;text-align:left;margin:0;padding:14px 16px;border-radius:18px;border:1.5px solid transparent;background:transparent;font-family:inherit;font-size:14px;line-height:1.6;font-weight:400;letter-spacing:0;text-transform:none;color:#3d4b58;cursor:pointer;outline:0;transition:background .25s ease,border-color .25s ease,transform .25s ease}
#ws-arbre .wsa-it b{font-weight:700;color:var(--wsa-ink)}
#ws-arbre .wsa-it:hover{background:var(--wsa-bg)}
#ws-arbre .wsa-it.wsa-on{background:var(--wsa-bg2);border-color:var(--wsa-bd);transform:translateX(4px)}
#ws-arbre .wsa-it:focus-visible{outline:3px solid var(--wsa-g);outline-offset:2px}
#ws-arbre .wsa-ic{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--wsa-bg2);color:var(--wsa-g2);display:flex;align-items:center;justify-content:center;transition:all .25s ease}
#ws-arbre .wsa-ic svg{width:22px;height:22px}
#ws-arbre .wsa-it.wsa-on .wsa-ic{background:var(--wsa-g);color:#fff}
#ws-arbre .wsa-tx{display:block}
#ws-arbre .wsa-dots{display:none}
#ws-arbre.wsa-off *{animation-play-state:paused !important}

/* ---------- textes du schéma ---------- */
#ws-arbre .wsa-lay{font-family:'Poppins',sans-serif;font-weight:800;font-size:26px;letter-spacing:.04em;fill:#fff;paint-order:stroke;stroke:rgba(20,12,6,.45);stroke-width:5px}
#ws-arbre .wsa-cl{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;letter-spacing:.03em;fill:var(--wsa-ink)}
#ws-arbre .wsa-cl2{font-family:'Poppins',sans-serif;font-weight:500;font-size:16px;fill:#4b5a68}
#ws-arbre .wsa-tg1{font-family:'Poppins',sans-serif;font-weight:800;font-size:22px;fill:#fff}
#ws-arbre .wsa-tg2{font-family:'Poppins',sans-serif;font-weight:500;font-size:15px;fill:#e2f3d9}
#ws-arbre .wsa-tm1{font-family:'Poppins',sans-serif;font-weight:800;font-size:20px;fill:var(--wsa-ink)}
#ws-arbre .wsa-tm2{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;fill:var(--wsa-g2)}
#ws-arbre .wsa-co2t{font-family:'Poppins',sans-serif;font-weight:800;font-size:26px;fill:#6b7a88}
#ws-arbre .wsa-o2t{font-family:'Poppins',sans-serif;font-weight:800;font-size:24px;fill:#2aa3de}

/* ---------- animations permanentes ---------- */
#ws-arbre .wsa-rays{transform-box:fill-box;transform-origin:center;animation:wsa-spin 60s linear infinite}
@keyframes wsa-spin{to{transform:rotate(360deg)}}
#ws-arbre .wsa-canopy{transform-box:fill-box;transform-origin:50% 100%;animation:wsa-sway 5s ease-in-out infinite}
@keyframes wsa-sway{0%,100%{transform:skewX(0deg)}50%{transform:skewX(-1.6deg)}}
#ws-arbre .wsa-gsway{transform-box:fill-box;transform-origin:50% 100%;animation:wsa-gsway 4s ease-in-out infinite}
#ws-arbre .wsa-gsway.wsa-g2{animation-duration:5s;animation-delay:-1s}
@keyframes wsa-gsway{0%,100%{transform:skewX(0deg)}50%{transform:skewX(-3deg)}}
#ws-arbre .wsa-tree{transform-box:fill-box;transform-origin:50% 100%}
#ws-arbre .wsa-fruit{transform-box:fill-box;transform-origin:center}
#ws-arbre .wsa-ov{opacity:0;transition:opacity .45s ease;pointer-events:none}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-ov-croissance,
#ws-arbre .wsa-scene[data-active="fruits"] .wsa-ov-fruits,
#ws-arbre .wsa-scene[data-active="famille"] .wsa-ov-famille,
#ws-arbre .wsa-scene[data-active="climat"] .wsa-ov-climat,
#ws-arbre .wsa-scene[data-active="impact"] .wsa-ov-impact,
#ws-arbre .wsa-scene[data-active="zero"] .wsa-ov-zero{opacity:1}
@keyframes wsa-popin{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
#ws-arbre .wsa-pop{transform-box:fill-box;transform-origin:center;opacity:0}

/* 1. croissance : l'arbre pousse depuis le plant, les fruits arrivent à la fin, la frise se remplit */
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-tree{animation:wsa-grow 4.2s cubic-bezier(.25,.8,.25,1) both}
@keyframes wsa-grow{0%{transform:scale(.14)}60%{transform:scale(.72)}100%{transform:scale(1)}}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-fruit{animation:wsa-popin .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(3.4s + var(--d,0s))}
#ws-arbre .wsa-step{fill:#fff;stroke:#c6e4b6}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-step{animation:wsa-step .4s ease-out both}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-step.wsa-s2{animation-delay:2.2s}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-step.wsa-s3{animation-delay:4s}
@keyframes wsa-step{from{fill:#fff;stroke:#c6e4b6}to{fill:#6ca754;stroke:#6ca754}}
#ws-arbre .wsa-bar{stroke-dasharray:1;stroke-dashoffset:1}
#ws-arbre .wsa-scene[data-active="croissance"] .wsa-bar{animation:wsa-bar 4.2s linear both}
@keyframes wsa-bar{to{stroke-dashoffset:0}}

/* 2. fruits : les fruits apparaissent un à un, le panier se remplit */
#ws-arbre .wsa-scene[data-active="fruits"] .wsa-fruit{animation:wsa-popin .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
#ws-arbre .wsa-scene[data-active="fruits"] .wsa-pop{animation:wsa-popin .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
#ws-arbre .wsa-fall{opacity:0}
#ws-arbre .wsa-scene[data-active="fruits"] .wsa-fall{animation:wsa-fall 2.4s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes wsa-fall{0%{opacity:0;transform:translateY(0)}10%{opacity:1}70%{opacity:1;transform:translateY(230px)}80%{opacity:0;transform:translateY(240px)}100%{opacity:0}}

/* 3. famille : les silhouettes arrivent sous l'arbre */
#ws-arbre .wsa-pp{transform-box:fill-box;transform-origin:50% 100%;opacity:0}
#ws-arbre .wsa-scene[data-active="famille"] .wsa-pp{animation:wsa-pp .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
@keyframes wsa-pp{from{opacity:0;transform:scale(.2) translateY(10px)}to{opacity:1;transform:none}}
#ws-arbre .wsa-scene[data-active="famille"] .wsa-pop{animation:wsa-popin .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}

/* 4. climat : le soleil chauffe, les ondes de chaleur montent, l'arbre tient */
#ws-arbre .wsa-sun{transform-box:fill-box;transform-origin:center}
#ws-arbre .wsa-scene[data-active="climat"] .wsa-sun{animation:wsa-pulse 2.4s ease-in-out infinite}
@keyframes wsa-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
#ws-arbre .wsa-heat{opacity:0}
#ws-arbre .wsa-scene[data-active="climat"] .wsa-heat{animation:wsa-heat 2.2s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes wsa-heat{0%{opacity:0;transform:translateY(0)}25%{opacity:.8}100%{opacity:0;transform:translateY(-70px)}}
#ws-arbre .wsa-scene[data-active="climat"] .wsa-pop{animation:wsa-popin .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
#ws-arbre .wsa-nodrop{stroke-dasharray:60;stroke-dashoffset:60}
#ws-arbre .wsa-scene[data-active="climat"] .wsa-nodrop{animation:wsa-draw .6s ease-out .9s forwards}
@keyframes wsa-draw{to{stroke-dashoffset:0}}

/* 5. impact : ombre, CO2 absorbé, O2 relâché, racines qui enrichissent le sol */
#ws-arbre .wsa-shade{opacity:0;transition:opacity .8s ease}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-shade{opacity:.35}
#ws-arbre .wsa-co2{opacity:0}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-co2{animation:wsa-co2 3s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes wsa-co2{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}85%{opacity:.9;transform:translate(-190px,30px)}100%{opacity:0;transform:translate(-200px,32px)}}
#ws-arbre .wsa-o2{opacity:0}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-o2{animation:wsa-o2 3s ease-out infinite;animation-delay:var(--d,0s)}
@keyframes wsa-o2{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-120px)}}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-root{animation:wsa-rootglow 1.6s ease-in-out infinite}
@keyframes wsa-rootglow{0%,100%{stroke:#8a5a2b}50%{stroke:#e0a040}}
#ws-arbre .wsa-spark{opacity:0;transform-box:fill-box;transform-origin:center}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-spark{animation:wsa-spark 2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes wsa-spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.1)}}
#ws-arbre .wsa-scene[data-active="impact"] .wsa-pop{animation:wsa-popin .55s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}

/* 6. zéro déchet : les légendes se dessinent une à une */
#ws-arbre .wsa-call{opacity:0;transform-box:fill-box;transform-origin:0 50%}
#ws-arbre .wsa-scene[data-active="zero"] .wsa-call{animation:wsa-call .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:var(--d,0s)}
@keyframes wsa-call{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
#ws-arbre .wsa-line{stroke-dasharray:300;stroke-dashoffset:300}
#ws-arbre .wsa-scene[data-active="zero"] .wsa-line{animation:wsa-draw .6s ease-out both;animation-delay:var(--d,0s)}

@media (prefers-reduced-motion:reduce){#ws-arbre *{animation:none !important;transition:none !important}#ws-arbre .wsa-pop,#ws-arbre .wsa-pp,#ws-arbre .wsa-call{opacity:1}#ws-arbre .wsa-scene[data-active="impact"] .wsa-shade{opacity:.35}#ws-arbre .wsa-list{scroll-behavior:auto}}

/* ---------- petit ordinateur (1025 à 1200 px) ---------- */
@media (max-width:1200px){
  #ws-arbre .wsa-ttl{font-size:36px;line-height:40px;margin-bottom:24px}
  #ws-arbre .wsa-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  #ws-arbre .wsa-list{gap:6px}
  #ws-arbre .wsa-it{gap:12px;padding:12px 14px;border-radius:16px;font-size:13.5px;line-height:1.55}
  #ws-arbre .wsa-ic{width:36px;height:36px;border-radius:11px}
  #ws-arbre .wsa-ic svg{width:20px;height:20px}
}

/* ---------- mobile et tablette (jusqu'à 1024 px, seuil du site) : schéma, rangée d'icônes, cartes à faire glisser ---------- */
@media (max-width:1024px){
  #ws-arbre{--wsa-card:min(calc(100vw - 64px),380px)}
  #ws-arbre .wsa-ttl{font-size:clamp(25px,8.2vw,32px);line-height:1.1;margin-bottom:14px}
  #ws-arbre .wsa-ttl .wsa-leaf{width:26px;height:30px;margin-left:2px}
  #ws-arbre .wsa-grid{display:block}
  #ws-arbre .wsa-art{position:static;margin:0 auto;max-width:none;width:min(100%,330px,calc(58vh * 900 / 1000))}
  #ws-arbre .wsa-lay{font-size:30px}
  #ws-arbre .wsa-cl{font-size:25px}
  #ws-arbre .wsa-cl2{font-size:19px}
  #ws-arbre .wsa-tg1{font-size:25px}
  #ws-arbre .wsa-tg2{font-size:17px}
  #ws-arbre .wsa-tm1{font-size:21px}
  #ws-arbre .wsa-tm2{font-size:17px}
  #ws-arbre .wsa-list{position:relative;flex-direction:row;align-items:stretch;gap:12px;width:100vw;margin:8px 0 0 calc(50% - 50vw);padding:4px calc((100vw - var(--wsa-card)) / 2) 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  #ws-arbre .wsa-list::-webkit-scrollbar{display:none}
  #ws-arbre .wsa-it,
  #ws-arbre .wsa-it.wsa-on{transform:none}
  #ws-arbre .wsa-it{display:block;flex:0 0 var(--wsa-card);scroll-snap-align:center;padding:14px 16px 16px;border-radius:18px;background:var(--wsa-bg);border-color:#dcefd2;font-size:13.5px;line-height:1.55}
  #ws-arbre .wsa-it::after{content:"";display:block;clear:both}
  #ws-arbre .wsa-it:hover{background:var(--wsa-bg)}
  #ws-arbre .wsa-it.wsa-on,
  #ws-arbre .wsa-it.wsa-on:hover{background:var(--wsa-bg2);border-color:var(--wsa-bd)}
  #ws-arbre .wsa-ic{float:left;width:36px;height:36px;margin:3px 11px 2px 0;border-radius:11px;background:#d8edcc}
  #ws-arbre .wsa-ic svg{width:20px;height:20px}
  #ws-arbre .wsa-dots{display:flex;justify-content:center;align-items:center;gap:7px;margin:8px 0 0}
  #ws-arbre .wsa-dot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--wsa-bg2);color:var(--wsa-g2);cursor:pointer;transition:background-color .25s ease,color .25s ease,transform .25s ease}
  #ws-arbre .wsa-dot svg{width:22px;height:22px}
  #ws-arbre .wsa-dot.wsa-on{background:var(--wsa-g);color:#fff;transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(108,167,84,.9)}
}
@media (max-width:359px){
  #ws-arbre .wsa-dots{gap:5px}
  #ws-arbre .wsa-dot{width:37px;height:37px;border-radius:11px}
  #ws-arbre .wsa-dot svg{width:20px;height:20px}
}
@supports (height:1svh){
  @media (max-width:1024px){#ws-arbre .wsa-art{width:min(100%,330px,calc(58svh * 900 / 1000))}}
}
@media (min-width:600px) and (max-width:1024px){
  #ws-arbre .wsa-ttl{font-size:36px;line-height:40px;margin-bottom:18px}
  #ws-arbre .wsa-ttl .wsa-leaf{width:30px;height:34px;margin-left:5px}
  #ws-arbre .wsa-art{width:min(100%,430px,calc(56vh * 900 / 1000))}
  #ws-arbre .wsa-lay{font-size:27px}
  #ws-arbre .wsa-cl{font-size:24px}
  #ws-arbre .wsa-it{padding:18px 20px 20px;font-size:14px;line-height:1.6}
  #ws-arbre .wsa-dots{gap:9px;margin-top:12px}
  #ws-arbre .wsa-dot{width:48px;height:48px;border-radius:14px}
  #ws-arbre .wsa-dot svg{width:24px;height:24px}
  #ws-arbre .wsa-list{margin-top:12px}
}