/* ===== LeanShirt — homepage (style FinCut : premium monochrome, vraies photos) ===== */
:root {
  --accent: #0e1014;            /* noir au lieu du bleu */
  --accent-2: #c9ccd2;          /* gris clair pour survols */
  --font: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: min(1320px, 92vw);    /* plus large */
}

/* Moins de gras partout */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.4px; }
.section__head h2, .final-cta h2 { font-weight: 700; }
.hl { color: var(--ink); }
.hl::after { background: var(--accent-2); }

/* Bleus codés en dur -> monochrome */
.pack--active { box-shadow: 0 0 0 4px rgba(14,16,20,.07) !important; }
.pack__save { background: var(--bg-alt); color: var(--ink-soft); }
.pack--active .pack__save { background: var(--ink); color: #fff; }
.zones__lvl--low { background: var(--bg-alt); color: var(--ink); }
.final-cta { background: var(--ink); }

/* ===== Page About ===== */
.about-hero { text-align: center; }
.about-hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; margin: 12px 0 14px; }
.about-story { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.about-story p { margin-bottom: 18px; }
.about-story p:last-child { margin-bottom: 0; }
.about-story strong { color: var(--ink); font-weight: 700; }

/* ===== Bannière promo ===== */
.promo-banner {
  display: flex; justify-content: center; width: 100%; margin: 0;
  background: #eef0f1; transition: opacity .2s ease;
}
.promo-banner:hover { opacity: .95; }
.promo-banner picture { display: flex; justify-content: center; width: 100%; }
.promo-banner img {
  display: block; height: auto; max-height: 380px;
  width: auto; max-width: 100%;
}
@media (max-width: 720px) {
  .promo-banner img { width: 100%; max-height: none; }
}

/* ===== Hero (texte seul, centré) ===== */
.hero--text { text-align: center; padding: 44px 0 6px; }
.hero--text .hero__content { max-width: 780px; margin: 0 auto; }
.hero--text .rating, .hero--text .hero__badges { justify-content: center; }
.hero--text h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; margin: 16px 0 16px; }
.hero--text .hero__sub { max-width: 640px; margin: 0 auto; }

/* ===== Grille produit (4 par ligne) ===== */
.shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.pcard {
  position: relative;
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; color: var(--ink);
}
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pcard__img { aspect-ratio: 1 / 1; background: var(--bg-alt); overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.pcard:hover .pcard__img img { transform: scale(1.03); }
.pcard__tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: #fff; color: var(--ink); font-size: 11px; font-weight: 700;
  letter-spacing: .3px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
}
.pcard__tag--hot { background: var(--ink); color: #fff; border-color: var(--ink); }
.pcard__body { padding: 14px 16px 18px; }
.pcard__title { font-size: 16px; font-weight: 700; }
.pcard__variant { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.pcard__price { display: block; font-size: 15px; font-weight: 700; margin-top: 8px; }
.pcard__price small { color: var(--muted); font-weight: 500; text-decoration: line-through; margin-left: 6px; }

@media (max-width: 1000px) {
  .shop__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .shop__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pcard__body { padding: 12px 13px 15px; }
  .pcard__title { font-size: 15px; }
}