/* GÉNÉRÉ par scripts/catalogue-ui-css.py depuis Refontes/design_handoff_catalogue/cat.css.
   Ne pas modifier à la main : modifier le script, puis le relancer. Classes préfixées cg-, tout sous .cg. */
.cg{--paper:#FFFDF4;--cream:#FFF8EA;--cream2:#FCEFD9;--ink:#2A211B;--ink2:#6A5C4C;--mut:#806B50;--muted:#9C8B79;--line:#EEDFC2;--line2:#E6D3AE;
--orange:#F0682F;--orange-d:#DA541E;--orange-dd:#B8410F;--orange-bg:#FCE3D8;--green:#33A15B;--green-dd:#2F6147;--green-bg:#E6F3E9;--sun:#FFC53D;--sun-bg:#FFF1D2;--sun-d:#8A5A00;--hl:#FFE27A;--pink:#D9416E;--pink-d:#B02E57;--pink-bg:#FCE4EE;--blue:#2F7A93;--blue-bg:#E3EEF2;--cab:#5B3FB0;--cab-bg:#F0ECFA;--dark:#33261B;
--fd:"Bricolage Grotesque",system-ui,sans-serif;--fb:"Hanken Grotesk",system-ui,sans-serif;--fh:"Caveat",cursive;--spring:cubic-bezier(.3,1.35,.45,1);--soft:cubic-bezier(.2,.8,.2,1)}
.cg *,.cg *::before,.cg *::after{box-sizing:border-box}
.cg .cg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cg .cg-ico{display:inline-grid;place-items:center;flex:none}
.cg .cg-ico svg{display:block}
.cg .cg-rh{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cg .cg-rh h1{font:800 clamp(30px,3.6vw,42px)/1.05 var(--fd);letter-spacing:-.03em}
.cg .cg-rh .cg-k{display:block;font:700 22px/1 var(--fh);color:var(--orange-dd);rotate:-2deg;margin-bottom:6px}
.cg .cg-segs{position:relative;display:flex;gap:3px;padding:4px;border-radius:999px;background:var(--cream);border:1.5px solid var(--line);margin-left:auto}
.cg .cg-segs button{position:relative;z-index:1;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:none;cursor:pointer;font:700 14.5px var(--fb);color:var(--ink2);white-space:nowrap;transition:color .25s}
.cg .cg-segs button[aria-selected="true"]{color:#fff}
.cg .cg-knob{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--ink);transition:left .45s var(--spring),width .45s var(--spring)}
.cg .cg-bar{position:sticky;top:68px;z-index:20;margin:0 -8px;padding:10px 8px 8px;background:linear-gradient(var(--paper) 82%,rgba(255,253,244,0))}
.cg .cg-sr2{display:flex;gap:10px;align-items:center}
.cg .cg-sbox{position:relative;flex:1;min-width:0}
.cg .cg-sbox>.cg-ico{position:absolute;left:18px;top:50%;translate:0 -50%;color:var(--mut);pointer-events:none}
.cg .cg-sinp{width:100%;height:56px;padding:0 48px 0 50px;border-radius:999px;border:2px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font:600 16.5px var(--fb);outline:none;transition:box-shadow .2s}
.cg .cg-sinp:focus{box-shadow:0 4px 0 var(--ink),0 0 0 6px var(--hl)}
.cg .cg-sinp::placeholder{color:var(--muted);font-weight:500}
.cg .cg-sclr{position:absolute;right:8px;top:50%;translate:0 -50%;width:40px;height:40px;border:0;border-radius:50%;background:var(--cream);cursor:pointer;display:grid;place-items:center}
.cg .cg-fbtn{flex:none;display:inline-flex;align-items:center;gap:8px;height:56px;padding:0 18px;border-radius:999px;border:2px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);cursor:pointer;font:800 15px var(--fd);transition:transform .2s var(--spring)}
.cg .cg-fbtn:hover{transform:translateY(-2px)}
.cg .cg-fbtn .cg-n{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--orange);color:#fff;font:800 12px/22px var(--fd);text-align:center}
.cg .cg-qk{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cg .cg-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font:700 14px var(--fb);color:var(--ink);white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .3s var(--spring)}
.cg .cg-chip:hover{border-color:var(--ink2)}
.cg .cg-chip:active{transform:scale(.95)}
.cg .cg-chip .cg-ico{color:var(--c,var(--orange-dd))}
.cg .cg-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cg .cg-chip[aria-pressed="true"] .cg-ico{color:var(--sun)}
.cg .cg-chip.cg-pm{border-color:transparent;background:var(--green-bg);color:var(--green-dd)}
.cg .cg-chip.cg-pm .cg-sw{width:30px;height:18px;border-radius:999px;background:var(--line2);position:relative;transition:background-color .25s}
.cg .cg-chip.cg-pm .cg-sw::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .35s var(--spring)}
.cg .cg-chip.cg-pm[aria-pressed="true"]{background:var(--green-bg);color:var(--green-dd)}
.cg .cg-chip.cg-pm[aria-pressed="true"] .cg-sw{background:var(--green)}
.cg .cg-chip.cg-pm[aria-pressed="true"] .cg-sw::after{transform:translateX(12px)}
.cg .cg-chip.cg-pm[aria-pressed="false"]{background:#fff;border-color:var(--line2);color:var(--ink2)}
.cg .cg-chip.cg-lock{cursor:default;background:var(--cab-bg);color:var(--cab);border-color:transparent}
.cg .cg-chip.cg-lock .cg-ico{color:var(--cab)}
.cg .cg-sum{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:14px 0 10px}
.cg .cg-cnt{font:800 22px var(--fd);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cg .cg-cnt span{display:inline-block}
.cg .cg-pmline{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--fb);color:var(--ink2)}
.cg .cg-pmline b{color:var(--green-dd)}
.cg .cg-pmline button{border:0;background:none;padding:6px 2px;font:700 14px var(--fb);color:var(--orange-dd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cg .cg-pmline.cg-off b{color:var(--pink-d)}
.cg .cg-sort{margin-left:auto;display:flex;align-items:center;gap:6px;font:600 14px var(--fb);color:var(--mut)}
.cg .cg-sort select{min-height:40px;padding:0 34px 0 12px;border-radius:12px;border:1.5px solid var(--line2);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A5C4C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/15px;appearance:none;font:700 14px var(--fb);color:var(--ink);cursor:pointer}
.cg .cg-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.cg .cg-ap{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 6px 0 12px;border-radius:999px;background:var(--cream);border:1.5px solid var(--line);font:700 13px var(--fb);cursor:pointer;animation:cg-pin .35s var(--spring)}
.cg .cg-ap .cg-x{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;transition:background-color .2s}
.cg .cg-ap:hover .cg-x{background:var(--ink);color:#fff}
.cg .cg-ap.cg-av{background:var(--green-bg);border-color:#C7DCCD;color:var(--green-dd)}
.cg .cg-ap.cg-sv{background:var(--pink-bg);border-color:#F2C2D2;color:var(--pink-d)}
.cg .cg-clr{border:0;background:none;padding:6px 4px;font:700 13.5px var(--fb);color:var(--orange-dd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@keyframes cg-pin{from{transform:scale(.6);opacity:0}}
.cg .cg-fix{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 14px;border-radius:16px;background:var(--sun-bg);font:600 14.5px var(--fb)}
.cg .cg-fix button{border:0;background:none;padding:0;font:800 14.5px var(--fd);color:var(--orange-dd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cg .cg-fix .cg-hand{font:700 19px/1 var(--fh);color:var(--sun-d)}
.cg .cg-offl{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:16px;background:var(--blue-bg);color:#1F5567;font:600 14px var(--fb)}
.cg .cg-sug{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:40;padding:8px;border-radius:22px;background:#fff;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink),0 30px 50px -24px rgba(60,30,10,.5);max-height:min(460px,70vh);overflow:auto;animation:cg-sgin .25s var(--spring)}
@keyframes cg-sgin{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.cg .cg-sug h4{padding:8px 10px 4px;font:800 11px var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.cg .cg-sug button{width:100%;display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 10px;border:0;border-radius:14px;background:none;cursor:pointer;text-align:left;font:600 15px var(--fb)}
.cg .cg-sug button.cg-on,.cg .cg-sug button:hover{background:var(--cream)}
.cg .cg-sug .cg-th{width:38px;height:38px;border-radius:11px;overflow:hidden;flex:none;display:grid;place-items:center;background:var(--tint)}
.cg .cg-sug .cg-th img{width:100%;height:100%;object-fit:cover}
.cg .cg-sug .cg-th svg{width:30px;height:30px}
.cg .cg-sug mark{background:var(--hl);border-radius:3px;padding:0 1px;color:inherit}
.cg .cg-sug small{margin-left:auto;font:700 12px var(--fb);color:var(--mut);white-space:nowrap}
.cg .cg-sug .cg-pa{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none}
.cg .cg-sug .cg-pa.cg-av{background:var(--green-bg);color:var(--green-dd)}
.cg .cg-sug .cg-pa.cg-sv{background:var(--pink-bg);color:var(--pink-d)}
.cg .cg-sug .cg-two{display:flex;gap:6px;margin-left:auto}
.cg .cg-sug .cg-two button{width:auto;min-height:36px;padding:0 12px;border-radius:999px;font:700 13px var(--fb);border:1.5px solid var(--line2)}
.cg .cg-sug .cg-two .cg-a{color:var(--green-dd)}
.cg .cg-sug .cg-two .cg-s{color:var(--pink-d)}
.cg .cg-sug .cg-fx2{padding:8px 10px;font:600 14px var(--fb);color:var(--ink2)}
.cg .cg-sug .cg-fx2 button{display:inline;width:auto;min-height:0;padding:0;font:800 14px var(--fd);color:var(--orange-dd);text-decoration:underline;text-underline-offset:3px}
.cg .cg-sug .cg-fx2 button:hover{background:none}
.cg .cg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}
.cg .cg-card{position:relative;display:flex;flex-direction:column;border-radius:24px;background:#fff;border:1.5px solid var(--line);cursor:pointer;transition:transform .35s var(--spring),box-shadow .3s,border-color .2s}
.cg .cg-card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:var(--line2);box-shadow:0 18px 30px -20px rgba(120,60,20,.5)}
.cg .cg-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.cg .cg-card.cg-in{animation:cg-cin .5s var(--spring) both;animation-delay:calc(var(--k) * 35ms)}
@keyframes cg-cin{from{opacity:0;transform:translateY(16px) scale(.97)}}
.cg .cg-pic{position:relative;aspect-ratio:4/3;margin:6px 6px 0;border-radius:19px;overflow:hidden;background:var(--tint,var(--cream))}
.cg .cg-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--soft)}
.cg .cg-card:hover .cg-pic img{transform:scale(1.06)}
.cg .cg-ved{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.75) 0 30%,rgba(255,255,255,0) 31%),radial-gradient(circle at 18% 22%,rgba(255,255,255,.5) 0 3px,transparent 4px),radial-gradient(circle at 82% 74%,rgba(255,255,255,.5) 0 4px,transparent 5px),var(--tint)}
.cg .cg-ved::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(42,33,27,.12)}
.cg .cg-ved svg{position:relative;width:46%;height:auto;transition:transform .6s var(--spring)}
.cg .cg-card:hover .cg-ved svg{transform:rotate(-8deg) scale(1.08)}
.cg .cg-star{position:absolute;right:8px;top:8px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 3px 10px -4px rgba(60,30,10,.45);cursor:pointer;display:grid;place-items:center;color:var(--ink2);transition:transform .3s var(--spring),color .2s}
.cg .cg-star:hover{transform:scale(1.1)}
.cg .cg-star[aria-pressed="true"]{color:var(--sun)}
.cg .cg-star[aria-pressed="true"] svg{fill:var(--sun);stroke:var(--sun-d)}
.cg .cg-star.cg-pop{animation:cg-spop .55s var(--spring)}
@keyframes cg-spop{30%{transform:scale(1.35) rotate(-14deg)}}
.cg .cg-vers{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.94);font:800 12px var(--fb);color:var(--ink)}
.cg .cg-warn{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--pink-d);color:#fff;font:800 12px var(--fb)}
.cg .cg-card.cg-ko .cg-pic img,.cg .cg-card.cg-ko .cg-ved{filter:grayscale(.55) opacity(.75)}
.cg .cg-bd{display:flex;flex-direction:column;gap:8px;flex:1;padding:12px 14px 14px}
.cg .cg-nm{font:800 16.5px/1.25 var(--fd);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.cg .cg-nm mark{background:var(--hl);border-radius:3px;color:inherit;padding:0 1px}
.cg .cg-mt{display:flex;flex-wrap:wrap;gap:4px 12px;font:700 13px var(--fb);color:var(--ink2);font-variant-numeric:tabular-nums}
.cg .cg-mt span{display:inline-flex;align-items:center;gap:4px}
.cg .cg-mt .cg-ico{color:var(--mut)}
.cg .cg-tg{display:flex;flex-wrap:wrap;gap:5px}
.cg .cg-tg span{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 9px;border-radius:999px;background:var(--b,var(--cream));color:var(--c,var(--ink2));font:700 12px var(--fb)}
.cg .cg-ft{margin-top:auto;display:flex;align-items:center;gap:8px;padding-top:4px}
.cg .cg-go{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font:800 14px var(--fd);transition:background-color .2s,border-color .2s,transform .25s var(--spring)}
.cg .cg-go:hover{border-color:var(--ink);transform:translateY(-1px)}
.cg .cg-go.cg-pick{flex:1;border:0;background:var(--orange);color:#fff;box-shadow:0 4px 0 var(--orange-d)}
.cg .cg-go.cg-pick:hover{box-shadow:0 6px 0 var(--orange-d);transform:translateY(-2px)}
.cg .cg-go.cg-pick:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-d)}
.cg .cg-ft .cg-lv{font:700 12px var(--fb);color:var(--mut);display:inline-flex;align-items:center;gap:4px}
.cg .cg-pk{display:flex;flex-wrap:wrap;gap:5px}
.cg .cg-pk span{display:inline-flex;align-items:center;gap:4px;min-height:24px;padding:0 9px;border-radius:999px;font:800 12px var(--fb)}
.cg .cg-pk .cg-in{background:var(--green-bg);color:var(--green-dd)}
.cg .cg-pk .cg-out{background:var(--orange-bg);color:var(--orange-dd)}
.cg .cg-pk .cg-rec{background:var(--sun-bg);color:var(--sun-d)}
.cg .cg-sk{border-radius:24px;background:#fff;border:1.5px solid var(--line);padding:6px 6px 14px;display:grid;gap:10px}
.cg .cg-sk i{display:block;border-radius:12px;background:linear-gradient(90deg,var(--cream2),#FFF9EE,var(--cream2));background-size:200% 100%;animation:cg-shim 1.3s linear infinite}
.cg .cg-sk i:first-child{aspect-ratio:4/3;border-radius:19px}
.cg .cg-sk i:nth-child(2){height:16px;margin:0 8px;width:80%}
.cg .cg-sk i:nth-child(3){height:12px;margin:0 8px;width:50%}
.cg .cg-sk i:nth-child(4){height:40px;margin:0 8px;border-radius:999px;width:60%}
@keyframes cg-shim{to{background-position:-200% 0}}
.cg .cg-load{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:14px 18px;border-radius:20px;background:var(--cream)}
.cg .cg-load .cg-pp{width:52px;height:52px;flex:none}
.cg .cg-load .cg-pp svg{width:100%;height:100%}
.cg .cg-load b{display:block;font:800 16px var(--fd)}
.cg .cg-load .cg-pb{height:8px;border-radius:9px;background:#fff;margin-top:8px;overflow:hidden;width:min(320px,60vw)}
.cg .cg-load .cg-pb i{display:block;height:100%;width:0;background:var(--orange);border-radius:9px;transition:width .3s}
.cg .cg-more{display:grid;justify-items:center;gap:10px;margin-top:28px}
.cg .cg-more small{font:600 13.5px var(--fb);color:var(--mut)}
.cg .cg-more .cg-pg{width:min(280px,70%);height:6px;border-radius:9px;background:var(--cream2);overflow:hidden}
.cg .cg-more .cg-pg i{display:block;height:100%;background:var(--ink);border-radius:9px;transition:width .5s var(--soft)}
.cg .cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 24px;border-radius:999px;border:0;background:var(--orange);color:#fff;font:800 16px var(--fd);cursor:pointer;box-shadow:0 4px 0 var(--orange-d);transition:transform .25s var(--spring),box-shadow .2s}
.cg .cg-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--orange-d)}
.cg .cg-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--orange-d)}
.cg .cg-btn.cg-gh{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 4px 0 2px var(--ink)}
.cg .cg-btn.cg-soft{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line2)}
.cg .cg-none{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;max-width:680px;margin:20px auto;padding:22px 24px;border-radius:26px;background:var(--cream)}
.cg .cg-none .cg-pp{width:96px;height:96px}
.cg .cg-none .cg-pp svg{width:100%;height:100%}
.cg .cg-none h3{font:800 20px/1.2 var(--fd)}
.cg .cg-none p{font:500 15px/1.5 var(--fb);color:var(--ink2);margin-top:4px}
.cg .cg-none .cg-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cg .cg-scrim{position:fixed;inset:0;z-index:428;background:rgba(51,38,27,.38);backdrop-filter:blur(2px);animation:cg-fade .25s}
@keyframes cg-fade{from{opacity:0}}
.cg .cg-fp{position:fixed;z-index:429;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;background:var(--paper);box-shadow:-30px 0 60px -30px rgba(0,0,0,.45);animation:cg-fpin .45s var(--spring)}
@keyframes cg-fpin{from{transform:translateX(100%)}}
.cg .cg-fph{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1.5px solid var(--line)}
.cg .cg-fph h2{font:800 21px var(--fd)}
.cg .cg-fph .cg-clr{margin-left:auto}
.cg .cg-ib{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line2);background:#fff;cursor:pointer;display:grid;place-items:center;flex:none}
.cg .cg-fpb{flex:1;overflow:auto;padding:6px 18px 20px}
.cg .cg-fg{padding:16px 0;border-bottom:1.5px dashed var(--line)}
.cg .cg-fg:last-child{border-bottom:0}
.cg .cg-fg h3{display:flex;align-items:center;gap:8px;font:800 15.5px var(--fd);margin-bottom:10px}
.cg .cg-fg h3 .cg-ico{color:var(--orange-dd)}
.cg .cg-fg h3 small{margin-left:auto;font:600 12.5px var(--fb);color:var(--mut)}
.cg .cg-opts{display:flex;flex-wrap:wrap;gap:6px}
.cg .cg-op{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 6px 0 13px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font:700 14px var(--fb);transition:background-color .2s,border-color .2s,color .2s}
.cg .cg-op .cg-n{min-width:30px;height:26px;padding:0 7px;border-radius:999px;background:var(--cream);font:800 12px/26px var(--fd);text-align:center;color:var(--ink2);font-variant-numeric:tabular-nums}
.cg .cg-op:hover{border-color:var(--ink2)}
.cg .cg-op[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cg .cg-op[aria-pressed="true"] .cg-n{background:rgba(255,255,255,.18);color:#fff}
.cg .cg-op.cg-zero{opacity:.45;cursor:not-allowed;border-style:dashed}
.cg .cg-ing{position:relative}
.cg .cg-ing input{width:100%;min-height:48px;padding:0 14px;border-radius:14px;border:1.5px solid var(--line2);background:#fff;font:600 15px var(--fb);outline:none}
.cg .cg-ing input:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--hl)}
.cg .cg-ingl{display:grid;gap:4px;margin-top:6px}
.cg .cg-ingl>div{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font:600 14.5px var(--fb)}
.cg .cg-ingl>div span{flex:1}
.cg .cg-ingl button{min-height:36px;padding:0 12px;border-radius:999px;border:1.5px solid var(--line2);background:#fff;cursor:pointer;font:800 13px var(--fd);display:inline-flex;align-items:center;gap:4px}
.cg .cg-ingl .cg-a{color:var(--green-dd)}
.cg .cg-ingl .cg-a:hover{background:var(--green-bg);border-color:#C7DCCD}
.cg .cg-ingl .cg-s{color:var(--pink-d)}
.cg .cg-ingl .cg-s:hover{background:var(--pink-bg);border-color:#F2C2D2}
.cg .cg-lg2{display:flex;gap:14px;margin-top:8px;font:600 12.5px var(--fb);color:var(--mut)}
.cg .cg-lg2 span{display:inline-flex;align-items:center;gap:5px}
.cg .cg-fpf{display:flex;gap:10px;align-items:center;padding:14px 18px;border-top:1.5px solid var(--line);background:#fff}
.cg .cg-fpf .cg-btn{flex:1}
.cg .cg-mdl{position:fixed;inset:0;z-index:430;display:grid;place-items:center;padding:20px;background:rgba(51,38,27,.42);backdrop-filter:blur(3px);animation:cg-fade .25s}
.cg .cg-mdl>div{width:min(720px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:28px;background:var(--paper);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:cg-min .4s var(--spring)}
@keyframes cg-min{from{transform:translateY(30px) scale(.96);opacity:0}}
.cg .cg-fi-pic{position:relative;aspect-ratio:16/8;background:var(--tint)}
.cg .cg-fi-pic img{width:100%;height:100%;object-fit:cover}
.cg .cg-fi-pic .cg-ved svg{width:26%}
.cg .cg-fi-pic .cg-ib{position:absolute;right:14px;top:14px;z-index:3}
.cg .cg-fi-b{padding:20px 24px 24px;display:grid;gap:14px}
.cg .cg-fi-b h2{font:800 26px/1.15 var(--fd);letter-spacing:-.02em}
.cg .cg-fi-b ul{list-style:none;margin:0;padding:0;columns:2;column-gap:20px}
.cg .cg-fi-b li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);break-inside:avoid;font:500 14.5px var(--fb)}
.cg .cg-fi-b li b{font-weight:700;white-space:nowrap}
.cg .cg-fi-b h3{font:800 12px var(--fb);letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.cg .cg-fi-n{padding:12px 14px;border-radius:16px;background:var(--cream);font:600 14px/1.45 var(--fb);color:var(--ink2)}
.cg .cg-fi-a{display:flex;flex-wrap:wrap;gap:10px}
@keyframes cg-tg{50%{box-shadow:0 0 0 3px var(--orange),0 0 0 11px rgba(240,104,47,.08)}}
@keyframes cg-land{30%{transform:scale(1.1) rotate(-2deg)}}
.cg .cg-sheet{position:fixed;z-index:426;inset:3vh 3vw;display:flex;flex-direction:column;border-radius:30px;background:var(--paper);box-shadow:0 0 0 100vmax rgba(51,38,27,.38),0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden;animation:cg-shin .5s var(--spring)}
@keyframes cg-shin{from{transform:translateY(40px) scale(.97);opacity:0}}
.cg .cg-sheet.cg-out{animation:cg-shout .45s var(--soft) forwards}
@keyframes cg-shout{to{transform:translateY(60px) scale(.96);opacity:0}}
.cg .cg-shh{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 22px;background:#fff;border-bottom:1.5px solid var(--line)}
.cg .cg-shh .cg-for{display:grid}
.cg .cg-shh .cg-for b{font:800 22px/1.1 var(--fd);letter-spacing:-.02em}
.cg .cg-shh .cg-for small{font:600 13.5px var(--fb);color:var(--mut)}
.cg .cg-shh .cg-for small s{color:var(--ink2)}
.cg .cg-shh .cg-sp{flex:1}
.cg .cg-shh .cg-step{font:800 13px var(--fd);color:var(--ink2);padding:6px 12px;border-radius:999px;background:var(--cream)}
.cg .cg-sheet .cg-scroll{flex:1;overflow:auto;padding:0 22px 40px}
.cg .cg-sheet .cg-bar{top:0}
.cg .cg-fly{position:fixed;z-index:433;pointer-events:none;border-radius:16px;overflow:hidden;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
.cg .cg-pgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;max-width:1500px;margin:0 auto;padding:18px 24px 80px;align-items:start}
.cg .cg-ph{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.cg .cg-ph .cg-big{width:52px;height:52px;border-radius:18px;background:var(--pink-bg);color:var(--pink-d);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);display:grid;place-items:center;font:800 18px var(--fd);rotate:-4deg}
.cg .cg-ph h1{font:800 26px/1.1 var(--fd);letter-spacing:-.02em}
.cg .cg-ph p{font:600 14px var(--fb);color:var(--mut)}
.cg .cg-side7{position:sticky;top:82px;display:grid;gap:12px;padding:16px;border-radius:26px;background:linear-gradient(160deg,#FFFBF2,#FFF3DE 60%,#FDEBD0);border:1.5px solid var(--line)}
.cg .cg-side7 h2{font:800 17px var(--fd)}
.cg .cg-side7 .cg-hint{font:600 13px var(--fb);color:var(--mut)}
.cg .cg-w14{display:grid;grid-template-columns:34px repeat(2,minmax(0,1fr));gap:5px}
.cg .cg-w14 .cg-dh{font:800 12px var(--fd);align-self:center}
.cg .cg-w14 .cg-mh{font:700 16px/1 var(--fh);color:var(--orange-dd);text-align:center}
.cg .cg-s2{position:relative;display:flex;align-items:center;gap:7px;min-height:46px;padding:4px 6px;border-radius:12px;border:1.5px dashed var(--line2);background:rgba(255,255,255,.65);cursor:pointer;text-align:left;font:700 11.5px/1.2 var(--fb);color:var(--mut);transition:transform .3s var(--spring),box-shadow .3s,border-color .2s}
.cg .cg-s2:hover{border-color:var(--ink2)}
.cg .cg-s2.cg-full{border-style:solid;border-color:var(--line);background:#fff;color:var(--ink)}
.cg .cg-s2 .cg-th{flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:var(--tint)}
.cg .cg-s2 .cg-th img{width:100%;height:100%;object-fit:cover}
.cg .cg-s2 .cg-th svg{width:26px;height:26px}
.cg .cg-s2 span.cg-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg .cg-s2.cg-cur{border:2px solid var(--orange);background:#fff;box-shadow:0 0 0 5px rgba(240,104,47,.16);color:var(--orange-dd)}
.cg .cg-s2.cg-land{animation:cg-land .6s var(--spring)}
.cg .cg-tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cg .cg-tot div{padding:8px 10px;border-radius:14px;background:#fff}
.cg .cg-tot small{display:block;font:600 11.5px var(--fb);color:var(--mut)}
.cg .cg-tot b{font:800 18px var(--fd);font-variant-numeric:tabular-nums}
.cg .cg-done7{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--green-bg);color:var(--green-dd);font:700 14px var(--fb)}
.cg .cg-done7 .cg-pp{width:48px;height:48px;flex:none}
.cg .cg-done7 .cg-pp svg{width:100%;height:100%}
@media (max-width:760px){
.cg .cg-rh{gap:10px;margin-bottom:8px}
.cg .cg-rh h1{font-size:28px}
.cg .cg-segs{margin-left:0;width:100%}
.cg .cg-segs button{flex:1;padding:0 6px;font-size:13.5px}
.cg .cg-bar{top:58px;margin:0 -14px;padding:8px 14px 6px}
.cg .cg-sinp,.cg .cg-fbtn{height:50px}
.cg .cg-fbtn{padding:0 14px}
.cg .cg-fbtn .cg-lb{display:none}
.cg .cg-qk{flex-wrap:nowrap;overflow-x:auto;margin:10px -14px 0;padding:0 14px 4px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent)}
.cg .cg-qk::-webkit-scrollbar{display:none}
.cg .cg-sum{margin:8px 0}
.cg .cg-cnt{font-size:19px}
.cg .cg-sort{margin-left:0}
.cg .cg-sort label{display:none}
.cg .cg-pmline{font-size:13px;width:100%}
.cg .cg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cg .cg-card{border-radius:20px}
.cg .cg-pic{margin:4px 4px 0;border-radius:16px}
.cg .cg-star{width:40px;height:40px;right:4px;top:4px}
.cg .cg-vers{font-size:11px;min-height:24px;padding:0 8px}
.cg .cg-warn{font-size:10.5px;padding:3px 8px;left:6px;bottom:6px}
.cg .cg-bd{padding:9px 10px 10px;gap:6px}
.cg .cg-nm{font-size:14.5px}
.cg .cg-mt{font-size:12px;gap:2px 8px}
.cg .cg-tg span{min-height:22px;font-size:11px;padding:0 7px}
.cg .cg-tg span.cg-x2{display:none}
.cg .cg-go{min-height:40px;font-size:13px;padding:0 10px}
.cg .cg-ft .cg-lv{display:none}
.cg .cg-fp{top:auto;left:0;width:100%;max-height:88vh;border-radius:26px 26px 0 0;animation:cg-fpup .45s var(--spring)}
.cg .cg-fp::before{content:"";position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:var(--line2)}
@keyframes cg-fpup{from{transform:translateY(100%)}}
.cg .cg-fph{padding-top:22px}
.cg .cg-none{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:20px 16px}
.cg .cg-none .cg-acts{justify-content:center}
.cg .cg-mdl{padding:0;place-items:end stretch}
.cg .cg-mdl>div{max-height:92vh;border-radius:26px 26px 0 0}
.cg .cg-fi-b ul{columns:1}
.cg .cg-sheet{inset:0;border-radius:0}
.cg .cg-shh{padding:10px 14px}
.cg .cg-shh .cg-for b{font-size:19px}
.cg .cg-sheet .cg-scroll{padding:0 14px 40px}
}
@media (max-width:1100px){
.cg .cg-pgrid{grid-template-columns:minmax(0,1fr)}
.cg .cg-side7{position:relative;top:0;order:-1;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.cg .cg-side7>div:first-child,.cg .cg-side7 #pdone{grid-column:1/-1}
.cg .cg-w14{grid-template-rows:auto auto auto;grid-auto-flow:column;grid-template-columns:44px repeat(7,minmax(0,1fr));gap:4px}
.cg .cg-w14 .cg-dh{text-align:center}
.cg .cg-w14 .cg-mh{text-align:left;font-size:14px}
.cg .cg-s2{min-height:42px;justify-content:center;padding:3px}
.cg .cg-s2 span.cg-n{display:none}
.cg .cg-s2.cg-cur{font-size:10px}
.cg .cg-tot{grid-template-columns:minmax(0,1fr);gap:4px}
.cg .cg-tot div{padding:5px 10px}
}
@media (prefers-reduced-motion:reduce){.cg *,.cg *::before,.cg *::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---------- propres à l'appli (scripts/catalogue-ui-css.py, EXTRA) ---------- */
.cg{font-family:var(--fb);color:var(--ink);line-height:1.5}
.cg *,.cg *::before,.cg *::after{box-sizing:border-box}
.cg [hidden]{display:none!important}
.cg h1,.cg h2,.cg h3,.cg h4,.cg p{margin:0}
.cg button,.cg input,.cg select{font:inherit;color:inherit}
/* Le focus visible SANS changer la forme (audit du 09/11/2026) : `:where` ne pèse rien, chaque composant garde son rayon. */
.cg :where(:focus-visible){outline:3px solid var(--orange);outline-offset:2px}
.cg .cg-sinp:focus-visible{outline:none}
.cg .cg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* La couche des fenêtres : elle ne prend aucune place, ses enfants sont fixes. */
.cg.cg-couche{position:static}
/* La barre collée : sous l'en-tête de l'appli (la pastille de l'ordinateur pose --hda-bas), en haut dans la feuille. */
.cg .cg-bar{top:var(--cg-haut,0px)}
.cg .cg-sheet .cg-bar{top:0}
/* L'onglet Recettes de l'appli : l'en-tête et ses trois segments, dans la colonne de l'appli. La barre colle sous la
   pastille de l'ordinateur (--hda-bas, header de l'appli), sinon en haut. */
.cg.cg-onglet{padding-bottom:40px;--cg-haut:var(--hda-bas,0px)}
.cg.cg-rhw{margin:4px 0 6px}
.cg .cg-rh{margin-top:6px}
/* Le dessin d'un plat sans illustration : le SVG de popotam-vedette.js, ou la toque quand rien n'est reconnu. */
.cg .cg-ved .cg-neutre,.cg .cg-th .cg-neutre{color:#C79A55}
/* Un créneau visé de « Modifier ma semaine » pulse derrière la feuille ; le plat qui y arrive rebondit. Les cases
   sont celles du module de la semaine (.es) : la classe est posée par le catalogue, le dessin vit ici. */
/* Le contour (pas l'ombre, que les cases ont déjà) et sans !important : une déclaration !important passe avant une
   animation, l'anneau restait figé (audit du 09/11/2026). */
.cg-cible{outline:3px solid #F0682F;outline-offset:3px;animation:cg-cible 1.6s ease-in-out infinite}
@keyframes cg-cible{50%{outline-offset:7px;outline-color:rgba(240,104,47,.45)}}
.cg-rebond{animation:cg-land .6s cubic-bezier(.3,1.35,.45,1)}
/* L'onglet Recettes : plus de bandeau clair derrière la recherche (retour de Jérémy, 10/11/2026), elle flotte sur le
   fond de l'appli. */
.cg.cg-onglet .cg-bar{background:none}
/* « Toutes les recettes » et « Mon livre » : le titre et le contenu arrivent du côté du segment choisi (10/11/2026).
   Hors de .cg : le livre (.lb) n'en fait pas partie. La classe est retirée à la fin (le catalogue est gardé). */
.cg-glisse-d{animation:cg-glisse-d .4s cubic-bezier(.2,.8,.2,1) both}
.cg-glisse-g{animation:cg-glisse-g .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes cg-glisse-d{from{opacity:0;transform:translateX(32px)}}
@keyframes cg-glisse-g{from{opacity:0;transform:translateX(-32px)}}
@media (prefers-reduced-motion:reduce){.cg-glisse-d,.cg-glisse-g{animation:none}}
/* Les filtres repartent comme ils sont venus (10/11/2026) : le panneau ressort à droite, la feuille du téléphone
   redescend, le voile s'efface. Rien ne se choisit pendant la sortie. */
.cg .cg-scrim.cg-part{animation:cg-fadeout .3s ease forwards;pointer-events:none}
@keyframes cg-fadeout{to{opacity:0}}
.cg .cg-fp.cg-part{animation:cg-fpout .3s var(--soft) forwards;pointer-events:none}
@keyframes cg-fpout{to{transform:translateX(100%)}}
@media (max-width:760px){.cg .cg-fp.cg-part{animation-name:cg-fpdown}}
@keyframes cg-fpdown{to{transform:translateY(100%)}}
/* Le tri : le menu déroulant de l'appli (.pselect, styles.css), à la hauteur des pastilles. `.cg button` (font:inherit)
   pèse plus que .pselect-btn : la police est redite ici. */
.cg .cg-sort .pselect-btn{min-height:40px;padding:8px 10px 8px 14px;border-radius:12px;font:700 14px var(--fb);color:var(--ink)}
.cg .cg-sort .pselect-opt{font:600 14.5px var(--fb)}
.cg .cg-sort .pselect-opt.is-on{font-weight:800}
/* L'option active a déjà son anneau intérieur (.pselect-opt:focus) : pas de contour orange en plus. */
.cg .cg-sort .pselect-opt:focus-visible{outline:none}
.cg .cg-sort .pselect-liste{min-width:200px;z-index:25}
/* « Voir dans les recettes » et les autres liens discrets. */
.cg .cg-lien{border:0;background:none;padding:6px 2px;font:700 14px var(--fb);color:var(--orange-dd);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Le mot sous la grille (« Rien ne te plaît ? Essaie Découvrir. ») est un bouton. */
.cg .cg-more .cg-lien{padding:2px}
/* La fiche : la recette pas à pas est celle de l'appli ; ici, les étapes en bref. */
.cg .cg-fi-b ol{margin:0;padding-left:20px;display:grid;gap:8px;font:500 14.5px/1.5 var(--fb)}
.cg .cg-fi-x{display:flex;gap:8px;flex-wrap:wrap}
.cg .cg-fi-pic .cg-ved{position:absolute;inset:0}
/* La feuille du mode choisir : un voile qui CAPTE les clics et la molette (l'ombre ne captait rien), et une feuille qui
   n'en reçoit plus pendant que le plat vole (audit du 09/11/2026). */
.cg .cg-shv{position:fixed;inset:0;z-index:426}
.cg .cg-sheet.cg-out{pointer-events:none}
.cg .cg-sheet .cg-scroll,.cg .cg-fpb,.cg .cg-mdl>div{overscroll-behavior:contain}
/* La fiche : son contenu chargé garde l'espacement du handoff, et les étapes de la recette restent une liste numérotée
   (la règle des ingrédients, `.cg-fi-b li`, les rendait flex et sans numéro). */
.cg .cg-fi-c{display:grid;gap:14px}
.cg .cg-fi-b ol li{display:list-item;border:0;padding:0;break-inside:auto}
.cg .cg-fi-b ol li b{white-space:normal}
/* Les boutons de la fiche (10/11/2026) : sur UNE ligne. Sur ordinateur, les libellés longs ; sur téléphone, une barre
   collée en bas de la fiche, toujours à portée de pouce : « Au planning » en grand à droite, « Garder » et « Pas à pas »
   en boutons compacts, l'icône au-dessus du mot. L'étoile se remplit quand le plat est dans le livre. */
.cg .cg-fi-a{flex-wrap:nowrap}
.cg .cg-fi-a .cg-btn{white-space:nowrap;flex:0 1 auto;min-width:0}
.cg .cg-fi-a .cg-ct{display:none}
.cg .cg-fi-a [data-fstar] svg{transition:fill .25s,color .25s,transform .35s var(--spring)}
.cg .cg-fi-a [data-fstar][aria-pressed="true"] svg{fill:var(--sun);color:var(--sun-d);transform:rotate(-12deg) scale(1.08)}
@media (max-width:760px){
.cg .cg-fi-a{position:sticky;bottom:0;z-index:2;margin:4px -24px -24px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));gap:8px;align-items:stretch;background:var(--paper);box-shadow:0 -14px 22px -18px rgba(60,30,10,.4)}
.cg .cg-fi-a .cg-lg{display:none}
.cg .cg-fi-a .cg-ct{display:inline}
.cg .cg-fi-a .cg-btn{min-height:58px}
.cg .cg-fi-a .cg-soft{flex:0 0 auto;flex-direction:column;gap:3px;min-width:74px;padding:6px 10px;border-radius:20px;font:800 12.5px/1.1 var(--fb)}
.cg .cg-fi-a .cg-btn:not(.cg-soft){order:3;flex:1 1 auto;border-radius:20px;font-size:16.5px}
.cg .cg-fi-a .cg-btn:not(.cg-soft):hover{transform:none}
}
/* « Pour moi » pas encore vérifié : la pastille ne se choisit pas. */
.cg .cg-chip.cg-pm[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
/* Des cibles de 44 px (audit du 09/11/2026) : pastilles retirables, liens de la ligne « Pour moi », « Effacer les
   filtres », avec et sans ; l'étoile et « Choisir » gardent leur taille sur téléphone. */
.cg .cg-ap{min-height:40px}
.cg .cg-act,.cg .cg-pmline{row-gap:4px}
.cg .cg-clr,.cg .cg-pmline button,.cg .cg-lien{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
.cg .cg-ingl button,.cg .cg-sug .cg-two button{min-height:44px}
@media (max-width:760px){.cg .cg-star{width:44px;height:44px}.cg .cg-go{min-height:44px}}
/* Les bords de l'écran (encoche, barre d'accueil) : la feuille plein écran et le pied des filtres les évitent. */
.cg .cg-sheet .cg-scroll{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.cg .cg-fpf{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media (max-width:760px){.cg .cg-shh{padding-top:calc(10px + env(safe-area-inset-top,0px))}}
/* L'étoile pendant qu'elle travaille. */
.cg .cg-star[aria-busy="true"]{opacity:.6}
/* Le mode choisir sans place pour un en-tête large (téléphone) : « Passer » reste à portée. */
@media (max-width:760px){.cg .cg-shh .cg-step{order:3}.cg .cg-shh .cg-sp{display:none}}
@media (prefers-reduced-motion:reduce){.cg-cible,.cg-rebond{animation:none}}