/* ============================================================
   LES RECETTES DE CLAIRETTE — Système de marque partagé
   La conserverie artisanale de Saint-Jorioz (74)
   ============================================================ */

:root{
  /* Palette extraite de l'étiquette */
  --brun:        #3A322B;
  --brun-2:      #2B2521;   /* texte courant / brun le plus profond */
  --kraft:       #D9C2A3;
  --kraft-soft:  #E7D6BC;
  --terracotta:  #D2622E;
  --terracotta-d:#B9521F;
  --rouge:       #cd1d1b;   /* rouge Savoie = rouge exact du logo */
  --creme:       #F6F0E6;
  --creme-2:     #FBF7EF;
  --vert:        #3E5641;
  --vert-soft:   #5C7560;

  --ink:         #2B2521;
  --ink-soft:    #6B5F52;
  --line:        #E1D4BF;
  --line-dark:   rgba(246,240,230,.16);

  /* Typo */
  --script: 'Pompiere', cursive;
  --serif:  'Bricolage Grotesque', 'Source Sans 3', system-ui, sans-serif;
  --sans:   'Source Sans 3', system-ui, sans-serif;

  /* Mesure */
  --maxw: 1480px;
  --gutter: clamp(20px, 4vw, 80px);
  --radius: 4px;
  --shadow-card: 0 1px 2px rgba(43,37,33,.05), 0 18px 40px -28px rgba(43,37,33,.45);
  --shadow-soft: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 30px -22px rgba(43,37,33,.5);
}

/* ---------- Reset léger ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--creme);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Bricolage Grotesque has no italic face — render « italic » accents as clean upright */
  font-synthesis:none;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:500; }

/* ---------- Type helpers ---------- */
.script{ font-family:var(--script); font-weight:400; line-height:.95; letter-spacing:.5px; }
.serif{ font-family:var(--serif); }
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta-d);
}
.eyebrow--light{ color:var(--kraft); }
.lede{ font-size:1.18rem; color:var(--ink-soft); line-height:1.62; text-wrap:pretty; }

/* Display headings (serif by default) */
.h-display{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.3rem, 5.2vw, 4.4rem);
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.h-section{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem, 3.6vw, 3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px, 9vw, 132px); }
.section--tight{ padding-block:clamp(48px,6vw,84px); }
.band-brun{ background:var(--brun); color:var(--creme); }
.band-brun .lede{ color:rgba(246,240,230,.78); }
.band-kraft{ background:var(--kraft); color:var(--brun-2); }
.band-creme2{ background:var(--creme-2); }

/* ---------- Boutons ---------- */
.btn{
  --bd:transparent;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  letter-spacing:.01em;
  padding:.92em 1.6em;
  border-radius:999px;
  border:1.5px solid var(--bd);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, box-shadow .25s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-cta{
  background:var(--terracotta); color:#fff;
  box-shadow:0 10px 24px -12px rgba(210,98,46,.8);
}
.btn-cta:hover{ background:var(--terracotta-d); box-shadow:0 16px 30px -12px rgba(210,98,46,.85); }
.btn-ghost{
  background:transparent; color:currentColor; --bd:currentColor;
  opacity:.92;
}
.btn-ghost:hover{ background:currentColor; opacity:1; }
.btn-ghost.on-dark:hover{ color:var(--brun); }
.btn-ghost.on-light:hover{ color:var(--creme); }
.btn-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:600; color:var(--terracotta-d);
  border-bottom:1.5px solid transparent;
  padding-bottom:0; line-height:1.5; transition:gap .25s, border-color .25s;
}
.btn-link:hover{ gap:.85em; border-color:var(--terracotta); }
.btn-link .arr{ transition:transform .25s; }
.btn-link:hover .arr{ transform:translateX(3px); }
.btn-link--light{ color:var(--kraft); }
.btn-link--light:hover{ border-color:var(--kraft); }

/* ---------- Cœur-croix de Savoie ---------- */
.cc{ display:inline-block; width:1em; height:1em; vertical-align:-.12em; color:var(--rouge); }
.cc svg{ width:100%; height:100%; display:block; }

/* ---------- Rameau / séparateur ---------- */
.sprig{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--terracotta); opacity:.9; }
.sprig::before,.sprig::after{
  content:""; height:1px; width:min(120px,16vw);
  background:linear-gradient(90deg, transparent, currentColor);
}
.sprig::after{ background:linear-gradient(90deg, currentColor, transparent); }
.sprig .cc{ color:var(--rouge); width:18px; height:18px; }
.sprig--light{ color:rgba(246,240,230,.5); }

/* ---------- Placeholder photo élégant ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(58,50,43,.035) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, var(--kraft-soft), var(--kraft) 60%, #cdb392);
  border-radius:var(--radius);
  color:var(--brun-2);
  display:flex; align-items:flex-end;
  isolation:isolate;
}
.ph::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.4), transparent 55%);
  z-index:-1;
}
.ph__tag{
  margin:14px;
  font-family:ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size:.62rem; letter-spacing:.04em; line-height:1.45;
  text-transform:uppercase;
  color:rgba(43,37,33,.62);
  background:rgba(246,240,230,.72);
  border:1px solid rgba(43,37,33,.12);
  padding:6px 9px; border-radius:3px;
  backdrop-filter:blur(2px);
  max-width:min(82%, 340px);
}
.ph__tag b{ color:var(--terracotta-d); font-weight:700; display:block; letter-spacing:.1em; margin-bottom:2px; }
.ph--dark{
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, #4a4038, var(--brun) 60%, #241e19);
  color:var(--creme);
}
.ph--dark .ph__tag{ color:rgba(246,240,230,.7); background:rgba(43,37,33,.55); border-color:rgba(246,240,230,.18); }
.ph--center{ align-items:center; justify-content:center; text-align:center; }

/* little glass-jar glyph used inside some placeholders */
.ph__jar{ position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); width:54px; height:54px; opacity:.34; color:var(--brun-2); }
.ph--dark .ph__jar{ color:var(--creme); }

/* ---------- Tags / pucerons ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.72rem; font-weight:600; letter-spacing:.02em;
  padding:.32em .7em; border-radius:999px;
  background:rgba(62,86,65,.1); color:var(--vert);
  border:1px solid rgba(62,86,65,.22);
}
.tag--meat{ background:rgba(200,54,43,.08); color:var(--rouge); border-color:rgba(200,54,43,.2); }
.tag--neutral{ background:rgba(58,50,43,.06); color:var(--ink-soft); border-color:rgba(58,50,43,.14); }

/* ============================================================
   HEADER (commun, déclinable .is-light / .is-dark)
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s, box-shadow .35s, border-color .35s, color .35s;
  border-bottom:1px solid transparent;
}
.site-header .wrap{
  display:flex; align-items:center; gap:24px;
  min-height:78px;
}
.brandmark{ display:flex; align-items:center; margin-right:auto; }
.brandmark__logo{ height:30px; width:auto; display:block; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav a{ font-size:.93rem; font-weight:500; letter-spacing:.01em; position:relative; padding:6px 0; opacity:.86; transition:opacity .2s; white-space:nowrap; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav a:hover{ opacity:1; }
.nav a:hover::after, .nav a.active::after{ transform:scaleX(1); }
.header-cta{ margin-left:8px; white-space:nowrap; }
.nav-toggle{ display:none; }

/* light header (over crème / scrolled) */
.site-header.is-light{ color:var(--brun-2); }
.site-header.scrolled{
  background:rgba(246,240,230,.96);
  border-color:var(--line);
  box-shadow:0 8px 30px -24px rgba(43,37,33,.5);
}
.site-header.scrolled.over-dark{
  background:rgba(42,37,33,.94);
  border-color:rgba(246,240,230,.14);
  color:var(--creme);
}
/* dark header (variation C, over brun hero) */
.site-header.is-dark{ color:var(--creme); }

.header-spacer{ height:78px; }

/* ============================================================
   FOOTER (commun)
   ============================================================ */
.site-footer{ background:var(--brun-2); color:rgba(246,240,230,.74); padding-block:clamp(56px,7vw,88px) 28px; font-size:.95rem; }
.site-footer a{ transition:color .2s; }
.site-footer a:hover{ color:var(--terracotta); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px 40px; }
.footer-brand .brandmark__logo{ height:28px; }
.footer-brand p{ margin:1.1em 0 0; max-width:34ch; line-height:1.6; }
.footer-made{
  display:inline-flex; align-items:center; gap:.55em; margin-top:18px;
  font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--kraft);
}
.footer-col h4{ font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--kraft); margin-bottom:16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-note{ display:flex; gap:.6em; align-items:flex-start; color:rgba(246,240,230,.6); font-size:.9rem; }
.footer-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  font-size:.82rem; color:rgba(246,240,230,.5);
}
.social{ display:flex; gap:10px; }
.social a{ width:36px; height:36px; border:1px solid rgba(246,240,230,.2); border-radius:50%; display:grid; place-items:center; transition:border-color .2s, background .2s, transform .2s; }
.social a:hover{ border-color:var(--terracotta); background:rgba(210,98,46,.12); transform:translateY(-2px); }
.social svg{ width:16px; height:16px; }

/* ============================================================
   SÉLECTEUR DE VARIATION (flottant)
   ============================================================ */
.variant-switch{
  position:fixed; z-index:80; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px;
  background:rgba(42,37,33,.9); color:var(--creme);
  padding:6px 6px 6px 16px; border-radius:999px;
  backdrop-filter:blur(12px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  border:1px solid rgba(246,240,230,.12);
  font-size:.82rem;
}
.variant-switch__label{ font-weight:600; letter-spacing:.04em; opacity:.7; padding-right:8px; border-right:1px solid rgba(246,240,230,.18); margin-right:4px; white-space:nowrap; }
.variant-switch a{
  display:inline-flex; align-items:center; gap:.45em;
  padding:7px 13px; border-radius:999px; font-weight:600; letter-spacing:.02em;
  color:rgba(246,240,230,.72); transition:background .2s, color .2s;
}
.variant-switch a .k{ font-family:var(--serif); font-style:italic; opacity:.7; }
.variant-switch a:hover{ color:var(--creme); background:rgba(246,240,230,.1); }
.variant-switch a.active{ background:var(--terracotta); color:#fff; }
.variant-switch a.active .k{ opacity:.85; }

/* ---------- Toast "page à venir" ---------- */
.soon-toast{
  position:fixed; z-index:90; left:50%; bottom:84px; transform:translate(-50%,18px);
  display:flex; align-items:center; gap:.7em; max-width:min(92vw,460px);
  background:var(--brun-2); color:var(--creme);
  padding:14px 20px; border-radius:12px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.6);
  border:1px solid rgba(246,240,230,.14);
  font-size:.9rem; line-height:1.45;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
}
.soon-toast.show{ opacity:1; transform:translate(-50%,0); }
.soon-toast .cc{ width:22px; height:22px; flex:none; }
.soon-toast b{ color:var(--kraft); font-weight:700; }

/* ---------- Leaflet ajustements de marque ---------- */
.leaflet-container{ font-family:var(--sans)!important; background:#dfe7e0!important; }
.cc-marker{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.35)); transform:translateY(-2px); color:var(--rouge); }
.cc-marker svg{ width:30px; height:30px; }
.leaflet-popup-content-wrapper{ border-radius:6px; box-shadow:0 14px 34px -18px rgba(43,37,33,.6); }
.leaflet-popup-content{ margin:12px 15px; font-size:.9rem; line-height:1.45; }
.leaflet-popup-content b{ font-family:var(--serif); font-size:1.06rem; font-weight:600; color:var(--brun-2); display:block; margin-bottom:2px; }
.atelier-pin{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.04s; }
.reveal.d2{ transition-delay:.08s; }
.reveal.d3{ transition-delay:.12s; }
.reveal.d4{ transition-delay:.16s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE commun
   ============================================================ */
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .nav{
    position:fixed; inset:78px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--creme); color:var(--brun-2);
    padding:8px var(--gutter) 22px;
    border-bottom:1px solid var(--line);
    box-shadow:0 24px 40px -28px rgba(43,37,33,.5);
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.2,.7,.2,1);
    max-height:calc(100vh - 78px); overflow:auto;
  }
  .nav.open{ transform:none; }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); opacity:1; }
  .nav a::after{ display:none; }
  .header-cta{ margin:14px 0 0; justify-content:center; }
  .nav-toggle{
    display:inline-flex; flex-direction:column; gap:5px; justify-content:center;
    width:44px; height:44px; border:none; background:transparent; padding:10px;
  }
  .brandmark__logo{ height:18px; }
  .nav-toggle span{ height:2px; background:currentColor; border-radius:2px; transition:transform .3s, opacity .3s; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .variant-switch{ font-size:.76rem; padding-left:12px; }
  .variant-switch__label{ display:none; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}