/* « L'arbre qui répond » : décor de l'assistant (granit + bois + corde).
   Habillage pur CSS/SVG ; variables --bois, --corde, --metal pour le réutiliser dans un autre univers. */
.arbre{--bois:url(../media/arbre-bois.webp);--bois-clair:linear-gradient(rgba(246,228,198,.86),rgba(236,212,176,.86));--grave:#2a1a0c;--corde-a:#cdb58a;--corde-b:#8a6c43;
  position:relative;color:#fff;background:#121714;overflow:hidden;isolation:isolate;padding:clamp(96px,11vw,150px) 0 clamp(64px,8vw,110px);min-height:min(92svh,900px)}
.arbre-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-3;transition:filter 1.2s ease}
.arbre-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,12,10,.55) 0%,rgba(9,12,10,.25) 45%,rgba(9,12,10,.7) 100%),linear-gradient(0deg,rgba(9,12,10,.75),rgba(9,12,10,0) 45%)}

/* Lumière : jour = taches de soleil à travers les feuilles ; soir = lumière basse et chaude */
.arbre-lum{position:absolute;inset:0;z-index:-2;pointer-events:none;mix-blend-mode:screen}
.arbre-lum i{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55;background:radial-gradient(circle,rgba(255,244,205,.85),rgba(255,244,205,0) 65%)}
.arbre-lum i:nth-child(1){width:44vw;height:44vw;left:-8vw;top:-14vw;animation:lum-a 22s ease-in-out infinite alternate}
.arbre-lum i:nth-child(2){width:26vw;height:26vw;left:30vw;top:8vw;opacity:.35;animation:lum-b 17s ease-in-out infinite alternate}
.arbre-lum i:nth-child(3){width:18vw;height:18vw;left:12vw;top:30vw;opacity:.25;animation:lum-a 26s ease-in-out infinite alternate-reverse}
@keyframes lum-a{to{transform:translate(4vw,2vw) scale(1.08)}}
@keyframes lum-b{to{transform:translate(-3vw,3vw) scale(.92)}}
.arbre[data-lumiere="soir"] .arbre-photo{filter:saturate(.8) brightness(.8) sepia(.2) hue-rotate(-6deg)}
.arbre[data-lumiere="soir"] .arbre-lum{mix-blend-mode:soft-light}
.arbre[data-lumiere="soir"] .arbre-lum i{background:radial-gradient(circle,rgba(255,150,70,.9),rgba(255,150,70,0) 65%)}
.arbre[data-lumiere="soir"] .arbre-lum i:nth-child(1){left:-14vw;top:auto;bottom:-20vw}
.arbre[data-lumiere="soir"] .arbre-shade{background:linear-gradient(180deg,rgba(30,22,48,.45) 0%,rgba(9,12,10,.12) 50%,rgba(9,12,10,.7) 100%),linear-gradient(90deg,rgba(9,12,10,.25),rgba(9,12,10,.55))}

.arbre-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"left intro" "left relais";grid-template-rows:auto 1fr;column-gap:clamp(32px,6vw,96px);align-items:start;position:relative}
.arbre-intro{grid-area:intro}.arbre-left{grid-area:left;padding-top:clamp(40px,5vw,80px)}.relais{grid-area:relais}
.arbre-intro{max-width:44ch}
.arbre-intro{position:relative}
.arbre-intro::before{content:"";position:absolute;inset:-48px -64px;z-index:-1;background:radial-gradient(closest-side,rgba(8,10,9,.72),rgba(8,10,9,.45) 60%,rgba(8,10,9,0));pointer-events:none}
.arbre-intro .kicker{color:#f3dfb8;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.arbre-intro p{margin:14px 0 0;font-size:clamp(17px,1.4vw,19px);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 18px rgba(0,0,0,.6)}

/* Pancarte suspendue */
.pancarte-wrap{position:relative;max-width:540px;transform-origin:50% -60vh;animation:balance 9s ease-in-out infinite}
@keyframes balance{0%,100%{transform:rotate(-.55deg)}50%{transform:rotate(.55deg)}}
.corde{position:absolute;bottom:calc(100% - 14px);width:6px;height:120vh;border-radius:3px;z-index:0;
  background:repeating-linear-gradient(-35deg,var(--corde-a) 0 4px,var(--corde-b) 4px 7px);box-shadow:1px 0 2px rgba(0,0,0,.4)}
.corde.c1{left:18%}.corde.c2{right:18%}
.anneau{position:absolute;top:-34px;z-index:2;width:20px;height:34px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.anneau.a1{left:calc(18% - 7px)}.anneau.a2{right:calc(18% - 7px)}
.mq{width:100%;height:100%;display:block}
.pancarte{position:relative;z-index:1;margin:0;border-radius:12px;padding:clamp(26px,3vw,38px) clamp(22px,3vw,36px) clamp(22px,2.6vw,30px);
  background:var(--bois) center/cover,#6b4526;color:var(--grave);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75),0 6px 14px -6px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,220,170,.18),inset 0 0 42px rgba(30,14,2,.55),inset 0 -3px 0 rgba(0,0,0,.25)}
.pancarte::before,.pancarte::after{content:"";position:absolute;top:12px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9dde0,#5c6268 70%);box-shadow:0 1px 1px rgba(0,0,0,.5)}
.pancarte::before{left:calc(18% - 1px)}.pancarte::after{right:calc(18% - 1px)}
.pancarte h2{font:800 clamp(30px,3.2vw,46px)/1 var(--f-head);letter-spacing:-.02em;color:#24160a;
  text-shadow:0 1px 0 rgba(255,214,160,.32),0 -1px 0 rgba(0,0,0,.55);margin-top:8px}
.pancarte h2 span{color:#f3dfb8;text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 1px rgba(0,0,0,.5)}
.pancarte-etat{margin:14px 0 18px;font-weight:700;font-size:15px;color:#f6e6c8;text-shadow:0 1px 2px rgba(0,0,0,.6);min-height:1.5em}
.planche{display:flex;gap:10px;align-items:center;padding:6px 6px 6px 18px;border-radius:10px;background:var(--bois-clair),var(--bois) center/cover;
  box-shadow:inset 0 2px 6px rgba(60,30,5,.55),inset 0 -1px 0 rgba(255,255,255,.35)}
.planche input{flex:1;min-width:0;border:0;background:transparent;font:600 17px/1.3 var(--f-body);color:#2a1a0c;padding:12px 0;outline:none}
.planche input::placeholder{color:#7a5a38;opacity:1}
.planche:focus-within{box-shadow:inset 0 2px 6px rgba(60,30,5,.55),0 0 0 3px var(--sun)}
.planche button{flex:none;width:50px;height:50px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.planche button:hover{background:var(--red-d)}
.planche button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.planche button svg{width:22px;height:22px}

/* Étiquettes à mousquetons sur une cordelette */
.tags-wrap{position:relative;margin-top:clamp(30px,4vw,44px);max-width:620px}
.cordelette{display:none;position:absolute;left:-40px;right:-40px;top:6px;height:4px;border-radius:2px;background:repeating-linear-gradient(-35deg,var(--corde-a) 0 3px,var(--corde-b) 3px 5px);box-shadow:0 2px 3px rgba(0,0,0,.35)}
.tags{--pas:92px;list-style:none;margin:0 -40px;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;position:relative;grid-auto-rows:80px;
  background:repeating-linear-gradient(180deg,transparent 0 6px,#c4a878 6px 8px,#7d6038 8px 10px,transparent 10px var(--pas))}
.tags li{padding-top:0}
.tag{position:relative;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:pointer;color:#2c2216;font:700 15px/1.25 var(--f-body);transform-origin:50% 0;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.tag .mq{width:14px;height:24px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));margin-bottom:-4px;position:relative;z-index:1}
.tag{width:100%}.tag span{display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:6px 12px;border-radius:6px;background:linear-gradient(#efe3c9,#e2d1ae);box-shadow:0 8px 16px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(120,90,40,.25);text-align:center}
.tag:hover,.tag:focus-visible{transform:rotate(-3deg)}
.tag:focus-visible span{outline:3px solid var(--sun);outline-offset:2px}
.tags li:nth-child(even) .tag:hover{transform:rotate(3deg)}

/* Le relais : la conversation au bout de la tyrolienne */
.relais{position:relative;margin-top:clamp(40px,5vw,72px);padding:34px 0 0}
.poulie{position:absolute;right:6px;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e8ebee,#666c72 60%,#3a3e42);box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:2}
.fil{list-style:none;margin:0;padding:6px 4px 6px 0;display:flex;flex-direction:column;gap:14px;max-height:min(56vh,520px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.fil li{max-width:92%}
.plaque{align-self:flex-start;position:relative;padding:16px 20px 16px 20px;border-radius:9px;color:#2a1a0c;font-size:16.5px;line-height:1.5;
  background:var(--bois-clair),var(--bois) center/cover;box-shadow:0 18px 30px -18px rgba(0,0,0,.85),inset 0 0 0 1px rgba(110,70,30,.25),inset 0 0 18px rgba(120,70,20,.25)}
.plaque::before,.plaque::after{content:"";position:absolute;top:8px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e0e3e6,#60666c 70%)}
.plaque::before{left:8px}.plaque::after{right:8px}
.plaque p{margin:0 0 .5em}.plaque p:last-child{margin:0}
.plaque b{color:#1a0f05}
.plaque a.lien{display:inline-flex;align-items:center;gap:6px;margin:8px 8px 0 0;padding:8px 14px;border-radius:999px;background:#2a1a0c;color:#f6e6c8;font-weight:700;font-size:14.5px;text-decoration:none}
.plaque a.lien.rouge{background:var(--red);color:#fff}
.plaque a.lien:hover{filter:brightness(1.15)}
.vous{align-self:flex-end;padding:10px 16px;border-radius:8px;background:rgba(14,18,15,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:15.5px}
.relais-note{margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.72)}
.relais-note a{color:#fff;font-weight:700}

/* Câble de la tyrolienne (dessiné par arbre.js) */
.arbre-cable{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.arbre-cable line{stroke-linecap:round}
.arbre-cable .c-s{stroke:rgba(0,0,0,.35);stroke-width:4;transform:translate(1px,3px)}
.arbre-cable .c-l{stroke:#c9ced3;stroke-width:2.2}
.arbre-fly{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.arbre-fly .plaque{position:absolute;margin:0;will-change:transform}
.arbre-fly .plaque .crochet{position:absolute;left:50%;bottom:100%;width:2px;height:26px;margin-left:-1px;background:#c9ced3}
.arbre-fly .plaque .crochet::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#eef0f2,#6a7076 60%,#3a3e42);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.arbre-fly .feuille{position:absolute;top:0;width:22px;height:22px}
.arbre-in>*{position:relative;z-index:1;min-width:0}

/* Lanceur : petite pancarte suspendue */
.lanceur{position:fixed;right:clamp(16px,2.4vw,32px);top:84px;z-index:45;display:flex;flex-direction:column;align-items:center;text-decoration:none;transform-origin:50% -80px;transition:opacity .4s ease,visibility .4s;color:var(--grave,#2a1a0c)}
.lanceur.cache{opacity:0;visibility:hidden}
.l-corde{width:4px;height:44px;border-radius:2px;background:repeating-linear-gradient(-35deg,#cdb58a 0 3px,#8a6c43 3px 5px)}
.l-anneau{width:14px;height:24px;margin:-4px 0 -6px;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.l-plaque{display:block;padding:12px 18px 11px;border-radius:9px;text-align:center;background:url(../media/arbre-bois-s.webp) center/cover,#6b4526;box-shadow:0 14px 26px -12px rgba(0,0,0,.8),inset 0 0 18px rgba(30,14,2,.55),inset 0 0 0 1px rgba(255,220,170,.18)}
.l-plaque span{display:block;font:800 17px/1.05 var(--f-head);color:#f3dfb8;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.l-plaque small{display:block;margin-top:3px;font:700 12px/1.1 var(--f-body);color:#f0dcb5;opacity:.9}
.lanceur:focus-visible .l-plaque{outline:3px solid var(--sun);outline-offset:3px}
.lanceur.part{animation:zip .7s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes zip{to{transform:translate(-38vw,55vh) rotate(-8deg);opacity:0}}

@media (max-width:900px){
  .arbre-in{grid-template-columns:1fr;grid-template-areas:"intro" "left" "relais";grid-template-rows:auto}
  .arbre-left{padding-top:0}
  .relais{margin-top:48px}
  .pancarte-wrap{max-width:none;margin-top:96px}
  .corde{height:82px}
  .pancarte-wrap::before{content:"";position:absolute;left:calc(-1 * var(--pad) - 20px);right:calc(-1 * var(--pad) - 20px);bottom:calc(100% + 66px);height:3px;border-radius:2px;background:linear-gradient(#e6e9ec,#80868c);box-shadow:0 2px 3px rgba(0,0,0,.45)}
}
@media (max-width:760px){
  .arbre{padding-top:84px}
  .tags-wrap{margin-right:calc(-1 * var(--pad))}
  .tags-wrap{margin-right:0}
  .tags{margin:0 calc(-1 * var(--pad));padding:0 var(--pad);gap:12px 10px;grid-auto-rows:84px;--pas:96px}
  .tag span{height:56px;padding:6px 8px}
  .tag span{font-size:14.5px}
  .fil{max-height:none;overflow:visible}
  .fil li{max-width:100%}
  .lanceur{top:auto;bottom:calc(84px + env(safe-area-inset-bottom));right:12px;transform-origin:50% -20px}
  .l-corde{height:14px}
  .l-plaque{padding:9px 14px 8px}
  .l-plaque span{font-size:15px}
  .l-plaque small{display:none}
  @keyframes zip{to{transform:translate(-20vw,-40vh) rotate(8deg);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .pancarte-wrap,.arbre-lum i{animation:none!important}
  .tag{transition:none}
  .lanceur.part{animation:none}
}