/* Catalogue et panier d'un site client Webkal (avec boutique.js). Couleurs et polices : variables du site.
   Le style propre au client (matières, cadrage des photos…) se règle dans styles.css. */
.catalogue[hidden]{display:none}
.catalogue-entete{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 40px; margin-bottom:clamp(20px, 3vw, 36px)}
.catalogue-entete h2{margin:0}
.catalogue-entete p{margin:0; color:var(--texte-doux); max-width:46ch}
.produits-grille{display:grid; gap:clamp(12px, 1.6vw, 22px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr))}
.produit-carte{display:flex; flex-direction:column; margin:0}
.produit-photo{margin:0; aspect-ratio:1; background:var(--tuile, var(--surface)); border-radius:4px; overflow:hidden; display:grid; place-items:center}
.produit-photo img{width:100%; height:100%; object-fit:contain; transition:scale .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){ .produit-carte:hover .produit-photo img{scale:1.04} }
.produit-info{display:flex; flex-direction:column; gap:6px; padding-top:12px; flex:1}
.produit-info h3{margin:0}
.produit-texte{margin:0; color:var(--texte-doux); font-size:15px}
.produit-prix{margin:0; font-weight:700}
.produit-info .btn{margin-top:auto; align-self:flex-start}
/* Prix, bouton et lien alignés d'une carte à l'autre, quelle que soit la longueur du nom ou du texte :
   le prix descend en bas de la carte (sélecteur plus fort que .produit-prix du site, qui garde sa taille). */
.produit-info .produit-prix{margin-top:auto; padding-top:4px}
.produit-epuise{margin:auto 0 0; color:var(--texte-doux); font-weight:700}
.produit-carte.epuise .produit-photo{opacity:.55}

.panier-flottant{position:fixed; z-index:30; right:clamp(14px, 2vw, 24px); bottom:clamp(14px, 2vw, 24px); display:inline-flex; align-items:center; gap:10px;
  min-height:52px; padding:0 18px 0 22px; border-radius:999px; background:var(--accent); color:var(--accent-texte); text-decoration:none;
  font:700 16px/1 var(--police-texte); box-shadow:0 12px 30px -10px rgba(0,0,0,.45)}
.panier-flottant[hidden]{display:none}
.panier-nombre{min-width:26px; height:26px; padding:0 7px; border-radius:999px; background:var(--accent-texte); color:var(--accent); display:inline-grid; place-items:center; font-size:14px}
.panier-annonce{position:fixed; z-index:31; left:50%; bottom:88px; translate:-50% 12px; opacity:0; pointer-events:none; margin:0;
  max-width:calc(100vw - 32px); padding:12px 18px; border-radius:12px; background:var(--texte); color:var(--fond); font-weight:600;
  transition:opacity .25s ease, translate .25s ease}
.panier-annonce.visible{opacity:1; translate:-50% 0; pointer-events:auto}
.panier-annonce a{color:inherit; margin-left:6px}

.commande-titre{margin:0 0 12px}
.commande-lignes{list-style:none; margin:0 0 8px; padding:0}
.commande-ligne{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--ligne)}
.commande-nom{display:flex; flex-direction:column; gap:2px}
.commande-nom span{color:var(--texte-doux); font-size:15px}
.commande-nom em{color:#A1221B; font-style:normal; font-weight:700; font-size:14px}
.commande-ligne.indisponible b{text-decoration:line-through}
.commande-qte{display:flex; align-items:center; gap:8px}
.commande-qte button{min-width:44px; height:44px; border-radius:999px; border:1px solid var(--ligne); background:var(--surface); color:var(--texte); font:700 18px/1 var(--police-texte); cursor:pointer}
.commande-qte .commande-retirer{border:0; background:none; font-size:14px; text-decoration:underline; min-width:0; padding:0 4px}
.commande-qte span{min-width:2ch; text-align:center; font-weight:700}
.commande-total{font-weight:700; margin:12px 0 24px}

.commande-ok{margin-top:0}

/* Page Boutique (data-boutique : tous les rayons qui ont des produits, rendus par le serveur) */
.boutique-filtres{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(16px, 2.4vw, 28px)}
.boutique-filtre{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px;
  border:1px solid var(--ligne); background:var(--surface); color:var(--texte); text-decoration:none; font-weight:600}
.boutique-filtre span{font-size:13px; color:var(--texte-doux)}
.boutique-filtre:hover{border-color:var(--texte)}
.boutique-rayon{scroll-margin-top:calc(var(--entete-hauteur, 72px) + 16px)}
.boutique-rayon + .boutique-rayon{margin-top:clamp(56px, 7vw, 104px)}
.boutique-rayon-tete{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(16px, 2.4vw, 28px); padding-bottom:12px; border-bottom:1px solid var(--ligne)}
.boutique-rayon-tete > *{margin:0}
.boutique-nombre{color:var(--texte-doux); font-size:15px}
.boutique-vide{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 1fr); gap:clamp(20px, 4vw, 56px); align-items:center}
.boutique-vide img{width:100%; height:auto}
.boutique-vide p{color:var(--texte-doux)}
@media (max-width:700px){ .boutique-vide{grid-template-columns:1fr} .boutique-vide img{max-width:220px} }

/* Cartes qui mènent à leur fiche (FICHES = 1) */
.produit-carte.avec-fiche h3 a{color:inherit; text-decoration:none}
.produit-carte.avec-fiche h3 a:hover{text-decoration:underline}
.produit-photo a{display:block; width:100%; height:100%}
.produit-voir{align-self:flex-start; font-weight:600; color:var(--texte); min-height:40px; display:inline-flex; align-items:center}
.visuellement-cache{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* Fiche produit (gabarit produit.html, rempli par le serveur) */
.fiche{display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:clamp(24px, 4.5vw, 72px); align-items:start}
@media (max-width:860px){ .fiche{grid-template-columns:1fr} }
.galerie{display:grid; gap:12px; min-width:0}
.galerie-grande{position:relative; margin:0; aspect-ratio:1; border-radius:4px; overflow:hidden; background:var(--tuile, var(--surface)); touch-action:pan-y}
.galerie-grande img{width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none}
.galerie-fleche{position:absolute; top:50%; translate:0 -50%; width:44px; height:44px; border-radius:999px; border:0; display:grid; place-items:center;
  background:var(--surface, #fff); color:var(--texte); box-shadow:0 6px 18px -8px rgba(0,0,0,.4); cursor:pointer}
.galerie-fleche svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.galerie-fleche.avant{left:12px}
.galerie-fleche.apres{right:12px}
.galerie-vignettes{list-style:none; margin:0; padding:2px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin}
.galerie-vignettes button{display:block; width:76px; height:76px; padding:0; border-radius:4px; overflow:hidden; cursor:pointer;
  border:2px solid transparent; background:var(--tuile, var(--surface))}
.galerie-vignettes button[aria-pressed="true"]{border-color:var(--texte)}
.galerie-vignettes img{width:100%; height:100%; object-fit:contain; display:block}
.fiche-infos{display:flex; flex-direction:column; gap:14px}
.fiche-infos > *{margin:0}
.fiche-stock.epuise{color:#A1221B}
.fiche-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.fiche-texte{max-width:68ch}
.fiche-texte h2{margin:1.6em 0 .5em}
.fiche-texte h3{margin:1.3em 0 .35em}
.fiche-texte ul{padding-left:1.2em}
.fiche-texte li + li{margin-top:.35em}

/* Bouton Panier de l'en-tête ([data-panier], compteur [data-panier-nombre] tenu par boutique.js) */
.panier-entete{display:inline-flex; align-items:center; gap:8px; position:relative}
.panier-entete svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none}
.panier-entete .panier-nombre{min-width:22px; height:22px; font-size:12px}
.panier-entete .panier-nombre[hidden]{display:none}

/* Choix d'un produit (couleur, taille, pack) : menu au-dessus du prix, sur la carte et sur la fiche */
.produit-choix{display:flex; flex-direction:column; gap:4px; margin:6px 0 2px; font-size:14px; color:var(--texte-doux)}
.produit-choix span{font-weight:600; color:var(--texte)}
.produit-choix select{width:100%; min-height:44px; padding:0 36px 0 12px; border:1px solid var(--ligne); border-radius:12px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  -webkit-appearance:none; appearance:none; font:inherit; font-size:15px; color:var(--texte); cursor:pointer}
.produit-choix select:focus-visible{outline:2px solid var(--accent, var(--texte)); outline-offset:2px}
.fiche-choix{flex:1 0 100%; max-width:360px; margin:0 0 6px}