body{margin:0} img{max-width:100%} [hidden]{display:none!important}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.hero-photo::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(24,28,32,.78),rgba(24,28,32,0) 55%)}
.hero-photo .motif,.hero-photo p{position:relative; z-index:2}
.hero-photo p{color:#FFFFFF}
.work{grid-template-columns:repeat(3,minmax(0,1fr))}
.work img,.work video{width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--soft)}
.work-intro{max-width:60ch; color:var(--muted); margin:-12px 0 28px}
@media (max-width:760px){.work{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}.work figcaption{font-size:0.84rem}}
/* Layout: white one-pager built for quick action. Quote and phone reachable from everywhere (header, hero, mobile bottom bar); services as clickable cards; thin rules; the logo's two-line motif opens each section. Single light look by choice. */
:root{
  --bg:#FFFFFF; --soft:#F3F3F1; --ink:#111111; --muted:#2F343C; --line:#E4E7EC; --brand:#1976D2; --copper:#111111; --focus:#4F9BE6;
  --display:"Archivo", "Arial Narrow", Arial, sans-serif;
  --body:"Archivo", Arial, Helvetica, sans-serif;
  --wrap:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:100px}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display); font-stretch:125%; line-height:1.06; text-wrap:balance; margin:0}
h1{font-weight:800; font-size:clamp(2.2rem,5.6vw,4.2rem); letter-spacing:-0.01em; max-width:15ch}
h2{font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-weight:700; font-size:1.12rem}
p{margin:0}
.muted{color:var(--muted)}
.label{font-size:0.75rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted)}

.logo .l-egr{fill:var(--brand)} .logo .l-ink{fill:var(--copper)}
.motif{display:grid; gap:5px; width:120px}
.motif span{display:block; background:var(--copper)}
.motif span:first-child{height:2px; width:72%}
.motif span:last-child{height:3px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 24px; font-family:var(--display); font-stretch:125%; font-weight:700; font-size:0.95rem; text-decoration:none; border:2px solid var(--ink); background:var(--ink); color:#FFFFFF; cursor:pointer; transition:background .15s ease, color .15s ease}
.btn:hover{background:#FFFFFF; color:var(--ink)}
.btn.line{background:transparent; color:var(--ink)}
.btn.line:hover{background:var(--ink); color:#FFFFFF}
.btn.small{min-height:40px; padding:0 16px; font-size:0.85rem}
.btn svg{width:18px; height:18px; flex:none}

/* header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:88px}
.site-header .logo{height:58px; width:auto; display:block}
@media (max-width:540px){.site-header .logo{height:46px} .site-header .wrap{min-height:76px}}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); font-size:0.95rem; font-weight:500}
.nav a{text-decoration:none}
.nav a:not(.btn):hover{color:var(--brand)}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid var(--line)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px; height:22px}
.menu-panel{position:absolute; right:0; top:54px; background:var(--bg); border:1px solid var(--line); min-width:220px; display:grid; padding:8px}
.menu-panel a{text-decoration:none; padding:12px 14px; font-weight:500}
.menu-panel a:hover{background:var(--soft)}
@media (max-width:760px){.nav{display:none} .menu{display:block}}

/* hero */
.hero{padding-block:clamp(64px,10vw,128px) clamp(48px,8vw,96px)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.hero-text{display:grid; gap:26px; min-width:0}
.hero-art{width:100%; max-width:100%; height:auto; display:block}
@media (max-width:820px){.hero .wrap{grid-template-columns:minmax(0,1fr)} .hero-art{max-width:520px}}
.ico{width:34px; height:34px; color:var(--brand)}
.card.feature .ico{color:#FFFFFF}
.hero .muted{font-size:1.15rem; max-width:46ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.trades-line{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:0.78rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted)}

/* sections */
section{padding-block:clamp(48px,7vw,88px)}
.view-intro{border-top:1px solid var(--line)}
.nav a[aria-current="page"]{color:var(--brand); text-decoration:underline; text-underline-offset:6px}
.sec-head{display:grid; gap:16px; margin-bottom:clamp(28px,4vw,48px)}
.sec-head .muted{max-width:52ch}

.services{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.services{grid-template-columns:minmax(0,1fr)}}
.card{display:grid; gap:10px; align-content:start; padding:24px; border:1px solid var(--line); text-decoration:none; min-width:0; transition:border-color .15s ease}
.card:hover{border-color:var(--ink)}
.card .go{font-size:0.88rem; font-weight:600; color:var(--ink); margin-top:6px; text-decoration:underline; text-underline-offset:4px}
.card.feature{background:var(--ink); border-color:var(--ink); color:#FFFFFF}
.card.feature .muted{color:#C8C8C8}
.card.feature .go{color:#FFFFFF}

.poles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,48px)}
@media (max-width:900px){.poles{grid-template-columns:minmax(0,1fr)}}
.pole{display:grid; gap:20px; align-content:start; min-width:0}
.pole-head{display:grid; gap:8px; padding-bottom:18px; border-bottom:2px solid var(--ink)}
.pole-head h3{font-size:clamp(1.3rem,2.2vw,1.6rem); font-weight:800}
.subs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media (max-width:520px){.subs{grid-template-columns:minmax(0,1fr)}}
.subs .card{padding:20px}
.detail{padding-block:clamp(40px,7vw,88px)}
.detail .wrap{display:grid; gap:clamp(28px,4vw,44px)}
.back{font-size:0.92rem; font-weight:600; text-decoration:none; color:var(--muted)}
.back:hover{color:var(--ink)}
.detail-head{display:grid; gap:16px; max-width:760px}
.detail-head h1{max-width:none}
.lead{font-size:1.15rem; color:var(--muted); max-width:60ch}
.detail-body{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); padding-top:clamp(24px,3vw,36px); border-top:2px solid var(--ink)}
@media (max-width:820px){.detail-body{grid-template-columns:minmax(0,1fr)}}
.detail-main{display:grid; gap:18px; align-content:start; min-width:0}
.detail-main h2{font-size:1.3rem}
.checks{list-style:none; margin:0; padding:0; display:grid}
.checks li{padding:14px 0 14px 30px; border-bottom:1px solid var(--line); position:relative}
.checks li::before{content:""; position:absolute; left:2px; top:22px; width:14px; height:2px; background:var(--brand)}
.checks li::after{content:""; position:absolute; left:2px; top:27px; width:20px; height:3px; background:var(--copper)}
.detail-side{display:grid; gap:20px; align-content:start; padding:24px; background:var(--soft); min-width:0}
.detail-side .btn{width:100%}
.who{font-size:1rem; font-weight:500}
.others{display:grid; gap:12px; padding-top:24px; border-top:1px solid var(--line)}
.others div{display:flex; flex-wrap:wrap; gap:8px}
.others a{border:1px solid var(--line); padding:8px 14px; text-decoration:none; font-size:0.92rem; font-weight:500}
.others a:hover{border-color:var(--ink)}
.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tiles{grid-template-columns:minmax(0,1fr)}}
.tile{display:grid; gap:10px; align-content:start; padding:clamp(22px,2.6vw,30px); border:1px solid var(--line); text-decoration:none; min-width:0; transition:border-color .15s ease, transform .15s ease}
.tile:hover{border-color:var(--ink); transform:translateY(-2px)}
.tile h2{font-size:clamp(1.2rem,2vw,1.45rem)}
.tile .go{font-size:0.88rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; margin-top:4px}
.teasers{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:760px){.teasers{grid-template-columns:minmax(0,1fr)}}
.teaser{display:grid; gap:10px; padding:clamp(24px,3vw,36px); border:1px solid var(--line); text-decoration:none; min-width:0; transition:border-color .15s ease}
.teaser:hover{border-color:var(--ink)}
.teaser .go{font-size:0.9rem; font-weight:600; text-decoration:underline; text-underline-offset:4px; margin-top:4px}
.hero-photo{position:relative; aspect-ratio:4/5; max-width:100%; background:var(--brand); color:#FFFFFF; display:grid; align-content:end; gap:10px; padding:28px; overflow:hidden}
.hero-photo .motif span{background:#FFFFFF}
.hero-photo p{font-size:0.9rem; color:#DCEBFA; max-width:28ch}
@media (max-width:820px){.hero-photo{aspect-ratio:16/10; max-width:100%}}
.zones-block{display:grid; gap:12px; margin-top:clamp(32px,5vw,56px); padding-top:24px; border-top:1px solid var(--line)}
.work{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:760px){.work{grid-template-columns:minmax(0,1fr)}}
.work figure{margin:0; display:grid; gap:10px}
.ph{aspect-ratio:4/3; max-width:100%; background:var(--soft); border:1px dashed #C5CAD3; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; font-size:0.85rem; color:var(--muted)}
.work figcaption{font-size:0.92rem; font-weight:600}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,3vw,40px); counter-reset:step}
.steps li{counter-increment:step; display:grid; gap:8px; align-content:start; min-width:0; padding-top:16px; border-top:2px solid var(--ink)}
.steps li::before{content:counter(step); font-family:var(--display); font-stretch:125%; font-weight:800; font-size:1.5rem; color:var(--brand); line-height:1}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact */
.contact .wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px)}
@media (max-width:820px){.contact .wrap{grid-template-columns:minmax(0,1fr)}}
.contact-info{display:grid; gap:20px; align-content:start; min-width:0}
.info{display:grid; gap:2px}
.info span{font-size:1.1rem; font-weight:600; user-select:all; overflow-wrap:anywhere}
.zones{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:0.92rem; color:var(--muted); list-style:none; margin:0; padding:0}

form{display:grid; gap:18px; min-width:0}
.row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width:520px){.row{grid-template-columns:minmax(0,1fr)}}
.field{display:grid; gap:6px; min-width:0}
label{font-size:0.88rem; font-weight:600}
input,select,textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:0; border-bottom:1px solid #B9BEC8; padding:10px 0; width:100%; border-radius:0}
input:focus,select:focus,textarea:focus{outline:none; border-bottom:2px solid var(--ink)}
textarea{min-height:96px; resize:vertical}
.chips{display:flex; flex-wrap:wrap; gap:8px; border:0; padding:0; margin:0}
.chips legend{font-size:0.88rem; font-weight:600; margin-bottom:8px; padding:0}
.chips label{font-weight:500; font-size:0.9rem; border:1px solid var(--line); padding:8px 14px; cursor:pointer; user-select:none}
.chips input{position:absolute; opacity:0; width:1px; height:1px}
.chips input:checked + span{color:#FFFFFF; font-weight:600}
.chips label:has(input:checked){border-color:var(--ink); background:var(--ink)}
.chips label:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}
.form-ok{font-size:0.95rem; color:var(--ink); font-weight:600}
.form-note{font-size:0.8rem; color:var(--muted)}

/* footer */
footer{border-top:1px solid var(--line); padding-block:48px 32px; background:var(--soft)}
.foot{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:28px}
@media (max-width:820px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.foot{grid-template-columns:minmax(0,1fr)}}
.foot .logo{height:34px; width:auto; display:block}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:0.92rem}
.foot ul a{text-decoration:none} .foot ul a:hover{color:var(--brand)}
.foot div{display:grid; gap:12px; align-content:start; min-width:0}
.copy{margin-top:32px; padding-top:20px; border-top:1px solid var(--line); font-size:0.82rem; color:var(--muted)}

/* mobile action bar */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--bg); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:76px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important} html{scroll-behavior:auto}}

.showcase{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:clamp(24px,5vw,56px); align-items:center; margin-bottom:clamp(36px,5vw,64px)}
.showcase video{width:100%; aspect-ratio:9/16; display:block; background:#14181D; cursor:pointer}
.showcase h3{font-family:var(--display); font-stretch:125%; font-weight:800; font-size:clamp(1.4rem,3vw,2rem); line-height:1.15; margin:0 0 14px}
.showcase .lead{margin:0 0 22px}
.work{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.work{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}}
@media (max-width:760px){.showcase{grid-template-columns:minmax(0,1fr)} .showcase video{max-width:360px; margin:0 auto}}
.hero-photo{background:linear-gradient(160deg,#2F86DC 0%,#1976D2 48%,#0C3566 100%)}

.why{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,36px); margin-bottom:clamp(32px,5vw,56px)}
@media (max-width:900px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why{grid-template-columns:minmax(0,1fr)}}
.why>div{display:grid; gap:6px; align-content:start; padding-top:14px; border-top:2px solid var(--ink); min-width:0}
.why h4{margin:0; font-family:var(--display); font-weight:800; font-size:1.05rem; text-transform:uppercase; letter-spacing:0.02em}
.why p{margin:0}
.why-title{font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2.2vw,1.5rem); margin:clamp(28px,4vw,44px) 0 18px}
.info .note{font-size:0.92rem; font-weight:400; color:var(--muted); user-select:auto}
.info a,.detail-side a:not(.btn),footer a[href^="tel"],footer a[href^="mailto"]{color:inherit; text-decoration:underline; text-underline-offset:3px}
.callout{display:grid; gap:6px; border:1px solid var(--ink); padding:18px 20px}
.callout strong{font-family:var(--display); font-weight:800; font-size:1.15rem; text-transform:uppercase}
.callout span{color:var(--muted); font-size:0.95rem}
.p-platrerie{background-image:url(../img/platrerie-murs-plafonds.jpg); background-position:50% 45%}
.p-peinture{background-image:url(../img/p-peinture.jpg); background-position:55% 35%}
.p-facade{background-image:url(../img/p-facade.jpg)}
.p-isolation{background-image:url(../img/isolation-facade.jpg); background-position:50% 50%}
.p-renovation{background-image:url(../img/renovation-interieure.jpg); background-position:50% 55%}
.p-nettoyage{background-image:url(../img/entretien-nettoyage-locaux.jpg); background-position:50% 50%}


.photo{background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--soft); width:100%}
.tile.has-photo,.card.has-photo{padding:0; gap:0; overflow:hidden}
.has-photo>.photo{aspect-ratio:16/10}
.tile-body{display:grid; gap:10px; align-content:start; padding:clamp(18px,2.2vw,24px)}
.tile.has-photo:hover .photo,.card.has-photo:hover .photo{filter:brightness(1.04)}
.sub-title{font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2.2vw,1.5rem); margin:clamp(32px,5vw,56px) 0 18px}
.tiles-compact{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.tiles-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.tiles-compact{grid-template-columns:minmax(0,1fr)}}
.pole-photo{aspect-ratio:16/7}
.detail-head.has-photo{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:clamp(20px,4vw,48px); align-items:center}
.detail-photo{aspect-ratio:16/10}
@media (max-width:760px){.detail-head.has-photo{grid-template-columns:minmax(0,1fr)}}
.why-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,260px); gap:clamp(20px,4vw,40px); align-items:stretch; margin-bottom:clamp(32px,5vw,56px)}
.why-wrap .why{grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:0}
.side-photo{min-height:320px; background-position:center 30%}
@media (max-width:900px){.why-wrap{grid-template-columns:minmax(0,1fr)} .side-photo{min-height:0; aspect-ratio:16/10; background-position:center 30%}}
@media (max-width:520px){.why-wrap .why{grid-template-columns:minmax(0,1fr)}}
.contact-photo{aspect-ratio:4/3; background-position:center 60%}

.hero .wrap{grid-template-columns:minmax(0,1fr)} .hero-text{max-width:820px}
.tile-thumb{grid-template-columns:76px minmax(0,1fr); gap:18px; align-items:center}
.tile-thumb .thumb{width:76px; height:76px; aspect-ratio:1}
.tile-text{display:grid; gap:6px; min-width:0}
.tiles-compact .tile-thumb{grid-template-columns:60px minmax(0,1fr); gap:14px}
.tiles-compact .tile-thumb .thumb{width:60px; height:60px}
.detail{padding-block:0 clamp(40px,7vw,88px)}
.detail-hero{position:relative; width:100%; background-position:center 40%; color:#FFFFFF; margin-bottom:clamp(28px,4vw,48px)}
.detail-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(10,20,26,.84) 0%,rgba(10,20,26,.42) 55%,rgba(10,20,26,.30) 100%)}
.detail-hero>.wrap{position:relative; z-index:1; min-height:clamp(250px,36vw,390px); display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding-block:clamp(20px,3vw,32px) clamp(24px,3.5vw,40px)}
.detail-hero .back{color:rgba(255,255,255,.88)}
.detail-hero .label{color:rgba(255,255,255,.82)}
.detail-hero h1{color:#FFFFFF; max-width:none; margin:0}
.detail-hero-title{display:grid; gap:10px}
.detail-lead{font-size:clamp(1.05rem,1.8vw,1.25rem); max-width:64ch; margin:0 0 clamp(24px,3vw,36px)}


.live{padding-block:clamp(8px,2vw,24px) clamp(32px,5vw,64px)}
.live-dot{display:inline-block; width:0.5em; height:0.5em; border-radius:50%; background:var(--brand); margin-right:0.5em; vertical-align:middle; position:relative; top:-0.08em; animation:livepulse 1.8s ease-in-out infinite}
@keyframes livepulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.live-fig{margin:0; display:grid; gap:0}
.live-fig .photo{aspect-ratio:16/9; background-position:center 62%}
@media (max-width:760px){.live-fig .photo{aspect-ratio:4/3}}
.live-fig figcaption{display:grid; gap:4px; padding:18px 0 0; border-top:0}
.live-fig figcaption strong{font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,2.4vw,1.6rem); line-height:1.2}
.live-fig figcaption span{color:var(--muted); font-size:clamp(1rem,1.6vw,1.1rem)}

@media (min-width:901px){
 .tiles:not(.tiles-compact){grid-template-columns:repeat(6,minmax(0,1fr))}
 .tiles:not(.tiles-compact)>.tile{grid-column:span 2}
 .tiles:not(.tiles-compact)>.tile:nth-child(n+4){grid-column:span 3}
 .tiles-compact{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:481px) and (max-width:900px){
 .tiles>.tile:last-child:nth-child(odd){grid-column:1/-1}
}

.contact .wrap{grid-template-columns:minmax(0,820px); gap:clamp(40px,7vw,72px); justify-content:start}
.quote{display:grid; gap:18px; min-width:0}
.quote h2{margin:0}
.quote .muted{margin:0}

.site-header .deco{position:absolute; top:0; right:0; height:100%; width:44px; pointer-events:none; display:block}
.site-header .deco .d1{fill:var(--ink)}
.site-header .deco .d2{fill:var(--brand)}
.site-header .deco .d3{fill:var(--brand); opacity:.4}
.site-header .wrap{padding-right:clamp(56px,6vw,72px)}

.p-conciergerie{background-image:url(../img/conciergerie-immeuble.jpg); background-position:50% 40%}
.p-finchantier{background-image:url(../img/nettoyage-fin-de-chantier.jpg); background-position:50% 45%}
.showcase.showcase-text{grid-template-columns:minmax(0,1fr); max-width:720px}
.logo{object-fit:contain}

.tile-thumb .p-peinture{background-position:62% 30%}
.card.has-photo .p-peinture{background-position:58% 32%}
.detail-hero.p-peinture{background-position:50% 30%}
.p-peintre-photo{background-image:url(../img/p-peinture.jpg); background-position:50% 30%}
.p-facade-photo{background-image:url(../img/facade-ravalement.jpg); background-position:50% 42%}
.p-facade-thumb{background-image:url(../img/facade-ravalement-vignette.jpg); background-position:center}

/* Page Services : tout en une seule colonne, on défile vers le bas */
.poles{grid-template-columns:minmax(0,1fr) !important; gap:clamp(40px,6vw,72px)}
.poles .subs{grid-template-columns:minmax(0,1fr) !important; gap:16px}
.poles .pole-photo{aspect-ratio:16/6}
@media (min-width:720px){
  .poles .card.has-photo{display:grid; grid-template-columns:minmax(220px,34%) minmax(0,1fr); align-items:stretch}
  .poles .card.has-photo > .photo{height:100%; min-height:190px; aspect-ratio:auto}
  .poles .card.has-photo .tile-body{align-content:center}
}
.story{display:grid; gap:14px; max-width:72ch; margin:0 0 clamp(32px,5vw,56px)}
.story .signature{margin-top:6px; padding-top:14px; border-top:2px solid var(--ink); font-size:1.05rem}
.why-wrap{grid-template-columns:minmax(0,1fr) !important}
.foot-zones{margin:28px 0 0; padding-top:24px; border-top:1px solid rgba(128,128,128,.35); display:grid; gap:14px}
.zones-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 28px; font-size:.9rem}
.zones-grid div{display:grid; gap:2px}
.zones-grid span{opacity:.8; line-height:1.5}
.zones-grid{align-items:start}
.zones-grid div{align-content:start; align-self:start}
.zones-grid strong{display:block}
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,48px)}
.gal-item{margin:0; display:grid; grid-template-rows:auto 1fr; gap:0; background:#fff; border:1px solid rgba(0,0,0,.1); overflow:hidden}
.gal-item img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block}
.gal-item figcaption{display:grid; gap:2px; padding:14px 16px 16px; border-top:3px solid var(--brand)}
.gal-item figcaption strong{font-size:1rem; font-weight:800}
.gal-item figcaption span{font-size:.9rem; opacity:.75; line-height:1.4}
@media (max-width:720px){.gallery{grid-template-columns:minmax(0,1fr)}}
.project{margin-top:clamp(8px,2vw,20px)}
.project-title{font-size:clamp(1.15rem,2vw,1.4rem); font-weight:800; margin:0 0 14px}
.project .gallery{margin-top:0; gap:clamp(10px,1.5vw,16px)}
.project .gal-item{border:0; background:none}
.project .gal-item img{aspect-ratio:4/5}
.project-sub{font-size:.8rem; opacity:.65; margin:-8px 0 14px; letter-spacing:.01em}
.project .gal-item img{image-rendering:auto}
.project .gal-item img{aspect-ratio:3/4; object-fit:contain; background:#fff}
.gal-item.ba{display:block; position:relative; aspect-ratio:3/4; overflow:hidden; background:#eee; user-select:none; -webkit-user-select:none}
.project .gal-item.ba img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.gal-item.ba::after{content:""; position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.35); pointer-events:none}
.ba-knob{position:absolute; top:50%; left:var(--pos); width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:#fff; box-shadow:0 1px 8px rgba(0,0,0,.35); pointer-events:none; display:grid; place-items:center; color:var(--brand); font-size:.8rem; font-weight:800; z-index:2}
.ba-tag{position:absolute; top:10px; z-index:2; font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:rgba(255,255,255,.92); padding:3px 8px; pointer-events:none}
.ba-l{left:10px}.ba-r{right:10px}
.gal-item.ba input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; touch-action:pan-y}
.ba-wide img{object-position:58% 50%}
.ba-tag{background:none !important; padding:0 !important; font-size:1rem !important; letter-spacing:.06em; text-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(255,255,255,.7); top:12px !important}
.ba-l{left:14px !important}.ba-r{right:14px !important}
.p-particuliers{background-image:url(../img/travaux-particuliers.jpg); background-size:cover; background-position:35% 50%}
.detail-side{position:relative; min-height:320px; align-content:end; background:linear-gradient(to top,rgba(25,118,210,.6),rgba(25,118,210,0) 55%),url(../img/fond-9ac9b2.jpg) 38% 50%/cover no-repeat}
@media (max-width:860px){.detail-side{min-height:260px}}
.p-graffiti{background:linear-gradient(115deg,#0F3F73 0%,#1976D2 55%,#4F9BE6 100%)}
.p-graffiti::after{content:""; position:absolute; right:-40px; top:-20px; bottom:-20px; width:210px; transform:skewX(-14deg); background:linear-gradient(90deg,#111 0 14%,transparent 14% 28%,rgba(255,255,255,.22) 28% 42%,transparent 42% 56%,rgba(255,255,255,.12) 56% 70%,transparent 70%); pointer-events:none}
.thumb.p-graffiti,.card .p-graffiti,.detail-hero.p-graffiti{overflow:hidden}
.card .p-graffiti,.thumb.p-graffiti{position:relative}
.prose{display:grid; gap:14px; max-width:62ch; margin-bottom:6px}
.prose p{color:var(--muted); font-size:1rem; line-height:1.7}
.copy a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.legal{max-width:62ch; font-size:0.9rem; color:var(--muted); line-height:1.6}
.legal h1{font-size:1.2rem; max-width:none; margin-bottom:18px; color:var(--ink)}
.legal h2{font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; margin:22px 0 6px; color:var(--ink)}
.legal p{margin:0}
.legal a{color:inherit}
.sec-head h1{font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); max-width:none; letter-spacing:0}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.hero-text .motif span:first-child{background:#1976D2}.hero-text .motif span:last-child{background:#111}

.project-sub{opacity:.9}

.topbar{background:#1976D2;color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.04em}
.topbar .in{max-width:1160px;margin:0 auto;padding:7px clamp(16px,4vw,40px);display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar a{color:#fff;text-decoration:none;white-space:nowrap}
.topbar a:hover{text-decoration:underline}
.topbar .tb-l{opacity:.95}
.site-header{border-bottom:1px solid var(--line)}
@media(max-width:640px){.topbar{font-size:.72rem}.topbar .tb-l{display:none}.topbar .in{justify-content:center}}

.topbar{position:relative;z-index:3}

/* ===== Proposition design : même structure, plus de relief ===== */
:root{--ink:#0E1319;--brand:#1976D2;--brand-d:#0F3F73;--wash:#EEF4FB;--line:#DCE3EB;--soft:#F4F6F8;--shadow:0 1px 2px rgba(14,19,25,.06),0 10px 28px -12px rgba(14,19,25,.18)}
body{background:#fff;-webkit-font-smoothing:antialiased}
h1{letter-spacing:-.025em;line-height:1.02}
h2{letter-spacing:-.015em}
::selection{background:var(--brand);color:#fff}

/* en-tête : verre dépoli */
.site-header{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav a:not(.btn){position:relative;padding-block:6px}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{text-decoration:none}

/* boutons */
.btn{border-radius:2px;box-shadow:0 6px 16px -8px rgba(14,19,25,.55);transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-1px);box-shadow:0 12px 22px -10px rgba(25,118,210,.7)}
.btn.line{box-shadow:none}
.btn.line:hover{background:var(--ink);border-color:var(--ink)}

/* accueil : grand panneau incliné, repris du logo */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--wash) 100%)}
.hero::before{content:"";position:absolute;top:-10%;bottom:-10%;right:-6%;width:27%;transform:skewX(-14deg);
 background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 38px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 38px),
  linear-gradient(90deg,var(--brand) 0 16px,transparent 16px 44px,var(--ink) 44px 60px,transparent 60px 96px,#0000 96px),
  linear-gradient(160deg,var(--brand) 0%,var(--brand-d) 100%);
 background-size:auto,auto,100% 100%,calc(100% - 96px) 100%;background-position:0 0,0 0,0 0,100% 0;background-repeat:repeat,repeat,no-repeat,no-repeat}
.hero .wrap{position:relative;z-index:2}
.hero-text{max-width:560px}
.hero h1{font-size:clamp(2.4rem,6vw,4.7rem);max-width:12ch}
.trades-line{gap:8px 10px}
.trades-line span{padding:5px 10px;border:1px solid var(--line);background:rgba(255,255,255,.75);font-size:.7rem;letter-spacing:.1em}
@media (max-width:820px){.hero::before{width:70%;opacity:.08;right:-28%}.trades-line span{font-size:.62rem;padding:4px 8px}}
@media (prefers-reduced-motion:no-preference){
 .hero .hero-text>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
 .hero .hero-text>*:nth-child(2){animation-delay:.08s}.hero .hero-text>*:nth-child(3){animation-delay:.16s}.hero .hero-text>*:nth-child(4){animation-delay:.24s}.hero .hero-text>*:nth-child(5){animation-delay:.32s}
 @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}}

/* sections */
.view-intro{border-top:0}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.sec-head .motif span:first-child{background:var(--brand)}
.sec-head .motif span:last-child{background:var(--ink)}

/* cartes de services */
.card,.tile,.teaser{position:relative;background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card::before,.tile::before,.teaser::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:linear-gradient(90deg,var(--brand),var(--focus));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.card:hover,.tile:hover,.teaser:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 2px 4px rgba(14,19,25,.06),0 22px 38px -18px rgba(25,118,210,.45)}
.card:hover::before,.tile:hover::before,.teaser:hover::before{transform:scaleX(1)}
.card h3{font-size:1.2rem;letter-spacing:-.01em}
.card img,.tile img{border-radius:2px}
.card .go,.tile .go,.teaser .go{text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--ink);border-bottom:2px solid var(--brand);padding-bottom:2px;width:max-content;transition:gap .2s ease,color .2s ease}
.card:hover .go,.tile:hover .go,.teaser:hover .go{color:var(--brand);gap:14px}
.card.feature{background:linear-gradient(150deg,var(--ink) 0%,var(--brand-d) 130%);border-color:var(--ink)}
.card.feature .go{color:#fff;border-color:var(--focus)}
.pole-head{border-bottom:3px solid var(--ink);position:relative}

/* pages de service */
.detail-hero{position:relative;overflow:hidden}
.detail-hero::after{content:"";position:absolute;right:-60px;top:0;bottom:0;width:240px;transform:skewX(-14deg);background:linear-gradient(90deg,rgba(79,155,230,.9) 0 14px,transparent 14px 40px,rgba(255,255,255,.9) 40px 52px,transparent 52px 80px,rgba(25,118,210,.5) 80px);pointer-events:none}
.detail-hero h1{letter-spacing:-.025em}
.detail-body{border-top:3px solid var(--ink)}
.detail-side{border:1px solid var(--line);border-top:4px solid var(--brand);box-shadow:var(--shadow);border-radius:2px;position:sticky;top:110px}
.checks li{transition:padding-left .2s ease,background .2s ease}
.checks li:hover{padding-left:38px;background:linear-gradient(90deg,var(--wash),transparent)}
.checks li::before{background:var(--brand)}
.others a{border-radius:2px;background:#fff;transition:all .2s ease}
.others a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.lead{font-size:1.25rem;line-height:1.55;color:var(--ink)}

/* réalisations / contact */
.project{padding-bottom:12px}
.project-title{letter-spacing:-.015em}
.gal-item{border-radius:2px;box-shadow:var(--shadow)}
input,select,textarea{transition:border-color .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--brand);box-shadow:0 2px 0 0 var(--brand);outline:none}

/* pied de page */
footer{background:var(--soft);border-top:0;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--ink) 0 33%,var(--brand) 33% 66%,var(--focus) 66%)}
.foot-zones{border-top:1px solid var(--line)}
footer a{transition:color .2s ease}
footer a:hover{color:var(--brand)}
@media (max-width:540px){.card:hover,.tile:hover,.teaser:hover{transform:none}}

.hero{padding-top:clamp(20px,3vw,36px)!important}
.hero-text>.motif{display:none!important}
@media (min-width:821px){.hero::before{right:-15%;width:36%}}
.detail-hero::after{display:none}
.detail-hero::before{background:linear-gradient(to top,rgba(10,20,26,.72) 0%,rgba(10,20,26,.18) 45%,rgba(10,20,26,0) 75%)}