/* Atelier du Faubourg : papier gris chaud, bleu-vert d'atelier, ocre, Archivo condensé, repères de règle */
:root{--papier:#f1efe9;--atelier:#16262b;--atelier2:#22373d;--ocre:#d79b3a;--encre:#16262b;--gris:#47524f;--trait:#c9c5b8;--focus:#a05f0a;--max:1160px;--cond:Archivo,"Arial Narrow",Arial,sans-serif}
body{background:var(--papier);color:var(--encre);font:17px/1.6 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:var(--cond);font-stretch:78%;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.eyebrow{font:600 13px/1.4 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre)}
.ruler{background:repeating-linear-gradient(90deg,var(--ocre) 0 2px,transparent 2px 12px)}

.top{background:var(--atelier);color:#fff}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:10px}
.marque{display:flex;flex-direction:column;text-decoration:none;font-family:var(--cond);font-stretch:78%;text-transform:uppercase;font-weight:800;line-height:.95;min-height:44px;justify-content:center;border-left:6px solid var(--ocre);padding-left:10px}
.mq-a{font-size:14px;letter-spacing:.2em;font-weight:600}
.mq-b{font-size:26px}
.nav ul{display:flex;flex-wrap:wrap;gap:0 20px;align-items:center}
.nav a{font:600 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none;padding:0 2px}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.nav .nav-cta{background:var(--ocre);color:var(--atelier);padding:0 16px;border-radius:2px}
.nav .nav-cta:hover{background:#fff;text-decoration:none}
.top :focus-visible,.hero :focus-visible,.devis :focus-visible,.foot :focus-visible{outline-color:#fff}

.hero{background:var(--atelier);color:#fff}
.hero-in{display:grid;gap:36px;padding-block:56px 48px;align-items:end}
.hero h1{font-size:clamp(40px,7.4vw,92px);margin-top:14px;max-width:13ch}
.accroche{font:800 clamp(22px,2.6vw,30px)/1.1 var(--cond);font-stretch:85%;text-transform:uppercase;color:var(--ocre);margin-top:20px}
.lede{max-width:46ch;margin-top:14px;color:#e4e8e6;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{padding:0 24px;font:700 16px/1.2 Inter,system-ui,sans-serif;text-decoration:none;border:2px solid var(--ocre);border-radius:2px}
.btn-ocre{background:var(--ocre);color:var(--atelier)}
.btn-ocre:hover{background:#fff;border-color:#fff}
.btn-clair{color:#fff;border-color:#fff}
.btn-clair:hover{background:#fff;color:var(--atelier)}
.fiche{border-top:6px solid var(--ocre);background:var(--atelier2)}
.fiche div{padding:14px 18px;border-bottom:1px solid #3d5359}
.fiche dt{font:600 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#f0c56f}
.fiche dd{margin:2px 0 0;font:700 19px/1.3 Inter,system-ui,sans-serif}
.bandeau-photo{border-top:6px solid var(--ocre)}
.bandeau-photo img{width:100%;height:clamp(220px,34vw,460px);object-fit:cover;object-position:center 42%}

.prestations{padding-block:80px 72px}
.tete{display:grid;gap:8px;margin-bottom:36px}
.tete h2{font-size:clamp(40px,6vw,76px)}
.tete p{color:var(--gris);max-width:60ch}
.grille{display:grid;gap:0;border-top:3px solid var(--atelier)}
.grille li{padding:22px 4px 24px;border-bottom:1px solid var(--trait);position:relative}
.ref{font:800 15px/1 var(--cond);font-stretch:100%;letter-spacing:.1em;color:#8a560a}
.grille h3{font-size:30px;margin:10px 0 8px}
.grille li p{color:var(--gris);font-size:16px;max-width:42ch}
.devis-mention{margin-top:10px;font:700 13px/1.4 Inter,system-ui,sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:var(--atelier)!important}

.chantier{background:#e5e1d5;padding-block:72px;border-block:1px solid var(--trait)}
.chantier-in{display:grid;gap:40px;align-items:start}
.chantier-photo figure{border:3px solid var(--atelier)}
.chantier-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}
.chantier h2{font-size:clamp(36px,5vw,60px);margin-bottom:24px}
.etapes{display:grid;gap:0}
.etapes li{display:grid;grid-template-columns:48px 1fr;gap:14px;padding:18px 0;border-top:1px solid #a9a496}
.n{font:800 40px/1 var(--cond);font-stretch:78%;color:#8a560a}
.etapes h3{font-size:22px;margin-bottom:4px}
.etapes p{color:var(--gris);font-size:16px}

.zone{padding-block:72px 80px}
.zone-in{display:grid;gap:44px}
.zone h2{font-size:clamp(34px,4.6vw,56px);margin-bottom:20px}
.horaires div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 20px;padding:14px 0;border-bottom:1px solid var(--trait)}
.horaires dt{font-weight:700}
.horaires dd{margin:0}
.note{color:var(--gris);font-size:15px;margin-top:18px}
.devis{background:var(--atelier);color:#fff;padding:32px 28px;align-self:start;border-top:6px solid var(--ocre)}
.devis h2{color:#fff}
.devis p{margin-bottom:20px;color:#e4e8e6}

.foot{background:#0f1a1e;color:#e4e8e6;padding-block:28px}
.foot-in{display:grid;gap:6px}
.foot a{color:#f0c56f}

@media (min-width:760px){.grille{grid-template-columns:repeat(2,1fr);column-gap:48px}}
@media (min-width:900px){
.hero-in{grid-template-columns:1.5fr 1fr;gap:64px}
.chantier-in{grid-template-columns:.9fr 1.1fr;gap:72px}
.chantier-photo img{aspect-ratio:7/8}
.zone-in{grid-template-columns:1.1fr .9fr;gap:88px}
}
@media (min-width:1100px){.grille{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.hero-in{padding-block:40px 36px}.prestations,.chantier,.zone{padding-block:52px}.mq-b{font-size:22px}}