/* Boutique dans l'appli (mobile/boutique.php). Couleurs par variables : modes jour et nuit. */
.bq-tete { display: grid; gap: 8px; margin: 8px 0 24px; padding: 16px; background: var(--ink2); border: 1px solid var(--rule); border-radius: 16px; }
.bq-nom-boutique { margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: 20px; line-height: 26px; font-weight: 700; text-transform: uppercase; color: var(--white); }
.bq-ouvrir { display: flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; }
.bq-legende { margin: 0; font-size: 13px; line-height: 18px; color: color-mix(in srgb, var(--white) 68%, transparent); }
.bq-legende a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.bq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; }
.bq-produit { display: grid; gap: 4px; color: var(--white); text-decoration: none; transition: transform .15s ease-out; }
.bq-produit:active { transform: scale(.985); }
.bq-produit:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.bq-visuel { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; background: var(--ink3); border: 1px solid var(--rule); }
.bq-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bq-produit-nom { margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 600; }
.bq-prix { font-size: 13px; line-height: 18px; color: color-mix(in srgb, var(--white) 68%, transparent); font-variant-numeric: tabular-nums; }
.bq-cadre { display: block; width: 100%; height: 75vh; min-height: 480px; margin-bottom: 8px; border: 1px solid var(--rule); border-radius: 16px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .bq-produit { transition: none; } .bq-produit:active { transform: none; } }