/* ==================================================================
   Au Petit Comestible : feuille de style du site.
   L'accueil reprend, règle pour règle, la maquette validée par le client.
================================================================== */

/* Polices servies par le site (sous-ensemble latin) : aucune requête ne part chez Google. */
@font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/fraunces-romain.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/fraunces-italique.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spectral;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/spectral-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spectral;font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/spectral-400-italique.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spectral;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/spectral-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Spectral;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/spectral-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ------------------------------------------------------------------
   Fond bleu très pâle, accent vert profond.
   Couleurs relevées sur la photographie de la devanture, rue du Perron :
   noyer verni de l'encadrement, pierre de molasse, verre sombre de la
   vitrine, laiton des reflets.
------------------------------------------------------------------ */
:root{
  --pierre:#EFF2F5; --pierre-2:#E4E9EF; --pierre-3:#D2DAE2;
  --rule:#D3DAE1; --rule-soft:#E2E7EC;
  --ink:#161A1F; --ink-2:#414A53; --ink-3:#5C656E;
  --noyer:#164A38; --noyer-d:#0E3427; --noyer-l:#2A6B52;
  --verre:#12352A;
  --laiton:#C9A24A; --laiton-d:#1F5B44;
  /* tricolore : blanc franc, cerné d'un filet pour rester lisible sur le fond bleu */
  --it-vert:#1B6E4A; --it-blanc:#FFFFFF; --it-rouge:#B4322B;
  --f-d:Fraunces,Georgia,"Times New Roman",serif;
  --f-t:Spectral,Georgia,"Times New Roman",serif;
  --wonk:"SOFT" 50,"WONK" 1;
  --z-head:20; --z-top:50;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pierre);color:var(--ink);
  font-family:var(--f-t);font-size:18px;line-height:1.66;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-d);font-weight:600;margin:0;line-height:1.12;font-variation-settings:var(--wonk)}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
.wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}
.wrap-w{width:min(1280px,100% - 2.5rem);margin-inline:auto}
:focus-visible{outline:2.5px solid var(--laiton-d);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--verre);color:var(--pierre);padding:.7rem 1.1rem;z-index:var(--z-top)}
.skip:focus{left:.5rem;top:.5rem}
/* le contour du focus là où celui du site ne se voyait pas ou se rognait (contrôle au clavier du 6 oct 2026) :
   clair sur le fond sombre du pied, en dedans là où le cadre coupe ce qui dépasse, et autour du champ de recherche */
footer.site :focus-visible{outline-color:#E2DED2}
nav.main a:focus-visible,#coderockz_woo_delivery_pickup_date_datepicker:focus-visible{outline-offset:-3px}
.field:focus-within{outline:2.5px solid var(--laiton-d);outline-offset:3px}

.caps{font-family:var(--f-t);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}

/* ---------- filet d'information ---------- */
.info{border-bottom:1px solid var(--rule-soft);font-size:.76rem;letter-spacing:.03em}
.info .wrap-w{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.25rem 1rem;
  min-height:38px;padding-block:.35rem;color:var(--ink-3)}
.info a{text-decoration:none}
.info a:hover{color:var(--ink)}
/* choix de la langue (extension apc-langues), au bout du filet : une liste déroulante ;
   le drapeau et le code de la langue de la page l'ouvrent, la langue de la page y porte un point de laiton */
.drapeaux{position:relative}
.drapeaux summary{display:flex;align-items:center;gap:.45rem;min-height:32px;padding:0 .55rem;
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;list-style:none;
  font-weight:600;letter-spacing:.08em;color:var(--ink-2)}
.drapeaux summary::-webkit-details-marker{display:none}
.drapeaux summary::after{content:"";width:.38rem;height:.38rem;margin-left:.1rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.drapeaux details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.drapeaux summary:hover{color:var(--ink);border-color:var(--pierre-3)}
.drapeaux ul{position:absolute;right:0;top:calc(100% + 4px);z-index:calc(var(--z-head) + 1);min-width:11rem;
  margin:0;padding:.3rem 0;list-style:none;background:var(--pierre);border:1px solid var(--rule);
  border-radius:3px;box-shadow:0 8px 22px rgba(22,26,31,.14)}
.drapeaux li a{display:flex;align-items:center;gap:.65rem;min-height:40px;padding:0 .9rem;
  font-size:.86rem;letter-spacing:.02em;color:var(--ink)}
.drapeaux li a:hover{background:var(--pierre-2)}
.drapeaux li a[aria-current]{font-weight:600}
.drapeaux li a[aria-current]::after{content:"";width:.45rem;height:.45rem;margin-left:auto;border-radius:50%;background:var(--laiton)}
.drapeaux svg{display:block;flex:none;width:21px;height:14px;box-shadow:0 0 0 1px rgba(22,26,31,.18)}
@media(max-width:760px){
  /* sur un téléphone : l'état (les vacances) garde la première ligne, la liste des langues est à droite de l'adresse */
  .info .wrap-w{grid-template-columns:1fr auto}
  .info .state{grid-column:1/-1;grid-row:1}
  .info .coord{grid-column:1;grid-row:2}
  .info .drapeaux{grid-column:2;grid-row:2}
}
@media(max-width:480px){
  /* l'adresse et le téléphone ne tiennent plus côte à côte : le téléphone passe dessous, sans le point */
  .info .coord .sep{display:none}
  .info .coord a{display:block}
}
.state{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-2);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:#5C7A4C;flex:none}
.dot.shut{background:var(--it-rouge)}

/* ---------- enseigne ---------- */
header.site{background:var(--pierre);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:var(--z-head)}
.ens{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.5rem 0 1.1rem}
@media(max-width:760px){.ens{padding:1rem 0 .8rem}}
/* les deux flancs doivent peser pareil, sinon l'enseigne se decale */
.ens .left,.ens .right{min-width:calc(44px * 2 + .15rem)}
.ens .left{justify-self:start}
.ens .right{justify-self:end;display:flex;gap:.15rem}
.brand{grid-column:2;text-align:center;text-decoration:none;display:block}
.brand .nom{font-family:var(--f-d);font-size:clamp(1.4rem,3.6vw,2.15rem);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;display:block;line-height:1.12;
  font-variation-settings:var(--wonk)}
.brand .sub{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);display:block;margin-top:.55rem}
.iconbtn{width:44px;height:44px;display:grid;place-items:center;background:none;border:none;color:var(--ink-2);
  transition:color .2s;position:relative}
.iconbtn:hover{color:var(--noyer)}
.iconbtn .n{position:absolute;top:6px;right:5px;background:var(--noyer);color:var(--pierre);
  font-size:.58rem;font-weight:600;min-width:15px;height:15px;border-radius:8px;
  display:grid;place-items:center;padding:0 3px}
nav.main{border-top:1px solid var(--rule-soft);overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main ul{display:flex;justify-content:center;gap:2.1rem;list-style:none;margin:0;padding:0;white-space:nowrap}
nav.main a{display:block;padding:.85rem 0;text-decoration:none;font-size:.74rem;
  font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
nav.main a:hover,nav.main a[aria-current]{color:var(--noyer);border-color:var(--noyer)}

/* ---------- ornement ---------- */
.orn{display:flex;align-items:center;justify-content:center;gap:.75rem;color:var(--laiton-d);margin:0}
.orn::before,.orn::after{content:"";height:1px;background:currentColor;opacity:.45;flex:1;max-width:120px}
.orn svg{flex:none;opacity:.85}

/* ---------- ouverture ---------- */
.hero{border-bottom:1px solid var(--rule)}
.hero .grid{display:grid;grid-template-columns:1fr}
@media(min-width:900px){.hero .grid{grid-template-columns:1.05fr .95fr;min-height:540px}}
.hero .pic{position:relative;min-height:300px;background:var(--pierre-3);
  outline:1px solid #BCC7D2;outline-offset:0;
  border:6px solid transparent;
  /* bandes verticales : vert à gauche, rouge à droite, comme le drapeau italien */
  border-image:linear-gradient(90deg,
    var(--it-vert) 0 33.34%,
    var(--it-blanc) 33.34% 66.67%,
    var(--it-rouge) 66.67% 100%) 1}
@media(max-width:899px){.hero .pic{border-width:5px}}
.hero .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.hero .txt{display:flex;flex-direction:column;justify-content:center;padding:3.5rem 0}
@media(min-width:900px){.hero .txt{padding:4rem 0 4rem 4rem}}
/* sans photo (retirée dans les réglages) : une seule colonne, à la largeur du reste de la page */
.hero .grid.sans-photo{grid-template-columns:1fr;min-height:0;width:min(1080px,100%);margin-inline:auto}
.hero .grid.sans-photo .txt{padding-left:0}
.hero .lieu{font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--noyer);
  margin:0 0 1.5rem;font-weight:600}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.7rem);margin-bottom:1.4rem;max-width:13ch}
.hero h1 i{font-style:italic;font-weight:400}
.hero p{font-size:1.04rem;color:var(--ink-2);max-width:42ch;margin:0 0 2.2rem}
.hero .faits{list-style:none;margin:0 0 2.3rem;padding:0;max-width:34rem}
.hero .faits li{display:flex;align-items:baseline;gap:.8rem;padding:.65rem 0;
  border-bottom:1px solid var(--rule-soft);font-size:1rem;color:var(--ink-2)}
.hero .faits li:last-child{border-bottom:0}
.hero .faits li::before{content:"";width:5px;height:5px;flex:none;background:var(--laiton-d);
  transform:translateY(-3px)}
.hero .acts{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 2rem;
  background:var(--noyer);color:var(--pierre);text-decoration:none;font-family:var(--f-t);font-size:.74rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--noyer);
  transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{background:var(--noyer-d);border-color:var(--noyer-d)}
.btn-o{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-o:hover{background:var(--ink);color:var(--pierre);border-color:var(--ink)}
.lien{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.lien:hover{color:var(--noyer);border-color:var(--noyer)}

/* ---------- bande de recherche ---------- */
.find{background:var(--pierre-2);border-bottom:1px solid var(--rule);padding:2.5rem 0}
.find .in{max-width:660px;margin-inline:auto;text-align:center}
.find .caps{color:var(--ink-3);display:block;margin-bottom:1.1rem}
.field{display:flex;align-items:center;gap:.5rem;border:1px solid var(--ink);background:var(--pierre);
  padding:.3rem .3rem .3rem 1.4rem}
.field input{flex:1;min-width:0;min-height:50px;border:none;background:transparent;font:inherit;
  font-size:1.02rem;color:var(--ink);outline:none}
.field input::placeholder{color:var(--ink-3);font-style:italic}
.field .go{width:50px;height:50px;flex:none;border:none;background:var(--ink);color:var(--pierre);
  display:grid;place-items:center;transition:background-color .2s}
.field .go:hover{background:var(--noyer)}

/* ---------- sections ---------- */
/* :where() garde à cette règle le poids d'un sélecteur d'élément : .sugg règle sa propre marge */
:where(.accueil) > section{padding:5rem 0}
@media(max-width:760px){:where(.accueil) > section{padding:3.5rem 0}}
.shead{text-align:center;margin-bottom:3rem}
.shead .caps{color:var(--noyer);display:block;margin-bottom:1rem}
.shead h2{font-size:clamp(2rem,4.4vw,2.8rem);margin-bottom:.7rem}
.shead p{margin:0;color:var(--ink-3);font-size:1rem;font-style:italic}

/* ---------- produits ---------- */
.cards{display:grid;gap:2.5rem 1.75rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/5;overflow:hidden;background:var(--pierre-3);margin-bottom:1.15rem;
  border:1px solid var(--rule-soft)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.03)}
.card h3{font-size:1.28rem;margin-bottom:.3rem;line-height:1.25}
.card .prov{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin:0 0 .6rem}
.card .desc{font-size:.94rem;color:var(--ink-2);margin:0 0 1.1rem;flex:1;line-height:1.55}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px solid var(--rule-soft);padding-top:.9rem}
.price{font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums}
.price small{font-weight:600;font-size:.62rem;letter-spacing:.14em;color:var(--ink-3);margin-left:.3rem}
.add{background:none;border:none;padding:0 0 2px;font-family:var(--f-t);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--noyer);border-bottom:1px solid var(--noyer);
  min-height:44px;transition:color .2s,border-color .2s}
.add:hover{color:var(--ink);border-color:var(--ink)}

/* cartes de rayon : la carte entière est le lien */
.cards.cats{grid-template-columns:1fr 1fr}
@media(min-width:700px){.cards.cats{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.cards.cats{grid-template-columns:repeat(5,1fr);gap:2rem 1.25rem}}
.card.cat{text-decoration:none;color:inherit}
.card.cat .ph{aspect-ratio:1/1}
.card.cat h3{font-size:1.2rem}
.card.cat .desc{margin-bottom:1rem}
.card.cat .go{margin-top:auto;align-self:flex-start;font-family:var(--f-t);font-size:.68rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--noyer);
  border-bottom:1px solid var(--noyer-l);padding-bottom:2px}
.card.cat:hover .go,.card.cat:focus-visible .go{color:var(--noyer-d);border-color:var(--noyer-d)}

/* ---------- suggestion du jour ---------- */
.sugg{background:var(--pierre-2);border-block:1px solid var(--rule);padding:1.5rem 0}
.sugg .top{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;margin-bottom:1.1rem}
.sugg .lab{margin:0;font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;color:var(--noyer)}
.sugg .autre{background:none;border:none;padding:0;cursor:pointer;font-family:var(--f-t);
  font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px}
.sugg .autre:hover{color:var(--ink)}
.sugg .liste{display:grid;grid-template-columns:1fr;gap:1rem 1.75rem;margin:0;padding:0;list-style:none}
@media(min-width:720px){.sugg .liste{grid-template-columns:repeat(3,1fr)}}
.sugg .prod{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit}
.sugg .prod img{width:54px;height:54px;flex:none;object-fit:cover;background:var(--pierre-3)}
.sugg .txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.sugg .nom{font-family:var(--f-d);font-size:1rem;line-height:1.25;
  font-variation-settings:var(--wonk)}
.sugg .prod:hover .nom{color:var(--noyer)}
.sugg .prix{font-size:.78rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.sugg .prix small{font-weight:600;font-size:.58rem;letter-spacing:.14em;
  color:var(--ink-3);margin-left:.25rem}

/* ---------- retrait ---------- */
.modes{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-bottom:3.5rem}
@media(min-width:780px){.modes{grid-template-columns:1fr 1fr;gap:2rem}}
.mode{border:1px solid var(--rule);background:var(--pierre-2);padding:1.7rem}
.mode .caps{color:var(--noyer);display:block;margin-bottom:.75rem}
.mode h3{font-size:1.32rem;margin-bottom:.5rem}
.mode p{margin:0 0 1.35rem;font-size:.96rem;color:var(--ink-2)}
.mode .lien{display:inline-flex;align-items:center;gap:.5rem}
.mode.ext{background:var(--pierre)}
.mode.ext .caps{color:var(--ink-3)}
.steps{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:3rem}
.step{text-align:center}
.step .n{font-family:var(--f-d);font-size:2.4rem;color:var(--laiton-d);display:block;line-height:1;
  margin-bottom:.8rem;font-variation-settings:var(--wonk)}
.step h3{font-size:1.22rem;margin-bottom:.45rem}
.step p{margin:0;font-size:.95rem;color:var(--ink-2)}

/* ---------- citation ---------- */
.press{background:var(--verre);color:#E6EFE9}
.press .wrap{padding:5rem 0;text-align:center}
@media(max-width:760px){.press .wrap{padding:3.5rem 0}}
.press blockquote{margin:0}
.press q{font-family:var(--f-d);font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.44;font-style:italic;
  quotes:none;display:block;max-width:27ch;margin-inline:auto;font-weight:400;font-variation-settings:var(--wonk)}
.press cite{display:block;margin-top:1.8rem;font-style:normal;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#9DB5A8}
.press cite a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.press cite a:hover{color:#E6EFE9}
.press :focus-visible{outline-color:#E2DED2}
.press .preuve{display:flex;align-items:center;justify-content:center;gap:1.1rem 2rem;flex-wrap:wrap;
  margin:2.8rem auto 0;padding-top:2rem;border-top:1px solid rgba(226,222,210,.16);
  font-size:.82rem;color:#B3C9BE;max-width:46rem}
.press .preuve b{color:var(--laiton);font-weight:600}
.press .preuve a{color:var(--laiton);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.press .preuve a:hover{text-decoration-thickness:2px}
.press .note{display:inline-flex;align-items:baseline;gap:.45rem}
.press .note strong{font-family:var(--f-d);font-size:1.55rem;font-weight:600;color:#EDE9DD;
  font-variation-settings:var(--wonk)}
.press .orn{color:var(--laiton);margin-bottom:1.8rem}

/* ---------- contact ---------- */
.contact .grid{display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:820px){.contact .grid{grid-template-columns:1fr 1fr;gap:4rem}}
.hours{width:100%;border-collapse:collapse;font-size:1rem}
.hours th{text-align:left;font-weight:400;color:var(--ink-2);padding:.6rem 0;border-bottom:1px solid var(--rule-soft)}
.hours td{text-align:right;padding:.6rem 0;border-bottom:1px solid var(--rule-soft);
  font-size:.9rem;font-variant-numeric:tabular-nums}
.hours tr[data-today] th,.hours tr[data-today] td{color:var(--noyer);font-weight:600}
.adr{list-style:none;margin:0 0 2rem;padding:0}
.adr li{padding:.35rem 0;font-size:1.02rem}
.adr a{text-decoration:none;border-bottom:1px solid var(--rule)}
.adr a:hover{border-color:var(--noyer);color:var(--noyer)}
.adr .tel{margin-top:.8rem}
.contact .acces,.contenu .acces{margin:0 0 2rem;color:var(--ink-2);font-size:1rem}
.hours-note{margin:1.5rem 0 0;color:var(--ink-3);font-size:.95rem;font-style:italic}

/* ---------- pied ---------- */
footer.site{background:var(--verre);color:#A6BCB0;padding:4rem 0 2rem;font-size:.94rem}
footer.site a{color:#E2DED2;text-decoration:none}
footer.site a:hover{color:var(--laiton)}
.fbrand{display:block;width:fit-content;max-width:100%;margin:0 auto .9rem}
.fbrand img{display:block;width:280px;max-width:100%;height:auto}
.fsub{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#93AA9E;font-weight:600;
  text-align:center;display:block;margin-bottom:3rem}
/* Les réseaux de la maison, sous son adresse : l'adresse cède sa marge du bas. */
.fsub:has(+ .freseaux){margin-bottom:1.2rem}
.freseaux{display:flex;justify-content:center;gap:.6rem;margin:0 0 3rem}
.freseaux a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #2A4B3C;border-radius:50%}
.freseaux a:hover{border-color:var(--laiton)}
.fgrid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:3rem}
.fgrid h3{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--laiton);
  margin-bottom:1rem;font-weight:600}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{padding:.3rem 0}
.legal{border-top:1px solid #2A4B3C;padding-top:1.6rem;display:flex;gap:1.5rem;flex-wrap:wrap;
  justify-content:space-between;font-size:.7rem;letter-spacing:.06em;color:#93AA9E}
.legal nav{display:flex;gap:1.4rem;flex-wrap:wrap}
/* la signature de l'atelier suit le copyright, après un point */
.legal .atelier{white-space:nowrap}
.legal .atelier::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--laiton);
  margin:0 .7em;vertical-align:middle}
/* sur un téléphone les colonnes s'empilent : elles se centrent sous l'enseigne, la ligne légale aussi */
@media(max-width:480px){
  .fgrid{grid-template-columns:1fr;text-align:center}
  .legal,.legal nav{justify-content:center}
  .legal{text-align:center}
  .legal .atelier{display:block;margin-top:.5rem}
  .legal .atelier::before{display:none}
}

/* ---------- renforts mobiles ---------- */
@media(max-width:760px){
  body{font-size:17px}
  .hero .txt{padding:2.5rem 0 3rem}
  .hero h1{font-size:clamp(2rem,8.5vw,2.6rem);max-width:none}
  .hero p{font-size:1rem}
  .hero .acts{gap:1.1rem}
  .btn{width:100%;padding:0 1.25rem}
  .shead{margin-bottom:2rem}
  .find{padding:2rem 0}
  .cards{gap:2rem 1.25rem}
  .steps{gap:1.75rem;margin-bottom:0}
  .contact .grid{gap:2.25rem}
}
@media(max-width:480px){
  .brand .nom{font-size:1.12rem;letter-spacing:.09em}
  .brand .sub{font-size:.58rem;letter-spacing:.16em}
  .ens{gap:.35rem}
  .iconbtn{width:42px;height:42px}
  .ens .left,.ens .right{min-width:calc(42px * 2 + .15rem)}
  .cards{grid-template-columns:1fr 1fr;gap:1.5rem .9rem}
  .card h3{font-size:1.06rem}
  .card .desc{display:none}
  .card.cat .desc{display:block;font-size:.86rem}
  .card .prov{font-size:.58rem;letter-spacing:.1em}
  .row{flex-direction:column;align-items:flex-start;gap:.6rem;margin-top:auto}
  .add{min-height:38px}
  .card .prov{margin-bottom:1rem}
  .press q{font-size:1.35rem}
}
/* la barre de navigation se fait défiler : on le signale. Défilée jusqu'au bout, le dernier lien garde
   autant d'air qu'au début : la marge du conteneur ne compte pas dans ce qui défile, la rangée la porte */
@media(max-width:999px){
  nav.main ul{justify-content:flex-start;gap:1.6rem;width:max-content;
    padding-inline:max(1.25rem,calc((100vw - 1280px)/2));padding-inline-end:2.5rem}
}
/* pas de zoom involontaire au focus sur iOS */
input,select,textarea{font-size:max(16px,1em)}
html{-webkit-tap-highlight-color:rgba(90,55,32,.12)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover .ph img{transform:none}
}

/* ==================================================================
   Au-delà de l'accueil : pages de contenu, recherche, page introuvable.
   Repris des maquettes des gabarits (gabarits.css).
================================================================== */

/* une ancre visée ne doit pas se glisser sous l'en-tête fixe ; --annonce est la hauteur de l'annonce du moment, mesurée par l'en-tête quand il y en a une */
:where(main) [id]{scroll-margin-top:calc(10rem + var(--annonce,0px))}
@media(max-width:760px){:where(main) [id]{scroll-margin-top:calc(8rem + var(--annonce,0px))}}

/* la barre d'administration de WordPress pousse l'en-tête fixe */
.admin-bar header.site{top:32px}
@media(max-width:782px){.admin-bar header.site{top:46px}}
@media(max-width:600px){.admin-bar header.site{top:0}}

/* l'état « Ouvert · ferme à… » est écrit par le script : la place est réservée en attendant */
.state[data-apc-etat]{visibility:hidden}
.state[data-apc-etat][data-pret]{visibility:visible}
a.iconbtn{text-decoration:none}

/* ---------- annonce du moment ---------- */
.annonce{background:var(--noyer);color:var(--pierre);text-align:center;font-size:.9rem;padding:.65rem 1.25rem;margin:0}
.annonce a{color:inherit}

/* ---------- fil d'Ariane et tête de page ---------- */
main.g{padding-bottom:5rem}
.fil{font-size:.76rem;letter-spacing:.04em;color:var(--ink-3);padding-top:1.7rem;margin:0}
.fil a{text-decoration:none;border-bottom:1px solid var(--rule)}
.fil a:hover{color:var(--noyer);border-color:var(--noyer)}
.fil span{margin:0 .45rem}
.tete{padding:1.6rem 0 2.1rem;border-bottom:1px solid var(--rule)}
.tete h1{font-size:clamp(2rem,7vw,3rem);margin-bottom:1rem}
.tete h1:last-child{margin-bottom:0}
.tete p{margin:0;color:var(--ink-2);max-width:54ch}
.tete .meta{margin-top:1.1rem;font-size:.8rem;letter-spacing:.05em;color:var(--ink-3)}
/* allergènes et origine des viandes (OIDAl, art. 5) : bien en vue, sous le titre d'un rayon, au panier, à la commande */
.denrees{margin:1.1rem 0;padding:.65rem .9rem;max-width:62ch;border-left:3px solid var(--laiton);background:var(--pierre-2)}
.denrees p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
.denrees p+p{margin-top:.3rem}
.tete .denrees{margin-bottom:0}

/* ---------- liste de produits ---------- */
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--noyer)}
.card .ph{display:block}
a.add{display:inline-flex;align-items:center;text-decoration:none}
.resultats{padding-top:2.4rem}
.pages{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;list-style:none;margin:3rem 0 0;padding:0}
.pages a,.pages span{min-width:46px;min-height:46px;display:grid;place-items:center;text-decoration:none;
  border:1px solid var(--rule);font-size:.9rem;font-variant-numeric:tabular-nums;padding:0 .6rem}
.pages [aria-current]{background:var(--noyer);color:var(--pierre);border-color:var(--noyer);font-weight:600}
.pages a:hover{border-color:var(--noyer);color:var(--noyer)}
.pages .dots{border-color:transparent}

/* panneau : aucun résultat, page introuvable */
.retour{border:1px solid var(--rule);background:var(--pierre-2);padding:2.4rem 1.5rem;text-align:center;margin-top:2rem}
.retour .caps{color:var(--noyer);display:block;margin-bottom:.9rem}
.retour h1,.retour h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:.8rem}
.retour p{margin:0 auto 1.6rem;color:var(--ink-2);max-width:44ch}
.retour .acts{display:flex;align-items:center;justify-content:center;gap:1.1rem 1.75rem;flex-wrap:wrap}

/* champ de recherche hors de l'accueil */
.chercher{max-width:660px;padding-top:2rem}
.chercher.centre{margin-inline:auto}
.retour .chercher{padding:0 0 1.8rem}

/* ---------- pages de contenu : ce que l'éditeur de WordPress produit ---------- */
.contenu{padding-top:2.4rem;max-width:42rem}
.contenu.large{max-width:none}
.contenu > :first-child{margin-top:0}
.contenu > :last-child{margin-bottom:0}
.contenu h2{font-size:clamp(1.55rem,4.6vw,2rem);margin:2.8rem 0 1rem}
.contenu h3{font-size:1.28rem;margin:2.2rem 0 .7rem;line-height:1.25}
.contenu p,.contenu ul,.contenu ol,.contenu dl{margin:0 0 1.2rem}
.contenu ul,.contenu ol{padding-left:1.3rem}
.contenu li{margin-bottom:.4rem}
.contenu li::marker{color:var(--laiton-d)}
.contenu a{color:var(--noyer);text-underline-offset:3px;text-decoration-thickness:1px}
.contenu a:hover{color:var(--noyer-d)}
.contenu a.btn{color:var(--pierre)}
.contenu a.btn.btn-o{color:var(--ink)}
.contenu a.btn.btn-o:hover{color:var(--pierre)}
.contenu strong{font-weight:600}
.contenu hr{border:0;border-top:1px solid var(--rule);margin:2.6rem 0}
.contenu figure{margin:2rem 0}
.contenu figure img{height:auto}
.contenu figcaption{font-size:.84rem;color:var(--ink-3);margin-top:.6rem;font-style:italic}
.contenu table{width:100%;border-collapse:collapse;font-size:.98rem;margin:0 0 1.6rem}
.contenu th{text-align:left;font-weight:600}
.contenu th,.contenu td{padding:.6rem .8rem .6rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
/* un bloc « large » sort de la colonne de lecture et prend la largeur de la page */
.contenu .alignwide,.contenu .alignfull{width:min(1080px,100vw - 2.5rem);max-width:none}

/* l'adresse et les horaires de l'accueil, repris dans une page par leurs codes courts :
   les règles des listes, des liens et des tableaux d'une page ne s'y appliquent pas */
.contenu .adr{margin:0 0 2rem;padding:0}
.contenu .adr li{margin-bottom:0}
.contenu .adr a{color:inherit}
.contenu .adr a:hover{color:var(--noyer)}
.contenu .hours{font-size:1rem;margin:0}
.contenu .hours th{font-weight:400}
.contenu .hours th,.contenu .hours td{padding:.6rem 0;vertical-align:middle}
.contenu .hours-note{margin:1.5rem 0 0}

/* citation */
.contenu blockquote{margin:2.4rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--laiton-d)}
.contenu blockquote p{font-family:var(--f-d);font-size:clamp(1.25rem,3.4vw,1.55rem);line-height:1.44;font-style:italic;
  font-variation-settings:var(--wonk);margin-bottom:.8rem}
.contenu blockquote cite{display:block;font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}

/* texte et photo côte à côte */
.contenu .wp-block-media-text{margin:2.6rem 0;gap:0}
.contenu .wp-block-media-text .wp-block-media-text__content{padding:1.6rem 0 0}
.contenu .wp-block-media-text__media img{border:1px solid var(--rule-soft)}
@media(min-width:601px){
  .contenu .wp-block-media-text .wp-block-media-text__content{padding:0 0 0 2.5rem}
  .contenu .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content{padding:0 2.5rem 0 0}
}
.contenu .wp-block-media-text__content > :first-child{margin-top:0}
.contenu .wp-block-media-text__content > :last-child{margin-bottom:0}

/* liste de producteurs */
.producteurs{display:grid;gap:0 2.5rem;grid-template-columns:1fr;margin:2.4rem 0;border-top:1px solid var(--rule)}
@media(min-width:700px){.producteurs{grid-template-columns:1fr 1fr}}
.producteur{padding:1.5rem 0;border-bottom:1px solid var(--rule)}
.contenu .producteur h3{margin:0 0 .3rem}
.contenu .producteur .lieu{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;color:var(--ink-3);margin:0 0 .7rem}
.contenu .producteur p:last-child{margin:0;font-size:.96rem;color:var(--ink-2)}

/* boutons posés dans l'éditeur */
.contenu .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 2rem;
  background:var(--noyer);color:var(--pierre);text-decoration:none;font-family:var(--f-t);font-size:.74rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--noyer);border-radius:0}
.contenu .wp-block-button__link:hover{background:var(--noyer-d);border-color:var(--noyer-d);color:var(--pierre)}

/* liste d'articles (repli) */
.articles{list-style:none;margin:0;padding:0}
.articles li{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.articles h2{font-size:1.4rem;margin-bottom:.4rem}
.articles h2 a{text-decoration:none}
.articles h2 a:hover{color:var(--noyer)}
.articles p{margin:0;color:var(--ink-2)}

@media(max-width:480px){
  .tete{padding:1.3rem 0 1.7rem}
}

/* ==================================================================
   La boutique : rayon et liste de produits (maquette du rayon).
================================================================== */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.outils{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1rem;flex-wrap:wrap;padding:1.6rem 0 2rem}
.outils .nb{font-size:.88rem;color:var(--ink-3);margin:0}
/* « .outils .woocommerce-ordering » : il faut passer devant la marge et le flottant que WooCommerce donne à ce formulaire */
.outils .woocommerce-ordering{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem .7rem;margin:0;float:none}
.outils label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
select.sel{min-height:48px;padding:0 2.4rem 0 .9rem;border:1px solid var(--ink-3);background:#fff;color:var(--ink);
  font-family:var(--f-t);border-radius:0;max-width:100%}
/* « main.g p.note » et pas « .note » : l'accueil a sa propre .note, dans la citation de presse */
main.g p.note{font-size:.92rem;color:var(--ink-2);font-style:italic;margin:.2rem 0 1.7rem}

/* carte d'un produit : le bouton d'ajout est celui de WooCommerce, au dessin de la maquette */
.card .row{margin-top:auto;flex-wrap:wrap}
.card .row > :nth-child(n+3){flex-basis:100%}
a.add.loading{opacity:.5}
a.add.added{color:var(--ink-3);border-color:var(--rule)}
.card .added_to_cart{font-size:.8rem;color:var(--noyer);text-underline-offset:3px}
/* « Voir le panier », que WooCommerce ajoute à la carte après un ajout, ne prend pas de place : sinon la carte
   grandit, la rangée de la grille avec elle, et le prix des cartes voisines descend (Kayuran, 18 oct 2026).
   Il se pose sous la rangée, dans l'espace entre deux rangées de cartes. Sur un téléphone, la carte est trop
   étroite pour le prix et le lien sur une ligne : il n'est pas montré, le bouton grisé et le compteur du panier
   de l'en-tête disent l'ajout. */
.card .row{position:relative}
.card .row > .added_to_cart{position:absolute;right:0;top:100%;margin-top:.3rem;display:inline-flex;
  align-items:center;min-height:24px;line-height:1.2;white-space:nowrap}
@media(max-width:480px){
  .card .row > .added_to_cart{display:none}
}

/* la boutique : champ de recherche puis rayons */
.rayons-tete{margin:3rem 0 2rem}

/* avis de WooCommerce (produit ajouté, erreur) au ton du site */
.woocommerce-message,.woocommerce-info,.woocommerce-error{list-style:none;margin:1.6rem 0 0;padding:1rem 1.2rem;
  border:1px solid var(--rule);border-left:3px solid var(--noyer);background:var(--pierre-2);font-size:.95rem}
.woocommerce-error{border-left-color:var(--it-rouge)}
.woocommerce-message a,.woocommerce-info a{color:var(--noyer)}
/* un avis suivi d'un lien (« Voir le panier ») : la phrase à gauche, le lien à droite, ou sous la phrase quand la place manque.
   Le lien garde 44 px sous le doigt ; ses marges négatives rendent à l'avis la hauteur d'une ligne. */
.woocommerce-message:has(>.button),.woocommerce-info:has(>.button),.woocommerce-error li:has(>.button){
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.2rem 1.5rem}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{min-height:44px;margin:-.45rem 0;padding:0;
  background:none;border:none;color:var(--noyer);font-size:.68rem;letter-spacing:.16em;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.woocommerce-message .button:hover,.woocommerce-info .button:hover,.woocommerce-error .button:hover{background:none;color:var(--ink)}

/* choix de la langue (extension apc-langues) : la langue de la page est marquée */
.fgrid .langues a[aria-current]{color:var(--laiton)}

@media(max-width:480px){
  .outils{padding:1.3rem 0 1.6rem}
}

/* ==================================================================
   Fiche produit (maquette de la fiche). Le formulaire d'ajout au panier est celui
   de WooCommerce, les champs d'options sont dessinés par l'extension des options
   produits : le thème leur donne le dessin de la maquette.
================================================================== */
.button,button.button,a.button,input.button{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 2rem;
  background:var(--noyer);color:var(--pierre);text-decoration:none;font-family:var(--f-t);font-size:.74rem;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--noyer);border-radius:0;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s}
.button:hover,button.button:hover,a.button:hover{background:var(--noyer-d);border-color:var(--noyer-d);color:var(--pierre)}
.button:disabled,.button.disabled{opacity:.45;cursor:default}

.fiche{display:grid;gap:1.9rem;padding:1.6rem 0 3rem}
@media(min-width:860px){
  .fiche{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  /* la photo suit pendant qu'on compose, sous l'en-tête fixe */
  .fiche > .ph{position:sticky;top:calc(11.5rem + var(--annonce,0px))}
}
.fiche .ph{aspect-ratio:4/5;overflow:hidden;background:var(--pierre-3);border:1px solid var(--rule-soft)}
.fiche .ph img{width:100%;height:100%;object-fit:cover}
.fiche .resume{min-width:0}
.fiche h1{font-size:clamp(1.9rem,6.5vw,2.7rem);margin-bottom:.6rem}
.fiche .prix{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;margin:0 0 1.1rem}
.fiche .prix small{font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);margin-left:.35rem}
.fiche .prix.hors-vente{color:var(--ink-3)}
.fiche .chapo{color:var(--ink-2);margin:0 0 .4rem}
.fiche .chapo p{margin:0 0 .6rem}
.fiche form.cart{margin:0}

/* options : un bloc par question, séparé du précédent par un filet.
   L'extension écrit ses règles en « .wcpa_wrap .wcpa_… », jusqu'à trois classes, et sa feuille passe après
   celle-ci : ces règles partent donc de #main pour peser plus lourd. */
#main .wcpa_form_outer,#main .wcpa_wrap,#main .wcpa_section,#main .wcpa_section_body,#main .wcpa_row{display:block;margin:0;padding:0;width:auto;max-width:none;float:none}
#main .wcpa_field_wrap{display:block;border:0;border-top:1px solid var(--rule);padding:1.6rem 0 0;margin:1.6rem 0 0;min-width:0;width:100%;max-width:none;float:none}
#main .wcpa_field_label{display:block;float:none;width:100%;font-family:var(--f-d);font-size:1.18rem;font-weight:600;line-height:1.2;
  padding:0;margin:0 0 .8rem;color:var(--ink);font-variation-settings:var(--wonk)}
#main select.wcpa_field{width:100%;min-height:48px;padding:0 2.4rem 0 .9rem;border:1px solid var(--ink-3);background-color:#fff;color:var(--ink);
  font-family:var(--f-t);border-radius:0;max-width:100%}
#main .wcpa_group_field{display:grid;gap:.55rem;margin:0}
@media(min-width:520px){#main .wcpa_group_field{grid-template-columns:1fr 1fr}}
#main .wcpa_checkbox,#main .wcpa_radio{margin:0;padding:0;width:auto}
#main .wcpa_checkbox label,#main .wcpa_radio label{display:flex;align-items:center;gap:.75rem;min-height:50px;margin:0;padding:.45rem .9rem;
  border:1px solid var(--rule);background:#fff;cursor:pointer;font-size:.98rem;line-height:1.3}
#main .wcpa_checkbox input,#main .wcpa_radio input{position:static;opacity:1;appearance:auto;-webkit-appearance:auto;width:20px;height:20px;flex:none;margin:0;accent-color:var(--noyer)}
#main .wcpa_checkbox_custom,#main .wcpa_radio_custom{display:none}
#main .wcpa_checkbox label:has(input:checked),#main .wcpa_radio label:has(input:checked){border-color:var(--noyer);box-shadow:inset 0 0 0 1px var(--noyer)}
#main .wcpa_checkbox label:has(input:disabled){color:var(--ink-3);background:var(--pierre-2);cursor:default}
#main .wcpa_option_price{margin-left:auto;font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
#main .wcpa_field_desc,#main .wcpa_field_bottom{font-size:.86rem;color:var(--ink-3)}
#main .wcpa_field_error{font-size:.84rem;color:var(--it-rouge);font-weight:600}
/* Les couleurs de l'extension passaient sous 4,5:1 (#f25a87 sur la pierre, #808080 sur blanc, relevé du 18 oct 2026). */
#main .wcpa_required_ast{color:var(--it-rouge)}
#main .wcpa__placeholder{color:var(--ink-3)}
#main .wcpa_clear a{font-size:.8rem;color:var(--ink-3)}
#main .wcpa_price_summary{border-top:1px solid var(--rule);margin:1.6rem 0 0;padding:1.2rem 0 0;font-size:.95rem;color:var(--ink-2)}
#main .wcpa_price_summary ul{list-style:none;margin:0;padding:0}
#main .wcpa_price_summary .wcpa_options_total,#main .wcpa_price_summary .wcpa_product_total,#main .wcpa_price_summary .wcpa_fee_total{font-size:.95rem;margin:0 0 .5rem}
#main .wcpa_price_summary .wcpa_total{border-top:1px solid var(--rule-soft);padding:.9rem 0 0;margin:.4rem 0 0;font-size:1.15rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}

/* quantité, sur la fiche et dans le panier */
.combien{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.8rem}
.combien > span{font-family:var(--f-d);font-size:1.18rem;font-weight:600;font-variation-settings:var(--wonk)}
.quantity{display:inline-flex;border:1px solid var(--ink)}
.quantity.hidden{display:none}
.quantity button{width:48px;height:48px;background:none;border:0;font-size:1.2rem;color:var(--ink)}
.quantity button:hover{background:var(--pierre-2)}
.quantity input.qty.input-text,.quantity input.qty{width:3rem;min-height:0;height:48px;border:0;border-inline:1px solid var(--rule);text-align:center;background:#fff;padding:0;
  border-radius:0;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.quantity input.qty::-webkit-outer-spin-button,.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* le bouton d'achat reste visible pendant qu'on compose */
.fiche .single_add_to_cart_button{position:sticky;bottom:.7rem;z-index:5;width:100%;margin-top:1.6rem;box-shadow:0 0 0 .7rem var(--pierre)}
/* une liste à recherche de l'extension des options s'ouvre en fin de page, au rang 1 : le bouton d'achat, collé en bas
   de l'écran, passait devant ses choix. Elle passe devant lui et reste sous l'en-tête. « body » pour l'emporter sur
   la règle que l'extension écrit dans la page. */
body .wcpa__menu-portal{z-index:6}
.rappel{font-size:.86rem;color:var(--ink-3);margin:1.1rem 0 0}
.retour.gauche{text-align:left;margin-top:1.2rem}
.retour.gauche p{margin-inline:0}

details.plus{border-top:1px solid var(--rule);margin-top:1.6rem}
details.plus:last-of-type{border-bottom:1px solid var(--rule)}
details.plus summary{min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  font-family:var(--f-d);font-size:1.1rem;font-weight:600;list-style:none;font-variation-settings:var(--wonk)}
details.plus summary::-webkit-details-marker{display:none}
details.plus summary::after{content:"+";font-family:var(--f-t);font-size:1.3rem;color:var(--noyer)}
details.plus[open] summary::after{content:"–"}
details.plus .contenu{padding:0 0 1.2rem;font-size:.96rem;color:var(--ink-2)}

/* suggestions sous une fiche et sous le panier */
.aussi{border-top:1px solid var(--rule);padding-top:3rem;margin-top:1.5rem}
.aussi .shead{margin-bottom:2rem}
/* sous le panier, les cartes sont dans le contenu de la page : leur titre garde la couleur du texte, pas celle des liens */
.contenu .card h3 a{color:inherit}
.contenu .card h3 a:hover{color:var(--noyer)}

/* ==================================================================
   Panier, commande, compte : le balisage reste celui de WooCommerce.
================================================================== */
div.woocommerce table.shop_table{width:100%;border-collapse:collapse;font-size:.96rem;margin:0 0 1.5rem}
div.woocommerce table.shop_table th,div.woocommerce table.shop_table td{padding:.65rem .8rem .65rem 0;border-bottom:1px solid var(--rule-soft);text-align:left;vertical-align:top}
div.woocommerce table.shop_table th{font-weight:600;color:var(--ink-2)}
div.woocommerce table.shop_table td:last-child,div.woocommerce table.shop_table th:last-child{padding-right:0}
/* confirmation et détail d'une commande : les champs ajoutés à la commande (les couverts) sortent de l'éditeur de champs
   dans un second tableau, sous celui de la commande. Chacun réglait ses colonnes sur son contenu, et « Oui » ne tombait
   pas sous les autres valeurs : les deux prennent les mêmes colonnes, et le second suit le premier sans la marge qui
   détachait sa ligne des autres. */
.woocommerce-order-details table.shop_table{table-layout:fixed}
.woocommerce-order-details table.shop_table tr>:first-child{width:60%}
.woocommerce-order-details table.shop_table:has(+table.custom-fields){margin-bottom:0}
.cart_totals h2,form.woocommerce-checkout h3,.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3,.u-columns h2,.woocommerce-order h2{font-size:1.4rem;margin:0 0 1.2rem}

/* champs */
div.woocommerce form .form-row{display:grid;gap:.4rem;margin:0 0 1.3rem;padding:0}
div.woocommerce form .form-row label{font-size:.86rem;font-weight:600;color:var(--ink-2)}
div.woocommerce form .form-row .required{color:var(--it-rouge);text-decoration:none}
div.woocommerce form .form-row .optional{font-weight:400;color:var(--ink-3)}
.woocommerce-input-wrapper{display:block}
div.woocommerce input.input-text,div.woocommerce select,div.woocommerce textarea,div.woocommerce input[type="email"],div.woocommerce input[type="tel"],
div.woocommerce input[type="password"],div.woocommerce input[type="text"],div.woocommerce input[type="date"]{min-height:50px;width:100%;padding:.6rem .9rem;
  border:1px solid var(--ink-3);background:#fff;color:var(--ink);font-family:var(--f-t);border-radius:0}
div.woocommerce textarea{min-height:96px;resize:vertical}
div.woocommerce form .form-row.woocommerce-invalid input.input-text,div.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--it-rouge);box-shadow:inset 0 0 0 1px var(--it-rouge)}
div.woocommerce input[type="checkbox"],div.woocommerce input[type="radio"]{width:20px;height:20px;min-height:0;padding:0;accent-color:var(--noyer);vertical-align:middle;margin:0 .6rem 0 0}
div.woocommerce form .form-row label.checkbox,.woocommerce-form__label-for-checkbox{display:block;position:relative;padding-left:2rem;font-weight:400;font-size:.94rem;color:var(--ink)}
div.woocommerce form .form-row label.checkbox input,.woocommerce-form__label-for-checkbox input{position:absolute;left:0;top:.15rem;margin:0}
div.woocommerce .col2-set .col-1,div.woocommerce .col2-set .col-2{width:auto;float:none}

/* panier : une ligne par article, la photo à gauche */
.woocommerce-cart-form table.shop_table{border-top:1px solid var(--rule)}
.woocommerce-cart-form thead{display:none}
.woocommerce-cart-form tr.cart_item{display:grid;grid-template-columns:84px 1fr auto;gap:.3rem 1.1rem;padding:1.5rem 0;border-bottom:1px solid var(--rule)}
div.woocommerce .woocommerce-cart-form tr.cart_item td{display:block;padding:0;border:0}
.woocommerce-cart-form td.product-thumbnail{grid-column:1;grid-row:1/span 4}
.woocommerce-cart-form td.product-thumbnail img{width:84px;height:105px;object-fit:cover;background:var(--pierre-3)}
.woocommerce-cart-form td.product-name{grid-column:2;grid-row:1;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.woocommerce-cart-form td.product-name > a{font-family:var(--f-d);font-size:1.15rem;font-weight:600;color:var(--ink);text-decoration:none;line-height:1.25;font-variation-settings:var(--wonk)}
.woocommerce-cart-form td.product-name dl,.woocommerce-cart-form td.product-name ul{margin:.3rem 0 0;padding:0;list-style:none}
.woocommerce-cart-form td.product-name dt,.woocommerce-cart-form td.product-name dd{display:inline;margin:0}
.woocommerce-cart-form td.product-name dd p{display:inline;margin:0}
.woocommerce-cart-form td.product-name dd::after{content:"";display:block}
div.woocommerce .woocommerce-cart-form tr.cart_item td.product-price{display:none}
.woocommerce-cart-form td.product-quantity{grid-column:2;grid-row:2;margin-top:.9rem}
.woocommerce-cart-form td.product-subtotal{grid-column:3;grid-row:2;align-self:center;margin-top:.9rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.woocommerce-cart-form td.product-remove{grid-column:3;grid-row:1;justify-self:end}
.woocommerce-cart-form a.remove{display:grid;place-items:center;width:44px;height:44px;margin:-.6rem -.6rem 0 0;font-size:1.4rem;line-height:1;color:var(--ink-3);text-decoration:none}
.woocommerce-cart-form a.remove:hover{color:var(--it-rouge)}
div.woocommerce .woocommerce-cart-form td.actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:flex-end;justify-content:space-between;padding:1.5rem 0 0;border:0}
.woocommerce-cart-form .coupon{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.woocommerce-cart-form .coupon input.input-text{width:12rem}
.woocommerce-cart-form td.actions .button{background:transparent;color:var(--ink);border-color:var(--ink);min-height:50px;padding:0 1.2rem}
.woocommerce-cart-form td.actions .button:hover{background:var(--ink);color:var(--pierre)}
.cart_totals,.woocommerce-checkout-review-order{background:var(--pierre-2);border:1px solid var(--rule);padding:1.7rem 1.5rem}
/* le panier se met à jour tout seul quand une quantité change (assets/js/site.js) : le bouton de WooCommerce
   reste dans la page, parce que c'est lui que le script actionne, mais on ne le montre plus. Sans script, il reste visible. */
html.apc-js div.woocommerce .woocommerce-cart-form td.actions [name="update_cart"]{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cart-collaterals{margin-top:2rem}
.cart_totals h2{font-size:1.3rem}
.cart_totals table.shop_table td{text-align:right;font-variant-numeric:tabular-nums}
.cart_totals .order-total th,.cart_totals .order-total td,.woocommerce-checkout-review-order .order-total th,.woocommerce-checkout-review-order .order-total td{font-size:1.15rem;font-weight:600;color:var(--ink);border-bottom:0}
.wc-proceed-to-checkout .button,#place_order{width:100%}
div.woocommerce > .aussi{margin-top:3.5rem}
@media(min-width:900px){
  main div.woocommerce{display:grid;grid-template-columns:1.45fr .9fr;gap:0 3.5rem;align-items:start}
  main div.woocommerce > *{grid-column:1/-1}
  main div.woocommerce > .woocommerce-cart-form{grid-column:1}
  /* pas de position collante ici : le total suivrait le défilement jusque sur les suggestions, rangées dans la même grille */
  main div.woocommerce > .cart-collaterals{grid-column:2;margin-top:0}
}

/* commande : les coordonnées à gauche, le récapitulatif et le paiement à droite */
form.woocommerce-checkout{margin-top:2.4rem}
/* liste déroulante habillée par WooCommerce (select2) : même hauteur et même cadre que les autres champs */
div.woocommerce .select2-container .select2-selection--single{height:50px;border:1px solid var(--ink-3);border-radius:0;background:#fff}
div.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{line-height:48px;padding:0 2.4rem 0 .9rem;color:var(--ink)}
div.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{height:48px;right:.5rem}
div.woocommerce .select2-container .select2-selection--single .select2-selection__clear{margin-right:1.4rem}
/* bloc des points de fidélité de l'extension : son titre à la taille des autres titres de la commande */
form.woocommerce-checkout h2{font-size:1.4rem;margin:0 0 1rem}
/* le même bloc sur un téléphone : ses lignes ne se replient pas d'elles-mêmes (403 px de large) et poussaient la page de côté */
.lws-wr-pointsoncart .lws-wr-cart>div{max-width:100%}
.lws-wr-pointsoncart .wr-cart-buttons{flex-wrap:wrap;row-gap:.5rem}
.lws-wr-pointsoncart .wr-cart-buttons .button,.lws-wr-pointsoncart .wr-cart-buttons .button span{white-space:normal}
.lws-wr-pointsoncart .wr-cart-line-input{flex:0 1 auto;min-width:0}
.lws-wr-pointsoncart .wr-input-amount{max-width:100%;min-width:0}
.woocommerce-checkout #order_review_heading{margin-top:2.4rem}
.woocommerce-form-login-toggle + .woocommerce-form-login,.woocommerce-form-coupon-toggle + .checkout_coupon{margin-top:1.2rem}
.woocommerce-checkout-review-order table.shop_table td:last-child,.woocommerce-checkout-review-order table.shop_table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
#payment ul.payment_methods{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--rule)}
#payment ul.payment_methods > li{padding:.9rem 0;border-bottom:1px solid var(--rule)}
#payment ul.payment_methods label{font-weight:600}
#payment ul.payment_methods img{display:inline;max-height:24px;margin-left:.5rem;vertical-align:middle}
#payment .payment_box{font-size:.9rem;color:var(--ink-2);padding:.5rem 0 0 1.9rem}
#payment .payment_box p{margin:0}
/* Le champ caché de Stripe (absolu, large de 100 %) se mesure sur son formulaire, pas sur la page qu'il faisait déborder. */
#wc-stripe-upe-form{position:relative}
.woocommerce-terms-and-conditions-wrapper{font-size:.92rem;margin:0 0 1.2rem}
.woocommerce-privacy-policy-text p{margin:0 0 1rem;color:var(--ink-2)}
@media(min-width:900px){
  form.woocommerce-checkout{display:grid;grid-template-columns:1.45fr .9fr;gap:0 3.5rem;align-items:start}
  form.woocommerce-checkout > *{grid-column:1/-1}
  form.woocommerce-checkout > #customer_details{grid-column:1;grid-row:2/span 2}
  form.woocommerce-checkout > #order_review_heading{grid-column:2;grid-row:2;margin-top:0}
  form.woocommerce-checkout > #order_review{grid-column:2;grid-row:3}
}

/* compte */
.woocommerce-MyAccount-navigation ul{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--rule);list-style:none;
  margin:0 0 2rem;padding:0;white-space:nowrap}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-MyAccount-navigation a{display:block;padding:.95rem 0;text-decoration:none;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid transparent}
.woocommerce-MyAccount-navigation .is-active a,.woocommerce-MyAccount-navigation a:hover{color:var(--noyer);border-color:var(--noyer)}
.points{border:1px solid var(--rule);background:var(--pierre-2);padding:1.4rem 1.5rem;margin:0 0 2rem}
.points .caps{color:var(--noyer)}
/* le numéro et la date d'une commande, dans la phrase en tête de son détail : WooCommerce les balise en mark,
   que le navigateur surligne en jaune. Le jaune reste aux questions ouvertes des pages légales. */
mark.order-number,mark.order-date,mark.order-status{background:none;color:inherit}
/* les boutons d'une commande (« Voir », « Imprimer la facture ») sortent de WooCommerce sans rien entre eux :
   ils se lisaient comme un seul. Un écart entre deux boutons, et entre deux lignes s'ils passent à la ligne. */
.woocommerce-orders-table__cell-order-actions .button{margin:.25rem 0}
.woocommerce-orders-table__cell-order-actions .button:not(:last-child){margin-right:.5rem}
/* liste des commandes sur un téléphone : ses six colonnes font 513 px et poussaient la page de côté.
   Chaque commande devient une fiche, le titre de la colonne (data-title, posé par WooCommerce) devant sa valeur. */
@media(max-width:600px){
  .woocommerce-orders-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .woocommerce-orders-table,.woocommerce-orders-table tbody,.woocommerce-orders-table tr{display:block}
  div.woocommerce table.woocommerce-orders-table th,div.woocommerce table.woocommerce-orders-table td{display:block;padding-right:0;text-align:right}
  div.woocommerce table.woocommerce-orders-table [data-title]::before{content:attr(data-title);float:left;margin-right:1.2rem;font-weight:600;color:var(--ink-2)}
  div.woocommerce table.woocommerce-orders-table tbody tr{border-bottom:1px solid var(--rule)}
  div.woocommerce table.woocommerce-orders-table .button{margin:0 0 .5rem .5rem}
}
div.woocommerce .u-columns{display:grid;gap:2.4rem}
@media(min-width:760px){div.woocommerce .u-columns{grid-template-columns:1fr 1fr;gap:3.5rem}}
div.woocommerce form.login,div.woocommerce form.register,div.woocommerce form.lost_reset_password{border:1px solid var(--rule);background:var(--pierre-2);padding:1.7rem 1.5rem;margin:0}
/* bouton « afficher le mot de passe » : WooCommerce le dessinait avec sa police d'icônes, que le site ne charge plus */
.password-input{position:relative;display:block}
.show-password-input{position:absolute;right:0;top:0;width:50px;height:50px;padding:0;border:0;cursor:pointer;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23414A53' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/20px no-repeat}
.show-password-input.display-password{opacity:.5}
.woocommerce-LostPassword{font-size:.86rem;margin:1.1rem 0 0}
.woocommerce-form-login__rememberme{margin:0 0 1rem}

/* ---------- accueil : bandeau d'un rayon de saison ouvert ---------- */
.saison{background:var(--pierre);border-bottom:1px solid var(--rule);padding:1.6rem 0}
.saison .in{display:grid;grid-template-columns:88px 1fr;gap:1rem 1.2rem;align-items:center;text-decoration:none;color:inherit}
.saison .in + .in{margin-top:1.4rem}
.saison img{width:88px;height:88px;object-fit:cover;background:var(--pierre-3)}
.saison .caps{color:var(--noyer);display:block;margin-bottom:.35rem}
.saison .t{display:block;font-family:var(--f-d);font-size:clamp(1.3rem,4.6vw,1.75rem);font-weight:600;line-height:1.15;
  font-variation-settings:var(--wonk)}
.saison .p{display:block;color:var(--ink-2);font-size:.95rem;margin-top:.3rem}
.saison .go{grid-column:1/-1;justify-self:start;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--noyer);border-bottom:1px solid var(--noyer-l);padding-bottom:2px}
.saison .in:hover .go{color:var(--noyer-d);border-color:var(--noyer-d)}
@media(min-width:760px){
  .saison .in{grid-template-columns:120px 1fr auto;gap:2rem}
  .saison img{width:120px;height:120px}
  .saison .go{grid-column:auto;justify-self:end}
}

/* ---- recherche : les suggestions sous le champ ---- */
.field{position:relative}
.suggestions{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:10;max-height:min(70vh,26rem);overflow-y:auto;
  background:var(--pierre);border:1px solid var(--ink);box-shadow:0 12px 28px rgba(22,26,31,.14);text-align:left}
.suggestions[hidden],.suggestions .vide[hidden]{display:none}
.suggestions .vide{margin:0;padding:.8rem .9rem;color:var(--ink-2);font-style:italic}
.suggestions .sug{display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.35rem .9rem;color:var(--ink);
  text-decoration:none;border-top:1px solid var(--rule-soft)}
.suggestions .sug img{flex:none;width:48px;height:48px;object-fit:cover;background:var(--pierre-3)}
.suggestions .sug .n{flex:1;min-width:0;line-height:1.25}
.suggestions .sug .p{flex:none;font-size:.86rem;color:var(--ink-2);white-space:nowrap}
.suggestions .sug.rayon,.suggestions .sug.partout{min-height:48px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.suggestions .sug:hover,.suggestions .sug.actif{background:var(--pierre-2)}
.suggestions .sug.actif{outline:2.5px solid var(--laiton-d);outline-offset:-3px}

/* ---- anti-spam : son champ piège reste hors du parcours au clavier et des lecteurs d'écran ---- */
.altEmail_container{visibility:hidden}