:root{--brun:#2C2417;--brun2:#3A3021;--or:#BC9D64;--or-fonce:#7D5F2A;--beige:#EDE3D2;--creme:#F8F3E9;--encre:#2C2417;--gris:#6B5F4D;--trait:rgba(44,36,23,.16)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--creme);color:var(--encre);font-family:"Figtree",system-ui,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,.logo{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.7rem,8.4vw,6rem)}
h2{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h3{font-size:1.65rem;line-height:1.1}
p{margin:0 0 1em;max-width:62ch}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}

/* ligne d'horizon : progression de lecture */
.horizon{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--or);transform-origin:0 50%;transform:scaleX(0);z-index:60}

header.top{position:sticky;top:0;z-index:50;background:var(--brun);color:var(--creme)}
.bar{display:flex;align-items:center;gap:20px;min-height:68px}
.logo{font-size:1.9rem;text-transform:uppercase;text-decoration:none;color:var(--or);letter-spacing:.01em}
nav.main{margin-left:auto;display:flex;gap:20px;align-items:center}
nav.main a{text-decoration:none;white-space:nowrap;font-size:.98rem;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current=page]{border-color:var(--or)}
.btn{display:inline-block;background:var(--or);color:var(--brun);font-weight:700;text-decoration:none;padding:14px 24px;border-radius:999px;border:2px solid var(--or);font-size:1.02rem;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.btn:hover{background:transparent;color:var(--or)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:var(--creme);color:var(--brun);border-color:var(--creme)}
.clair .btn:hover{color:var(--or-fonce);border-color:var(--or-fonce)}
.clair .btn.ghost:hover{background:var(--brun);color:var(--creme);border-color:var(--brun)}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--or);color:var(--or);border-radius:999px;padding:8px 16px;font:inherit;font-weight:700}
@media(max-width:1180px){
 .burger{display:block}
 nav.main{display:none;position:absolute;left:0;right:0;top:68px;background:var(--brun);flex-direction:column;align-items:flex-start;padding:10px 20px 24px;gap:6px;border-top:1px solid rgba(188,157,100,.3)}
 nav.main.open{display:flex}
 nav.main a{font-size:1.15rem;padding:10px 0;width:100%}
}

.hero{background:var(--brun);color:var(--creme);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;padding-block:72px 0}
.hero h1{color:var(--creme)}
.hero h1 span{display:block;color:var(--or)}
.hero .lead{font-size:1.2rem;margin:26px 0 30px;max-width:46ch;color:#E9DFCB}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:72px}
.hero figure{margin:0;align-self:stretch;min-height:420px;position:relative}
.hero figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:220px 220px 0 0}
.hero-line{height:2px;background:var(--or);transform-origin:0 50%;animation:trace 1.4s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr;padding-top:48px;gap:0}.hero .actions{margin-bottom:40px}.hero figure{min-height:300px}}

section{padding-block:84px}
section.fonce{background:var(--brun);color:var(--creme)}
section.beige{background:var(--beige)}
.intro{font-size:1.15rem;color:var(--gris);margin-top:16px}
.fonce .intro{color:#D9CDB6}

/* sélecteur de besoin */
.choix{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.choix button{font:inherit;font-weight:600;font-size:1.05rem;padding:13px 22px;border-radius:999px;border:2px solid var(--brun);background:transparent;color:var(--brun);cursor:pointer}
.choix button[aria-selected=true]{background:var(--brun);color:var(--or)}
.panneau{margin-top:22px;display:grid;grid-template-columns:1fr 1.1fr;background:var(--creme);border-radius:28px;overflow:hidden;min-height:340px}
.panneau img{width:100%;height:100%;object-fit:cover;min-height:240px}
.panneau .txt{padding:36px;align-self:center}.panneau h3{margin-bottom:12px}.panneau img{max-height:440px}
.panneau ul{padding-left:1.1em;margin:0 0 22px}
.panneau li{margin-bottom:6px}
.panneau .actions{display:flex;flex-wrap:wrap;gap:10px}
.panneau[data-anim] .txt{animation:glisse .35s ease both}
@keyframes glisse{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(max-width:760px){.panneau{grid-template-columns:1fr}.panneau img{max-height:230px}.panneau .txt{padding:26px 22px}}

/* étapes : la ligne se trace au défilement */
.etapes{list-style:none;padding:0;margin:44px 0 0;position:relative;display:grid;gap:34px}
.etapes::before{content:"";position:absolute;left:23px;top:8px;bottom:8px;width:2px;background:rgba(188,157,100,.25)}
.etapes .fil{position:absolute;left:23px;top:8px;width:2px;height:0;background:var(--or)}
.etapes li{display:grid;grid-template-columns:48px 1fr;gap:22px;position:relative}
.etapes .n{width:48px;height:48px;border-radius:50%;background:var(--brun);border:2px solid var(--or);color:var(--or);display:grid;place-items:center;font-family:"Barlow Condensed";font-weight:700;font-size:1.4rem;transition:background .3s,color .3s}
.etapes li.vu .n{background:var(--or);color:var(--brun)}
.etapes p{color:#D9CDB6;margin:6px 0 0}

.deux{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.deux img{border-radius:24px;aspect-ratio:4/5;object-fit:cover;width:100%}
@media(max-width:820px){.deux{grid-template-columns:1fr;gap:28px}}

.pasca{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:36px;border:2px solid var(--brun);border-radius:24px;overflow:hidden}
.pasca>div{padding:30px}
.pasca .non{background:transparent}
.pasca .oui{background:var(--brun);color:var(--creme)}
.pasca .oui h3{color:var(--or)}
.pasca p{margin:10px 0 0}
@media(max-width:760px){.pasca{grid-template-columns:1fr}}

.liste{display:grid;gap:0;margin-top:34px;border-top:1px solid var(--trait)}
.liste article{display:grid;grid-template-columns:1fr 2fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--trait)}
.liste p{margin:0;color:var(--gris)}
@media(max-width:760px){.liste article{grid-template-columns:1fr;gap:8px}}

.reals{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}.reals img{aspect-ratio:4/3;object-fit:cover;border-radius:18px;width:100%}.reals .logo-box{aspect-ratio:4/3;background:#fff;border-radius:18px;display:grid;place-items:center;border:1px solid var(--trait)}.reals .logo-box img{width:78%;aspect-ratio:auto;object-fit:contain;border-radius:0}.reals h3{margin:16px 0 8px}.reals p{color:var(--gris);font-size:1rem}@media(max-width:820px){.reals{grid-template-columns:1fr}}
.actus{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.actus img{aspect-ratio:4/3;object-fit:cover;border-radius:18px;margin-bottom:16px;width:100%}
.actus .tag{font-size:.9rem;font-weight:700;color:var(--or-fonce)}
.actus h3{margin:4px 0 8px}
.actus p{font-size:1rem;color:var(--gris)}
@media(max-width:820px){.actus{grid-template-columns:1fr}}

details{border-bottom:1px solid var(--trait);padding:20px 0}
details summary{font-weight:700;font-size:1.15rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::after{content:"+";font-family:"Barlow Condensed";font-size:1.8rem;line-height:.8;color:var(--or-fonce)}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--gris)}

.service{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center;padding-block:64px;border-bottom:1px solid var(--trait)}
.service:nth-of-type(even) img{order:2}
.service img{border-radius:24px;aspect-ratio:4/5;object-fit:cover;width:100%;max-height:560px}
.service ul{padding-left:1.1em}
@media(max-width:820px){.service{grid-template-columns:1fr;gap:24px;padding-block:44px}.service:nth-of-type(even) img{order:0}.service img{aspect-ratio:4/3}}

.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:36px 0}
.chiffres b{display:block;font-family:"Barlow Condensed";font-size:clamp(2.6rem,7vw,4.2rem);line-height:1;color:var(--or)}
@media(max-width:700px){.chiffres{grid-template-columns:1fr}}

/* contact */
#contact{background:var(--brun);color:var(--creme)}
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
.contact h2{color:var(--or)}#contact .intro{color:#E9DFCB}
.coord{margin-top:26px;font-size:1.08rem}
.coord a{display:block;text-decoration:none;font-weight:700;padding:5px 0}
.coord a:hover{color:var(--or)}
form.f{background:var(--creme);color:var(--encre);border-radius:28px;padding:34px;display:grid;gap:18px}
form.f label{font-weight:700;display:grid;gap:6px;font-size:1rem}
form.f input[type=text],form.f textarea{font:inherit;padding:14px 16px;border:2px solid rgba(44,36,23,.25);border-radius:12px;background:#fff;color:var(--encre);width:100%}
form.f input:focus,form.f textarea:focus{border-color:var(--or-fonce);outline:none}
form.f fieldset{border:0;padding:0;margin:0}
form.f legend{font-weight:700;margin-bottom:8px;padding:0}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios label{display:block;font-weight:600}
.radios input{position:absolute;opacity:0}
.radios span{display:block;padding:11px 18px;border:2px solid var(--brun);border-radius:999px;cursor:pointer}
.radios input:checked+span{background:var(--brun);color:var(--or)}
.radios input:focus-visible+span{outline:3px solid var(--or);outline-offset:2px}
form.f .btn{justify-self:start;border-color:var(--brun);background:var(--brun);color:var(--or)}
form.f .btn:hover{background:transparent;color:var(--brun)}
.hp{position:absolute;left:-9999px}
.note{font-size:.92rem;color:var(--gris);margin:0}
.merci{background:var(--creme);color:var(--encre);border-radius:28px;padding:40px}
@media(max-width:860px){.contact{grid-template-columns:1fr;gap:30px}form.f{padding:24px 20px}}

footer{background:#231C11;color:#CFC3AC;padding:40px 0 96px;font-size:.98rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
footer .logo{font-size:1.6rem}
footer button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
footer .slogan{margin:0 auto 0 0;color:var(--or)}
dialog{border:0;border-radius:22px;padding:34px;max-width:min(560px,92vw);background:var(--creme);color:var(--encre)}
dialog::backdrop{background:rgba(20,15,8,.7)}
dialog h3{margin-bottom:14px}
dialog form{margin-top:18px}

.collant{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;text-align:center;box-shadow:0 8px 24px rgba(20,15,8,.35)}
@media(max-width:820px){.collant.visible{display:block}}

.entete{background:var(--brun);color:var(--creme);padding-block:72px 64px}
.entete h1{font-size:clamp(2.5rem,7vw,4.8rem);max-width:16ch}
.entete p{font-size:1.18rem;color:#E9DFCB;margin-top:22px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}