/* Boucherie Sentenac, carte des fêtes dans la page Commander (même panier que les colis).
   Même identité que le reste du site : Baskerville, bordeaux, filets doubles. Pensé d'abord pour le pouce. */
html:has(#noel){scroll-padding-bottom:84px}
.fetes{gap:14px}
.fetes .nl-date{font:600 clamp(1.375rem,5.6vw,1.75rem)/1.25 var(--titre);text-wrap:balance}
.fetes .nl-date+.petit{margin-top:-4px}

/* ---------- chapitres : blocs repliables, comme les groupes de colis ---------- */
.fetes-carte{margin-top:6px}
.nl-chap>summary{font-size:1.5rem}
.nl-chap[open]>summary{border-bottom:4px double var(--rouge);margin-bottom:4px}
.nl-chap{padding-bottom:6px}
.nl-chap[open]{padding-bottom:28px}
.nl-chap-sous{margin-top:14px;max-width:38em;line-height:1.4}
.nl-sec{margin-top:26px}
.nl-sec h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;font-size:1.5rem;line-height:1.15;padding-bottom:8px;border-bottom:1px solid var(--filet)}
.nl-sec h3 small{font:italic 600 1.125rem/1.3 var(--titre);color:var(--rouge)}
.nl-poids{margin-top:14px;max-width:44em;padding:10px 14px;background:var(--voile);border-left:3px solid var(--rouge);border-radius:var(--r);font-size:1.0625rem;line-height:1.4}
.nl-note{margin-top:14px;max-width:44em;color:var(--gris);line-height:1.4}
.nl-note b{color:var(--noir)}
.nl-note a{color:var(--rouge);font-weight:600}

/* ---------- une ligne de la carte ---------- */
.nl-liste{display:grid;column-gap:56px;align-items:start}
.nl-liste .nl{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "p a";column-gap:12px;row-gap:4px;align-items:center;padding:14px 0;border-bottom:1px dotted var(--gris)}
.nl-t{grid-area:t;line-height:1.3}
.nl-n{display:block;font-weight:600;text-wrap:pretty}
.nl-t small{display:block;margin-top:2px;font-size:1rem;line-height:1.35;color:var(--gris)}
.nl-p{grid-area:p;font:600 1.5rem/1.1 var(--titre);color:var(--rouge);white-space:nowrap;font-variant-numeric:lining-nums}
.nl-p small{margin-left:8px;font:400 1rem/1.2 var(--texte);color:var(--gris)}
.nl-a{grid-area:a;justify-self:end}
.nl-a:empty,.nl-l:empty{display:none}
.nl-l,.nl-cfg{grid-column:1/-1}
.nl-contenu{margin:6px 0 2px;padding-left:20px;list-style:disc;font-size:1rem;line-height:1.4;color:var(--gris)}
@media(min-width:560px){
  .nl-liste .nl{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"t p a";column-gap:16px}
  .nl-p{text-align:right}
  .nl-p small{display:block;margin:2px 0 0}
}
.nl-add{font:600 1.0625rem/1 var(--texte);min-height:50px;padding:0 16px;border:2px solid var(--rouge);background:#fff;color:var(--rouge);border-radius:var(--r);cursor:pointer;transition:background .12s,color .12s}
.nl-add:hover{background:var(--rouge);color:#fff}
.nl-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:8px;padding:10px 12px;background:var(--voile);border-left:4px solid var(--rouge);border-radius:0 var(--r) var(--r) 0}
.teinte .nl-ligne,.teinte .nl-cfg{background:#fff}
.nl-lc{display:block;font-weight:600;line-height:1.3}
.nl-lq{display:block;font-size:1rem;line-height:1.35;color:var(--gris);font-variant-numeric:lining-nums}
.nl-libre{grid-template-columns:minmax(0,1fr)}
.nl-libre .nl-retirer{justify-self:end;min-height:44px;margin:-4px -4px -6px 0}
.nl-ligne label{font-size:1rem;margin-bottom:4px}
.nl-ligne input{min-height:50px}
.nl-ligne.bad .err{display:block}
.nl-ligne.bad input{border-color:var(--rouge)}
.nl-retirer{font:600 1rem/1 var(--texte);min-height:48px;padding:0 10px;background:none;border:0;color:var(--noir);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- les trois menus ---------- */
.nl-menus{display:grid;gap:22px;margin-top:16px}
.nl-menu{display:block;background:#fff;border:4px double var(--rouge);padding:22px 20px}
.nl-menu header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--filet)}
.nl-menu h3{font-size:1.875rem;line-height:1.1;font-style:italic}
.nl-menu .nl-p{font-size:2.25rem}
.nl-menu dt{margin-top:16px;font:600 .9375rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--rouge)}
.nl-menu dd{margin-top:2px;line-height:1.35;font-weight:500;text-wrap:pretty}
.nl-menu dd i{display:block;font:italic 1.0625rem/1.4 var(--titre);color:var(--gris)}
.nl-menu .nl-a{display:block;justify-self:stretch;margin-top:20px}
.nl-menu .nl-add{width:100%;min-height:56px;background:var(--rouge);color:#fff;letter-spacing:.04em}
.nl-menu .nl-add:hover{background:var(--rouge-f)}
.nl-menu.pris .nl-add{background:#fff;color:var(--rouge)}
.nl-menu .nl-l{margin-top:12px}
.nl-menu .nl-cfg{margin-top:14px}

/* ---------- choix d'un menu, d'une farce, d'une garniture ---------- */
.nl-cfg{display:grid;gap:18px;margin-top:10px;padding:16px;background:var(--voile);border:1.5px solid var(--rouge);border-radius:var(--r)}
.nl-cfg fieldset{gap:0}
.nl-cfg legend{font-size:1.375rem;margin-bottom:8px}
.nl-cfg .opt{padding:11px 12px;align-items:center}
.nl-cfg .opt input{margin:0}
.nl-cfg-a{display:grid;gap:6px}

/* ---------- farces ---------- */
.nl-farces{margin-top:20px;padding:18px;background:#fff;border:1px solid var(--filet);border-radius:var(--r);max-width:720px}
.nl-farces li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px dotted var(--gris);line-height:1.3}
.nl-farces li:first-child{margin-top:10px}
.nl-farces strong{display:block}
.nl-farces li b{font:600 1.25rem/1.1 var(--titre);color:var(--rouge);white-space:nowrap;font-variant-numeric:lining-nums}

/* ---------- récapitulatif, jours des fêtes ---------- */
.recap #sum>div{align-items:baseline}
.recap #sum small{display:block;font-size:1rem;line-height:1.35;color:var(--gris)}
.nl-m{white-space:nowrap;font-variant-numeric:lining-nums}
.recap .total b{white-space:nowrap}
#jours-fetes{display:grid;gap:16px}
#fetes-jours{display:grid;gap:18px}
.nl-lab{font:600 1.25rem/1.25 var(--titre);margin:0 0 8px}
.nl-lab small{display:block;font:400 1rem/1.35 var(--texte);color:var(--gris)}
.nl-fete.clos .nl-lab small{color:var(--rouge);font-weight:600}
.nl-jours{display:grid;gap:8px}
@media(min-width:560px){.nl-jours{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nl-jour{display:grid;gap:2px;justify-items:start;text-align:left;min-height:64px;padding:12px 14px;background:#fff;color:var(--noir);border:2px solid #6b5d52;border-radius:var(--r);cursor:pointer;font:400 1rem/1.25 var(--texte)}
.nl-jour .w{text-transform:capitalize;color:var(--gris)}
.nl-jour .d{font:600 1.375rem/1.15 var(--titre);font-variant-numeric:lining-nums}
.nl-jour[aria-pressed="true"]{background:var(--rouge);border-color:var(--rouge);color:#fff}
.nl-jour[aria-pressed="true"] .w{color:#fff}
.nl-jour:disabled{border-color:transparent;background:#f2eeeb;color:#8a7f76;cursor:default}
.opt.clos{background:#f2eeeb;border-color:#b8ada4;color:var(--gris);cursor:default}
.mini span{font-variant-numeric:lining-nums;line-height:1.25}
.mini small{display:block;font-size:.9375rem;font-weight:400}

/* ---------- familles de la commande (catalogue.js) : Colis de base, Colis de saison, la fête, rôtisserie, conviviaux ---------- */
.cache{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-f="lignes"]{gap:0}
[data-f="lignes"]>.err{margin:0 0 12px}
.fam-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.fam-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--filet);border-radius:999px;font:600 1rem/1.1 var(--texte);text-decoration:none;color:var(--noir);background:#fff;transition:border-color .12s,color .12s}
.fam-nav a:hover{border-color:var(--rouge);color:var(--rouge)}
.fam{margin-top:40px;scroll-margin-top:12px}
.fam-h{padding-top:14px;border-top:4px double var(--rouge);margin-bottom:6px}
.fam-h h2{font-size:clamp(1.875rem,7vw,2.375rem);margin:0}
.fam-h p{color:var(--gris);font-size:1.0625rem;line-height:1.35;margin-top:4px}
.fam-k{display:block;font:600 .9375rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--rouge);margin-bottom:4px}
fieldset.fam{padding-top:14px;border-top:4px double var(--rouge)}
fieldset.fam>legend{float:left;width:100%;font-size:clamp(1.875rem,7vw,2.375rem);line-height:1.1;margin:0 0 4px}
fieldset.fam>legend+*{clear:both}
.pk-seul{border-top:0}
.pk-seul .pk:first-child{border-top:0}
.sans-js{padding:14px 0}

/* ---------- page Commander facile (Quentin, 11/11) : 3 étapes numérotées, grosses cartes, panier toujours visible ---------- */
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;list-style:none;margin:6px 0 4px;counter-reset:none}
.pas a{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 4px;border-radius:var(--r);background:var(--voile);color:var(--gris);font:600 .9375rem/1.2 var(--texte);text-decoration:none;text-align:center}
.pas b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid currentColor;font:600 1.125rem/1 var(--titre)}
.pas li.ici a{background:var(--rouge);color:#fff}
.pas li.fait a{color:var(--rouge)}
.pas li.fait b{background:var(--rouge);border-color:var(--rouge);color:#fff}
legend.etape{display:flex;align-items:center;gap:12px;font-size:clamp(1.75rem,7vw,2.125rem)}
legend.etape b{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rouge);color:#fff;font:600 1.5rem/1 var(--titre)}
.fam-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 4px}
.fam-carte{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:118px;padding:14px;background:#fff;border:2px solid var(--filet);border-radius:var(--r);color:var(--noir);text-decoration:none;box-shadow:0 1px 2px rgba(42,33,28,.06),0 8px 20px -14px rgba(42,33,28,.4);transition:border-color .12s}
.fam-carte:hover,.fam-carte:focus-visible{border-color:var(--rouge)}
.fam-carte b{font:600 1.375rem/1.15 var(--titre);color:var(--rouge)}
.fam-carte span{font-size:1rem;line-height:1.3;color:var(--gris)}
.fam-carte.fete{background:var(--rouge);border-color:var(--rouge-f)}
.fam-carte.fete b,.fam-carte.fete span{color:var(--craie)}
.fam-sous{display:block;font:500 1.0625rem/1.3 var(--texte);color:var(--gris);margin-top:4px}
fieldset.fam>legend{display:block}
.mini.vide{background:var(--voile);color:var(--noir);box-shadow:0 -1px 0 var(--filet)}
.mini.vide button{background:var(--rouge);color:#fff}
.mini span{font-size:1.0625rem}
.commande{padding-bottom:140px}
@media(min-width:768px){.fam-cartes{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ══════════ 11/11 : page Commander vivante (demande de Quentin) ══════════ */
/* ---------- le haut de la partie fête : un panneau bordeaux, comme l'ardoise ; le décor de la fête (neige) y tombe ---------- */
fieldset.fetes.fam{border-top:0;padding-top:0}
fieldset.fetes.fam>legend.fete-tete{position:relative;overflow:hidden;margin:0 0 16px;padding:30px 24px 26px;background:var(--rouge);color:var(--craie);border-radius:var(--r);box-shadow:0 18px 36px -24px rgba(110,20,28,.7)}
.fete-tete::before{content:"";position:absolute;inset:8px;border:1px solid rgba(247,241,234,.45);border-radius:2px;pointer-events:none}
.fete-tete .fete-nom{display:block;font-style:italic;font-size:clamp(2.375rem,10vw,3.25rem);line-height:1.05}
.fete-tete .fam-sous{margin-top:8px;font:600 .9375rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--craie-2)}
.fam-carte.fete{overflow:hidden}

/* ---------- « Ajouté ✓ » : petite étiquette au-dessus du panier ---------- */
.mini-ok{position:absolute;left:var(--marge);bottom:calc(100% + 10px);padding:7px 14px;background:#fff;color:var(--rouge);border:1.5px solid var(--rouge);border-radius:999px;font:600 1rem/1.2 var(--texte);box-shadow:0 10px 22px -12px rgba(42,33,28,.55);pointer-events:none;white-space:nowrap}
.mini>span{transform-origin:left center}

@media(prefers-reduced-motion:no-preference){
  /* --- au toucher --- */
  .fam-carte,.pk-add,.pk-b,.nl-add,.day,.nl-jour,.mini button,.fam-nav a,.pas a,.nl-retirer{transition:transform .16s cubic-bezier(.2,.7,.2,1),background-color .18s,color .18s,border-color .18s,box-shadow .2s,opacity .15s}
  .fam-carte:active{transform:scale(.97)}
  .pk-add:active,.nl-add:active,.mini button:active,.nl-jour:active{transform:scale(.96)}
  .pk-b:active:not(:disabled),.day:active:not(:disabled){transform:scale(.92)}
  .opt{transition:border-color .18s,box-shadow .18s,background-color .18s}
  .opt:active{background:var(--voile)}
  .nl-retirer:active,.pas a:active{opacity:.65}
  @media(hover:hover){.fam-carte:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(42,33,28,.06),0 18px 30px -18px rgba(42,33,28,.5)}}
  /* --- arrivée sur la page : les 4 cartes, puis les listes --- */
  .fam-cartes .fam-carte{animation:monte .5s cubic-bezier(.2,.7,.2,1) backwards .05s}
  .fam-cartes .fam-carte:nth-child(2){animation-delay:.11s}
  .fam-cartes .fam-carte:nth-child(3){animation-delay:.17s}
  .fam-cartes .fam-carte:nth-child(4){animation-delay:.23s}
  .fam-l>*{animation:apparait .4s ease}
  .nl-cfg{animation:monte .3s cubic-bezier(.2,.7,.2,1)}
  /* --- un produit ajouté : sa quantité saute, le panier rebondit, « Ajouté ✓ » passe --- */
  .pk-q output{display:inline-block;animation:pop .3s cubic-bezier(.2,.7,.2,1)}
  .mini>span.boum,#s-total.boum{animation:rebond .55s cubic-bezier(.2,.7,.2,1)}
  #s-total{display:inline-block;transform-origin:right center}
  .mini-ok.vu{animation:ajoute 1.6s cubic-bezier(.2,.7,.2,1) both}
  .mini button.change{animation:change .36s cubic-bezier(.2,.7,.2,1)}   /* jamais plus petit que sa taille : il reste facile à toucher */
  .mini{transition:background-color .3s,color .3s}
  /* --- les 3 étapes : la couleur glisse, le numéro de l'étape où l'on arrive s'allume --- */
  .pas a{transition:background-color .35s,color .35s,opacity .15s}
  .pas b{transition:background-color .35s,border-color .35s,color .35s}
  .pas li.ici b{animation:pop .4s cubic-bezier(.2,.7,.2,1)}
  fieldset.arrive legend.etape b{animation:halo .9s ease-out}
  .day[aria-pressed="true"],.nl-jour[aria-pressed="true"]{animation:choisi .32s cubic-bezier(.2,.7,.2,1)}
  #jours-fetes:not([hidden]),#etape-adresse:not([hidden]),#etape-mode:not([hidden]){animation:monte .4s cubic-bezier(.2,.7,.2,1)}
  #days:not([hidden]){animation:apparait .4s ease}
}
@keyframes change{0%{transform:none}40%{transform:scale(1.07)}100%{transform:none}}
@keyframes choisi{0%{transform:scale(.93)}60%{transform:scale(1.04)}100%{transform:none}}

/* ══════════ 11/11 : page Commander sur toute la largeur (Quentin : « que ça prenne toute la page »).
   Téléphone : une colonne aérée. Tablette : la liste prend toute la largeur, en grille de cartes, panier en bas.
   Ordinateur : la liste à gauche, le panier en colonne fixe à droite. ══════════ */
.commande{max-width:1560px}
.commande .formulaire{max-width:none;grid-template-columns:minmax(0,1fr)}
.cmd-main,.cmd-panier{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;min-width:0}
/* l'en-tête, le bandeau et le pied s'alignent sur la page Commander, plus large que les autres */
body:has(.commande){--max:1464px;--bord:max(var(--marge),calc((100% - var(--max))/2))}
.cmd-main fieldset{grid-template-columns:minmax(0,1fr)}
.commande>.merci{margin:0 auto}
.panier-t{font-size:1.75rem;margin:0}
@media(min-width:768px){.commande{padding-top:40px}}
@media(min-width:1080px){
  .commande .formulaire{grid-template-columns:minmax(0,1fr) clamp(320px,26vw,380px);column-gap:clamp(32px,3.2vw,56px);align-items:start}
  .cmd-panier{position:sticky;top:16px;gap:16px;max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;padding:22px 22px 18px;background:#fff;border:1px solid var(--filet);border-radius:6px;box-shadow:0 1px 2px rgba(42,33,28,.06),0 22px 40px -30px rgba(42,33,28,.55)}
  .cmd-panier .recap{position:relative;border-top:4px double var(--rouge);padding-top:14px}
  .cmd-panier .recap .total b{font-size:2rem}
  .cmd-panier .petit{font-size:.9375rem;line-height:1.45}
  .cmd-panier .bouton{padding:0 14px;white-space:nowrap;letter-spacing:.02em}
  .cmd-panier .mini-ok{left:auto;right:0;bottom:auto;top:-12px}
  .mini{display:none!important}
  .commande{padding-bottom:var(--espace)}
}

/* ---------- les familles : chacune dans son panneau, avec son pictogramme, son titre et sa phrase ---------- */
.fam-zone{position:relative}
.fam-zone .fam,.fam-zone fieldset.fetes.fam{margin:28px calc(-1*var(--marge)) 0;padding:26px var(--marge) 30px;background:var(--voile);border-top:0;scroll-margin-top:60px}
.fam-barre+.fam{margin-top:72px}
@media(min-width:768px){
  .fam-zone .fam,.fam-zone fieldset.fetes.fam{margin:36px 0 0;padding:32px clamp(24px,2.6vw,40px) 36px;border-radius:6px}
  .fam-barre+.fam{margin-top:72px}
}
.fam-h{display:flex;align-items:center;gap:16px;padding:0 0 18px;margin:0 0 6px;border-top:0;border-bottom:4px double var(--rouge)}
.fam-h h2{font-size:clamp(2rem,7.4vw,2.75rem);line-height:1.05}
.fam-h p{margin-top:6px;font-size:1.0625rem}
.fam-picto{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fam-h>.fam-picto{box-sizing:content-box;width:30px;height:30px;padding:13px;border:1.5px solid var(--rouge);border-radius:50%;background:#fff;color:var(--rouge)}
@media(max-width:359px){.fam-h>.fam-picto{width:24px;height:24px;padding:10px}}

/* le haut de la partie fête : même repère, en bordeaux (le décor de la fête y tombe) */
/* téléphone : le titre garde toute la largeur, le pictogramme se pose devant « Noël et Nouvel An » ;
   l'arrivée par /noel garde le 1er menu commandable sans faire défiler */
fieldset.fetes.fam>legend.fete-tete{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;padding:32px 22px 18px}
.fete-tete>.fete-nom{grid-column:1/-1}
.fete-tete>.fam-sous{grid-column:2}
.fete-tete .fete-picto{grid-column:1;grid-row:2;width:22px;height:22px;margin-top:8px;color:var(--craie)}
.fam-zone fieldset.fetes.fam{scroll-margin-top:30px;padding-top:10px}
@media(max-width:559px){
  .fam-zone .fam-barre{height:52px;margin-bottom:-52px;padding:4px var(--marge)}
  .fetes.fam{gap:10px}
  .fetes .fetes-carte{margin-top:0}
  .fetes .nl-chap>summary{padding:14px 0 10px}
}
@media(min-width:560px){
  .fam-zone fieldset.fetes.fam{padding-top:32px}
  fieldset.fetes.fam>legend.fete-tete{column-gap:16px;padding:40px 24px 26px}
  .fete-tete>.fete-nom,.fete-tete>.fam-sous{grid-column:2}
  .fete-tete .fete-picto{grid-row:1/3;margin:0;box-sizing:content-box;width:30px;height:30px;padding:13px;border:1.5px solid rgba(247,241,234,.7);border-radius:50%}
  .fam-zone fieldset.fetes.fam{scroll-margin-top:60px}
}

/* ---------- la barre des familles : collée en haut pendant la liste ; la famille en cours s'allume ---------- */
.fam-barre{position:sticky;top:0;z-index:5;display:flex;gap:6px;height:60px;margin:0 calc(-1*var(--marge)) -60px;padding:8px var(--marge);overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--filet),0 12px 22px -20px rgba(42,33,28,.6)}
.fam-barre::-webkit-scrollbar{display:none}
.fam-barre a{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--filet);background:#fff;color:var(--noir);font:600 1rem/1.1 var(--texte);text-decoration:none;white-space:nowrap}
.fam-barre a .fam-picto{width:22px;height:22px;color:var(--rouge)}
.fam-barre a.ici{background:var(--rouge);border-color:var(--rouge);color:#fff}
.fam-barre a.ici .fam-picto{color:#fff}
@media(min-width:768px){.fam-barre{margin:0 0 -60px;padding:8px 0;justify-content:flex-start;overflow:visible}.fam-barre a{flex:1 1 0;justify-content:center;min-width:0}}
html.barre-js .fam-barre:not(.vue){opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none}

/* ---------- les produits : une carte chacun, en grille sur tablette et ordinateur ---------- */
.fam-zone .pk-g{border-top:1px solid var(--filet)}
.fam-zone .pk-g:last-child{border-bottom:0}
.fam-zone .pk-g.pk-seul{border-top:0}
.fam-zone .pk-g>summary{padding:16px 0 12px}
.pk-grille{display:grid;gap:12px;padding:4px 0 20px}
.pk-grille .pk{padding:16px;border-top:0;background:#fff;border:1px solid var(--filet);border-radius:6px;box-shadow:0 1px 2px rgba(42,33,28,.05),0 10px 22px -20px rgba(42,33,28,.5)}
/* photo du colis (13/11) : à gauche au téléphone ; en haut de la carte, bord à bord, dès 560 px */
.pk.pk-photo{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"ph t" "ph q";align-items:start;column-gap:14px;row-gap:10px}
.pk-ph{grid-area:ph;display:block;width:96px;aspect-ratio:4/3;border-radius:4px;overflow:hidden;background:#050505}
.pk-ph img{width:100%;height:100%;object-fit:cover}
.pk-photo .pk-t{grid-area:t}
.pk-photo .pk-q{grid-area:q;justify-self:end}
.pk-grille .pk:has(output){border-color:var(--rouge);box-shadow:inset 0 0 0 1px var(--rouge),0 10px 22px -20px rgba(110,20,28,.6)}
@media(min-width:560px){
  .pk-grille{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
  .pk-grille .pk{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px}
  .pk-grille .pk-t{flex:1;display:flex;flex-direction:column}
  .pk-grille .pk-t small{flex:1}
  .pk-grille .pk-t b{font-size:1.875rem;margin-top:12px}
  .pk-grille .pk-q{justify-content:space-between}
  .pk-grille .pk-add{flex:1}
  .pk-grille .pk-q output{flex:1}
  .pk-grille .pk-ph{width:auto;margin:-18px -18px 0;border-radius:5px 5px 0 0}
}

/* la carte de la fête : chaque article est une carte, les menus côte à côte */
.fetes .nl-liste .nl{padding:14px 16px;margin-top:10px;background:#fff;border:1px solid var(--filet);border-bottom:1px solid var(--filet);border-radius:6px}
.fetes .nl-liste .nl.pris{border-color:var(--rouge);box-shadow:inset 0 0 0 1px var(--rouge)}
@media(min-width:560px){
  .fetes .nl-liste{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
  .fetes .nl-liste .nl{margin:0;height:100%;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t t" "p a";align-items:end;row-gap:14px;align-content:space-between}
  .fetes .nl-liste .nl .nl-t{align-self:start}
  .fetes .nl-p{text-align:left}
  .nl-menus{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:start}
  .nl-menus .nl-menu h3{font-size:1.625rem}
  .nl-menus .nl-menu .nl-p{font-size:2rem}
}
.fetes .nl-sec h3{border-bottom-color:var(--filet)}
.fetes .nl-farces{background:#fff}
.fetes .nl-chap{border-top-color:var(--filet)}
.fetes .nl-chap:last-child{border-bottom:0}

/* ---------- guirlande lumineuse de Noël : en haut de la partie Noël et sur sa carte, derrière rien, jamais sous le doigt ---------- */
.fete-tete .guirlande,.fam-carte .guirlande{position:absolute;z-index:1;left:12px;right:12px;top:8px;height:22px;display:flex;pointer-events:none}
.fam-carte .guirlande{left:6px;right:6px;top:6px}
.guirlande i{flex:1;position:relative}
.guirlande i::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border:1.5px solid rgba(247,241,234,.5);border-top:0;border-radius:0 0 50% 50%/0 0 100% 100%}
.guirlande i::after{content:"";position:absolute;left:50%;top:8px;width:7px;height:10px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:#ffe6a8;box-shadow:0 0 5px 1px rgba(255,214,128,.75),0 0 14px 3px rgba(255,206,110,.3)}
.guirlande i:nth-child(2n)::after{background:#fff6e2}
.fam-carte.fete{padding-top:34px}
@media(prefers-reduced-motion:no-preference){
  .guirlande i::after{animation:scintille 3.2s ease-in-out infinite}
  .guirlande i:nth-child(3n+1)::after{animation-duration:2.6s;animation-delay:-.9s}
  .guirlande i:nth-child(3n+2)::after{animation-duration:3.8s;animation-delay:-2.1s}
  .guirlande i:nth-child(4n)::after{animation-delay:-1.4s}
}
@keyframes scintille{0%,100%{opacity:1}45%{opacity:.38}60%{opacity:.9}}

/* ---------- le site vivant sur la page Commander : sections, cartes et barre arrivent en douceur ---------- */
@media(prefers-reduced-motion:no-preference){
  html.anim .fetes .cas{transform:translateY(18px) scale(.97)}
  html.anim .fetes .cas.in{transform:none}
  html.anim .fam-h.cas>.fam-picto{transform:scale(.6) rotate(-12deg);opacity:0}
  html.anim .fam-h.cas.in>.fam-picto{transform:none;opacity:1;transition:transform .6s cubic-bezier(.2,1.3,.3,1) calc(var(--d,0ms) + .12s),opacity .4s ease calc(var(--d,0ms) + .12s)}
  /* les prix arrivent juste après leur carte, sans changer de valeur */
  html.anim .cas .pk-t b,html.anim .cas .nl-p{opacity:0;transform:translateY(.35em)}
  html.anim .cas.in .pk-t b,html.anim .cas.in .nl-p{opacity:1;transform:none;transition:opacity .45s ease calc(var(--d,0ms) + .18s),transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--d,0ms) + .18s)}
  .fam-barre{transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),visibility .25s}
  .fam-barre a{transition:background-color .3s,border-color .3s,color .3s,transform .16s cubic-bezier(.2,.7,.2,1)}
  .fam-barre a:active{transform:scale(.96)}
  .fam-barre a.ici .fam-picto{animation:pop .4s cubic-bezier(.2,.7,.2,1)}
  @media(hover:hover){.fam-barre a:not(.ici):hover{border-color:var(--rouge);color:var(--rouge)}.pk-grille .pk,.fetes .nl-liste .nl{transition:box-shadow .2s,border-color .2s}.pk-grille .pk:hover,.fetes .nl-liste .nl:hover{box-shadow:0 1px 2px rgba(42,33,28,.06),0 18px 30px -22px rgba(42,33,28,.55)}}
}

/* 13/11 : « Nos incontournables » et « Les rendez-vous conviviaux » (noms de Chrystèle) doivent tenir dans les cartes
   et les titres d'un téléphone de 320 px : césure française (lang="fr") et titres un peu plus petits sous 400 px. */
.fam-carte b,.fam-h h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
@media(max-width:400px){.fam-carte b{font-size:1.1875rem}.fam-h h2{font-size:clamp(1.875rem,7.4vw,2.75rem)}}

/* ---------- 13/11 (Quentin) : produits au poids, le client choisit le poids voulu ---------- */
.nl-pds-r{display:flex;flex-wrap:wrap;gap:8px}
.nl-pds-b{min-height:48px;padding:0 14px;background:#fff;color:var(--noir);border:1.5px solid #6b5d52;border-radius:var(--r);font:600 1.0625rem/1 var(--texte);font-variant-numeric:lining-nums;cursor:pointer;white-space:nowrap}
.nl-pds-b[aria-pressed="true"]{background:var(--rouge);border-color:var(--rouge);color:#fff}
.nl-pds-autre{margin-top:12px}
.nl-pds-autre label{font-weight:600}
.nl-pds-l{display:flex;gap:8px;align-items:stretch}
.nl-pds-l input{width:9em;max-width:60%}
.nl-pds-l select{min-height:56px;padding:0 14px;font:600 1.0625rem/1 var(--texte);color:var(--noir);background:#fff;border:2px solid #6b5d52;border-radius:var(--r)}
.nl-pds-m{margin-top:12px;font-size:1rem;line-height:1.45;color:var(--gris)}
.nl-pds-m.ok{color:var(--noir);padding:10px 12px;background:#fff;border-left:4px solid var(--rouge);border-radius:0 var(--r) var(--r) 0}
.nl-pds-m.err-v{color:var(--rouge);font-weight:600}
.nl-pds.bad .nl-pds-b:not([aria-pressed="true"]){border-color:var(--rouge)}
.nl-cfg .bouton:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.nl-prec label{font-weight:600}
.nl-lacts{display:flex;justify-content:flex-end;gap:4px}
.nl-libre .nl-lacts .nl-retirer{min-height:44px}
@media(prefers-reduced-motion:no-preference){
  .nl-pds-b{transition:background-color .15s,border-color .15s,color .15s,transform .16s cubic-bezier(.2,.7,.2,1)}
  .nl-pds-b:active{transform:scale(.96)}
  .nl-pds-b[aria-pressed="true"]{animation:pop .3s cubic-bezier(.2,.7,.2,1)}
  .nl-pds-m.ok{animation:apparait .3s ease}
}
/* le choix du poids (ou d'une farce) s'ouvre sur toute la largeur de la liste : les cartes voisines gardent leur hauteur */
@media(min-width:768px){
  .fetes .nl-liste .nl:has(.nl-cfg){grid-column:1/-1;height:auto}
  .fetes .nl-liste .nl:has(.nl-cfg) .nl-cfg{max-width:720px}
}

/* ---------- 14/11 (Chrystèle) : viandes à la pièce, conseil de quantité, Noir de Bigorre, livraison pendant les fêtes ---------- */
.nl-pieces .nl-modif{grid-column:1/-1;justify-self:end;min-height:44px;margin:-6px -4px -6px 0}
.nl-cpt .pk-q{margin-top:2px}
.nl-cpt .pk-q output{min-width:44px;font-size:1.25rem}
.nl-pds-m:empty{display:none}
.nl-conseil{margin-top:14px;max-width:44em;padding:12px 16px;background:var(--rouge);color:#fff;border-radius:var(--r);font:600 1.1875rem/1.35 var(--texte)}
.nl-alerte{margin:10px 0 2px;padding:8px 12px;border:2px solid var(--rouge);border-radius:var(--r);color:var(--rouge);font-weight:700;line-height:1.35}
.nl-regle strong{display:block;margin-top:10px;padding:10px 14px;background:var(--rouge);color:#fff;border-radius:var(--r);font-weight:700;font-size:1.125rem;line-height:1.35}