.food-web{--aqua:#87e7da;--coral:#ffb19a;--cream:#f5f2e6;box-sizing:border-box;color:var(--cream);background:radial-gradient(ellipse at 50% 45%,#175969 0%,#08323f 48%,#031b27 100%);border:1px solid #679c9a66;border-radius:26px;padding:clamp(16px,2vw,32px);font:16px/1.5 system-ui,sans-serif;overflow:hidden;isolation:isolate}
.food-web *{box-sizing:border-box}.food-web h2,.food-web h3,.food-web p{color:inherit;margin:0}.food-web h2{font-size:clamp(24px,3vw,40px);line-height:1.2}.food-web .fw-eyebrow{color:var(--aqua);text-transform:uppercase;letter-spacing:.16em;font-size:12px;margin-bottom:8px}.fw-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:22px 0}.fw-toolbar label{display:grid;gap:5px;flex:1;min-width:180px}.food-web select,.food-web button,.food-web .fw-link{font:inherit;min-height:48px;border-radius:14px;border:1px solid #9cdbd966;padding:10px 15px;background:#123e4b;color:#fff;text-decoration:none}.food-web button{cursor:pointer}.food-web button:disabled{opacity:.45;cursor:default}.food-web select{width:100%}.food-web :focus-visible{outline:3px solid #ffe3a2;outline-offset:4px}.fw-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.9fr) minmax(0,1fr);gap:clamp(25px,5vw,100px);align-items:center;min-height:480px;padding:25px 0}.fw-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}.fw-links path{fill:none;stroke-width:1.8;opacity:.6}.fw-side{display:grid;gap:12px}.fw-side h3{font-size:14px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;color:var(--aqua)}.fw-side:last-child h3{color:var(--coral)}.fw-node{display:flex;align-items:center;gap:12px;min-height:58px;border:1px solid #79c7c344;border-radius:16px;padding:12px;background:#0c303deb;overflow-wrap:anywhere}.food-web button.fw-node{text-align:left;width:100%;background:#123e4bf2}.fw-node small{display:block;color:#b5cfcc;font-size:12px}.fw-node img{width:46px;height:46px;object-fit:cover;border-radius:50%;flex:none}.fw-node button{width:100%}.food-web button.fw-node:hover{border-color:var(--aqua);background:#235c65;transform:translateY(-2px)}.fw-center{text-align:center;position:relative;min-width:0}.fw-center img{display:block;width:min(100%,300px);aspect-ratio:16/9;object-fit:contain;border-radius:8px;border:4px solid #95d5c7;box-shadow:0 0 0 12px #87e7da0d,0 0 70px #87e7da33;margin:0 auto 24px;background:#082d3a}.fw-center h3{font-size:clamp(24px,2.6vw,38px);line-height:1.15;overflow-wrap:anywhere}.fw-center p{margin:10px 0;color:#b9dbd8}.fw-center .fw-link{display:inline-block;margin-top:12px;font-size:14px}.fw-notice{margin-top:20px!important;font-size:14px;color:#b7cfce!important;max-width:85ch}.fw-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:14px;margin-bottom:8px}.fw-legend span:first-child{color:var(--aqua)}.fw-legend span:last-child{color:var(--coral)}.fw-empty{color:#b7cfce!important;font-size:14px}.food-web:fullscreen{border-radius:0;width:100%;height:100%;overflow:auto;padding:clamp(20px,3vw,60px)}.food-web:fullscreen .fw-stage{min-height:65vh}.fw-loading{padding:40px;text-align:center}
@media(max-width:600px){.fw-stage{grid-template-columns:1fr;gap:32px;padding:15px 0;min-height:0}.fw-center{grid-row:2;margin:10px 24px}.fw-center img{width:140px}.fw-side{gap:10px}.fw-links{display:none}.fw-side:first-child:after{content:attr(data-active-label);text-align:center;color:var(--aqua)}.fw-side:last-child:before{content:attr(data-active-label);text-align:center;color:var(--coral)}.fw-center h3{font-size:28px}.food-web{border-radius:18px}.fw-toolbar{gap:8px}.fw-toolbar label{flex-basis:100%}}
.food-web [hidden]{display:none!important}
.food-web.fw-fixed{margin:0 0 32px;padding:clamp(16px,2.5vw,30px)}.fw-fixed .fw-stage{min-height:0;padding:12px 0}.fw-fixed .fw-center img{margin-bottom:16px}.fw-fixed .fw-center p{margin-bottom:0}.fw-center p{font-size:clamp(17px,1.8vw,24px);font-weight:700}
.food-web.fw-fixed,.food-web.fw-fixed *{pointer-events:none}.food-web.fw-fixed .fw-link,.food-web.fw-fixed .fw-toolbar,.food-web.fw-fixed .fw-legend,.food-web.fw-fixed .fw-notice{display:none!important}
.fw-center-card{min-height:150px;display:grid;place-content:center;padding:18px;border:2px solid #87e7da;border-radius:24px;background:linear-gradient(145deg,#185c68,#082d3a);box-shadow:0 0 0 10px #87e7da12,0 0 55px #87e7da2e}.fw-center-card .fw-center-image{width:min(100%,220px);margin:0 auto 12px;border:4px solid #95d5c7}.fw-center-card p{margin:0!important;color:#b9dbd8}
.fw-embedded>header{padding:20px 16px!important}.fw-embedded>header h1{font-size:clamp(22px,3vw,32px)!important;margin-bottom:8px!important}.fw-embedded>header p{font-size:15px!important}.fw-embedded>main{max-width:none!important;padding:0 12px 30px!important}
@media(prefers-reduced-motion:no-preference){.fw-center{animation:fw-appear .4s ease-out}.fw-node{transition:transform .2s,border-color .2s}@keyframes fw-appear{from{opacity:.4;transform:scale(.95)}to{opacity:1;transform:scale(1)}}}
.fw-center-card .fw-center-image{display:block;width:min(100%,300px);height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:8px!important;margin:0 auto 12px;background:#082d3a}
/* Commandes adaptées aux écrans tactiles */
.food-web button,.food-web select,.food-web a{touch-action:manipulation}
.food-web button,.food-web select{min-height:56px}
.food-web .fw-node{min-height:72px;padding:14px 16px;font-size:clamp(15px,1.2vw,19px)}
.food-web .fw-node small{font-size:13px}
.food-web select{min-height:68px!important;padding:14px 20px!important;font-size:clamp(18px,1.6vw,24px)!important;font-weight:600;border:2px solid #87e7daaa!important;border-radius:16px!important;background:#174957;color:#fff;cursor:pointer}
.food-web:fullscreen{display:flex;flex-direction:column;min-height:100dvh;padding:clamp(24px,3vw,56px)}
.food-web:fullscreen .fw-stage{flex:1;min-height:0!important;align-items:center;padding:24px 0}
.food-web:fullscreen .fw-notice{margin-top:14px!important;max-width:100%!important}
.fw-start{min-height:320px;display:grid;place-items:center;text-align:center;color:#b9dbd8;font-size:clamp(18px,2vw,28px);padding:30px}
.fw-stage:has(.fw-start){display:block;min-height:360px}
.fw-stage:has(.fw-start) .fw-start{min-height:360px;width:100%}