/* =====  La boutique — Crêperie de Langadoué  ===== */
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Light.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Gotham';src:url('../fonts/Gotham-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Festivo';src:url('../fonts/FestivoLC-Basic.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Chantal';src:url('../fonts/Chantal-Medium.woff2') format('woff2');font-display:swap}

:root{
  --sucre:#F9B142;--sucre-soft:#FDEBCB;--sale:#FD7E14;--sale-soft:#FFE7D2;
  --ink:#2C2420;--muted:#7a736d;--cream:#FFFBF4;--card:#fff;--line:#EFE7DA;
  --ok:#1F7A4D;--radius:20px;--shadow:0 10px 30px rgba(60,40,10,.08);--shadow-lg:0 24px 60px rgba(60,40,10,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Gotham',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}
.container{width:min(1200px,92%);margin-inline:auto}
.script{font-family:'Festivo',cursive;color:var(--sucre)}
.script.sale{font-family:'Chantal',cursive;color:var(--sale)}
.hidden{display:none!important}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(255,251,244,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top__in{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand__mark{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--sucre) 50%,var(--sale) 50%);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.1rem;box-shadow:var(--shadow)}
.brand b{display:block;font-size:.95rem;line-height:1.1;letter-spacing:.02em}
.brand small{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.top__links{margin-left:auto;display:flex;gap:1rem;align-items:center}
.top__links a{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);font-weight:500}
.top__links a:hover{color:var(--ink)}
.cartbtn{position:relative;display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:.6rem 1.1rem;font-weight:700;font-size:.85rem;transition:.2s}
.cartbtn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.cartbtn .n{background:var(--sucre);color:var(--ink);border-radius:999px;min-width:1.4rem;height:1.4rem;display:grid;place-items:center;font-size:.72rem;font-weight:900}
@media(max-width:640px){.top__links a{display:none}.brand b{font-size:.85rem}}

/* ---------- bandeau promo (saisonnier) ---------- */
.promo-bar{background:linear-gradient(90deg,#C95409,#FD7E14);color:#fff;text-align:center;font-size:.85rem;font-weight:700;padding:.55rem 1rem}
.promo-bar code{background:#fff;color:#C95409;border-radius:6px;padding:.1rem .5rem;font-family:inherit;letter-spacing:.08em;margin-left:.2rem}
.promo-bar small{font-weight:500;opacity:.9}
.modal__body .long{font-size:.86rem!important;color:#5a534d!important}

/* ---------- bandeau franco ---------- */
.franco-bar{background:var(--ink);color:#fff;text-align:center;font-size:.82rem;padding:.55rem 1rem;letter-spacing:.02em}
.franco-bar b{color:var(--sucre)}
.franco-bar__left{display:inline-block;margin-left:.6rem;background:rgba(255,255,255,.14);border-radius:999px;padding:.15rem .7rem;font-size:.75rem}
.franco-bar__left:empty{display:none}
.franco-bar__left.ok{background:var(--ok)}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden;margin-top:1.2rem;border-radius:28px;background:#fff;box-shadow:var(--shadow);text-align:center}
.hero__text{padding:clamp(1.8rem,5vw,3.4rem) clamp(1.2rem,5vw,3rem);max-width:46rem;margin-inline:auto}
.hero__ctas,.hero__points{justify-content:center}
.hero__kicker{display:block;font-size:2.4rem;line-height:1;margin-bottom:.4rem}
.hero h1{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.12;font-weight:900;letter-spacing:-.01em}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--sucre),var(--sale));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:1rem auto 1.4rem;color:#4a4540;font-size:.95rem;max-width:34rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.pill{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:700;font-size:.82rem;padding:.55rem 1.1rem .55rem .55rem;border-radius:999px;border:2px solid var(--sucre-soft);background:var(--sucre-soft);transition:.2s}
.pill img{height:30px;width:30px;object-fit:contain;border-radius:50%;background:#fff}
.pill.sale{background:var(--sale-soft);border-color:var(--sale-soft)}
.pill.gift{background:#C95409;border-color:#C95409;color:#fff;padding:.7rem 1.2rem}
.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pill.sucre:hover{border-color:var(--sucre)}
.pill.sale:hover{border-color:var(--sale)}
.hero__points{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.4rem;font-size:.78rem;color:var(--muted)}
@media(max-width:820px){.hero__kicker{font-size:2rem}}

/* ---------- filtres ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:2rem 0 1.4rem;position:sticky;top:64px;z-index:30;background:var(--cream);padding:.6rem 0}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.8rem;font-weight:500;letter-spacing:.03em;transition:.2s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.on[data-univers="sucre"]{background:var(--sucre);border-color:var(--sucre);color:var(--ink)}
.chip.on[data-univers="sale"]{background:var(--sale);border-color:var(--sale)}
.filters .sep{width:1px;height:1.6rem;background:var(--line);margin:0 .3rem}
.count{margin-left:auto;font-size:.8rem;color:var(--muted)}
@media(max-width:640px){.filters{top:58px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.count{display:none}}

/* ---------- grille produits ---------- */
.section-title{display:flex;align-items:baseline;gap:.8rem;margin:2.4rem 0 1rem}
.section-title .script{font-size:2rem}
.section-title h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.2rem}
@media(max-width:640px){.grid{grid-template-columns:repeat(2,1fr);gap:.8rem}}
.card{cursor:pointer;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;transition:.25s;animation:pop .5s ease both}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card__img{position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;padding:1.2rem;cursor:pointer;background:var(--sucre-soft)}
.card[data-univers="sale"] .card__img{background:var(--sale-soft)}
.card__img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply;transition:.35s}
.card:hover .card__img img{transform:scale(1.06)}
.card__body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;flex:1;gap:.3rem}
.card__brand{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card h3{font-size:.93rem;line-height:1.3;font-weight:700;flex:1;transition:color .2s}
/* bandeau de proposition de langue : sobre, en haut, et refermable */
.langbar{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;
  background:#2C2420;color:#fff;font-size:.83rem;padding:.55rem 1rem}
.langbar a{color:#F9B142;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.langbar button{background:none;border:0;color:#fff;opacity:.6;cursor:pointer;font-size:.9rem;line-height:1;padding:.2rem .4rem}
.langbar button:hover{opacity:1}

/* pays de livraison : premier choix du paiement, c'est lui qui décide du tarif */
.pays-pick{display:flex;align-items:center;justify-content:space-between;gap:.8rem;font-size:.85rem;font-weight:700;border:1.5px solid var(--line);border-radius:14px;padding:.7rem .9rem;margin-bottom:.6rem;background:#fff}
.pays-pick select{font:inherit;font-weight:400;border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;background:#fff;min-width:11rem}

/* sélecteur de langue : quatre codes sobres dans l'en-tête, l'actif en gras */
.langs{display:inline-flex;align-items:center;gap:.1rem;margin-left:.6rem;font-size:.72rem;letter-spacing:.06em}
.langs a{color:var(--muted);text-decoration:none;padding:.25rem .3rem;border-radius:6px}
.langs a:hover{background:rgba(0,0,0,.05);color:inherit}
.langs a.on{color:#C95409;font-weight:700}
/* Sous 640 px, l'en-tête masque tous ses liens (.top__links a{display:none}) pour ne
   garder que la marque et le panier. Le sélecteur de langue doit survivre à ce ménage :
   sans lui, un visiteur allemand ou espagnol n'a aucun moyen de changer de langue depuis
   un téléphone — et c'est là que passe l'essentiel du trafic. La règle vient APRÈS celle
   qui masque, à spécificité égale : c'est l'ordre qui tranche. */
@media(max-width:760px){.langs{margin-left:.2rem;font-size:.68rem}.langs a{padding:.2rem .18rem}}
@media(max-width:640px){
  .top__links{gap:.4rem}
  .langs a{display:inline-block}
  .langs{margin-left:.35rem;gap:0}
  .langs a{padding:.28rem .22rem;font-size:.7rem}
  /* Place à faire : sur 360 px, la marque prenait trois lignes et 140 px à elle seule,
     le panier 143, et il ne restait rien pour les langues. Le sous-titre disparaît — il
     est décoratif, et le nom de la maison reste dans le bandeau et le pied de page.
     Le bouton du panier perd son mot et garde l'icône et le compteur : le mot est long
     en allemand (« Warenkorb »), et la barre du bas rappelle déjà le panier. */
  .top__in{gap:.5rem;padding:.55rem 0}
  .brand small{display:none}
  .brand b{white-space:nowrap}
  .brand__mark{width:36px;height:36px;font-size:.8rem}
  .cartbtn{font-size:0;gap:.4rem;padding:.55rem .7rem}
  .cartbtn .n{font-size:.72rem}
  .cartbtn::before{content:"🧺";font-size:1rem}
}

/* le titre est un lien vers la fiche : il garde l'allure d'un titre, se souligne au survol */
.card h3 a,.bcard h3 a{color:inherit;text-decoration:none}
.card h3 a:hover,.bcard h3 a:hover{text-decoration:underline;text-underline-offset:.18em}
.card:hover h3,.bcard:hover h3{color:#C95409}
.card__meta{font-size:.75rem;color:var(--muted)}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;gap:.5rem}
.price{font-weight:900;font-size:1.05rem}
.price small{font-weight:500;font-size:.7rem;color:var(--muted)}
.buy{display:inline-flex;align-items:center;gap:.4rem}
.qty--sm{margin:0;background:#fff}
.qty--sm button{width:1.6rem;height:1.6rem;font-size:.95rem}
.qty--sm .q{min-width:1.3rem;text-align:center;font-size:.8rem;font-weight:700}
.card__foot{flex-wrap:wrap}
.weight-info{font-size:.78rem;color:var(--muted);margin-bottom:.2rem}
.add{border:none;background:var(--ink);color:#fff;border-radius:999px;padding:.55rem .95rem;font-weight:700;font-size:.78rem;transition:.2s;white-space:nowrap}
.add:hover{background:var(--sucre);color:var(--ink)}
.card[data-univers="sale"] .add:hover{background:var(--sale);color:#fff}
.add.done{background:var(--ok)}
.empty{text-align:center;color:var(--muted);padding:3rem 0}

/* ---------- coffrets ---------- */
.section-title--gift .script{color:#C95409}
.gift-intro{color:var(--muted);font-size:.92rem;max-width:44rem;margin:-.4rem 0 1.2rem}
.chip--gift{border-color:#F3D48A;background:#FFF3CD}
.chip--gift.on{background:#C95409!important;border-color:#C95409!important;color:#fff!important}
.bundles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;margin-bottom:1rem}
.bundles--compact{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.bundles--compact .bcard--hero{grid-column:span 1;background:linear-gradient(160deg,#fff 0%,#FFF8EC 100%)}
.bundles--compact .bcard__imgs{gap:.35rem;padding:2.4rem .7rem 0}
.bundles--compact .bcard__imgs .tile{border-radius:10px;padding:.3rem}
.bundles--compact .bcard--hero .bcard__imgs{grid-template-columns:repeat(4,1fr)}
.bundles--compact .bcard__list,.bundles--compact .bcard__tag{display:none}
.bundles--compact h3,.bundles--compact .bcard--hero h3{font-size:1rem}
.bundles--compact .bcard__body{padding:.8rem 1rem 1rem}
.bundles--compact .bcard__foot .price{font-size:1.15rem}
.bundles--compact .save{display:block;font-size:.7rem}
.gift-more{text-align:right;margin:-.2rem 0 1.6rem;font-size:.85rem}
.gift-more a{color:#C95409;font-weight:700}
.section-title--unit{margin-top:3rem}
.bcard{cursor:pointer;position:relative;background:linear-gradient(160deg,#fff 0%,#FFF8EC 100%);border:1.5px solid #F3E4C8;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease,box-shadow .25s;transition-delay:calc(var(--i,0)*80ms)}
.bcard.on{opacity:1;transform:none}
.bcard.on:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.bcard--hero{grid-column:span 2;background:linear-gradient(135deg,#FFF3CD 0%,#fff 55%,#FFE7D2 100%)}
@media(max-width:720px){.bcard--hero{grid-column:span 1}}
.bcard[data-univers="sale"]{background:linear-gradient(160deg,#fff 0%,#FFF0E4 100%);border-color:#F8D3B8}
.ribbon{position:absolute;top:.8rem;left:.8rem;background:#C95409;color:#fff;font-weight:900;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;box-shadow:var(--shadow);z-index:2}
.bcard__imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;padding:2.6rem 1rem 0;cursor:pointer}
.bcard__imgs .tile{aspect-ratio:1/1;background:#fff;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;padding:.5rem;overflow:hidden;transition:.3s}
.bcard__imgs .tile img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;transition:.3s}
.bcard:hover .bcard__imgs .tile{border-color:#F3D48A}
.bcard:hover .bcard__imgs .tile img{transform:scale(1.08)}
.tile--more{font-weight:900;color:#C95409;font-size:1.1rem;background:#FFF3CD!important}
.bcard__body{padding:1rem 1.3rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.35rem}
.bcard h3{font-size:1.15rem;line-height:1.25}
.bcard--hero h3{font-size:1.5rem}
.bcard__tag{font-family:'Festivo',cursive;color:#C95409;font-size:1.25rem;line-height:1.1}
.bcard__list{list-style:none;font-size:.78rem;color:#5a534d;columns:2;column-gap:1rem;margin:.3rem 0 .6rem}
.bcard__list li{padding:.12rem 0;break-inside:avoid}
.bcard__list li::before{content:'✓ ';color:var(--ok);font-weight:700}
.bcard__list--lg{columns:1;font-size:.88rem;margin-bottom:1rem}
.bcard__list--lg li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:.3rem 0}
.bcard__list--lg li span{color:var(--muted)}
.bcard__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem;margin-top:auto;flex-wrap:wrap}
.bcard__foot .price{font-size:1.35rem}
.bcard__foot s{color:var(--muted);font-size:.85rem;margin-left:.3rem}
.save{color:var(--ok);font-weight:700;font-size:.75rem}
.bcard .add{background:#C95409}
.bcard .add:hover{background:var(--ink);color:#fff}
.modal__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%}
.modal__gallery img{width:100%;height:110px;object-fit:contain;mix-blend-mode:multiply;animation:none}
.upsell{display:grid;grid-template-columns:52px 1fr auto;gap:.8rem;align-items:center;background:#FFF3CD;border:1.5px dashed #F3D48A;border-radius:14px;padding:.7rem .9rem;margin-top:1rem}
.upsell img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply}
.upsell b{display:block;font-size:.85rem}
.upsell small{font-size:.72rem;color:#6B4A0F}
.upsell .add{background:#C95409;padding:.5rem .8rem}

/* ---------- compléteur de franco, promesse d'expédition, newsletter ---------- */
.complete{background:#EAF6EE;border:1.5px dashed #9BD0B0;border-radius:14px;padding:.7rem .9rem;margin-top:1rem}
.complete p{font-size:.8rem;margin-bottom:.5rem}
.complete__item{display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;padding:.35rem 0}
.complete__item img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.complete__item b{display:block;font-size:.8rem;line-height:1.25}
.complete__item small{font-size:.72rem;color:var(--ok);font-weight:700}
.complete__item .add{width:2rem;height:2rem;padding:0;border-radius:50%;font-size:1rem;background:var(--ok)}
.dispatch{font-size:.78rem;color:var(--muted)}
.dispatch:empty{display:none}
.dispatch.today b{color:var(--ok)}
.dispatch--drawer{text-align:center;margin-top:.7rem}
.dispatch--panel{margin-top:.8rem;background:var(--cream);border-radius:10px;padding:.5rem .8rem}
.modal__meta{font-size:.78rem!important;color:var(--muted)!important;margin:.8rem 0 0!important;display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.linkbtn{border:none;background:none;color:var(--ink);font-size:.78rem;font-weight:700;text-decoration:underline;padding:0}
textarea{width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink);resize:vertical}
textarea:focus{outline:2px solid var(--sucre);border-color:var(--sucre)}
.news{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;background:linear-gradient(120deg,#FFF3CD,#FFE7D2);border-radius:28px;padding:clamp(1.4rem,4vw,2.6rem);margin:0 0 2rem}
@media(max-width:760px){.news{grid-template-columns:1fr}}
.news .script{font-size:2rem;color:#C95409;display:block;line-height:1}
.news h2{font-size:1.4rem;line-height:1.2;margin:.2rem 0 .5rem}
.news p{font-size:.88rem;color:#5a534d}
.news__form{display:grid;gap:.6rem}
.news__form input[type=email]{padding:.9rem 1rem;border-radius:999px;font-size:.95rem}
.news__form small{font-size:.7rem;color:var(--muted);text-align:center}
.news__ok{background:#fff;border-radius:16px;padding:1.2rem;text-align:center;font-size:.95rem}
.news__ok b{font-size:1.3rem;letter-spacing:.08em;color:#C95409;display:inline-block;margin:.2rem 0}

.seolinks{margin:0 0 1rem;font-size:.78rem}
.seolinks summary{cursor:pointer;color:var(--muted);text-align:center;padding:.5rem}
.seolinks__cols{display:grid;grid-template-columns:1fr 2fr;gap:1rem;padding:.6rem 0}
.seolinks ul{list-style:none;columns:2;column-gap:1rem}
.seolinks__cols ul:first-child{columns:1}
.seolinks li{padding:.1rem 0}
.seolinks a{color:var(--muted);text-decoration:none}
.seolinks a:hover{color:var(--ink);text-decoration:underline}
@media(max-width:640px){.seolinks__cols{grid-template-columns:1fr}.seolinks ul{columns:1}}

/* ---------- réassurance & pied ---------- */
.reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:3.5rem 0 2rem}
.reassure div{background:#fff;border-radius:16px;padding:1.2rem;text-align:center;box-shadow:var(--shadow);font-size:.85rem}
.reassure b{display:block;font-size:1.4rem;margin-bottom:.2rem}
footer{border-top:1px solid var(--line);padding:2rem 0 5rem;font-size:.78rem;color:var(--muted);text-align:center}
footer a{color:inherit}

/* ---------- panier (tiroir) ---------- */
.overlay{position:fixed;inset:0;background:rgba(30,20,10,.55);backdrop-filter:blur(4px);z-index:60;opacity:0;pointer-events:none;transition:.3s}
.overlay.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:#fff;z-index:70;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.on{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line)}
.drawer__head h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em}
.close{border:none;background:var(--cream);width:2.4rem;height:2.4rem;border-radius:50%;font-size:1.3rem;transition:.2s}
.close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.drawer__list{flex:1;overflow:auto;padding:1rem 1.4rem}
.line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line)}
.line img{width:64px;height:64px;object-fit:contain;background:var(--cream);border-radius:12px;padding:.3rem;mix-blend-mode:multiply}
.line h4{font-size:.85rem;line-height:1.3}
.line .sub{font-size:.75rem;color:var(--muted)}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;margin-top:.4rem}
.qty button{border:none;background:none;width:1.9rem;height:1.9rem;font-size:1rem;font-weight:700}
.qty span{min-width:1.6rem;text-align:center;font-size:.85rem;font-weight:700}
.line .tot{font-weight:900;text-align:right}
.line .rm{display:block;border:none;background:none;color:var(--muted);font-size:.7rem;text-decoration:underline;margin-top:.3rem;padding:0}
.drawer__foot{padding:1rem 1.4rem 1.4rem;border-top:1px solid var(--line);background:var(--cream)}
.franco{font-size:.78rem;color:var(--muted);margin-bottom:.5rem}
.bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:1rem}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sucre),var(--sale));border-radius:999px;transition:width .4s}
.total{display:flex;justify-content:space-between;font-weight:900;font-size:1.1rem;margin-bottom:.9rem}
.btn{display:block;width:100%;border:none;border-radius:999px;padding:1rem;font-weight:800;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;background:var(--ink);color:#fff;transition:.2s;text-align:center;text-decoration:none}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.accent{background:linear-gradient(90deg,var(--sucre),var(--sale));color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.drawer .empty{padding:4rem 1rem}

/* ---------- barre mobile ---------- */
.mobilebar{position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:50;display:none;align-items:center;justify-content:space-between;background:var(--ink);color:#fff;border-radius:999px;padding:.7rem .7rem .7rem 1.2rem;box-shadow:var(--shadow-lg);transform:translateY(120%);transition:.3s}
.mobilebar.on{transform:none}
.mobilebar b{font-size:.95rem}
.mobilebar small{display:block;font-size:.7rem;opacity:.75}
.mobilebar button{border:none;background:var(--sucre);color:var(--ink);border-radius:999px;padding:.6rem 1rem;font-weight:800;font-size:.8rem}
@media(max-width:640px){.mobilebar{display:flex}}

/* ---------- fiche produit (modale) ---------- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1rem;opacity:0;pointer-events:none;transition:.25s}
.modal.on{opacity:1;pointer-events:auto}
.modal__card{background:#fff;border-radius:26px;max-width:860px;width:100%;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:var(--shadow-lg);transform:scale(.94);transition:.3s;position:relative;max-height:92vh}
.modal.on .modal__card{transform:none}
.modal__img{display:grid;place-items:center;padding:2rem;background:var(--sucre-soft)}
.modal__img.sale{background:var(--sale-soft)}
.modal__img img{max-height:380px;width:auto;object-fit:contain;mix-blend-mode:multiply;animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.modal__body{padding:2rem;overflow:auto}
.modal__body .card__brand{margin-bottom:.4rem}
.modal__body h2{font-size:1.4rem;line-height:1.25;margin-bottom:.6rem}
.modal__body p{font-size:.92rem;color:#4a4540;margin-bottom:1rem}
.specs{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;font-size:.82rem;margin-bottom:1.2rem}
.specs dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:700;padding-top:.15rem}
.modal__buy{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.modal__buy .price{font-size:1.5rem}
.modal .close{position:absolute;top:1rem;right:1rem;background:#fff;box-shadow:var(--shadow)}
@media(max-width:700px){.modal__card{grid-template-columns:1fr}.modal__img{padding:1.2rem}.modal__img img{max-height:200px}.modal__body{padding:1.4rem}}

/* ---------- commande (checkout) ---------- */
.checkout{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start;margin-top:1.5rem}
@media(max-width:820px){.checkout{grid-template-columns:1fr}}
.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.6rem}
.panel h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
.panel h3 .step{width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.8rem}
.panel+.panel{margin-top:1.2rem}
label{display:block;font-size:.78rem;font-weight:700;margin:.8rem 0 .25rem}
input,select{width:100%;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:.92rem;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--sucre);border-color:var(--sucre)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.ship{display:flex;gap:.9rem;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:.9rem 1rem;margin-top:.6rem;cursor:pointer;transition:.2s}
.ship:hover{border-color:var(--ink)}
.ship.on{border-color:var(--sucre);background:var(--sucre-soft)}
.ship input{width:auto;margin-top:.25rem}
.ship b{display:block;font-size:.9rem}
.ship small{display:block;color:var(--muted);font-size:.78rem}
.ship .p{margin-left:auto;font-weight:900;white-space:nowrap}
.relay-pick{margin:.6rem 0 0 2.2rem;font-size:.8rem;color:var(--muted)}
.relay-pick button{border:1.5px dashed var(--ink);background:none;border-radius:999px;padding:.4rem .9rem;font-size:.78rem;font-weight:700}
.summary .line{grid-template-columns:44px 1fr auto}
.summary .line img{width:44px;height:44px}
.sumrow{display:flex;justify-content:space-between;font-size:.9rem;padding:.35rem 0}
.sumrow.big{font-weight:900;font-size:1.15rem;border-top:1px solid var(--line);margin-top:.5rem;padding-top:.8rem}
.stripe-note{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.7rem}
.back{background:none;border:none;color:var(--muted);text-decoration:underline;font-size:.8rem;margin-bottom:1rem}

/* ---------- toast & divers ---------- */
.toast{position:fixed;left:50%;bottom:5.2rem;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:700;z-index:90;opacity:0;transition:.3s;pointer-events:none;box-shadow:var(--shadow-lg)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(min-width:641px){.toast{bottom:2rem}}
.demo{background:#FFF3CD;border:1px solid #F3D48A;color:#6B4A0F;border-radius:12px;padding:.7rem 1rem;font-size:.8rem;margin:1rem 0}
.demo-modal{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(30,20,10,.6);backdrop-filter:blur(4px);padding:1rem}
.demo-modal>div{background:#fff;border-radius:22px;padding:2rem;max-width:460px;text-align:center;box-shadow:var(--shadow-lg)}
.demo-modal h3{margin-bottom:.6rem}
.demo-modal p{font-size:.9rem;color:#4a4540;margin-bottom:1.2rem}

/* =====================================================================
   EFFETS « WAOUH »
   ===================================================================== */

/* --- ambiance qui change selon l'univers choisi --- */
body{--accent:var(--sucre);--accent-soft:var(--sucre-soft);--accent-ink:var(--ink);transition:background-color .8s ease}
body[data-univers="sucre"]{background:#FFF6E3}
body[data-univers="sale"]{background:#FFF0E4;--accent:var(--sale);--accent-soft:var(--sale-soft);--accent-ink:#fff}
body[data-univers="sale"] .cartbtn .n{background:var(--sale);color:#fff}
body[data-univers="sale"] .filters{background:transparent}
body[data-univers="sucre"] .filters{background:transparent}
.filters{transition:background .8s}
.add{transition:background .25s,transform .15s}
.add:active{transform:scale(.92)}
.btn.accent{background:linear-gradient(90deg,var(--accent),var(--sale));background-size:200% 100%;transition:background-position .6s,transform .2s}
.btn.accent:hover{background-position:100% 0}

/* --- héros : cascade d'entrée + halo qui suit la souris --- */
.hero{background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),var(--accent-soft) 0%,#fff 45%)}
.hero__text>*{animation:heroUp .9s cubic-bezier(.2,.7,.2,1) both}
.hero__text>*:nth-child(1){animation-delay:.05s}
.hero__text>*:nth-child(2){animation-delay:.18s}
.hero__text>*:nth-child(3){animation-delay:.32s}
.hero__text>*:nth-child(4){animation-delay:.46s}
.hero__text>*:nth-child(5){animation-delay:.6s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.hero h1 em{background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{0%{background-position:0 0}100%{background-position:200% 0}}
.pill{position:relative;overflow:hidden}
.pill::after{content:'';position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .6s}
.pill:hover::after{left:130%}

/* --- produits : apparition en cascade au défilement + relief --- */
.card{animation:none;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease,box-shadow .25s;transition-delay:calc(var(--i,0)*70ms);transform-style:preserve-3d;will-change:transform}
.card.on{opacity:1;transform:none}
.card.on:hover{transform:translateY(-6px)}
.card__img{position:relative}
.card__img::after{content:'Voir';position:absolute;right:.7rem;bottom:.7rem;background:#fff;color:var(--ink);font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px;opacity:0;transform:translateY(6px);transition:.25s;box-shadow:var(--shadow)}
.card:hover .card__img::after{opacity:1;transform:none}
.section-title{opacity:0;transform:translateX(-14px);transition:.7s ease}
.section-title.on{opacity:1;transform:none}
.chip.on{animation:chipPop .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes chipPop{from{transform:scale(.9)}to{transform:none}}

/* --- panier : image qui s'envole, bouton qui rebondit --- */
.fly{position:fixed;z-index:200;width:70px;height:70px;object-fit:contain;pointer-events:none;border-radius:50%;background:#fff;padding:6px;box-shadow:var(--shadow-lg)}
.cartbtn.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1)}}
.cartbtn .n.pulse{animation:pulse .6s}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(249,177,66,.7)}100%{box-shadow:0 0 0 14px rgba(249,177,66,0)}}
.line{animation:lineIn .4s ease both}
@keyframes lineIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.bar i{position:relative;overflow:hidden}
.bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shimmer 1.8s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.franco.free{color:var(--ok);font-weight:700}
.confetti{position:fixed;width:8px;height:12px;border-radius:2px;z-index:210;pointer-events:none}

/* --- modale : entrée plus vivante --- */
.modal.on .modal__body>*{animation:heroUp .6s ease both}
.modal.on .modal__body>*:nth-child(2){animation-delay:.08s}
.modal.on .modal__body>*:nth-child(3){animation-delay:.16s}
.modal.on .modal__body>*:nth-child(4){animation-delay:.24s}
.modal.on .modal__body>*:nth-child(5){animation-delay:.32s}

/* =====================================================================
   FICHE PRODUIT ENRICHIE, SUGGESTIONS, AVIS, RUPTURE, CADEAU
   ===================================================================== */
.tabs{display:flex;gap:.3rem;border-bottom:1.5px solid var(--line);margin:.2rem 0 .9rem;overflow-x:auto;scrollbar-width:none}
.tab{border:none;background:none;padding:.5rem .7rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-1.5px;white-space:nowrap;transition:.2s}
.tab:hover{color:var(--ink)}
.tab.on{color:#C95409;border-color:#C95409}
.pane{display:none;animation:heroUp .4s ease both}
.pane.on{display:block}
.ingr{font-size:.85rem!important;line-height:1.55}
.ingr b{font-weight:900;color:var(--ink)}
.allerg{font-size:.82rem!important;background:#FFF3CD;border-radius:10px;padding:.5rem .7rem}
.note{font-size:.75rem!important;color:var(--muted)!important;margin-bottom:.6rem!important}
.nutri{width:100%;border-collapse:collapse;font-size:.83rem;margin-bottom:1rem}
.nutri th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:.3rem 0 .5rem}
.nutri td{padding:.3rem 0;border-bottom:1px dashed var(--line)}
.nutri td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.nutri td.sub{padding-left:1rem;color:var(--muted)}
.stars{color:var(--sucre);font-size:.8rem;letter-spacing:.02em;white-space:nowrap}
.stars small{color:var(--muted);font-size:.7rem}
.sug{margin-top:1.4rem;padding-top:1rem;border-top:1.5px solid var(--line)}
.sug h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem}
.sug__list{display:grid;gap:.5rem}
.sug__item{display:grid;grid-template-columns:44px 1fr auto;gap:.7rem;align-items:center;background:var(--cream);border-radius:12px;padding:.4rem .6rem}
.sug__item img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.sug__item b{display:block;font-size:.8rem;line-height:1.25}
.sug__item small{font-size:.75rem;color:var(--muted)}
.sug__item .add{width:2rem;height:2rem;padding:0;border-radius:50%;font-size:1rem}
.card--off{opacity:.75}
.card--off .card__img img{filter:grayscale(.6)}
.off-badge{position:absolute;top:.7rem;left:.7rem;background:var(--ink);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px}
.add:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.off-inline{font-size:.85rem;color:var(--muted);font-weight:700}
.line--gift{background:linear-gradient(90deg,#FFF3CD,#fff);border-radius:14px;padding:.7rem .8rem;margin-top:.5rem;border-bottom:none}
.gift-ico{font-size:1.9rem;text-align:center;animation:wiggle 2.4s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-10deg)}90%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
.tot.free{color:var(--ok)}
.line .compo{display:block;font-size:.7rem;line-height:1.35;margin-top:.15rem}
.bar--steps{position:relative;overflow:visible;margin:1.4rem 0 1.2rem}
.bar--steps b{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:.85rem;background:#fff;border:2px solid var(--line);border-radius:50%;width:1.6rem;height:1.6rem;display:grid;place-items:center;font-style:normal}
.bar--steps .bar__gift{left:100%}
.bar--steps i{border-radius:999px}

/* =====================================================================
   L'ATELIER — composez votre coffret
   ===================================================================== */
.pill.play{background:#fff;border-color:#C95409;color:#C95409;padding:.7rem 1.2rem}
.bcard--builder{background:linear-gradient(150deg,#fff 0%,#FFF3CD 60%,#FFE7D2 100%);border:2px dashed #E8B25B;cursor:pointer}
.bcard--builder .ribbon--play{background:var(--ink)}
.builder-preview .tile--slot{border:2px dashed #E8B25B;background:rgba(255,255,255,.6)!important;color:#C95409;font-weight:900;font-family:'Festivo',cursive;font-size:1.4rem;animation:slotPulse 2.4s ease-in-out infinite}
.builder-preview .tile--slot:nth-child(2){animation-delay:.3s}.builder-preview .tile--slot:nth-child(3){animation-delay:.6s}.builder-preview .tile--slot:nth-child(4){animation-delay:.9s}
@keyframes slotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06);border-color:#C95409}}
.builder-txt{font-size:.82rem;color:#5a534d;margin:.2rem 0 .6rem}
.bundles--compact .builder-txt{display:none}
.bcard--builder .add--builder{background:var(--ink)}
.bcard--builder:hover .add--builder{background:#C95409}

.builder{position:fixed;inset:0;z-index:75;background:var(--cream);overflow:auto;transform:translateY(100%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;display:flex;flex-direction:column}
.builder.on{transform:none;opacity:1}
.builder__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.2rem clamp(1rem,4vw,2.5rem) .6rem;background:linear-gradient(90deg,#FFF3CD,#FFE7D2);border-bottom:1px solid #F3D48A}
.builder__head .script{font-size:2rem;line-height:1;color:#C95409;display:block}
.builder__head h2{font-size:clamp(1.3rem,2.5vw,1.9rem);line-height:1.1}
.builder__head p{font-size:.85rem;color:#5a534d;margin-top:.2rem}
.builder__head .close{flex:none;background:#fff}
.builder__body{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:1.5rem;padding:1.2rem clamp(1rem,4vw,2.5rem) 2.5rem;flex:1;align-items:start}
@media(max-width:860px){.builder__body{grid-template-columns:1fr}.builder__box{position:static!important}}
.builder__box{position:sticky;top:1rem;background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:1.2rem}
.bsizes{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.bsizes span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-right:.3rem}
.bsize{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.45rem .9rem;font-size:.8rem;font-weight:700;transition:.2s}
.bsize.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.bbox{position:relative;background:linear-gradient(160deg,#FFE7D2,#FFF3CD);border-radius:18px;padding:1rem;border:3px solid #E8B25B;box-shadow:inset 0 6px 18px rgba(120,70,10,.12)}
.bbox__lid{position:absolute;left:-6px;right:-6px;top:-10px;height:14px;background:#C95409;border-radius:6px;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.bslots{display:grid;gap:.55rem;grid-template-columns:repeat(3,1fr)}
.bslots--9{grid-template-columns:repeat(3,1fr)}
.bslots--10{grid-template-columns:repeat(4,1fr)}
/* les articles surprises offerts par l'atelier : visibles mais non cliquables */
.slot--surprise{border-style:solid;border-color:#4CAF7D;background:#EAF8F0;color:#1c6b35;font-size:1.5rem}
.slot--surprise em{position:absolute;bottom:.25rem;left:50%;transform:translateX(-50%);background:#4CAF7D;color:#fff;font-style:normal;font-size:.58rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:.12rem .45rem;border-radius:999px}
.bsize small{display:block;font-size:.62rem;font-weight:500;opacity:.7;letter-spacing:.04em}
.slot{position:relative;aspect-ratio:1/1;border-radius:14px;border:2px dashed #E8B25B;background:rgba(255,255,255,.55);display:grid;place-items:center;font-family:'Festivo',cursive;font-size:1.3rem;color:#C95409;overflow:hidden;transition:.25s;padding:0}
.slot--next{border-style:solid;border-color:#C95409;background:#fff;animation:slotPulse 1.6s ease-in-out infinite}
.slot--filled{border:2px solid #fff;background:#fff;cursor:pointer;box-shadow:var(--shadow);animation:land .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{0%{transform:scale(.4) rotate(-10deg)}100%{transform:none}}
.slot--filled img{width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
.slot--filled i{position:absolute;top:.2rem;right:.3rem;font-style:normal;font-size:.8rem;color:var(--muted);opacity:0;transition:.2s}
.slot--filled:hover i{opacity:1}
.slot--filled:hover img{transform:scale(.9);opacity:.6}
.slot--free{outline:3px solid var(--ok);outline-offset:-3px}
.slot--free em{position:absolute;bottom:.25rem;left:50%;transform:translateX(-50%);background:var(--ok);color:#fff;font-style:normal;font-size:.6rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:.15rem .5rem;border-radius:999px}
.bslots--full .slot--filled{animation:cheer .6s ease}
@keyframes cheer{0%,100%{transform:none}30%{transform:translateY(-8px) rotate(-4deg)}60%{transform:translateY(0) rotate(3deg)}}
.bstate{display:flex;align-items:center;gap:.9rem;margin:1rem 0 .6rem}
.bring{--p:0%;flex:none;width:58px;height:58px;border-radius:50%;background:conic-gradient(#C95409 var(--p),#F3E4C8 0);display:grid;place-items:center;transition:.4s}
.bring span{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:900}
#bmsg{font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.35}
.btools{display:flex;gap:.5rem;margin-bottom:.8rem}
.btools button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .8rem;font-size:.75rem;font-weight:700;color:var(--muted);transition:.2s}
.btools button:hover{border-color:var(--ink);color:var(--ink)}
.btools #bsurprise{border-color:#F3D48A;background:#FFF3CD;color:#6B4A0F}
.bsum{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.1rem .6rem;padding:.8rem 0;border-top:1.5px solid var(--line);font-size:.85rem;color:var(--muted)}
.bsum b{font-size:1.4rem;color:var(--ink)}
.bsum small{grid-column:1/-1;font-size:.75rem;color:var(--ok);font-weight:700}
.bname{margin-bottom:.8rem}
.bname label{font-size:.72rem;color:var(--muted);margin:.2rem 0 .3rem}
.bname input{padding:.6rem .8rem;font-size:.88rem;border-radius:10px}
.builder__pal{background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:1.2rem}
.bpal__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.bpal__head h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}
.bpal__head select{width:auto;padding:.45rem 2rem .45rem .8rem;font-size:.8rem;border-radius:999px}
.bpalette{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem}
.bprod{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:.6rem;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:.5rem .6rem;transition:.2s;font-family:inherit}
.bprod:hover{border-color:#C95409;transform:translateY(-2px);box-shadow:var(--shadow)}
.bprod:active{transform:scale(.96)}
.bprod:disabled{opacity:.45;cursor:not-allowed;transform:none}
.bprod img{width:52px;height:52px;object-fit:contain;mix-blend-mode:multiply}
.bprod b{display:block;font-size:.76rem;line-height:1.25}
.bprod small{font-size:.72rem;color:var(--muted)}
.bprod i{font-style:normal;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;transition:.2s}
.bprod:hover i{background:#C95409;transform:rotate(90deg)}
.bprod--picked{animation:picked .4s ease}
@keyframes picked{0%{transform:scale(1)}50%{transform:scale(.92)}100%{transform:none}}
.bmini{display:none;position:sticky;bottom:0;z-index:5;margin-top:auto;align-items:center;justify-content:space-between;gap:.8rem;background:var(--ink);color:#fff;padding:.7rem 1rem;box-shadow:0 -8px 24px rgba(0,0,0,.15)}
.bmini b{display:block;font-size:.95rem}
.bmini small{display:block;font-size:.72rem;opacity:.8}
.bmini button{border:none;background:var(--sucre);color:var(--ink);border-radius:999px;padding:.6rem 1rem;font-weight:800;font-size:.8rem;white-space:nowrap}
.bmini.full button{background:linear-gradient(90deg,var(--sucre),var(--sale))}
@media(max-width:860px){.bmini{display:flex}.builder__body{padding-bottom:1rem}}
@media(max-width:640px){.bpalette{grid-template-columns:1fr 1fr}.bprod{grid-template-columns:40px 1fr;padding:.45rem}.bprod i{display:none}.bprod img{width:40px;height:40px}.builder__head{padding-top:.8rem}.builder__head .script{font-size:1.5rem}}

/* --- accessibilité --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card,.section-title{opacity:1;transform:none}
}

.pack-badge{position:absolute;top:.7rem;right:.7rem;background:#C95409;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.04em;padding:.25rem .55rem;border-radius:999px;box-shadow:var(--shadow);z-index:2}
.card__meta b{font-weight:700;color:#5a534d}
.card__foot .price{line-height:1.15}

/* ---------- vignettes compactes (les cartes étaient trop hautes, surtout sur téléphone) ---------- */
.card__img{padding:.85rem}
.card__body{padding:.7rem .85rem .85rem;gap:.2rem}
.card__brand{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:.88rem;line-height:1.25}
.card__foot{margin-top:.4rem;gap:.4rem;flex-wrap:nowrap}
.card__foot .buy{margin-left:auto}
@media(max-width:640px){
  .grid{gap:.7rem}
  .card__img{padding:.55rem}
  .card__body{padding:.55rem .6rem .65rem}
  .card__brand{font-size:.58rem;letter-spacing:.08em}
  .card h3{font-size:.82rem}
  .card__meta{font-size:.68rem}
  .card .price{font-size:.95rem}
  .card .qty--sm{display:none}          /* la quantité se règle dans le panier : on gagne une ligne */
  .card__foot .add{flex:1;padding:.5rem .4rem;font-size:.72rem}
  .pack-badge{top:.4rem;right:.4rem;font-size:.62rem;padding:.2rem .45rem}
}
/* la ligne prix + quantité + bouton doit tenir sur une seule ligne sans déborder */
@media(min-width:641px){
  .card__img{aspect-ratio:5/4}
  .card__foot{gap:.3rem}
  .card__brand{font-size:.6rem;letter-spacing:.06em}
  .card__foot .price{font-size:1rem}
  .card__foot .qty--sm button{width:1.4rem;height:1.4rem;font-size:.85rem}
  .card__foot .qty--sm .q{min-width:1.1rem;font-size:.75rem}
  .card__foot .add{padding:.5rem .7rem;font-size:.73rem}
}

/* code postal servant a centrer la carte des points relais */
#relayCp{width:7.5rem;padding:.45rem .6rem;border:1.5px solid #EFE7DA;border-radius:10px;font-size:.9rem;margin:0 .4rem}
#relayCp:focus{outline:2px solid #F9B142;border-color:#F9B142}

/* bandeau des articles surprises de l'atelier : l'argument du format, sans rien dévoiler */
.bbonus{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;align-items:center;margin:.9rem 0 .2rem;
  padding:.75rem .9rem;border-radius:16px;background:linear-gradient(120deg,#EAF8F0,#F6FBF3);border:1.5px dashed #4CAF7D}
.bbonus__ico{grid-row:span 2;font-size:1.7rem;line-height:1}
.bbonus b{font-size:.95rem;color:#1c6b35;letter-spacing:-.01em}
.bbonus small{color:#4a675a;font-size:.78rem;line-height:1.3}
.bbonus__up{grid-column:1/-1;margin-top:.55rem;padding:.45rem .9rem;border:none;border-radius:999px;
  background:#4CAF7D;color:#fff;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;justify-self:start}
.bbonus__up:hover{background:#3d9668}
.bbonus--full{border-style:solid;box-shadow:0 4px 16px rgba(76,175,125,.22);animation:bbonusPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bbonusPop{from{transform:scale(.96)}to{transform:scale(1)}}
/* le rappel sous le total, en pastille plutôt qu'en note discrète */
.bsum small{display:inline-block;margin-top:.25rem;padding:.2rem .6rem;border-radius:999px;background:#EAF8F0;color:#1c6b35;font-weight:800}
/* le nombre d'offerts sur les boutons de taille */
.bsize small{display:block;font-size:.66rem;font-weight:900;color:#1c6b35;background:#EAF8F0;border-radius:999px;padding:.08rem .4rem;margin-top:.18rem}
.bsize.on small{background:#fff;color:#1c6b35}