/* C—04 · Tenir à jour les catalogues de vos fournisseurs — maquettes de
   templates/landing/cas/catalogues-fournisseurs.html.twig.
   Trigrammes : cfr- (hero : l'intégration fournisseur IA et la vue grille « Produits ») et
   tf- (couches du trajet). Univers de démo neutre (tarif Lumessa 2026, devis #2051).
   Hero : .cfr[data-tl] → .k0…k13 (cumulatif) et [data-s="n"] (exact) ;
   trajet : [data-active="n"] (couche affichée) et .a0…a6 (étape jouée). */

.cfr-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* Vignette produit : dessin SVG teinté par --c (le coloris), comme la page Catalogue */
.cfr-th{position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 95% at 50% 18%,#33373E,#1A1D22 72%)}
.cfr-th svg{display:block;width:auto;height:var(--th,40px);color:var(--c,#C3C7CC);overflow:visible;filter:drop-shadow(0 5px 7px rgba(0,0,0,.5))}
.cfr-th::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.07) 48%,transparent 62%)}

/* ======================= Hero : le tarif traverse l'intégration IA ======================= */
.cfr{position:relative;width:1120px;height:700px;
  --ax:0px;   /* décalage des cibles calées à droite de la fenêtre d'import (mobile : -80px) */
  --hx:0px;   /* décalage des cibles centrées dans la fenêtre d'import (mobile : -40px) */
  --rx:0px}   /* décalage des cibles de la colonne « Produits » (mobile : la colonne se pose par-dessus) */
.cfr-body{position:absolute;inset:0}

/* La ligne du temps, au-dessus des écrans */
.cfr-when{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:6;display:grid;height:30px}
.cfr-when>span{grid-area:1/1;justify-self:center;display:inline-flex;align-items:center;gap:9px;height:30px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--bd-2);background:var(--bg-2);
  font-family:'Spline Sans Mono';font-size:11.5px;color:var(--tx);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .5s var(--ez)}
.cfr-when>span i{width:8px;height:8px;border-radius:50%;background:var(--wc,var(--c-catalogue));flex:none}
.cfr-when>span em{font-style:normal;color:var(--tx-2)}
.cfr-when .w4{--wc:var(--c-devis)}
.cfr[data-s="0"] .w0,.cfr[data-s="1"] .w0,.cfr[data-s="2"] .w0,.cfr[data-s="3"] .w0,
.cfr[data-s="4"] .w1,.cfr[data-s="5"] .w1,.cfr[data-s="6"] .w2,.cfr[data-s="7"] .w2,
.cfr[data-s="8"] .w3,.cfr[data-s="9"] .w3,.cfr[data-s="10"] .w3,
.cfr[data-s="11"] .w4,.cfr[data-s="12"] .w4,.cfr[data-s="13"] .w4{opacity:1;transform:none;transition-delay:.2s}
.cfr:not(.tl) .w4{opacity:1;transform:none}

/* --- La fenêtre de l'intégration fournisseur IA --- */
.cfr-si{position:absolute;left:0;top:52px;width:680px;height:640px}
.cfr-si-b{position:relative;display:flex;flex-direction:column;height:calc(100% - 46px);padding:14px 20px 16px}
.cfr-hd{display:flex;justify-content:space-between;align-items:center;height:32px;flex:none}
.cfr-hd .t{display:inline-flex;align-items:center;gap:9px;font-family:'Schibsted Grotesk';font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--tx)}
.cfr-hd .t .ico{width:17px;height:17px;color:var(--c-catalogue)}
.cfr-hd .mk-btn{height:28px;padding:0 10px;font-size:11px}

/* barre d'étapes réelle : 1 Upload Document · 2 Analyse IA · 3 Mapping Categories · 4 Preview & Import */
.cfr-steps{position:relative;flex:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;margin-top:14px;padding-bottom:12px}
.cfr-steps .st{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx-3);white-space:nowrap;transition:color .4s}
.cfr-steps .st b{position:relative;width:20px;height:20px;border-radius:50%;border:1px solid var(--bd-2);display:grid;place-items:center;font-family:'Spline Sans Mono';font-size:9.5px;font-weight:400;flex:none;
  transition:background .4s,color .4s,border-color .4s}
.cfr-steps .st b i{font-style:normal;transition:opacity .25s}
.cfr-steps .st b .ico{position:absolute;inset:4px;width:10px;height:10px;stroke-width:2.6;opacity:0;transition:opacity .25s}
.cfr-steps .rail{position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.cfr-steps .rail i{display:block;height:100%;background:var(--c-catalogue);transform-origin:0 50%;transform:scaleX(var(--rp,.125));transition:transform .9s var(--ez)}
.cfr.k4 .rail{--rp:.375}.cfr.k6 .rail{--rp:.625}.cfr.k8 .rail{--rp:.875}.cfr.k11 .rail{--rp:1}
/* étape en cours */
.cfr-steps .st.s1,.cfr.k4 .st.s2,.cfr.k6 .st.s3,.cfr.k8 .st.s4{color:var(--tx)}
.cfr-steps .st.s1 b,.cfr.k4 .st.s2 b,.cfr.k6 .st.s3 b,.cfr.k8 .st.s4 b{background:var(--tx);color:var(--bg);border-color:var(--tx)}
/* étape faite */
.cfr.k4 .st.s1 b,.cfr.k6 .st.s2 b,.cfr.k8 .st.s3 b,.cfr.k11 .st.s4 b{background:transparent;color:var(--c-catalogue);border-color:var(--c-catalogue)}
.cfr.k4 .st.s1 b i,.cfr.k6 .st.s2 b i,.cfr.k8 .st.s3 b i,.cfr.k11 .st.s4 b i{opacity:0}
.cfr.k4 .st.s1 b .ico,.cfr.k6 .st.s2 b .ico,.cfr.k8 .st.s3 b .ico,.cfr.k11 .st.s4 b .ico{opacity:1}
.cfr.k4 .st.s1,.cfr.k6 .st.s2,.cfr.k8 .st.s3{color:var(--tx-2)}

/* les quatre écrans de l'assistant, l'un après l'autre */
.cfr-pans{position:relative;flex:1;margin-top:14px;min-height:0}
.cfr .pan{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateX(18px);transition:opacity .45s var(--ez),transform .65s var(--ez);pointer-events:none}
.cfr .p1{opacity:1;transform:none}
.cfr.k4 .p2,.cfr.k6 .p3,.cfr.k8 .p4{opacity:1;transform:none;transition-delay:.3s}
/* (après la règle d'entrée : à k6, .k4 .p2 et .k6 .p2 ont la même force, la dernière gagne) */
.cfr.k4 .p1,.cfr.k6 .p2,.cfr.k8 .p3{opacity:0;transform:translateX(-18px);transition-delay:0s}
.cfr:not(.tl) .p1{opacity:0}
.cfr:not(.tl) .p4{opacity:1;transform:none}
.cfr-card{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;border:1px solid var(--bd);border-radius:12px;background:rgba(255,255,255,.015);padding:14px 16px}
.cfr-ct{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--tx);flex:none}
.cfr-ct .ico{width:15px;height:15px;color:var(--tx-2)}
.cfr-acts{display:flex;justify-content:flex-end;gap:8px;flex:none}
.cfr-acts .mk-btn{height:32px;padding:0 13px;font-size:12px;transition:background .3s,color .3s,border-color .3s,opacity .3s,transform .3s var(--ez-b)}

/* 1 — Upload Document */
.cfr-cp{font-size:12px;line-height:1.45;color:var(--tx-3);flex:none}
.cfr-drop{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 12px 22px;border:1.5px dashed var(--bd-2);border-radius:11px;background:rgba(255,255,255,.012);text-align:center;
  transition:border-color .4s,background .4s}
.cfr-drop .fi{width:28px;height:28px;fill:none;stroke:var(--tx-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;margin-bottom:3px}
.cfr-drop b{font-size:13px;font-weight:600;color:var(--tx)}
.cfr-drop small{font-size:11px;color:var(--tx-3)}
.cfr-drop .fm{margin-top:6px;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.cfr[data-s="1"] .cfr-drop{border-color:var(--c-catalogue);background:color-mix(in srgb,var(--c-catalogue) 6%,transparent);transition-delay:.55s}
.cfr-file{flex:none;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;border:1px solid var(--bd-2);background:var(--bg-3);
  opacity:0;transform:translate(46px,-34px) rotate(-2deg) scale(.96);transition:opacity .4s,transform .75s var(--ez-b)}
.cfr-file .xl{font-family:'Spline Sans Mono';font-size:9px;padding:4px 6px;border-radius:5px;background:var(--tx);color:var(--bg)}
.cfr-file .fn b{display:block;font-size:12.5px;font-weight:600;color:var(--tx)}
.cfr-file .fn small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.cfr-file .x{margin-left:auto;font-size:15px;color:var(--tx-3)}
.cfr.k1 .cfr-file{opacity:1;transform:none;transition-delay:.7s}
.cfr-fo{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.cfr-fo .lb{font-size:11.5px;color:var(--tx-2)}
.cfr-sel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;height:36px;padding:0 11px;border-radius:8px;border:1px solid var(--bd-2);background:var(--bg);font-size:12px;transition:border-color .4s,box-shadow .4s}
.cfr-sel .v{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.cfr-sel .v0{color:var(--tx-3)}
.cfr-sel .v1{opacity:0;color:var(--tx);font-weight:600}
.cfr-sel .ico{grid-column:2;width:12px;height:12px;color:var(--tx-3)}
.cfr[data-s="2"] .cfr-sel{border-color:var(--tx-2);box-shadow:0 0 0 3px rgba(255,255,255,.06);transition-delay:.7s}
.cfr.k2 .cfr-sel .v0{opacity:0;transition-delay:.85s}.cfr.k2 .cfr-sel .v1{opacity:1;transition-delay:.85s}
.cfr-b-an{opacity:.38}
.cfr.k2 .cfr-b-an{opacity:1;transition-delay:1s}
.cfr[data-s="3"] .cfr-b-an,.cfr[data-s="5"] .cfr-b-ex,.cfr[data-s="7"] .cfr-b-va,.cfr[data-s="9"] .cfr-b-dr,.cfr[data-s="10"] .cfr-b-im{transform:scale(.95);transition-delay:.8s}
.cfr[data-s="9"] .cfr-b-dr{background:rgba(255,255,255,.08);color:var(--tx)}

/* 2 — Résultat de l'analyse IA */
.cfr-det{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cfr-det>b{font-family:'Schibsted Grotesk';font-size:18px;font-weight:600;color:var(--tx)}
.cfr-det .cf{display:inline-flex;align-items:baseline;gap:7px;font-size:11.5px;color:var(--tx-2)}
.cfr-det .cf b{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.cfr-cb{flex:none}
.cfr-cb i{background:var(--c-catalogue);transition-duration:1.5s}
.cfr.k4 .cfr-cb i{--v:.87;transition-delay:.35s}
.cfr-tiles{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.cfr-tiles span{display:flex;align-items:center;gap:7px;height:36px;padding:0 9px;border-radius:8px;border:1px solid var(--bd);font-size:11px;color:var(--tx-3);white-space:nowrap;
  transition:color .35s,border-color .35s,background .35s}
.cfr-tiles .ico{width:12px;height:12px;flex:none}
.cfr-tiles .dot{width:11px;height:11px;border-radius:50%;flex:none;background:conic-gradient(#ECEDEF 0 33%,#8A8E96 0 66%,#3A3D44 0)}
.cfr-tiles span::after{content:"✓";margin-left:auto;font-size:10px;opacity:0;transition:opacity .3s;transition-delay:inherit}
.cfr.k4 .cfr-tiles span{color:var(--tx);border-color:var(--bd-2);background:rgba(255,255,255,.05);transition-delay:calc(var(--i) * 110ms + .6s)}
.cfr.k4 .cfr-tiles span::after{opacity:1}
.cfr.k4 .cfr-tiles .no{color:var(--tx-3);border-color:var(--bd-2);border-style:dashed;background:none}
.cfr.k4 .cfr-tiles .no::after{content:"—"}
.cfr-fm{flex:none;display:flex;flex-direction:column}
.cfr-fm .lb{font-size:12px;font-weight:600;color:var(--tx);margin-bottom:3px}
.cfr-fm .r{display:flex;justify-content:space-between;align-items:center;height:33px;border-bottom:1px solid rgba(255,255,255,.04);opacity:.2;transition:opacity .4s}
.cfr-fm .r:last-child{border-bottom:0}
.cfr-fm .r span{font-size:11.5px;color:var(--tx-3)}
.cfr-fm .r code{font-family:'Spline Sans Mono';font-size:11.5px;color:var(--c-catalogue)}
.cfr.k4 .cfr-fm .r{opacity:1;transition-delay:calc(var(--i) * 140ms + 1.3s)}

/* 3 — Mapping automatique des catégories */
.cfr-mt{flex:none}
.cfr-mt .mk-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) 92px 112px;gap:12px;padding:0 13px;height:52px}
.cfr-mt .mk-tr.h{height:30px}
.cfr-mt .mk-tr:not(.h){opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez)}
.cfr.k6 .cfr-mt .mk-tr{opacity:1;transform:none;transition-delay:calc(var(--i) * 200ms + .45s)}
.cfr-mt .t{font-weight:600}
.cfr-mt .c{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfr-mt .c.lo{color:var(--tx-3)}
.sim{display:flex;align-items:center;gap:7px}
.sim i{position:relative;width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden;flex:none}
.sim i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tx-2);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ez)}
.sim em{font-style:normal;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.cfr.k6 .cfr-mt .sim i::after{transform:scaleX(var(--v));transition-delay:calc(var(--i) * 200ms + .75s)}
.cfr-mt .m5 .sim i::after,.tf-mt .mk-tr:last-child .sim i::after{background:var(--tx-3)}
.cfr[data-s="7"] .cfr-mt .m2,.cfr[data-s="7"] .cfr-mt .m3,.cfr[data-s="7"] .cfr-mt .m4{background:rgba(255,255,255,.035);transition-delay:.9s}

/* 4 — Preview & Import */
.cfr-ps{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cfr-ps>div{border:1px solid var(--bd);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.cfr-ps>.z b{color:var(--tx-3)}
.cfr-ps b{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums;line-height:1.1}
.cfr-ps span{font-size:10.5px;color:var(--tx-3)}
.cfr-pz{position:relative;flex:1;min-height:0}
.cfr-pl{position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;transition:opacity .5s,transform .9s var(--ez);
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.cfr-pl .r{display:grid;grid-template-columns:104px minmax(0,1fr) auto 70px;gap:12px;align-items:center;height:34px;padding:0 11px;border-radius:8px;background:rgba(255,255,255,.025);font-size:12px}
.cfr-pl .rf{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.cfr-pl .nm{color:var(--tx);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfr-pl .pr{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-2)}
.cfr-pl .cn{font-size:10.5px;color:var(--tx-3);text-align:right;white-space:nowrap}
.cfr-res{position:absolute;z-index:1;left:0;right:0;top:0;display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:11px;border:1px solid var(--bd-2);background:var(--bg-3);
  opacity:0;transform:translateY(10px);transition:opacity .45s,transform .6s var(--ez-b),border-color .5s}
.cfr-res .h{display:flex;align-items:center;gap:10px}
.cfr-res .ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--tx-2);color:var(--tx-2);flex:none;transition:background .4s,color .4s,border-color .4s}
.cfr-res .ok .ico{width:13px;height:13px;stroke-width:2.4}
.cfr-res .sw{display:grid;font-size:14px;font-weight:600;color:var(--tx)}
.cfr-res .sw span{grid-area:1/1;transition:opacity .3s}
.cfr-res .r1{opacity:0}
.cfr-res .n{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cfr-res .n>div{border:1px solid var(--bd);border-radius:9px;padding:7px 11px;display:flex;align-items:baseline;gap:8px}
.cfr-res .n b{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums}
.cfr-res .n span{font-size:11px;color:var(--tx-2)}
.cfr-res .sim{display:block;max-height:18px;overflow:hidden;font-size:11px;color:var(--tx-3);transition:opacity .3s,max-height .45s var(--ez),margin .45s var(--ez)}
.cfr.k9 .cfr-pl{opacity:.45;transform:translateY(150px);transition-delay:.85s}
.cfr.k9 .cfr-res{opacity:1;transform:none;transition-delay:1s}
.cfr.k11 .cfr-res{border-color:var(--c-catalogue)}
.cfr.k11 .cfr-res .r0,.cfr.k11 .cfr-res .sim{opacity:0}
.cfr.k11 .cfr-res .sim{max-height:0;margin-top:-9px}
.cfr.k11 .cfr-res .r1{opacity:1;transition-delay:.1s}
.cfr.k11 .cfr-res .ok{background:var(--c-catalogue);border-color:var(--c-catalogue);color:#0A0B0D}
.cfr:not(.tl) .cfr-res{opacity:1;transform:none}
.cfr:not(.tl) .cfr-pl{opacity:.45;transform:translateY(150px)}

/* --- La voie entre l'import et le catalogue : trois lignes, comme la chaîne --- */
.cfr-lane{position:absolute;left:680px;top:52px;width:60px;height:640px;z-index:5;pointer-events:none}
.cfr-lane>i{position:absolute;left:0;right:0;height:1.5px;background:var(--bd-2);overflow:hidden}
.cfr-lane>i:nth-child(1){top:313px}.cfr-lane>i:nth-child(2){top:320px}.cfr-lane>i:nth-child(3){top:327px}
.cfr-lane>i::after{content:"";position:absolute;inset:0;background:var(--c-catalogue);transform:translateX(-101%)}
.cfr.k11 .cfr-lane>i::after{animation:cfr-sweep 1.2s var(--ez) .25s forwards}
@keyframes cfr-sweep{to{transform:none}}
.cfr-lane .cap{position:absolute;left:50%;top:320px;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px 0 9px;border-radius:12px;background:var(--c-catalogue);
  font-family:'Spline Sans Mono';font-size:10.5px;font-weight:500;color:#0A0B0D;white-space:nowrap;opacity:0;transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px var(--bg),0 18px 30px -12px rgba(0,0,0,.9)}
.cfr-lane .cap .ico{width:12px;height:12px;stroke-width:2}
.cfr.k11 .cfr-lane .cap{animation:cfr-cap 1.6s var(--ez) .2s forwards}
@keyframes cfr-cap{0%{opacity:0;transform:translate(calc(-50% - 120px),-50%) scale(.9)}14%{opacity:1;transform:translate(calc(-50% - 96px),-50%)}80%{opacity:1;transform:translate(calc(-50% + 96px),-50%)}100%{opacity:0;transform:translate(calc(-50% + 120px),-50%) scale(.9)}}

/* --- La colonne « catalogue » : la vue grille Produits, puis la ligne de coefficients ---
   Deux rangées de cartes visibles (--ch) : les deux nouveautés Lumessa + deux anciennes.
   Avant l'import, la grille est décalée d'une rangée (les nouveautés au-dessus, hors champ). */
.cfr-rc{position:absolute;left:740px;top:52px;width:380px;height:640px;--ch:200px}
.cfr-pr{position:relative;height:540px}
.cfr-pr-b{padding:12px 13px}
.cfr-kp{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.cfr-kp .k{display:flex;flex-direction:column;justify-content:center;gap:5px;height:50px;border:1px solid var(--bd);border-radius:10px;padding:0 12px;background:rgba(255,255,255,.015);transition:border-color .6s}
.cfr-kp .vv{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.cfr-kp b{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.013em;line-height:1;color:var(--tx);font-variant-numeric:tabular-nums}
.cfr-kp small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.cfr.k12 .cfr-kp .k:first-child{border-color:color-mix(in srgb,var(--c-catalogue) 55%,var(--bd))}
.cfr-gv{position:relative;height:calc(2 * var(--ch) + 10px);margin-top:10px;overflow:hidden}
.cfr-gs{display:flex;flex-direction:column;gap:10px;transform:translateY(calc(-1 * var(--ch) - 10px));transition:transform 1.1s var(--ez)}
.cfr.k12 .cfr-gs{transform:none;transition-delay:.15s}
.cfr:not(.tl) .cfr-gs{transform:none}
.cfr-gr{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:var(--ch)}
.cfr-gr.nw .cfr-pc{opacity:0;transition:opacity .6s,box-shadow .6s,border-color .6s}
.cfr.k12 .cfr-gr.nw .cfr-pc{opacity:1;transition-delay:.3s}
.cfr.k12 .cfr-gr.nw .c-spot{transition-delay:.45s}
.cfr:not(.tl) .cfr-gr.nw .cfr-pc{opacity:1}
.cfr[data-s="12"] .cfr-gr.nw .cfr-pc{border-color:color-mix(in srgb,var(--c-catalogue) 70%,transparent)}
.cfr.k13 .c-led{border-color:var(--c-catalogue);box-shadow:0 0 0 1px var(--c-catalogue),0 18px 40px -18px color-mix(in srgb,var(--c-catalogue) 55%,transparent)}
/* carte de la vue grille : vignette, catégorie, fournisseur, nom (2 lignes), attributs, prix */
.cfr-pc{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--bd-2);border-radius:11px;background:var(--bg-3);overflow:hidden}
.cfr-pt{position:relative;flex:none;height:76px;border-bottom:1px solid var(--bd)}
.cfr-pt .cfr-th{position:absolute;inset:0;--th:50px}
.cfr-pb{flex:1;min-height:0;display:flex;flex-direction:column;gap:2px;padding:7px 11px 3px}
.cfr-pb>*{flex:none}
.cfr-pb .cc{font-family:'Spline Sans Mono';font-size:8.5px;line-height:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfr-pb .sup{font-size:10.5px;line-height:13px;color:var(--tx-3);font-weight:500}
.cfr-pb .pn{font-size:12.5px;line-height:15px;min-height:30px;font-weight:600;color:var(--tx);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cfr-pb .at{display:flex;align-items:center;gap:4px;margin-top:auto;min-height:13px}
.cfr-pb .at i{width:11px;height:11px;border-radius:50%;background:var(--s);border:1px solid rgba(255,255,255,.22)}
.cfr-pb .at em{font-style:normal;font-family:'Spline Sans Mono';font-size:8.5px;line-height:11px;border:1px solid var(--bd-2);border-radius:3px;padding:0 4px;color:var(--tx-2);white-space:nowrap}
.cfr-pf{flex:none;display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--bd);padding:5px 10px 6px;line-height:1.2}
.cfr-pf small{display:block;font-family:'Spline Sans Mono';font-size:9px;line-height:11px;text-transform:uppercase;letter-spacing:0;color:#8C9099;white-space:nowrap}
.cfr-pf b{display:block;font-family:'Spline Sans Mono';font-variant-numeric:tabular-nums;font-size:15px;line-height:18px;font-weight:700;letter-spacing:-.01em;color:var(--tx);white-space:nowrap}
.cfr-pf .a b{font-size:12px;line-height:16px;color:var(--tx-2);font-weight:600}
.cfr-pf .v b{transition:color .4s}
.cfr.k13 .c-led .cfr-pf .v b{color:var(--c-catalogue);transition-delay:.9s}

/* la ligne « Dalles LED » des coefficients : là avant le tarif ; au bout, le calcul */
.cfr-eq{position:absolute;left:0;right:0;top:552px;height:88px;padding:11px 14px;display:flex;flex-direction:column;justify-content:space-between;background:var(--bg-2)}
.cfr-eq .h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cfr-eq .pal{display:flex;gap:4px}
.cfr-eq .pal span{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:2px 5px;border-radius:6px;border:1px solid var(--bd);font-family:'Spline Sans Mono';font-size:11.5px;color:var(--tx-2);
  transition:background .4s,color .4s,border-color .4s}
.cfr-eq .pal small{font-size:8px;color:var(--tx-3);transition:color .4s}
.cfr.k13 .cfr-eq .pal .on{background:var(--c-catalogue);border-color:var(--c-catalogue);color:#0A0B0D;transition-delay:.2s}
.cfr.k13 .cfr-eq .pal .on small{color:rgba(10,11,13,.6);transition-delay:.2s}
.cfr-eq .e{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cfr-eq .e small{font-size:11px;line-height:1.3;color:var(--tx-2)}
.cfr-eq .x{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap;font-size:14px;color:var(--tx-2);font-variant-numeric:tabular-nums;opacity:.18;transition:opacity .5s}
.cfr-eq .x .op{color:var(--tx-3)}
.cfr-eq .x b{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--tx);transition:color .4s}
.cfr.k13 .cfr-eq .x{opacity:1;transition-delay:.6s}
.cfr.k13 .cfr-eq .x b{color:var(--c-catalogue);transition-delay:.9s}
.cfr.k13 .cfr-eq{border-color:color-mix(in srgb,var(--c-catalogue) 50%,var(--bd-2));transition:border-color .5s .2s}
.cfr:not(.tl) .cfr-eq .x{opacity:1}

/* --- Curseur : une position par étape, coordonnées dans .cfr (1120 px de large) --- */
/* (cibles mesurées au banc : centres des boutons, de la zone de dépôt, du sélecteur, des prix) */
.cfr .mk-cur{--cx:calc(330px + var(--hx));--cy:700px}
.cfr.k1 .mk-cur{--cx:calc(340px + var(--hx));--cy:390px}
.cfr.k2 .mk-cur{--cx:calc(440px + var(--hx));--cy:564px}
.cfr.k3 .mk-cur{--cx:calc(588px + var(--ax));--cy:659px}
.cfr.k4 .mk-cur{--cx:calc(520px + var(--ax));--cy:470px}
.cfr.k5 .mk-cur{--cx:calc(599px + var(--ax));--cy:659px}
.cfr.k6 .mk-cur{--cx:calc(470px + var(--ax));--cy:452px}
.cfr.k7 .mk-cur{--cx:calc(600px + var(--ax));--cy:659px}
.cfr.k8 .mk-cur{--cx:calc(420px + var(--ax));--cy:540px}
.cfr.k9 .mk-cur{--cx:calc(455px + var(--ax));--cy:659px}
.cfr.k10 .mk-cur{--cx:calc(609px + var(--ax));--cy:659px}
.cfr.k11 .mk-cur{--cx:calc(640px + var(--ax));--cy:530px}
.cfr.k12 .mk-cur{--cx:calc(868px + var(--rx));--cy:222px}
.cfr.k13 .mk-cur{--cx:calc(800px + var(--rx));--cy:366px}
.cfr[data-s="2"] .mk-cur::after,.cfr[data-s="3"] .mk-cur::after,.cfr[data-s="5"] .mk-cur::after,.cfr[data-s="7"] .mk-cur::after,
.cfr[data-s="9"] .mk-cur::after,.cfr[data-s="10"] .mk-cur::after{animation:clk .55s var(--ez) .8s forwards}

/* --- Mobile : la maquette rognée (zoom plancher 0,56) ne montre que ~555 px de large à 390 px
   d'écran ; l'import tient sur 550 px et la colonne « catalogue » se pose par-dessus à la fin. --- */
@media(max-width:680px){
  .cfr{--ax:-130px;--hx:-65px;--rx:-570px}
  .cfr-si{width:550px}
  .cfr-lane{display:none}
  .cfr-when{left:275px}
  .cfr-steps .st{font-size:10px;gap:5px}
  .cfr-steps .st b{width:18px;height:18px}
  .cfr-rc{left:170px;z-index:8;opacity:0;transform:translateX(60px);transition:opacity .6s,transform .8s var(--ez)}
  .cfr-pr{box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.4)}
  .cfr-eq{box-shadow:0 30px 60px -24px rgba(0,0,0,.95)}
  .cfr.k11 .cfr-rc{opacity:1;transform:none;transition-delay:1.1s}
  .cfr:not(.tl) .cfr-rc{opacity:1;transform:none}
  .cfr-mt .mk-tr{grid-template-columns:minmax(0,1.4fr) minmax(0,1.3fr) 54px 100px;gap:8px;padding:0 10px}
  .cfr-mt .sim i{display:none}
  .cfr-pl .r{grid-template-columns:84px minmax(0,1fr) auto 62px;gap:10px}
}

/* ======================= Le trajet ======================= */
.cfr-tj .lay{gap:14px}

/* L0 — Julie dépose le fichier */
.tf-up{width:440px;padding:15px 17px;display:flex;flex-direction:column;gap:10px}
.tf-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:1.5px dashed var(--bd-2);border-radius:10px;text-align:center;transition:border-color .4s .3s,background .4s .3s}
.tf-drop .fi{width:22px;height:22px;fill:none;stroke:var(--tx-2);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tf-drop b{font-size:12px;font-weight:600}
.tf-drop small{font-family:'Spline Sans Mono';font-size:9px;color:var(--tx-3)}
.a0 .tf-drop{border-color:color-mix(in srgb,var(--c-catalogue) 70%,transparent);background:color-mix(in srgb,var(--c-catalogue) 5%,transparent)}
.tf-file{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;border:1px solid var(--bd-2);background:var(--bg-2);
  opacity:0;transform:translate(34px,-26px) rotate(-2deg);transition:opacity .4s,transform .75s var(--ez-b)}
.tf-file .xl{font-family:'Spline Sans Mono';font-size:8.5px;padding:3px 5px;border-radius:4px;background:var(--tx);color:var(--bg)}
.tf-file b{display:block;font-size:12px}
.tf-file small{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3)}
.a0 .tf-file{opacity:1;transform:none;transition-delay:.5s}
.tf-fo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
.tf-fo .lb{font-size:11px;color:var(--tx-2)}
.tf-sel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--bd-2);background:var(--bg);font-size:11.5px}
.tf-sel>span{grid-area:1/1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.tf-sel .v0{color:var(--tx-3)}
.tf-sel .v1{opacity:0;font-weight:600}
.tf-sel .ico{grid-column:2;width:12px;height:12px;color:var(--tx-3)}
.a0 .tf-sel .v0{opacity:0;transition-delay:1.3s}.a0 .tf-sel .v1{opacity:1;transition-delay:1.3s}
.tf-act{display:flex;justify-content:flex-end}
.tf-act .mk-btn{opacity:.38;transition:opacity .4s}
.a0 .tf-act .mk-btn{opacity:1;transition-delay:1.7s}

/* L1 — l'IA lit le fichier */
.tf-an{width:470px;padding:15px 17px;display:flex;flex-direction:column;gap:10px}
.tf-det{display:flex;justify-content:space-between;align-items:baseline}
.tf-det>b{font-family:'Schibsted Grotesk';font-size:17px;font-weight:600}
.tf-det span{font-size:11px;color:var(--tx-2)}
.tf-det span b{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--tx);margin-right:3px}
.tf-cb i{background:var(--c-catalogue);transition-duration:1.5s}
.a1 .tf-cb i{--v:.87}
.tf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tf-tiles span{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--bd);font-size:10.5px;color:var(--tx-3);white-space:nowrap;transition:color .35s,border-color .35s,background .35s}
.tf-tiles .ico{width:12px;height:12px;flex:none}
.tf-tiles .dot{width:11px;height:11px;border-radius:50%;flex:none;background:conic-gradient(#ECEDEF 0 33%,#8A8E96 0 66%,#3A3D44 0)}
.tf-tiles span::after{content:"✓";margin-left:auto;font-size:10px;opacity:0;transition:opacity .3s;transition-delay:inherit}
.a1 .tf-tiles span{color:var(--tx);border-color:var(--bd-2);background:rgba(255,255,255,.05);transition-delay:calc(var(--i) * 110ms + .5s)}
.a1 .tf-tiles span::after{opacity:1}
.a1 .tf-tiles .no{color:var(--tx-3);border-style:dashed;background:none}
.a1 .tf-tiles .no::after{content:"—"}
.tf-fm{display:flex;flex-direction:column;margin-top:2px}
.tf-fm .mk-lbl{margin-bottom:4px}
.tf-fm .r{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:10px;height:26px;border-top:1px solid var(--bd);opacity:.2;transition:opacity .4s}
.tf-fm .r span{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3)}
.tf-fm .r i{height:1px;background:linear-gradient(90deg,var(--bd-2),color-mix(in srgb,var(--c-catalogue) 60%,transparent));transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ez)}
.tf-fm .r code{font-family:'Spline Sans Mono';font-size:11px;color:var(--c-catalogue)}
.a1 .tf-fm .r{opacity:1;transition-delay:calc(var(--i) * 160ms + 1.3s)}
.a1 .tf-fm .r i{transform:none;transition-delay:calc(var(--i) * 160ms + 1.4s)}

/* L2 — mapping des catégories, puis les mappages enregistrés */
.tf-mp{width:540px;padding:14px 15px}
.tf-mt{margin-top:6px}
.tf-mt .mk-tr{grid-template-columns:minmax(0,1.25fr) minmax(0,1.35fr) 80px 96px;gap:10px;padding:0 11px;height:34px;font-size:11.5px}
.tf-mt .mk-tr.h{height:26px;font-size:8px}
.tf-mt .mk-tr:not(.h){opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ez),background .4s}
.a2 .tf-mt .mk-tr{opacity:1;transform:none;transition-delay:calc(var(--i) * 180ms + .3s)}
.tf-mt .t{font-weight:600}
.tf-mt .c{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-mt .c.lo{color:var(--tx-3)}
.tf-mt .sim i{width:30px}
.a2 .tf-mt .sim i::after{transform:scaleX(var(--v));transition-delay:calc(var(--i) * 180ms + .6s)}
.tf-mt .mk-chip{font-size:9px;padding:2px 7px}
.a2 .tf-mt .hl{background:color-mix(in srgb,var(--c-catalogue) 8%,transparent)}
.tf-sv{width:420px;padding:12px 15px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--ez)}
.a2 .tf-sv{opacity:1;transform:none;transition-delay:1.9s}
.tf-mc{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-2)}
.tf-mpg{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx-2);padding:6px 9px;border-radius:8px;border:1px solid var(--bd)}
.tf-mpg .ico{width:13px;height:13px;flex:none;color:var(--tx-3)}
.tf-mpg b{color:var(--tx);font-weight:600}
.tf-mpg.nw{border-color:color-mix(in srgb,var(--c-catalogue) 55%,transparent);border-style:dashed;color:var(--tx)}
.tf-mpg.nw .ico{color:var(--c-catalogue)}

/* L3 — la simulation, puis l'import */
.tf-rs{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.tf-sim,.tf-imp{padding:13px 14px;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .6s var(--ez-b),border-color .5s}
.a3 .tf-sim{opacity:1;transform:none;transition-delay:.2s}
.a3 .tf-imp{opacity:1;transform:none;transition-delay:1.4s;border-color:var(--c-catalogue)}
.tf-rh{display:flex;align-items:center;gap:9px}
.tf-rh b{font-size:13.5px}
.tf-rh .ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--tx-2);color:var(--tx-2);flex:none}
.tf-rh .ok .ico{width:13px;height:13px;stroke-width:2.2}
.tf-imp .tf-rh .ok{background:var(--c-catalogue);border-color:var(--c-catalogue);color:#0A0B0D}
.tf-n{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tf-n>div{display:flex;flex-direction:column;gap:1px;padding:6px 8px;border:1px solid var(--bd);border-radius:8px}
.tf-n b{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tf-n span{font-size:10px;color:var(--tx-2)}
.tf-note{font-size:10.5px;line-height:1.4;color:var(--tx-3)}
.tf-kp{width:540px;display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--ez)}
.a3 .tf-kp{opacity:1;transform:none;transition-delay:1.9s}
.tf-kp .k{display:flex;flex-direction:column;gap:6px;padding:11px 14px 12px;border:1px solid var(--bd-2);border-radius:11px;background:var(--bg-2)}
.tf-kp b{font-family:var(--disp);font-size:32px;font-weight:600;letter-spacing:-.016em;line-height:1}
.tf-kp small{font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
/* ce qui filtre la liste : la pastille « Tous », puis le champ « Fournisseur » de « Filtres » */
.tf-fl{display:flex;align-items:center;height:26px;margin-bottom:4px}
.tf-fl .ch{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:99px;background:var(--tx);color:var(--bg);font-size:11px;font-weight:600}
.tf-fl .fi{display:inline-flex;align-items:center;gap:9px;height:26px;padding:0 10px;border-radius:7px;border:1px solid var(--bd-2);background:var(--bg);font-size:11.5px;font-weight:600;color:var(--tx)}
.tf-fl .fi em{font-style:normal;font-weight:500;font-size:10.5px;color:var(--tx-3)}
.a3 .tf-fl .fi{border-color:color-mix(in srgb,var(--c-catalogue) 60%,var(--bd-2));transition:border-color .5s 2.2s}

/* L4 — les coefficients de la sous-catégorie donnent le prix de vente */
.tf-cf{width:500px;padding:14px 16px}
.tf-cg{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));margin-top:8px;border:1px solid var(--bd);border-radius:9px;overflow:hidden;font-size:12px}
.tf-cg>span{display:flex;align-items:center;height:32px;padding:0 10px;border-top:1px solid var(--bd);font-variant-numeric:tabular-nums;color:var(--tx-2);transition:background .4s,color .4s}
.tf-cg .hd{border-top:0;height:26px;font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.tf-cg .gp{font-weight:600;color:var(--tx)}
.tf-cg .gx{grid-column:span 4;font-family:'Spline Sans Mono';font-size:10px;color:var(--tx-3)}
.tf-cg .sb{padding-left:24px;color:var(--tx)}
.a4 .tf-cg .q1{background:var(--c-catalogue);color:#0A0B0D;font-weight:600;transition-delay:.5s}
.a4 .tf-cg .q2{background:var(--c-catalogue);color:#0A0B0D;font-weight:600;transition-delay:1.1s}
.tf-pcs{width:500px;display:flex;flex-direction:column;gap:8px}
.tf-pc{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 8px 8px;
  opacity:0;transform:translateX(-12px);transition:opacity .45s,transform .6s var(--ez)}
.a4 .tf-pc{opacity:1;transform:none;transition-delay:calc(var(--i) * 600ms + .5s)}
.tf-pc .cfr-th{width:52px;height:42px;border-radius:8px}
.tf-pc .t{font-size:12.5px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-pc .t small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;font-weight:400;color:var(--tx-3);margin-top:2px}
.tf-pc .eq{display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--tx-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.tf-pc .eq .op{color:var(--tx-3)}
.tf-pc .eq b{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--tx)}
.tf-pcl{font-family:'Spline Sans Mono';font-size:9.5px;color:var(--tx-3);text-align:center;margin-top:2px}

/* L5 — Marc demande à AVA (îlot clair : papier et orange AVA, comme la page AVA) */
.tf-ava{width:420px;border-radius:16px;background:#FAFAF8;color:#16130F;border:1px solid rgba(22,19,15,.1);overflow:hidden;
  --bd:rgba(22,19,15,.1);--bd-2:rgba(22,19,15,.16);--tx:#16130F;--tx-2:#5E574E;--tx-3:#8A8277;--av:#F97316}
.tf-ah{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--bd);background:#fff}
.tf-wav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#FFF4EA;border:1px solid rgba(249,115,22,.25)}
.tf-ah .tw b{display:block;font-size:13px;font-weight:600}
.tf-ah .tw small{font-size:10.5px;color:var(--tx-3)}
.tf-th{display:flex;flex-direction:column;gap:9px;padding:14px}
.tf-u{align-self:flex-end;max-width:86%;min-height:33px;background:#18181B;color:#fff;font-size:12px;font-weight:500;line-height:1.4;padding:8px 13px;border-radius:15px 15px 4px 15px}
.tf-ac{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:13px;border:1px solid var(--bd);background:#fff;font-size:11px;font-weight:500;white-space:nowrap;
  opacity:0;transform:translateY(6px);transition:opacity .35s,transform .45s var(--ez-b)}
.tf-ac .i .ico{width:12px;height:12px;color:var(--av)}
.tf-ac .s{position:relative;width:14px;height:14px;flex:none}
.tf-ac .spin{position:absolute;inset:1px;border-radius:50%;border:1.6px solid rgba(249,115,22,.25);border-top-color:var(--av);animation:tf-spin .8s linear infinite;transition:opacity .2s}
.tf-ac .s .ico{position:absolute;inset:0;width:14px;height:14px;stroke-width:2.6;color:var(--tx);opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s var(--ez-b)}
@keyframes tf-spin{to{transform:rotate(360deg)}}
.a5 .tf-ac{opacity:1;transform:none;transition-delay:1.7s}
.a5 .tf-ac .spin{opacity:0;transition-delay:2.6s}
.a5 .tf-ac .s .ico{opacity:1;transform:none;transition-delay:2.65s}
.tf-a{align-self:flex-start;max-width:100%;background:#fff;border:1px solid var(--bd);border-radius:15px 15px 15px 4px;padding:10px 11px;font-size:12px;
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .55s var(--ez-b)}
.tf-a p{margin-bottom:8px}
.a5 .tf-a{opacity:1;transform:none;transition-delay:3s}
.tf-pw{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px 10px;align-items:center;padding:7px;border:1px solid var(--bd);border-radius:11px;background:#fff}
.tf-pw .im{grid-row:1 / span 2;width:48px;height:44px;border-radius:8px;overflow:hidden}
.tf-pw .im .cfr-th{width:100%;height:100%}
.tf-pw .bd b{display:block;font-size:12px;font-weight:600}
.tf-pw .pr{font-size:11px;color:var(--tx-2)}
.tf-pw .pr b{display:inline;color:var(--tx)}
.tf-pw .cta{justify-self:start;font-size:10.5px;font-weight:600;color:#C2410C;border:1px solid rgba(249,115,22,.4);border-radius:7px;padding:3px 9px}

/* L6 — lun. 28/09, le devis #2051 prend la dalle au bon prix */
.tf-dv{width:500px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.tf-ln{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px}
.tf-ln .cfr-th{width:44px;height:38px;border-radius:8px}
.tf-ln .t{font-size:13px;font-weight:600}
.tf-ln .t small{display:block;font-family:'Spline Sans Mono';font-size:9.5px;font-weight:400;color:var(--tx-3);margin-top:2px}
.tf-ln .q{display:flex;flex-direction:column;align-items:flex-end}
.tf-ln .q small{font-family:'Spline Sans Mono';font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
.tf-ln .q b{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1}
.tf-pal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tf-pal span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:9px;border:1px solid var(--bd);font-family:'Spline Sans Mono';font-size:14px;color:var(--tx-2);
  transition:background .45s,color .45s,border-color .45s,transform .5s var(--ez-b)}
.tf-pal small{font-size:8.5px;color:var(--tx-3);transition:color .45s}
.a6 .tf-pal .on{background:var(--c-devis);border-color:var(--c-devis);color:#0A0B0D;font-weight:600;transform:translateY(-2px);transition-delay:.5s}
.a6 .tf-pal .on small{color:rgba(10,11,13,.6);transition-delay:.5s}
.tf-pa{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:10px;border-top:1px solid var(--bd)}
.tf-pa .c{display:flex;flex-direction:column;align-items:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tx)}
.tf-pa .c small{font-family:'Spline Sans Mono';font-size:8.5px;font-weight:400;color:var(--tx-3);margin-top:2px}
.tf-pa .c.b{padding:4px 9px;border-radius:8px;border:1px solid var(--bd-2)}
.tf-pa .op{color:var(--tx-3)}
.tf-eq{display:flex;align-items:baseline;gap:12px;font-size:22px;color:var(--tx-2);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--ez)}
.a6 .tf-eq{opacity:1;transform:none;transition-delay:1.2s}
.tf-eq .op{color:var(--tx-3)}
.tf-eq b{font-family:var(--disp);font-size:40px;font-weight:600;letter-spacing:-.013em;color:var(--tx)}
.tf-eq small{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--tx-3)}

/* Lien vers la suite du devis #2051 (cas C—01) */
.cfr-nx .ico{width:12px;height:12px;margin-left:2px}

/* Tailles des dessins produit selon leur vignette */
.tf-pc .cfr-th{--th:36px}
.tf-pw .im .cfr-th{--th:36px}
.tf-ln .cfr-th{--th:32px}

/* Petits téléphones (≤ 374 px : ~466 px visibles) : l'import sur 470 px, la colonne « catalogue » à 90 px */
@media(max-width:374px){
  .cfr{--ax:-200px;--hx:-105px;--rx:-650px}
  .cfr[data-s="2"] .mk-cur{--cx:300px}
  .cfr[data-s="9"] .mk-cur{--cx:272px}
  .cfr-si{width:470px}
  .cfr-when{left:235px}
  .cfr-when>span em{display:none}
  .cfr-si-b{padding:12px 14px 14px}
  .cfr-steps .st{font-size:8.6px;gap:4px}
  .cfr-steps .st b{width:16px;height:16px;font-size:8.5px}
  .cfr-steps .st b .ico{inset:3px}
  .cfr-rc{left:90px}
  .cfr-mt .mk-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) 46px 96px;gap:6px;padding:0 8px;font-size:11px}
  .cfr-tiles span{padding:0 6px;font-size:10px;gap:5px}
  .cfr-fo{grid-template-columns:minmax(0,1fr)}
  .cfr-fo .lb{display:none}
  .cfr-acts .mk-btn{padding:0 10px;font-size:11px}
  .cfr-pl .r{grid-template-columns:80px minmax(0,1fr) auto;gap:8px}
  .cfr-pl .cn{display:none}
}
@media(max-width:374px){.cfr-mt .mk-tr.h{font-size:7px;letter-spacing:.04em}.cfr-mt .mk-tr.h span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
/* Le signe ÷ doit se lire même réduit (sur téléphone, le panneau est zoomé à ~0,5) */
.tf-pc .eq .op,.cfr-eq .x .op,.tf-eq .op,.tf-pa .op{font-size:1.25em;line-height:1;color:var(--tx-2)}