:root{--bg:#F4F3EF;--txt:#6B6B6B;--brown:#53311F;--copper:#C78054;--btn:#905536;--nav:#706864;--line:#e4e0d8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.6 Georgia,"Times New Roman",serif}
a{color:var(--copper)}
.script{font-family:"Segoe Script","Bradley Hand","Brush Script MT","Comic Sans MS",cursive;color:var(--copper);font-weight:normal}
.container{max-width:950px;margin:0 auto;position:relative}

/* bannière */
.stage{position:relative;max-width:1600px;margin:0 auto}
.slider{position:relative;height:550px;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
         mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%)}
.slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:fade 24s infinite}
.slider img:nth-child(1){animation-delay:0s}
.slider img:nth-child(2){animation-delay:6s}
.slider img:nth-child(3){animation-delay:12s}
.slider img:nth-child(4){animation-delay:18s}
@keyframes fade{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
.slider::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(0,0,0,.25)}

/* en-tête */
header{position:absolute;top:0;left:50%;transform:translateX(-50%);width:950px;max-width:100%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);z-index:3}
.head-top{display:flex;align-items:center;justify-content:space-between;padding:6px 40px 10px;border-bottom:1px solid #8d8173}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo .mark{width:62px;height:62px;border:3px solid #9a9a9a;border-top:0;border-right:0;position:relative}
.logo .mark::after{content:"";position:absolute;left:10px;top:18px;width:58px;height:14px;border-radius:50%;border-top:5px solid #c62026;transform:rotate(-14deg)}
.logo .name{font:300 34px/0.95 "Helvetica Neue",Arial,sans-serif;color:#2b2b2b;letter-spacing:.5px;text-transform:uppercase}
.cta{background:var(--btn);color:#fff;text-decoration:none;padding:6px 16px;font-weight:bold;font-size:13px;border:1px solid #7a4529}
.cta:hover{background:var(--brown)}
nav ul{list-style:none;margin:0;padding:10px 30px 8px;display:flex;justify-content:space-between}
nav a{display:block;color:var(--nav);text-decoration:none;font:300 17px/1.15 "Helvetica Neue",Arial,sans-serif}
nav a:hover,nav a.on{color:var(--copper)}

/* cartes */
.boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:-28px;position:relative;z-index:2}
.box{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);display:flex;flex-direction:column}
.box img{width:100%;height:144px;object-fit:cover;display:block}
.box .in{padding:10px 24px 24px}
.box h3{font-size:24px;line-height:48px;margin:0 0 6px}
.box p{margin:0 0 12px;font-size:12px;line-height:18px;color:#706965}
.more{display:inline-block;background:var(--btn);color:#fff;text-decoration:none;font-size:12px;padding:3px 12px;margin-top:auto}
.more:hover{background:var(--brown)}

/* contenu */
main{padding:40px 0 30px}
.cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
h2{font-size:30px;margin:0 0 14px}
.cols p{margin:0 0 12px}
ul.bul{list-style:none;padding:0;margin:0}
ul.bul li{padding:3px 0 3px 16px;position:relative;color:#6B6A6A}
ul.bul li::before{content:"›";position:absolute;left:0;color:var(--copper);font-weight:bold}
section.page{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:30px 40px;margin-top:30px}
section.page h2{border-bottom:1px solid var(--line);padding-bottom:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.grid2 h4{color:var(--brown);margin:10px 0 4px;font-size:15px}
.grid2 p{margin:0;font-size:13px}

footer{border-top:1px solid #d9d4ca;margin-top:30px;padding:18px 0 30px;font-size:12px;color:#8a8580}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:960px){
 header{position:relative;left:0;transform:none;width:100%}
 .stage{display:flex;flex-direction:column}
 .slider{order:2;height:320px;-webkit-mask-image:none;mask-image:none}
 .head-top{padding:8px 16px}
 .logo .name{font-size:24px}.logo .mark{width:44px;height:44px}.logo .mark::after{width:40px;top:12px;left:6px}
 nav ul{flex-wrap:wrap;gap:8px 18px;padding:10px 16px;justify-content:flex-start}
 nav a{font-size:15px}nav a br{display:none}
 .container{padding:0 16px}
 .boxes{grid-template-columns:repeat(2,1fr);margin-top:16px}
 .cols{grid-template-columns:1fr;gap:24px}
 section.page{padding:24px 18px}
}
@media(max-width:560px){
 .boxes,.grid2{grid-template-columns:1fr}
 .cta{display:none}
 .slider{height:220px}
}

/* pages intérieures */
.subhead{height:260px}
.subhead .slider{height:260px}
.crumb{font-size:12px;margin:24px 0 0;color:#8a8580}
.crumb a{text-decoration:none}
.page-title{font-size:40px;margin:6px 0 4px}
.lead{font-size:16px;color:#5d5752;max-width:720px}
.cards-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.cards-mini .card{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);padding:20px 24px}
.cards-mini h3{margin:0 0 6px;color:var(--brown);font-size:17px}
.cards-mini p{margin:0;font-size:13.5px}
.aside-cta{background:#fff;border-left:4px solid var(--copper);padding:18px 24px;margin-top:28px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.aside-cta p{margin:0 0 10px}
form.devis{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-top:16px}
form.devis label{display:flex;flex-direction:column;font-size:13px;color:var(--brown);gap:4px}
form.devis .full{grid-column:1/-1}
form.devis input,form.devis select,form.devis textarea{font:inherit;padding:8px 10px;border:1px solid #d6cfc4;background:#fbfaf7}
form.devis button{justify-self:start;background:var(--btn);color:#fff;border:0;padding:9px 20px;font:bold 13px Georgia,serif;cursor:pointer}
form.devis button:hover{background:var(--brown)}
.note{font-size:12px;color:#8a8580}
@media(max-width:960px){.subhead,.subhead .slider{height:180px}}
@media(max-width:560px){.cards-mini,form.devis{grid-template-columns:1fr}.page-title{font-size:30px}}
