/* Une déclinaison intérieure du design Work, sans altérer style.css ni l'accueil. */
.interior-hero{position:relative;isolation:isolate;overflow:hidden;min-height:26rem;display:flex;align-items:center;background:linear-gradient(110deg,#fff9 0%,#f0f2f6ab 48%,#e8eaf470 72%),var(--metal);border-bottom:1px solid #cbd0d8}
.interior-hero-photo{position:absolute;inset:0 0 0 auto;width:47%;background:url('hero-roof.webp') center center/cover no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#000 24%);z-index:-1}
.interior-hero-text{padding:2rem 0 2.4rem 5.7rem;max-width:54rem}
.interior-breadcrumb{font-size:.85rem;color:#6d7582;margin-bottom:1rem;display:flex;gap:.5rem}
.interior-breadcrumb a{color:#353b48;text-decoration:underline;text-underline-offset:4px}
.interior-hero h1{font-size:3.3rem;line-height:1.01;letter-spacing:-.105rem;max-width:43rem;margin:.5rem 0 .8rem;font-weight:900}
.interior-hero h1 span,.section-heading h2 span,.approach-section h2 span{display:block;color:var(--red)}
.interior-lead{font-size:1.16rem;line-height:1.4;color:#484f5b;max-width:37.7rem;margin-bottom:1.4rem}
.interior-actions{display:flex;gap:.8rem;align-items:center}
.interior-actions .button{font-size:1.1rem;height:3.35rem}
.interior-actions .button.outline{font-size:1.2rem}
.intro-strip{display:flex;align-items:center;justify-content:center;gap:2.5rem;padding:1.05rem 1rem;background:linear-gradient(120deg,#f5f6f8,#eef0f2);font-size:.92rem;color:#343b49;border-bottom:1px solid #dadde1}
.intro-strip strong{color:var(--red)}
.intro-dot{width:5px;height:5px;background:#c4000a;border-radius:50%;flex:none}
.all-services{padding:3rem 3.5rem 3.5rem;background:linear-gradient(180deg,#fff,#f7f8fa)}
.section-heading{text-align:center;max-width:65rem;margin:0 auto 2rem}
.section-heading .eyebrow{color:var(--red)}
.section-heading h2{font-size:2.55rem;letter-spacing:-.06rem;line-height:1.1;margin:.5rem 0}
.section-heading h2 span{display:inline}
.section-heading>p:last-child{font-size:1.03rem;color:#59616f;line-height:1.45;margin-top:.65rem}
.services-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;max-width:94rem;margin:auto}
.service-tile{min-width:0;overflow:hidden;background:#fff;border:1px solid #dadde2;border-radius:.6rem;box-shadow:0 5px 20px #1b253117;display:flex;flex-direction:column}
.tile-image{height:10.1rem;background:linear-gradient(145deg,#f7f8fa,#d4d8dd);overflow:hidden}
.tile-image img{width:100%;height:100%;object-fit:cover}
.metal-service-icon{height:100%;display:flex;align-items:center;justify-content:center;color:#626c7b;background:linear-gradient(145deg,#f5f6f7,#babfc5,#f4f5f6)}
.tile-body{padding:1.15rem 1.2rem 1.1rem;display:flex;flex-direction:column;flex:1;gap:.65rem}
.tile-num{color:var(--red);font-size:.81rem;letter-spacing:.09rem;font-weight:900}
.tile-body h3{font-weight:900;font-size:1.25rem;line-height:1.14;letter-spacing:-.025rem}
.tile-body p{font-size:.94rem;line-height:1.38;color:#555d6a;flex:1}
.tile-cta{display:flex;align-items:center;gap:.45rem;align-self:flex-start;margin-top:.4rem;border:0;background:none;color:#c80009;font-size:.95rem;font-weight:700;padding:.55rem 0;cursor:pointer}
.tile-cta svg{width:1.15rem;height:1.15rem}
.tile-cta:hover{text-decoration:underline;text-underline-offset:3px}
.approach-section{display:grid;grid-template-columns:1.5fr .8fr;gap:4rem;align-items:center;padding:3rem 5rem;background:linear-gradient(115deg,#ffffffcc,#ffffffdb),var(--metal);background-size:auto,5.32rem 25.625rem;border-top:1px solid #d5d8df;border-bottom:1px solid #d5d8df}
.approach-section h2{font-size:2.55rem;line-height:1.05;font-weight:900;letter-spacing:-.06rem;margin:.65rem 0 .8rem}
.approach-section>div>p:last-child{max-width:41rem;font-size:1.04rem;line-height:1.5;color:#505967}
.approach-note{border-left:3px solid var(--red);padding:1rem 1.4rem;background:#fff8;display:flex;flex-direction:column;gap:.35rem}
.approach-number{font-size:4.5rem;color:#aeb4be;font-weight:900;line-height:1}
.approach-note strong{font-size:1.14rem}
.approach-note p{font-size:.95rem;line-height:1.4;color:#59616f}
.interior-contact{display:flex;justify-content:space-between;align-items:center;gap:2.5rem;min-height:13rem;padding:2.2rem 5.5rem 2.5rem;background:linear-gradient(90deg,#201d1dd9,#1f1b1b50),url('../assets/couvreur-desktop.webp') center/cover no-repeat;color:#fff}
.interior-contact .eyebrow{color:#fff;font-weight:400}
.interior-contact h2{font-size:2.6rem;letter-spacing:-.065rem;margin:.35rem 0}
.interior-contact p:last-child{max-width:34rem;font-size:1rem;line-height:1.4}
.contact-action-buttons{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;min-width:22rem}
.contact-action-buttons .button{font-size:1.1rem}
.light-tel{text-align:center;font-size:1.15rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
@media (max-width:1000px){.interior-hero{min-height:25rem}.interior-hero-text{padding-left:3rem}.interior-hero-photo{width:46%}.all-services{padding:2.5rem 1.6rem}.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.approach-section{padding:2.5rem 2.5rem}.interior-contact{padding:2.5rem}}
@media (max-width:760px){.interior-hero{min-height:0;display:block}.interior-hero-text{padding:2rem 1.5rem 2.1rem}.interior-hero h1{font-size:clamp(30px,5.7vw,43px);max-width:580px}.interior-lead{max-width:510px}.interior-hero-photo{width:45%}.intro-strip{gap:1rem;font-size:14px}.approach-section{grid-template-columns:1fr;gap:1.5rem}.interior-contact{flex-direction:column;align-items:flex-start}.contact-action-buttons{min-width:0;width:100%;max-width:440px}}
@media (max-width:600px){.interior-hero{min-height:0;background:linear-gradient(90deg,#f5f6f8e8,#f5f6f8c9),var(--metal)}.interior-hero-photo{width:62%;opacity:.38;mask-image:linear-gradient(90deg,transparent,#000)}.interior-hero-text{padding:20px 16px 23px}.interior-breadcrumb{font-size:13px;margin-bottom:16px}.interior-hero .eyebrow{font-size:13px}.interior-hero h1{font-size:clamp(28px,8vw,34px);letter-spacing:-.6px;line-height:1.06;margin:8px 0 11px}.interior-lead{font-size:15px;line-height:1.4;margin-bottom:14px}.interior-actions{display:grid;grid-template-columns:1fr;max-width:345px;gap:9px}.interior-actions .button,.interior-actions .button.outline{min-height:48px;height:auto;font-size:15px;padding:11px}.intro-strip{flex-wrap:wrap;gap:8px 12px;padding:13px 12px;font-size:12px;text-align:center}.intro-dot{width:4px;height:4px}.all-services{padding:28px 12px}.section-heading{margin:0 auto 22px}.section-heading h2{font-size:27px;letter-spacing:-.45px;line-height:1.09}.section-heading>p:last-child{font-size:14px;line-height:1.4;margin-top:10px}.services-grid{grid-template-columns:1fr;gap:12px}.service-tile{display:grid;grid-template-columns:108px 1fr;min-height:147px;align-items:stretch}.tile-image{height:auto;min-height:147px}.tile-body{padding:13px 12px;gap:5px}.tile-num{font-size:11px}.tile-body h3{font-size:17px;line-height:1.13;letter-spacing:-.1px}.tile-body p{font-size:12.5px;line-height:1.33}.tile-cta{font-size:13px;margin-top:2px;padding:5px 0}.tile-cta svg{width:14px;height:14px}.approach-section{padding:28px 16px;background-size:auto,5.32rem 25.625rem}.approach-section h2{font-size:29px;letter-spacing:-.45px}.approach-section>div>p:last-child{font-size:14px;line-height:1.45}.approach-note{padding:12px 16px}.approach-number{font-size:58px}.approach-note strong{font-size:16px}.approach-note p{font-size:13px}.interior-contact{padding:29px 16px 31px;gap:16px}.interior-contact h2{font-size:31px}.interior-contact p:last-child{font-size:14px;line-height:1.4}.contact-action-buttons .button{min-height:48px;font-size:15px}.light-tel{font-size:16px}}
@media(max-width:360px){.service-tile{grid-template-columns:92px 1fr}.tile-body{padding:12px 10px}.tile-body h3{font-size:16px}}

/* Huitième rubrique : résine acrylique hydrofuge, même habillage que les autres prestations. */
.resin-service-icon{color:#727987;background:linear-gradient(135deg,#f4f5f7,#b4b9c1 54%,#f4f5f7)}
.metal-service-icon svg{width:6rem;height:4.6rem;max-width:76%;max-height:76%}
.expertise-complements{max-width:94rem;margin:2.8rem auto 0}
.expertise-heading{text-align:center;margin-bottom:1.25rem}
.expertise-heading .eyebrow{color:var(--red)}
.expertise-heading h3{font-size:1.9rem;line-height:1.1;letter-spacing:-.04rem;margin:.4rem 0}
.expertise-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.expertise-card{border-radius:.6rem;background:linear-gradient(115deg,#fff,#f5f6f8);border:1px solid #d8dce2;border-left:4px solid var(--red);padding:1.35rem 1.5rem;box-shadow:0 5px 20px #1b253112}
.expertise-label{font-size:.77rem;letter-spacing:.07em;text-transform:uppercase;font-weight:900;color:var(--red)}
.expertise-card h4{font-size:1.45rem;letter-spacing:-.03em;line-height:1.17;margin:.45rem 0 .7rem}
.expertise-card p{font-size:1rem;line-height:1.46;color:#555d6a;margin:0}
.expertise-footnote{margin:1.1rem auto 0;max-width:82rem;text-align:center;font-size:.9rem;line-height:1.5;color:#59616f}
@media(max-width:600px){.expertise-complements{margin-top:25px}.expertise-heading h3{font-size:25px}.expertise-grid{grid-template-columns:1fr;gap:12px}.expertise-card{padding:18px 16px}.expertise-card h4{font-size:20px}.expertise-card p{font-size:14px}.expertise-footnote{font-size:12.5px;line-height:1.4}}


/* Ajustement ciblé : photos sur mobile aux proportions de la maquette validée.
   L'ordinateur, l'accueil, les couleurs, et les huit photographies restent intacts. */
@media (max-width: 600px) {
  .services-grid { gap: 10px; }
  .service-tile {
    grid-template-columns: 38% minmax(0, 1fr);
    min-height: 0;
    align-items: stretch;
  }
  .tile-image { height: 100%; min-height: 172px; }
  .tile-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .tile-body { min-width: 0; padding: 12px 11px; gap: 5px; }
  .tile-body h3 { font-size: 16px; line-height: 1.18; }
  .tile-body p {
    font-size: 12.5px;
    line-height: 1.34;
  }
  .tile-cta { margin-top: 4px; padding: 4px 0; font-size: 12.5px; }
}
@media (max-width: 360px) {
  .service-tile { grid-template-columns: 36% minmax(0, 1fr); }
  .tile-image { min-height: 178px; }
  .tile-body { padding: 11px 9px; }
  .tile-body h3 { font-size: 15px; }
  .tile-body p { font-size: 12px; }
}

/* Lien réel vers la première page détaillée, sans changement visuel de la carte. */
.tile-photo-link{display:block;width:100%;height:100%}.tile-photo-link img{width:100%;height:100%;object-fit:cover}.tile-body h3 a{color:inherit;text-decoration:none}.tile-body h3 a:hover{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}.tile-detail-link{color:#c80009;text-decoration:none}.tile-detail-link:hover{text-decoration:underline;text-underline-offset:3px}