:root{
  --bg:#EDEBDF; --bg-2:#E4E1D2; --olive:#454833; --olive-dark:#33351f;
  --ink:#211C15; --ink-soft:#5B5A4C; --dark:#1B140F; --cream:#F3EFE4;
  --line:#d8d4c2;
  font-family:'Inter',sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:72px;}
body{background:var(--bg); color:var(--ink); overflow-x:hidden; line-height:1.65;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:2px solid var(--olive); outline-offset:3px;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; font-weight:600; color:var(--olive);}
.script{font-family:'Alex Brush',cursive; font-weight:400;}
.cond{font-family:'Oswald',sans-serif; text-transform:uppercase;}
.italic-serif{font-family:'EB Garamond',serif; font-style:italic;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Texte à compléter par le client : surligné pour être repéré, à retirer une fois rempli */
.todo{background:#f3e3a6; color:#5a4a12; padding:0 .3em; border-radius:2px; font-style:normal;}

/* HEADER */
.site-header{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.site-header nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px;}
.brand img{height:32px; width:auto;}
.brand span{font-family:'Alex Brush',cursive; font-size:1.5rem; color:var(--ink);}
.navlinks{display:flex; align-items:center; gap:26px; font-size:.85rem;}
.navlinks a:hover{color:var(--olive);}
.social-ico{display:flex; gap:10px; align-items:center;}
.social-ico a{width:32px; height:32px; border:1px solid var(--ink); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;}
.social-ico a:hover{background:var(--ink); color:var(--bg);}
.social-ico svg, .social-row svg{width:15px; height:15px;}
.cta-btn{border:1px solid var(--ink); padding:9px 20px; border-radius:2px; font-size:.8rem; letter-spacing:.02em; transition:.25s;}
.cta-btn:hover{background:var(--ink); color:var(--bg);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:22px; height:1.5px; background:var(--ink);}
.mobile-menu{display:none; flex-direction:column; overflow:hidden; max-height:0; transition:max-height .3s ease; padding:0 24px;}
.mobile-menu.open{max-height:560px; padding:6px 24px 20px;}
.mobile-menu a{padding:11px 0; border-bottom:1px solid var(--line); font-size:.92rem;}
.mobile-menu .social-ico{padding-top:16px;}

/* HERO */
.hero{position:relative; min-height:100vh; background:var(--dark); color:var(--cream); overflow:hidden; display:flex; align-items:flex-end;}
.hero .bgphoto{position:absolute; inset:0; background:url('../assets/hero-fond.jpg') center/cover; opacity:.85;}
.hero .bgphoto::after{content:"";position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,7,4,.75), rgba(10,7,4,.25) 55%);}
.hero .monstera{position:absolute; right:-8%; top:2%; width:75%; max-width:1000px; height:auto; z-index:1; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));}
.hero-inner{position:relative; z-index:3; padding:140px 24px 90px; width:100%;}
.hero h1 .eyebrow{display:block; color:var(--cream); opacity:.75; margin-bottom:20px; font-family:'Inter',sans-serif; font-size:.72rem; line-height:1.6;}
.hero h1{font-size:clamp(3.4rem,10vw,7rem); line-height:.85; font-weight:400;}
.hero .studio-w{font-family:'Oswald',sans-serif; font-weight:700; text-transform:uppercase; color:#B9B3A3; opacity:.8; display:block; letter-spacing:-.02em;}
.hero .skissa-w{font-family:'Alex Brush',cursive; font-size:1.5em; color:var(--cream); display:block; margin-top:-.15em; margin-left:.3em;}
.hero p.tag{max-width:480px; margin:28px 0 40px; font-size:1.08rem; color:#D8D3C4;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.btn{display:inline-block; padding:14px 30px; border-radius:2px; font-size:.85rem; letter-spacing:.03em; transition:.25s; cursor:pointer; font-family:inherit;}
.btn-primary{background:var(--cream); color:var(--dark); border:1px solid var(--cream);}
.btn-primary:hover{background:var(--olive); border-color:var(--olive); color:var(--cream);}
.btn-outline{border:1px solid var(--cream); color:var(--cream); background:none;}
.btn-outline:hover{background:var(--cream); color:var(--dark);}
.btn-dark{background:var(--ink); color:var(--bg); border:1px solid var(--ink);}
.btn-dark:hover{background:var(--olive); border-color:var(--olive);}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}

section{padding:110px 0;}
.alt{background:var(--bg-2);}
.section-head{max-width:680px; margin-bottom:56px;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.6rem); margin-top:12px; font-weight:500; line-height:1.25;}
.section-head p{color:var(--ink-soft); margin-top:16px; font-size:1.02rem;}

/* STUDIO */
.persp-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:start;}
.persp-grid p{color:var(--ink-soft); margin-bottom:16px; font-size:1.03rem;}
.persp-grid strong{color:var(--ink); font-weight:500;}
.founder-card{background:var(--olive); padding:14px; border-radius:2px;}
.founder-card img{width:100%; height:auto; border-radius:1px; filter:sepia(6%);}
.founder-card figcaption{padding:18px 8px 8px; color:var(--cream); text-align:center; font-size:.95rem;}
.founder-card figcaption .script{font-size:1.2rem; display:block; color:var(--cream);}
.quote-block{margin-top:36px; display:flex; gap:16px; align-items:flex-start;}
.quote-block svg{flex:0 0 40px; color:var(--olive);}
.quote-block p{font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; line-height:1.5; color:var(--ink); font-weight:500;}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);}
.service-card{background:var(--bg); padding:42px 36px; position:relative; overflow:hidden;}
.service-card > *{position:relative; z-index:1;}
.service-card .num{color:var(--olive); font-family:'Oswald',sans-serif; font-size:.95rem; margin-bottom:14px; display:block;}
.service-card h3{font-size:1.35rem; margin-bottom:12px; font-weight:500;}
.service-card .intro{color:var(--ink-soft); font-size:.92rem; margin-bottom:18px; max-width:440px;}
.service-card ul{list-style:none; columns:2; gap:8px; font-size:.9rem; color:var(--ink-soft);}
.service-card li{margin-bottom:8px; break-inside:avoid;}
.service-card li::before{content:"— "; color:var(--olive);}
.service-card.has-bg::before, .service-card.has-bg3::before{content:""; position:absolute; inset:0; background-position:center; background-size:cover; opacity:.7; filter:contrast(1.35) brightness(.8); z-index:0;}
.service-card.has-bg::before{background-image:url('../assets/service-paysage.jpg');}
.service-card.has-bg3::before{background-image:url('../assets/service-3d.jpg');}
.service-card.has-bg::after, .service-card.has-bg3::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(237,235,223,.8), rgba(237,235,223,.25)); z-index:0;}
.service-card.has-bg1{padding-bottom:250px;}
.service-card.has-bg1::before{content:""; position:absolute; left:0; right:0; bottom:0; height:52%; background:url('../assets/service-interieur-plan.jpg') center/contain no-repeat; filter:contrast(1.6); mix-blend-mode:multiply; z-index:0;}
.service-card.has-bg ul, .service-card.has-bg1 ul, .service-card.has-bg3 ul,
.service-card.has-bg .intro, .service-card.has-bg3 .intro{color:#000; font-weight:500;}
.service-card.has-bg li::before, .service-card.has-bg1 li::before, .service-card.has-bg3 li::before{color:#000;}

/* PLACEHOLDER PHOTO (emplacement en attente de l'image définitive) */
.ph{position:relative; background:repeating-linear-gradient(135deg, var(--bg-2) 0 14px, #dedac9 14px 28px); border:1px dashed #b9b4a0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; color:var(--ink-soft); padding:20px; aspect-ratio:var(--ratio, 4/3); width:100%;}
.ph svg{width:30px; height:30px; stroke:currentColor; fill:none; stroke-width:1.4; opacity:.7;}
.ph .ph-lbl{font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600;}
.ph code{font-size:.72rem; background:rgba(255,255,255,.55); padding:2px 8px; border-radius:2px; color:var(--ink);}

/* PROJETS : cartes */
.proj-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.proj-card{display:block; background:var(--bg); transition:transform .3s;}
.proj-card:hover{transform:translateY(-4px);}
.proj-card .thumb{aspect-ratio:4/5; overflow:hidden; background:var(--bg-2);}
.proj-card .thumb img{width:100%; height:100%; object-fit:cover;}
.proj-card .thumb .ph{height:100%; aspect-ratio:auto; border:none;}
.proj-card .body{padding:18px 4px 6px;}
.proj-card h3{font-family:'Alex Brush',cursive; font-weight:400; font-size:2.1rem; line-height:1.1; color:var(--olive-dark);}
.proj-card p{font-size:.88rem; color:var(--ink-soft); margin-top:6px;}
.badge{display:inline-block; font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; font-weight:600; padding:4px 10px; border-radius:20px; border:1px solid var(--olive); color:var(--olive); margin-bottom:10px;}
.badge.live{background:var(--olive); color:var(--cream);}

/* PROJET : détail */
.project{padding:0 0 110px;}
.proj-hero{background:var(--bg-2);}
.proj-title{padding:70px 24px 20px; max-width:1180px; margin:0 auto;}
.proj-title .big{font-family:'Alex Brush',cursive; font-weight:400; font-size:clamp(3.5rem,9vw,6.5rem); color:var(--olive-dark); line-height:1;}
.proj-meta{display:flex; gap:28px; flex-wrap:wrap; margin-top:18px; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}
.proj-desc{max-width:720px; margin:0 auto; padding:22px 24px 60px; color:var(--ink-soft); font-size:1.05rem;}
.proj-desc p + p{margin-top:12px;}
.proj-feature{margin:40px auto 0; max-width:480px; width:100%; height:auto;}
.proj-feature.ph{max-width:760px; --ratio:16/9;}
.proj-full{width:100%; height:auto; display:block;}
.proj-grid2{display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:2px;}
.proj-grid2 img{width:100%; height:100%; object-fit:cover; display:block;}
.proj-grid2 img.contain{height:auto; object-fit:contain; background:var(--bg-2);}
.plans-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; background:var(--bg-2); padding:60px 24px; margin-top:40px;}
.plans-row figure{margin:0; text-align:center;}
.plans-row img{background:#EDEAdd; border:1px solid var(--line); height:auto; margin:0 auto;}
.plans-row figcaption{margin-top:12px; font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
.proj-note{max-width:640px; margin:40px auto 0; padding:0 24px; font-size:1.1rem; color:var(--ink-soft); font-style:italic; font-family:'EB Garamond',serif;}
.proj-dressing{margin-top:2px; max-height:500px; object-fit:cover;}

/* MÉTHODE */
.approach-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line);}
.approach-card{background:var(--bg); padding:36px 26px;}
.approach-card .num{font-family:'Oswald',sans-serif; font-size:1.8rem; color:var(--olive); display:block; margin-bottom:12px;}
.approach-card h3{font-size:1rem; letter-spacing:.04em; margin-bottom:8px; text-transform:uppercase; font-weight:600;}
.approach-card p{font-size:.88rem; color:var(--ink-soft);}

/* PARTICULIERS / PROS */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; list-style:none;}
.chips li{border:1px solid #cfcbb8; padding:8px 16px; border-radius:20px; font-size:.85rem; color:var(--ink-soft);}
.pro-banner{background:var(--dark); color:var(--cream); border-radius:4px; padding:54px 42px; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:center;}
.pro-banner .eyebrow{color:#C9C4B5;}
.pro-banner h2{font-size:1.6rem; margin:10px 0 12px; font-weight:500;}
.pro-banner p{color:#C9C4B5;}
.pro-banner p + p{margin-top:10px;}
.pro-banner .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; list-style:none;}
.pro-banner .tags li{border:1px solid #4a463c; padding:5px 12px; border-radius:20px; font-size:.74rem; color:#D8D3C4;}

/* FAQ */
.faq{max-width:820px; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative; font-weight:500; font-size:1.02rem;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-family:'Oswald',sans-serif; font-size:1.4rem; color:var(--olive); transition:transform .25s;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details p{color:var(--ink-soft); padding:0 0 22px; max-width:720px;}

/* CONTACT */
.contact{position:relative; background:var(--dark); color:var(--cream); overflow:hidden;}
.contact .bgphoto{position:absolute; inset:0; background:url('../assets/hero-fond.jpg') center/cover; opacity:.5;}
.contact .bgphoto::after{content:"";position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,7,4,.45), rgba(10,7,4,.9));}
.contact-inner{position:relative; z-index:2; padding:110px 24px; max-width:1180px; margin:0 auto;}
.contact .eyebrow{color:#D8D3C4;}
.contact h2{font-size:clamp(2rem,4.4vw,2.9rem); margin:16px 0 20px; font-weight:500;}
.contact p.lead{max-width:520px; margin:0 0 44px; color:#D8D3C4;}
.contact-grid{display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:start;}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-form .full{grid-column:1 / -1;}
.contact-form label{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#a8a396; margin-bottom:6px;}
.contact-form input, .contact-form select, .contact-form textarea{width:100%; background:rgba(243,239,228,.06); border:1px solid #6b665a; color:var(--cream); padding:12px 14px; font:inherit; font-size:.95rem; border-radius:2px;}
.contact-form select option{color:var(--ink);}
.contact-form textarea{min-height:140px; resize:vertical;}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{outline:none; border-color:var(--cream);}
.contact-form .consent{display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:#C9C4B5;}
.contact-form .consent input{width:auto; margin-top:4px;}
.contact-form .consent a{text-decoration:underline;}
.contact-form .hp{display:none;}
.contact-aside{border-left:1px solid #4a463c; padding-left:40px;}
.contact-info{display:flex; flex-direction:column; gap:22px;}
.contact-info a{font-size:1.05rem; word-break:break-word;}
.contact-info .lbl{display:block; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:#a8a396; margin-bottom:4px;}
.contact .social-row{display:flex; gap:14px; margin-top:30px;}
.contact .social-row a{width:44px; height:44px; border:1px solid #6b665a; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;}
.contact .social-row svg{width:17px; height:17px;}
.contact .social-row a:hover{background:var(--cream); color:var(--dark);}
.contact .logo-mark{margin-top:48px; filter:drop-shadow(0 0 18px rgba(243,239,228,.25));}
.contact .logo-mark img{height:110px; width:auto;}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:56px 0 30px;}
.foot-grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px; margin-bottom:40px;}
.foot-brand span{font-family:'Alex Brush',cursive; font-size:1.6rem;}
.foot-brand p{color:var(--ink-soft); font-size:.85rem; max-width:280px; margin-top:8px;}
.foot-links{display:flex; gap:56px; flex-wrap:wrap;}
.foot-col h2{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--olive); margin-bottom:14px; font-weight:600;}
.foot-col a{display:block; font-size:.88rem; color:var(--ink-soft); margin-bottom:9px;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.76rem; color:var(--ink-soft); padding-top:22px; border-top:1px solid var(--line);}
.foot-bottom a:hover{color:var(--ink); text-decoration:underline;}

#top-btn{position:fixed; bottom:22px; right:22px; width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--bg); border:none; opacity:0; pointer-events:none; transition:opacity .3s; z-index:90; cursor:pointer;}
#top-btn.show{opacity:1; pointer-events:auto;}

/* PAGES SECONDAIRES (mentions légales, confidentialité, merci) */
.page-head{padding:90px 0 40px; border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:500; margin-top:12px;}
.page-head p{color:var(--ink-soft); margin-top:12px;}
.legal{padding:60px 0 100px;}
.legal .wrap{max-width:820px;}
.legal h2{font-size:1.25rem; font-weight:500; margin:44px 0 12px;}
.legal h2:first-child{margin-top:0;}
.legal p, .legal li{color:var(--ink-soft); margin-bottom:10px;}
.legal ul{padding-left:20px; margin-bottom:10px;}
.legal a{text-decoration:underline;}
.legal dl{display:grid; grid-template-columns:200px 1fr; gap:6px 20px; color:var(--ink-soft);}
.legal dt{color:var(--ink); font-weight:500;}
.merci{min-height:70vh; display:flex; align-items:center; text-align:center;}
.merci h1{font-family:'Alex Brush',cursive; font-weight:400; font-size:clamp(3.5rem,9vw,5.5rem); color:var(--olive-dark); line-height:1;}
.merci p{color:var(--ink-soft); margin:20px auto 36px; max-width:480px;}

@media (max-width:1020px){
  .navlinks{gap:18px;}
  .navlinks .social-ico{display:none;}
}
@media (max-width:860px){
  .navlinks{display:none;} .burger{display:flex;} .mobile-menu{display:flex;}
  .persp-grid, .plans-row, .contact-grid{grid-template-columns:1fr;}
  .services-grid, .approach-grid, .proj-grid2, .proj-cards{grid-template-columns:1fr;}
  .contact-form{grid-template-columns:1fr;}
  .contact-aside{border-left:none; padding-left:0; border-top:1px solid #4a463c; padding-top:36px;}
  .legal dl{grid-template-columns:1fr;}
  .legal dd{margin-bottom:10px;}
  section{padding:76px 0;}
  .project{padding-bottom:76px;}
  .hero .monstera{opacity:.5; width:110%; right:-30%;}
  .service-card ul{columns:1;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *{transition:none !important;}
}
.contact-form .form-status{font-size:.85rem; color:#D8D3C4; min-height:1.2em;}
.contact-form button:disabled{opacity:.6; cursor:wait;}