:root{
  /* échelle kaki — identique à app.forestrangers.lu */
  --k900:#1c1f14; --k800:#252a1a; --k700:#2f3520; --k600:#3d4429;
  --kaki:#1c1f14; --orange:#ff5f1f; --orange-deep:#ff5f1f; --light:#eceee6;
  --radius:10px; --radius-lg:14px;
  --measure:34rem; --shell:74rem;
  /* mode jour */
  --paper:#f4f5f0; --paper-2:#eef0e8; --card:#ffffff;
  --ink:#1c1f14; --ink-soft:rgba(28,31,20,.55); --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14);
  --inv-bg:#1c1f14; --inv-ink:#eceee6;
}
html.dark{
  --paper:#1c1f14; --paper-2:#2f3520; --card:#252a1a;
  --ink:#eceee6; --ink-soft:rgba(236,238,230,.5); --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --inv-bg:#252a1a; --inv-ink:#eceee6;
  --orange-deep:#ff7a3d;
}
html{color-scheme:light}
html.dark{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif; font-size:17px; line-height:1.62;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.shell{width:100%; max-width:var(--shell); margin:0 auto; padding:0 1.4rem}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--kaki); color:#fff; padding:.6rem 1rem}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

h1,h2,h3,.num{font-family:'Oswald',Impact,sans-serif; font-weight:500; letter-spacing:.01em; line-height:1.05}
h1{font-size:clamp(2.4rem,7vw,4.1rem); margin:0 0 1rem}
h2{font-size:clamp(1.7rem,4vw,2.5rem); margin:0 0 .8rem}
h3{font-size:1.22rem; margin:0 0 .45rem}
p{margin:0 0 1rem; max-width:var(--measure)}
.lede{font-size:1.16rem; color:var(--ink-soft)}
.sign{font-family:'Oswald',sans-serif; letter-spacing:.06em; margin-top:1.8rem; line-height:1.5}
.sign span{font-family:inherit; font-size:.86rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft)}

/* ---- masthead ---- */
.masthead{position:sticky; top:0; z-index:40; background:var(--card); color:var(--ink);
  border-bottom:1px solid var(--line)}
html.dark .masthead{background:var(--k900); color:var(--light); border-bottom:1px solid rgba(236,238,230,.14)}
.masthead-in{display:flex; align-items:center; gap:1rem; min-height:66px}
.brand{order:1; display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto}
.brand-name{font-family:'Norwester','Oswald',sans-serif; font-size:1.34rem; letter-spacing:.04em}
.brand-name em{font-style:normal; color:var(--orange)}
.brand-name{color:#3d4429}
html.dark .brand-name{color:var(--light)}
.nav{order:2; display:flex; align-items:center; gap:1.35rem}
.nav a{text-decoration:none; font-size:.94rem; color:inherit; opacity:.75; padding:.3rem 0}
.nav a:hover,.nav a[aria-current]{opacity:1; box-shadow:inset 0 -2px 0 var(--orange)}
.nav-portal{border:1px solid var(--line2); border-radius:var(--radius); padding:.42rem .8rem!important; opacity:1!important}
html.dark .nav-portal{border-color:rgba(236,238,230,.35)}
.nav-portal:hover{background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:none!important}
.langs{display:flex; gap:.15rem; font-size:.78rem; margin-left:.3rem}
.langs a{opacity:.5; padding:.2rem .3rem}
.langs a[aria-current]{opacity:1; color:var(--orange)}
.masthead-in{position:relative}
.theme-btn{order:3; background:none; border:1px solid var(--line2); border-radius:8px; color:inherit;
  width:34px; height:34px; display:grid; place-items:center; cursor:pointer; padding:0; flex-shrink:0}
.theme-btn:hover{border-color:var(--orange); color:var(--orange)}
.theme-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.theme-btn .moon{display:none}
html.dark .theme-btn .sun{display:none}
html.dark .theme-btn .moon{display:block}
html.dark .theme-btn{border-color:rgba(236,238,230,.3)}
.burger{order:4; display:none; background:none; border:0; padding:.6rem; cursor:pointer}
.burger span{display:block; width:23px; height:2px; background:currentColor; margin:5px 0; transition:transform .2s}

/* ---- hero ---- */
.hero{background:var(--kaki); color:var(--light); display:grid;
  grid-template-columns:minmax(0,46fr) minmax(0,54fr); align-items:stretch}
.hero-txt{display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.4rem,5vw,4rem) clamp(1.4rem,4vw,3.4rem);
  margin-left:auto; width:100%; max-width:calc(var(--shell) * .46)}
.hero-txt h1{font-size:clamp(1.9rem,3.3vw,3rem); max-width:14ch; margin-bottom:.55rem}
.baseline{font-family:'Oswald',sans-serif; font-size:.98rem; letter-spacing:.14em;
  color:var(--orange); margin-bottom:1.1rem}
.hero-txt .baseline{color:var(--orange)}
.hero-txt h1::before{content:""; display:block; width:52px; height:4px;
  background:var(--orange); border-radius:2px; margin-bottom:1.1rem}
.hero--page .hero-media{min-height:clamp(280px,34vw,430px)}
.foot .baseline{font-size:.86rem; margin:.5rem 0 0}
.hero-txt p{max-width:32ch; font-size:1.02rem; color:rgba(236,238,230,.82); margin-bottom:1.4rem}
.hero-media{position:relative; min-height:clamp(320px,48vw,540px)}
.hero-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%}
.hero--page .hero-txt h1{font-size:clamp(1.8rem,3vw,2.7rem); max-width:16ch}

.btns{display:flex; flex-wrap:wrap; gap:.7rem}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:.97rem;
  padding:.78rem 1.4rem; border-radius:var(--radius); background:var(--orange); color:#fff; border:1px solid var(--orange)}
.btn:hover{background:var(--orange-deep); border-color:var(--orange-deep)}
.btn-ghost{background:transparent; color:inherit; border-color:currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.12); border-color:currentColor}

/* ---- balise de sentier : marqueur de section ---- */
section{padding:clamp(2.8rem,6vw,4.6rem) 0}
.blaze{display:flex; align-items:center; gap:.7rem; margin-bottom:1.5rem}
.blaze::before{content:""; width:16px; height:16px; background:var(--orange);
  clip-path:polygon(50% 0,100% 38%,80% 100%,20% 100%,0 38%)}
.blaze span{font-family:'Oswald',sans-serif; font-size:.86rem; letter-spacing:.1em; color:var(--ink-soft)}
.inverse .blaze span{color:rgba(236,238,230,.65)}

.inverse{background:var(--inv-bg); color:var(--inv-ink)}
.inverse p{color:rgba(236,238,230,.84)}
html.dark .inverse{border-block:1px solid rgba(236,238,230,.14)}
.tint{background:var(--paper-2)}

/* ---- chiffres clés ---- */
.facts{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border-block:1px solid var(--line)}
.fact{background:var(--paper); padding:1.4rem 1.2rem}
html.dark .facts{background:var(--line)}
.fact b{display:block; font-family:'Oswald',sans-serif; font-size:1.85rem; color:var(--orange-deep)}
.fact span{font-size:.9rem; color:var(--ink-soft)}

/* ---- services ---- */
.svc{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.svc article{display:flex; flex-direction:column; border-top:2px solid var(--kaki); padding-top:1rem}
.svc p{flex:1}
.price{font-family:'Oswald',sans-serif; font-size:1.5rem; color:var(--orange-deep); margin:.2rem 0 .6rem}
.tag{color:var(--orange-deep); white-space:nowrap}
.lede strong{color:var(--orange-deep); font-weight:500}
.checks li::before{background:var(--orange)}
h2 .tag{font-family:inherit}
.price small{font-family:'Instrument Sans',sans-serif; font-size:.82rem; color:var(--ink-soft); letter-spacing:0}
.more{text-decoration:none; font-weight:600; font-size:.94rem; box-shadow:inset 0 -2px 0 var(--orange); align-self:flex-start}

/* ---- points ---- */
.points{display:grid; grid-template-columns:repeat(2,1fr); gap:2rem 2.6rem}
.points h3{color:var(--orange)}
.inverse .points h3{color:var(--orange)}

/* ---- bande photo ---- */
.band{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--kaki)}
.band img{width:100%; height:clamp(220px,30vw,380px); object-fit:cover}

/* ---- listes ---- */
.checks{list-style:none; padding:0; margin:0; max-width:var(--measure)}
.checks li{padding:.5rem 0 .5rem 1.5rem; border-bottom:1px solid var(--line); position:relative}
.checks li::before{content:""; position:absolute; left:0; top:1.05rem; width:7px; height:7px;
  background:var(--orange); border-radius:50%}
.inverse .checks li{border-color:rgba(236,238,230,.18)}

/* ---- tableaux ---- */
.tbl{width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.97rem}
.tbl caption{text-align:left; font-family:'Oswald',sans-serif; font-size:1.05rem; padding-bottom:.5rem}
.tbl th,.tbl td{text-align:left; padding:.72rem .6rem; border-bottom:1px solid var(--line)}
.tbl thead th{font-family:'Oswald',sans-serif; font-weight:400; font-size:.9rem; letter-spacing:.05em;
  border-bottom:2px solid var(--kaki)}
.tbl td+td,.tbl th+th{text-align:right; white-space:nowrap}

/* ---- secteurs ---- */
.zones{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem}
.zone{border:1px solid var(--line); padding:1.4rem; background:var(--card); border-radius:var(--radius-lg)}
.zone h3{color:var(--orange-deep)}
.zone ul{list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem}
.zone li{font-size:.9rem; background:var(--paper-2); padding:.25rem .6rem; border-radius:6px}
.zone .supp{margin-top:.9rem; font-size:.9rem; color:var(--ink-soft)}

/* ---- étapes ---- */
.steps{counter-reset:s; list-style:none; padding:0; margin:0; max-width:46rem}
.steps li{counter-increment:s; position:relative; padding:0 0 1.7rem 3.1rem; border-left:2px solid var(--line); margin-left:.8rem}
.steps li:last-child{border-left-color:transparent; padding-bottom:0}
.steps li::before{content:counter(s); position:absolute; left:-1rem; top:-.2rem; width:2rem; height:2rem;
  background:var(--kaki); color:var(--light); border-radius:50%; display:grid; place-items:center;
  font-family:'Oswald',sans-serif; font-size:.95rem}
.steps h3{margin-bottom:.3rem}

/* ---- formulaire ---- */
.form{max-width:40rem}
.row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.fld{margin-bottom:1rem}
.fld label{display:block; font-size:.9rem; font-weight:600; margin-bottom:.3rem}
.fld input,.fld select,.fld textarea{width:100%; font:inherit; font-size:1rem; padding:.7rem .8rem;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:inherit}
.fld textarea{min-height:7rem; resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--orange)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; margin:1rem 0}
.consent input{width:auto; margin-top:.25rem}
.formnote{font-size:.88rem; color:var(--ink-soft)}
.alert{padding:.9rem 1rem; border-left:3px solid var(--orange); background:var(--paper-2); border-radius:var(--radius); margin-bottom:1rem}
.alert[hidden]{display:none}

/* ---- prose (cgv, mentions) ---- */
.prose{max-width:42rem}
.prose h2{margin-top:2.2rem}
.prose h3{margin-top:1.4rem}
.prose p,.prose li{max-width:none}

/* ---- footer ---- */
.foot{background:var(--kaki); color:var(--light); padding:3rem 0 1.4rem; margin-top:0}
.foot-in{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
.foot-brand{display:flex; gap:1rem; align-items:flex-start}
.foot h2{font-size:.95rem; letter-spacing:.08em; color:var(--orange)}
.foot p{font-size:.93rem; color:rgba(236,238,230,.78); max-width:28ch}
.foot a{text-decoration:none}
.foot a:hover{color:var(--orange)}
.foot-legal{border-top:1px solid rgba(236,238,230,.14); margin-top:2.2rem; padding-top:1.1rem}
.foot-legal p{font-size:.82rem; color:rgba(236,238,230,.5); max-width:none}

/* ---- responsive ---- */
@media (max-width:900px){
  .svc,.points,.zones,.foot-in{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:1fr}
  .burger{display:block}
  .nav{position:fixed; inset:66px 0 auto 0; background:var(--card); flex-direction:column;
    align-items:flex-start; gap:.2rem; padding:1rem 1.4rem 1.6rem; display:none;
    border-top:1px solid var(--line)}
  html.dark .nav{background:var(--k900)}
  .nav.open{display:flex}
  .nav a{padding:.6rem 0; font-size:1.05rem}
  .nav-portal{margin-top:.6rem}
  .band img{height:230px}
  .hero{grid-template-columns:1fr}
  .hero-media{order:-1; min-height:0; aspect-ratio:4/3}
  .hero-media img{position:static; height:100%}
  .hero-txt{max-width:none; margin:0; padding:1.8rem 1.4rem 2.2rem}
  .hero-txt h1{font-size:1.9rem; max-width:14ch}
  .hero-txt p{font-size:.98rem; max-width:34ch}
  .btn{padding:.7rem 1rem; font-size:.92rem}
  .facts{border-block:0}
  .fact{padding:1.1rem .9rem}
  .fact b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* citation mise en avant (à propos) */
.pull{margin:1.8rem 0 .4rem; padding:.2rem 0 .2rem 1.1rem; border-left:3px solid var(--orange); font-family:'Oswald',sans-serif; font-size:1.7rem; line-height:1.25; color:var(--ink)}

/* ---- accueil : l'idée ---- */
.idea{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.4rem); align-items:center}
.idea-media{aspect-ratio:9/10; border-radius:var(--radius); overflow:hidden}
.idea-media img{width:100%; height:100%; object-fit:cover; object-position:60% 50%}
@media (max-width:900px){ .idea{grid-template-columns:1fr} .idea-media{aspect-ratio:4/3} }

/* ---- espace client ---- */
.hero-media--app{background:var(--paper-2)}
.hero-media--app img{object-fit:contain; object-position:50% 50%; padding:clamp(1rem,3vw,2.4rem); filter:drop-shadow(0 18px 28px rgba(0,0,0,.16))}
.app-shot img{width:100%; height:auto; display:block; filter:drop-shadow(0 18px 28px rgba(0,0,0,.16))}
.screen{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,6vw,5rem); align-items:center}
.screen--rev .screen-img{order:2}
.screen-img img{display:block; width:100%; max-width:320px; height:auto; margin-inline:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.14))}
.screen-txt h2{max-width:18ch}
.screen-txt .lede{max-width:42ch}
@media (max-width:900px){
  .screen{grid-template-columns:1fr}
  .screen--rev .screen-img{order:0}
  .screen-img img{max-width:260px}
  .app-shot{margin-top:1.4rem}
}

/* ---- contact ---- */
.contact{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4.4rem); align-items:start}
.contact-aside{position:sticky; top:6rem; background:var(--paper-2); border-radius:var(--radius-lg); padding:1.4rem 1.4rem 1.6rem}
.contact-photo{aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; margin-bottom:1.3rem}
.contact-photo img{width:100%; height:100%; object-fit:cover; object-position:30% 50%}
.contact-aside h2{font-size:1.5rem; margin-bottom:1rem}
.next{list-style:none; padding:0; margin:0 0 1.2rem; counter-reset:n}
.next li{counter-increment:n; position:relative; padding-left:2.2rem; margin-bottom:.9rem; font-size:.96rem}
.next li::before{content:counter(n); position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--orange); color:#fff; font-family:'Oswald',sans-serif; font-size:.85rem; display:grid; place-items:center}
.contact-gift{padding:.8rem 1rem; border-left:3px solid var(--orange); background:var(--card); border-radius:var(--radius); font-size:.95rem}
.contact-direct{margin:1.2rem 0 0; font-family:'Oswald',sans-serif; font-size:1.2rem; line-height:1.5}
.contact-direct a{text-decoration:none}
.contact-direct span{font-family:'Instrument Sans',sans-serif; font-size:.88rem; color:var(--ink-soft)}
.contact .form{max-width:none}
@media (max-width:900px){ .contact{grid-template-columns:1fr} .contact-aside{position:static} }