/* =====================================================================
   Boutique du Mas du Cimaï — vitrine publique
   Reprend la charte du site : fond sombre, or, Libre Caslon + Outfit.
   Concue pour le telephone d'abord (page ouverte via QR code).
   ===================================================================== */

:root {
    --bq-noir: #141414;
    --bq-noir-2: #1c1c1c;
    --bq-noir-3: #232323;
    --bq-or: #c9a227;
    --bq-or-clair: #e8c766;
    --bq-blanc: #f2f0ec;
    --bq-gris: #a5a19a;
    --bq-titre: 'Libre Caslon Display', Georgia, serif;
    --bq-texte: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bq-bordure: rgba(201, 162, 39, 0.22);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bq-noir);
    color: var(--bq-blanc);
    font-family: var(--bq-texte);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------------
   En-tete
   --------------------------------------------------------------- */
.bq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(20, 20, 20, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(8px);
}

.bq-retour,
.bq-header-spacer {
    flex: 1 1 0;
}

.bq-retour {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bq-gris);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color .25s;
}

.bq-retour:hover { color: var(--bq-or-clair); }

.bq-logo img {
    height: 54px;
    width: auto;
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.bq-hero {
    text-align: center;
    padding: 54px 22px 38px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.bq-surtitre {
    margin: 0 0 14px;
    color: var(--bq-or);
    font-size: 11px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.bq-hero h1 {
    margin: 0;
    font-family: var(--bq-titre);
    font-weight: 400;
    font-size: clamp(38px, 9vw, 68px);
    line-height: 1.1;
}

.bq-intro {
    max-width: 620px;
    margin: 20px auto 0;
    color: var(--bq-gris);
    font-size: 15px;
}

/* ---------------------------------------------------------------
   Filtres par categorie (barre collante, defilement horizontal)
   --------------------------------------------------------------- */
.bq-filtres {
    position: sticky;
    top: 82px;
    z-index: 30;
    background: rgba(20, 20, 20, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 0;
}

.bq-filtres-piste {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bq-filtres-piste::-webkit-scrollbar { display: none; }

.bq-filtre {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 40px;
    color: var(--bq-gris);
    font-family: var(--bq-texte);
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all .25s;
}

.bq-filtre:hover {
    border-color: var(--bq-or);
    color: var(--bq-or-clair);
}

.bq-filtre.actif {
    background: var(--bq-or);
    border-color: var(--bq-or);
    color: #1a1a1a;
    font-weight: 400;
}

/* ---------------------------------------------------------------
   Catalogue
   --------------------------------------------------------------- */
.bq-catalogue {
    max-width: 1240px;
    margin: 0 auto;
    padding: 46px 18px 80px;
}

.bq-categorie {
    margin-bottom: 68px;
    scroll-margin-top: 150px;
}

.bq-categorie[hidden] { display: none; }

.bq-categorie-titre {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.bq-categorie-titre i {
    color: var(--bq-or);
    font-size: 19px;
}

.bq-categorie-titre h2 {
    margin: 0;
    font-family: var(--bq-titre);
    font-weight: 400;
    font-size: clamp(24px, 4.5vw, 34px);
    white-space: nowrap;
}

.bq-trait {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--bq-bordure), transparent);
}

.bq-note-bouchon {
    margin: 0 0 26px;
    color: var(--bq-gris);
    font-size: 13.5px;
}

.bq-note-bouchon i { color: var(--bq-or); margin-right: 6px; }
.bq-note-bouchon strong { color: var(--bq-or-clair); font-weight: 400; }

.bq-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

/* ---------------------------------------------------------------
   Fiche produit
   --------------------------------------------------------------- */
.bq-produit {
    display: flex;
    flex-direction: column;
    background: var(--bq-noir-2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.bq-produit:hover {
    transform: translateY(-4px);
    border-color: var(--bq-bordure);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.bq-produit.coup-de-coeur {
    border-color: var(--bq-bordure);
}

.bq-produit-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--bq-noir-3);
    overflow: hidden;
}

.bq-produit-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .6s ease;
}

.bq-produit:hover .bq-produit-photo img { transform: scale(1.05); }

.bq-sans-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(201, 162, 39, 0.25);
    font-size: 46px;
}

.bq-nb-photos {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 30px;
    color: var(--bq-blanc);
    font-size: 11px;
    letter-spacing: .5px;
}

.bq-badge-coeur {
    position: absolute;
    left: 12px;
    top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--bq-or);
    border-radius: 30px;
    color: #1a1a1a;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.bq-produit-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 20px;
}

.bq-produit-corps h3 {
    margin: 0;
    font-family: var(--bq-titre);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.3;
}

.bq-produit-sous {
    margin: 6px 0 0;
    color: var(--bq-or);
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bq-produit-desc {
    margin: 14px 0 0;
    color: var(--bq-gris);
    font-size: 14.5px;
}

/* Les prix restent colles en bas : les cartes s'alignent entre elles. */
.bq-prix {
    margin-top: auto;
    padding-top: 20px;
}

.bq-prix-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bq-prix-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bq-gris);
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.bq-prix-label i { color: rgba(201, 162, 39, 0.75); font-size: 13px; }

.bq-prix-valeur {
    font-family: var(--bq-titre);
    font-size: 21px;
    color: var(--bq-blanc);
    /* Pas de nowrap ici : le prix sur place peut etre suivi du droit de
       bouchon, l'ensemble doit pouvoir passer a la ligne sur un telephone. */
}

/* Le droit de bouchon s'ajoute au prix sur place. Il reste lisible mais
   plus discret que le prix lui-meme, pour qu'on lise bien "15,00 € + 5,00 €". */
.bq-plus-bouchon {
    font-family: var(--bq-texte);
    font-size: 14px;
    font-weight: 300;
    color: var(--bq-or-clair);
    white-space: nowrap;
}

.bq-plus-bouchon small {
    font-size: 11.5px;
    letter-spacing: .5px;
    color: var(--bq-gris);
}

/* Sur petit ecran, le prix et le bouchon peuvent passer a la ligne. */
.bq-prix-ligne .bq-prix-valeur { text-align: right; }

/* ---------------------------------------------------------------
   Boutique vide
   --------------------------------------------------------------- */
.bq-vide {
    text-align: center;
    padding: 90px 22px 110px;
}

.bq-vide i { color: rgba(201, 162, 39, 0.3); font-size: 54px; }

.bq-vide h2 {
    margin: 26px 0 10px;
    font-family: var(--bq-titre);
    font-weight: 400;
    font-size: 30px;
}

.bq-vide p { color: var(--bq-gris); margin: 0; }

/* ---------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------- */
.bq-footer {
    text-align: center;
    padding: 54px 22px 44px;
    background: var(--bq-noir-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bq-footer-logo {
    height: 66px;
    width: auto;
    margin: 0 auto 20px;
    opacity: .85;
}

.bq-footer p { margin: 0 0 20px; color: var(--bq-gris); font-size: 14.5px; }

.bq-footer-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    margin-bottom: 30px;
}

.bq-footer-liens a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--bq-blanc);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: color .25s;
}

.bq-footer-liens a:hover { color: var(--bq-or-clair); }
.bq-footer-liens i { color: var(--bq-or); }

.bq-copyright {
    margin: 0 !important;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px !important;
    color: #6f6b65 !important;
}

/* ---------------------------------------------------------------
   Visionneuse photo
   --------------------------------------------------------------- */
.bq-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 8, 8, 0.96);
    padding: 20px;
}

.bq-lightbox[hidden] { display: none; }

.bq-lb-figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.bq-lb-figure img {
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
    border-radius: 3px;
    object-fit: contain;
}

.bq-lb-figure figcaption {
    margin-top: 18px;
    color: var(--bq-blanc);
    font-family: var(--bq-titre);
    font-size: 20px;
}

.bq-lb-fermer,
.bq-lb-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--bq-blanc);
    font-size: 18px;
    cursor: pointer;
    transition: all .25s;
}

.bq-lb-fermer:hover,
.bq-lb-nav:hover {
    background: var(--bq-or);
    border-color: var(--bq-or);
    color: #1a1a1a;
}

.bq-lb-fermer { top: 22px; right: 22px; }
.bq-lb-prec { left: 18px; }
.bq-lb-suiv { right: 18px; }

.bq-lb-nav[hidden] { display: none; }

/* ---------------------------------------------------------------
   Telephone
   --------------------------------------------------------------- */
@media (max-width: 640px) {
    .bq-hero { padding: 40px 20px 30px; }
    .bq-filtres { top: 78px; }
    .bq-catalogue { padding: 34px 16px 60px; }
    .bq-categorie { margin-bottom: 52px; }
    .bq-grille { grid-template-columns: 1fr; gap: 20px; }
    .bq-produit-photo { aspect-ratio: 3 / 2; }
    .bq-lb-prec { left: 10px; }
    .bq-lb-suiv { right: 10px; }
    .bq-lb-fermer { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .bq-produit,
    .bq-produit-photo img { transition: none; }
    .bq-produit:hover { transform: none; }
    .bq-produit:hover .bq-produit-photo img { transform: none; }
}