/* Gabarit libre-service — dense et lisible : beaucoup de produits à l'écran, texte de 13 px, gris-bleu sobre. */
:root{--accent:#1F5680;--encre:#17212b;--gris:#5b6875;--pale:#8793a0;--trait:#e2e7ec;--trait2:#eef1f4;--fond:#f4f6f8;--blanc:#fff;--promo:#b5401f;--promo-f:#fdf0ea;--ok:#1c7a50;--ok-f:#e8f4ee;--pays:#8a6412;--pays-f:#f8f0d8;
  --accent-f:color-mix(in srgb,var(--accent) 9%,#fff);--accent-s:color-mix(in srgb,var(--accent) 82%,#000);--r:8px;--ombre:0 1px 2px rgba(23,33,43,.06),0 4px 14px rgba(23,33,43,.05);--tete:101px;--g:16px;--cote-l:0px;--haut:var(--tete)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--tete) + 12px)}
body{margin:0;font:13px/1.4 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--encre);background:var(--fond);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
body.fige{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
small{font-size:11px;font-weight:400;color:var(--gris)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.evite{position:absolute;left:-999px;top:0;background:var(--encre);color:#fff;padding:8px 12px;z-index:99}
.evite:focus{left:8px;top:8px}
.boite{max-width:none;margin:0;padding:0 var(--g)}
.pic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.lien{color:var(--accent);font-weight:600}
.lien:hover{text-decoration:underline}
.note{font-size:11.5px;color:var(--gris);margin-top:8px}
.charge{color:var(--gris);padding:14px 0}
.centre{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.centre-l{display:block;text-align:center;margin-top:10px}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 14px;border-radius:7px;border:1px solid var(--accent);background:var(--accent);color:#fff;font-weight:600;font-size:13px;white-space:nowrap;transition:background .12s}
.btn:hover{background:var(--accent-s)}
.btn.clair{background:var(--blanc);color:var(--accent);border-color:var(--trait)}
.btn.clair:hover{background:var(--accent-f);border-color:color-mix(in srgb,var(--accent) 35%,#fff)}
.btn.petit{min-height:30px;padding:0 10px;font-size:12px}
.btn.large{width:100%;min-height:44px;font-size:14px}
.btn.inactif,.btn:disabled{background:#c5ccd3;border-color:#c5ccd3;color:#fff;cursor:not-allowed}
.ico-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:0;background:none;border-radius:7px;color:var(--gris)}
.ico-btn:hover{background:var(--trait2);color:var(--encre)}

/* annonce + en-tête */
.annonce{background:var(--encre);color:#e9eef3;text-align:center;font-size:12px;padding:5px 12px}
.annonce a{text-decoration:underline;text-underline-offset:2px}
.tete{position:sticky;top:0;z-index:40;background:var(--blanc);border-bottom:1px solid var(--trait)}
.tete-l{display:flex;align-items:center;gap:14px;height:60px}
.seul-tel{display:none}
.marque{display:flex;align-items:center;gap:9px;flex:none}
.marque-pastille{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;font-size:17px}
.marque-nom{display:flex;flex-direction:column;font-weight:700;font-size:15px;line-height:1.15;letter-spacing:-.01em}
.marque-nom small{font-size:10.5px}
.marque-nom small.ouvert{color:var(--ok)}
.cherche{position:relative;flex:1;max-width:none;display:flex;align-items:center;height:40px;border:1.5px solid var(--trait);border-radius:9px;background:var(--fond);padding-left:10px;transition:border-color .12s,background .12s}
.cherche:focus-within{border-color:var(--accent);background:var(--blanc)}
.cherche>.pic{color:var(--pale)}
.cherche input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 8px;font-size:14px;outline:none}
.cherche input::-webkit-search-cancel-button{cursor:pointer}
.cherche-ok{height:100%;border:0;border-left:1px solid var(--trait);background:none;padding:0 12px;font-weight:600;color:var(--accent);border-radius:0 8px 8px 0}
.cherche-ok:hover{background:var(--accent-f)}
.sugg{position:absolute;left:-1px;right:-1px;top:44px;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;box-shadow:0 12px 32px rgba(23,33,43,.16);padding:6px;max-height:min(72vh,560px);overflow:auto;z-index:50}
.sg-note{padding:6px 8px;color:var(--gris);font-size:12px}
a.sg{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px}
a.sg:hover,.sg.survol{background:var(--accent-f)}
.sg-rayon span{flex:1}
.sg-tout{justify-content:center;color:var(--accent);font-weight:600;border-top:1px solid var(--trait2);margin-top:4px;border-radius:0 0 6px 6px}
.creneau-btn,.panier-btn,.cote-creneau{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px;border:1px solid var(--trait);border-radius:9px;background:var(--blanc);text-align:left;flex:none}
.creneau-btn>span,.panier-btn>span,.cote-creneau>span{display:flex;flex-direction:column;line-height:1.15}
.creneau-btn b,.cote-creneau b{font-size:12.5px;color:var(--accent)}
.creneau-btn:hover,.cote-creneau:hover{border-color:var(--accent);background:var(--accent-f)}
.creneau-btn .pic,.cote-creneau .pic{color:var(--accent)}
.tete-liens{display:flex;gap:2px}
.ico-lien{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 8px;border-radius:7px;font-size:10.5px;color:var(--gris);white-space:nowrap}
.ico-lien:hover{background:var(--trait2);color:var(--encre)}
.panier-btn{background:var(--accent);border-color:var(--accent);color:#fff;min-width:128px;white-space:nowrap}
.panier-btn small{color:rgba(255,255,255,.8)}
.panier-btn b{font-size:14px}
.panier-btn:hover{background:var(--accent-s)}
.rayons-barre{border-top:1px solid var(--trait2);background:var(--blanc);position:relative}
.rayons-l{display:flex;align-items:stretch;gap:0;height:38px;overflow:hidden}
.rb-groupe{flex:none}
.rb-groupe{display:flex}
.rb{display:flex;align-items:center;padding:0 9px;font-size:12.5px;font-weight:500;color:#33404c;white-space:nowrap;border-bottom:2px solid transparent}
.rb:hover,.rb-groupe:hover>.rb,.rb.actif{color:var(--accent);border-bottom-color:var(--accent)}
.rb.special{color:var(--promo);font-weight:700;padding-left:0}
.rb.special:hover{border-bottom-color:var(--promo);color:var(--promo)}
.mega{display:none;position:absolute;left:var(--g);right:var(--g);top:38px;background:var(--blanc);border:1px solid var(--trait);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 18px 36px rgba(23,33,43,.14);padding:14px 18px 16px;z-index:45}
.rb-groupe:hover>.mega,.rb-groupe:focus-within>.mega{display:block}
.mega-tete{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--trait2);color:var(--accent)}
.mega-tete b{font-size:15px;color:var(--encre)}
.mega-tete span{color:var(--accent);font-weight:600;margin-left:8px}
.mega ul{columns:4;column-gap:24px}
.mega li a{display:flex;justify-content:space-between;gap:8px;padding:5px 6px;border-radius:5px;break-inside:avoid}
.mega li a:hover{background:var(--accent-f);color:var(--accent)}
.mega li span{color:var(--pale);font-size:11px}
.mega.etroit{left:auto;right:var(--g);width:260px}.mega.etroit ul{columns:1}

/* mise en page (BOUTIQUE3) : le site prend toute la largeur ; sur grand écran le panier est un panneau calé au bord droit, collé sous l'en-tête,
   de la hauteur de la fenêtre (son contenu défile à l'intérieur, total et bouton toujours visibles) ; il se replie en un onglet au bord droit ;
   en dessous de 1100 points c'est un tiroir. Le pied de page se range à sa gauche : le panier ne recouvre jamais rien. */
.page{display:block;padding-top:12px;padding-bottom:40px;min-height:calc(100vh - var(--tete) - 150px)}
.cote{display:none}
.cote-onglet{display:none}
.cote-ferme{margin:-6px -6px -6px 4px}
@media (min-width:1100px){
  html:not(.cote-replie) body.a-cote{--cote-l:clamp(300px,21vw,400px)}
  html.cote-replie body.a-cote{--cote-l:38px}
  .page.avec-panier{padding-right:calc(var(--cote-l) + var(--g))}
  .cote{display:flex;flex-direction:column;position:fixed;right:0;top:min(var(--haut),calc(100vh - var(--bas,0px) - 270px));bottom:var(--bas,0px);width:var(--cote-l);background:var(--blanc);border-left:1px solid var(--trait);z-index:30;overflow:hidden}
  /* fenêtre basse, en bas de page : le panier garde 270 points de haut (liste, total, bouton) et remonte sous l'en-tête plutôt que de s'écraser contre le pied */
  html.cote-replie .cote{display:none}
  html.cote-replie body.a-cote .cote-onglet{display:flex;flex-direction:column;align-items:center;gap:10px;position:fixed;right:0;top:var(--haut);bottom:var(--bas,0px);width:38px;overflow:hidden;padding:12px 0;border:0;border-left:1px solid var(--trait);background:var(--blanc);color:var(--accent);z-index:30;font-weight:700}
  .cote-onglet:hover{background:var(--accent-f)}
  .cote-onglet span{writing-mode:vertical-rl;letter-spacing:.06em;font-size:11.5px;text-transform:uppercase;white-space:nowrap}
  .cote-onglet b{writing-mode:vertical-rl;font-size:13px;color:var(--encre);white-space:nowrap}
  .cote-onglet i{display:grid;place-items:center;min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-style:normal;font-size:11px}
}
@media (min-width:1500px){:root{--g:20px}}
@media (min-width:1900px){:root{--g:24px}.grille,.defile{--tuile:172px}}
@media (max-width:1099px){
  .cote.ouvert{display:flex;flex-direction:column;position:fixed;right:0;top:0;bottom:0;width:min(92vw,400px);background:var(--blanc);z-index:70;box-shadow:-18px 0 40px rgba(23,33,43,.18);overflow:hidden}
}
.cote-tete{display:flex;align-items:center;gap:8px;padding:10px 12px 8px;flex:none}.cote-tete h2{margin-right:auto}
.cote-tete h2{font-size:15px}
.cote-tete span{color:var(--gris);font-size:12px}
.cote-creneau{margin:0 12px 8px;width:calc(100% - 24px)}
.cote-lignes{flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 6px;min-height:120px;scrollbar-width:thin}
.cote-vide{color:var(--gris);text-align:center;padding:26px 14px;line-height:1.6}
.plus-ex{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;line-height:1}
.cote-rayon{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--pale);padding:9px 6px 3px}
.cote-pied{flex:none;border-top:1px solid var(--trait);padding:10px 12px 12px;background:var(--blanc);box-shadow:0 -6px 14px rgba(23,33,43,.05)}
.cote-total,.recap-l{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0}
.cote-total b{font-size:18px}
.cote-total{margin-bottom:8px}
.jauge{margin-bottom:8px}
.jauge-barre{height:5px;border-radius:3px;background:var(--trait2);overflow:hidden}
.jauge-barre i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .25s}
.jauge.ok .jauge-barre i{background:var(--ok)}
.jauge span{display:block;font-size:11.5px;color:var(--gris);margin-top:4px}
.jauge.ok span{color:var(--ok);font-weight:600}

/* ligne de produit compacte (panier latéral, suggestions, envies) */
.lp{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"img txt prix" "img txt qte";column-gap:8px;align-items:center;padding:6px;border-radius:7px}
.lp:hover{background:var(--fond)}
.lp-img{grid-area:img}
.lp-img img,.pl-img img{border-radius:5px;background:#fff;mix-blend-mode:multiply}
.lp-txt{grid-area:txt;min-width:0;display:flex;flex-direction:column;gap:1px}
.lp-txt a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3}
.lp-txt a small,.pl-txt a small{font-weight:700;color:var(--encre);font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.lp-c{font-size:11px;color:var(--gris)}
.lp-prix{grid-area:prix;text-align:right;font-size:12.5px;white-space:nowrap}
.lp-prix s{color:var(--pale);font-size:11px}
.lp .qte{grid-area:qte;justify-self:end}
.lp-rupt{grid-area:qte;font-size:11px;color:var(--promo)}
.sg.lp{grid-template-areas:"img txt prix qte";grid-template-columns:auto minmax(0,1fr) auto auto}
.sg.lp .qte{margin-left:6px}

/* quantité : « + » qui devient « − 2 + » */
.qte{display:inline-flex;align-items:center;height:32px;border-radius:16px;background:var(--accent);color:#fff;flex:none}
.qte button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:none;color:#fff}
.qte button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.qte button:hover{background:rgba(255,255,255,.18)}
.qte output{min-width:20px;padding:0 2px;text-align:center;font-weight:700;font-size:13px;white-space:nowrap}
.qte:not(.pris){background:var(--blanc);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.qte:not(.pris) button{color:var(--accent)}
.qte:not(.pris) button:hover{background:var(--accent);color:#fff}
.lp .qte{height:26px}.lp .qte button{width:26px;height:26px}.lp .qte button svg{width:13px;height:13px}.lp .qte output{font-size:12px}
.qte.grand{height:44px;border-radius:22px}.qte.grand button{width:44px;height:44px}.qte.grand output{min-width:56px;font-size:16px}
.qte.grand:not(.pris)::after{content:"Ajouter au panier";padding:0 16px 0 2px;font-weight:600;font-size:14px}
/* 30/10/2026 (Marcel, site Cart France) : toute la pastille « + Ajouter au panier » est cliquable, pas seulement le rond « + » */
.qte.grand{position:relative}.qte.grand:not(.pris){padding-left:44px}.qte.grand:not(.pris) button.q-plus{position:absolute;inset:0;width:auto;height:auto;border-radius:22px;display:flex;align-items:center;justify-content:flex-start;padding-left:14px;cursor:pointer;background:none}.qte.grand:not(.pris):hover{background:var(--accent);color:#fff}.qte.grand:not(.pris):hover button.q-plus{background:none;color:#fff}

/* étiquettes */
.eti{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10.5px;font-weight:700;font-style:normal;line-height:1.5;white-space:nowrap}
.eti.promo{background:var(--promo);color:#fff}
.eti.bio{background:var(--ok-f);color:var(--ok)}
.eti.pays{background:var(--pays-f);color:var(--pays)}
.eti.neuf{background:var(--accent-f);color:var(--accent)}

/* tuile produit */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tuile,156px),1fr));gap:8px}
.t{position:relative;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:8px;min-width:0;transition:border-color .12s,box-shadow .12s}
.t:hover{border-color:#c9d2da;box-shadow:var(--ombre)}
.t.aupanier{border-color:color-mix(in srgb,var(--accent) 55%,#fff)}
.t-img{display:grid;place-items:center;aspect-ratio:1/1;max-height:132px;margin:0 auto 6px;width:100%}
.t-img img{max-height:132px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.sans{display:grid;place-items:center;width:100%;height:100%;max-width:132px;aspect-ratio:1/1;border-radius:8px;background:var(--teinte,#eef1f4);color:rgba(23,33,43,.42)}
.sans .pic{width:42%;height:42%;stroke-width:1.2}
.sans.mini{width:40px;height:40px;border-radius:6px}
.sans.mini .pic{width:22px;height:22px}
.t-eti{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none}
.t-eti.fixe{position:static;flex-direction:row;margin-bottom:8px}
.t-coeur{position:absolute;right:4px;top:4px;display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#a9b3bd;opacity:.0;transition:opacity .12s}
.t:hover .t-coeur,.t-coeur:focus-visible,.t-coeur.actif{opacity:1}
.t-coeur svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.t-coeur:hover{color:var(--promo)}
.t-coeur.actif{color:var(--promo)}.t-coeur.actif svg{fill:currentColor}
.t-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.t-m{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--encre);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-n{font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.t-n:hover{color:var(--accent)}
.t-c{font-size:11px;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:6px;min-height:34px}
.t-prix{display:flex;flex-direction:column;line-height:1.15}
.t-prix b{font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.t-prix s{font-size:11px;color:var(--pale)}
.t-prix small{font-size:10.5px}
.enpromo .t-prix b{color:var(--promo)}
.t.epuise .t-img,.t.epuise .t-txt,.t.epuise .t-prix{opacity:.5}
.t-rupt{font-size:11px;font-weight:600;color:var(--accent);text-align:right;line-height:1.25;max-width:96px}
.t-rupt:hover{text-decoration:underline}

/* vue en liste (grand écran) : une ligne par produit, tout sur 56 px */
.grille.vue-liste{grid-template-columns:1fr;gap:0;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.vue-liste .t{flex-direction:row;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--trait2);border-radius:0;padding:5px 10px;box-shadow:none}
.vue-liste .t:last-child{border-bottom:0}
.vue-liste .t:hover{background:var(--fond)}
.vue-liste .t-img{width:46px;height:46px;max-height:46px;margin:0;flex:none}
.vue-liste .t-img img{max-height:46px}
.vue-liste .sans{max-width:46px;border-radius:6px}
.vue-liste .t-eti{position:static;flex-direction:row;order:3;flex:none}
.vue-liste .t-coeur{position:static;order:6;opacity:1;background:none}
.vue-liste .t-txt{flex-direction:row;align-items:baseline;gap:8px;order:2}
.vue-liste .t-m{flex:none;max-width:150px}
.vue-liste .t-n{min-height:0;-webkit-line-clamp:1;flex:0 1 auto}
.vue-liste .t-c{flex:1;text-align:right;min-width:90px}
.vue-liste .t-bas{order:5;margin:0;min-height:0;align-items:center;gap:12px;flex:none;width:190px}
.vue-liste .t-prix{flex-direction:row;align-items:baseline;gap:6px;flex:1;justify-content:flex-end}
.vue-liste .t-prix b{font-size:14px}

/* bandes qui défilent */
.bande{margin:18px 0 0}
.bande-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.bande-tete h2{font-size:16px;letter-spacing:-.01em}
.bande-sous{color:var(--gris);font-size:12px}
.bande-tete .lien,.bande-tete .btn{margin-left:auto}
.bande-tete .btn+.lien{margin-left:0}
/* bande de tuiles : UNE rangée, autant de tuiles que la largeur en accepte ; le reste est derrière « Tout voir » (jamais d'ascenseur horizontal) */
.defile{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tuile,156px),1fr));grid-template-rows:auto;grid-auto-rows:0;column-gap:8px;row-gap:0;overflow:hidden;padding:1px}

/* fil d'Ariane, en-tête de rayon, pastilles, outils */
.fil{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:var(--gris);margin-bottom:8px}
.fil a:hover{color:var(--accent);text-decoration:underline}
.fil b{color:var(--encre);font-weight:600}
.entete{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,var(--teinte,#e9eef3),color-mix(in srgb,var(--teinte,#e9eef3) 35%,#fff));border-radius:12px;padding:12px 16px;margin-bottom:10px}
.entete h1{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.entete p{color:#44515d;font-size:12.5px;margin-top:2px}
.entete-pic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.7);color:var(--accent);flex:none}
.entete-pic .pic{width:26px;height:26px}
.entete-actions{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
/* pastilles de sous-rayons : elles passent à la ligne ; ce qui ne tient pas se range derrière « Plus » (jamais d'ascenseur horizontal) */
.pastilles{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:8px}
.pastille-plus{cursor:pointer;color:var(--accent);font-weight:600;border-style:dashed}
.pastille{display:inline-flex;align-items:center;gap:5px;flex:none;height:30px;padding:0 11px;border-radius:15px;background:var(--blanc);border:1px solid var(--trait);font-size:12.5px;font-weight:500;white-space:nowrap}
.pastille:hover{border-color:var(--accent);color:var(--accent)}
.pastille.actif{background:var(--encre);border-color:var(--encre);color:#fff}
.pastille.actif small{color:rgba(255,255,255,.7)}
.outils{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.coches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.outils .coche{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:7px;background:var(--blanc);border:1px solid var(--trait);font-size:12.5px;cursor:pointer;list-style:none;white-space:nowrap}
.outils .coche::-webkit-details-marker{display:none}
.outils .coche i,.marque-l i{width:14px;height:14px;border:1.5px solid #aab4be;border-radius:3px;flex:none;background:var(--blanc)}
.outils .coche.actif{border-color:var(--accent);background:var(--accent-f);color:var(--accent);font-weight:600}
.outils .coche.actif i,.marque-l.actif i{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.500l4.500 4.500L19 7.500'/%3E%3C/svg%3E") center/11px no-repeat;border-color:var(--accent)}
.outils .coche:hover{border-color:var(--accent)}
.c-promo small{color:var(--promo)}
.outils{position:relative}.marques{position:static}
.marques .pic{width:16px;height:16px}
.marques-boite{position:absolute;left:0;top:calc(100% + 4px);z-index:30;width:min(270px,100%);background:var(--blanc);border:1px solid var(--trait);border-radius:10px;box-shadow:0 12px 32px rgba(23,33,43,.16);padding:8px}
.marques-cherche{width:100%;height:32px;border:1px solid var(--trait);border-radius:6px;padding:0 8px;margin-bottom:6px}
.marques-liste{max-height:300px;overflow-x:hidden;overflow-y:auto;margin-bottom:6px}
.marque-l{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px}
.marque-l:hover{background:var(--accent-f)}
.marque-l span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.efface{color:var(--gris);font-size:12px;text-decoration:underline;margin-left:4px}
.reglages{display:flex;align-items:center;gap:8px;margin-left:auto}
.tri{display:flex;align-items:center;gap:6px;color:var(--gris);font-size:12px}
.tri select{height:32px;border:1px solid var(--trait);border-radius:7px;background:var(--blanc);padding:0 8px;font-size:12.5px;color:var(--encre)}
.vues{display:flex;border:1px solid var(--trait);border-radius:7px;overflow:hidden;background:var(--blanc)}
.vues a{display:grid;place-items:center;width:34px;height:30px;color:var(--pale)}
.vues a.actif{background:var(--encre);color:#fff}
.vues .pic{width:16px;height:16px}
.corrige{background:var(--pays-f);border-radius:7px;padding:7px 10px;margin-bottom:10px}
.suite{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 6px}
.suite-compte{color:var(--gris);font-size:12px}
.pages{display:flex;gap:4px;align-items:center}
.pages a,.pages span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:6px;font-size:12.5px;color:var(--gris)}
.pages a:hover{background:var(--blanc);color:var(--accent)}
.pages a.actif{background:var(--encre);color:#fff;font-weight:600}
.rien{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:28px 20px;text-align:center}
.rien h1,.rien h2{font-size:17px;margin-bottom:6px}
.rien p{color:var(--gris);margin-bottom:12px}
.rien-rayons{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

/* plan des rayons */
.plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.plan-r{background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:10px 12px 12px}
.plan-t{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.plan-pic,.rm-pic,.tr-pic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--teinte);color:rgba(23,33,43,.62);flex:none}
.plan-t span:last-child{display:flex;flex-direction:column}
.plan-t b{font-size:14px}
.plan-t:hover b{color:var(--accent)}
.plan-r li a{display:flex;justify-content:space-between;padding:3px 4px;border-radius:4px;color:#33404c}
.plan-r li a:hover{background:var(--accent-f);color:var(--accent)}

/* accueil */
.accueil-tete{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;background:var(--blanc);border:1px solid var(--trait);border-radius:14px;padding:18px 20px;align-items:center}
.at-texte h1{font-size:24px;line-height:1.15;letter-spacing:-.025em;max-width:18em}
.at-texte p{color:var(--gris);margin:6px 0 12px;max-width:44em}
.at-actions{display:flex;gap:8px;flex-wrap:wrap}
.at-promesses{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.at-promesses li{display:flex;gap:9px;align-items:center;background:var(--fond);border-radius:9px;padding:9px 10px}
.at-promesses .pic{color:var(--accent);width:22px;height:22px}
.at-promesses span{display:flex;flex-direction:column;line-height:1.25}
.at-promesses b{font-size:12.5px}
.rayons-mosaique{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:14px}
.rm{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:8px 10px;transition:border-color .12s,transform .12s}
.rm:hover{border-color:var(--accent);transform:translateY(-1px)}
.rm-pic{grid-row:span 2}
.rm b{font-size:12.5px;line-height:1.2;align-self:end}
.rm small{align-self:start}
.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:22px}
.infos>div{background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:14px 16px}
.infos h2{font-size:14px;margin-bottom:8px}
.infos p{color:#44515d;margin-bottom:6px}
.horaires{width:100%;border-collapse:collapse;font-size:12.5px}
.horaires th{text-align:left;font-weight:400;color:var(--gris);padding:2px 0}
.horaires td{text-align:right}
.horaires .auj th,.horaires .auj td{font-weight:700;color:var(--encre)}
.etapes-info{counter-reset:e;display:grid;gap:7px}
.etapes-info li{counter-increment:e;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;color:#44515d;align-items:start}
.etapes-info li::before{content:counter(e);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-f);color:var(--accent);font-weight:700;font-size:11.5px}
.etapes-info b{color:var(--encre)}
/* 06/11 (Marcel, maquette Supermarché) : « Comment ça marche » avec des ICÔNES à la place des chiffres (panier, Drive, rupture, paiement) */
.etapes-info.ic li{grid-template-columns:40px minmax(0,1fr);gap:10px;align-items:center}
.etapes-info.ic li::before{content:none;display:none}
.ic-etape{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-f);color:var(--accent)}
.ic-etape svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.infos.une{grid-template-columns:minmax(0,1fr)}.etapes-info.en-ligne{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 22px}

/* fiche produit */
.fiche{flex-direction:row;gap:28px;padding:22px;border-radius:14px;align-items:flex-start}
.fiche:hover{box-shadow:none;border-color:var(--trait)}
.fiche-img{flex:0 0 min(360px,38%);max-height:none;margin:0}
.fiche-img img{max-height:360px;width:100%}
.fiche-img .sans{max-width:300px}
.fiche-txt{flex:1;min-width:0}
.fiche .t-m{font-size:12px;color:var(--accent);display:block}
.fiche h1.t-n{font-size:22px;line-height:1.2;letter-spacing:-.02em;-webkit-line-clamp:4;min-height:0;margin:2px 0 4px}
.fiche-c{color:var(--gris);font-size:13px}
.fiche-prix{display:flex;align-items:flex-end;gap:14px;margin:14px 0}
.fiche-prix .t-prix b{font-size:30px}
.fiche-prix .t-prix s{font-size:14px}
.fiche-pu{color:var(--gris);padding-bottom:5px}
.fiche-achat{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fiche-achat .btn{min-height:44px}
.fiche-note{color:var(--gris);font-size:12px;margin-top:8px}
.fiche-rupture{background:var(--promo-f);border-radius:8px;padding:10px 12px;color:#6b2a16}
.fiche-infos{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:18px;padding-top:14px;border-top:1px solid var(--trait2);font-size:12.5px}
.fiche-infos dt{color:var(--gris)}

/* cartes blanches, formulaires */
.carte-b{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:14px 16px}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.champ{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--gris)}
.champ.large{grid-column:1/-1}
.champ input,.champ select{height:40px;border:1.5px solid var(--trait);border-radius:8px;padding:0 10px;font-size:14px;color:var(--encre);background:var(--blanc)}
.champ input:focus,.champ select:focus{border-color:var(--accent);outline:none}
.champ.faux input{border-color:var(--promo);background:var(--promo-f)}
.radio-c{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--trait);border-radius:9px;cursor:pointer}
.radio-c:has(input:checked){border-color:var(--accent);background:var(--accent-f)}
.radio-c input{margin-top:2px;accent-color:var(--accent)}
.radio-c span{display:flex;flex-direction:column;gap:1px}
.choix-rempl{display:grid;gap:8px;margin-bottom:6px}
.essai{background:var(--pays-f);color:var(--pays);border-radius:8px;padding:8px 12px;margin-bottom:10px;font-weight:600}
.erreur{background:var(--promo-f);color:#7a2c14;border-radius:8px;padding:8px 10px;margin:8px 0;font-weight:500}

/* créneaux */
.cr-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cr-mode{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--trait);border-radius:10px;background:var(--blanc);text-align:left}
.cr-mode span{display:flex;flex-direction:column}
.cr-mode.actif{border-color:var(--accent);background:var(--accent-f)}
.cr-mode.actif .pic{color:var(--accent)}
.cr-titre{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--gris);margin:14px 0 6px}
.cr-zones{display:grid;gap:6px}
.cr-zone{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1.5px solid var(--trait);border-radius:9px;cursor:pointer}
.cr-zone.actif{border-color:var(--accent);background:var(--accent-f)}
.cr-zone input{accent-color:var(--accent)}
.cr-zone span{display:flex;flex-direction:column}
.cr-info{margin:0 0 8px;font-size:13px;color:var(--gris)}
.cr-onglets{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:8px}
.cr-jour{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 104px;padding:7px 12px;border:1.5px solid var(--trait);border-radius:9px;background:var(--blanc);min-width:112px}
.cr-jour.actif{border-color:var(--encre);background:var(--encre);color:#fff}
.cr-jour.actif small{color:rgba(255,255,255,.75)}
.cr-heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px}
.cr-heure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:40px;border:1.5px solid var(--trait);border-radius:8px;background:var(--blanc);font-weight:600;font-size:13px}
.cr-heure:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.cr-heure.actif{background:var(--accent);border-color:var(--accent);color:#fff}
.cr-heure:disabled{background:var(--fond);color:var(--pale);cursor:not-allowed;font-weight:400}
.cr-heure:disabled span{text-decoration:line-through}      /* 11/11 : les créneaux complets barrés */

/* panier (page) */
.pan{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.pan-lignes{order:1}.pan-recap{order:2}.pan-envies{order:3}
.pan-recap{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:14px 16px}
.pan-recap h2,.cmd-recap h2{font-size:15px;margin-bottom:10px}
.pan-recap .cote-creneau,.cmd-recap .cote-creneau{width:100%;margin:0 0 10px}
.recap-l.total{border-top:1px solid var(--trait);margin-top:6px;padding-top:10px}
.recap-l.total b{font-size:20px}
.recap-l.petit{font-size:12px;color:#44515d;gap:10px}
.recap-detail{margin-top:12px;border-top:1px solid var(--trait2);padding-top:10px}
.recap-detail summary{cursor:pointer;color:var(--accent);font-weight:600;margin-bottom:6px}
.rempl-global{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.rempl-global div:first-child{display:flex;flex-direction:column;gap:2px;flex:1;min-width:220px}
.bascule{display:flex;border:1.5px solid var(--trait);border-radius:8px;overflow:hidden;flex:none}
.bascule button{height:34px;padding:0 12px;border:0;background:var(--blanc);font-weight:600;font-size:12.5px;color:var(--gris)}
.bascule button.actif{background:var(--accent);color:#fff}
.pan-rayon{padding:0;margin-bottom:10px;overflow:hidden}
.pan-rayon h2{display:flex;align-items:center;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);padding:9px 14px;background:var(--fond);border-bottom:1px solid var(--trait2)}
.pan-rayon h2 .pic{width:16px;height:16px}
.pl{display:grid;grid-template-columns:64px minmax(0,1fr) auto 92px 32px;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--trait2)}
.pl:last-child{border-bottom:0}
.pl-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.pl-txt>a{font-size:13px}
.pl-txt>a:hover{color:var(--accent)}
.pl-rempl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--gris);cursor:pointer;width:fit-content}
.pl-rempl input{accent-color:var(--accent);margin:0}
.pl-prix{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.pl-prix b{font-size:14.5px}
.pl-x{width:30px;height:30px}
.pl-x .pic{width:15px;height:15px}
.envie{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:10px 8px 6px;margin-bottom:10px}
.envie h3{font-size:13px;padding:0 6px}
.envie>p{font-size:11.5px;color:var(--gris);padding:0 6px 4px}
@media (min-width:900px){.pan{grid-template-columns:minmax(0,1fr) 320px}.pan-envies{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;order:3}.pan-recap{position:sticky;top:calc(var(--tete) + 12px)}.pan.vide{grid-template-columns:1fr}}
@media (min-width:1320px){.pan{grid-template-columns:288px minmax(0,1fr) 330px}.pan-envies{grid-column:auto;display:block;order:0;position:sticky;top:calc(var(--tete) + 12px);max-height:calc(100vh - var(--tete) - 24px);overflow:auto;scrollbar-width:thin}.pan.vide .pan-envies{display:none}}

/* commande */
.cmd{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.cmd-etapes{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.carte-b{min-width:0}
.cr-jours{min-width:0}
.cmd h2{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:12px}
.cmd h2 i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-size:12.5px}
@media (min-width:980px){.cmd{grid-template-columns:minmax(0,1fr) 350px}.cmd-recap{position:sticky;top:calc(var(--tete) + 12px)}}

/* suivi */
.suivi{max-width:680px;margin:10px auto;padding:24px}
.merci{text-align:center;margin-bottom:16px}
.merci .coche{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ok-f);color:var(--ok);margin:0 auto 10px}
.merci .coche.attente{background:var(--pays-f);color:var(--pays)}
.merci .coche.annule{background:var(--promo-f);color:var(--promo)}
.merci .coche svg,.etape i svg{width:60%;height:60%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.merci h1{font-size:20px;letter-spacing:-.02em}
.merci p{color:var(--gris);margin:6px 0 10px}
.numero{display:inline-block;background:var(--fond);border-radius:8px;padding:6px 14px;font-size:14px}
.etapes{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:18px 0}
.etape{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11.5px;color:var(--pale);text-align:center;border-top:3px solid var(--trait);padding-top:8px}
.etape i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--trait2);color:transparent}
.etape.fait{color:var(--encre);border-top-color:var(--ok)}
.etape.fait i{background:var(--ok);color:#fff}
.etape.encours{font-weight:700}
.detail .l{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--trait2)}
.detail .l>span:last-child{text-align:right}
.detail .l.total b{font-size:17px}
.sans-rempl{color:var(--pays)}

/* listes de courses */
.liste-c{margin-bottom:12px}
.liste-tete{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.liste-tete h2{font-size:16px}
.liste-tete>span{color:var(--gris)}
.li-quoi{font-weight:600;margin-bottom:8px}
.li-l{display:flex;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--trait2);cursor:pointer}
.li-l span{flex:1}
.li-l input{accent-color:var(--accent)}
.li-neuf{display:flex;gap:6px;margin-top:10px}
.li-neuf input{flex:1;height:34px;border:1.5px solid var(--trait);border-radius:7px;padding:0 9px}

/* tiroir des rayons (téléphone), fenêtres, bulle */
.voile{position:fixed;inset:0;background:rgba(23,33,43,.45);z-index:60}
.tiroir{position:fixed;left:0;top:0;bottom:0;width:min(88vw,360px);background:var(--blanc);z-index:70;display:flex;flex-direction:column}
.tiroir-tete,.fenetre-tete{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 10px 16px;border-bottom:1px solid var(--trait);font-size:15px}
.tiroir-corps{overflow:auto;padding:6px 8px 20px}
.tr{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-weight:600;font-size:14px;cursor:pointer;list-style:none}
.tr::-webkit-details-marker{display:none}
.tr small{margin-left:auto}
.tr-pic{width:34px;height:34px;border-radius:9px}
.tr-pic.promo{background:var(--promo);color:#fff;font-weight:700}
.tr-sous{display:flex;justify-content:space-between;padding:8px 10px 8px 54px;font-size:13.5px;border-radius:6px}
.tr-sous.tout{color:var(--accent);font-weight:600}
.tr-groupe[open]>.tr{background:var(--fond)}
.fenetre{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,640px);max-height:88vh;background:var(--blanc);border-radius:14px;z-index:70;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(23,33,43,.3)}
.fenetre.petite{width:min(94vw,420px)}
.fenetre-corps{padding:14px 16px 18px;overflow:auto}
.bulle{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(92vw,520px);background:var(--encre);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;z-index:80;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center}

/* pied */
/* pied de page : toute la largeur, sur toutes les pages, toujours AU-DESSUS du panier latéral (qui s'arrête au-dessus de lui) */
.pied{position:relative;z-index:35;background:var(--blanc);border-top:1px solid var(--trait);margin-top:20px;padding:22px 0 14px;font-size:12.5px}
.pied-l{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px 24px}
.pied table{border-collapse:collapse;width:100%;max-width:230px;color:var(--gris);line-height:1.75}.pied th{text-align:left;font-weight:400;padding:0 10px 0 0}.pied td{text-align:right}.pied td span{display:block;white-space:nowrap}.pied .auj th,.pied .auj td{color:var(--encre);font-weight:700}
.pied-etat{font-weight:600}.pied-etat.ouvert{color:var(--ok)}.pied-etat.ferme{color:var(--promo)}
.pied b{display:block;margin-bottom:6px}
.pied p{color:var(--gris);line-height:1.75}
.pied a:hover{color:var(--accent);text-decoration:underline}
.pied-bas{color:var(--pale);font-size:11.5px;margin-top:16px;padding-top:12px;border-top:1px solid var(--trait2)}
.onglets{display:none}

/* pages de secours du moteur (mentions, compte, recherche de commande) */
.prose{background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:22px 24px;max-width:820px;margin:0 auto;font-size:13.5px;line-height:1.6}
.prose h1{font-size:21px;margin-bottom:12px}.prose h2{font-size:15px;margin:16px 0 6px}.prose p{margin-bottom:8px}.prose mark{background:var(--pays-f)}
main>.boite{padding:0}

/* écrans moyens */
@media (max-width:1179px){.tete-liens .ico-lien span{display:none}.ico-lien{padding:8px}.mega ul{columns:3}.rb-groupe:not(.rb-plus) .mega{display:none!important}}
@media (max-width:899px){.tete-l{gap:8px}.cherche{min-width:0}.cherche-ok{display:none}.marque{min-width:0;flex-shrink:1}.marque-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.marque-nom small{display:none}.ico-lien{padding:8px 5px}.panier-btn{min-width:0}.accueil-tete{grid-template-columns:1fr}.creneau-btn span small{display:none}.fiche{gap:16px;padding:14px}}

/* téléphone : une ligne par produit (4 à 5 produits par écran), barre d'onglets en bas, panier toujours sous le pouce */
@media (max-width:719px){
  :root{--tete:104px}
  body{padding-bottom:62px}
  .seul-tel{display:inline-grid}
  .tete-l{flex-wrap:wrap;height:auto;gap:6px 8px;padding-top:7px;padding-bottom:8px}
  .marque{flex:1;min-width:0}
  .marque-pastille{width:30px;height:30px;font-size:15px}
  .marque-nom{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cherche{order:5;flex:1 1 100%;max-width:none;height:42px}
  .cherche input{font-size:16px}
  .cherche-ok{display:none}
  .sugg{position:fixed;left:6px;right:6px;top:auto;max-height:62vh}
  .creneau-btn{height:34px;padding:0 8px;max-width:46vw;overflow:hidden}
  .creneau-btn b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :root{--g:10px}
  .tete-liens,.panier-btn,.rayons-barre{display:none}
  .page{padding-top:8px}
  .entete{padding:10px 12px;border-radius:10px;flex-wrap:wrap}
  .entete h1{font-size:18px}
  .entete-pic{width:36px;height:36px}
  .outils{gap:6px}
  .coches{flex-wrap:wrap;width:100%;padding-bottom:2px}
  .outils .coche{flex:none;height:34px}
  .marques{position:static}
  .marques-boite{position:fixed;left:8px;right:8px;top:auto;bottom:70px;width:auto;z-index:65}
  .reglages{width:100%;margin:0;justify-content:space-between}
  .vues{display:none}
  .grille{grid-template-columns:1fr;gap:0;background:var(--blanc);border:1px solid var(--trait);border-radius:10px;overflow:hidden}
  .grille .t{display:grid;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"img txt" "img bas";column-gap:10px;border:0;border-bottom:1px solid var(--trait2);border-radius:0;padding:9px 10px;box-shadow:none}
  .grille .t:last-child{border-bottom:0}
  .grille .t-img{grid-area:img;width:84px;height:84px;max-height:84px;margin:0;align-self:center}
  .grille .t-img img{max-height:84px}
  .grille .sans{max-width:84px}
  .grille .t-txt{grid-area:txt;padding-right:28px}
  .grille .t-n{min-height:0;font-size:13.5px}
  .grille .t-bas{grid-area:bas;margin-top:4px}
  .grille .t-eti{left:6px;top:6px}
  .grille .t-coeur{opacity:1;right:2px;top:2px;background:none}
  .qte,.qte button{height:36px}.qte button{width:36px}.qte{border-radius:18px}
  .lp .qte,.lp .qte button{height:30px}.lp .qte button{width:30px}
  .defile{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;row-gap:8px}
  .defile .t-coeur{opacity:1}
  .rayons-mosaique{grid-template-columns:1fr 1fr;gap:6px}
  .accueil-tete{padding:14px}
  .at-texte h1{font-size:20px}
  .at-promesses{grid-template-columns:1fr 1fr;gap:6px}
  .at-promesses li{padding:8px;gap:7px;min-width:0}
  .at-promesses small{display:none}
  .at-texte p{display:none}
  .fiche{flex-direction:column}
  .fiche-img{flex:none;width:100%}
  .fiche-img img{max-height:240px;width:auto;margin:0 auto}
  .fiche h1.t-n{font-size:19px}
  .champs{grid-template-columns:1fr}
  .champ input,.champ select{font-size:16px;height:44px}
  .cr-modes{grid-template-columns:1fr}
  .cr-heures{grid-template-columns:1fr 1fr}
  .cr-heure{min-height:44px}
  .pl{grid-template-columns:52px minmax(0,1fr) auto;grid-template-areas:"img txt x" "img qte prix";gap:6px 10px;padding:9px 10px}
  .pl-img{grid-area:img}.pl-img img,.pl-img .sans{width:52px;height:52px}
  .pl-txt{grid-area:txt}.pl .qte{grid-area:qte;justify-self:start}.pl-prix{grid-area:prix}.pl-x{grid-area:x}
  .rempl-global .bascule{width:100%}.bascule button{flex:1}
  .etape{font-size:10px}
  .fenetre{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;border-radius:16px 16px 0 0;max-height:90vh}
  .bulle{bottom:72px}
  .pied{padding-bottom:10px}
  .onglets{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(4,1fr) 1.35fr;background:var(--blanc);border-top:1px solid var(--trait);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .onglets a,.onglets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:50px;border:0;background:none;font-size:10.5px;color:var(--gris);border-radius:8px;position:relative}
  .onglets .actif{color:var(--accent);font-weight:600}
  .onglets .onglet-panier{background:var(--accent);color:#fff}
  .onglets .onglet-panier b{font-size:12.5px}
  .onglets .onglet-panier .pic{width:18px;height:18px}
  .onglets .onglet-panier i{position:absolute;top:3px;right:8px;min-width:17px;height:17px;border-radius:9px;background:#fff;color:var(--accent);font-style:normal;font-weight:700;font-size:10.5px;display:grid;place-items:center;padding:0 3px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.tete,.cote,.onglets,.pied,.annonce{display:none}}
.h-liste{font-size:15px;margin-bottom:8px}
.cmd-l{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--trait2);flex-wrap:wrap}
.cmd-l>div:first-child{display:flex;flex-direction:column;gap:2px}
.rien.grand{padding:44px 20px}
.credits{width:100%;border-collapse:collapse;font-size:12px}.credits td{padding:3px 6px;border-bottom:1px solid var(--trait2);vertical-align:top}

/* très grands écrans (BOUTIQUE3) : panier et commande occupent la largeur sans étirer une seule colonne */
@media (min-width:1700px){
  .pan{grid-template-columns:minmax(288px,23%) minmax(0,1fr) minmax(330px,24%)}
  .pan-envies{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
  .pan.vide .pan-envies{display:none}
  .cmd{grid-template-columns:minmax(0,1fr) minmax(350px,30%)}
  .cmd-etapes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmd-etapes>section:first-child{grid-row:span 2}
  .cmd-etapes>section{align-self:start}
}
/* 31/10 (batterie du robot, Marcel : « travail professionnel ») — sur écran tactile, chaque cible fait au moins 44 px (zone d'appui) ;
   l'état Ouvert/Fermé reste lisible sur téléphone ; contrastes au moins 4,5:1. */
.eti.neuf{color:var(--accent-fonce,#17212b)}
.pied-bas{color:var(--gris)}
@media (pointer:coarse),(max-width:899px){
.ico-btn{width:44px;height:44px}
.ico-lien{min-width:44px;min-height:44px;justify-content:center}
.creneau-btn{min-height:44px;height:auto}
.cherche{height:auto;min-height:46px}.cherche input{min-height:44px}
.rb,.panier-btn{min-height:44px;display:inline-flex;align-items:center}
.marque{min-height:44px}
.etat-tel{display:block;margin:0;padding:3px var(--g) 5px;font-size:12px;font-weight:600;color:var(--gris)}
.etat-tel.ouvert{color:var(--ok)}
.qte{height:44px;border-radius:22px}
.qte button{width:44px;height:44px;position:relative}
.qte.grand{height:44px}
.t-coeur{width:44px;height:44px}
.t .t-n{padding-block:4px;min-height:44px!important;box-sizing:border-box}
.coche{min-height:44px}
.pastille{height:44px;border-radius:22px}
.vues a{width:44px;height:44px}
.fil a{min-height:44px;display:inline-flex;align-items:center}
.fil a{display:inline-block;padding:12px 2px;margin:-12px -2px}
.tri select,select{min-height:44px}
.pied a{display:inline-flex;align-items:center;min-height:44px}
.fil a{min-width:44px;justify-content:center}
}
/* 31/10 : mention du magasin sur un produit (« Arrivage du jour »), qui s'éteint seule à sa date de fin */
.eti.mention{background:#15803d;color:#fff}
.fiche-mot{margin:10px 0 6px;padding:6px 0 6px 12px;border-left:3px solid #15803d;font-size:15px;line-height:1.5}
.fiche-mot p{margin:0}
.fiche-mot footer{font-size:12px;color:var(--gris);margin-top:2px}
.etat-tel{display:none}
@media (pointer:coarse),(max-width:899px){.etat-tel{display:block}}
@media (max-width:599px){.creneau-btn{width:44px;min-width:44px;padding:0;justify-content:center}.creneau-btn span{display:none}.marque-nom{white-space:nowrap}}
/* 31/10 : les adresses du compte dans la fenêtre du créneau, et le conseil d'adresse selon le jour */
.cr-mes{display:grid;gap:6px;margin:0 0 12px}
.cr-mon-adr{display:block;width:100%;text-align:left;min-height:48px;padding:8px 12px;border:1.5px solid var(--trait,#e2e7ec);border-radius:10px;background:var(--blanc,#fff);color:inherit;font:inherit;cursor:pointer}
.cr-mon-adr.actif{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cr-mon-adr small{display:block;color:var(--gris,#5b6875);font-size:12.5px;margin-top:2px}
.cr-convient{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;background:#e8f4ee;color:#14532d;font-size:12px;font-weight:700}
.cmd-conseil{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:#fff4e5;color:#7c2d12;font-size:13.5px}
.cmd-conseil .lien{min-height:44px}

/* 03/11 (Marcel, Cart France) : promotions en tête, coups de cœur, fenêtre d'accueil */
.fiche-promo{color:var(--promo);font-size:12.5px;font-weight:600;margin-top:6px}
.fiche-mineurs{color:var(--gris);font-size:12px;margin-top:6px;padding:6px 10px;border-left:3px solid var(--trait);background:var(--blanc)}
.bande.b-promos{background:var(--promo-f);border:1px solid color-mix(in srgb,var(--promo) 22%,#fff);border-radius:12px;padding:12px 12px 4px}
.bande.b-promos .bande-tete h2{color:var(--promo)}
.bande.b-coeurs{background:var(--accent-f);border:1px solid color-mix(in srgb,var(--accent) 22%,#fff);border-radius:12px;padding:12px 12px 4px}
.eti.coeur{background:var(--accent);color:#fff}
.btn.promo{background:var(--promo);border-color:var(--promo);color:#fff}.btn.promo:hover{background:color-mix(in srgb,var(--promo) 85%,#000)}
.pub-voile{position:fixed;inset:0;z-index:90;background:rgba(15,22,33,.55);display:grid;place-items:center;padding:16px}
.pub{position:relative;background:var(--blanc);border-radius:14px;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pub-img{background:var(--promo-f);display:grid;place-items:center;padding:10px}
.pub-img img{max-height:200px;width:auto;object-fit:contain}
.pub-txt{padding:16px 18px 18px}
.pub-txt h2{font-size:19px;font-weight:800;line-height:1.2;padding-right:36px}
.pub-txt p{margin-top:6px;color:var(--gris);font-size:14px}
.pub-dates{font-size:12px;color:var(--pale)}
.pub-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pub-acts .btn{flex:1 1 160px;min-height:44px;font-size:14px}
.pub-fermer{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.15);color:var(--encre);z-index:1}
.pub-fermer .pic{width:22px;height:22px}

/* 04/11/2026 (Marcel, Cart France) : logo du commerce, publicités sous l'en-tête, photo de la famille dans les tuiles de rayon, pictos du pied */
.marque-logo{display:flex;flex-direction:column;line-height:1}
.marque-logo img{height:44px;width:auto;display:block}
.marque-logo small{font-size:10.5px;margin-top:3px}
.marque-logo small.ouvert{color:var(--ok)}
.accueil-tete.avec-pubs{grid-template-columns:minmax(200px,.62fr) minmax(0,2.38fr);align-items:start}
.at-pubs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:start}
.at-pubs a{display:block;border-radius:12px;overflow:hidden;transition:transform .12s,box-shadow .12s}
.at-pubs a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.at-pubs img{display:block;width:100%;height:auto}
.rm-photo{background:var(--blanc);border:1px solid var(--trait2);width:46px;height:46px;overflow:hidden}
.rm-photo img{width:100%;height:100%;object-fit:contain;display:block}
.pied-l>div>b{display:flex;align-items:center;gap:7px}
.pied-pic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accent-f);color:var(--accent);flex:none}
.pied-pic .pic{width:15px;height:15px}
.pied-pic.fort{background:var(--accent);color:#fff}
@media (max-width:820px){.accueil-tete.avec-pubs{grid-template-columns:1fr}.at-pubs{grid-template-columns:1fr}}

/* 12/11 (EDI) : avant la date d'ouverture des commandes, « Commandes dès le … » à la place du bouton + (classe propre, rien d'autre ne change) */
.qte .q-bientot{display:inline-block;max-width:100%;padding:5px 9px;border-radius:999px;background:#fff4cc;color:#6b4e00;font-size:11.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 12/11 (Marcel, EDI) : fenêtre d'accueil « visuel » (image détourée sans texte) : comme sur l'accueil (blocs_tpl/_blocs.css, mêmes repères) */
.pub.pub-visuel{container-type:inline-size;width:min(1100px,100%);padding:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible;filter:drop-shadow(0 18px 26px rgba(0,0,0,.38))}
.pub-visuel .pub-img{padding:0;background:transparent;display:block}
.pub-visuel .pub-img img{display:block;max-height:none;width:100%;height:auto}
.pub-visuel .pub-plein{animation:pubMonte .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes pubMonte{0%{opacity:0;transform:translateY(34px);clip-path:inset(29.1% 0 0 0 round 22px)}45%{opacity:1;transform:none;clip-path:inset(29.1% 0 0 0 round 22px)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.pub-visuel .pub-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pub-visuel .pub-fermer{top:calc(9.7cqw + 10px);right:calc(1.2cqw + 6px)}
.pub-mor{display:none}
@media (max-width:600px){
  .pub-visuel .pub-img img.pub-plein{display:none}
  .pub-visuel .pub-img .pub-mor{display:block;position:relative;overflow:hidden;width:100%;animation:pubMonteTel .6s ease-out both}
  .pub-visuel .pub-mor-sac{aspect-ratio:680/667}
  .pub-visuel .pub-img .pub-mor-sac img{position:absolute;right:0;top:0;width:294.1%;max-width:none}
  .pub-visuel .pub-mor-txt{aspect-ratio:1310/431;margin-top:-3.2cqw}
  .pub-visuel .pub-img .pub-mor-txt img{position:absolute;left:0;bottom:0;width:152.7%;max-width:none}
  .pub-visuel .pub-fermer{top:calc(28.55cqw + 8px);right:8px}}
@keyframes pubMonteTel{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pub-visuel .pub-plein,.pub-visuel .pub-mor{animation:none}}