/* ============================================================
   JURACABANA — Site complet « Cloué » (évolution du concept I)
   Fond bois FIXE · panneaux de parchemin en relief, fixés par
   chevilles de bois, ficelle de chanvre et pinces à linge.
   ============================================================ */
:root{
  --paper:#efe2c4;
  --paper-hi:#f6ecd4;     /* haut de feuille, lumière rasante */
  --paper-lo:#e1d0a8;     /* bas / bords vieillis */
  --ink:#241a0f;
  --ink-soft:#5b4a32;
  --ink-faint:#8a7a5e;
  --wood:#9a6b40;
  --wood-deep:#6f4a26;
  --wood-dark:#3a2613;
  --brass:#b08d57;
  --rouge:#9a3b2a;        /* tampon */
  --bleu:#6f7585;         /* bois bleu */
  --twine:#c9b487;
  --f-display:"Cormorant Garamond", Georgia, serif;
  --f-text:"Spectral", Georgia, serif;
  --f-hand:"Caveat", cursive;
  --f-label:"Archivo", system-ui, sans-serif;
  --maxw:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{ margin:0; font-family:var(--f-text); color:var(--ink); background:#1b120a;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; display:block; }
::selection{ background:var(--wood-deep); color:var(--paper); }

/* ---------- FIXED wood backdrop ---------- */
/* height is pinned to the LARGE viewport (100lvh) so the mobile URL bar
   showing/hiding on scroll never resizes the element and rescales the image */
.wood-fixed{ position:fixed; top:0; left:0; right:0; width:100%; height:100vh; height:100lvh; z-index:0;
  background:url("wood-bg.jpg") center center / cover no-repeat;
  transform:translateZ(0); will-change:transform; backface-visibility:hidden; }
.wood-veil{ position:fixed; top:0; left:0; right:0; width:100%; height:100vh; height:100lvh; z-index:1; pointer-events:none; transform:translateZ(0);
  background:
    radial-gradient(120% 80% at 50% 30%, transparent 40%, rgba(20,12,4,.34) 100%),
    linear-gradient(180deg, rgba(20,12,4,.30), transparent 16%, transparent 84%, rgba(20,12,4,.42)); }

main, header, footer{ position:relative; z-index:2; }

/* ============================================================
   PAPER PANEL — relief + aged parchment rendering
   ============================================================ */
.panel{
  position:relative; margin:0 auto; border-radius:16px;
  /* aged parchment: warm gradient + vignette toward edges (static, cheap) */
  background-color:var(--paper);
  background-image:
    radial-gradient(140% 120% at 50% 0%, var(--paper-hi), transparent 55%),
    radial-gradient(120% 130% at 50% 100%, var(--paper-lo), transparent 60%),
    radial-gradient(90% 70% at 18% 22%, rgba(120,92,48,.08), transparent 48%);
  /* relief: one soft ambient lift + a contact shadow + inner highlight */
  box-shadow:
    0 2px 6px rgba(0,0,0,.22),
    0 22px 44px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,252,240,.5),
    inset 0 -14px 26px rgba(150,118,64,.08);
  /* isolate paint so scrolling over the fixed wood doesn't repaint panels */
  contain:layout paint style;
}
/* faint aged border + deckle edge */
.panel::before{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  border:1px solid rgba(120,92,48,.22);
  box-shadow:inset 0 0 0 6px rgba(246,236,212,.30), inset 0 0 26px rgba(120,92,48,.12);
}
/* (coin relevé retiré — aucune ombre diagonale sur les panneaux) */
.panel-pad{ padding:clamp(30px,4vw,56px); }

/* slight natural tilts (kept subtle) */
.tilt-l{ transform:rotate(-.7deg); } .tilt-r{ transform:rotate(.6deg); } .tilt-0{ transform:none; }

/* ============================================================
   NATURAL FASTENERS
   ============================================================ */
/* wooden dowel peg (replaces nails) */
.peg{ position:absolute; z-index:5; width:20px; height:20px; border-radius:50%;
  background:
    radial-gradient(circle at 38% 32%, #b98b56 0 18%, #8a5e33 42%, #5e3c1d 78%, #4a2e14 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.35), inset 0 2px 2px rgba(255,225,180,.4); }
.peg::after{ content:""; position:absolute; inset:7px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, rgba(255,230,190,.5), transparent 70%);
  box-shadow:inset 0 0 0 1px rgba(70,44,20,.35); }
.peg.tl{ top:-10px; left:30px; } .peg.tr{ top:-10px; right:30px; }
.peg.bl{ bottom:-10px; left:30px; } .peg.br{ bottom:-10px; right:30px; }
.peg.tc{ top:-10px; left:50%; margin-left:-10px; }

/* hemp twine — a tied loop at the top */
.twine{ position:absolute; z-index:5; top:-34px; left:50%; transform:translateX(-50%); width:60px; height:40px; }
.twine .loop{ position:absolute; left:50%; top:0; width:34px; height:30px; margin-left:-17px;
  border:3px solid var(--twine); border-radius:50% 50% 46% 46%; border-bottom-color:transparent;
  box-shadow:0 1px 1px rgba(0,0,0,.3); }
.twine .knot{ position:absolute; left:50%; top:26px; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #ddc79a, #b59963 70%, #8c7344); box-shadow:0 2px 3px rgba(0,0,0,.4); }
.twine .tailL,.twine .tailR{ position:absolute; top:32px; width:3px; height:16px; background:var(--twine);
  border-radius:2px; transform-origin:top center; }
.twine .tailL{ left:46%; transform:rotate(14deg); } .twine .tailR{ left:52%; transform:rotate(-12deg); }

/* kraft luggage tag tied with twine (labels / nav) */
.tag{ position:relative; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-label); font-size:11px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:#4a3a22; background:linear-gradient(180deg,#d9c79e,#cbb482); border:1px solid #b49a68;
  padding:8px 14px 8px 22px; border-radius:4px 12px 12px 4px;
  box-shadow:0 2px 4px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.4); }
.tag::before{ content:""; position:absolute; left:9px; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border-radius:50%; background:#7a5e34; box-shadow:inset 0 0 0 1.5px #5e4724; }

/* wooden clothespin (gallery) */
.clip{ position:absolute; z-index:6; top:-16px; left:50%; transform:translateX(-50%); width:18px; height:46px; }
.clip .body{ position:absolute; inset:0; border-radius:5px;
  background:linear-gradient(90deg,#c69a63,#a9763f 50%,#8a5e33);
  box-shadow:0 3px 5px rgba(0,0,0,.4), inset -2px 0 3px rgba(0,0,0,.25), inset 2px 0 2px rgba(255,224,180,.35); }
.clip .body::after{ content:""; position:absolute; left:50%; top:8px; bottom:8px; width:1.5px; margin-left:-.75px;
  background:rgba(60,38,16,.5); }
.clip .spring{ position:absolute; left:2px; right:2px; top:21px; height:4px; border-radius:3px;
  background:linear-gradient(#9aa0a6,#6c7176); box-shadow:0 1px 1px rgba(0,0,0,.4); }

/* twine line for the gallery */
.line{ position:relative; height:2px; margin:0 0 8px;
  background:repeating-linear-gradient(90deg,#cab285 0 6px, #b59a68 6px 9px);
  box-shadow:0 1px 2px rgba(0,0,0,.4); border-radius:2px; }

/* ============================================================
   TYPE
   ============================================================ */
.eyebrow{ font-family:var(--f-label); font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--wood-deep); display:inline-flex; align-items:center; gap:10px; }
.eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--wood); }
h1,h2,h3{ font-family:var(--f-display); font-weight:400; margin:0; line-height:1.04; color:var(--ink); }
.h-hero{ font-size:clamp(44px,7vw,86px); font-weight:300; line-height:.98; letter-spacing:-.01em; }
.h-sec{ font-size:clamp(30px,4.4vw,52px); }
.h-sub{ font-size:clamp(22px,2.6vw,30px); }
.h-hero em,.h-sec em{ font-style:italic; color:var(--wood-deep); }
p{ margin:0 0 1em; max-width:62ch; }
.lede{ font-size:clamp(18px,1.8vw,21px); color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }
.hand{ font-family:var(--f-hand); color:var(--wood-deep); }

.btn{ font-family:var(--f-label); font-size:12.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:40px; text-decoration:none;
  cursor:pointer; border:1.5px solid var(--ink); color:var(--ink); background:transparent; transition:all .18s; }
.btn:hover{ transform:translateY(-2px); }
.btn.solid{ background:var(--wood-dark); border-color:var(--wood-dark); color:var(--paper); }
.btn.solid:hover{ background:var(--ink); }
.stamp{ display:inline-block; font-family:var(--f-label); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rouge); border:2px solid var(--rouge); border-radius:6px; padding:7px 13px;
  transform:rotate(-6deg); opacity:.82; }

/* ============================================================
   HEADER (slim parchment batten, sticky)
   ============================================================ */
.site-header{ position:sticky; top:0; z-index:30; margin:0 auto; max-width:var(--maxw); padding:10px 16px 0; }
.batten{ position:relative; display:flex; align-items:center; gap:18px; padding:10px 20px;
  background-color:var(--paper);
  background-image:radial-gradient(120% 200% at 50% 0%, var(--paper-hi), transparent 60%);
  border-radius:14px; box-shadow:0 2px 4px rgba(0,0,0,.28),0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,252,240,.6); }
.site-header .logo{ height:34px; width:auto; }
.site-header nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.site-header nav a{ font-family:var(--f-label); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:8px 12px; border-radius:30px; transition:.18s; }
.site-header nav a:hover{ color:var(--ink); background:rgba(120,92,48,.1); }
.site-header nav a.active{ color:var(--ink); }
.site-header nav a.active::after{ content:""; display:block; height:1.5px; background:var(--wood); margin-top:3px; }
.site-header .h-cta{ margin-left:6px; padding:10px 16px; font-size:11px; }
.burger{ display:none; }
@media (max-width:840px){
  .site-header nav, .site-header .h-cta{ display:none; }
  .burger{ display:inline-flex; flex-direction:column; gap:5px; margin-left:auto; background:none; border:0; cursor:pointer; padding:8px; }
  .burger span{ width:24px; height:2px; background:var(--ink); display:block; transition:transform .22s ease, opacity .2s ease; }
  /* open state — nav drops down as a menu panel */
  .site-header.nav-open nav{ display:flex; flex-direction:column; gap:2px;
    position:absolute; top:calc(100% + 8px); left:0; right:0; margin-left:0;
    background:var(--paper); border-radius:14px; padding:8px; z-index:50;
    box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,252,240,.6); }
  .site-header.nav-open nav a{ padding:14px 16px; font-size:14px; border-radius:9px; }
  .site-header.nav-open nav a:hover{ background:rgba(120,92,48,.12); }
  .site-header.nav-open nav a.active::after{ display:none; }
  .site-header.nav-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .site-header.nav-open .burger span:nth-child(2){ opacity:0; }
  .site-header.nav-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ============================================================
   LAYOUT
   ============================================================ */
main{ max-width:var(--maxw); margin:0 auto; padding:18px 16px 70px; }
.stack{ display:flex; flex-direction:column; gap:clamp(40px,6vh,74px); }
.section{ scroll-margin-top:90px; }

/* hero notice */
.hero{ text-align:center; }
.hero .panel{ max-width:760px; padding:clamp(40px,5vw,64px) clamp(30px,5vw,60px); }
.hero .logo{ width:230px; max-width:62%; margin:0 auto 6px; }
.hero h1{ margin:8px 0 12px; }
.hero p{ margin:0 auto 18px; max-width:42ch; }
.hero .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

/* two-column row */
.row{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,3vw,40px); align-items:center; }
.row.rev{ grid-template-columns:1fr 1.05fr; }
@media (max-width:760px){ .row,.row.rev{ grid-template-columns:1fr; } }
/* photo holder — real <img> with a graceful placeholder until the file is dropped */
.pic{ position:relative; border-radius:10px; overflow:hidden; background:#cbb59a; }
.pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.pic .ph-label{ position:absolute; inset:0; display:none; flex-direction:column; gap:6px;
  align-items:center; justify-content:center; text-align:center; padding:14px;
  background:repeating-linear-gradient(45deg,#d8c9a8 0 13px,#cfbe9a 13px 26px); color:#6f5a3a; }
.pic.empty .ph-label{ display:flex; }
.pic .ph-label .ico{ font-size:20px; opacity:.5; }
.pic .ph-label code{ font-family:ui-monospace,"Cascadia Code",Menlo,monospace; font-size:11px;
  background:rgba(255,251,242,.7); border:1px solid rgba(120,92,48,.3); border-radius:5px; padding:4px 8px; color:#5a4631; }
.ph-wide{ aspect-ratio:16/11; } .ph-tall{ aspect-ratio:4/5; } .ph-sq{ aspect-ratio:1/1; }

/* facts as tags */
.facts{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.fact{ text-align:left; }
.fact .n{ font-family:var(--f-display); font-size:34px; line-height:1; color:var(--ink); }
.fact .n em{ font-style:italic; font-size:.6em; color:var(--wood-deep); }
.fact .l{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }

/* parcours steps */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:24px; }
@media (max-width:680px){ .steps{ grid-template-columns:1fr 1fr; } }
.step .pic{ aspect-ratio:4/3; margin-bottom:12px; }
.step .k{ font-family:var(--f-display); font-style:italic; font-size:30px; color:var(--wood-deep); line-height:1; }
.step h3{ font-size:21px; margin:4px 0 6px; }
.step p{ font-size:14px; color:var(--ink-soft); margin:0; }

/* gallery on a twine line with clothespins */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px 20px; margin-top:10px; }
@media (max-width:760px){ .gallery{ grid-template-columns:1fr 1fr; } }
.pola{ position:relative; background:#fdfaf2; padding:9px 9px 30px; box-shadow:0 2px 3px rgba(0,0,0,.2),0 14px 26px rgba(0,0,0,.3);
  margin-top:18px; }
.pola .pic{ aspect-ratio:1/1.04; }
.pola .cap{ font-family:var(--f-hand); font-size:20px; text-align:center; margin-top:6px; color:var(--ink); line-height:1; }
.pola:nth-child(odd){ transform:rotate(-1.4deg); } .pola:nth-child(even){ transform:rotate(1.2deg); }

/* bois bleu feature */
.bleu .swatch{ height:96px; border-radius:2px; position:relative;
  background:repeating-linear-gradient(92deg,#8a93a3 0 8px,#6f6c80 8px 17px,#8f9088 17px 25px);
  box-shadow:inset 0 0 22px rgba(0,0,0,.18); }
.bleu .chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chip{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1.5px solid var(--bleu); color:#4c5160; border-radius:30px; padding:7px 12px; display:inline-flex; gap:7px; align-items:center; }
.chip i{ width:11px; height:11px; border-radius:50%; }

/* pieces (boutique) */
.pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:22px; }
@media (max-width:720px){ .pieces{ grid-template-columns:1fr; } }
.piece .pic{ aspect-ratio:4/4.4; margin-bottom:14px; }
.piece h3{ font-size:24px; }
.piece .essence{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--wood-deep); }
.piece p{ font-size:14.5px; color:var(--ink-soft); margin:6px 0 10px; }
.piece .req{ font-family:var(--f-label); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; display:inline-flex; gap:7px; border-bottom:1.5px solid var(--wood); padding-bottom:3px; }

/* contact form */
.form{ display:flex; flex-direction:column; gap:16px; }
.form .fr{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:480px){ .form .fr{ grid-template-columns:1fr; } }
.form label{ display:block; font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.form input,.form textarea{ width:100%; font-family:var(--f-text); font-size:16px; color:var(--ink);
  background:rgba(255,252,242,.6); border:1.5px solid rgba(120,92,48,.35); border-radius:9px; padding:11px 13px; }
.form textarea{ min-height:104px; resize:vertical; }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--wood-deep); background:rgba(255,252,242,.9); }
.coords{ border-top:1px solid rgba(120,92,48,.3); margin-top:6px; }
.coords .c{ display:grid; grid-template-columns:108px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid rgba(120,92,48,.22); }
.coords .c .k{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.coords .c a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--wood); }

/* infos / colophon */
.legal{ display:grid; grid-template-columns:auto 1fr; gap:12px 24px; }
.legal dt{ font-family:var(--f-label); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--wood-deep); }
.legal dd{ margin:0; font-size:16px; color:var(--ink); }
.legal dd .ph2{ color:var(--ink-faint); font-style:italic; }

/* footer */
.foot{ text-align:center; padding:30px 0 6px; color:rgba(246,236,212,.7); }
.foot .logo{ width:160px; margin:0 auto 12px; opacity:.92; }
.foot .tl{ font-family:var(--f-hand); font-size:24px; color:rgba(246,236,212,.92); }
.foot .base{ font-family:var(--f-label); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:14px;
  color:rgba(246,236,212,.5); }

/* reveal */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

#tweaks-root{ position:fixed; z-index:90; }