/* =========================================================================
   Le Panier du Sud — Narrosse (40180)
   Archétype : étal de primeur / marché fermier chaleureux (Sud-Ouest landais).
   Palette : persimmon #C2562C · basilic #4C7A34 · miel #E8A33D · crème #FAF3E6 ·
             prune-figue #3A2230 (footer).
   Fonts  : Zilla Slab (display) / Instrument Sans (body).
   Signature : ÉTIQUETTE KRAFT DE CAGEOT (label à œillet, façon ardoise de primeur)
               sur les cartes rayons + eyebrows « étiquette de marché ».
   Anti-footprint : 100 % Bootstrap dans le balisage ; toute la peau ici.
   ========================================================================= */

:root {
  --bs-primary: #C2562C;
  --bs-primary-rgb: 194, 86, 44;
  --bs-secondary: #4C7A34;
  --bs-secondary-rgb: 76, 122, 52;

  --persimmon: #C2562C;
  --persimmon-600: #a8481f;
  --basil: #4C7A34;
  --basil-700: #3c632a;
  --honey: #E8A33D;
  --cream: #FAF3E6;
  --paper: #F3E9D6;
  --kraft: #d8c199;
  --fig: #3A2230;
  --fig-800: #2c1a25;
  --ink: #2E241C;

  --bs-body-font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #46382e;
  --bs-body-bg: var(--cream);
  --bs-emphasis-color: var(--ink);

  --bs-border-radius: .6rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;

  --bs-link-color: var(--persimmon-600);
  --bs-link-color-rgb: 168, 72, 31;
  --bs-link-hover-color: var(--basil-700);

  --shadow-soft: 0 2px 4px rgba(58, 34, 24, .06), 0 16px 34px -18px rgba(58, 34, 24, .34);
  --shadow-lift: 0 4px 8px rgba(58, 34, 24, .1), 0 30px 54px -22px rgba(58, 34, 24, .44);
}

/* ---------------------------------------------------------------- Base ---- */
body {
  background-color: var(--cream);
  background-image:
    radial-gradient(52rem 26rem at 110% -6%, rgba(232, 163, 61, .16), transparent 60%),
    radial-gradient(48rem 26rem at -8% 2%, rgba(76, 122, 52, .10), transparent 58%);
  background-attachment: fixed;
  color: var(--bs-body-color);
  letter-spacing: .005em;
}

h1, h2, h3, h4, h5, .display-1 {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.12;
}
p { line-height: 1.75; }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .16em; }
::selection { background: rgba(194, 86, 44, .2); }

:focus-visible { outline: 3px solid rgba(76, 122, 52, .6); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 1180px; }
img { border-radius: var(--bs-border-radius); }

/* Eyebrow « étiquette de marché » */
#label-eyebrow, #hero-tag {
  font-family: 'Zilla Slab', serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
  color: var(--persimmon-600);
}
#label-eyebrow {
  background: rgba(194, 86, 44, .1); padding: .35rem .8rem; border-radius: 50rem;
  border: 1px dashed rgba(194, 86, 44, .4);
}

/* ------------------------------------------------------------- Buttons ---- */
.btn { --bs-btn-font-family: 'Zilla Slab', serif; font-weight: 600; border-radius: 50rem; padding-inline: 1.3rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.btn-lg { padding-block: .7rem; }
.btn-primary {
  --bs-btn-bg: var(--persimmon); --bs-btn-border-color: var(--persimmon);
  --bs-btn-hover-bg: var(--persimmon-600); --bs-btn-hover-border-color: var(--persimmon-600);
  --bs-btn-active-bg: var(--persimmon-600);
  box-shadow: 0 12px 22px -14px rgba(194, 86, 44, .9);
}
.btn-outline-primary {
  --bs-btn-color: var(--persimmon-600); --bs-btn-border-color: rgba(194, 86, 44, .45);
  --bs-btn-hover-bg: var(--persimmon); --bs-btn-hover-border-color: var(--persimmon);
  border-width: 2px;
}
.btn-accent {
  --bs-btn-color: #fff; color: #fff;
  background: linear-gradient(180deg, #5c9040, var(--basil));
  border: 1px solid var(--basil-700);
  box-shadow: 0 14px 24px -14px rgba(76, 122, 52, .85);
}
.btn-accent:hover, .btn-accent:focus { color: #fff; background: linear-gradient(180deg, #52853a, var(--basil-700)); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* -------------------------------------------------------------- Topbar ---- */
#topbar { background: var(--fig); color: #ecdfd3; }
#topbar-link { color: #ecdfd3; }
#topbar-link:hover { color: #fff; text-decoration: none; }
#topbar-link .bi { color: var(--honey); }
#topbar-note { color: #c8b6a8; }
#topbar-fb { color: #ecdfd3; font-size: 1.05rem; }
#topbar-fb:hover { color: var(--honey); }

/* -------------------------------------------------------------- Navbar ---- */
#topnav {
  background: rgba(250, 243, 230, .9);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(58, 34, 24, .1);
}
#brand-logo { height: 46px; width: auto; }
#topnav .nav-link { color: var(--ink); font-family: 'Zilla Slab', serif; font-weight: 500; border-radius: 50rem; padding-inline: .9rem; position: relative; }
#topnav .nav-link:hover { color: var(--persimmon-600); }
#topnav .nav-link::after {
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .3rem; height: 2px;
  background: var(--basil); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
#topnav .nav-link:hover::after { transform: scaleX(1); }

/* ---------------------------------------------------------------- Hero ---- */
#hero {
  background:
    radial-gradient(36rem 20rem at 88% 0%, rgba(232, 163, 61, .2), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--cream) 100%);
  border-bottom: 1px solid rgba(58, 34, 24, .08);
}
#hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(58, 34, 24, .05) 1px, transparent 1px);
  background-size: 20px 20px; mask-image: linear-gradient(180deg, #000, transparent 72%);
}
#hero-tag { color: var(--basil-700); background: rgba(76, 122, 52, .12); padding: .4rem .9rem; border-radius: 50rem; }
#hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem); color: var(--persimmon-600); }
#hero-lead { font-size: 1.15rem; color: #6a5a4c; max-width: 42ch; }
#hero-chip { background: #fff; border: 1px solid rgba(58, 34, 24, .1); padding: .4rem .85rem; border-radius: 50rem; font-size: .9rem; font-weight: 500; box-shadow: 0 1px 2px rgba(58,34,24,.05); }
#hero-chip .bi { color: var(--basil); }
#hero-figure img, #side-figure img, #gallery-figure img {
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--shadow-lift);
  border: 6px solid #fff;
}
#hero-figure { position: relative; }
#hero-figure::after {
  content: ""; position: absolute; inset: auto -.6rem -.9rem auto; width: 62%; height: 62%;
  background: repeating-linear-gradient(45deg, rgba(76,122,52,.14) 0 10px, transparent 10px 20px);
  border-radius: var(--bs-border-radius-lg); z-index: -1;
}

/* ------------------------------------------------- Bandes éditoriales ----- */
#histoire-title, #diversite-title, #cremerie-title, #primeurs-title, #cat-title, #galerie-title { color: var(--ink); }
#histoire-title, #diversite-title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
#histoire-text, #diversite-text, #cremerie-text, #primeurs-text { color: #55463a; font-size: 1.06rem; }
#side-figure { position: relative; }

/* --------------------------------------------------- Bande livraison ------ */
#banner-band {
  border-radius: var(--bs-border-radius-xl);
  background: linear-gradient(120deg, var(--basil), var(--basil-700));
  color: #f4f7ee; box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
#banner-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) 1.5px, transparent 1.5px);
  background-size: 22px 22px; opacity: .5;
}
#banner-ico { font-size: 2.4rem; color: var(--honey); position: relative; }
#banner-text { color: #fff; position: relative; max-width: 40ch; margin-inline: auto; }

/* ------------------------------------------- Nos rayons (cageots) --------- */
#crate-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border-radius: var(--bs-border-radius-lg); overflow: hidden;
  border: 1px solid rgba(58, 34, 24, .09); box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
#crate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
#crate-thumb { display: block; aspect-ratio: 4/3; position: relative; background: var(--paper); }
#crate-thumb img { border-radius: 0; transition: transform .5s ease; }
#crate-card:hover #crate-thumb img { transform: scale(1.05); }

/* SIGNATURE — étiquette kraft de cageot (label à œillet) */
#crate-label {
  position: absolute; top: 14px; left: -6px;
  font-family: 'Zilla Slab', serif; font-weight: 700; font-size: .92rem; color: var(--ink);
  background: var(--kraft); padding: .35rem .85rem .35rem 1.1rem;
  border-radius: 3px; transform: rotate(-3deg);
  box-shadow: 0 6px 12px -4px rgba(58, 34, 24, .45);
  border: 1px solid rgba(58, 34, 24, .18);
}
#crate-label::before {
  content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px;
  transform: translateY(-50%); border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(58, 34, 24, .4);
}
#crate-body { background: #fff; }
#crate-desc { color: #6a5a4c; }
#crate-more { font-family: 'Zilla Slab', serif; font-weight: 600; color: var(--persimmon-600); }
#crate-card:hover #crate-more { color: var(--basil-700); }

/* --------------------------------------------- Horaires + Contact --------- */
#hours-card {
  background: var(--fig); color: #ecdfd3; border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--shadow-soft); position: relative; overflow: hidden;
}
#hours-card::after {
  content: ""; position: absolute; right: -3rem; bottom: -3rem; width: 11rem; height: 11rem;
  background: radial-gradient(circle, rgba(232, 163, 61, .3), transparent 68%);
}
#hours-ico { width: 3rem; height: 3rem; border-radius: .8rem; background: rgba(232, 163, 61, .95); color: var(--fig); font-size: 1.35rem; }
#hours-title { color: #fff; }
#hours-row { padding-bottom: .75rem; border-bottom: 1px dashed rgba(255,255,255,.22); position: relative; }
#hours-day { color: #fff; }
#hours-slots { color: var(--honey); font-weight: 600; }

#contact-card {
  background: #fff; border-radius: var(--bs-border-radius-lg); box-shadow: var(--shadow-soft);
  border: 1px solid rgba(58, 34, 24, .09);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#contact-enseigne { font-family: 'Zilla Slab', serif; color: var(--persimmon-600); }
#contact-title { color: var(--ink); }
#contact-sub { color: #6a5a4c; }
#contact-mini { color: var(--basil); }

/* -------------------------------------------------- Pages internes -------- */
#page-head {
  background:
    radial-gradient(30rem 16rem at 92% -10%, rgba(232, 163, 61, .2), transparent 60%),
    linear-gradient(180deg, #fff, var(--cream));
  border-bottom: 1px solid rgba(58, 34, 24, .08);
}
#page-title { font-size: clamp(2rem, 4.4vw, 3rem); color: var(--persimmon-600); }
#galerie-title { color: var(--ink); }

/* ------------------------------------------------------------- Footer ------ */
#colophon { background: var(--fig-800); color: #cbb9ab; border-top: 4px solid var(--persimmon); }
#footer-name { font-family: 'Zilla Slab', serif; color: #fff; }
#footer-baseline { color: #b39f90; max-width: 42ch; }
#footer-head { color: var(--honey); }
#footer-link { color: #cbb9ab; }
#footer-link:hover { color: #fff; }
#footer-fb { color: #cbb9ab; }
#footer-fb:hover { color: var(--honey); }
#footer-rule { border-color: rgba(255,255,255,.14); }
#copyright { color: #8f7d70; }
#colophon .bi { color: var(--honey); }

/* 404 */
#content #hero-title.display-1 { color: var(--persimmon-600); }

/* -------------------------------------------------------- Responsive ------- */
@media (max-width: 575.98px) {
  #hero-title { font-size: 2rem; }
  #banner-text { font-size: 1.3rem; }
  #hero-figure::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:hover, #crate-card:hover { transform: none; }
  #crate-card:hover #crate-thumb img { transform: none; }
}