/* LA TABLE DE FÊTE de « On reçoit ! » (28/10/2026), d'après Refontes/design_handoff_table_de_fete/noel-cata.css,
   repris tel quel (classes ct-, tout sous .ctapp) ; les ajouts de l'appli sont à la fin. Servi par
   public/app/js/popotam-table-fete.js. */
/* Popotam : « On reçoit ! » étape 4 : la table de fête (catalogue de Noël dans la page, sans modale).
   Préfixe des classes à l'intégration : ct-. Tokens = peau de Noël de l'appli. */
.ctapp{--red:#BE3A2B;--red-d:#99291C;--gold:#E9B33B;--gold-l:#F7DC8F;--pine:#2F6147;--pine-l:#E3EFE6;--ink:#2A211B;--ink2:#6A5C4C;--muted:#9C8B79;--line:#EEDFC2;--line2:#E6D3AE;--paper:#FFF9EE;--cream:#FFF4DF;
  --orange:#F0682F;--orange-d:#DA541E;--fd:"Bricolage Grotesque",system-ui,sans-serif;--fb:"Hanken Grotesk",system-ui,sans-serif;--fh:"Caveat",cursive;--sp:cubic-bezier(.3,1.35,.45,1);
  container-type:inline-size;position:relative;min-height:100%;font-family:var(--fb);color:var(--ink);background:var(--paper)}
.ctapp *,.ctapp *::before,.ctapp *::after{box-sizing:border-box}
/* :where() garde la remise à zéro à la spécificité d'un simple « button » : sinon elle écrase la police de chaque bouton (.ct-tk, .ct-go…) */
:where(.ctapp) button{font:inherit;color:inherit;cursor:pointer}
.ctapp [hidden]{display:none!important}
.ctapp a{color:var(--red)}.ctapp a:hover{color:var(--red-d)}
.ctapp .hand{font:700 21px/1 var(--fh);color:var(--red)}

/* l'en-tête de l'étape (existant) */
.ct-sh{padding:14px 22px 12px;background:#FCE3D8}
.ct-sh .r{display:flex;align-items:center;gap:12px}
.ct-ib{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:#FFF3EC;display:grid;place-items:center;color:var(--orange-d)}
.ct-sh .fc{flex:none;width:44px;height:44px;border-radius:14px;border:2px solid var(--ink);background:#fff;overflow:hidden}
.ct-sh .fc svg{width:100%;height:100%;display:block}
.ct-sh .ct-tt{flex:1;min-width:0}
.ct-sh .ct-tt b{display:block;font:800 18px var(--fd);color:var(--orange-d)}
.ct-sh .ct-tt small{font:700 12.5px var(--fb);color:var(--orange-d)}
.ct-bars{display:flex;gap:6px;margin-top:12px}
.ct-bars i{flex:1;height:5px;border-radius:3px;background:#E9CDBF}
.ct-bars i.ok{background:var(--orange-d)}.ct-bars i.on{background:#F0A17E}
.ct-oc{display:block;margin-top:10px;min-height:38px;padding:0 14px;line-height:38px;border-radius:12px;background:#FFF6F1;font:700 13.5px/38px var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ct-bd{max-width:1080px;margin:0 auto;padding:22px 22px 0}
.ct-in h2{margin:2px 0 6px;font:800 clamp(26px,3.2vw,34px)/1.05 var(--fd);letter-spacing:-.02em}
.ct-in p{margin:0;font-size:15px;line-height:1.5;color:var(--ink2);max-width:60ch;text-wrap:pretty}
.ct-ok{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 14px 5px 5px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font:600 13px var(--fb);color:var(--ink2)}
.ct-ok .fc{width:30px;height:30px;border-radius:50%;background:var(--cream);overflow:hidden}
.ct-ok .fc svg{width:100%;height:100%;display:block}

/* ================= LA TABLE : collée en haut, c'est aussi la navigation ================= */
.ct-tbl{position:sticky;top:0;z-index:20;margin:18px -22px 0;padding:10px 22px 10px;background:rgba(255,249,238,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:box-shadow .3s}
.ct-tbl.mini{box-shadow:0 10px 24px -18px rgba(60,30,10,.5)}
.ct-run{position:relative;border-radius:28px;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(180deg,transparent 9px,var(--gold) 9px 11px,transparent 11px calc(100% - 11px),var(--gold) calc(100% - 11px) calc(100% - 9px),transparent calc(100% - 9px)),
  radial-gradient(circle,rgba(255,255,255,.16) 1.4px,transparent 1.9px) 0 0/20px 20px,var(--red);transition:border-radius .4s}
.ct-pls{display:flex;justify-content:space-between;gap:10px;padding:18px 64px 14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;transition:padding .4s var(--sp)}
.ct-pls::-webkit-scrollbar{display:none}
.ct-pl{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:64px;padding:0;border:0;background:none}
.ct-pd{position:relative;width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px #EADFC9,0 5px 0 rgba(42,33,27,.35);transition:width .45s var(--sp),height .45s var(--sp),transform .35s var(--sp),box-shadow .3s}
.ct-pd img{width:74%;height:74%;border-radius:50%;object-fit:cover;display:block}
.ct-pd i{width:62%;height:62%;border-radius:50%;border:2px dashed #D9C7A8;display:grid;place-items:center;font:700 22px/1 var(--fd);font-style:normal;color:#C9B79C;transition:color .2s,border-color .2s}
.ct-pd em{position:absolute;right:-5px;top:-5px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--gold);border:2px solid var(--ink);display:grid;place-items:center;font:800 11.5px var(--fb);font-style:normal;color:var(--ink)}
.ct-pn{font:800 13px var(--fd);color:#FFF3E6;white-space:nowrap;transition:font-size .4s}
.ct-pl:hover .ct-pd{transform:translateY(-3px) rotate(-5deg)}
.ct-pl:hover .ct-pd i{color:var(--red);border-color:var(--red)}
.ct-pl.act .ct-pd{transform:translateY(-4px);box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px #EADFC9,0 0 0 4px var(--gold),0 8px 0 rgba(42,33,27,.35)}
.ct-pl.act .ct-pn{color:var(--gold-l)}
.ct-pl:focus-visible{outline:none}
.ct-pl:focus-visible .ct-pd{box-shadow:inset 0 0 0 5px #fff,0 0 0 4px #fff,0 0 0 7px var(--ink)}
/* les bougies, aux deux bouts de la nappe */
.ct-cdl{position:absolute;bottom:22px;width:12px;height:38px;border-radius:3px;background:linear-gradient(90deg,#FFF6E3,#F2E2C2);border:2px solid var(--ink);transition:opacity .3s}
.ct-cdl.l{left:22px}.ct-cdl.r{right:22px}
.ct-cdl::before{content:"";position:absolute;left:50%;top:-15px;width:9px;height:14px;margin-left:-4.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#FFF6C8 0 25%,var(--gold) 45%,#F0682F 80%);animation:ctFlk 1.6s ease-in-out infinite;transform-origin:50% 100%}
.ct-cdl::after{content:"";position:absolute;left:50%;top:-24px;width:34px;height:34px;margin-left:-17px;border-radius:50%;background:radial-gradient(rgba(255,214,120,.45),transparent 65%);animation:ctGlw 1.6s ease-in-out infinite}
@keyframes ctFlk{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12,.92) rotate(4deg)}}
@keyframes ctGlw{50%{opacity:.6;transform:scale(.88)}}
.ct-hint{margin:8px 4px 0;text-align:center;font:700 17px/1 var(--fh);color:var(--ink2);transition:opacity .25s,height .3s}
/* collée : la table se resserre */
.ct-tbl.mini .ct-pls{padding:9px 16px 8px}
.ct-tbl.mini .ct-pd{width:46px;height:46px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #EADFC9,0 3px 0 rgba(42,33,27,.35)}
.ct-tbl.mini .ct-pl.act .ct-pd{box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--gold),0 4px 0 rgba(42,33,27,.35)}
.ct-tbl.mini .ct-pd i{font-size:15px;border-width:1.5px}
.ct-tbl.mini .ct-pd em{min-width:20px;height:20px;font-size:10.5px;right:-6px;top:-6px}
.ct-tbl.mini .ct-pn{font-size:11.5px}
.ct-tbl.mini .ct-cdl{opacity:0}
.ct-tbl.mini .ct-hint{opacity:0;height:0;margin:0}

/* recherche et filtres */
.ct-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.ct-q{flex:1 1 280px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:16px;border:1.5px solid var(--line2);background:#fff;color:var(--muted);transition:border-color .2s,box-shadow .25s}
.ct-q:focus-within{border-color:var(--red);box-shadow:0 0 0 4px #F8DCD6;color:var(--red)}
.ct-q input{flex:1;min-width:0;height:44px;border:0;background:none;font:600 15px var(--fb);color:var(--ink);outline:none}
.ct-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.ct-chips::-webkit-scrollbar{display:none}
.ct-chip{flex:none;min-height:44px;padding:0 15px;border-radius:999px;border:1.5px dashed var(--line2);background:none;font:700 13.5px var(--fb);color:var(--ink2);transition:all .25s var(--sp)}
.ct-chip[aria-pressed="true"]{border-style:solid;border-color:var(--pine);background:var(--pine);color:#fff}

/* sections */
.ct-cs{margin-top:34px;scroll-margin-top:var(--tbh,160px)}
.ct-ch{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:14px}
.ct-ch h3{margin:0;font:800 24px var(--fd);letter-spacing:-.01em}
.ct-ch h3 b{display:inline-grid;place-items:center;min-width:26px;height:22px;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--cream);font:800 12px var(--fb);color:var(--ink2);vertical-align:3px}
.ct-none{padding:22px;border-radius:20px;border:2px dashed var(--line2);text-align:center;color:var(--ink2);font-size:14.5px}
.ct-none b{display:block;font:700 22px var(--fh);color:var(--red)}

/* les menus complets : des cartes qui se retournent */
.ct-mr{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px)/4);gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:4px 2px 10px;margin:0 -2px}
.ct-mr::-webkit-scrollbar{display:none}
.ct-mc{scroll-snap-align:start;height:372px;perspective:1200px}
.ct-mc .in{position:relative;height:100%;transform-style:preserve-3d;transition:transform .75s var(--sp)}
.ct-mc.flip .in{transform:rotateY(180deg)}
.ct-mc .fr,.ct-mc .ct-bk{position:absolute;inset:0;border-radius:22px;overflow:hidden;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.ct-mc .fr{display:block;width:100%;padding:0;background:var(--ink);text-align:left}
.ct-mc .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sp)}
.ct-mc .fr:hover img{transform:scale(1.06)}
.ct-mc .fr .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,33,27,0) 35%,rgba(42,33,27,.86) 88%)}
.ct-mc .tgs{position:absolute;left:10px;top:10px;display:flex;flex-wrap:wrap;gap:4px}
.ct-mc .tgs span{padding:3px 9px;border-radius:999px;background:rgba(255,249,238,.94);font:800 10.5px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--pine)}
.ct-mc .ft{position:absolute;left:14px;right:14px;bottom:14px;color:#fff}
.ct-mc .ft b{display:block;font:800 19px/1.15 var(--fd);letter-spacing:-.01em;text-wrap:balance}
.ct-mc .ft small{display:block;margin-top:4px;font:600 12.5px var(--fb);color:#F3E4CF}
.ct-mc .ft u{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.5);font:800 12px var(--fb);text-decoration:none}
.ct-mc .ct-bk{transform:rotateY(180deg);display:flex;flex-direction:column;padding:14px 14px 12px;background:var(--cream)}
.ct-mc .ct-bk::before{content:"";position:absolute;inset:6px;border:1.5px solid rgba(190,58,43,.35);border-radius:16px;pointer-events:none}
.ct-mc .ct-bk b{margin:2px 0 8px;font:800 16px/1.15 var(--fd);text-wrap:balance}
.ct-mc .ct-bk ul{flex:1;min-height:0;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.ct-mc .ct-bk li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px;font-size:12.5px;line-height:1.3}
.ct-mc .ct-bk li small{font:800 10px/1.3 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--red);padding-top:1px}
.ct-mc .ct-bk li span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ct-mc .ac{display:flex;gap:6px;margin-top:10px}
.ct-tk{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;border:2px solid var(--ink);border-radius:14px;background:var(--red);color:#fff;font:800 14px var(--fd);box-shadow:0 3px 0 var(--ink);transition:transform .3s var(--sp),background .3s}
.ct-tk:hover{transform:translateY(-2px)}
.ct-tk:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ct-mc.taken .ct-tk{background:var(--pine)}
.ct-bkb{flex:none;width:44px;height:44px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--ink2)}
.ct-bkb:hover{border-color:var(--ink2);color:var(--ink)}

/* les plats */
.ct-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.ct-dc{position:relative;display:flex;flex-direction:column;padding:6px 6px 12px;border-radius:20px;background:#fff;border:1.5px solid var(--line);transition:transform .35s var(--sp),border-color .25s,box-shadow .3s}
.ct-dc:hover{transform:translateY(-3px);box-shadow:0 16px 28px -20px rgba(60,30,10,.55)}
.ct-dc .ph{position:relative;display:block;aspect-ratio:4/3;border-radius:15px;overflow:hidden;background:var(--cream)}
.ct-dc .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--sp)}
.ct-dc:hover .ph img{transform:scale(1.06)}
.ct-dc .ph .on{position:absolute;left:8px;top:8px;padding:2px 10px 3px;border-radius:999px;background:var(--gold);border:1.5px solid var(--ink);font:700 15px/1 var(--fh);color:var(--ink);transform:rotate(-4deg) scale(0);transition:transform .4s var(--sp)}
.ct-dc .pw{position:relative}
.ct-add{position:absolute;right:10px;bottom:-20px;z-index:2;width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--ink);transition:transform .35s var(--sp),background .3s}
.ct-add:hover{transform:rotate(90deg) scale(1.06)}
.ct-add:active{transform:scale(.92)}
.ct-add .ck{display:none}
.ct-dc h4{margin:12px 8px 0;font:800 15px/1.22 var(--fd);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;padding-right:44px}
.ct-dc .mt{margin:5px 8px 0;font:600 12.5px var(--fb);color:var(--muted)}
.ct-dc .tg{margin:4px 8px 0;font:700 11.5px var(--fb);color:var(--pine)}
.ct-dc.on{border:2px solid var(--gold);padding:5px 5px 11px;box-shadow:0 0 0 4px #FBEFC7}
.ct-dc.on .ph .on{transform:rotate(-4deg) scale(1)}
.ct-dc.on .ct-add{background:var(--pine)}
.ct-dc.on .ct-add:hover{transform:scale(1.06)}
.ct-dc.on .ct-add .pl{display:none}.ct-dc.on .ct-add .ck{display:block}

/* le pied : ce qui est sur la table */
.ct-ft{position:sticky;bottom:0;z-index:25;margin-top:30px;padding:0 12px 12px;pointer-events:none}
.ct-ftb{pointer-events:auto;max-width:1060px;margin:0 auto;display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 10px 10px 14px;border-radius:22px;background:var(--ink);color:#fff;box-shadow:0 20px 40px -20px rgba(42,33,27,.7)}
.ct-st{display:flex;flex:none}
.ct-st img,.ct-st i{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--ink);background:#4A3A2E;display:block}
.ct-st>*+*{margin-left:-12px}
.ct-st i{display:grid;place-items:center;font:800 12px var(--fb);font-style:normal;background:var(--gold);color:var(--ink)}
.ct-sm{flex:1;min-width:0}
.ct-sm b{display:block;font:800 15px var(--fd)}
.ct-sm small{display:block;font-size:12.5px;color:#D9CBB8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:15px;background:var(--orange);color:#fff;font:800 15px var(--fd);box-shadow:0 3px 0 var(--orange-d);transition:transform .3s var(--sp),opacity .3s,background .3s}
.ct-go:hover:not(:disabled){transform:translateY(-2px)}
.ct-go:disabled{opacity:.35;cursor:default;box-shadow:none}

/* couches d'animation (dans le body) */
.ct-fly{position:fixed;z-index:200;object-fit:cover;pointer-events:none;border:2px solid #2A211B;box-shadow:0 14px 26px -10px rgba(0,0,0,.45)}
.ct-spk{position:fixed;z-index:201;width:12px;height:12px;pointer-events:none;background:#E9B33B;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.ct-toast{position:absolute;left:50%;bottom:96px;z-index:30;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:8px 16px 8px 8px;border-radius:18px;background:#fff;border:2px solid #2A211B;box-shadow:0 4px 0 #2A211B;font:600 13.5px "Hanken Grotesk",sans-serif;color:#2A211B;transform:translateX(-50%)}
.ct-toast .fc{flex:none;width:36px;height:36px;border-radius:12px;background:#FFF4DF;overflow:hidden}
.ct-toast .fc svg{width:100%;height:100%;display:block}
.ct-toast b{font-weight:800}

/* ================= téléphone ================= */
@container (max-width:640px){
  .ct-sh{padding:10px 14px 10px}
  .ct-bd{padding:16px 14px 0}
  .ct-in p{font-size:14px}
  .ct-tbl{margin:14px -14px 0;padding:8px 14px}
  .ct-run{border-radius:22px}
  .ct-pls{justify-content:flex-start;gap:12px;padding:14px 14px 12px}
  .ct-pd{width:64px;height:64px}
  .ct-pn{font-size:12px}
  .ct-cdl{display:none}
  .ct-hint{font-size:16px}
  .ct-tools{margin-top:14px}
  .ct-q{flex-basis:100%}
  .ct-cs{margin-top:28px}
  .ct-ch h3{font-size:21px}
  .ct-mr{grid-auto-columns:76%;gap:12px}
  .ct-mc{height:340px}
  .ct-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ct-dc h4{font-size:14px;margin:10px 6px 0}
  .ct-dc .mt,.ct-dc .tg{margin-left:6px;margin-right:6px}
  .ct-ftb{gap:10px;padding:8px 8px 8px 10px}
  .ct-st img,.ct-st i{width:32px;height:32px}
  .ct-st>*:nth-child(n+4){display:none}
  .ct-sm small{display:none}
  .ct-go{padding:0 14px;font-size:14px}
  .ct-go .lg{display:none}
}
@container (min-width:641px){.ct-go .sh{display:none}}
@media (prefers-reduced-motion:reduce){.ctapp *,.ct-fly{animation:none!important;transition-duration:.01ms!important}}

/* ================= l'étape 4 ordinaire, et la porte vers l'étape de fête ================= */
.ctapp.plain{--red:#F0682F;--red-d:#DA541E}
.ct-sh.fete{position:relative;overflow:hidden;background:var(--red);color:#fff}
.ct-sh.fete .ct-ib{background:rgba(255,255,255,.16);color:#fff}
.ct-sh.fete .fc{border-color:#fff}
.ct-sh.fete .ct-tt b,.ct-sh.fete .ct-tt small{color:#fff}
.ct-sh.fete .ct-bars i{background:rgba(255,255,255,.28)}
.ct-sh.fete .ct-bars i.ok{background:#fff}
.ct-sh.fete .ct-oc{background:rgba(255,255,255,.14);color:#fff}
.ct-ctFlk{position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(circle,#fff 1.2px,transparent 1.8px) 0 0/38px 38px,radial-gradient(circle,#fff 1px,transparent 1.6px) 19px 14px/46px 46px;animation:ctSnow 12s linear infinite}
@keyframes ctSnow{to{background-position:0 380px,19px 474px}}
/* la barre de l'étape en plus : dorée, et elle s'insère en grandissant */
.ct-bars i.gd{background:var(--gold)!important;box-shadow:0 0 10px rgba(233,179,59,.8);animation:ctIns .7s var(--sp) .2s both}
@keyframes ctIns{from{flex-grow:.0001;opacity:0}}
.ct-pm{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ct-pm li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:8px 10px 8px 8px;border-radius:20px;background:#fff;border:1.5px solid var(--line)}
.ct-pm img{width:64px;height:64px;border-radius:16px;object-fit:cover;border:2px solid var(--ink);display:block}
.ct-pm small{display:block;font:800 10.5px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-d)}
.ct-pm b{display:block;margin-top:2px;font:800 15.5px/1.22 var(--fd)}
.ct-pm em{display:block;margin-top:2px;font:600 12.5px var(--fb);font-style:normal;color:var(--muted)}
.ct-oi{min-height:44px;padding:0 14px;border:1.5px solid var(--line2);border-radius:14px;background:#fff;font:700 13px var(--fb);color:var(--ink2)}
.ct-oi:hover{border-color:var(--ink2);color:var(--ink)}
/* la carte d'invitation : une petite nappe de fête, posée dans l'étape ordinaire */
.ct-inv{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px;align-items:center;margin-top:22px;padding:20px;border-radius:26px;border:2px solid #2A211B;box-shadow:0 5px 0 #2A211B;background:#BE3A2B;color:#fff;isolation:isolate}
.ct-iv-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.16) 1.4px,transparent 1.9px) 0 0/20px 20px,linear-gradient(180deg,transparent 9px,#E9B33B 9px 11px,transparent 11px calc(100% - 11px),#E9B33B calc(100% - 11px) calc(100% - 9px),transparent calc(100% - 9px))}
.ct-iv-tag{position:absolute;right:16px;top:-2px;z-index:2;padding:8px 12px 6px;border-radius:0 0 12px 12px;background:#E9B33B;border:2px solid #2A211B;border-top:0;font:700 18px/1 var(--fh);color:#2A211B;transform:rotate(3deg);transform-origin:50% 0;animation:ctTag 2.6s ease-in-out infinite}
@keyframes ctTag{50%{transform:rotate(-3deg)}}
.ct-iv-pl{position:relative;height:150px}
.ct-iv-pl span{position:absolute;left:calc(var(--i) * 19%);top:calc(28% + (var(--i) - 2) * (var(--i) - 2) * 5%);width:34%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 6px #EADFC9,0 5px 0 rgba(42,33,27,.4);display:grid;place-items:center;transform:rotate(calc((var(--i) - 2) * 8deg));transition:transform .5s var(--sp)}
.ct-iv-pl span:nth-child(3){z-index:2;width:40%;top:12%;left:31%}
.ct-iv-pl img{width:76%;height:76%;border-radius:50%;object-fit:cover}
.ct-inv:hover .ct-iv-pl span{transform:translateY(-6px) rotate(calc((var(--i) - 2) * 12deg))}
.ct-inv .hand{color:#F7DC8F}
.ct-iv-t h3{margin:2px 0 6px;font:800 25px/1.05 var(--fd);letter-spacing:-.01em}
.ct-iv-t p{margin:0;font-size:14px;line-height:1.45;color:#FFE9DF;text-wrap:pretty}
.ct-ivb{display:inline-flex;align-items:center;gap:8px;min-height:50px;margin-top:14px;padding:0 20px;border:2px solid #2A211B;border-radius:16px;background:#E9B33B;color:#2A211B;font:800 15.5px var(--fd);box-shadow:0 4px 0 #2A211B;transition:transform .3s var(--sp)}
.ct-ivb:hover{transform:translateY(-2px)}
.ct-ivb:hover svg{animation:ctSpin .6s var(--sp)}
@keyframes ctSpin{to{transform:rotate(144deg) scale(1.2)}}
.ct-ivb:active{transform:translateY(2px);box-shadow:0 1px 0 #2A211B}
.ct-iv-t small{display:block;margin-top:9px;font-size:12.5px;color:#FFD9CC}
.ct-inv.nudge{animation:ctNudge .9s var(--sp)}
@keyframes ctNudge{30%{transform:translateY(-6px) rotate(-.8deg)}60%{transform:translateY(0) rotate(.5deg)}}
/* hors Noël : la même porte, plus discrète */
.ct-inv:not(.hot):not(.done){grid-template-columns:120px minmax(0,1fr);padding:14px 16px;background:#FFF4DF;color:var(--ink);border-style:dashed;box-shadow:none}
.ct-inv:not(.hot):not(.done) .ct-iv-bg{display:none}
.ct-inv:not(.hot):not(.done) .ct-iv-pl{height:96px}
.ct-inv:not(.hot):not(.done) .hand{color:#BE3A2B}
.ct-inv:not(.hot):not(.done) h3{font-size:20px}
.ct-inv:not(.hot):not(.done) p,.ct-inv:not(.hot):not(.done) small{color:var(--ink2)}
.ct-inv:not(.hot):not(.done) .ct-ivb{min-height:44px;background:#BE3A2B;color:#fff}
/* au retour : ce qui est sur la table de fête */
.ct-inv.done{display:block;background:#FFF4DF;color:var(--ink);border-color:#E9B33B;box-shadow:0 4px 0 #E9B33B}
.ct-inv.done .hand{color:#BE3A2B}
.ct-ivs{display:flex;margin:10px 0}
.ct-ivs img,.ct-ivs i{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid #FFF4DF;box-shadow:0 0 0 2px #2A211B;display:grid;place-items:center;font:800 13px var(--fb);font-style:normal;background:#E9B33B}
.ct-ivs>*+*{margin-left:-10px}
.ct-inv.done p{margin:0;font-size:14.5px;color:var(--ink2)}
.ct-inv.done p b{color:var(--ink)}
.ct-inv.done .ct-ivb{background:#BE3A2B;color:#fff}
.ct-ivx{display:block;min-height:44px;margin-top:4px;padding:0;border:0;background:none;font:700 13px var(--fb);color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.ct-ftb.plain{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.ct-ftb.plain .ct-sm small{color:var(--muted)}
/* le passage */
.ct-wipe{position:fixed;z-index:300;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none;color:#fff;font:800 24px "Bricolage Grotesque",sans-serif;
  background:radial-gradient(circle,rgba(255,255,255,.14) 1.4px,transparent 1.9px) 0 0/22px 22px,#BE3A2B}
.ct-wipe.out{background:#FFF9EE}
.ct-wipe.out>*{display:none}
.ct-wf{width:96px;height:96px;border-radius:30px;border:3px solid #fff;background:#FFF4DF;overflow:hidden;animation:ctWf .7s cubic-bezier(.3,1.35,.45,1) .25s both}
.ct-wf svg{width:100%;height:100%;display:block}
.ct-wipe b{animation:ctWf .6s cubic-bezier(.3,1.35,.45,1) .35s both}
@keyframes ctWf{from{transform:scale(.3) rotate(-20deg);opacity:0}}
.ct-wipe i{position:absolute;left:var(--x);top:-20px;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:.9;animation:ctFall 1.4s linear var(--d) both}
@keyframes ctFall{to{transform:translate(20px,110vh)}}
@container (max-width:640px){
  .ct-pm li{grid-template-columns:56px minmax(0,1fr)}
  .ct-pm img{width:56px;height:56px}
  .ct-oi{grid-column:1/-1;width:100%}
  .ct-inv{grid-template-columns:1fr;gap:6px;padding:16px}
  .ct-iv-pl{height:118px}
  .ct-ivb{width:100%;justify-content:center}
  .ct-inv:not(.hot):not(.done){grid-template-columns:1fr}
  .ct-inv:not(.hot):not(.done) .ct-iv-pl{height:84px;max-width:240px}
}
.ct-or{display:flex;align-items:center;gap:12px;margin:22px 0 0;font:700 19px/1 var(--fh);color:var(--ink2)}
.ct-or::before,.ct-or::after{content:"";flex:1;border-top:1.5px dashed var(--line2)}
.ct-inv.hot+.ct-or+.ct-pm{margin-top:12px}
.ct-inv.hot{margin-top:18px}
.ctapp.noel .ct-go{background:var(--red);box-shadow:0 3px 0 var(--red-d);border:2px solid #fff}
@container (max-width:640px){
  .ct-iv-pl{height:96px;max-width:300px;margin:0 auto 4px;width:100%}
  .ct-iv-pl span{width:24%;top:calc(26% + (var(--i) - 2) * (var(--i) - 2) * 5%);left:calc(var(--i) * 19%)}
  .ct-iv-pl span:nth-child(3){width:30%;top:6%;left:35%}
  .ct-iv-tag{font-size:16px;padding:6px 10px 5px}
  .ct-iv-t h3{font-size:22px}
}

/* ================= la table dressée ================= */
/* elle garde la nappe de fête, même revenue dans l'étape ordinaire orange */
.ct-dn{--red:#BE3A2B;--red-d:#99291C}
.ct-dn .ct-in h2{margin-bottom:6px}
.ct-dt{position:relative;margin:20px 0 0}
.ct-dt .ct-run{padding:0}
.ct-dpl{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 18px;padding:22px 64px 18px}
.ct-dt .ct-pl{cursor:default}
.ct-dt .ct-pd{width:92px;height:92px}
.ct-dst{position:absolute;right:-8px;top:-22px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#E9B33B;border:2px solid #2A211B;box-shadow:0 4px 0 #2A211B;transform:rotate(-6deg)}
.ct-dst .fc{width:40px;height:40px;border-radius:50%;background:#FFF4DF;border:2px solid #2A211B;overflow:hidden}
.ct-dst .fc svg{width:100%;height:100%;display:block}
.ct-dst b{font:700 22px/1 var(--fh);color:#2A211B}
/* la carte de menu, posée sur la nappe */
.ct-dm{position:relative;width:min(440px,calc(100% - 40px));margin:-14px auto 0;padding:26px 26px 22px;border-radius:6px;background:#FFFDF6;border:1.5px solid #E6D3AE;box-shadow:0 18px 34px -18px rgba(60,30,10,.55);text-align:center;transform:rotate(-.8deg);z-index:2;
  background-image:linear-gradient(#FFFDF6,#FFFDF6),linear-gradient(90deg,#BE3A2B,#BE3A2B);background-clip:padding-box,border-box}
.ct-dm::before{content:"";position:absolute;inset:8px;border:1.5px solid rgba(190,58,43,.3);border-radius:4px;pointer-events:none}
.ct-dm .tp{position:absolute;top:-10px;width:70px;height:22px;background:rgba(233,179,59,.55);transform:rotate(-6deg)}
.ct-dm .tp.l{left:18px}.ct-dm .tp.r{right:18px;transform:rotate(5deg)}
.ct-dm .k{display:block;font:800 11px var(--fb);letter-spacing:.24em;text-transform:uppercase;color:#BE3A2B}
.ct-dm h3{margin:4px 0 2px;font:700 38px/1 var(--fh);color:#2A211B}
.ct-dm .dl{display:block;font:600 13px var(--fb);color:var(--muted)}
.ct-dm .sv{margin-top:14px}
.ct-dm .sv small{display:block;font:800 10.5px var(--fb);letter-spacing:.16em;text-transform:uppercase;color:#BE3A2B}
.ct-dm .sv b{display:block;margin-top:3px;font:800 15px/1.35 var(--fd);text-wrap:balance}
.ct-dm .sep{display:block;margin-top:12px;font-size:14px;line-height:1;color:#E9B33B}
.ct-dm .pr{display:inline-block;margin-top:18px;padding:5px 14px;border-radius:999px;background:#FBEFC7;font:800 13px var(--fb);color:#7A5200}
.ct-dac{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:22px}
.ct-dac .ct-ivb{margin-top:0}
@container (max-width:640px){
  .ct-dpl{padding:18px 12px 14px;gap:10px 12px}
  .ct-dt .ct-pd{width:64px;height:64px}
  /* sous la nappe, à droite : au-dessus, il couvrait les assiettes */
  .ct-dst{right:6px;top:auto;bottom:-22px;padding:4px 12px 4px 4px}
  .ct-dst .fc{width:32px;height:32px}
  .ct-dst b{font-size:18px}
  .ct-dm{margin-top:4px}
  .ct-dm{width:calc(100% - 16px);padding:22px 16px 18px}
  .ct-dm h3{font-size:32px}
  .ct-dac .ct-ivb{width:100%;justify-content:center}
}

/* ================= le récapitulatif de l'étape ordinaire ================= */
.ct-sum{pointer-events:auto;width:fit-content;max-width:min(620px,100%);margin:0 auto;display:flex;align-items:center;gap:14px;min-height:64px;padding:8px 8px 8px 10px;border-radius:999px;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink),0 22px 40px -22px rgba(42,33,27,.6)}
.ct-sst{flex:none;display:flex;padding-left:2px}
.ct-sst img,.ct-sst i{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;box-shadow:0 0 0 1.5px var(--ink);display:block;background:#FCEFD9;transform:rotate(calc((var(--i,0) - 1) * 5deg))}
.ct-sst>*+*{margin-left:-14px}
.ct-sst i{display:grid;place-items:center;font:800 12px var(--fb);font-style:normal;background:var(--gold,#E9B33B);color:var(--ink)}
.ct-sum:hover .ct-sst img{animation:sstHop .5s var(--sp) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes sstHop{40%{translate:0 -6px}}
.ct-ssm{min-width:0;padding-right:4px}
.ct-ssm b{display:block;font:800 16px/1.2 var(--fd);white-space:nowrap}
.ct-ssm b .n{display:inline-grid;place-items:center;min-width:26px;height:26px;margin-right:2px;padding:0 6px;border-radius:999px;background:var(--orange-bg,#FCE3D8);color:var(--orange-d,#DA541E);font-size:14px}
.ct-ssm b .pr{font:700 19px/1 var(--fh);color:var(--orange-d,#DA541E)}
.ct-ssm small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-sum .ct-go{border-radius:999px;min-height:48px;padding:0 20px}
.ct-sum .ct-go .lg{display:inline}
.ct-ssm small .pr2{display:none}
/* une table de fête dressée : la pastille du compte et le mot passent au rouge */
.ct-sum.fete .ct-ssm b .n{background:#FBE3DF;color:#BE3A2B}
.ct-sum.fete .ct-ssm b .pr{color:#BE3A2B}
@container (max-width:640px){
  .ct-sum{width:100%;gap:10px;padding:6px 6px 6px 8px}
  .ct-sst img,.ct-sst i{width:36px;height:36px}
  .ct-sst>*+*{margin-left:-16px}
  .ct-sst>*:nth-child(n+3){display:none}
  .ct-ssm{flex:1}
  .ct-ssm b .pr{display:none}
  .ct-ssm small .pr2{display:inline;font-weight:700;color:var(--ink2)}
  .ct-ssm b{font-size:15px}
  .ct-sum .ct-go{padding:0 14px}
  .ct-sum .ct-go .lg{display:none}
  .ct-sum .ct-go .sh{display:inline}
}
@media (prefers-reduced-motion:reduce){.ct-sum:hover .ct-sst img{animation:none}}

/* ================= ajouts de l'appli ================= */
/* La porte et la table dressée vivent DANS l'étape 4 du parcours : ni hauteur ni fond à elles. */
.ctapp.ct-slot{min-height:0;background:transparent;font-family:var(--fb)}
.ctapp.ct-slot .ct-inv{margin-top:0}
.ctapp.ct-slot .ct-or{margin:18px 0 4px}
/* L'étape de fête : une couche plein cadre posée sur le parcours, qui défile seule. */
.ctapp.ct-layer{position:absolute;inset:0;z-index:60;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:inherit}
.ct-load{display:flex;flex-direction:column;align-items:center;gap:12px;padding:70px 20px;text-align:center;font:700 21px/1.2 var(--fh);color:var(--red)}
.ct-load .fc{width:84px;height:84px;border-radius:26px;border:2px solid var(--ink);background:#fff;overflow:hidden;animation:ctNudge 1.4s var(--sp) infinite}
.ct-load .fc svg{width:100%;height:100%;display:block}
.ct-load p{margin:0;font:600 14.5px/1.5 var(--fb);color:var(--ink2);max-width:40ch}
.ct-load .ct-ivb{background:var(--red);color:#fff}
/* Un allergène d'un convive, sur la carte du plat : « lait · Léa ». Popotam relit le plat pour la table. */
.ct-al{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:6px;padding:3px 9px;border-radius:999px;background:#FBE3DF;color:#99291C;font:800 11.5px/1.3 var(--fb)}
.ct-al svg{flex:none}
.ct-dc .ct-al{margin:6px 8px 0}
.ct-mc .ct-al{margin:6px 0 0}
/* Le compteur plein (12 plats) : les « + » restants se reposent. */
.ctapp.ct-plein .ct-dc:not(.on) .ct-add{opacity:.45}
/* Un plat de la table qui ne vient pas du catalogue (écrit par Popotam) : une assiette à son initiale. */
.ct-pd b.ini{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#FBEFC7;font:800 22px var(--fd);color:#99291C}
.ct-go:disabled{opacity:.55;cursor:default}
/* L'éventail tient dans sa colonne : le dernier plat mordait sur « Promis, tu peux revenir ici ». */
.ctapp.ct-slot .ct-iv-pl span{left:calc(var(--i) * 16.5%)}
.ctapp.ct-slot .ct-iv-pl span:nth-child(3){left:30%}
@container (max-width:640px){.ctapp.ct-slot .ct-iv-pl span{left:calc(var(--i) * 19%)}.ctapp.ct-slot .ct-iv-pl span:nth-child(3){left:35%}}
/* AU-DESSUS DU PARCOURS (retour de Jérémy, 28/10/2026 : « l'animation ne se joue pas ») : la vague, les photos en vol,
   les étoiles et les confettis sont posés sur <body>, et la fenêtre de « On reçoit ! » est à 432 : à 300 et 200, tout
   se jouait DERRIÈRE elle. */
.ct-wipe{z-index:620}
.ct-fly{z-index:610}
.ct-spk{z-index:611}
/* RETOURS DE JÉRÉMY (28/10/2026) */
/* La nappe collante : plus de fond beige derrière elle, et plus d'ancrage du défilement (il la faisait trembler). */
.ctapp.ct-layer{overflow-anchor:none}
.ct-tbl{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.ct-tbl.mini{box-shadow:none}
/* Les menus : des flèches de part et d'autre, cachées au bout et sur téléphone (le doigt fait défiler). */
.ct-mrw{position:relative}
.ct-fl{position:absolute;top:calc(50% - 30px);z-index:3;width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;color:var(--ink);transition:opacity .2s,transform .25s var(--sp)}
.ct-fl.g{left:-60px}.ct-fl.d{right:-60px}
/* Sans place sur les côtés, les flèches mordent à peine sur les cartes. */
@container (max-width:1220px){.ct-fl.g{left:-14px}.ct-fl.d{right:-14px}}
.ct-fl:hover{transform:translateY(-2px)}
.ct-fl:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ct-fl:disabled{opacity:0;pointer-events:none}
@container (max-width:640px){.ct-fl{display:none}}
/* Le dos d'un menu : tout se lit, sans « … » ; s'il y a beaucoup de plats, la liste défile. */
.ct-mc .ct-bk ul{overflow-y:auto;scrollbar-width:thin;gap:6px}
.ct-mc .ct-bk li span{white-space:normal;overflow:visible;text-overflow:clip}
/* Ce que Popotam fait des contraintes, sous le titre de la table dressée. */
.ct-note{display:flex;align-items:center;gap:10px;max-width:640px;margin:12px 0 0!important;padding:8px 14px 8px 8px;border-radius:16px;background:#fff;border:1.5px solid var(--line);font:600 13.5px/1.45 var(--fb);color:var(--ink2)}
.ct-note .fc{flex:none;width:34px;height:34px;border-radius:50%;background:var(--cream);overflow:hidden}
.ct-note .fc svg{width:100%;height:100%;display:block}
.ct-note .hl{font-weight:800;color:var(--ink)}