/* Boucherie Sentenac. Identité de la 1re version : Baskerville, bordeaux, filets doubles, ardoise, étiquette.
   Blanc franc et zones rouge sombre. Texte grand et contrasté : lisible par tous, au pouce d'abord. */
@font-face{font-family:'Inter';font-weight:400;font-display:swap;src:local('Inter'),url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-display:swap;src:local('Inter Medium'),url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-display:swap;src:local('Inter SemiBold'),url(fonts/inter-latin-600-normal.woff2) format('woff2')}
:root{
  color-scheme:light;
  --rouge:#8e1b26; --rouge-f:#6e141c; --noir:#2a211c; --gris:#5f5248; --filet:#d9cdbb; --voile:#f4efeb; --craie:#f7f1ea; --craie-2:#e6dad2;
  --titre:"Baskerville","Baskerville Old Face","Hoefler Text",Georgia,serif;
  --texte:"Avenir Next","Avenir","Helvetica Neue",Inter,system-ui,sans-serif;
  --marge:22px; --max:1120px; --r:4px; --espace:64px;
  --bord:max(var(--marge),calc((100% - var(--max))/2));
}
@media(min-width:768px){:root{--marge:48px;--espace:96px}}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{background:#fff;color:var(--noir);font:400 1.1875rem/1.55 var(--texte);-webkit-font-smoothing:antialiased;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
body.sans-barre{padding-bottom:0}
main{flex:1}
a{color:inherit;text-underline-offset:3px}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--noir);outline-offset:2px}
.bande-rouge :focus-visible,.une :focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
sup{font-size:.65em;line-height:0}
.nw{white-space:nowrap}
.marge{margin-top:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

h1,h2,h3,.prix,.prix-seul,legend{font-family:var(--titre);font-weight:600;font-variant-numeric:lining-nums}
h1{font-size:clamp(2.75rem,11vw,5rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(2.125rem,8vw,3.25rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:14px;text-wrap:balance}
h1 em,h2 em{font-style:italic}
.chapo{font-size:clamp(1.25rem,4.6vw,1.4375rem);line-height:1.42;max-width:34em;text-wrap:pretty}
.petit{font-size:1.0625rem;color:var(--gris)}
.eyebrow{display:flex;align-items:center;gap:12px;font:600 .9375rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--rouge);margin-bottom:14px}
.eyebrow::before{content:"";width:24px;height:1px;background:currentColor;flex:none}
.eyebrow.centre{justify-content:center}
.eyebrow.centre::after{content:"";width:24px;height:1px;background:currentColor;flex:none}

.apercu{background:var(--noir);color:#fff;font-size:.875rem;padding:3px var(--marge);text-align:center}
.bandeau{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px var(--bord);background:var(--rouge-f);color:#fff;font-size:1rem;line-height:1.25}
.bandeau a{font-weight:600;font-size:1.125rem;font-variant-numeric:lining-nums;text-decoration:none;white-space:nowrap;min-height:32px;display:inline-flex;align-items:center;margin-left:auto}

/* ---------- en-tête ---------- */
.tete{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px var(--bord);background:#fff;box-shadow:0 1px 0 var(--rouge),0 4px 0 #fff,0 5px 0 var(--rouge);margin-bottom:5px;z-index:3}
.marque{flex:0 0 auto;display:block}
.marque img{width:170px}
.burger{font:600 1rem/1 var(--texte);letter-spacing:.06em;min-height:50px;padding:0 18px;background:#fff;color:var(--noir);border:2px solid var(--noir);border-radius:var(--r);cursor:pointer}
.burger[aria-expanded="true"]{background:var(--noir);color:#fff}
.menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 5px);background:#fff;box-shadow:0 18px 28px -18px rgba(42,33,28,.5);padding:4px var(--marge) 20px}
.menu.ouvert{display:grid}
.menu a{display:flex;align-items:center;min-height:56px;font:600 1.5rem/1.1 var(--titre);text-decoration:none;border-bottom:1px dotted var(--gris)}
.menu a[aria-current]:not(.bouton){color:var(--rouge)}
.menu .nav-commander{justify-content:center;margin-top:16px;border:1px solid var(--rouge-f);color:#fff;font:600 1.0625rem/1 var(--texte)}
@media(min-width:1080px){
  body{padding-bottom:0}
  .marque img{width:230px}
  .burger{display:none}
  .menu{display:flex;position:static;align-items:center;gap:clamp(16px,2vw,28px);padding:0;box-shadow:none}
  .menu a{border:0;min-height:44px;font:500 1.0625rem/1 var(--texte);white-space:nowrap}
  .menu a:not(.bouton):hover{color:var(--rouge)}
  .menu a[aria-current]:not(.bouton){box-shadow:inset 0 -2px 0 var(--rouge)}
  .menu .nav-commander{margin:0 0 0 4px;min-height:50px;font:600 1rem/1 var(--texte)}
  .barre{display:none!important}
}

/* ---------- boutons, liens ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;background:var(--rouge);color:#fff;border:1px solid var(--rouge-f);border-radius:var(--r);font:600 1.0625rem/1.2 var(--texte);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 1px 0 var(--rouge-f),0 10px 20px -14px rgba(110,20,28,.7);transition:background .15s,transform .15s}
.bouton:hover{background:var(--rouge-f)}
.bouton:active{transform:translateY(1px)}
.bouton:disabled{opacity:.55;cursor:default}
.bouton.plein{width:100%}
.bouton.craie{background:var(--craie);color:var(--noir);border-color:var(--craie);box-shadow:none}
.bouton.craie:hover{background:#fff}
.lien{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:10px;font-weight:600;color:var(--rouge);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lien::after{content:"→";display:inline-block;transition:transform .18s}
.lien:hover::after{transform:translateX(4px)}
.barre{position:fixed;left:0;right:0;bottom:0;z-index:4;display:grid;grid-template-columns:2fr 3fr;padding-bottom:env(safe-area-inset-bottom);background:var(--rouge);box-shadow:0 -1px 0 rgba(42,33,28,.3)}
.barre a{display:flex;align-items:center;justify-content:center;min-height:64px;font:600 1.125rem/1 var(--texte);text-decoration:none;letter-spacing:.03em}
.barre-appeler{background:#fff;color:var(--noir);box-shadow:inset 0 2px 0 var(--rouge)}
.barre-commander{background:var(--rouge);color:#fff}

/* ---------- la une ---------- */
.une{position:relative;overflow:hidden;background:var(--rouge);color:var(--craie);padding:44px var(--bord) 72px;display:grid}
.une::before{content:"";position:absolute;left:0;right:0;bottom:10px;height:5px;border-top:1px solid rgba(247,241,234,.45);border-bottom:1px solid rgba(247,241,234,.45)}
.une .eyebrow{color:var(--craie-2)}
.une h1{color:var(--craie);max-width:13em}
.une .chapo{margin-top:18px;color:var(--craie);max-width:30em}
.une .bouton{margin-top:24px;justify-self:start}
.une-texte{position:relative;z-index:1}
.une-vache{position:absolute;right:-34px;bottom:-30px;width:210px;filter:invert(1) brightness(.97);opacity:.16;pointer-events:none}
.une.courte{padding-bottom:64px}
@media(min-width:768px){
  .une{padding:80px var(--bord) 112px}
  .une-vache{right:var(--bord);bottom:0;width:clamp(260px,30vw,380px);opacity:.9}
  .une-texte{max-width:calc(100% - clamp(280px,32vw,420px))}
}

/* ---------- trois portes ---------- */
.portes{position:relative;z-index:2;margin:-44px var(--bord) 0;display:grid;background:#fff;box-shadow:0 18px 36px -24px rgba(42,33,28,.55)}
.porte{display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:20px;text-decoration:none;border-bottom:1px solid var(--filet);transition:background .15s}
.porte:last-child{border-bottom:0}
.porte b{font:600 clamp(1.5rem,5.6vw,1.75rem)/1.12 var(--titre)}
.porte span{grid-column:1;margin-top:4px;font-size:1.0625rem;line-height:1.3;color:var(--gris)}
.porte::after{content:"→";grid-column:2;grid-row:1/3;align-self:center;font-size:1.625rem;color:var(--rouge);transition:transform .18s}
.porte:hover{background:var(--voile)}
.porte:hover::after{transform:translateX(4px)}
.porte-1 b{color:var(--rouge)}
@media(min-width:900px){
  .portes{grid-template-columns:5fr 4fr 4fr}
  .porte{border-bottom:0;border-right:1px solid var(--filet);padding:26px 24px}
  .porte:last-child{border-right:0}
}

/* ---------- sections ---------- */
.bloc{padding:var(--espace) var(--bord)}
.bloc.serre{padding-top:28px}
.teinte{background:var(--voile)}
.tete-page{padding:44px var(--bord) 8px}
.tete-page .chapo{margin-top:12px}
.tete-page::after{content:"";display:block;height:5px;margin-top:28px;border-top:1px solid var(--rouge);border-bottom:1px solid var(--rouge)}
.cote{display:grid;gap:14px}
.grand-ecran{display:none}
@media(min-width:768px){
  .cote{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
  .grand-ecran{display:inline-flex}
  .petit-ecran{display:none}
}
.bande-rouge{position:relative;background:var(--rouge);color:var(--craie)}
.bande-rouge::before,.bande-rouge::after{content:"";position:absolute;left:0;right:0;height:5px;border-top:1px solid rgba(247,241,234,.45);border-bottom:1px solid rgba(247,241,234,.45)}
.bande-rouge::before{top:10px}
.bande-rouge::after{bottom:10px}
.bande-rouge .eyebrow{color:var(--craie-2)}
.bande-rouge .lien{color:var(--craie)}
.bande-rouge .prix-seul{color:var(--craie)}

/* ---------- ardoise ---------- */
.ardoise{position:relative;background:var(--rouge);color:var(--craie);border-radius:var(--r);padding:34px 28px;box-shadow:0 18px 36px -24px rgba(110,20,28,.7);display:grid;gap:18px}
.ardoise::before{content:"";position:absolute;inset:8px;border:1px solid rgba(247,241,234,.45);border-radius:2px;pointer-events:none}
.ard-k{font:600 .9375rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--craie-2)}
.ardoise h2{font-style:italic;font-size:clamp(2.75rem,12vw,4.25rem);margin:6px 0 10px;color:var(--craie)}
.ard-l li{padding:8px 0;font-size:clamp(1.25rem,4.6vw,1.4375rem);line-height:1.3;border-bottom:1px dotted rgba(247,241,234,.55)}
.ard-achat{position:relative;display:grid;gap:12px;align-content:center}
.ard-prix{font:600 clamp(4rem,18vw,6rem)/1 var(--titre);font-variant-numeric:lining-nums}
.ard-n{color:var(--craie-2)}
@media(min-width:768px){.ardoise{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:48px;column-gap:64px;align-items:center}}

/* ---------- au comptoir : le mur de produits ---------- */
.comptoir{background:var(--noir);color:var(--craie)}
.comptoir .lien{color:var(--craie);margin-top:14px}
.comptoir .cliche{margin-bottom:22px}
.comptoir .chapo{margin-top:8px;color:var(--craie)}

/* ---------- exemples, prix ---------- */
.exemples{border-top:1px solid var(--noir)}
.exemples li{display:grid;grid-template-columns:50px minmax(0,1fr) auto;column-gap:12px;align-items:baseline;padding:16px 0;border-bottom:1px dotted var(--gris)}
.exemples .kg{font:italic 600 1.125rem/1.3 var(--titre);color:var(--gris)}
.exemples .quoi{line-height:1.32}
.exemples .quoi::first-letter{text-transform:uppercase}
.exemples li{grid-template-columns:var(--ph-mini) minmax(0,1fr) auto;grid-template-areas:"ph kg prix" "ph quoi quoi";row-gap:4px;align-items:start}
.ex-photo{grid-area:ph;width:var(--ph-mini);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#050505}
.exemples li .kg{grid-area:kg;align-self:baseline}
.exemples li .prix{grid-area:prix;align-self:baseline}
.exemples li .quoi{grid-area:quoi}
.prix{font-size:1.875rem;line-height:1.1;color:var(--rouge);white-space:nowrap}
.prix small{display:block;font:400 .9375rem/1.2 var(--texte);color:var(--gris)}
.prix-seul{font-size:clamp(3rem,12vw,4.25rem);line-height:1;color:var(--rouge);margin:10px 0 18px}

/* ---------- à table ---------- */
.table{display:grid;gap:40px}
.grand-chiffre{font:600 clamp(3rem,12vw,4.25rem)/1 var(--titre);color:var(--rouge);font-variant-numeric:lining-nums;margin-bottom:12px}
.grand-chiffre small{font:500 1.125rem/1.2 var(--texte);color:var(--gris)}
@media(min-width:768px){.table{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,88px);align-items:center}.table-buffet{border-left:4px double var(--filet);padding-left:clamp(32px,4vw,56px)}}

/* ---------- étiquette ---------- */
.fid-bloc{padding-bottom:var(--espace)}
.etiquette{max-width:660px;margin:0 auto;border:4px double var(--noir);padding:32px 22px;text-align:center;width:100%}
.etiquette h2{margin-bottom:12px}
.etiquette .petit{margin-top:10px}
.trois{display:grid;gap:22px;margin:18px 0 8px}
.trois h3{font:600 1.0625rem/1.3 var(--texte);color:var(--gris);margin-bottom:2px}
#jour-heures{font-weight:500}
.tel-moyen a,.tel-grand a{font:600 1.75rem/1.1 var(--titre);font-variant-numeric:lining-nums;color:var(--noir);text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.tel-grand a{font-size:clamp(2.25rem,10vw,3rem);margin-top:18px}
@media(min-width:768px){.trois{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:32px}}

/* ---------- colis ---------- */
.filtres{display:inline-grid;grid-template-columns:repeat(4,auto);gap:6px;margin:4px 0 12px}
.filtres button{font:600 1.125rem/1 var(--texte);min-height:50px;padding:0 16px;background:#fff;color:var(--noir);border:1.5px solid var(--noir);border-radius:var(--r);cursor:pointer;transition:background .12s}
.filtres button[aria-pressed="true"]{background:var(--noir);color:#fff}
.tableau{display:grid;column-gap:56px}
@media(min-width:900px){.tableau{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ligne{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:10px;padding:20px 0;border-bottom:1px dotted var(--gris);align-content:start}
.ligne p{line-height:1.34;text-wrap:pretty}
.ligne strong{display:block;font:600 1.5rem/1.15 var(--titre);margin-bottom:3px}
.cartes .ligne{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"vis t t" "d d cmd";column-gap:14px;row-gap:10px;align-items:start;padding:18px 0}
.carte-vis{grid-area:vis;width:76px;height:76px;display:grid;place-content:center;justify-items:center;background:var(--rouge);color:var(--craie);border-radius:var(--r);box-shadow:inset 0 0 0 5px var(--rouge),inset 0 0 0 6px rgba(247,241,234,.5)}
.carte-vis b{font:600 2.125rem/1 var(--titre);font-variant-numeric:lining-nums}
.carte-vis span{font:600 .875rem/1.1 var(--texte);letter-spacing:.06em;text-transform:uppercase}
.carte-t{grid-area:t;display:grid;gap:2px;align-self:center}
.carte-t h3{font-size:1.3125rem;line-height:1.22;text-wrap:pretty}
.cartes .commander{grid-area:cmd;justify-self:end}
.carte-d{grid-area:d;align-self:center}
.carte-d summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--noir);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.carte-d ul{margin:4px 0 2px;padding-left:20px;list-style:disc;line-height:1.4}
.carte-d li+li{margin-top:2px}
/* photos des colis (Chrystèle, 13/11/2026) : même cadrage 4:3 partout, sur le noir des photos ; le poids reste écrit dessus */
:root{--ph:clamp(112px,34vw,168px);--ph-mini:88px}
@media(min-width:768px){:root{--ph-mini:112px}}
.cartes .ligne{grid-template-columns:auto minmax(0,1fr) auto}
.carte-vis.carte-photo{position:relative;display:block;width:var(--ph);height:auto;aspect-ratio:4/3;overflow:hidden;background:#050505;box-shadow:none}
.carte-photo picture,.ligne-photo picture,.ex-photo,.cliche picture{display:block}
.carte-photo img,.ligne-photo img,.ex-photo img{width:100%;height:100%;object-fit:cover}
.carte-photo .carte-kg{position:absolute;left:6px;bottom:6px;display:flex;align-items:baseline;gap:3px;padding:4px 7px 3px;background:var(--rouge);color:var(--craie);border-radius:3px;box-shadow:0 0 0 1px rgba(247,241,234,.4)}
.carte-photo .carte-kg b{font:600 1.125rem/1 var(--titre)}
.carte-photo .carte-kg span{font:600 .75rem/1 var(--texte);letter-spacing:.06em;text-transform:uppercase}
.ligne-photo{grid-column:2;width:var(--ph);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#050505}
.bandeau-photo{margin:14px 0 18px}
.cliche.bandeau-photo img{max-height:420px;object-fit:cover}
.commander{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:50px;padding:0 20px;border:1.5px solid var(--rouge);border-radius:var(--r);font-weight:600;color:var(--rouge);text-decoration:none;transition:background .12s,color .12s}
.commander:hover{background:var(--rouge);color:#fff}
.encart{margin-top:28px;padding:16px 18px;background:var(--voile);border-radius:var(--r);max-width:720px}

.formulaire .encart{margin-top:0}
.travaux{margin-top:14px;max-width:34em}
#livraison p:not(.chapo):not(.eyebrow){margin-top:12px;max-width:34em}
.cliche{margin:0;max-width:1100px}
.cliche img{width:100%;height:auto;aspect-ratio:auto;border-radius:var(--r);background:var(--voile)}
.cliche figcaption{margin-top:10px;font-size:1.0625rem;color:var(--gris)}
.infos .cliche{margin:18px 0 8px}
@media(min-width:768px){.cliche img{max-height:620px;object-fit:cover}}
#equipe .cliche{margin-top:22px}
.duo{display:grid;gap:14px}
@media(min-width:768px){.duo{grid-template-columns:1fr 1fr;gap:18px}.duo .cliche img{aspect-ratio:4/3;object-fit:cover}}
.dates b{font-variant-numeric:lining-nums}
.chapo + .chapo{margin-top:14px}
#acces p:not(.chapo){margin-top:14px;max-width:34em}
/* ---------- maison ---------- */
.grand-texte p{font:600 clamp(2rem,7.8vw,3.5rem)/1.16 var(--titre);max-width:20em;text-wrap:pretty}
.grand-texte .bouton{margin-top:28px}
.metiers{border-top:1px solid var(--noir)}
.metiers li{padding:16px 0;border-bottom:1px dotted var(--gris)}
.metiers b{display:block;font:600 1.625rem/1.2 var(--titre)}
.metiers span{display:block;max-width:34em}
#provenance .chapo{margin-top:12px}

/* ---------- traiteur ---------- */
.buffet p:not(.petit){display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px dotted var(--gris);line-height:1.35}
.buffet strong{display:block;font:600 1.5rem/1.2 var(--titre)}
.buffet .petit{margin-top:14px}
.vignettes{display:flex;gap:10px;margin-top:10px}
.vignettes img{width:150px;height:150px;object-fit:cover;border-radius:var(--r)}
.roti-achat .prix-seul{margin-top:0}
#devis .merci h3{font-size:2rem}

/* ---------- contact ---------- */
.contact{align-items:start}
.et-adresse{font:600 clamp(1.5rem,6vw,1.875rem)/1.25 var(--titre);margin-bottom:18px}
.heures{border-collapse:collapse;width:100%}
.heures th{text-align:left;font-weight:600;padding:10px 12px 10px 0;vertical-align:top}
.heures td{padding:10px 0;text-align:right;font-variant-numeric:lining-nums}
.heures tr{border-bottom:1px dotted var(--gris)}
.heures tr.today th,.heures tr.today td{color:var(--rouge)}

/* ---------- pied ---------- */
.pied{position:relative;background:var(--rouge-f);color:var(--craie);padding:40px var(--bord) 28px;display:grid;gap:14px;font-size:1.0625rem}
.pied::before{content:"";position:absolute;left:0;right:0;top:10px;height:5px;border-top:1px solid rgba(247,241,234,.35);border-bottom:1px solid rgba(247,241,234,.35)}
.pied-nom{font:600 1.375rem/1.2 var(--titre);margin-bottom:4px}
.pied-liens a{display:inline-flex;align-items:center;min-height:44px;margin-right:20px}
@media(min-width:768px){.pied{grid-template-columns:1fr auto;align-items:end}}

/* ---------- formulaires ---------- */
.formulaire{display:grid;gap:30px;max-width:640px;width:100%}
#quote{gap:18px}
fieldset{border:0;display:grid;gap:16px;min-width:0}
legend{font-size:1.875rem;line-height:1.2;margin-bottom:12px}
label{display:block;font-weight:600;margin-bottom:5px}
input,textarea{font:inherit;width:100%;min-height:56px;padding:10px 14px;background:#fff;color:var(--noir);border:2px solid #6b5d52;border-radius:var(--r);-webkit-appearance:none;appearance:none}
textarea{min-height:0;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--rouge);outline-offset:0;border-color:var(--rouge)}
::placeholder{color:var(--gris);opacity:1}
.deux{display:grid;gap:18px}
@media(min-width:560px){.deux{grid-template-columns:1fr 1fr}}
.err{display:none;color:var(--rouge);font-weight:600;font-size:1.0625rem;margin-top:4px}
.f.bad>.err{display:block}
.f.bad input{border-color:var(--rouge)}
.alerte{padding:12px 14px;border-left:4px solid var(--rouge);background:var(--voile);border-radius:0 var(--r) var(--r) 0;font-weight:500}

/* ---------- commander ---------- */
.commande{padding:32px var(--marge) 110px;max-width:692px;margin:0 auto;width:100%}
.commande h1{margin-bottom:6px;font-size:clamp(2.5rem,10vw,3.5rem)}
.pk-g{border-top:1px solid var(--filet)}
.pk-g:last-child{border-bottom:1px solid var(--filet)}
.pk-g>summary{cursor:pointer;min-height:56px;padding:14px 0;font:600 1.375rem/1.2 var(--titre)}
.pk-g>summary small{display:block;font:400 1.0625rem/1.3 var(--texte);color:var(--gris)}
.pk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--voile)}
.pk-t{display:block;line-height:1.34}
.pk-t span:not(:last-of-type)::after{content:", "}
.pk-t strong{display:block;font:600 1.1875rem/1.25 var(--titre);margin-bottom:2px}
.pk-t small{display:block;font-size:1rem;line-height:1.35;color:var(--gris)}
.pk-t b{display:block;font:600 1.5rem/1.2 var(--titre);color:var(--rouge);margin-top:3px;font-variant-numeric:lining-nums}
.pk-q{display:flex;align-items:center;gap:6px}
.pk-q output{min-width:32px;text-align:center;font-weight:600;white-space:nowrap}
.pk-b,.pk-add{font:600 1.0625rem/1 var(--texte);min-height:52px;cursor:pointer;border:2px solid var(--rouge);background:#fff;color:var(--rouge);border-radius:var(--r);transition:background .12s}
.pk-b{width:52px;font-size:1.625rem}
.pk-add{padding:0 16px}
.pk-add:hover,.pk-b:hover:not(:disabled){background:var(--rouge);color:#fff}
.pk-b:disabled{opacity:.35;cursor:default}
#days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#days>p{grid-column:1/-1}
.day{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:62px;justify-content:center;background:#fff;color:var(--noir);border:1.5px solid #6b5d52;border-radius:var(--r);cursor:pointer;font-family:var(--texte);padding:0}
.day .w{font-size:.875rem}
.day .d{font:600 1.375rem/1 var(--titre);font-variant-numeric:lining-nums}
.day:disabled{border-color:transparent;background:#f2eeeb;color:#8a7f76;cursor:default}
.day[aria-pressed="true"]{background:var(--rouge);border-color:var(--rouge);color:#fff}
.choix{display:grid;gap:10px}
.opt{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:14px 16px;margin:0;font-weight:400;line-height:1.38;background:#fff;border:2px solid #6b5d52;border-radius:var(--r);cursor:pointer}
.opt b{display:block;font:600 1.25rem/1.25 var(--titre);margin-bottom:2px}
.opt em{display:block;margin-top:4px;font-style:normal;color:var(--rouge);font-weight:600}
.opt input{width:24px;height:24px;min-height:0;margin:3px 0 0;padding:0;accent-color:var(--rouge);-webkit-appearance:auto;appearance:auto}
.opt:has(input:checked){border-color:var(--rouge);box-shadow:inset 0 0 0 1px var(--rouge)}
.opt:has(input:focus-visible){outline:2px solid var(--rouge);outline-offset:2px}
.recap{border-top:1px solid var(--noir);padding-top:14px;display:grid;gap:6px}
.recap p,.recap #sum>div{display:flex;justify-content:space-between;gap:16px}
.recap #sum{display:grid;gap:6px}
.recap .total{font-weight:600;font-size:1.25rem;align-items:baseline}
.recap .total b{font:600 2.25rem/1 var(--titre);color:var(--rouge);font-variant-numeric:lining-nums}
.merci{display:grid;gap:12px;justify-items:start}
.merci:focus{outline:none}
.merci #m-num{color:var(--rouge)}
.mini{position:fixed;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px var(--marge) calc(8px + env(safe-area-inset-bottom));background:var(--noir);color:#fff;font-weight:600}
.mini button{font:600 1.0625rem/1 var(--texte);min-height:48px;padding:0 20px;background:var(--craie);color:var(--noir);border:0;border-radius:var(--r);cursor:pointer}
@media(min-width:1080px){.mini{left:50%;right:auto;transform:translateX(-50%);width:min(692px,100%);border-radius:8px 8px 0 0}}

.legal h2{font-size:1.75rem;margin:26px 0 6px}
.legal h2:first-child{margin-top:0}
.legal p{margin-bottom:8px;max-width:42em}

/* ---------- apparition discrète, seulement si le système ne demande pas moins de mouvement ---------- */
@media(prefers-reduced-motion:no-preference){
  /* la transition n'est posée que sur l'arrivée (.in) : au chargement, rien ne s'efface sous les yeux */
  html.anim .rv{opacity:0;transform:translateY(14px)}
  html.anim .rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  .une-texte>*{animation:monte .6s cubic-bezier(.2,.7,.2,1) backwards}
  .une-texte>:nth-child(2){animation-delay:.06s}
  .une-texte>:nth-child(3){animation-delay:.12s}
  .une-vache{animation:apparait .9s ease backwards .1s}
  .portes{animation:monte .6s cubic-bezier(.2,.7,.2,1) backwards .18s}
}
@keyframes monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes apparait{from{opacity:0}}


/* 08/11 : e-mail de la boutique (mail de Chrystèle du 02/11) et phrase avant la liste du comptoir */
.mail{margin-top:10px}
.etiquette .mail{font-size:1rem}
.mail a{color:var(--noir);display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.avant-liste{margin:12px 0 20px}
/* 08/11 : à 320 px, les 2 plateaux du traiteur (12 px) et les filtres de poids (4 px) dépassaient de l'écran (mesuré) */
.vignettes img{width:calc(50% - 5px);max-width:150px;height:auto;aspect-ratio:1}
@media(max-width:359px){.filtres button{padding:0 11px}}
/* 11/11 : carte des fêtes annoncée sur l'accueil et sur la page Commander */
.fetes-accueil{padding-top:36px;padding-bottom:0}
.fetes-accueil .bouton{margin-top:20px}
.fetes-lien a{color:var(--rouge);font-weight:600}

/* ══════════ 11/11 : le site vivant (demande de Quentin). Tout bouge en transform et en opacité seulement :
   fluide sur un vieux téléphone. Sans script, tout le contenu reste visible. Le téléphone demande « moins de
   mouvement » : la dernière règle de ce fichier coupe tout. ══════════ */

/* ---------- décor de la fête active (ambiance.js) : derrière le texte, ne reçoit jamais les clics ---------- */
[data-ambiance]{position:relative}
[data-ambiance]>:not(canvas){position:relative;z-index:1}
canvas.ambiance{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
canvas.ambiance.la{opacity:1}

/* ---------- annonce de la fête sur l'accueil : l'étiquette passe en bordeaux, le décor (neige) y tombe ---------- */
.fetes-accueil .etiquette{background:var(--rouge) padding-box;border-color:var(--rouge);color:var(--craie);overflow:hidden;box-shadow:0 18px 36px -24px rgba(110,20,28,.7)}
.fetes-accueil .eyebrow{color:var(--craie-2)}

/* ---------- confirmation « Commande reçue », « Demande reçue » : le sceau de la maison ---------- */
.merci{justify-items:center;text-align:center;border:4px double var(--rouge);padding:32px 20px 26px;max-width:640px;width:100%}
.merci .lien{margin-top:4px}
.merci-sceau{width:92px;height:92px;margin-bottom:4px;overflow:visible}
.sc-filet{fill:none;stroke:var(--rouge);stroke-width:1.5}
.sc-disque{fill:var(--rouge)}
.sc-coche{fill:none;stroke:var(--craie);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}

/* Règle tenue partout ci-dessous : une arrivée animée ne garde rien après sa fin (« backwards », jamais « both »),
   sinon elle bloquerait le retour au toucher de l'élément. */
@media(prefers-reduced-motion:no-preference){
  /* --- au toucher : boutons et cartes s'enfoncent un peu, sans le voile gris du téléphone --- */
  a,button,summary,label{-webkit-tap-highlight-color:transparent}
  .bouton,.commander,.burger,.filtres button,.porte,.barre a,.pied-liens a{transition:transform .16s cubic-bezier(.2,.7,.2,1),background-color .15s,color .15s,border-color .15s,box-shadow .2s,opacity .15s}
  .bouton:active,.commander:active,.burger:active,.filtres button:active{transform:scale(.97)}
  .porte:active{background:var(--voile);transform:scale(.985)}
  .barre a:active{opacity:.82}
  .carte-d summary:active,.lien:active{opacity:.7}
  .lien:active::after{transform:translateX(6px)}
  .ardoise .bouton:active,.une .bouton:active{transform:scale(.97)}
  /* --- à la souris seulement : la carte se soulève de 3 px --- */
  @media(hover:hover){
    .bouton:hover{box-shadow:0 1px 0 var(--rouge-f),0 16px 26px -16px rgba(110,20,28,.75)}
    .bouton:hover:not(:active):not(:disabled){transform:translateY(-2px)}
    .bouton.craie:hover{box-shadow:0 14px 24px -16px rgba(0,0,0,.6)}
  }

  /* --- apparitions au défilement : le texte d'abord, puis ses détails --- */
  html.anim .rv .eyebrow::before,html.anim .rv .eyebrow.centre::after{transform:scaleX(0)}
  html.anim .rv .eyebrow::before{transform-origin:left}
  html.anim .rv .eyebrow.centre::before{transform-origin:right}
  html.anim .rv .eyebrow.centre::after{transform-origin:left}
  html.anim .rv.in .eyebrow::before,html.anim .rv.in .eyebrow.centre::after{transform:none;transition:transform .7s cubic-bezier(.2,.7,.2,1) .18s}
  html.anim .rv .exemples li,html.anim .rv .ard-l li,html.anim .rv.trois>div{opacity:0;transform:translateY(10px)}
  html.anim .rv.in .exemples li,html.anim .rv.in .ard-l li,html.anim .rv.in.trois>div{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
  html.anim .rv.in .exemples li:nth-child(2),html.anim .rv.in .ard-l li:nth-child(2),html.anim .rv.in.trois>div:nth-child(2){transition-delay:.09s}
  html.anim .rv.in .exemples li:nth-child(3),html.anim .rv.in .ard-l li:nth-child(3),html.anim .rv.in.trois>div:nth-child(3){transition-delay:.18s}
  html.anim .rv .ard-prix{transform:scale(.92)}
  html.anim .rv.in .ard-prix{transform:none;transition:transform .7s cubic-bezier(.2,1.2,.3,1) .15s}
  /* --- haut des pages intérieures : le titre monte, le filet double se trace --- */
  .tete-page>*{animation:monte .6s cubic-bezier(.2,.7,.2,1) backwards}
  .tete-page>:nth-child(2){animation-delay:.07s}
  .tete-page::after{transform-origin:left;animation:trace .9s cubic-bezier(.2,.7,.2,1) backwards .18s}
  /* --- menu du téléphone, listes repliées, colis filtrés --- */
  @media(max-width:1079px){.menu.ouvert{animation:deroule .24s cubic-bezier(.2,.7,.2,1)}}
  details[open]>:not(summary){animation:apparait .3s ease}
  #tableau-kg .ligne{animation:apparait .3s ease}
  .alerte:not([hidden]){animation:monte .3s cubic-bezier(.2,.7,.2,1)}
  .f.bad>.err{animation:apparait .25s ease}

  /* --- la confirmation : le sceau se pose, la coche se trace, le texte suit --- */
  .merci:not([hidden])>*{animation:monte .55s cubic-bezier(.2,.7,.2,1) backwards .5s}
  .merci:not([hidden])>:nth-child(3){animation-delay:.58s}
  .merci:not([hidden])>:nth-child(4){animation-delay:.66s}
  .merci:not([hidden])>:nth-child(n+5){animation-delay:.74s}
  .merci:not([hidden])>.merci-sceau{animation:none}
  .merci:not([hidden]){animation:apparait .4s ease backwards}
  .merci:not([hidden]) .sc-disque{transform-box:fill-box;transform-origin:center;animation:pose .55s cubic-bezier(.2,1.3,.3,1) backwards .1s}
  .merci:not([hidden]) .sc-filet{transform-box:fill-box;transform-origin:center;animation:pose .7s cubic-bezier(.2,1.1,.3,1) backwards .2s}
  .merci:not([hidden]) .sc-coche{animation:dessine .5s cubic-bezier(.5,0,.2,1) backwards .55s}
}
@keyframes trace{from{transform:scaleX(0)}}
@keyframes deroule{from{opacity:0;transform:translateY(-8px)}}
@keyframes pose{from{opacity:0;transform:scale(.6)}}
@keyframes dessine{from{stroke-dashoffset:1}}
@keyframes pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:none}}
@keyframes rebond{0%{transform:none}28%{transform:scale(1.13)}55%{transform:scale(.97)}78%{transform:scale(1.03)}100%{transform:none}}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(142,27,38,.5)}100%{box-shadow:0 0 0 16px rgba(142,27,38,0)}}
@keyframes ajoute{0%{opacity:0;transform:translateY(10px) scale(.94)}14%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}

/* ---------- 11/11 (Quentin) : plus de grand vide entre deux blocs sur le même fond blanc (ex. « Nos colis » puis
   « Nos incontournables ») : un seul espace entre eux, au lieu de deux additionnés. Les blocs teintés gardent le leur. ---------- */
.bloc:not(.teinte):not(.bande-rouge):not(.comptoir)+.bloc:not(.teinte):not(.bande-rouge):not(.comptoir){padding-top:0}
.bloc.serre:not(.teinte):not(.bande-rouge){padding-bottom:calc(var(--espace)*.6)}
.bloc.serre>.encart:first-child{margin-top:0}
.bloc.serre.fetes-accueil{padding-bottom:0}
.fetes-accueil+.bloc{padding-top:calc(var(--espace)*.75)}

/* ══════════ 11/11 (Quentin) : tout le site vit, avec la même sobriété. Transform et opacité seulement ; sans script,
   tout est visible ; « moins de mouvement » coupe tout (dernière règle du fichier). ══════════ */
.chapo+.cliche{margin-top:20px}
.profondeur{display:block;overflow:hidden;border-radius:var(--r)}
.profondeur img{transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  /* --- le haut de l'accueil : le titre monte en deux temps, la fin du titre arrive juste après --- */
  .une h1 em{display:inline-block;animation:monte .7s cubic-bezier(.2,.7,.2,1) backwards .32s}
  .une .eyebrow{animation:ecarte .9s cubic-bezier(.2,.7,.2,1) backwards}
  .portes .porte{animation:monte .55s cubic-bezier(.2,.7,.2,1) backwards .26s}
  .portes .porte:nth-child(2){animation-delay:.33s}
  .portes .porte:nth-child(3){animation-delay:.4s}
  /* --- les titres et textes d'un bloc arrivent l'un après l'autre --- */
  html.anim .rv>:is(.eyebrow,h2,.chapo,p:not([class])){opacity:0;transform:translateY(12px)}
  html.anim .rv.in>:is(.eyebrow,h2,.chapo,p:not([class])){opacity:1;transform:none;transition:opacity .55s ease .06s,transform .6s cubic-bezier(.2,.7,.2,1) .06s}
  html.anim .rv.in>:is(.eyebrow,h2,.chapo,p:not([class])):nth-child(2){transition-delay:.14s}
  html.anim .rv.in>:is(.eyebrow,h2,.chapo,p:not([class])):nth-child(3){transition-delay:.22s}
  html.anim .rv.in>:is(.eyebrow,h2,.chapo,p:not([class])):nth-child(n+4){transition-delay:.3s}
  /* --- listes (dates de la maison, comptoir, buffets, vignettes) : une ligne après l'autre --- */
  html.anim .rv.metiers>li,html.anim .rv.buffet>p,html.anim .rv .vignettes>img,html.anim .rv .carte-vis{opacity:0;transform:translateY(12px)}
  html.anim .rv.in.metiers>li,html.anim .rv.in.buffet>p,html.anim .rv.in .vignettes>img{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.anim .rv.in.metiers>li:nth-child(2),html.anim .rv.in.buffet>p:nth-child(2),html.anim .rv.in .vignettes>img:nth-child(2){transition-delay:.08s}
  html.anim .rv.in.metiers>li:nth-child(3),html.anim .rv.in.buffet>p:nth-child(3){transition-delay:.16s}
  html.anim .rv.in.metiers>li:nth-child(4),html.anim .rv.in.buffet>p:nth-child(4){transition-delay:.24s}
  html.anim .rv.in.metiers>li:nth-child(n+5){transition-delay:.32s}
  /* --- les prix et les chiffres : ils se posent juste après leur bloc, sans changer de valeur --- */
  html.anim .rv :is(.prix,.prix-seul,.grand-chiffre){opacity:0;transform:translateY(.3em)}
  html.anim .rv.in :is(.prix,.prix-seul,.grand-chiffre){opacity:1;transform:none;transition:opacity .5s ease .2s,transform .6s cubic-bezier(.2,.7,.2,1) .2s}
  html.anim .rv.in .carte-vis{opacity:1;transform:none;transition:opacity .45s ease .1s,transform .6s cubic-bezier(.2,1.3,.3,1) .1s}
  /* --- cartes et produits ajoutés par le script : l'un après l'autre (script.js retire ces classes à l'arrivée) --- */
  html.anim .cas{opacity:0;transform:translateY(16px)}
  html.anim .cas.in{opacity:1;transform:none;transition:opacity .5s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  /* --- le menu du téléphone glisse à l'ouverture, ses liens suivent ; il remonte en glissant à la fermeture --- */
  @media(max-width:1079px){
    .menu.ouvert:not(.ferme) a{animation:monte .34s cubic-bezier(.2,.7,.2,1) backwards .04s}
    .menu.ouvert:not(.ferme) a:nth-child(2){animation-delay:.07s}
    .menu.ouvert:not(.ferme) a:nth-child(3){animation-delay:.1s}
    .menu.ouvert:not(.ferme) a:nth-child(4){animation-delay:.13s}
    .menu.ouvert:not(.ferme) a:nth-child(5){animation-delay:.16s}
    .menu.ouvert:not(.ferme) a:nth-child(n+6){animation-delay:.19s}
    .menu.ferme{animation:replie .2s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
  }
  /* --- liens et boutons : ils répondent à la souris et au doigt --- */
  .pied-liens a:active,.menu a:active{opacity:.7}
  .commander:active{transform:scale(.97)}
  @media(hover:hover){
    @media(min-width:1080px){
      .menu a:not(.bouton){background:linear-gradient(var(--rouge),var(--rouge)) 0 calc(100% - 6px)/0 1.5px no-repeat;transition:background-size .28s cubic-bezier(.2,.7,.2,1),color .15s}
      .menu a:not(.bouton):hover{background-size:100% 1.5px}
    }
    .commander:hover:not(:active){transform:translateY(-2px)}
    .pied-liens a:hover{opacity:.8}
    .lien:hover{text-decoration-thickness:2.5px}
  }
}
@keyframes ecarte{from{opacity:0;letter-spacing:.2em}}
@keyframes monte2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes replie{to{opacity:0;transform:translateY(-10px)}}

/* ---------- 13/11 (textes et réponses de Chrystèle) ---------- */
/* Panier : l'acompte (au-delà de 60 €, 30 %), bien visible avant l'envoi */
.recap .acompte{flex-wrap:wrap;align-items:baseline;row-gap:2px;margin-top:4px;padding:10px 12px;background:var(--voile);border-left:4px solid var(--rouge);border-radius:0 var(--r) var(--r) 0;font-weight:600}
.recap .acompte b{font:600 1.5rem/1 var(--titre);color:var(--rouge);white-space:nowrap;font-variant-numeric:lining-nums}
.recap .acompte small{flex-basis:100%;font-weight:400;font-size:1rem;line-height:1.35;color:var(--gris)}
.paiement b{font-weight:600;color:var(--noir)}
.merci .m-acompte{padding:12px 14px;background:var(--voile);border-radius:var(--r);max-width:34em}
/* 14/11 : case « Je règle l'acompte de 20 € à la boucherie » (commande de plus de 50 €) */
.acompte-bloc{margin-top:4px}
.acompte-ok{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:10px 12px;min-height:44px;background:#fff;border:1.5px solid var(--rouge);border-radius:var(--r);font-weight:600;line-height:1.35;cursor:pointer}
.acompte-ok input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--rouge)}
.recap .acompte-bloc .err{display:none}
.recap .acompte-bloc.bad .err{display:block}
.acompte-bloc.bad .acompte-ok{border-width:2px;background:#fff5f5}
.merci .m-acompte b{color:var(--rouge)}
/* Accueil, « Au comptoir » : la vitrine servie à 800 px au plus (prix des étiquettes illisibles) */
.cliche-vitrine{max-width:800px}
.cliche-vitrine img{aspect-ratio:16/9;object-fit:cover}
/* Nos incontournables : le poulet rôti, cadre rouge de la taille des photos en attendant la sienne */
.carte-vis.carte-attente{width:var(--ph);height:auto;aspect-ratio:4/3;box-shadow:inset 0 0 0 5px var(--rouge),inset 0 0 0 6px rgba(247,241,234,.5)}
.carte-attente svg{width:40%;height:auto;fill:none;stroke:var(--craie);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.filtres{display:flex;flex-wrap:wrap}
/* Menu d'ordinateur : « Nos incontournables » est plus long que « Nos colis » ; entre 1 080 et 1 199 px, logo un peu plus petit
   et espaces plus serrés pour que le menu tienne sur une ligne (mesuré) */
@media(min-width:1080px) and (max-width:1199px){.marque img{width:190px}.menu{gap:16px}}
/* Accueil : « 27 € la formule », la mention en petit à côté du prix */
.prix-seul small{font:500 1.125rem/1.2 var(--texte);color:var(--gris)}
.carte-t .prix small{display:inline;margin-left:6px}
/* cadre du poulet rôti : pictogramme centré, assez grand */
.carte-vis.carte-attente{display:flex;align-items:center;justify-content:center}
.carte-attente svg{width:46px;height:46px}
/* « Nos incontournables » : un mot de 15 lettres qui doit tenir sur 320 px (titre un peu plus petit sur les petits écrans seulement) */
.tete-page h1.titre-long{font-size:clamp(2.25rem,11vw,5rem)}
/* La maison : ses textes, mot pour mot (titre en gras dans la phrase) */
.histoire{font-size:clamp(1.1875rem,4.2vw,1.3125rem);line-height:1.55;max-width:38em;text-wrap:pretty}
#histoire .cliche{margin-top:28px}
.metiers.dit li{max-width:40em;line-height:1.5}
.metiers.dit b{display:inline;font-family:var(--texte);font-size:1em;font-weight:600;line-height:inherit;color:var(--rouge)}
.metiers.dit.origines{margin-top:22px}
.sous-titre{font-size:1.625rem;margin-bottom:8px}
.question{font:600 1.0625rem/1.3 var(--texte);letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin:22px 0 6px}
#service-traiteur .lien{margin-top:16px}

/* ══════════ 13/11 (soir, retours de Quentin) : un en-tête et un accueil symétriques, des photos mises en valeur,
   un aperçu en grand des photos de colis, et de petites animations douces. « Moins de mouvement » coupe tout
   (dernière règle du fichier). Rien de ceci ne touche l'espace boucherie (staff.css). ══════════ */

/* ---------- en-tête d'ordinateur : le logo au centre, le menu centré dessous, un filet entre les deux ---------- */
@media(min-width:1080px){
  .tete{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:0;padding:8px var(--bord) 0}
  .marque img,.tete .marque img{width:150px}
  .menu{width:100%;justify-content:center;gap:clamp(22px,2.4vw,40px);margin-top:4px;padding:3px 0 5px;border-top:1px solid var(--filet)}
  .menu a{font-size:1.0625rem;min-height:40px}
  .menu .nav-commander{margin:0 0 0 clamp(6px,1vw,16px);min-height:40px;padding:0 22px;font-size:.9375rem}
  .menu a:not(.bouton){background-position-y:calc(100% - 4px)}
  .une{padding-top:56px}
}
@media(min-width:1080px) and (max-width:1199px){.marque img,.tete .marque img{width:150px}.menu{gap:22px}}

/* ---------- bandeau du haut : texte équilibré quand il passe sur deux lignes ---------- */
@media(max-width:559px){.bandeau{font-size:.9375rem}}

/* ---------- la une : titre à la bonne taille sur tablette, sur-titre sur une ligne au téléphone ---------- */
@media(max-width:767px){.une .eyebrow{font-size:clamp(.8125rem,3.5vw,.9375rem);letter-spacing:.06em}}
@media(min-width:768px){
  .une h1{font-size:clamp(3rem,6.3vw,5rem)}
  .une-texte{max-width:calc(100% - clamp(250px,30vw,400px))}
}

/* ---------- les trois portes : trois colonnes égales, chaque texte aligné en haut, la flèche au même endroit ---------- */
.porte{align-content:start}
@media(min-width:900px){
  .portes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .porte{grid-template-rows:auto 1fr;padding:26px 26px 28px}
  .porte b{font-size:clamp(1.375rem,1.9vw,1.625rem);text-wrap:balance}
  .porte::after{align-self:start;margin-top:2px}
}

/* ---------- au comptoir : la vitrine en grand, sur toute la largeur du texte, puis le titre et sa phrase ---------- */
.cliche{max-width:none}
.cliche-vitrine{max-width:none;margin:0 0 26px}
.cliche-vitrine img{aspect-ratio:4/3;object-fit:cover}
.comptoir-texte{display:grid;gap:4px}
@media(min-width:768px){
  .cliche-vitrine img{aspect-ratio:2/1;max-height:none}
  .comptoir-texte{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
  .comptoir-texte h2{margin-bottom:0}
  .comptoir .comptoir-texte .chapo{margin-top:4px}
}

/* ---------- les photos : même cadre partout (coins, ombre, filet clair), chargement doux depuis un fond flou ---------- */
.cliche .profondeur,.cliche>img,.cliche>picture{border-radius:6px;box-shadow:0 22px 44px -30px rgba(42,33,28,.65)}
.comptoir .cliche .profondeur,.comptoir .cliche>picture{box-shadow:0 26px 50px -30px rgba(0,0,0,.9)}
.cliche img{border-radius:6px}
.cliche [data-flou-hote],.cliche img[data-flou]{background-size:cover;background-position:center}
.carte-vis.carte-photo,.ligne-photo,.ex-photo,.pk-ph{border-radius:6px;box-shadow:0 0 0 1px rgba(42,33,28,.06),0 10px 22px -16px rgba(42,33,28,.55)}
.carte-vis.carte-photo picture,.ligne-photo picture,.ex-photo,.pk-ph{overflow:hidden}
html.anim img.charge{opacity:0;filter:blur(10px)}
html.anim img.charge-fin{transition:opacity .6s ease,filter .7s ease}

/* ---------- photo de colis : on la touche pour la voir en grand ---------- */
picture.agrandir{position:relative;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
picture.agrandir::after{content:"";position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e1b26' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 2px 8px -2px rgba(0,0,0,.45);pointer-events:none}
.ex-photo.agrandir::after{top:4px;right:4px;width:22px;height:22px;background-size:11px}
picture.agrandir:focus-visible{outline:3px solid var(--rouge);outline-offset:3px}

/* ---------- l'aperçu en grand ---------- */
.loupe{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--noir);overflow:hidden}
.loupe::backdrop{background:rgba(24,18,15,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.loupe:not([open]){display:none}
.loupe-boite{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#050505}
.loupe-scene{position:relative;overflow:hidden;touch-action:pinch-zoom;display:grid;place-items:center;background:#050505}
.loupe-piste{position:absolute;inset:0;display:flex;will-change:transform}
.loupe-ph{flex:0 0 100%;display:grid;place-items:center;container-type:size;overflow:hidden}
.loupe-cadre{position:relative;width:min(100cqw,133.333cqh);aspect-ratio:4/3;transform-origin:0 0;overflow:hidden;background:#050505}
.loupe-cadre img,.loupe-cadre picture{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.loupe-n{position:absolute;z-index:2;top:calc(18px + env(safe-area-inset-top));left:14px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 .875rem/1 var(--texte);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.loupe-n:empty{display:none}
.loupe-fiche{position:relative;background:#fff;padding:18px var(--marge) calc(18px + env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:6px;align-items:baseline;box-shadow:0 -12px 30px -20px rgba(0,0,0,.6)}
.loupe-k{grid-column:1/-1;font:600 .8125rem/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--rouge)}
.loupe-nom{grid-column:1;font:600 clamp(1.375rem,5.4vw,1.875rem)/1.15 var(--titre);text-wrap:balance}
.loupe-prix{grid-column:2;grid-row:2;justify-self:end;font:600 clamp(1.75rem,7vw,2.25rem)/1 var(--titre);color:var(--rouge);font-variant-numeric:lining-nums;white-space:nowrap}
.loupe-contenu{grid-column:1/-1;margin:2px 0 4px;color:var(--gris);font-size:1rem;line-height:1.4}
.loupe-contenu li{display:inline}
.loupe-contenu li:not(:last-child)::after{content:" · "}
.loupe-actions{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px}
.loupe-actions .bouton{flex:1;min-height:54px;padding:0 18px;font-size:1rem;letter-spacing:.05em}
.loupe-actions .pk-q{flex:1;justify-content:space-between}
.loupe-fermer,.loupe-fl{position:absolute;z-index:2;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--noir);cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.loupe-fermer{top:calc(12px + env(safe-area-inset-top));right:12px}
.loupe-fl{top:50%;margin-top:-24px}
.loupe-fl[data-sens="-1"]{left:12px}
.loupe-fl[data-sens="1"]{right:12px}
.loupe-fermer svg,.loupe-fl svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.loupe-fermer:focus-visible,.loupe-fl:focus-visible{outline:3px solid #fff;outline-offset:2px}
.loupe-points{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.loupe-points i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background-color .2s,transform .2s}
.loupe-points i.ici{background:#fff;transform:scale(1.35)}
@media(hover:none){.loupe-fl{display:none}}
@media(min-width:900px){
  .loupe-boite{inset:auto;left:50%;top:50%;width:min(1180px,calc(100vw - 96px));height:min(720px,calc(100vh - 64px));transform:translate(-50%,-50%);grid-template-rows:none;grid-template-columns:minmax(0,1fr) 360px;border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
  .loupe-fiche{align-content:center;align-items:start;padding:36px 32px;grid-template-columns:minmax(0,1fr);box-shadow:none}
  .loupe-nom{font-size:1.875rem}
  .loupe-prix{grid-column:1;grid-row:auto;justify-self:start;font-size:2.75rem;margin-top:10px}
  .loupe-contenu{margin:6px 0 0;font-size:1.0625rem}
  .loupe-contenu li{display:list-item;padding:7px 0;border-bottom:1px dotted var(--filet)}
  .loupe-contenu li:not(:last-child)::after{content:none}
  .loupe-actions{margin-top:22px;flex-wrap:wrap}
  .loupe-fermer{top:14px;right:14px;background:var(--voile)}
  .loupe-fl{background:rgba(255,255,255,.9)}
}
body.loupe-ouverte{overflow:hidden}

/* ---------- les petites animations (souris, doigt), coupées par « moins de mouvement » ---------- */
@media(prefers-reduced-motion:no-preference){
  /* photos : léger zoom au survol, retour doux */
  .agrandir img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  @media(hover:hover){
    .agrandir:hover img{transform:scale(1.05)}
    picture.agrandir::after{transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .25s;opacity:.9}
    picture.agrandir:hover::after{transform:scale(1.12);opacity:1}
    /* portes et cartes : elles se soulèvent un peu */
    .porte{transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .2s,box-shadow .25s}
    .porte:hover{transform:translateY(-3px);box-shadow:0 18px 30px -22px rgba(42,33,28,.55);z-index:1}
    .exemples li{transition:background-color .2s}
    .exemples li:hover{background:linear-gradient(90deg,rgba(244,239,235,0),var(--voile) 18%,var(--voile) 82%,rgba(244,239,235,0))}
    /* menu : le trait part du centre */
    @media(min-width:1080px){
      .menu a:not(.bouton){background-position:50% calc(100% - 6px)}
    }
  }
  .agrandir:active img{transform:scale(.98)}
  /* filtres des colis : la liste change en douceur */
  #tableau-kg .ligne.sort{opacity:0;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease}
  #tableau-kg .ligne.entre{animation:monte .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--d,0ms)}
  .filtres button[aria-pressed="true"]{animation:pop .35s cubic-bezier(.2,.7,.2,1)}
  /* l'aperçu en grand : il s'ouvre en douceur ; la fiche glisse ; la photo suit le doigt */
  .loupe[open]::backdrop{animation:apparait .3s ease}
  .loupe[open] .loupe-fiche>*{animation:monte .45s cubic-bezier(.2,.7,.2,1) backwards .12s}
  .loupe[open] .loupe-fiche>:nth-child(2){animation-delay:.16s}
  .loupe[open] .loupe-fiche>:nth-child(3){animation-delay:.2s}
  .loupe[open] .loupe-fiche>:nth-child(n+4){animation-delay:.24s}
  .loupe.change .loupe-fiche>*{animation:monte2 .38s cubic-bezier(.2,.7,.2,1) backwards}
  .loupe.change .loupe-fiche>:nth-child(2){animation-delay:.03s}
  .loupe.change .loupe-fiche>:nth-child(n+3){animation-delay:.06s}
  .loupe-fermer,.loupe-fl{transition:transform .18s cubic-bezier(.2,.7,.2,1),background-color .15s}
  .loupe-fermer:active,.loupe-fl:active{transform:scale(.92)}
  @media(hover:hover){.loupe-fermer:hover{transform:rotate(90deg)}.loupe-fl:hover{transform:scale(1.08)}}
  .loupe-piste.glisse{transition:transform .34s cubic-bezier(.2,.7,.2,1)}
  /* le panier : le chiffre rebondit à chaque ajout, aussi dans l'aperçu */
  .loupe-actions output.boum{animation:rebond .5s cubic-bezier(.2,.7,.2,1)}
  /* le bouton Commander du menu : un léger éclat au survol */
  @media(hover:hover){.menu .nav-commander:hover:not(:active){transform:translateY(-2px)}}
}

/* ---------- Colis de saison, « Bons plans automne-hiver » (13/11, Quentin) : chaque carte a la même structure,
   avec la photo du colis ou, sans photo, un cadre bordeaux de la même taille ; prix, contenu, bouton alignés ---------- */
#automne .tableau{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:6px}
#automne .ligne{grid-template-columns:var(--ph) minmax(0,1fr);grid-template-areas:"vis prix" "vis txt" "vis cmd";grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:6px;align-items:start;padding:14px;border:1px solid var(--filet);border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(42,33,28,.05),0 10px 22px -20px rgba(42,33,28,.5)}
#automne .ligne>.prix{grid-area:prix}
#automne .ligne>p{grid-area:txt}
#automne .ligne>.commander{grid-area:cmd;align-self:end;justify-self:start;margin-top:6px}
#automne .ligne>.ligne-photo{grid-area:vis;grid-column:auto;width:100%}
#automne .ligne:not(.avec-photo)::before{content:"";grid-area:vis;display:block;width:100%;aspect-ratio:4/3;border-radius:6px;background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f1ea' stroke-width='1.1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 8 12 4l8.5 4v8.6L12 20.6l-8.5-4z'/%3E%3Cpath d='M3.5 8 12 12l8.5-4M12 12v8.6'/%3E%3Cpath d='m7.6 5.9 8.6 4.2v3.2'/%3E%3C/svg%3E") center/30% no-repeat;box-shadow:inset 0 0 0 6px var(--rouge),inset 0 0 0 7px rgba(247,241,234,.5)}
.pk-ph.pk-neutre{background:var(--rouge);display:grid;place-items:center;box-shadow:inset 0 0 0 5px var(--rouge),inset 0 0 0 6px rgba(247,241,234,.5)}
.pk-neutre svg{width:30%;height:auto;fill:none;stroke:var(--craie);stroke-width:1.1;stroke-linejoin:round;stroke-linecap:round}
@media(min-width:900px){
  #automne .tableau{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  #automne .ligne{grid-template-columns:minmax(0,1fr);grid-template-areas:"vis" "prix" "txt" "cmd";grid-template-rows:auto auto 1fr auto;padding:0 0 20px;overflow:hidden;row-gap:8px}
  #automne .ligne>:not(.ligne-photo){margin-left:20px;margin-right:20px}
  #automne .ligne>.ligne-photo,#automne .ligne:not(.avec-photo)::before{border-radius:0;box-shadow:none;margin-bottom:8px}
  #automne .ligne:not(.avec-photo)::before{box-shadow:inset 0 0 0 8px var(--rouge),inset 0 0 0 9px rgba(247,241,234,.5)}
  #automne .ligne>.prix{font-size:2.25rem}
}
@media(prefers-reduced-motion:no-preference) and (hover:hover){
  #automne .ligne{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
  #automne .ligne:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(42,33,28,.06),0 22px 34px -24px rgba(42,33,28,.6)}
}

/* ---------- la pastille « panier » (13/11, Quentin) : en bas à droite, au-dessus de la barre du téléphone,
   jamais sur un bouton (script.js l'écarte quand un bouton passe dessous), hors des zones de l'iPhone ---------- */
.pastille-panier{position:fixed;z-index:6;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 18px 0 14px;border-radius:999px;background:var(--rouge);color:#fff;font:600 1rem/1 var(--texte);text-decoration:none;box-shadow:0 0 0 1px rgba(110,20,28,.35),0 14px 28px -12px rgba(110,20,28,.75)}
.pastille-panier[hidden]{display:none}
.pastille-panier svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.pastille-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--craie);color:var(--rouge);font-size:.875rem;font-variant-numeric:tabular-nums}
.pastille-t{white-space:nowrap;font-variant-numeric:lining-nums}
.pastille-t:empty{display:none}
.pastille-panier:focus-visible{outline:3px solid var(--noir);outline-offset:3px}
.pastille-panier.ecartee{opacity:0;transform:translateX(calc(100% + 24px));pointer-events:none}
body.avec-pastille{padding-bottom:calc(68px + 64px + env(safe-area-inset-bottom))}
@media(max-width:1079px){.pastille-panier{bottom:calc(64px + 12px + env(safe-area-inset-bottom))}}
@media(min-width:1080px){body.avec-pastille{padding-bottom:84px}}
.loupe-voir{flex-basis:100%;margin-top:4px}
@media(prefers-reduced-motion:no-preference){
  .pastille-panier{transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease,background-color .15s,box-shadow .2s;animation:monte .45s cubic-bezier(.2,.7,.2,1) backwards}
  .pastille-panier.boum{animation:rebond .6s cubic-bezier(.2,.7,.2,1)}
  .pastille-panier:active{transform:scale(.96)}
  @media(hover:hover){.pastille-panier:hover:not(.ecartee){background:var(--rouge-f);transform:translateY(-2px)}}
}

/* ---------- « moins de mouvement » demandé par le téléphone : plus aucune animation, plus aucune transition.
   La neige, elle, est coupée par ambiance.js (aucun dessin créé). Cette règle reste la dernière du fichier. ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* 14/11 : page Traiteur, quelques prestations en photos (WeTransfer de Chrystèle) */
.galerie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:var(--max);margin-left:auto;margin-right:auto}
.galerie li{margin:0}
.galerie img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media(min-width:900px){.galerie{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
/* 14/11 : La maison, Roger et Éric à la place de la vache */
.une-photo{position:relative;z-index:1;margin-top:28px}
.une-photo img{display:block;width:100%;height:auto;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.une-photo figcaption{margin-top:8px;color:var(--craie-2);font-size:1rem}
.une-photo{max-width:560px}
/* 14/11 : le Drive en gras, mis en avant (Chrystèle) */
.drive{margin-top:14px;padding:12px 16px;background:var(--voile);border-left:4px solid var(--rouge);border-radius:0 var(--r) var(--r) 0}
/* 14/11 : « pas de livraison pendant les fêtes », en gras et plus visible (Chrystèle) ; tarifs de livraison */
.sans-livraison{display:inline-block;margin-top:16px;padding:10px 16px;background:var(--rouge);color:#fff;font-weight:700;font-size:1.125rem;line-height:1.35;border-radius:var(--r)}
.bande-rouge .sans-livraison,.fetes-accueil .sans-livraison{background:#fff;color:var(--rouge)}
.tarifs-liv{display:grid;gap:0;max-width:30em;border-top:1px solid var(--filet)}
.tarifs-liv li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--filet);font-size:1.125rem}
.tarifs-liv b{font-weight:700;color:var(--rouge);white-space:nowrap;font-variant-numeric:lining-nums}
/* 14/11 : vidéo du mariage (page Traiteur), jamais en lecture automatique */
.video-mariage{max-width:340px;margin:36px auto 0}
.video-mariage video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#1a1411;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.video-mariage figcaption{margin-top:10px;text-align:center;color:var(--gris);font-size:1rem;line-height:1.4}
.recap .total-pesee{display:block;margin-top:-4px;text-align:right;font-weight:600;color:var(--rouge)}
.recap .total-pesee[hidden]{display:none}