/* Boutique publique : claire, aérée, pensée mobile d'abord avec une vraie mise en page bureau. */
.b-corps{background:#fff;min-height:100vh;padding-bottom:84px}
[data-theme="dark"] .b-corps{background:var(--fond)}
.b-entete{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.b-entete .int{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 18px}
.b-logo{display:flex;align-items:center;gap:.6rem;color:var(--encre);font-weight:800;text-decoration:none!important}
.b-logo img{width:40px;height:40px;border-radius:50%;border:1px solid var(--ligne);background:#fff;padding:2px}
.b-recherche{flex:1;max-width:460px;position:relative}
.b-recherche .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--encre-3)}
.b-recherche input{padding-left:40px;border-radius:var(--r-puce)}
.b-liens{display:flex;gap:4px}
.b-liens a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:var(--r-puce);color:var(--encre-2);font-weight:700;font-size:.9rem;text-decoration:none;position:relative}
.b-liens a:hover,.b-liens a.actif{background:var(--vert-clair);color:var(--vert)}
.compteur{min-width:20px;height:20px;border-radius:99px;background:var(--vert);color:#fff;font-size:.72rem;display:inline-grid;place-items:center;padding:0 5px;font-weight:800}
.b-page{max-width:1180px;margin:0 auto;padding:18px}
.heros{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;background:var(--vert-fonce);color:#EAF5EC;border-radius:28px;
  padding:38px;position:relative;overflow:hidden}
.heros::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M28 20h8v8h8v8h-8v8h-8v-8h-8v-8h8z' fill='%23ffffff' fill-opacity='.05'/%3E%3C/svg%3E")}
.heros h1{font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.1;margin-bottom:.7rem;font-weight:800;letter-spacing:-.025em}
.heros p{opacity:.85;max-width:46ch;font-size:1.02rem}
.heros .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.heros .btn{background:#fff;color:var(--vert-fonce)} .heros .btn.second{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.heros .sceau-b{justify-self:center;width:min(260px,70%);aspect-ratio:1;border-radius:50%;background:#fff;padding:14px;
  box-shadow:0 0 0 14px rgba(255,255,255,.07),0 0 0 28px rgba(255,255,255,.04),0 30px 60px -20px rgba(0,0,0,.5);position:relative;z-index:1}
.atouts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 8px}
.atout{display:flex;gap:.8rem;align-items:flex-start;padding:16px;border-radius:18px;background:var(--surface-2);border:1px solid var(--ligne)}
.atout .pic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--vert-clair);color:var(--vert);flex:none}
.atout b{display:block} .atout span{font-size:.88rem;color:var(--encre-2)}
.section-b{margin-top:30px}
.section-b .tete{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .section-b h2{font-size:1.3rem;margin:0}
.rayons{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.rayon{flex:none;padding:.7rem 1.1rem;border-radius:16px;background:var(--surface);border:1px solid var(--ligne);font-weight:700;color:var(--encre);text-decoration:none!important}
.rayon:hover{border-color:var(--vert);color:var(--vert)} .rayon small{color:var(--encre-3);font-weight:600;margin-left:.3rem}
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.carte-p{background:var(--surface);border:1px solid var(--ligne);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s}
.carte-p:hover{box-shadow:var(--ombre)}
.carte-p .visuel{aspect-ratio:4/3;background:var(--vert-clair);display:grid;place-items:center;color:var(--vert);position:relative}
.carte-p .visuel img{width:100%;height:100%;object-fit:cover}
.carte-p .visuel .ic{width:46px;height:46px;opacity:.55}
.carte-p .visuel .puce{position:absolute;top:10px;left:10px}
.carte-p .infos{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.carte-p .nom{font-weight:800;color:var(--encre);line-height:1.25;text-decoration:none!important}
.carte-p .sous{font-size:.8rem;color:var(--encre-3)}
.carte-p .bas{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px}
.carte-p .prix{font-weight:800;font-size:1.05rem}
.btn-rond{width:40px;height:40px;border-radius:50%;border:0;background:var(--encre);color:var(--surface);display:grid;place-items:center;cursor:pointer}
.btn-rond:hover{background:var(--vert);color:#fff} .btn-rond[disabled]{opacity:.35;cursor:not-allowed}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.etape{padding:18px;border-radius:18px;border:1px dashed var(--ligne)}
.etape .num{width:30px;height:30px;border-radius:50%;background:var(--vert);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:8px}
.fiche-p{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fiche-p .visuel{border-radius:24px;overflow:hidden;background:var(--vert-clair);aspect-ratio:1;display:grid;place-items:center;color:var(--vert)}
.fiche-p .visuel img{width:100%;height:100%;object-fit:cover} .fiche-p .visuel .ic{width:90px;height:90px;opacity:.5}
.fiche-p .prix{font-size:2rem;font-weight:800;margin:.4rem 0}
.qte-b{display:inline-flex;align-items:center;border:1px solid var(--ligne);border-radius:var(--r-puce);overflow:hidden}
.qte-b button{width:42px;height:42px;border:0;background:var(--surface-2);cursor:pointer;color:var(--encre);font-size:1.1rem}
.qte-b input{width:56px;border:0;text-align:center;background:var(--surface);border-radius:0}
.ligne-b{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--ligne)}
.ligne-b .vignette{width:64px;height:64px;border-radius:14px;background:var(--vert-clair);display:grid;place-items:center;color:var(--vert);overflow:hidden}
.ligne-b .vignette img{width:100%;height:100%;object-fit:cover}
.choix-mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.choix-mode label{border:1px solid var(--ligne);border-radius:14px;padding:12px;cursor:pointer;font-weight:700}
.choix-mode label:has(input:checked){border-color:var(--vert);background:var(--vert-clair)}
.choix-mode input{accent-color:var(--vert);margin-right:.4rem}
.statut-cmd{display:flex;gap:6px;margin:14px 0}
.statut-cmd span{flex:1;height:6px;border-radius:99px;background:var(--ligne)} .statut-cmd span.fait{background:var(--vert)}
.b-pied{border-top:1px solid var(--ligne);margin-top:40px;padding:26px 18px;color:var(--encre-2);font-size:.88rem}
.b-pied .int{max-width:1180px;margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
.nav-b{display:none}
@media (max-width:820px){
  .b-liens{display:none} .b-entete .int{padding:8px 12px} .b-logo span{display:none}
  .heros{grid-template-columns:1fr;padding:26px 22px;border-radius:22px} .heros .sceau-b{display:none}
  .atouts,.etapes{grid-template-columns:1fr} .fiche-p{grid-template-columns:1fr}
  .grille-produits{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .carte-p .infos{padding:10px} .b-page{padding:14px 12px}
  .nav-b{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);
    border-top:1px solid var(--ligne);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .nav-b a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.68rem;font-weight:700;color:var(--encre-3);text-decoration:none;position:relative}
  .nav-b a.actif{color:var(--vert)} .nav-b a.actif .ic{background:var(--vert-clair);border-radius:99px;width:52px;padding:2px 14px;height:26px}
  .nav-b .compteur{position:absolute;top:-2px;right:20%}
}