:root{--navy:#031d34;--navy2:#082d50;--blue:#0a8cff;--ice:#eef6fc;--ink:#132235;--muted:#637286;--line:#dbe6ef;--white:#fff;--max:1240px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff}a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 48px));margin:auto}.hero{min-height:100svh;position:relative;color:#fff;background:linear-gradient(90deg,rgba(1,19,34,.96) 0%,rgba(3,29,52,.88) 34%,rgba(3,29,52,.38) 62%,rgba(3,29,52,.08) 100%),url('accueil-charpente.webp') center 43%/cover no-repeat;display:flex;flex-direction:column}.nav{height:104px;display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid rgba(255,255,255,.14)}.brand{font-size:28px;font-weight:900;letter-spacing:3px}.brand-logo{display:flex;align-items:center;gap:14px}.brand-logo img{width:175px;height:78px;object-fit:contain;background:transparent;border-radius:0;display:block}.brand-logo small{max-width:250px}.brand small{display:block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:1.6px;color:#b9d2e7}.navlinks{display:flex;gap:30px;font-weight:650;font-size:14px}.navlinks a{opacity:.88}.navlinks a:hover{opacity:1;color:#7dc2ff}.hero-main{flex:1;display:flex;align-items:center;padding:70px 0 90px}.hero-copy{max-width:760px}.eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:#80c5ff;font-weight:850}.hero h1{font-size:clamp(68px,10vw,142px);line-height:.86;letter-spacing:-5px;margin:24px 0 24px;font-weight:900}.hero h2{font-size:clamp(26px,3vw,42px);line-height:1.18;margin:0 0 22px;font-weight:750}.hero p{font-size:18px;line-height:1.7;color:#d5e3ee;max-width:650px}.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1px solid rgba(255,255,255,.38);border-radius:5px;font-weight:800}.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.services-bar{background:rgba(2,20,36,.84);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12)}.services-bar .wrap{display:grid;grid-template-columns:repeat(4,1fr)}.service-tab{padding:24px 22px;border-right:1px solid rgba(255,255,255,.12)}.service-tab:first-child{border-left:1px solid rgba(255,255,255,.12)}.service-tab b{display:block;font-size:16px}.service-tab span{display:block;color:#a9bfd1;font-size:12px;margin-top:5px}section{padding:100px 0}.kicker{color:var(--blue);font-size:12px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase}.title{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-2px;margin:12px 0 24px;color:var(--navy)}.lead{font-size:18px;line-height:1.8;color:var(--muted);max-width:800px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}.intro-photo{height:560px;border-radius:8px;overflow:hidden;position:relative}.intro-photo img{width:100%;height:100%;object-fit:cover}.intro-photo:after{content:"";position:absolute;inset:auto -18px -18px 35%;height:55%;background:var(--blue);z-index:-1}.services{background:var(--navy);color:#fff}.services .title{color:#fff}.services .lead{color:#bfd0de}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}.card{background:#0a3155;border:1px solid #174a76;padding:30px 26px;min-height:300px;border-radius:7px}.card .num{color:#61b5ff;font-size:12px;font-weight:900;letter-spacing:2px}.card h3{font-size:24px;margin:28px 0 14px}.card p{color:#bfd0de;line-height:1.7;font-size:15px}.projects-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:42px}.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:230px;gap:12px}.g{overflow:hidden;border-radius:5px;position:relative;background:#ddd}.g img{width:100%;height:100%;object-fit:cover;transition:transform .4s}.g:hover img{transform:scale(1.035)}.g:nth-child(1){grid-column:span 7;grid-row:span 2}.g:nth-child(2){grid-column:span 5}.g:nth-child(3){grid-column:span 5}.g:nth-child(4),.g:nth-child(5),.g:nth-child(6){grid-column:span 4}.g:nth-child(n+7){grid-column:span 3}.g .cap{position:absolute;inset:auto 0 0;padding:30px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-weight:750;font-size:13px}.expertise{background:var(--ice)}.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}.expertise-item{background:#fff;border:1px solid var(--line);padding:28px;border-radius:6px}.expertise-item h3{color:var(--navy);margin:0 0 10px}.expertise-item p{color:var(--muted);line-height:1.65;margin:0}.cta{padding:85px 0;background:linear-gradient(135deg,var(--navy),#0a3a65);color:#fff}.cta .title{color:#fff;margin-top:0}.cta .lead{color:#c7d7e5}.footer{background:#011321;color:#aabfd0;padding:42px 0}.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:end}.footer strong{font-size:24px;color:#fff;letter-spacing:2px}.footer small{display:block;margin-top:8px}.mobile{display:none}@media(max-width:950px){.navlinks{display:none}.mobile{display:block;font-weight:800}.hero{background-position:58% center}.services-bar .wrap,.cards{grid-template-columns:1fr 1fr}.intro-grid{grid-template-columns:1fr;gap:40px}.intro-photo{height:420px}.cards .card{min-height:240px}.gallery{grid-auto-rows:200px}.g:nth-child(n){grid-column:span 6;grid-row:span 1}.g:nth-child(1){grid-column:span 12;grid-row:span 2}.expertise-grid{grid-template-columns:1fr}.projects-head{display:block}}@media(max-width:620px){.brand-logo img{width:112px;height:48px}.brand-logo small{display:none}.wrap{width:min(var(--max),calc(100% - 28px))}.nav{height:86px}.brand{font-size:23px}.brand small{font-size:8px}.hero h1{letter-spacing:-3px}.hero-main{padding:55px 0}.services-bar .wrap,.cards{grid-template-columns:1fr}.service-tab{border-left:1px solid rgba(255,255,255,.12)}section{padding:72px 0}.gallery{grid-template-columns:1fr;grid-auto-rows:250px}.g:nth-child(n){grid-column:auto!important;grid-row:auto!important}.footer-grid{display:block}.footer-grid>div+div{margin-top:24px}}

/* Animations discrètes et professionnelles */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFadeIn{from{opacity:0}to{opacity:1}}
.hero .eyebrow{animation:heroFadeUp .7s ease-out .12s both}
.hero h1{animation:heroFadeUp .78s cubic-bezier(.2,.7,.2,1) .2s both}
.hero h2{animation:heroFadeUp .78s cubic-bezier(.2,.7,.2,1) .3s both}
.hero p{animation:heroFadeUp .78s ease-out .4s both}
.hero .btns{animation:heroFadeUp .78s ease-out .5s both}
.hero .services-bar{animation:heroFadeIn .9s ease-out .65s both}

body.motion-ready .reveal-target{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
body.motion-ready .reveal-target.reveal-left{transform:translateX(-30px)}
body.motion-ready .reveal-target.reveal-right{transform:translateX(30px)}
body.motion-ready .reveal-target.is-visible{opacity:1;transform:translate(0,0)}

.card,.expertise-item,.service-tab,.btn{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-color .28s ease}
.card:hover{transform:translateY(-7px);box-shadow:0 18px 36px rgba(0,0,0,.20);border-color:#2d6f9f}
.expertise-item:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(3,29,52,.10)}
.service-tab:hover{transform:translateY(-4px);background:rgba(255,255,255,.035)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.intro-photo img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.intro-photo:hover img{transform:scale(1.035)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  body.motion-ready .reveal-target{opacity:1!important;transform:none!important}
}


/* Marquage réglementaire amiante — visuel temporaire */
.asbestos-card{position:relative;padding-right:112px}
.asbestos-mark{width:62px;height:124px;border:2px solid #fff;border-radius:2px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.25);flex:0 0 auto;background:#fff}
.asbestos-mark .am-top{height:40%;background:#050505;color:#fff;display:flex;align-items:center;justify-content:center;font:900 45px/1 Arial,sans-serif;text-transform:lowercase}
.asbestos-mark .am-bottom{height:60%;background:#e1262f;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5px 4px;font:800 7px/1.15 Arial,sans-serif;letter-spacing:.1px}
.asbestos-mark .am-bottom strong{font-size:8px;display:block;margin-bottom:2px}.asbestos-mark .am-bottom small{display:block;margin-top:3px;font:600 4.1px/1.12 Arial,sans-serif}
.asbestos-card>.asbestos-mark{position:absolute;right:24px;top:24px}
.cert-with-mark{display:flex;align-items:center;gap:18px}
.cert-with-mark .asbestos-mark{width:42px;height:84px;border-color:#d8e2eb;box-shadow:none}
.cert-with-mark .asbestos-mark .am-top{font-size:31px}
.cert-with-mark .asbestos-mark .am-bottom{font-size:5px;padding:3px 2px}
.cert-with-mark .asbestos-mark .am-bottom strong{font-size:5.5px;margin-bottom:1px}.cert-with-mark .asbestos-mark .am-bottom small{font-size:2.8px;margin-top:2px}
.cert-with-mark .cert-copy{min-width:0}
.qualibat-official{width:96px;height:96px;flex:0 0 96px;display:block;text-decoration:none;filter:drop-shadow(0 8px 18px rgba(3,29,52,.12));transition:transform .25s ease,filter .25s ease}
.qualibat-official:hover{transform:translateY(-3px) scale(1.02);filter:drop-shadow(0 12px 24px rgba(3,29,52,.18))}
.qualibat-official svg{width:100%;height:100%;display:block}
.qualibat-note{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#168fc9}
.qualibat-note:before{content:"";width:18px;height:2px;background:#168fc9;border-radius:2px}
@media(max-width:620px){.asbestos-card{padding-right:26px}.asbestos-card>.asbestos-mark{position:relative;right:auto;top:auto;margin:0 0 18px 0}.cert-with-mark{align-items:flex-start}}

/* V20 — base V13 : grue bleue sur la première page + suppression de la carte */
#zone-intervention .zone-grid{grid-template-columns:1fr!important}
#zone-intervention .zone-copy{max-width:980px}
#zone-intervention .zone-extra{max-width:900px;margin-top:26px}
.brand-logo img{width:175px;height:78px;object-fit:contain;background:transparent;border-radius:0;display:block}
@media (max-width:640px){#zone-intervention .zone-copy{max-width:100%}}

/* V21 — logo première page remplacé par une version plus nette */
.brand-logo img{width:210px!important;height:98px!important;object-fit:contain;background:transparent;border-radius:0;display:block;image-rendering:auto;filter:none}
@media (max-width:640px){.brand-logo img{width:180px!important;height:84px!important}}

/* V22 — grue du logo éclaircie pour meilleure lisibilité */
.brand-logo img{width:215px!important;height:100px!important;object-fit:contain;background:transparent;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.18))}
@media (max-width:640px){.brand-logo img{width:185px!important;height:86px!important}}


#zone-intervention{padding:92px 0;background:linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%);overflow:hidden}
.zone-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:72px;align-items:center}
.zone-copy .lead{max-width:760px}
.zone-points{display:grid;gap:14px;margin-top:30px}
.zone-point{display:flex;align-items:flex-start;gap:14px;color:var(--navy)}
.zone-point i{width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px rgba(24,147,205,.12);margin-top:7px;flex:0 0 auto}
.zone-point strong{display:block;font-size:16px;margin-bottom:2px}
.zone-point span{display:block;color:var(--muted);line-height:1.55}
.france-map-card{position:relative;min-height:500px;border-radius:30px;background:linear-gradient(145deg,#0c2340 0%,#123d65 52%,#1679ae 100%);box-shadow:0 26px 70px rgba(8,31,55,.20);overflow:hidden;display:grid;place-items:center;padding:32px}
.france-map-card:before{content:"";position:absolute;inset:-30%;background:radial-gradient(circle at 70% 20%,rgba(84,198,238,.28),transparent 35%),radial-gradient(circle at 25% 82%,rgba(255,255,255,.10),transparent 38%);pointer-events:none}
.france-map{position:relative;width:min(100%,430px);aspect-ratio:1/1;filter:drop-shadow(0 20px 28px rgba(0,0,0,.18))}
.france-shape{fill:url(#franceGradient);stroke:rgba(255,255,255,.85);stroke-width:3;stroke-linejoin:round}
.corsica-shape{fill:#58c2e8;stroke:rgba(255,255,255,.85);stroke-width:2}
.france-inner{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:5 8}
.fleurance-ring{fill:none;stroke:#fff;stroke-width:3;opacity:.48}
.perimeter-ring{fill:none;stroke-width:3}
.perimeter-gers{stroke:rgba(255,255,255,.96)}
.perimeter-occitanie{stroke:rgba(152,228,255,.95);stroke-dasharray:8 8}
.perimeter-france{stroke:rgba(255,255,255,.46);stroke-dasharray:14 10}
.perimeter-label text{font-family:Arial,Helvetica,sans-serif;fill:#fff;font-size:12px;font-weight:800;letter-spacing:.04em}
.perimeter-label rect{fill:rgba(3,29,52,.88);stroke:rgba(255,255,255,.14);stroke-width:1}
.fleurance-dot{fill:#fff;stroke:#1598ce;stroke-width:7}
.fleurance-label rect{fill:#fff;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.fleurance-label text{font-family:Arial,Helvetica,sans-serif;fill:#0c2340;font-weight:700;font-size:13px}
.map-legend{position:absolute;right:26px;top:88px;z-index:2;display:grid;gap:10px;padding:14px 14px 12px;border-radius:16px;background:rgba(6,25,44,.42);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
.map-legend-item{display:flex;align-items:center;gap:10px;color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.map-legend-line{width:28px;height:0;border-top-width:3px;border-top-style:solid}
.map-legend-line.gers{border-top-color:rgba(255,255,255,.96)}
.map-legend-line.occitanie{border-top-color:rgba(152,228,255,.95);border-top-style:dashed}
.map-legend-line.france{border-top-color:rgba(255,255,255,.46);border-top-style:dashed}
.map-caption{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;align-items:end;gap:18px;color:#fff}
.map-caption strong{display:block;font-size:18px;letter-spacing:.01em}.map-caption span{display:block;margin-top:5px;font-size:13px;color:rgba(255,255,255,.72)}
.map-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);white-space:nowrap;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.map-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:#65d0f3;box-shadow:0 0 0 5px rgba(101,208,243,.14)}
@media (max-width:900px){#zone-intervention{padding:72px 0}.zone-grid{grid-template-columns:1fr;gap:38px}.france-map-card{min-height:430px}.map-legend{top:92px;right:20px}}
@media (max-width:520px){.france-map-card{min-height:430px;border-radius:24px;padding:20px}.map-legend{position:relative;top:auto;right:auto;left:auto;margin:6px 0 0 auto;padding:10px 12px}.map-legend-item{font-size:10px}.map-caption{left:20px;right:20px;bottom:18px;align-items:flex-start;flex-direction:column}.map-badge{font-size:10px}.zone-points{margin-top:24px}}
@media (prefers-reduced-motion:reduce){.fleurance-ring{animation:none}}


/* Mise en ligne : liens vers les pages métiers, navigation et accessibilité. */
.skip-link{position:absolute;left:12px;top:-70px;z-index:100;padding:12px 16px;background:#fff;color:#031d34;border-radius:4px;font-weight:750}
.skip-link:focus{top:12px}
.card .detail-link{display:inline-block;margin-top:12px;color:#9dd8ff;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.card .detail-link:hover{color:#fff}
.footer .footer-links{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:18px;font-size:13px;color:#bbd6e8}
.footer .footer-links a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #7dc2ff;outline-offset:4px}
/* Pages métiers : identité graphique cohérente avec la page d’accueil. */
.inner-head{background:#031d34;color:#fff}
.inner-head .nav{min-height:112px}
.inner-head .brand-logo img{width:215px;height:100px}
.page-hero{color:#fff;background:linear-gradient(105deg,#031d34,#0a3a63);padding:70px 0 78px;position:relative;overflow:hidden}
.page-hero.with-photo{background:linear-gradient(90deg,rgba(1,19,34,.95) 0%,rgba(3,29,52,.84) 48%,rgba(3,29,52,.32) 100%),var(--page-photo) center 45%/cover no-repeat}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(43px,6vw,78px);line-height:1.04;margin:20px 0;letter-spacing:-.035em;max-width:900px}
.page-hero p{max-width:850px;font-size:19px;line-height:1.65;color:#d5e3ee}
.breadcrumb{font-size:13px;color:#a7cfeb}
.breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.service-content{padding:84px 0;background:#fff}
.service-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:64px;align-items:start}
.service-copy .lead{font-size:18px;line-height:1.78;margin:16px 0 28px;color:#4d6073}
.service-copy h2{font-size:clamp(28px,3.4vw,42px);color:#031d34;margin:32px 0 16px}
.service-copy p{line-height:1.75}
.service-aside{background:#eef6fc;border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(3,29,52,.06)}
.service-aside h2{font-size:23px;margin:0 0 14px;color:#031d34}
.service-aside p{line-height:1.7;color:#465b70}
.service-aside img{width:100%;height:auto;border-radius:8px;display:block;margin:18px 0}
.service-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:25px}
.service-links a{display:block;background:#0a3155;color:#fff;border-radius:8px;padding:22px;font-size:17px;font-weight:800}
.service-links a:hover{background:#124b79}
.service-aside .asbestos-mark{margin:10px auto 20px}
.service-cta{background:#031d34;color:#fff;padding:65px 0}
.service-cta h2{font-size:clamp(30px,4vw,46px);margin:0 0 12px}
.service-cta p{font-size:17px;line-height:1.65;color:#d4e3ef;max-width:740px}
.service-cta .btns{margin-top:26px}
@media(max-width:900px){.service-layout{grid-template-columns:1fr;gap:34px}.service-links{grid-template-columns:1fr}.inner-head .nav{min-height:90px}}
@media(max-width:640px){.page-hero{padding:58px 0 64px}.page-hero p{font-size:17px}.service-content{padding:65px 0}.service-aside{padding:20px}.inner-head .brand-logo img{width:170px;height:78px}}