/* « TES PROCHAINES TABLÉES » SUR L'ACCUEIL (29/10/2026), d'après Refontes/design_handoff_tablees_noel/tablees-noel.html :
   la carte de Noël (.tv-xc, le 24 et le 25 décembre) et la carte ordinaire (.tv-oc). Classes préfixées tv- (le handoff
   disait .xc, .oc, .cal, .go : des noms déjà pris dans l'appli). Servi par popotam-table-ui.js (tablees). */
.tv{--tv-ink:#2A211B;--tv-ink2:#6A5C4C;--tv-orange:#F0682F;--tv-orange-d:#DA541E;--tv-orange-bg:#FCE3D8;--tv-cream2:#FCEFD9;--tv-dark:#33261B;
  --tv-red:#BE3A2B;--tv-gold:#F4C24D;--tv-fd:"Bricolage Grotesque",system-ui,sans-serif;--tv-fb:"Hanken Grotesk",system-ui,sans-serif;--tv-fh:"Caveat",cursive;--tv-sp:cubic-bezier(.3,1.35,.45,1);
  margin-top:26px;font-family:var(--tv-fb)}
.tv *,.tv *::before,.tv *::after{box-sizing:border-box}

/* ---------- l'en-tête de section ---------- */
.tv-hand{display:block;font:700 20px/1 var(--tv-fh);color:var(--tv-red);transform:rotate(-1.5deg);transform-origin:left}
.tv-sh h2{margin:4px 0 12px;font:800 22px var(--tv-fd);color:var(--tv-ink)}
.tv-list{display:flex;flex-direction:column;gap:14px;container-type:inline-size}
.tv-list>button{font:inherit;text-align:left;width:100%;margin:0;-webkit-appearance:none;appearance:none}

/* ================= LA CARTE DE NOËL ================= */
.tv-xc{--bg1:#244A36;--bg2:#163024;--txt:#FCF7EC;--sub:#CFE3D4;--acc:var(--tv-gold);
  position:relative;display:grid;grid-template-columns:108px minmax(0,1fr) auto;gap:18px 22px;align-items:center;min-height:196px;padding:42px 22px 20px 20px;
  border-radius:28px;border:2px solid var(--tv-ink);box-shadow:0 6px 0 var(--tv-ink);overflow:hidden;color:var(--txt);cursor:pointer;
  background:radial-gradient(520px 220px at 82% 120%,rgba(244,194,77,.22),transparent 70%),radial-gradient(400px 200px at 0% 0%,rgba(255,255,255,.08),transparent 70%),linear-gradient(160deg,var(--bg1),var(--bg2));
  transition:transform .4s var(--tv-sp),box-shadow .3s}
.tv-xc:hover{transform:translateY(-3px) rotate(-.3deg);box-shadow:0 9px 0 var(--tv-ink)}
.tv-xc:focus-visible,.tv-oc:focus-visible{outline:3px solid var(--tv-gold);outline-offset:3px}
/* le déjeuner du 25 : rouge, en plein jour */
.tv-xc.tv-day{--bg1:#C94434;--bg2:#9C2B1E;--sub:#FBD9CF;--acc:#FFE29A;
  background:radial-gradient(520px 220px at 82% 120%,rgba(255,226,154,.28),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 14px,transparent 14px 28px),linear-gradient(160deg,var(--bg1),var(--bg2))}

/* la neige qui tombe dans la carte */
.tv-sn{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tv-sn i{position:absolute;top:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);filter:blur(var(--b));animation:tvFall var(--d) linear var(--dl) infinite}
@keyframes tvFall{to{transform:translate(var(--w),230px)}}
.tv-xc:hover .tv-sn i{animation-duration:calc(var(--d) * .6)}
/* un petit tapis de neige en bas */
.tv-xc::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-14px;height:30px;border-radius:50%;background:radial-gradient(60% 100% at 30% 0,#fff,transparent 70%),radial-gradient(50% 100% at 75% 10%,#fff,transparent 70%);opacity:.55;pointer-events:none}

/* la guirlande lumineuse, en haut */
.tv-gl{position:absolute;left:0;right:0;top:0;height:40px;pointer-events:none}
.tv-gl svg{display:block;width:100%;height:100%}
.tv-gl .tv-bulb{transform-box:fill-box;transform-origin:50% 0;animation:tvTw 1.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.23s)}
@keyframes tvTw{0%,100%{opacity:1;filter:drop-shadow(0 0 5px currentColor)}50%{opacity:.45;filter:none}}
.tv-xc:hover .tv-gl .tv-bulb{animation-duration:.7s}

/* la page de calendrier */
.tv-cal{display:block;position:relative;z-index:2;align-self:start;width:108px;border-radius:16px;background:#FFFDF7;border:2px solid var(--tv-ink);box-shadow:0 4px 0 var(--tv-ink);color:var(--tv-ink);text-align:center;overflow:hidden;transform:rotate(-5deg);transition:transform .5s var(--tv-sp)}
.tv-xc:hover .tv-cal{transform:rotate(3deg) scale(1.04)}
.tv-m{display:block;padding:5px 0 4px;background:var(--tv-red);color:#fff;font:800 12px var(--tv-fb);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--tv-ink)}
.tv-d{display:block;font:800 44px/1 var(--tv-fd);letter-spacing:-.02em;padding-top:6px}
.tv-w{display:block;padding:2px 0 8px;font:700 13px var(--tv-fb);color:var(--tv-ink2)}
.tv-cal::before,.tv-cal::after{content:"";position:absolute;top:-5px;width:9px;height:14px;border-radius:5px;background:var(--tv-ink)}
.tv-cal::before{left:24px}.tv-cal::after{right:24px}
.tv-holly{position:absolute;right:-6px;top:20px;width:34px;height:26px}
.tv-cd{position:absolute;z-index:2;left:20px;bottom:16px;width:108px;text-align:center;font:700 19px/1 var(--tv-fh);color:var(--acc);transform:rotate(-3deg)}
.tv-cd.tv-jj{animation:tvJj 1.2s var(--tv-sp) infinite alternate}
@keyframes tvJj{to{transform:rotate(2deg) scale(1.08)}}

/* le contenu */
.tv-bd{position:relative;z-index:2;display:block;min-width:0;align-self:start}
.tv-tags{display:flex;flex-wrap:wrap;gap:6px}
.tv-tg{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 11px;border-radius:999px;font:800 12px var(--tv-fb);white-space:nowrap}
.tv-tg.tv-ev{background:var(--tv-red);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.tv-xc.tv-day .tv-tg.tv-ev{background:#fff;color:var(--tv-red)}
.tv-tg.tv-mo{background:rgba(255,255,255,.12);color:var(--txt)}
.tv-tg.tv-cv{background:var(--acc);color:var(--tv-ink)}
.tv-h3{display:block;margin:10px 0 0;font:800 24px/1.15 var(--tv-fd);letter-spacing:-.01em;text-wrap:balance}
/* les assiettes, en éventail */
.tv-pl{display:flex;align-items:center;margin-top:12px}
.tv-p{position:relative;flex:none;width:54px;height:54px;margin-right:-12px;border-radius:50%;background:var(--t,#fff);border:2px solid var(--tv-ink);padding:3px;overflow:hidden;transform:rotate(calc(var(--k) * 6deg - 12deg));transition:transform .45s var(--tv-sp);transition-delay:calc(var(--k) * 30ms)}
.tv-p img,.tv-p svg{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.tv-p.tv-more{display:grid;place-items:center;background:var(--acc);font:800 14px var(--tv-fd);color:var(--tv-ink)}
.tv-xc:hover .tv-p{transform:translateY(-6px) rotate(calc(var(--k) * 10deg - 20deg))}
.tv-dn{display:-webkit-box;margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--sub);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* les invités */
.tv-gu{display:flex;align-items:center;gap:10px;margin-top:12px;font:700 13.5px var(--tv-fb);color:var(--txt)}
.tv-avs{display:flex}
.tv-avs b{width:30px;height:30px;margin-right:-8px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--bg2);font:800 12px var(--tv-fd);color:#fff;background:var(--c);transition:transform .4s var(--tv-sp);transition-delay:calc(var(--k) * 40ms)}
.tv-avs b svg{width:14px;height:14px}
.tv-xc:hover .tv-avs b{transform:translateY(-4px)}
.tv-ns{min-width:0;text-wrap:pretty;margin-left:6px}

/* Popotam et le bouton */
.tv-sd{position:relative;z-index:2;align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px}
.tv-pp{width:92px;height:92px;margin:-10px -4px 0 0;transform-origin:50% 100%;animation:tvSway 3.2s ease-in-out infinite}
.tv-pp svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
@keyframes tvSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-3px)}}
.tv-xc:hover .tv-pp{animation:tvWave .6s var(--tv-sp) 2}
@keyframes tvWave{50%{transform:rotate(-12deg) scale(1.08)}}
.tv-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:14px;background:var(--acc);color:var(--tv-ink);border:2px solid var(--tv-ink);box-shadow:0 3px 0 var(--tv-ink);font:800 14.5px var(--tv-fd);white-space:nowrap;transition:transform .3s var(--tv-sp)}
.tv-go svg{transition:transform .3s var(--tv-sp)}
.tv-xc:hover .tv-go svg,.tv-oc:hover .tv-go svg{transform:translateX(4px)}

/* ---------- la carte ordinaire ---------- */
.tv-oc{--acc:var(--tv-orange-d);--txt:var(--tv-ink2);--sub:var(--tv-ink2);--bg2:#fff;
  position:relative;display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px 16px 16px;border-radius:24px;background:#fff;border:2px solid var(--tv-ink);box-shadow:0 5px 0 var(--tv-ink);color:var(--tv-ink);cursor:pointer;transition:transform .4s var(--tv-sp),box-shadow .3s}
.tv-oc:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--tv-ink)}
.tv-cw{display:flex;flex-direction:column;align-items:center;align-self:start}
.tv-oc .tv-cal{transform:rotate(-4deg);width:88px}.tv-oc .tv-m{background:var(--tv-orange)}.tv-oc .tv-d{font-size:34px}
.tv-oc .tv-tg.tv-ev{background:var(--tv-orange-bg);color:var(--tv-orange-d);border:0}.tv-oc .tv-tg.tv-cv{background:var(--tv-dark);color:#fff}.tv-oc .tv-tg.tv-mo{background:var(--tv-cream2);color:var(--tv-ink2)}
.tv-oc .tv-h3{margin:8px 0 0;font-size:19px;color:var(--tv-ink)}
.tv-oc .tv-dn{-webkit-line-clamp:1}
.tv-oc .tv-avs b{border-color:#fff}
.tv-oc .tv-go{background:#fff}
.tv-oc .tv-cd{position:static;width:auto;margin-top:6px;font-size:17px}
.tv-oc .tv-sd{align-self:center}

/* l'entrée : les cartes montent en cascade, au premier affichage */
.tv-entree .tv-list>button{animation:tvIn .52s var(--tv-sp) backwards;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes tvIn{from{opacity:0;transform:translateY(16px) rotate(-1deg)}}

/* ---------- téléphone ---------- */
@container (max-width:600px){
  .tv-xc,.tv-oc{grid-template-columns:84px minmax(0,1fr)}
  .tv-xc{padding:40px 14px 16px;gap:14px}
  .tv-xc .tv-cal,.tv-xc .tv-cd{width:84px}
  .tv-xc .tv-d{font-size:36px}
  .tv-xc .tv-cd{left:14px;bottom:auto;top:162px;font-size:17px}
  .tv-h3{font-size:20px}
  .tv-p{width:44px;height:44px}
  .tv-sd{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;margin-top:4px}
  .tv-pp{width:64px;height:64px;margin:0;order:2}
  .tv-go{flex:1;justify-content:center;margin-right:8px}
  .tv-oc{grid-template-columns:70px minmax(0,1fr);padding:14px}
  .tv-oc .tv-cal{width:70px}
  .tv-oc .tv-sd{margin-top:0}
  .tv-oc .tv-go{margin-right:0}
}
@media (prefers-reduced-motion:reduce){.tv-sn{display:none}.tv-gl .tv-bulb,.tv-pp,.tv-cd.tv-jj,.tv-entree .tv-list>button{animation:none}.tv-xc,.tv-cal,.tv-p,.tv-avs b{transition:none}}