/* =========================================================
   Calimeo — Identité visuelle (par-dessus Bootstrap 5)
   Palette : vert profond + crème + or discret.
   Typo : Fraunces (titres) + Inter (texte), chargées dans base.html.twig.
   ========================================================= */

:root{
  --clm-green:#1b4332;         /* vert profond, couleur de marque */
  --clm-green-hover:#153726;
  --clm-green-soft:#e7efe9;    /* fond vert très pâle */
  --clm-gold:#b08d57;          /* or discret */
  --clm-cream:#faf8f4;         /* fond crème */
  --clm-text:#1e2723;
  --clm-muted:#68746d;
  --clm-white:#ffffff;
  --clm-border:#e4e1d8;
  --radius:.75rem;
  --shadow:0 .5rem 1.5rem rgba(27,67,50,.08);
  --shadow-sm:0 .15rem .5rem rgba(27,67,50,.06);
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--clm-text);
  background:var(--clm-cream);
  display:flex; flex-direction:column; min-height:100vh;
}
h1,h2,h3,h4,.display-5,.display-4{
  font-family:'Fraunces',Georgia,serif;
  color:var(--clm-green);
}
a{ color:var(--clm-green); }
img{ max-width:100%; height:auto; }

/* ---------- Header ---------- */
.site-header{
  background:var(--clm-white);
  border-bottom:1px solid var(--clm-border);
  position:sticky; top:0; z-index:1030;
}
.brand{
  font-family:'Fraunces',Georgia,serif;
  font-weight:700; font-size:1.6rem;
  color:var(--clm-green);
}
.brand-dot{ color:var(--clm-gold); }
.nav-link-clm{
  color:var(--clm-text); text-decoration:none; font-weight:500;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.nav-link-clm:hover{ border-bottom-color:var(--clm-gold); color:var(--clm-green); }
.btn-cart{
  background:var(--clm-green); color:#fff; font-weight:500;
  border-radius:2rem; padding:.4rem 1.1rem;
}
.btn-cart:hover{ background:var(--clm-green-hover); color:#fff; }
.cart-badge{
  position:absolute; top:-6px; right:-6px;
  background:var(--clm-gold); color:#fff;
  font-size:.7rem; font-weight:600;
  min-width:1.2rem; height:1.2rem; border-radius:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 .3rem;
}

/* ---------- Bandeau ULTRA ---------- */
.ultra-banner{
  text-align:center; font-size:.85rem; padding:.35rem .5rem;
  letter-spacing:.02em;
}
.ultra-banner.is-open{ background:var(--clm-green); color:#fff; }
.ultra-banner.is-closed{ background:var(--clm-green-soft); color:var(--clm-green); }

/* ---------- Hero ---------- */
.hero{
  padding:4rem 1rem 3.5rem;
  background:
    radial-gradient(60rem 60rem at 110% -20%, rgba(176,141,87,.12), transparent 60%),
    radial-gradient(50rem 50rem at -10% 120%, rgba(27,67,50,.10), transparent 55%),
    var(--clm-white);
  border:1px solid var(--clm-border);
  border-radius:1.25rem;
}
.hero-title{ font-weight:700; }
.hero-subtitle{ color:var(--clm-muted); max-width:38rem; margin-inline:auto; }
.hero-badges .badge{ font-weight:500; }

/* ---------- Cartes produit ---------- */
.card{
  border:1px solid var(--clm-border);
  border-radius:var(--radius);
  background:var(--clm-white);
  box-shadow:var(--shadow-sm);
}
a.card{ transition:transform .18s ease, box-shadow .18s ease; }
a.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.card .card-img-top{
  border-radius:var(--radius) var(--radius) 0 0;
  aspect-ratio:4/3; object-fit:cover;
}
.price{ font-family:'Fraunces',Georgia,serif; color:var(--clm-green); font-weight:600; }

/* ---------- Placeholder image produit ---------- */
.product-image-placeholder{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--clm-green-soft),#f1ede3);
  color:var(--clm-green);
  font-family:'Fraunces',Georgia,serif; font-size:1.5rem;
  border-radius:var(--radius) var(--radius) 0 0;
}

/* ---------- Boutons ---------- */
.btn{ border-radius:.6rem; font-weight:500; }
.btn-dark{
  background:var(--clm-green); border-color:var(--clm-green);
}
.btn-dark:hover,.btn-dark:focus{ background:var(--clm-green-hover); border-color:var(--clm-green-hover); }
.btn-outline-dark{ border-color:var(--clm-green); color:var(--clm-green); }
.btn-outline-dark:hover{ background:var(--clm-green); border-color:var(--clm-green); }
.btn-lg{ padding:.7rem 1.6rem; }

/* ---------- Formulaires ---------- */
.form-control,.form-select{ border-radius:.6rem; border-color:var(--clm-border); }
.form-control:focus,.form-select:focus{
  border-color:var(--clm-green); box-shadow:0 0 0 .2rem rgba(27,67,50,.12);
}
.form-check-input:checked{ background-color:var(--clm-green); border-color:var(--clm-green); }

/* ---------- Blocs blancs ---------- */
.bg-white{ background:var(--clm-white)!important; }
.border{ border-color:var(--clm-border)!important; }
.shadow-sm{ box-shadow:var(--shadow-sm)!important; }

/* ---------- Badges ---------- */
.badge.text-bg-light{
  background:var(--clm-green-soft)!important; color:var(--clm-green)!important;
  border:none!important; font-weight:500;
}

/* ---------- Pagination (KnpPaginator/Bootstrap) ---------- */
.pagination .page-link{ color:var(--clm-green); border-color:var(--clm-border); }
.pagination .active .page-link{
  background:var(--clm-green); border-color:var(--clm-green);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--clm-green); color:rgba(255,255,255,.85);
  margin-top:3rem;
}
.footer-brand{
  font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:1.3rem; color:#fff;
}
.footer-title{ color:var(--clm-gold); font-weight:600; text-transform:uppercase; font-size:.75rem; letter-spacing:.08em; }
.footer-muted{ color:rgba(255,255,255,.7); }
.site-footer a{ color:rgba(255,255,255,.85); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  background:rgba(0,0,0,.15); color:rgba(255,255,255,.6);
}

/* ---------- Age gate ---------- */
#ageGate{ background:rgba(18,31,25,.8); backdrop-filter:blur(4px); }
#ageGate .modal-card{
  max-width:480px; width:92%;
  background:var(--clm-white);
  border-radius:1rem;
  box-shadow:var(--shadow);
}

/* ---------- Alertes ---------- */
.alert{ border-radius:var(--radius); }