.trade-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.trade > span { display: none; }
.trade { border: 1px solid rgba(255,255,255,.18); border-radius: 18px; box-shadow: 0 12px 24px rgba(0,0,0,.17); }
.trade:hover { box-shadow: 0 22px 34px rgba(0,0,0,.25); }
.trade:first-child { color: #fff; background: linear-gradient(180deg, rgba(113,43,0,.2), rgba(72,26,0,.88)), url('assets/couverture-couvreur.png') center / cover; }
.trade:first-child > span { color: #fff; }
.trade.trade-charpente { color: #fff; background: linear-gradient(180deg, rgba(104,56,14,.18), rgba(48,27,10,.88)), url('assets/charpente-artisan.png') center / cover; }
.trade-charpente > span { color: #fff; }
.charpente-modal { position: fixed; z-index: 50; inset: 0; display: none; place-items: center; padding: 22px; background: rgba(20,15,12,.78); }
.charpente-modal.is-open { display: grid; }
.charpente-dialog:has(.roof-guide) { max-height: 90dvh; overflow-y: auto; }
.roof-guide { margin: 20px; padding: 24px; border-radius: 18px; background: #fffaf4; color: #332a24; }
.roof-guide-intro { margin: 0 0 20px; font-size: 16px; line-height: 1.6; }
.roof-guide-list { list-style: none; margin: 0; padding: 0; }
.roof-guide-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; border-top: 1px solid #e9dacb; }
.roof-guide-list svg { width: 76px; height: 76px; border-radius: 18px; background: radial-gradient(ellipse at 35% 20%, #fffefa, #f0e7dc 75%); border: 1px solid #e2d4c3; box-shadow: inset 0 1px 2px #fff, 0 5px 12px #49322112; }
.roof-guide-list svg.material-icon { padding: 3px; }
.roof-guide-list h3 { margin: 0 0 7px; font-size: 27px; color: #923c0c; }
.roof-guide-list p { margin: 0; font-size: 15px; line-height: 1.65; }
.roof-guide-note { margin: 12px 0 0; padding: 16px; border-left: 3px solid var(--o); background: #f6e9d9; font-size: 14px; line-height: 1.6; }
@media (max-width: 600px) {
  .roof-guide { margin: 14px; padding: 16px; }
  .roof-guide-list li { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .roof-guide-list svg { width: 52px; height: 52px; }
  .roof-guide-list h3 { font-size: 23px; }
}
.charpente-dialog { position: relative; width: min(760px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: 24px; background: #102d40; box-shadow: 0 26px 70px rgba(0,0,0,.4); }
.charpente-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; color: #fff; }
.charpente-dialog-header p { margin: 0; color: #ffb05c; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.charpente-dialog-header h2 { margin: 6px 0 0; font-size: 31px; line-height: 1; }
.charpente-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; font-size: 24px; cursor: pointer; }
.charpente-scene { display: block; width: 100%; height: auto; margin-top: 4px; }
.coverage-diagram { margin: 6px 0 0; padding: 0 24px 25px; text-align: center; }
.coverage-diagram img { display: block; width: min(100%, 650px); max-height: 500px; margin: 0 auto; object-fit: contain; border-radius: 16px; background: #fff; }
.coverage-diagram figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 13px; font-family: Manrope, sans-serif; color: var(--ink); }
.coverage-diagram figcaption strong { font-size: 16px; }
.coverage-diagram figcaption span { font-size: 13px; color: #67707a; }
.charpente-pannes, .charpente-chevrons, .charpente-liteaux, .charpente-volige { transform-box: fill-box; transform-origin: center bottom; }
.blueprint-step { transform-box: fill-box; transform-origin: center bottom; }
.blueprint-step.step-1 { animation: blueprint-step-1 8s cubic-bezier(.2,.8,.25,1) infinite; }
.blueprint-step.step-2 { animation: blueprint-step-2 8s cubic-bezier(.2,.8,.25,1) infinite; }
.blueprint-step.step-3 { animation: blueprint-step-3 8s cubic-bezier(.2,.8,.25,1) infinite; }
.blueprint-step.step-4 { animation: blueprint-step-4 8s cubic-bezier(.2,.8,.25,1) infinite; }
.roof-tile-row { transform-box: fill-box; transform-origin: center bottom; }
.roof-3d-scene .roof-tile-row { filter: drop-shadow(0 7px 4px rgba(12, 15, 16, .35)); }
.roof-tile-row.tile-row-1 { animation: roof-tile-row-1 8s cubic-bezier(.2,.8,.25,1) infinite; }
.roof-tile-row.tile-row-2 { animation: roof-tile-row-2 8s cubic-bezier(.2,.8,.25,1) infinite; }
.roof-tile-row.tile-row-3 { animation: roof-tile-row-3 8s cubic-bezier(.2,.8,.25,1) infinite; }
.roof-tile-row.tile-row-4 { animation: roof-tile-row-4 8s cubic-bezier(.2,.8,.25,1) infinite; }
.roof-tile-row.tile-row-5 { animation: roof-tile-row-5 8s cubic-bezier(.2,.8,.25,1) infinite; }
@keyframes blueprint-step-1 { 0%,8% { transform:translateY(-155px);opacity:0; } 24%,100% { transform:translateY(0);opacity:1; } }
@keyframes blueprint-step-2 { 0%,24% { transform:translateY(-155px);opacity:0; } 40%,100% { transform:translateY(0);opacity:1; } }
@keyframes blueprint-step-3 { 0%,40% { transform:translateY(-155px);opacity:0; } 57%,100% { transform:translateY(0);opacity:1; } }
@keyframes blueprint-step-4 { 0%,57% { transform:translateY(-155px);opacity:0; } 75%,100% { transform:translateY(0);opacity:1; } }
@keyframes roof-tile-row-1 { 0%,25% { transform:translate3d(0,-150px,0) scale(.72);opacity:0; } 38%,100% { transform:translate3d(0,0,0) scale(1);opacity:1; } }
@keyframes roof-tile-row-2 { 0%,33% { transform:translate3d(0,-150px,0) scale(.72);opacity:0; } 46%,100% { transform:translate3d(0,0,0) scale(1);opacity:1; } }
@keyframes roof-tile-row-3 { 0%,41% { transform:translate3d(0,-150px,0) scale(.72);opacity:0; } 54%,100% { transform:translate3d(0,0,0) scale(1);opacity:1; } }
@keyframes roof-tile-row-4 { 0%,49% { transform:translate3d(0,-150px,0) scale(.72);opacity:0; } 62%,100% { transform:translate3d(0,0,0) scale(1);opacity:1; } }
@keyframes roof-tile-row-5 { 0%,57% { transform:translate3d(0,-150px,0) scale(.72);opacity:0; } 70%,100% { transform:translate3d(0,0,0) scale(1);opacity:1; } }
.charpente-pannes { animation: charpente-pose-pannes 8s cubic-bezier(.2,.8,.25,1) infinite; }
.charpente-chevrons { animation: charpente-pose-chevrons 8s cubic-bezier(.2,.8,.25,1) infinite; }
.charpente-liteaux { animation: charpente-pose-liteaux 8s cubic-bezier(.2,.8,.25,1) infinite; }
.charpente-volige { animation: charpente-pose-volige 8s cubic-bezier(.2,.8,.25,1) infinite; }
@keyframes charpente-pose-pannes { 0%,8% { transform:translateY(-155px);opacity:0; } 24%,100% { transform:translateY(0);opacity:1; } }
@keyframes charpente-pose-chevrons { 0%,24% { transform:translateY(-155px);opacity:0; } 40%,100% { transform:translateY(0);opacity:1; } }
@keyframes charpente-pose-liteaux { 0%,40% { transform:translateY(-155px);opacity:0; } 57%,100% { transform:translateY(0);opacity:1; } }
@keyframes charpente-pose-volige { 0%,57% { transform:translateY(-155px);opacity:0; } 75%,100% { transform:translateY(0);opacity:1; } }
@media (prefers-reduced-motion: reduce) { .charpente-pannes, .charpente-chevrons, .charpente-liteaux, .charpente-volige, .blueprint-step, .roof-tile-row { animation:none!important; transform:translateY(0); opacity:1; } }
@media (max-width: 600px) { .charpente-modal { padding: 14px; } .charpente-dialog { border-radius: 18px; } .charpente-dialog-header { padding: 17px 18px 0; } .charpente-dialog-header h2 { font-size: 25px; } .coverage-diagram { padding: 0 14px 18px; } }
.trade:nth-child(3) { color: #fff; background: linear-gradient(180deg, rgba(126,53,0,.24), rgba(67,28,4,.88)), url('assets/ravalement-facade-macon.png') center / cover; }
.trade:nth-child(3) > span { color: #fff; }
.trade:nth-child(4) { color: #fff; background: linear-gradient(180deg, rgba(59,25,5,.22), rgba(37,20,12,.9)), url('assets/peinture-exterieure-rmd.png') center / cover; }
.trade:nth-child(4) > span { color: #fff; }
.trade:nth-child(5) { color: #fff; background: linear-gradient(180deg, rgba(84,42,9,.2), rgba(42,25,14,.9)), url('assets/bardage-artisan.png') center / cover; }
.trade:nth-child(5) > span { color: #fff; }
.trade:nth-child(6) { color: #fff; background: linear-gradient(180deg, rgba(74,36,5,.2), rgba(37,20,12,.9)), url('assets/traitement-toiture.png') center / cover; }
.trade:nth-child(6) > span { color: #fff; }
.map-title { position: absolute; top: 22px; left: 22px; padding: 11px 14px; background: #211b17; color: #fff; font-size: 11px; font-weight: 800; }
.map-title span { color: var(--o); }

/* Ajustements ordinateur, tablette et mobile */
body { overflow-x: hidden; }
.trades .section-title { color: #fff; }
.trades .section-title > p:last-child { max-width: 400px; margin: 0; padding-left: 20px; border-left: 2px solid var(--o); color: #f2e9e2; font-size: 16px; font-weight: 600; line-height: 1.65; }
.contact-title > p:not(.eyebrow) { max-width: 480px; margin: 28px 0 34px; color: #f0e7e0; font: 22px/1.5 'DM Serif Display', serif; letter-spacing: -.01em; }
.contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contacts a { min-height: 76px; padding: 13px; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.055); transition: .2s; }
.contacts a:hover { transform: translateY(-2px); border-color: var(--o); background: rgba(255,121,0,.13); }
.contacts i { display: grid; flex: 0 0 38px; width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: var(--o); color: var(--ink); }
.contacts small { margin-bottom: 4px; color: #bcaea4; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.contacts span { font-size: 11px; font-weight: 700; line-height: 1.35; }
footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; min-height: 92px; font-family: Manrope, sans-serif; }
footer > span, footer address { margin: 0; color: #e8ded7; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; line-height: 1.55; text-transform: uppercase; }
footer > span:nth-child(2) { text-align: center; }
footer address { text-align: right; }
.intro > div:nth-of-type(1) > p { max-width: 590px; color: #574d46; font: 21px/1.6 'DM Serif Display', serif; letter-spacing: -.01em; }
.intro-proof { align-items: center; padding: 22px 0; }
.intro-proof img { display: block; width: min(100%, 300px); height: auto; filter: drop-shadow(0 12px 18px rgba(33, 27, 23, .14)); }
.intro-proof i { display: grid; flex: 0 0 58px; width: 58px; height: 58px; padding: 14px; border: 1px solid #f2c99c; border-radius: 50%; background: var(--o); color: var(--ink); }
.intro-proof strong { font-size: 14px; }
.intro-proof small { margin-top: 5px; font-size: 11px; }
.project-grid { grid-template-rows: 310px 120px; }
.project-a { grid-row: span 2; }
.project-video { background: #17120f; }
.project-video video { width: 100%; height: 100%; display: block; object-fit: cover; }
.project-note { grid-column: 1 / -1; }

/* Secteur d'intervention : composition équilibrée texte / carte */
.territory { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 590px; align-items: stretch; background: #f4eee7; }
.territory-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(72px, 8vw, 125px) clamp(32px, 8vw, 135px); }
.territory-copy .eyebrow { margin-bottom: 20px; }
.territory h2 { max-width: 560px; font-size: clamp(42px, 4.15vw, 66px); line-height: .98; }
.territory h2 em { white-space: nowrap; }
.territory-copy > p:not(.eyebrow) { max-width: 480px; margin: 28px 0 34px; color: #61554d; font-size: 15px; line-height: 1.8; }
.territory .dark-btn { min-width: 205px; border-radius: 999px; }
.territory-map { min-height: 0; margin: 28px 28px 28px 0; overflow: hidden; border-radius: 24px; box-shadow: 0 18px 36px rgba(49, 35, 25, .14); }
.territory-map iframe { min-height: 0; height: 100%; display: block; }
.map-title { top: 20px; left: 20px; border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.map-badge { bottom: 20px; left: 20px; border-radius: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.15); }
.google-source { display: inline-flex; align-items: center; gap: 11px; margin-top: 22px; padding: 8px 13px 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.google-source img { display: block; width: 72px; height: auto; }
.google-source span { padding-left: 11px; border-left: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Carrousel des partenaires fournisseurs */
.partners { padding: 62px 0; overflow: hidden; background: #fff; border-top: 1px solid #e8ded5; border-bottom: 1px solid #e8ded5; }
.partners-heading { max-width: 1300px; margin: 0 auto 30px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.partners-heading .eyebrow { margin: 0; color: var(--od); font-size: 13px; letter-spacing: .13em; }
.partners-heading > p:last-child { max-width: 500px; margin: 0; color: #554a43; font: 21px/1.35 'DM Serif Display', serif; letter-spacing: -.01em; }
.partners-window { overflow: hidden; }
.partners-track { display: flex; width: max-content; gap: 16px; padding-left: 16px; animation: partners-scroll 32s linear infinite; }
.partners-window:hover .partners-track { animation-play-state: paused; }
.partner-logo { width: 184px; height: 82px; display: flex; align-items: center; justify-content: center; flex: 0 0 184px; padding: 12px; border: 1px solid #e5ddd5; border-radius: 16px; background: #fff; }
.partner-logo img { display: block; width: 100%; max-width: 156px; height: 100%; max-height: 54px; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
@keyframes partners-scroll { to { transform: translateX(calc(-50% - 8px)); } }
@media (prefers-reduced-motion: reduce) { .partners-track { animation: none; overflow-x: auto; } }
@media (max-width: 900px) { .project-grid { grid-template-rows: 300px 250px 250px 120px; } .project-a { grid-row: auto; } .project-note { grid-column: auto; } }
@media (max-width: 1180px) and (min-width: 901px) {
  .header { padding-right: 3vw; padding-left: 3vw; }
  .header nav a { padding-right: 10px; padding-left: 10px; }
  .trade-list { grid-template-columns: repeat(3, 1fr); }
  .trade { min-height: 300px; }
  .contact { gap: 55px; }
  .contacts { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .hero-copy { padding-right: 8vw; padding-left: 8vw; }
  .intro, .trades, .projects, .reviews, .contact { padding-right: 7vw; padding-left: 7vw; }
  .section-title { gap: 14px; }
  .section-title > p:last-child { margin: 0; }
  .contact form { width: 100%; }
  .contacts { column-gap: 20px; row-gap: 18px; }
  .partners-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .territory { grid-template-columns: 1fr; min-height: 0; }
  .territory-copy { padding: 80px 7vw 64px; }
  .territory-map { min-height: 410px; margin: 0 7vw 7vw; }
  .territory-map iframe { min-height: 410px; }
}
@media (max-width: 600px) {
  .utility { font-size: 9px; }
  .hero { min-height: 0; }
  .hero-copy { min-height: 485px; padding-top: 68px; padding-bottom: 68px; }
  h1 { font-size: clamp(48px, 14vw, 68px); }
  .hero-image { min-height: 310px; }
  .hero-label { padding: 17px; gap: 11px; }
  .hero-label b { font-size: 31px; }
  .intro { padding-top: 72px; padding-bottom: 72px; }
  .intro h2, .section-title h2, .territory h2, .contact h2 { font-size: 42px; }
  .trade-list { gap: 12px; }
  .trade { min-height: 218px; border-radius: 15px; }
  .trade div > svg { margin-bottom: 15px; }
  .project-grid { gap: 12px; }
  .project h3 { font-size: 26px; }
  .territory-copy { padding: 70px 7vw 50px; }
  .territory h2 { font-size: clamp(40px, 12vw, 52px); }
  .territory-copy > p:not(.eyebrow) { margin-top: 22px; font-size: 14px; }
  .territory-map { min-height: 340px; margin: 0 5vw 5vw; border-radius: 18px; }
  .territory-map iframe { min-height: 340px; }
  .partners { padding: 50px 0; }
  .partners-heading { margin-bottom: 24px; }
  .partners-heading > p:last-child { font-size: 19px; }
  .partner-logo { width: 150px; height: 70px; flex-basis: 150px; font-size: 18px; }
  .map-title { top: 14px; left: 14px; }
  .map-badge { bottom: 14px; left: 14px; }
  .review-window { margin-right: -7vw; }
  .review-track figure { width: min(310px, calc(100vw - 50px)); }
  .contact { padding-top: 75px; padding-bottom: 75px; }
  .contacts { grid-template-columns: 1fr; }
  .contact-title > p:not(.eyebrow) { font-size: 20px; }
  footer { display: flex; gap: 9px; }
  footer > span, footer address { text-align: left; font-size: 10px; }
  .contact form { padding: 25px 21px; }
  .button { width: 100%; }
  footer { padding-right: 7vw; padding-left: 7vw; }
}