:root{
 --ink0:#0a0d11;
 --ink:#101419;
 --ink2:#151a20;
 --surface:#1a2027;
 --surface2:#222932;
 --accent:#d6283c;
 --accent-2:#ff8a94;
 --accent-d:#a5192a;
 --accent-rgb:214,40,60;
 --on-accent:#ffffff;
 --text:#eef1f5;
 --text-strong:#d8dee6;
 --muted:#a6b0bc;
 --muted2:#84909d;
 --border2:rgba(255,255,255,.10);
 --grid:rgba(255,255,255,.025);
 --shadow-rgb:0,0,0;
 --nav-bg:rgba(16,20,25,.94);
 --on-ink0:#eef1f5;
 --on-ink0-muted:#a6b0bc;
 --on-ink0-muted2:#84909d;
 --ink0-border:rgba(255,255,255,.10);
 --border:rgba(var(--accent-rgb),.24);
 --tint-05:rgba(var(--accent-rgb),.06);
 --tint-10:rgba(var(--accent-rgb),.10);
 --tint-14:rgba(var(--accent-rgb),.14);
 --shadow-s:0 14px 34px rgba(var(--shadow-rgb),.09);
 --shadow-l:0 20px 50px rgba(var(--shadow-rgb),.16);
 --glow:0 8px 22px rgba(var(--accent-rgb),.28);
 --r:12px; --rl:18px; --max:1180px;
 --sys:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sys);
 font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
 /* « Bretteville-l'Orgueilleuse » ne tient pas dans une colonne de telephone :
    sans cette regle, le mot deborde et fait defiler la page horizontalement. */
 overflow-wrap:break-word}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.05rem)}
h2{font-size:clamp(1.5rem,1.05rem + 1.5vw,2.1rem)}
h3{font-size:1.12rem}
p{margin:0 0 1.05em}
ul{margin:0 0 1em;padding-left:1.15em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:860px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.ic{width:22px;height:22px;flex:0 0 auto}
.ic-s{width:16px;height:16px;flex:0 0 auto;vertical-align:-3px}

/* ---- zones anthracite (barre du haut, pied) ---- */
.topbar,.ft{--text:var(--on-ink0);--muted:var(--on-ink0-muted);
 --muted2:var(--on-ink0-muted2);--border2:var(--ink0-border);--accent-2:#ff8a94}

/* ---- topbar ---- */
.topbar{background:var(--ink0);font-size:.82rem;color:var(--muted2)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:38px}
.topbar .sp{flex:1}
.topbar a{color:var(--muted);white-space:nowrap}
.topbar a:hover{color:var(--accent-2)}
@media(max-width:760px){.topbar .hide-s{display:none}.topbar .wrap{justify-content:flex-end}}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(12px);
 border-bottom:1px solid var(--border2)}
.navrow{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.logo{width:58px;height:29px;flex:0 0 auto;background:var(--accent);
 -webkit-mask:url(/assets/monogramme-mk.png?v=5ee6213aad) left center/contain no-repeat;
 mask:url(/assets/monogramme-mk.png?v=5ee6213aad) left center/contain no-repeat}
.ft .logo{width:66px;height:33px}
.bt{display:flex;flex-direction:column;line-height:1.15}
.bt b{font-size:1.05rem;letter-spacing:-.02em}
.bt i{font-style:normal;font-size:.7rem;color:var(--muted2);letter-spacing:.02em}
.menu{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;padding:0;list-style:none}
.menu>li{position:relative}
.menu>li>a{display:block;padding:9px 11px;border-radius:9px;color:var(--muted);font-size:.91rem;font-weight:500}
.menu>li>a:hover,.menu>li>a.on{color:var(--text);background:var(--surface2);text-decoration:none}
.sub{position:absolute;top:calc(100% + 8px);left:0;min-width:262px;background:var(--surface);
 border:1px solid var(--border2);border-radius:var(--r);padding:7px;list-style:none;margin:0;
 box-shadow:var(--shadow-l);opacity:0;visibility:hidden;transform:translateY(-6px);
 transition:.16s ease}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:8px;color:var(--muted);font-size:.9rem}
.sub a:hover{background:var(--surface2);color:var(--text);text-decoration:none}
.sub svg{color:var(--accent)}
.mnu-cb,.burger{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;
 border-radius:10px;font-weight:600;font-size:.95rem;border:1px solid transparent;cursor:pointer;
 transition:.15s ease;text-decoration:none;font-family:inherit;line-height:1.1}
button.btn{font-family:inherit}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-p{background:linear-gradient(140deg,var(--accent),var(--accent-d));color:var(--on-accent);
 box-shadow:var(--glow)}
.btn-g{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-g:hover{border-color:var(--accent);background:var(--tint-05)}
.btn-s{padding:9px 15px;font-size:.87rem;background:var(--tint-10);color:var(--accent-2);
 border-color:var(--border)}
.btn-w{background:#fff;color:#15181d;border-color:#fff}
.btn-call{padding:9px 15px;font-size:.87rem;background:linear-gradient(140deg,var(--accent),var(--accent-d));color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}
@media(max-width:1080px){
 .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
  margin-left:auto;border:1px solid var(--border2);border-radius:10px;padding:0 10px;cursor:pointer}
 .burger span{display:block;height:2px;background:var(--text);border-radius:2px}
 .menu{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;
  background:var(--ink);border-bottom:1px solid var(--border2);padding:12px 16px 20px;
  max-height:0;overflow:hidden;opacity:0;transition:.2s ease;box-shadow:var(--shadow-l)}
 .mnu-cb:checked ~ .menu{max-height:88vh;overflow-y:auto;opacity:1;padding-bottom:24px}
 .menu>li>a{padding:12px 6px;font-size:1rem;border-bottom:1px solid var(--border2);border-radius:0}
 .sub{position:static;min-width:0;opacity:1;visibility:visible;transform:none;box-shadow:none;
  background:transparent;border:0;border-left:2px solid var(--border);border-radius:0;
  margin:6px 0 10px 8px;padding:0 0 0 10px}
 .cta-li{margin-top:14px}.cta-li .btn{width:100%}
}

/* ---- fil d'ariane ---- */
.bc{border-bottom:1px solid var(--border2);background:var(--ink2);font-size:.82rem}
.bc ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:11px 0}
.bc li+li::before{content:"›";margin-right:6px;color:var(--muted2)}
.bc a{color:var(--muted2)}.bc a:hover{color:var(--accent-2)}
.bc span{color:var(--muted)}

/* ---- sections ---- */
.sec{padding:72px 0;border-top:1px solid var(--border2)}
.sec.first{border-top:0}
.sec.alt{background:var(--ink2)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
 letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted);max-width:70ch}
.sec>.wrap>h2{max-width:24ch}

/* ---- hero ---- */
.hero{position:relative;background:var(--ink0);color:#f2f4f7;overflow:hidden}
.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(100deg,rgba(13,15,18,.94) 0%,rgba(13,15,18,.80) 46%,rgba(13,15,18,.42) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:86px;padding-bottom:78px}
.hero h1{max-width:18ch;margin-bottom:.35em;color:#fff}
.hero h1 em{font-style:normal;color:#f0a06c}
.hero .lead{font-size:1.16rem;max-width:58ch;color:#d5dbe2}
.hero .eyebrow{color:#f0a06c}
.hero .btn-g{border-color:rgba(255,255,255,.30);color:#fff}
.hero .btn-g:hover{border-color:var(--accent);background:rgba(218,110,54,.16)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:32px;font-size:.88rem;color:#b7c0ca}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust svg{color:var(--accent)}

/* ---- chiffres cles ---- */
.stats-band{background:var(--ink);border-top:0;padding:0 0 8px}
.stats-band + .sec{border-top:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
 margin:-46px 0 0;position:relative;z-index:3;
 background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl);
 box-shadow:var(--shadow-l);overflow:hidden}
.stat{position:relative;padding:30px 26px 28px;border-left:1px solid var(--border2)}
.stat:first-child{border-left:0}
/* Le liseré d'accent se déploie au survol : le seul mouvement de la carte. */
.stat::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
 background:linear-gradient(90deg,var(--accent),var(--accent-d));transition:width .45s ease}
.stat:hover::after{width:100%}
.stat-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;
 background:var(--tint-10);border:1px solid var(--border);color:var(--accent-2);margin-bottom:16px}
.stat-ic svg{width:21px;height:21px}
.stat b{display:block;font-size:clamp(2.1rem,1.5rem + 1.6vw,2.9rem);line-height:1;
 letter-spacing:-.045em;margin-bottom:10px;color:var(--accent-2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
 .stat b{background:linear-gradient(140deg,var(--accent),var(--accent-d));
  -webkit-background-clip:text;background-clip:text;color:transparent}
}
.stat-lbl{display:block;font-size:.94rem;font-weight:700;color:var(--text);margin-bottom:5px}
.stat-sub{display:block;font-size:.83rem;color:var(--muted2);line-height:1.5}
@media(max-width:900px){
 .stats{grid-template-columns:repeat(2,1fr);margin-top:-34px}
 .stat{padding:24px 20px}
 .stat:nth-child(3),.stat:nth-child(4){border-top:1px solid var(--border2)}
 .stat:nth-child(odd){border-left:0}
}
@media(max-width:520px){
 .stats{grid-template-columns:1fr;margin-top:-26px}
 .stat{border-left:0}
 .stat+.stat{border-top:1px solid var(--border2)}
}
/* Apparition au defilement, la ou le navigateur sait le faire sans script.
   Ailleurs, les cartes sont simplement affichees : rien ne depend de l'animation. */
@supports (animation-timeline: view()){
 @media (prefers-reduced-motion:no-preference){
  .stat{animation:monte .8s cubic-bezier(.2,.7,.3,1) both;
   animation-timeline:view();animation-range:entry 10% cover 26%}
  @keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
 }
}

/* ---- cartes ---- */
.grid{display:grid;gap:18px;margin-top:38px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl);
 padding:26px 24px;transition:.18s ease}
.card:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.card h3{margin-bottom:.45em}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--accent-2);text-decoration:none}
.card p{color:var(--muted);font-size:.94rem;margin-bottom:.8em}
.card .ci{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
 background:var(--tint-10);border:1px solid var(--border);color:var(--accent-2);margin-bottom:16px}
.card .more{font-size:.88rem;font-weight:600;color:var(--accent-2)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.tags li{font-size:.75rem;padding:4px 10px;border-radius:99px;background:var(--surface2);
 color:var(--muted2);border:1px solid var(--border2)}

/* ---- cartes chantier (avec photo) ---- */
.works{display:grid;gap:22px;margin-top:38px;grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.works{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.works{grid-template-columns:1fr}}
.work{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border2);
 border-radius:var(--rl);overflow:hidden;transition:.18s ease}
.work:hover{border-color:var(--border);transform:translateY(-3px);box-shadow:var(--shadow-s)}
.work .ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--surface2)}
.work:not(:has(.ph)) .body{border-top:3px solid var(--accent)}
.work .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s ease}
.work:hover .ph img{transform:scale(1.04)}
.work .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.work .wmeta{font-size:.78rem;color:var(--muted2);margin:0 0 .6em;display:flex;gap:8px;flex-wrap:wrap}
.work .wmeta b{color:var(--accent-2);font-weight:600}
.work h3{font-size:1.14rem;margin-bottom:.5em}
.work h3 a{color:var(--text)}
.work h3 a:hover{color:var(--accent-2);text-decoration:none}
.work p{color:var(--muted);font-size:.93rem}
.work .tags{margin-top:auto;padding-top:14px}

/* ---- figures / galerie ---- */
.fig{margin:26px 0}
/* Les photos de chantier sortent du telephone, souvent en portrait. En pleine
   largeur, une portrait fait plus de 1200 px de haut et pousse tout le texte
   sous la ligne de flottaison. On plafonne la hauteur et on centre : l'image
   reste entiere, jamais recadree. */
.fig img{max-width:100%;max-height:76vh;width:auto;height:auto;margin:0 auto;
 border-radius:var(--rl);border:1px solid var(--border2);display:block}
.fig figcaption{font-size:.84rem;color:var(--muted2);margin-top:9px}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
@media(max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);
 border:1px solid var(--border2);display:block}
.gal figcaption{font-size:.8rem;color:var(--muted2);margin-top:7px;line-height:1.45}

/* ---- logos clients ---- */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:18px 20px;
 align-items:center;margin-top:34px}
.logos img{max-height:56px;width:auto;margin:0 auto;display:block;opacity:.72;
 filter:grayscale(1);transition:.18s}
.logos img:hover{opacity:1;filter:none}

/* ---- listes a puces stylisees ---- */
.checks{list-style:none;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:var(--muted)}
.checks svg{color:var(--accent);margin-top:4px}
.checks b{color:var(--text);font-weight:600}

/* ---- split ---- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.split.tight{gap:40px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:34px}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:28px}
.panel h3{color:var(--accent-2)}
.panel.dark{background:var(--ink0);border-color:transparent;color:#f2f4f7}
.panel.dark h3{color:#f0a06c}
.panel.dark p,.panel.dark li{color:#b7c0ca}
.split .fig{margin:0}
.split .fig + .fig{margin-top:18px}
.split .fig img{aspect-ratio:4/3;object-fit:cover}

/* ---- villes ---- */
.villes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
@media(max-width:980px){.villes{grid-template-columns:repeat(3,1fr)}}
@media(max-width:660px){.villes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.villes,.villes.deux{grid-template-columns:1fr}}
.villes a{display:flex;align-items:center;gap:9px;padding:14px 15px;background:var(--surface);
 border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font-size:.92rem;
 font-weight:500;transition:.15s}
.villes a:hover{border-color:var(--accent);background:var(--surface2);text-decoration:none}
.villes.deux{grid-template-columns:1fr 1fr;margin-top:12px}
.villes svg{color:var(--accent);width:17px;height:17px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pills .pill{display:inline-flex;align-items:center;padding:7px 13px;background:var(--surface2);
 border:1px solid var(--border2);border-radius:999px;color:var(--text);font-size:.84rem;font-weight:500;transition:.15s}
.pills .pill:hover{border-color:var(--accent);color:var(--accent-2);text-decoration:none}
.garanties-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px}
.garanties-row span{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;font-weight:600;color:var(--muted2)}
.garanties-row svg{color:var(--accent);width:17px;height:17px}
.ftbot .garanties{display:inline-flex;align-items:center;gap:7px;color:var(--muted2);margin-bottom:6px}
.ftbot .garanties svg{color:var(--accent);width:15px;height:15px}
/* ---- articles de blog ---- */
.prose{max-width:70ch;font-size:1.02rem;line-height:1.75;color:var(--text)}
.prose h2{font-size:1.4rem;margin:1.8em 0 .5em;line-height:1.25}
.prose h3{font-size:1.12rem;margin:1.4em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.4em 0}
.prose strong{color:var(--text);font-weight:700}
.prose a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.villes .vflat{display:flex;align-items:center;gap:9px;padding:14px 15px;background:transparent;
 border:1px dashed var(--border2);border-radius:var(--r);color:var(--muted2);font-size:.92rem}
.villes .vflat svg{color:var(--muted2)}

/* ---- faq ---- */
.faq details{border:1px solid var(--border2);border-radius:var(--r);background:var(--surface);
 margin-bottom:10px;overflow:hidden}
.faq details[open]{border-color:var(--border)}
.faq summary{cursor:pointer;padding:17px 22px;list-style:none;display:flex;align-items:center;
 justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{margin:0;font-size:1rem;font-weight:600}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--accent-2);line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 22px 18px;color:var(--muted);font-size:.95rem}
.faq .ans p{margin:0}

/* ---- bandeau cta ---- */
.cta-band{background:var(--ink0);color:#f2f4f7;text-align:center;border-top:0}
.cta-band h2{color:#fff}
.ctain h2{margin-bottom:.4em}
.ctain p{color:#b7c0ca;max-width:58ch;margin-left:auto;margin-right:auto}
.ctain .btns{justify-content:center}
.cta-band .btn-g{border-color:rgba(255,255,255,.28);color:#fff}
.cta-band .btn-g:hover{border-color:var(--accent);background:rgba(218,110,54,.14)}
.fine{font-size:.82rem;color:#97a2ae;margin-top:22px}

/* ---- article / chantier ---- */
.art{max-width:820px}
.art h2{margin-top:1.7em;font-size:1.48rem}
.art p{color:var(--text-strong)}
.art .chapo{font-size:1.14rem;color:var(--muted);border-left:3px solid var(--accent);
 padding-left:20px;margin:0 0 32px}
.meta{font-size:.85rem;color:var(--muted2);margin-bottom:24px;display:flex;flex-wrap:wrap;gap:6px 18px}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta svg{color:var(--accent)}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px}
@media(max-width:660px){.prevnext{grid-template-columns:1fr}}
.prevnext a{display:block;padding:18px 20px;border:1px solid var(--border2);border-radius:var(--r);
 background:var(--surface);color:var(--text)}
.prevnext a:hover{border-color:var(--accent);text-decoration:none}
.prevnext small{display:block;color:var(--muted2);font-size:.76rem;text-transform:uppercase;
 letter-spacing:.08em;margin-bottom:5px}
.prevnext .nx{text-align:right}

/* ---- contact ---- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.ccards.two{grid-template-columns:repeat(2,1fr);margin-top:24px}
@media(max-width:820px){.ccards,.ccards.two{grid-template-columns:1fr}}
.ccard{background:var(--surface);border:1px solid var(--border2);border-radius:var(--rl);padding:26px}
.ccard b{display:block;font-size:1.1rem;margin:12px 0 6px}
.ccard a{font-size:1.02rem;font-weight:600}
.ccard p{color:var(--muted);font-size:.9rem;margin:0}
.ccard .ci{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;
 background:var(--tint-10);border:1px solid var(--border);color:var(--accent-2)}
.ccard address{font-style:normal;color:var(--muted);font-size:.94rem;line-height:1.7}

/* ---- formulaire ---- */
.form{display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.86rem;font-weight:600;color:var(--text)}
.field .hint{font-weight:400;color:var(--muted2)}
.field input,.field select,.field textarea{
 font:inherit;font-size:.95rem;color:var(--text);background:var(--ink);
 border:1px solid var(--border2);border-radius:10px;padding:11px 13px;width:100%;
 transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:
 linear-gradient(45deg,transparent 50%,var(--muted2) 50%),
 linear-gradient(135deg,var(--muted2) 50%,transparent 50%);
 background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{
 outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-14)}
/* :user-invalid et non :invalid — sans quoi les champs requis s'affichent en
   rouge des le chargement, avant que le visiteur ait tape quoi que ce soit. */
.field input:user-invalid,.field textarea:user-invalid{border-color:#c0392b}
/* Piege a robots : hors ecran plutot que display:none, que certains
   robots reperent et ignorent. Jamais atteignable au clavier. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsend{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:4px}
.fsend .small{font-size:.84rem;color:var(--muted2)}
.form-note{margin:0;padding:12px 15px;border-radius:10px;font-size:.9rem;
 border:1px solid var(--border2);background:var(--surface2);color:var(--muted)}
.form-note.ok{border-color:rgba(34,120,60,.35);background:rgba(34,120,60,.10);color:#1c6b36}
.form-note.ko{border-color:rgba(192,57,43,.35);background:rgba(192,57,43,.09);color:#a5321f}
.fmentions{font-size:.8rem;color:var(--muted2);margin:0}

/* ---- tableau ---- */
.tbl{width:100%;border-collapse:collapse;margin:24px 0;font-size:.93rem}
.tbl th,.tbl td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--border2);vertical-align:top}
.tbl th{color:var(--accent-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tbl td{color:var(--muted)}
.tblwrap{overflow-x:auto}

/* ---- barre d'appel, telephone uniquement ----
   Sur un site d'artisan, la majorite des visites vient du telephone et le
   premier geste attendu est un appel. Le numero de la barre du haut disparait
   des qu'on defile : celle-ci reste. Elle fait 60 px, ne recouvre rien (le
   corps recoit une marge basse equivalente) et n'existe pas sur ordinateur. */
.appel{display:none}
@media(max-width:760px){
 .appel{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-bg);backdrop-filter:blur(12px);
  border-top:1px solid var(--border2);box-shadow:0 -6px 24px rgba(var(--shadow-rgb),.10)}
 .appel .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.95rem}
 .appel .btn-w{background:var(--surface);color:var(--text);border-color:var(--border2)}
 body{padding-bottom:74px}
}

/* ---- preuve sociale : la note Google ---- */
.avis{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border-radius:99px;
 background:var(--surface);border:1px solid var(--border2);box-shadow:var(--shadow-s);
 text-decoration:none;color:var(--text);transition:.15s ease}
.avis:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.avis .etoiles{display:inline-flex;gap:2px;color:#f5a623}
.avis .etoiles svg{width:15px;height:15px}
.avis b{font-size:.95rem}
.avis span{font-size:.85rem;color:var(--muted2)}
.hero .avis{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.20);color:#fff;
 box-shadow:none;backdrop-filter:blur(6px)}
.hero .avis span{color:#c8cfd7}
.hero .avis:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34)}
@media(max-width:420px){.avis{padding:9px 13px;gap:9px}.avis b{font-size:.9rem}}

/* ---- ce que nous prenons en charge ---- */
/* Une grille de blocs cliquables plutot qu'une liste a puces : le nom du
   service et sa description doivent etre empiles, pas cote a cote. */
.capa{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border2);
 border:1px solid var(--border2);border-radius:var(--rl);overflow:hidden;margin-top:30px}
.capa a{display:flex;gap:15px;align-items:flex-start;padding:24px 24px;
 background:var(--surface);color:var(--text);text-decoration:none;transition:.15s ease}
.capa a:hover{background:var(--surface2);text-decoration:none}
.capa a:last-child:nth-child(odd){grid-column:1/-1}
.capa .ci{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
 border-radius:11px;background:var(--tint-10);border:1px solid var(--border);
 color:var(--accent-2);transition:.2s ease}
.capa a:hover .ci{background:var(--tint-14);transform:translateY(-2px)}
.capa .ci svg{width:20px;height:20px}
.capa b{display:block;font-size:1rem;margin-bottom:5px}
.capa a:hover b{color:var(--accent-2)}
.capa i{display:block;font-style:normal;font-size:.9rem;color:var(--muted);line-height:1.55}
@media(max-width:760px){.capa{grid-template-columns:1fr}
 .capa a:last-child:nth-child(odd){grid-column:auto}}

/* ---- astreinte ---- */
/* Fond identique a `.sec.alt` : sans lui, la carte se retrouve a cheval sur la
   frontiere blanc/gris quand les sections voisines n'ont pas la meme couleur. */
.sec.astreinte{padding:24px 0;border-top:0;background:var(--ink2)}
.astr{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
 background:var(--ink0);color:#f2f4f7;border-radius:var(--rl);padding:34px 38px;
 border-left:5px solid var(--accent)}
.astr-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:16px;
 background:rgba(218,110,54,.16);color:#f0a06c}
.astr-ic svg{width:30px;height:30px}
.astr-txt .eyebrow{color:#f0a06c;margin-bottom:8px}
.astr-txt h2{color:#fff;font-size:clamp(1.3rem,1.05rem + .9vw,1.7rem);margin-bottom:.35em}
.astr-txt p{color:#b7c0ca;margin:0;max-width:62ch;font-size:.96rem}
.astr-num{text-align:center}
.astr-num .btn{font-size:1.06rem;padding:14px 26px;white-space:nowrap}
.astr-num .fine{margin-top:12px;color:#97a2ae}
.astr-num .fine a{color:#f0a06c}
@media(max-width:940px){
 .astr{grid-template-columns:auto 1fr;padding:26px 24px;gap:18px}
 .astr-num{grid-column:1/-1;text-align:left}
 .astr-num .btn{width:100%}
}
.astreinte-ft{border-top:1px solid var(--border2);padding-top:14px;margin-bottom:14px}
.astreinte-ft svg{color:var(--accent-2);vertical-align:-3px}
.astreinte-ft a{color:var(--accent-2)}
.astreinte-ft span{font-size:.82rem}

/* ---- etapes ---- */
.steps{counter-reset:st;display:grid;gap:16px;margin-top:34px;list-style:none;padding:0}
.steps li{position:relative;padding:22px 24px 22px 74px;background:var(--surface);
 border:1px solid var(--border2);border-radius:var(--rl)}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;left:22px;top:22px;
 width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--on-accent);
 display:grid;place-items:center;font-weight:700;font-size:1rem}
.steps h3{margin-bottom:.3em}
.steps p{margin:0;color:var(--muted);font-size:.95rem}

/* ---- footer ---- */
.ft{background:var(--ink0);padding:62px 0 26px;font-size:.9rem}
.ftgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px}
@media(max-width:980px){.ftgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ftgrid{grid-template-columns:1fr}}
.ft h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted2);
 margin:0 0 14px;font-weight:600}
.ft ul{list-style:none;padding:0;margin:0 0 22px}
.ft li{margin-bottom:8px}
.ft a{color:var(--muted)}
.ft a:hover{color:var(--accent-2)}
.ft p{color:var(--muted2);font-size:.88rem}
.ft address{font-style:normal;color:var(--muted);line-height:1.9;margin-bottom:14px}
.ft .thin li{font-size:.85rem;line-height:1.4;margin-bottom:10px}
.ft .social{display:flex;gap:16px}
.ftbot{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
 margin-top:36px;padding-top:22px;border-top:1px solid var(--border2)}
.ftbot p{margin:0;font-size:.82rem}
/* ---- petits ecrans : respiration et debordements ---- */
@media(max-width:680px){
 body{font-size:16px}
 .wrap{padding:0 18px}
 .sec{padding:52px 0}
 .hero .wrap{padding-top:60px;padding-bottom:56px}
 .hero .lead{font-size:1.06rem}
 .trust{gap:8px 18px;margin-top:24px}
 .card{padding:22px 20px}
 .panel{padding:22px 20px}
 .grid,.works{margin-top:28px}
 .btns .btn{flex:1 1 auto;justify-content:center}
 .quote,.ccard{padding:22px 20px}
 .work .body{padding:20px 20px 22px}
 .faq summary{padding:15px 18px}
 .faq .ans{padding:0 18px 16px}
 .steps li{padding:20px 20px 20px 62px}
 .steps li::before{left:18px;top:20px;width:30px;height:30px;font-size:.92rem}
 .ft{padding:48px 0 22px}
 .art .chapo{padding-left:16px}
 h1{letter-spacing:-.015em}
}
@media(max-width:400px){
 .wrap{padding:0 15px}
 .gal{grid-template-columns:1fr;gap:12px}
 .btns{gap:10px}
 .btns .btn{width:100%}
 .logos{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
}
/* Rien ne doit pouvoir faire defiler la page de cote. */
html,body{max-width:100%}
img,svg,video,table{max-width:100%}

/* =====================================================================
   ANIMATIONS
   Regle unique : rien d'essentiel ne doit dependre d'une animation. Tout ce
   qui suit est enferme dans @supports (animation-timeline) ou dans un
   :hover — si le navigateur ne suit pas, la page s'affiche simplement, et
   completement. Aucune ligne de JavaScript n'est ajoutee.
   ===================================================================== */

/* ---- revelation au defilement ---- */
@supports (animation-timeline: view()){
 @media (prefers-reduced-motion:no-preference){
  .card,.work,.fig,.steps li,.ccard,.gal figure,.logos-piste,.mosaic figure{
   animation:revele .75s cubic-bezier(.2,.7,.3,1) both;
   animation-timeline:view();animation-range:entry 8% cover 24%}
  /* Le decalage donne le sens de lecture, de gauche a droite. */
  .grid>*:nth-child(3n+2),.works>*:nth-child(3n+2){animation-delay:.06s}
  .grid>*:nth-child(3n+3),.works>*:nth-child(3n+3){animation-delay:.12s}
  @keyframes revele{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
 }
}

/* ---- hero : lent panoramique sur la photo ---- */
@media (prefers-reduced-motion:no-preference){
 .hero .heroimg{animation:pano 30s ease-in-out infinite alternate;transform-origin:60% 55%}
 @keyframes pano{from{transform:scale(1.03)}to{transform:scale(1.13)}}
}

/* ---- bandeau de logos qui defile ---- */
.logos-piste{overflow:hidden;margin-top:34px;
 -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
 mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logos-defile{display:flex;align-items:center;gap:52px;width:max-content;padding:6px 26px}
.logos-defile img{height:46px;width:auto;flex:0 0 auto;opacity:.68;filter:grayscale(1);
 transition:.2s}
.logos-defile img:hover{opacity:1;filter:none;transform:scale(1.06)}
@media (prefers-reduced-motion:no-preference){
 .logos-defile{animation:defile 46s linear infinite}
 .logos-piste:hover .logos-defile,.logos-piste:focus-within .logos-defile{animation-play-state:paused}
 @keyframes defile{to{transform:translateX(-50%)}}
}
/* Sans animation, le second exemplaire ferait doublon : on le retire et on
   remet une grille sage. */
@media (prefers-reduced-motion:reduce){
 .logos-piste{-webkit-mask:none;mask:none}
 .logos-defile{flex-wrap:wrap;justify-content:center;width:auto;gap:26px 40px}
 .logos-defile [aria-hidden="true"]{display:none}
}

/* ---- mosaique de chantiers ---- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px;
 margin-top:36px}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);
 border:1px solid var(--border2)}
.mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.mosaic figure:nth-child(6){grid-column:span 2}
.mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.mosaic figure:hover img{transform:scale(1.07)}
.mosaic a{display:block;height:100%}
.mosaic a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:var(--r)}
.mosaic figcaption{position:absolute;inset:auto 0 0 0;padding:26px 14px 11px;
 font-size:.78rem;color:#fff;line-height:1.35;
 background:linear-gradient(transparent,rgba(13,15,18,.86));
 opacity:0;transform:translateY(8px);transition:.28s ease}
.mosaic figure:hover figcaption,.mosaic figure:focus-within figcaption{opacity:1;transform:none}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:132px}
 .mosaic figure:nth-child(6){grid-column:span 2}}
@media(max-width:520px){.mosaic{grid-auto-rows:112px}
 .mosaic figure:nth-child(1){grid-column:span 2;grid-row:span 2}}

/* ---- agrandissement des photos, sans script (:target) ---- */
.gal a.zoom{display:block;position:relative}
.gal a.zoom::after{content:"⤢";position:absolute;right:8px;bottom:8px;width:26px;height:26px;
 display:grid;place-items:center;border-radius:7px;background:rgba(13,15,18,.72);color:#fff;
 font-size:.8rem;opacity:0;transition:.2s}
.gal a.zoom:hover::after,.gal a.zoom:focus-visible::after{opacity:1}
.lb{position:fixed;inset:0;z-index:200;background:rgba(10,12,15,.94);
 display:flex;align-items:center;justify-content:center;padding:28px;
 opacity:0;visibility:hidden;transition:opacity .22s ease}
.lb:target{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:82vh;border-radius:var(--r);display:block;
 box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb figcaption{color:#c8cfd7;font-size:.86rem;margin-top:14px;text-align:center;max-width:70ch}
.lb .ferme{position:absolute;inset:0;cursor:zoom-out}
.lb .croix{position:absolute;top:18px;right:22px;width:42px;height:42px;display:grid;
 place-items:center;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
 font-size:1.4rem;line-height:1;text-decoration:none}
.lb .croix:hover{background:var(--accent);text-decoration:none}
.lb figure{margin:0;position:relative;z-index:2;text-align:center}

/* ---- finitions au survol ---- */
.card .ci,.ccard .ci{transition:transform .25s ease,background .25s ease}
.card:hover .ci,.ccard:hover .ci{transform:translateY(-2px) scale(1.06);background:var(--tint-14)}
.btn-p{position:relative;overflow:hidden}
.btn-p::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
 background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
 transform:skewX(-18deg);transition:left .55s ease}
.btn-p:hover::after{left:130%}
.villes a{transition:.15s ease}
.villes a:hover{transform:translateX(3px)}

/* ---- mini-formulaire "Etre rappele" ---- */
.no-scroll{overflow:hidden}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.rappel-ov{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(12,18,26,.55);backdrop-filter:blur(3px)}
.rappel-ov[hidden]{display:none}
.rappel-box{background:var(--surface,#fff);color:var(--text,#111);border:1px solid var(--border2,#e3e7ec);border-radius:22px;max-width:420px;width:100%;padding:0;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(12,18,26,.4);animation:rappel-in .2s ease}
@keyframes rappel-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.rappel-hd{text-align:center;padding:30px 26px 20px;background:linear-gradient(160deg,var(--tint-10),transparent)}
.rappel-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-d));color:var(--on-accent,#fff);box-shadow:var(--glow);margin-bottom:12px}
.rappel-ic .ic{width:26px;height:26px}
.rappel-hd h2{font-size:1.4rem;margin:0 0 6px;color:var(--text,#111)}
.rappel-hd p{font-size:.94rem;color:var(--muted,#5b6570);margin:0;max-width:32ch;margin-inline:auto;line-height:1.5}
#rappel-form{padding:6px 26px 26px}
.rappel-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:440px){.rappel-grid{grid-template-columns:1fr}}
.rappel-f{display:block;margin-bottom:13px}
.rappel-f>span{display:block;font-size:.8rem;font-weight:700;color:var(--text,#111);margin:0 0 5px 2px}
.rappel-f>span em{font-weight:400;color:var(--muted,#8a94a0);font-style:normal}
.rappel-box input,.rappel-box select{width:100%;padding:12px 13px;border:1.5px solid var(--border2,#d7dde5);border-radius:12px;font-size:1rem;font-family:inherit;background:var(--bg,#fff);color:var(--text,#111)}
.rappel-box input::placeholder{color:#aab3bf}
.rappel-box input:focus,.rappel-box select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-10)}
.rappel-box button[type=submit]{width:100%;margin-top:4px;padding:14px;border:0;border-radius:12px;background:linear-gradient(140deg,var(--accent),var(--accent-d));color:var(--on-accent,#fff);font-weight:700;font-size:1.05rem;cursor:pointer;font-family:inherit;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--glow)}
.rappel-box button[type=submit]:hover{filter:brightness(1.06);transform:translateY(-1px)}
.rappel-box button[type=submit]:disabled{opacity:.6;cursor:default;transform:none}
.rappel-x{position:absolute;top:12px;right:14px;z-index:2;background:rgba(255,255,255,.7);border:0;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted,#5b6570);cursor:pointer}
.rappel-x:hover{background:#fff;color:var(--text,#111)}
.rappel-note{margin:12px 0 0;font-size:.92rem;text-align:center;font-weight:600}
.rappel-note.ok{color:#166534}.rappel-note.ko{color:#b91c1c}
.rappel-fine{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font-size:.78rem;color:var(--muted,#8a94a0)}
.rappel-fine .ic-s{width:14px;height:14px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
@media print{.nav,.topbar,.ft,.cta-band,.bc,.appel,.rappel-ov{display:none}body{background:#fff;color:#000}}