/* =========================================================
   Goodbad – personnalisation du thème classic
   Fichier : themes/classic/assets/css/custom.css
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&display=swap');

:root {
  --gb-ink: #111111;
  --gb-orange: #C2410C;   /* orange lisible pour textes et boutons */
  --gb-logo: #F03E22;     /* orange du logo */
  --gb-cream: #FAFAF7;
  --gb-sand: #E7E5E0;
  --gb-muted: #57534E;
  --gb-peach: #FFF1E8;
}

/* ---------- Noms de produits : garder la casse d'origine ---------- */
.product-miniature .product-title,
.product-miniature .product-title a,
#product h1,
.product-container h1 {
  text-transform: none !important;
}
.product-miniature .product-title a {
  font-weight: 600;
  line-height: 1.35;
}

/* ---------- Bloc d'accueil (module texte personnalisé) ---------- */
#custom-text {
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
  box-shadow: none !important;
}
.gb-home { color: var(--gb-ink); margin: 0 0 2rem; }
.gb-home p { margin: 0; }
.gb-home a { text-decoration: none; }

.gb-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  color: var(--gb-ink);
}
.gb-kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gb-orange);
  margin-bottom: 10px;
}

/* Bandeau de réassurance */
.gb-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  background: #fff;
  border: 1px solid var(--gb-sand);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 1.5rem 0 2.5rem;
}
.gb-trust strong { display: block; font-size: 15px; margin-bottom: 2px; }
.gb-trust span { font-size: 14px; color: var(--gb-muted); }

/* Intro SEO */
.gb-intro { margin-bottom: 2.5rem; }
.gb-intro h1 { font-size: 40px; margin: 0 0 12px; }
.gb-intro p { font-size: 16px; line-height: 1.6; color: #44403C; max-width: 760px; }

/* Tuiles catégories */
.gb-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 1rem 0 3rem;
}
.gb-tile {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  padding: 16px;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .15s ease;
}
.gb-tile:hover { transform: translateY(-3px); }
.gb-tile-dark   { background: var(--gb-ink);    color: var(--gb-cream) !important; }
.gb-tile-orange { background: var(--gb-orange); color: #fff !important; }
.gb-tile-sand   { background: var(--gb-sand);   color: var(--gb-ink) !important; }
.gb-tile-navy   { background: #1E3A5F;          color: #fff !important; }

/* Bande « J'peux pas j'ai badminton » */
.gb-band {
  background: var(--gb-ink);
  color: var(--gb-cream);
  border-radius: 16px;
  padding: 48px;
  margin: 0 0 3rem;
}
.gb-band .gb-kicker { color: #FB923C; }
.gb-band .gb-title { color: var(--gb-cream); font-size: 52px; margin: 0 0 16px; }
.gb-band p { font-size: 17px; line-height: 1.6; color: #D6D3CD; max-width: 620px; margin-bottom: 24px; }

/* Bloc clubs */
.gb-club {
  background: var(--gb-peach);
  border-radius: 16px;
  padding: 40px 48px;
  margin: 0 0 3rem;
}
.gb-club .gb-kicker { color: #9A3412; }
.gb-club .gb-title { font-size: 40px; margin: 0 0 12px; }
.gb-club p { font-size: 16px; line-height: 1.6; color: #44403C; max-width: 760px; margin-bottom: 16px; }
.gb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.gb-chip {
  background: #fff;
  border: 1px solid #FDBA74;
  color: #9A3412;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}

/* Boutons */
.gb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gb-btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: opacity .15s ease;
}
.gb-btn:hover { opacity: .88; }
.gb-btn-orange { background: var(--gb-orange); color: #fff !important; }
.gb-btn-dark   { background: var(--gb-ink);    color: #fff !important; }
.gb-btn-light  { background: var(--gb-cream);  color: var(--gb-ink) !important; }
.gb-btn-line   { background: #fff; color: var(--gb-ink) !important; border-color: var(--gb-ink); }

/* Titres des blocs produits de l'accueil */
#index .featured-products .products-section-title,
#index .products-section-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 800;
  font-size: 36px;
  text-align: left;
  letter-spacing: 0;
}

/* Le thème impose sa taille aux titres du bloc texte : on reprend la main */
#custom-text .gb-intro h1.gb-title { font-size: 40px !important; }
#custom-text .gb-band h2.gb-title  { font-size: 52px !important; color: var(--gb-cream) !important; }
#custom-text .gb-club h2.gb-title  { font-size: 40px !important; }
#custom-text .gb-band p { color: #D6D3CD !important; }

/* ---------- Couleurs de la marque sur le reste du site ---------- */
/* Pastilles « Nouveau » et « -10 % » */
.product-flags li.product-flag { background: var(--gb-ink) !important; color: #fff !important; }
.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-percentage,
.product-flags li.product-flag.discount-amount,
.discount-percentage, .discount-amount { background: var(--gb-orange) !important; color: #fff !important; }
/* Boutons principaux (ajouter au panier, newsletter…) */
.btn-primary,
.btn-primary:focus { background-color: var(--gb-orange); border-color: var(--gb-orange); }
.btn-primary:hover { background-color: #9A3412; border-color: #9A3412; }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
  .gb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gb-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  /* Tuiles : bandeaux bas au lieu de grands carrés */
  .gb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gb-tile { aspect-ratio: auto; height: 88px; font-size: 22px; padding: 14px; }
  .gb-trust { grid-template-columns: 1fr; gap: 14px; padding: 18px 20px; }
  .gb-band, .gb-club { padding: 28px 22px; }
  #custom-text .gb-band h2.gb-title { font-size: 36px !important; }
  #custom-text .gb-club h2.gb-title { font-size: 30px !important; }
  #custom-text .gb-intro h1.gb-title { font-size: 30px !important; }
  .gb-intro p { font-size: 15px; }
  .gb-chip { font-size: 13px; padding: 6px 12px; }

  /* Produits : 2 par ligne au lieu d'1 */
  .products { display: flex; flex-wrap: wrap; }
  .products > .js-product.product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 6px;
    padding-right: 6px;
  }
  .product-miniature .product-title a { font-size: 13px; }
  .product-miniature .price { font-size: 15px; }
  .product-miniature .product-flags li.product-flag { font-size: 11px; padding: 3px 7px; }
  #index .products-section-title { font-size: 30px !important; }
}

/* ---------- Fiches produits personnalisables : bouton « Personnaliser » ---------- */
/* Ne s'applique qu'aux fiches qui ont le bouton du module de personnalisation */
#add-to-cart-or-refresh:has(#dsn-button) { display: flex; flex-direction: column; }
#add-to-cart-or-refresh:has(#dsn-button) > .product-variants        { order: 1; }
#add-to-cart-or-refresh:has(#dsn-button) > .product-discounts       { order: 2; }
#add-to-cart-or-refresh:has(#dsn-button) > .product-additional-info { order: 3; display: flex; flex-direction: column; }
#add-to-cart-or-refresh:has(#dsn-button) > .product-add-to-cart     { order: 4; }
.product-additional-info:has(#dsn-button) > #dsn-button     { order: -1; margin: 6px 0 18px; }
.product-additional-info:has(#dsn-button) > .social-sharing { order: 2; }

#dsn-button::before {
  content: "Étape 1 · Choisis ton design et ton texte";
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gb-orange);
  margin-bottom: 8px;
}
#dsn-button a.btn {
  display: block;
  width: 100%;
  max-width: 420px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: center;
  border-radius: 10px;
  background-color: var(--gb-orange) !important;
  border-color: var(--gb-orange) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(194, 65, 12, .28);
}
#dsn-button a.btn:hover { background-color: #9A3412 !important; border-color: #9A3412 !important; }