:root{
--paper:#FFFFFF;--cream:#FCFAF6;--night:#193A5E;--night-deep:#0E243E;--gold:#9D876A;--gold-deep:#7A6748;--gold-light:#D3C09E;--ink:#193A5E;--muted:#4A6280;--line:#E5DDCF;
--serif:"Playfair Display",Georgia,serif;--sans:"Open Sans",system-ui,sans-serif;--script:"Dancing Script","Brush Script MT",cursive;
--flowers:url(https://www.brouillon.lunawaya.com/wp-content/uploads/2026/10/lw-01-dd6ddf0e.jpg);--feather:url(https://www.brouillon.lunawaya.com/wp-content/uploads/2026/10/lw-02-887299c0.jpg);--wolfbg:url(https://www.brouillon.lunawaya.com/wp-content/uploads/2026/10/lw-03-842bb506.jpg);
color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.7 var(--sans)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.2;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(34px,5.4vw,54px)}
h2{font-size:clamp(25px,3.4vw,35px);text-transform:uppercase;letter-spacing:.03em}
h3{font-size:23px}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));position:relative;z-index:1}
section{padding-block:76px;position:relative}
.script{font-family:var(--script);font-weight:500;font-size:clamp(26px,4vw,34px);line-height:1.2;color:var(--gold-deep);margin:0}
.lead{font-weight:300;font-size:20px;color:var(--muted);max-width:36em}
.center{text-align:center}
.center .lead{margin-inline:auto}
.btn{display:inline-block;padding:14px 28px;border-radius:2px;background:var(--gold-deep);color:#fff;text-decoration:none;font:600 16px var(--sans);border:1px solid var(--gold-deep);cursor:pointer}
.btn:hover{background:#5F5037;border-color:#5F5037}
.btn.line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.pale{background:#fff;color:var(--night);border-color:#fff}
.btn.pale:hover{background:var(--cream)}
a:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tag-demo{background:var(--night-deep);color:#fff;text-align:center;font-size:13px;padding:7px 12px}
header{background:var(--paper);border-bottom:1px solid var(--line)}
header .wrap{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:"l c r";align-items:center;gap:16px;padding-block:14px}
.nav-l{grid-area:l;justify-self:start}
.nav-r{grid-area:r;justify-self:end}
.logo{grid-area:c}
nav{display:flex;gap:30px;font-size:16px}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{border-color:var(--gold)}
.logo img{display:block;width:340px;max-width:100%;height:auto}
@media (max-width:820px){header .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}.logo{order:-1;flex-basis:100%;display:flex;justify-content:center}.nav-l,.nav-r{display:contents}.logo img{width:280px}}
.hero{background:var(--paper);padding-block:40px 76px}
.hero .split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero .wolf{position:relative;margin:0 auto;width:100%;max-width:420px;aspect-ratio:var(--ar)}
.hero .wolf>img{display:block;width:100%;height:100%}
.hero .wolf>img.st{position:absolute;height:auto;transform:translate(-50%,-50%) scale(0);transform-origin:center;animation:twinkle 1.335s ease-in-out infinite backwards;will-change:transform}
@keyframes twinkle{0%,100%{transform:translate(-50%,-50%) scale(0)}50%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.hero .wolf>img.st{animation:none;transform:translate(-50%,-50%) scale(1)}}
.hero .script{margin:.3em 0 1.4em}
.cta{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:820px){.hero .split{grid-template-columns:minmax(0,1fr);text-align:center}.cta{justify-content:center}.hero .lead{margin-inline:auto}.hero .wolf{max-width:270px;order:-1}}
.rule{height:1px;background:var(--gold);margin:0 auto 28px;max-width:140px}
.sec-head{text-align:center;margin-bottom:38px}
.sec-head .lead{margin-inline:auto}
.steps .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:34px}
.step{text-align:center;min-width:0}
.step b{display:block;font:400 44px/1 var(--serif);color:var(--gold);margin-bottom:10px}
.formules{background:var(--feather) center/cover no-repeat}
.formules::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:2px;padding:18px 22px 28px;display:flex;flex-direction:column;min-width:0}
.card.pick{border:2px solid var(--gold);position:relative}
.badge{position:absolute;top:-14px;left:22px;background:var(--gold-deep);color:#fff;font-size:13px;font-weight:600;padding:3px 12px;border-radius:2px}
.shot{aspect-ratio:4/3;max-width:100%;overflow:hidden;margin-bottom:18px;background:#EFE8DB}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.shot.ph{display:grid;place-items:center;border:2px dashed var(--gold);color:var(--gold-deep);font-size:15px;text-align:center;padding:12px;background:var(--cream)}
.tagline{font-style:italic;color:var(--muted);margin-bottom:.4em}
.price{font:500 28px var(--serif);margin:.1em 0 .7em}
ul.inc{list-style:none;padding:0;margin:0 0 24px;flex:1}
ul.inc li{padding-left:26px;position:relative;margin-bottom:.5em;font-size:17px}
ul.inc li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.note{font-size:15px;color:var(--muted);margin:24px 0 0;text-align:center}
.todo{font-size:13px;border:1px dashed var(--gold-deep);color:var(--gold-deep);border-radius:2px;padding:1px 8px;white-space:nowrap}
.band{background:var(--night) var(--wolfbg) right center/cover no-repeat;color:#fff;min-height:440px;display:flex;align-items:center}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,36,62,.86) 0%,rgba(14,36,62,.6) 48%,rgba(14,36,62,0) 78%)}
@media (max-width:760px){.band::before{background:rgba(14,36,62,.74)}}
.band .wrap{width:100%}
.band .copy{max-width:520px}
.band h2{color:#fff}
.band p{color:#EEF2F7}
.band .script{color:var(--gold-light);margin:.2em 0 1.2em}
.about .split{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:48px;align-items:center}
.frame{border:2px solid var(--gold);padding:10px;background:#fff;max-width:250px;width:100%;margin-inline:auto}
.frame img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%;filter:grayscale(1) contrast(1.06)}
@media (max-width:760px){.about .split{grid-template-columns:minmax(0,1fr);gap:32px}}
.avis{background:var(--night);color:#fff;text-align:center}
.avis h2{color:var(--gold-light)}
.avis blockquote{margin:0 auto;max-width:760px}
.avis blockquote p{font:400 clamp(21px,2.6vw,26px)/1.55 var(--serif);color:#fff}
.avis cite{font:400 17px var(--sans);font-style:normal;color:var(--gold-light)}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font:500 21px var(--serif);list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"✦";color:var(--gold);margin-right:12px;display:inline-block;transition:transform .2s}
details[open] summary::before{transform:rotate(45deg)}
details p{margin:.9em 0 0;color:var(--muted)}
.faq .wrap{max-width:820px}
.contact{background:var(--cream) var(--flowers) center/cover no-repeat}
.contact .box{background:rgba(255,255,255,.96);border:1px solid var(--line);max-width:660px;margin:0 auto;padding:40px 34px;text-align:center}
.contact form{display:grid;gap:16px;text-align:left;margin-top:26px}
label{display:grid;gap:6px;font-size:16px;font-weight:600}
input,textarea{font:400 17px var(--sans);padding:13px;border:1px solid #CFC5B2;border-radius:2px;background:#fff;color:var(--ink);width:100%}
.coord{display:flex;gap:10px 30px;flex-wrap:wrap;justify-content:center;margin-top:24px;font-size:18px}
footer{background:var(--night);color:#fff;padding-block:48px 40px;text-align:center}
footer .wm{font:400 36px var(--serif)}
footer .script{color:var(--gold-light);margin-top:4px}
footer p{font-size:15px;margin:1em 0 0;color:#D5DEE9}
footer a{color:#fff}
@media (prefers-reduced-motion:reduce){summary::before{transition:none}}
header{position:relative;z-index:40}
.dd{position:relative}
.dd-btn{font:inherit;color:inherit;background:none;border:0;border-bottom:2px solid transparent;padding:6px 0;cursor:pointer}
.dd-btn:hover,.dd-btn:focus-visible,.dd-btn.on{border-color:var(--gold)}
.dd-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sub{display:none;position:absolute;top:100%;right:0;min-width:210px;margin:6px 0 0;padding:8px 0;list-style:none;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(14,36,62,.12);z-index:50}
.dd.open .sub,.dd:hover .sub{display:block}
.sub a{display:block;padding:10px 18px;border:0;white-space:nowrap}
.sub a:hover,.sub a:focus-visible,.sub a[aria-current]{background:var(--cream)}
@media (max-width:820px){.sub{right:auto;left:50%;transform:translateX(-50%)}}
