/* Composants interactifs : parcours, donut, calculateur, engagements, cartes, corbeille, univers */

/* parcours d'une tasse */
.lc{position:relative;background:var(--white);border:1px solid var(--line);padding:clamp(20px,3vw,36px)}
.lc-line{position:absolute;left:calc(clamp(20px,3vw,36px) + 100% / 12 - clamp(20px,3vw,36px) / 6);right:calc(clamp(20px,3vw,36px) + 100% / 12 - clamp(20px,3vw,36px) / 6);top:calc(clamp(20px,3vw,36px) + 27px);height:2px;background:var(--line)}
.lc-line i{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .7s var(--ease)}
.lc-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr)}
.lc-steps button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 6px}
.lc-steps button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.lc-dot{width:56px;height:56px;display:grid;place-items:center;background:var(--white);border:1px solid var(--line-2);color:var(--soft);transition:all .4s var(--ease);margin-bottom:10px}
.lc-dot svg{width:24px;height:24px}
.lc-steps .done .lc-dot{border-color:var(--ink);color:var(--ink)}
.lc-steps [aria-selected=true] .lc-dot{background:var(--ink);border-color:var(--ink);color:var(--white);transform:scale(1.1)}
.lc-steps b{font-weight:500;font-size:15px;color:var(--ink)}
.lc-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line);min-height:150px}
.lc-panel.in>*{animation:monte .5s var(--ease) both}
.lc-panel.in>*+*{animation-delay:.08s}
@keyframes monte{from{opacity:0;transform:translateY(10px)}}
.lc-panel h3{font-size:clamp(26px,2.6vw,34px);font-weight:400;letter-spacing:-.03em;color:var(--ink);margin:8px 0}
.lc-panel p{color:var(--muted)}
.lc-panel ul{list-style:none;display:grid;gap:10px;align-content:start}
.lc-panel li{display:flex;gap:12px;font-size:15.5px;color:var(--ink)}
.lc-panel li svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--brass)}

/* donut */
.donut{position:relative;max-width:420px;justify-self:center;width:100%}
.donut svg{width:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:26}
.d-bg{stroke:var(--surface)}
.d-a{stroke:var(--espresso);stroke-dasharray:0 100;transition:stroke-dasharray 1.6s var(--ease)}
.d-b{stroke:var(--cream-d);stroke-dasharray:0 100;stroke-dashoffset:-40;transition:stroke-dasharray 1.6s var(--ease) .4s}
.donut.in .d-a{stroke-dasharray:39.4 100}
.donut.in .d-b{stroke-dasharray:59.4 100}
.donut figcaption{position:absolute;left:0;right:0;top:0;aspect-ratio:1/1;display:grid;place-content:center;text-align:center}
.donut figcaption b{font-size:clamp(34px,4vw,48px);font-weight:300;letter-spacing:-.04em;color:var(--ink)}
.donut figcaption span{font-size:14px;color:var(--muted);max-width:16ch}
.d-leg{list-style:none;display:grid;gap:8px;margin-top:16px;font-size:14px;color:var(--muted)}
.d-leg li{display:flex;gap:10px;align-items:center}
.d-leg i{width:12px;height:12px;flex:none}
.d-leg .a{background:var(--espresso)}.d-leg .b{background:var(--cream-d)}
.pef{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;margin-top:24px;padding:20px;border:1px solid var(--line);background:var(--white)}
.pef b{display:block;font-size:44px;font-weight:300;letter-spacing:-.04em;color:var(--ink);line-height:1.1}
.pef p{font-size:14px;color:var(--muted)}

/* calculateur d'impact (section sombre) */
.dark .duo p.txt{color:var(--muted-d)}
.dark .team b{color:var(--white)}
.dark .team>span,.dark .ticks{color:var(--muted-d)}
.dark .range::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--cream-d) var(--f),rgba(255,255,255,.18) var(--f))}
.dark .range::-moz-range-track{background:linear-gradient(90deg,var(--cream-d) var(--f),rgba(255,255,255,.18) var(--f))}
.dark .range::-webkit-slider-thumb{background:var(--espresso);border-color:var(--cream-d)}
.hyp{font-size:12.5px;color:#8E8E88;margin-top:18px}
.imp-out{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.imp-out>div{padding:24px 22px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.imp-out b{display:flex;align-items:baseline;font-size:clamp(32px,3.4vw,46px);font-weight:300;letter-spacing:-.04em;color:var(--white);line-height:1.1}
.imp-out b small{font-size:.45em;margin-left:.3em;color:var(--muted-d);letter-spacing:0}
.imp-out>div>span{font-size:14px;color:var(--muted-d)}

/* engagements */
.eng{display:grid;border-top:1px solid var(--ink)}
.eng-r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) 120px;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.eng-t b{display:block;font-weight:500;color:var(--ink)}
.eng-t span{font-size:13px;color:var(--brass);font-weight:500}
.eng-bar{position:relative;height:10px;background:var(--surface)}
.eng-bar i{position:absolute;left:0;top:0;bottom:0}
.eng-c{width:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.6s var(--ease) .2s}
.eng-b{width:calc(var(--base) * 100%);background:var(--cream-d);z-index:1;transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease)}
.eng-r.in .eng-c{transform:scaleX(var(--cible))}
.eng-r.in .eng-b{transform:scaleX(1)}
.eng-v{text-align:right}
.eng-v small{display:block;font-size:12.5px;color:var(--soft)}
.eng-v b{font-size:24px;font-weight:300;letter-spacing:-.03em;color:var(--ink)}

/* cartes retournables */
.flip-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.flip{all:unset;box-sizing:border-box;cursor:pointer;position:relative;min-height:190px;perspective:900px;display:block}
.flip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.flip .ff,.flip .fb{position:absolute;inset:0;padding:24px;backface-visibility:hidden;transition:transform .6s var(--ease);display:flex;flex-direction:column}
.flip .ff{background:var(--white);border:1px solid var(--line)}
.flip .ff svg{width:28px;height:28px;color:var(--ink);margin-bottom:auto}
.flip .ff b{font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.flip .ff small{font-size:13px;color:var(--brass);font-weight:500;margin-top:6px}
.flip .fb{background:var(--espresso);color:#ECECE8;transform:rotateY(180deg);justify-content:center;font-size:16px;line-height:1.5}
.flip[aria-pressed=true] .ff,.flip:hover .ff{transform:rotateY(-180deg)}
.flip[aria-pressed=true] .fb,.flip:hover .fb{transform:rotateY(0)}

/* certifications */
.certs-g{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.certs-g>div{padding:28px 22px;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;gap:6px;text-align:center;align-items:center}
.certs-g img{height:56px;width:auto;margin-bottom:10px}
.certs-g .big{font-size:40px;font-weight:300;letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin-bottom:8px}
.certs-g b{font-weight:500;color:var(--ink)}
.certs-g span{font-size:13.5px;color:var(--muted)}

/* corbeille de fruits */
.bx{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border:1px solid var(--line);background:var(--white)}
.bx-f{padding:clamp(24px,3.5vw,44px);border-right:1px solid var(--line);display:flex;flex-direction:column}
.bx-steps{display:flex;gap:6px;margin-bottom:26px}
.bx-steps span{flex:1;font-size:12.5px;color:var(--soft);padding-top:10px;border-top:2px solid var(--line);transition:all .3s}
.bx-steps span.on{color:var(--ink);border-color:var(--ink)}
.bx fieldset{border:0}
.bx legend{font-size:clamp(22px,2.2vw,28px);font-weight:400;letter-spacing:-.02em;color:var(--ink);margin-bottom:18px}
.bx legend.sub{font-size:15px;font-weight:500;letter-spacing:0;margin:24px 0 10px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.presets .chip{height:36px;padding:0 14px}
.days-q{margin-top:6px}
.npa-ok{font-size:14px;color:var(--ink);margin-top:10px;min-height:1.2em}
.bx-e{font-size:14px;color:var(--ink);margin-top:14px}
.bx-e:empty{display:none}
.bx-nav{display:flex;gap:10px;margin-top:auto;padding-top:28px}
.bx-nav .btn[type=submit]{flex:1}
.bx-done{text-align:center;padding:24px 0}
.bx-done .ok{width:60px;height:60px;margin:0 auto 18px;display:grid;place-items:center;background:var(--ink);color:var(--white)}
.bx-done .ok svg{width:28px;height:28px}
.bx-done h3{font-size:28px;font-weight:400;letter-spacing:-.03em;color:var(--ink)}
.bx-done p{color:var(--muted);margin-top:8px}
.bx-r{padding:clamp(24px,3.5vw,44px);background:var(--bg);display:flex;flex-direction:column;gap:10px}
.bx-r h3{font-size:30px;font-weight:400;letter-spacing:-.03em;color:var(--ink);margin-top:6px}
.bx-r>p:not(.eyebrow){color:var(--muted);font-size:14.5px}
.crate{position:relative;aspect-ratio:16/9;margin-top:10px;background:#DADAD5;padding:14px 14px 30px;border:3px solid #BDBDB7}
.crate::before{content:"";position:absolute;left:0;right:0;bottom:26px;height:3px;background:#BDBDB7}
.crate-in{display:flex;flex-wrap:wrap-reverse;align-content:flex-start;gap:4px;height:100%}
.crate-in i{width:calc(100% / 12 - 4px);aspect-ratio:1/1;border-radius:50%;background:var(--c);animation:tombe .5s var(--ease) both;animation-delay:var(--d)}
@keyframes tombe{from{opacity:0;transform:translateY(-30px) scale(.6)}}
.ifco{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:.12em;color:#85857F;text-transform:uppercase}
.bx-price{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0}
.bx-price>div{padding:14px 0}
.bx-price>div+div{padding-left:16px;border-left:1px solid var(--line)}
.bx-price b{display:block;font-size:26px;font-weight:300;letter-spacing:-.03em;color:var(--ink)}
.bx-price span{font-size:13px;color:var(--muted)}
.boxes{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.boxc{padding:24px 18px;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;gap:2px;transition:transform .4s var(--ease),border-color .3s}
.boxc:hover{transform:translateY(-4px);border-color:var(--ink)}
.boxc .bs{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--brass)}
.boxc b{font-size:34px;font-weight:300;letter-spacing:-.04em;color:var(--ink)}
.boxc span{font-size:14px;color:var(--muted)}
.boxc strong{font-weight:500;color:var(--ink);margin-top:14px;font-size:18px}
.boxc small{font-size:12.5px;color:var(--soft)}
.fruits-l{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fruits-l span{padding:14px 20px;background:var(--white);border:1px solid var(--line);font-size:17px;color:var(--ink);animation:monte .4s var(--ease) both;animation-delay:calc(var(--k) * 50ms)}

/* univers snacks */
.uni-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--white)}
.uni-tabs button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 12px;font-size:16px;font-weight:500;color:var(--muted);transition:all .25s}
.uni-tabs button+button{border-left:1px solid var(--line)}
.uni-tabs button svg{width:20px;height:20px}
.uni-tabs [aria-selected=true]{background:var(--ink);color:var(--white)}
.uni-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.uni-p{padding:28px 0 0;animation:monte .45s var(--ease)}
.uni-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.uni-c{padding:20px;border:1px solid var(--line);background:var(--white)}
.uni-c b{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.uni-c span{font-size:14px;color:var(--muted)}

@media (max-width:1100px){
  .boxes{grid-template-columns:repeat(3,1fr)}
  .certs-g{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .lc-steps{grid-template-columns:repeat(3,1fr);row-gap:20px}
  .lc-line{display:none}
  .lc-panel,.bx,.eng-r{grid-template-columns:1fr}
  .bx-f{border-right:0;border-bottom:1px solid var(--line)}
  .flip-g,.uni-g{grid-template-columns:1fr 1fr}
  .eng-r{gap:10px}
  .eng-v{text-align:left;display:flex;gap:12px;align-items:baseline}
}
@media (max-width:600px){
  .flip-g,.uni-g,.imp-out,.boxes{grid-template-columns:1fr}
  .uni-tabs{grid-template-columns:1fr}
  .uni-tabs button+button{border-left:0;border-top:1px solid var(--line)}
  .lc-steps b{font-size:13px}
  .lc-dot{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .crate-in i,.fruits-l span,.lc-panel.in>*{animation:none}
}
.lc-steps{grid-template-columns:repeat(7,1fr)}
.lc-line{left:calc(clamp(20px,3vw,36px) + 100% / 14);right:calc(clamp(20px,3vw,36px) + 100% / 14)}
@media (max-width:920px){.lc-steps{grid-template-columns:repeat(4,1fr)}}
.rank{list-style:none;display:grid;border-top:1px solid var(--ink)}
.rank li{display:grid;grid-template-columns:56px 1fr 72px;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.rank .rk{font-size:44px;font-weight:300;letter-spacing:-.04em;color:var(--ink);line-height:1}
.rank b{display:block;font-weight:500;font-size:18px;color:var(--ink)}
.rank div>span{font-size:14.5px;color:var(--muted)}
.lvl{display:flex;gap:4px;justify-content:flex-end}
.lvl i{width:16px;height:16px;border:1px solid var(--ink)}
.l3 i,.l2 i:nth-child(-n+2),.l1 i:first-child{background:var(--ink)}
.cmp-mode{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-d);margin:8px 0 22px}
.cmp-mode label{position:relative;cursor:pointer}
.cmp-mode input{position:absolute;opacity:0}
.cmp-mode span{display:block;padding:14px;text-align:center;font-size:14.5px;color:var(--muted-d);transition:all .25s}
.cmp-mode input:checked+span{background:var(--white);color:var(--ink)}
.cmp-mode input:focus-visible+span{outline:2px solid var(--white);outline-offset:-4px}
.imp-cert{grid-column:1/-1;display:flex;gap:10px;align-items:center;padding:16px 22px;font-size:14.5px;color:var(--white);border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.imp-cert svg{width:18px;height:18px;flex:none;color:var(--cream-d)}
.flip-g{grid-template-columns:repeat(3,1fr)}
.crate-n{position:absolute;right:10px;top:8px;font-size:13px;font-weight:600;color:var(--ink);background:var(--white);padding:2px 8px}
.crate-n:empty{display:none}
.bx .ticks{margin-bottom:4px}
.loop{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:lp}
.loop::before{content:"";position:absolute;left:12%;right:12%;top:74px;height:2px;background:linear-gradient(90deg,var(--brass),var(--brass)) 0 0/0 100% no-repeat,var(--line);transition:background-size 1.8s var(--ease) .3s}
.loop:has(.lp.in)::before{background-size:100% 100%}
.lp{position:relative;padding:24px;background:var(--white);border:1px solid var(--line)}
.lp svg{display:block;width:44px;height:44px;padding:10px;margin:14px 0 18px;background:var(--ink);color:var(--white)}
.lp h3{font-size:20px;font-weight:500;color:var(--ink);margin-bottom:6px}
.lp p{font-size:14.5px;color:var(--muted)}
.lp-q{margin-top:28px;padding:24px 28px;border-left:3px solid var(--brass);background:var(--white);font-size:clamp(18px,1.7vw,22px);line-height:1.45;color:var(--ink);font-weight:300}
.lp-q cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:var(--muted)}
@media (max-width:920px){.loop{grid-template-columns:1fr 1fr}.loop::before{display:none}}
@media (max-width:600px){.loop{grid-template-columns:1fr}}

.lc-steps [aria-selected=true] .lc-dot{color:var(--fluo)}
.lc-line i{background:var(--ink)}
.loop::before{background:linear-gradient(90deg,var(--ink),var(--ink)) 0 0/0 100% no-repeat,var(--line)}
.lp svg{color:var(--fluo)}
.lp-q{border-left-color:var(--fluo);border-left-width:4px}
.eng-c{background:var(--ink)}
.uni-tabs [aria-selected=true]{box-shadow:inset 0 -3px 0 var(--fluo)}
.cmp-mode input:checked+span{box-shadow:inset 0 -3px 0 var(--fluo)}
.rank .l3 i,.rank .l2 i:nth-child(-n+2),.rank .l1 i:first-child{background:var(--ink)}
.vend{align-items:start}
.vend-img{aspect-ratio:3/4;border:1px solid var(--line);background:var(--white)}
.vend-img .ph-mach svg{width:46%}
.vend .sec-head{grid-template-columns:1fr;gap:16px}
.vend .uni-tabs{grid-template-columns:1fr}
.vend .uni-tabs button+button{border-left:0;border-top:1px solid var(--line)}
.certs-g{grid-template-columns:repeat(5,1fr)}
.certs-g img{height:72px}
@media (max-width:1100px){.certs-g{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.certs-g{grid-template-columns:repeat(2,1fr)}}
/* Comparateur : les deux choix ont la même hauteur, la surbrillance blanche remplit toute la case */
.cmp-mode label{display:flex}
.cmp-mode span{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;line-height:1.35}