@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --paper: #F2E9D8;
  --paper-alt: #EAE0CB;
  --card: #FBF7EE;
  --ink: #322619;
  --ink-soft: #5B4B39;
  --walnut: #6B4A32;
  --walnut-dark: #4A3323;
  --sage: #74815B;
  --sage-dark: #5A6547;
  --clay: #A15C3B;
  --clay-dark: #82492E;
  --string: #C9A566;
  --line: rgba(50,38,25,0.18);
  --shadow: 0 10px 30px -12px rgba(50,38,25,0.35);
  --radius: 3px;
  --max: 1080px;

  /* échelle de tailles limitée — tout le site pioche dans ces valeurs */
  --fs-label: 0.75rem;   /* eyebrows, tag menu, footer titres, num, notes */
  --fs-small: 0.85rem;   /* textes secondaires (footer, légende, desc) */
  --fs-body: 15.5px;     /* texte courant */
  --fs-h3: 0.95rem;
  --fs-h2: clamp(1rem, 1.6vw, 1.15rem);
  --fs-h1: clamp(1.3rem, 2.6vw, 1.7rem);
  --fs-logo: 1.3rem;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    radial-gradient(rgba(50,38,25,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  color:var(--ink);
  font-family:'Source Sans 3', sans-serif;
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  color:var(--walnut-dark);
  line-height:1.1;
  margin:0 0 0.35em;
  letter-spacing:-0.01em;
}
h1{font-size:var(--fs-h1); font-weight:600;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}
p{margin:0 0 0.8em;}
a{color:var(--clay-dark);}
img{max-width:100%; display:block;}

.eyebrow{
  font-family:'Source Sans 3', sans-serif; font-weight:600;
  font-size:var(--fs-label);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--sage-dark);
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  margin-bottom:0.7em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--sage-dark);
  display:inline-block;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

/* ---------- HEADER ---------- */
header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(242,233,216,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  max-width:var(--max); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  text-decoration:none; color:var(--walnut-dark);
}
.brand .mark{
  font-family:'Fraunces', serif; font-weight:700; font-size:var(--fs-logo);
  letter-spacing:-0.01em;
}
.brand .tag{
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:var(--fs-small);
  color:var(--ink-soft); letter-spacing:0.02em;
  display:none;
}
@media(min-width:640px){ .brand .tag{display:inline;} }

.menu-btn{
  font-family:'Source Sans 3', sans-serif; font-weight:600;
  font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase;
  background:var(--walnut-dark); color:var(--card);
  border:none; padding:10px 16px 10px 34px;
  cursor:pointer; position:relative;
  border-radius:2px;
  box-shadow: 2px 3px 0 rgba(50,38,25,0.25);
}
.menu-btn::before{
  content:""; position:absolute; left:14px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--paper); transform:translateY(-50%);
  box-shadow:0 0 0 1.5px var(--card);
}

/* ---------- NAV OVERLAY (sommaire / inventaire) ---------- */
.overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(42,32,21,0.55);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  display:flex; justify-content:flex-end;
}
.overlay.open{opacity:1; pointer-events:auto;}
.overlay .panel{
  width:min(420px, 92vw); height:100%;
  background:var(--card);
  padding:32px 28px;
  overflow-y:auto;
  transform:translateX(24px);
  transition:transform .3s ease;
  border-left:1px solid var(--line);
}
.overlay.open .panel{transform:translateX(0);}
.overlay .panel-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:22px;
}
.overlay .panel-top .eyebrow{margin:0;}
.close-btn{
  background:none; border:1px solid var(--line); color:var(--ink);
  width:32px; height:32px; border-radius:50%;
  font-size:1.1rem; cursor:pointer; line-height:1;
}
.tag-list{list-style:none; margin:0; padding:0;}
.tag-list li{border-bottom:1px dashed var(--line);}
.tag-list a{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 4px; text-decoration:none; color:var(--ink);
}
.tag-list a:hover{color:var(--clay-dark);}
.tag-list .num{
  font-family:'Source Sans 3', sans-serif; font-weight:600; color:var(--sage-dark);
  font-size:var(--fs-label); flex-shrink:0;
}
.tag-list .lbl{font-family:'Fraunces', serif; font-size:var(--fs-h3); font-weight:500;}
.tag-list a.current{color:var(--clay-dark);}
.tag-list a.current .lbl{font-weight:600;}

/* ---------- HERO ---------- */
.hero{
  max-width:var(--max); margin:0 auto; padding:18px 28px 10px;
}
.hero .lede{
  font-size:var(--fs-body); color:var(--ink-soft); max-width:640px;
}
.hero-rule{
  height:1px; background:var(--line); margin:14px 0 0;
}

.hero-photo-wrap{
  max-width:var(--max); margin:20px auto 0; padding:0 28px;
}
.hero-photo{
  width:100%; max-height:420px; object-fit:cover;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}

.hero-with-thumb{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:start;
  gap:24px;
}
.hero-with-thumb .hero-rule{
  grid-column:1 / -1;
}
.hero-thumb{
  width:150px; height:150px; object-fit:cover; object-position:50% 100%;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
@media(max-width:640px){
  .hero-with-thumb{grid-template-columns:1fr;}
  .hero-thumb{width:160px; height:160px; order:-1; margin:0 auto 4px; object-position:50% 75%;}
}

/* ---------- SECTIONS ---------- */
main{padding-bottom:14px;}
.section{max-width:var(--max); margin:0 auto; padding:14px 28px;}
.section + .section{border-top:1px solid var(--line);}
.prose{max-width:680px;}
.prose p{color:var(--ink-soft);}

/* Hanging tag component — signature element */
.tag-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:2px;
  padding:18px 18px 16px;
  position:relative;
  box-shadow: var(--shadow);
}
.tag-card::before{
  content:"";
  position:absolute; top:-9px; left:22px;
  width:14px; height:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:50%;
}
.tag-card::after{
  content:"";
  position:absolute; top:-26px; left:29px;
  width:1px; height:20px;
  background:var(--string);
}

.grid{display:grid; gap:16px;}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:820px){
  .grid.cols-2,.grid.cols-4{grid-template-columns:1fr;}
}

/* numbered step list — used only for genuine sequences */
.steps{list-style:none; margin:0; padding:0; counter-reset:step;}
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:52px 1fr; gap:18px;
  padding:20px 0; border-top:1px dashed var(--line);
}
.steps li:first-child{border-top:none;}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:'Source Sans 3', sans-serif; font-weight:600;
  font-size:var(--fs-small); color:var(--clay-dark);
  padding-top:2px;
}
.steps h3{margin-bottom:4px; font-size:var(--fs-h3);}
.steps p{color:var(--ink-soft); margin:0;}

/* value / fact cards */
.fact{
  border-left:2px solid var(--sage);
  padding:4px 0 4px 18px;
}
.fact .big{
  font-family:'Fraunces', serif; font-size:2.6rem; color:var(--clay-dark);
  font-weight:600; line-height:1;
}
.fact .lbl{color:var(--ink-soft); margin-top:6px; font-size:var(--fs-small);}

ul.plain{margin:0; padding-left:0; list-style:none;}
ul.plain li{
  padding:8px 0 8px 24px; position:relative;
  border-top:1px dashed var(--line); color:var(--ink-soft);
}
ul.plain li:first-child{border-top:none;}
ul.plain li::before{
  content:"—"; position:absolute; left:0; color:var(--sage-dark);
}

/* price tags */
.price-tags{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.price-tags{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.price-tags{grid-template-columns:1fr;}}
.price-tag{
  background:var(--card); border:1px solid var(--line);
  border-radius:2px 14px 2px 2px;
  padding:24px 18px 20px; position:relative; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:100%;
}
.price-tag::before{
  content:""; position:absolute; top:14px; right:14px;
  width:9px; height:9px; border:1.5px solid var(--string); border-radius:50%;
}
.price-tag .amount{
  font-family:'Fraunces', serif; font-size:2rem; color:var(--clay-dark);
  font-weight:600; margin-top:auto; padding-top:14px;
}
.price-tag .desc{color:var(--ink-soft); font-size:var(--fs-small); flex-grow:1;}
.price-note{
  margin-top:24px; color:var(--ink-soft);
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:var(--fs-label);
}

/* CTA band */
.cta-band{
  background:var(--walnut-dark); color:var(--paper);
  padding:24px 28px; margin-top:8px;
}
.cta-band .wrap{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.cta-band h2{color:var(--paper); margin:0;}
.cta-band p{color:#D9CBB0; margin:8px 0 0;}
.btn{
  display:inline-block; background:var(--clay); color:var(--paper);
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:var(--fs-label); letter-spacing:0.05em;
  text-transform:uppercase; text-decoration:none;
  padding:14px 24px; border-radius:2px;
  box-shadow:3px 4px 0 rgba(0,0,0,0.25);
  transition:transform .15s ease;
}
.btn:hover{transform:translate(-1px,-1px);}
.btn.ghost{
  background:transparent; border:1px solid var(--paper); color:var(--paper);
  box-shadow:none;
}

/* footer */
footer.site{
  border-top:1px solid var(--line);
  padding:18px 28px 14px;
  font-size:var(--fs-small); color:var(--ink-soft);
}
footer.site .wrap{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
}
footer.site .col h4{
  font-family:'Source Sans 3', sans-serif; font-weight:600; font-size:var(--fs-label); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--sage-dark); margin:0 0 10px;
}
footer.site .col h4.brand{text-transform:none;}
footer.site a{color:var(--ink-soft); text-decoration:none;}
footer.site a:hover{color:var(--clay-dark);}
footer.site .legal{
  margin-top:26px; padding-top:18px; border-top:1px dashed var(--line);
  font-size:var(--fs-label);
}

/* zone map */
.zone-map{
  border:1px solid var(--line); background:var(--card);
  border-radius:2px; padding:20px; box-shadow:var(--shadow);
}

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--clay); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important;}
}