/* Boutique publique (tirages + livres) — identite graphique alignee sur
   www.jpblanche.org, INDEPENDANTE de l'outil d'administration (decision
   Manuel 2026-08-23). Chargee UNIQUEMENT par base_boutique.html : ce fichier
   ne peut jamais affecter les pages admin, et inversement. S'appuie sur les
   composants deja solides de style.css (boutons, tableaux, grille, formulaires)
   en redefinissant seulement les variables de couleur/typo et quelques
   elements propres a une boutique (bandeau photo, en-tete).

   Couleurs echantillonnees directement sur www.jpblanche.org (23/08/2026) :
   #F0CC00 = accent or vif (titres de section, etat actif) ; noir/blanc purs
   pour le reste — plus tranche que la palette douce de l'outil interne. */
:root{
  --bg:#ffffff; --card:#ffffff; --ink:#111111; --muted:#6b6b6b;
  --line:#e6e6e6; --accent:#c9a600; --accent-ink:#111111;
  --gold:#f0cc00; --gold-soft:#fdf6d8; --gold-ink:#8a7300;
  --badge-bg:#f2f2f2;
}

body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}

.bq-header{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding:1.1rem 1.2rem; border-bottom:1px solid var(--line);
}
.bq-brand{
  font-size:1.3rem; font-weight:700; letter-spacing:-.01em; color:var(--ink);
  text-transform:none;
}
.bq-nav{display:flex; align-items:center; gap:1.4rem; margin-left:auto; flex-wrap:wrap}
.bq-nav a{
  font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink);
  padding:.3rem 0; border-bottom:2px solid transparent;
}
.bq-nav a:hover{border-color:var(--gold)}
.bq-panier{
  padding:.5rem .9rem !important; border:1px solid var(--ink) !important; border-radius:2px;
}
.bq-retour{margin:.6rem 1.2rem; font-size:.8rem}
.bq-retour a{color:var(--muted)}
.bq-wrap{padding:0 1.2rem 3rem}
.bq-footer{
  padding:1.5rem 1.2rem; border-top:1px solid var(--line); color:var(--muted);
  font-size:.82rem; text-align:center;
}

/* Titres de page : capitales grasses noires, comme "LES ŒUVRES" / "L'ARTISTE"
   sur le site vitrine (remplace le h1 fin/leger de l'outil interne). */
.bq-wrap h1{
  font-size:1.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); margin:1rem 0 1rem;
}
.bq-wrap h2{font-size:1.1rem; font-weight:700; color:var(--gold-ink); margin:1.6em 0 .6em}

/* Cartes du catalogue : bandeau de legende sombre sous la photo, comme les
   vignettes "Bretagne"/"Méditerranée" de jpblanche.org/lesœuvres. */
.bq-wrap .card{border-radius:0; border-color:var(--line)}
.bq-wrap .card:hover{border-color:var(--gold); background:transparent}
.bq-wrap .card-meta{
  background:#111; color:#fff; padding:.7rem .8rem; gap:.3rem;
}
.bq-wrap .card-meta .sub{color:#fff; font-weight:600}
.bq-wrap .card-meta .idx{color:#cfcfcf}
.bq-wrap .card-meta .muted{color:#cfcfcf}
.bq-wrap .prix-expo{color:var(--gold-ink); font-weight:700}

.bq-wrap .btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.bq-wrap .btn-primary:hover{background:var(--gold-ink); border-color:var(--gold-ink)}

/* Texte d'introduction (accueil, intro tirages) : paragraphes editoriaux,
   largeur de lecture confortable. */
.bq-intro{max-width:640px; margin:1.4rem 0 2rem}
.bq-intro p{margin:0 0 1em; line-height:1.6}
.bq-intro-accueil{margin-top:2.2rem}
.bq-intro-accueil p:first-child{font-size:1.15rem; font-weight:600}

/* Page d'accueil : deux grandes cartes d'entree Tirages/Livres. */
.bq-hub{display:grid; grid-template-columns:1fr; gap:1rem; max-width:640px; margin:2rem 0}
.bq-hub-card{
  display:flex; flex-direction:column; gap:.3rem; padding:1.4rem 1.5rem;
  border:1px solid var(--line); color:var(--ink);
}
.bq-hub-card:hover{border-color:var(--gold); background:var(--gold-soft)}
.bq-hub-title{font-size:1.2rem; font-weight:700; text-transform:uppercase}
.bq-hub-sub{font-size:.85rem; color:var(--muted)}

@media (min-width:640px){
  .bq-hub{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .bq-header{padding:.8rem}
  .bq-nav{gap:.9rem}
  .bq-wrap h1{font-size:1.4rem}
}