/*
Theme Name: Atlas Étanchéité
Theme URI: https://atlas-etancheite.ma
Author: Atlas Étanchéité
Description: Thème WordPress sur mesure fidèle au site statique Atlas Étanchéité.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: atlas-etancheite
*/

/* =========================================================
   DESIGN TOKENS
========================================================= */
:root{
  --night-900:#0c1912;
  --forest:#1c4a34;
  --forest-deep:#0f2a1e;
  --green-deep:#173a29;
  --cream:#f6f2e7;
  --paper:#fffdf8;
  --white:#ffffff;
  --ink-900:#1b1c19;
  --gold-500:#d3a94b;
  --gold-600:#bd9138;
  --on-cream-muted:#5c5b52;
  --on-night-strong:#f5f1e4;
  --on-night-muted:#c8cabe;
  --on-night-body:#d7d9cd;
  --border-gold-soft:rgba(211,169,75,.28);

  --radius-lg:16px;
  --radius-md:10px;
  --radius-pill:999px;

  --shadow-card:0 10px 28px rgba(20,30,20,.08);
  --shadow-hover:0 18px 38px rgba(20,30,20,.14);
  --shadow-night:0 10px 30px rgba(0,0,0,.35);

  --space-3:.75rem;
  --space-4:1.25rem;
  --space-5:1.75rem;
  --space-6:2.5rem;

  --fs-body-sm:.95rem;
  --container:1200px;
  --container-md:980px;

  --font-display:'Anton', Impact, sans-serif;
  --font-script:'Caveat', cursive;
  --font-body:'Mulish', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* =========================================================
   WORDPRESS THEME INTEGRATION
========================================================= */
body{font-size:var(--ae-body-size,16px)}
h2{font-size:clamp(1.9rem,3.4vw,var(--ae-h2-max,44px))}
.home-hero__heading{font-size:clamp(2.55rem,5.2vw,var(--ae-hero-max,64px))}
.custom-logo{display:block;max-height:54px;width:auto}
.nav__custom-logo,.nav__custom-logo .custom-logo-link{display:block}
.nav__custom-logo .custom-logo{max-width:220px}
.footer .custom-logo{max-height:96px;max-width:220px}
.footer__logo-mark{flex-direction:column;gap:.1rem;width:auto;min-width:96px;padding:1rem;border-radius:10px}
.footer__logo-mark span{font-size:1.6rem}
.footer__logo-mark strong{font-family:var(--font-body);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}
.footer__menus .menu{list-style:none;margin:0;padding:0}
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-bottom:1.25rem;font-size:.84rem;font-weight:700;color:var(--on-cream-muted)}
.surface-night .breadcrumbs{color:var(--on-night-muted)}
.breadcrumbs a{text-decoration:underline;text-underline-offset:3px}
.entry-content{font-size:1.05rem}
.entry-content>*{max-width:var(--container-md);margin-left:auto;margin-right:auto}
.entry-content>.alignwide{max-width:var(--container)}
.entry-content>.alignfull,.service-flexible-content>.elementor{max-width:none}
.entry-content h2,.entry-content h3{margin-top:2em}
.entry-content ul{list-style:disc;padding-left:1.4rem;margin:0 0 1.25rem}
.entry-content ol{padding-left:1.4rem;margin:0 0 1.25rem}
.entry-content a:not(.btn){color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.generic-page .entry-content{padding:4rem 1.5rem}
.generic-page .entry-content--elementor{padding:0}

.page-hero{padding:4.5rem 0 3.5rem}
.page-hero h1,.blog-hero h1,.service-hero h1{font-size:clamp(2.5rem,5vw,4.6rem)}
.service-hero{position:relative;min-height:500px;overflow:hidden;display:flex;align-items:flex-end;color:var(--on-night-strong)}
.service-hero__image,.service-hero__scrim{position:absolute;inset:0;width:100%;height:100%}
.service-hero__image{object-fit:cover}
.service-hero__scrim{background:linear-gradient(90deg,rgba(6,17,11,.92) 0%,rgba(6,17,11,.75) 46%,rgba(6,17,11,.18) 100%)}
.service-hero__inner{position:relative;z-index:1;width:100%;padding-top:6rem;padding-bottom:5rem}
.service-hero__inner h1{max-width:15ch}
.service-hero__lead{font-size:1.15rem;max-width:55ch;margin:1rem 0 1.75rem;color:var(--on-night-body)}
.service-flexible-content:empty{min-height:5rem}
.service-flexible-content:not(:has(.elementor)){padding:4rem 1.5rem}

.global-bottom-cta{padding:3.5rem 0;color:var(--on-night-body)}
.global-bottom-cta__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.global-bottom-cta h2{color:var(--on-night-strong)}
.global-bottom-cta p{max-width:58ch;margin-bottom:0}
.btn--outline-light{border-color:rgba(255,255,255,.65);color:#fff;background:transparent}
.btn--outline-light:hover{background:#fff;color:var(--forest)}

.blog-hero{padding:4rem 0 0}
.blog-hero h1{max-width:20ch}
.blog-hero__excerpt{max-width:64ch;font-size:1.15rem;color:var(--on-cream-muted)}
.blog-meta{display:flex;gap:1.25rem;font-size:.85rem;font-weight:700;color:var(--on-cream-muted);margin:1.25rem 0 2rem}
.blog-hero__media{margin:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;max-height:590px}
.blog-hero__media img{width:100%;height:100%;object-fit:cover}
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:4rem;padding-top:4.5rem;padding-bottom:5rem}
.blog-layout .article-content>*{margin-left:0;margin-right:0}
.blog-sidebar{display:flex;flex-direction:column;gap:1.25rem}
.article-toc,.sidebar-cta,.blog-widget{background:var(--cream);border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-md);padding:1.4rem}
.article-toc{position:sticky;top:90px}
.article-toc h2,.sidebar-cta h2,.blog-widget h3{font-size:1.3rem}
.article-toc ol{margin:0;padding-left:1.1rem}
.article-toc li{margin:.55rem 0;font-size:.88rem}
.article-toc li.is-sub{margin-left:.75rem}
.article-toc a:hover{color:var(--gold-600)}
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.post-card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card)}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card__body{padding:1.4rem}
.post-card h2,.post-card h3{font-size:1.35rem}
.related-posts> .container>h2{margin-bottom:2rem}
.navigation.pagination{margin-top:2.5rem}
.nav-links{display:flex;gap:.5rem;justify-content:center}
.page-numbers{padding:.65rem .9rem;border:1px solid rgba(0,0,0,.1);border-radius:6px}
.page-numbers.current{background:var(--forest);color:#fff}
.error-page{min-height:65vh;display:flex;align-items:center;padding:6rem 0}

@media(max-width:899px){
  .blog-layout{grid-template-columns:1fr;gap:2.5rem}
  .article-toc{position:static}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .global-bottom-cta__inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:599px){
  .service-hero{min-height:580px}
  .service-hero__scrim{background:linear-gradient(0deg,rgba(6,17,11,.94) 0%,rgba(6,17,11,.58) 70%,rgba(6,17,11,.35) 100%)}
  .service-hero__inner{padding-top:5rem;padding-bottom:3.5rem}
  .post-grid{grid-template-columns:1fr}
  .blog-layout{padding-top:3rem;padding-bottom:3.5rem}
  .page-hero{padding:3.5rem 0 2.75rem}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0 0 .5rem;font-weight:400}
h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
h3{font-size:1.35rem}
p{margin:0 0 1rem}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.container--wide{
  max-width:1400px;
  margin:0 auto;
  padding:0 1.5rem;
}
.container--md{max-width:var(--container-md);margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section--sm{padding:2.5rem 0}
.section--md{padding:4rem 0}
.text-center{text-align:center}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:.75rem 1rem;z-index:999}
.skip-link:focus{left:1rem;top:1rem}

.surface-paper{background:var(--paper)}
.surface-cream{background:var(--cream)}
.surface-night{background:var(--night-900);color:var(--on-night-body)}
.surface-forest{background:var(--forest);color:var(--on-night-body)}
.surface-forest-deep{background:var(--forest-deep);color:var(--on-night-muted)}
.surface-gold{background:var(--gold-500);color:var(--forest-deep)}

.eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  color:var(--gold-600);
  margin-bottom:.6rem;
}
.script-accent{
  font-family:var(--font-script);
  font-size:1.9rem;
  color:var(--gold-600);
  display:block;
  margin-bottom:.25rem;
}
.lead{font-size:1.1rem;color:var(--ink-900);max-width:52ch} 
.lead2{font-size:1.1rem;color:var(--on-night-body);max-width:52ch} 
.section-head{margin-bottom:2.5rem}
.section-head.is-center{text-align:center;margin-left:auto;margin-right:auto}
.section-head.is-center .lead{margin-left:auto;margin-right:auto}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;

  font-family:var(--font-body);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;

  font-size:.92rem;
  padding:.95rem 1.6rem;

  /* NEW DESIGN LANGUAGE */
  border-radius:8px;

  border:2px solid transparent;
  cursor:pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;

  white-space:nowrap;
}
.btn svg{flex-shrink:0}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:var(--gold-500);color:var(--forest-deep)}
.btn--gold:hover{background:var(--gold-600);box-shadow:var(--shadow-hover)}
.btn--forest{background:var(--forest);color:var(--on-night-strong)}
.btn--forest:hover{background:var(--forest-deep)}
.btn--green{background:var(--forest);color:var(--on-night-strong)}
.btn--outline{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn--outline:hover{background:var(--forest);color:#fff}
.btn--sm{padding:.6rem 1.1rem;font-size:.8rem}
.btn--xl{padding:1.15rem 1.9rem;font-size:1rem}
.btn-group{display:flex;flex-wrap:wrap;gap:1rem}
.btn-group.is-center{justify-content:center}

.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:800;color:var(--forest);font-size:.9rem;text-transform:uppercase;letter-spacing:.03em}
.link-arrow svg{transition:transform .15s ease}
a:hover .link-arrow svg{transform:translateX(4px)}

.icon-chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--cream);color:var(--forest);flex-shrink:0;
}

/* Placeholder image blocks (stand in for real photography) */
.ph{
  position:relative;width:100%;height:100%;min-height:180px;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 12px, rgba(0,0,0,0) 12px 24px),
    linear-gradient(135deg, #d9d3c1, #c3bda8);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#6b6656;font-family:var(--font-body);font-weight:700;font-size:.85rem;
  letter-spacing:.03em;text-transform:uppercase;border-radius:inherit;
}
.ph::before{content:'';position:absolute;inset:0;border:1px dashed rgba(0,0,0,.15);border-radius:inherit}
.ph span{padding:0 1rem}

/* =========================================================
   HEADER / NAV
========================================================= */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.06)}
.nav__bar{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding:.85rem 1.5rem}
.nav__logo{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:1.1rem;letter-spacing:.02em;color:var(--forest);flex-shrink:0}
.nav__logo-mark{width:44px;height:44px;border-radius:50%;background:var(--forest);color:var(--gold-500);display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
.google-review-sticker{display:none}
@media(min-width:900px){
  .google-review-sticker{
    display:flex;align-items:center;gap:.6rem;
    border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-pill);
    padding:.4rem .9rem .4rem .5rem;background:#fff;box-shadow:var(--shadow-card);
  }
}
.g-logo-svg{width:1.6rem;height:1.6rem;flex-shrink:0}
.sticker-content{display:flex;flex-direction:column;line-height:1.1}
.rating-line{display:flex;align-items:center;gap:.35rem;font-weight:800;font-size:.85rem}
.stars-row{display:flex;color:var(--gold-500)}
.star-vector{width:.85rem;height:.85rem;fill:currentColor}
.count-text{font-size:.72rem;color:var(--on-cream-muted)}

.nav__toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem;position:relative;z-index:2}
.nav__toggle span{width:24px;height:2px;background:var(--ink-900);display:block;transform-origin:center;transition:transform .2s ease,opacity .2s ease}
.nav[data-open] .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav[data-open] .nav__toggle span:nth-child(2){opacity:0}
.nav[data-open] .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav__buttons{display:none}
.nav__menu{
  position:fixed;inset:0 0 0 auto;width:min(88vw,360px);height:100vh;background:var(--paper);
  padding:5.5rem 1.5rem 2rem;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto;
  box-shadow:-10px 0 30px rgba(0,0,0,.15);
}
.nav[data-open] .nav__menu{transform:translateX(0)}
.nav__links{display:flex;flex-direction:column;gap:.25rem}
.nav__link{display:block;padding:.85rem 0;font-weight:700;border-bottom:1px solid rgba(0,0,0,.06)}
.nav__dropdown{border-bottom:1px solid rgba(0,0,0,.06)}
.nav__dropbtn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;padding:.85rem 0;font-family:var(--font-body);font-weight:700;font-size:1rem;cursor:pointer;color:var(--ink-900)}
.nav__chev{transition:transform .15s ease}
.nav__dropdown[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__dropmenu{display:none;padding:0 0 .5rem 1rem}
.nav__dropdown[aria-expanded="true"] .nav__dropmenu{display:block}
.nav__droplink{display:block;padding:.5rem 0;color:var(--on-cream-muted);font-size:.92rem}
.nav__phonebox{display:none}

@media(min-width:1280px){
  .nav__bar{width:100%;max-width:1490px;padding:1rem 1.5rem}
  .nav__toggle{display:none}
  .nav__menu{position:static;width:auto;height:auto;transform:none;box-shadow:none;padding:0;display:flex;align-items:center;gap:2rem;background:transparent}
  .nav__links{flex-direction:row;align-items:center;gap:1.75rem}
  .nav__link{padding:.4rem 0;border-bottom:0;font-size:.95rem}
  .nav__dropdown{position:relative;border-bottom:0}
  .nav__dropbtn{padding:.4rem 0;font-size:.95rem}
  .nav__dropmenu{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-hover);
    padding:.75rem;min-width:240px;margin-top:.75rem;
  }
  .nav__dropdown[aria-expanded="true"] .nav__dropmenu{display:block}
  .nav__droplink{padding:.55rem .75rem;border-radius:6px}
  .nav__droplink:hover{background:var(--cream)}
  .nav__buttons{display:flex;align-items:center;gap:1rem}
  .nav__phonebox{display:flex;flex-direction:column;line-height:1.15;text-align:right}
  .nav__phonebox-num{display:flex;align-items:center;gap:.4rem;font-weight:800;color:var(--forest)}
   .nav__phonebox-sub{font-size:.72rem;color:var(--on-cream-muted)}
}

@media(min-width:1280px) and (max-width:1489px){
  .nav__buttons>.btn{display:none}
  .nav__phonebox{flex-shrink:0;white-space:nowrap}
}

/* =========================================================
   HERO
========================================================= */
.home-hero{
  position:relative;
  overflow:hidden;
}
.home-hero__pic{
  position:absolute;
  inset:0 0 0 34%;
}

.home-hero__bg{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% center;
}

.home-hero__scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    var(--night-900) 0%,
    var(--night-900) 34%,
    rgba(12,25,18,.94) 42%,
    rgba(12,25,18,.55) 54%,
    rgba(12,25,18,.08) 70%,
    transparent 82%
  );
}
.home-hero__inner{position:relative;padding:4.5rem 1.5rem 3.5rem}
.home-hero__content{max-width:640px}
.home-hero__heading{margin-bottom:1rem}
.home-hero__line{display:block;font-size:clamp(2.4rem,7vw,4.2rem)}
.home-hero__line--gold{color:var(--gold-500)}
.home-hero__rule{display:block;width:70px;height:4px;background:var(--gold-500);border-radius:2px;margin:1.1rem 0}
.home-hero__sub{font-size:1.15rem;font-weight:600;color:var(--on-night-strong)}
.home-hero__bullets{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0}
.home-hero__bullets li{display:flex;gap:.6rem;align-items:flex-start;color:var(--on-night-body)}
.home-hero__check{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--gold-500);color:var(--forest-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.15rem}
.home-hero__check svg{width:.8rem;height:.8rem}
.home-hero__proof{display:flex;align-items:center;gap:.6rem;margin:1rem 0}
.home-hero__g{width:1.4rem;height:1.4rem}
.home-hero__stars{display:flex;color:var(--gold-500)}
.home-hero__stars svg{width:1rem;height:1rem}
.home-hero__proof-text{font-weight:700;font-size:.9rem}
.home-hero__licensed{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--on-night-strong);margin-bottom:1.5rem}
.home-hero__buttons{margin-top:1rem}
.home-hero__btn-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.home-hero__btn-top{font-size:.68rem;opacity:.85}
.home-hero__btn-main{font-size:1.05rem}
.home-hero__btn-note{font-size:.65rem;font-weight:600;text-transform:none;opacity:.75}
@media (max-width:767px){
  .home-hero__pic{
    bottom:-60px;
    inset: 0 0 0 0%;
  }
}

/* =========================================================
   TRUST STRIP
========================================================= */
.trust{padding:1.5rem 0;border-bottom:1px solid rgba(0,0,0,.06)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem 2rem}
.trust__chip{display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.88rem;color:var(--forest)}
.trust__icon{width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;color:var(--gold-600)}

/* =========================================================
   MARQUEE
========================================================= */
.marquee{overflow:hidden;padding:.9rem 0}
.marquee__track{display:flex;width:max-content;animation:marquee 28s linear infinite;gap:2.5rem}
.marquee__item{display:flex;align-items:center;gap:2.5rem;font-family:var(--font-display);text-transform:uppercase;font-size:1.1rem;color:var(--on-night-strong);white-space:nowrap}
.marquee__star{color:var(--gold-500)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* =========================================================
   TESTIMONIALS
========================================================= */
.tm__head{margin-bottom:2.5rem}
.tm__proof{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.5rem}
.tm__g{width:1.3rem;height:1.3rem}
.tm__proof-text{font-weight:700;font-size:.9rem;color:var(--on-cream-muted)}
.tm__proof-stars{display:flex;color:var(--gold-500)}
.tm__proof-stars svg{width:.9rem;height:.9rem}
.tm__grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:800px){.tm__grid{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.75rem;box-shadow:var(--shadow-card)}
.tm__card blockquote{margin:0 0 .75rem;font-size:1.1rem;font-weight:600}
.tm__card figcaption{color:var(--on-cream-muted);font-size:.85rem}
.tm__stars{display:flex;color:var(--gold-500);margin-bottom:.75rem}
.tm__stars svg{width:1rem;height:1rem}
.tm__more{margin-top:2.25rem}

/* =========================================================
   ABOUT / DIFF SPLIT SECTIONS
========================================================= */
.about-dark,.diff{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
.diff{grid-template-columns:1fr}
@media(min-width:900px){
  .about-dark{grid-template-columns:44% 1fr}
  .diff{grid-template-columns:26rem 1fr}
}
.about-dark__media,.diff__media{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.diff__media{aspect-ratio:3/4}
.about-dark__list{display:flex;flex-direction:column;gap:.6rem;margin:1.25rem 0}
.about-dark__list li{display:flex;align-items:center;gap:.6rem;font-weight:700}
.about-dark__check{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center}
.about-dark__check svg{width:.8rem;height:.8rem}
.diff__cards{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:1.75rem}
@media(min-width:600px){.diff__cards{grid-template-columns:1fr 1fr}}
.diff__card{background:var(--cream);border-radius:var(--radius-md);padding:1.25rem}
.diff__card h3{font-size:1.05rem;margin-bottom:.4rem}
.diff__card p{margin:0;font-size:.9rem;color:var(--on-cream-muted)}

/* =========================================================
   OFFRES CLAIRES
========================================================= */

.clear-offers{
  padding:2.15rem 0 1.35rem;
}

.clear-offers__title{
  margin:0 0 1.35rem;
  text-align:center;

  font-family:var(--font-display);
  font-size:clamp(1.85rem,2.6vw,2.35rem);
  line-height:1;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;

  color:var(--ink-900);
}

.clear-offers__grid{
  max-width:1080px;
  margin:0 auto;

  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem 1rem;
}


/* Individual offer */
.clear-offer-card{
  min-width:0;
  min-height:96px;

  display:grid;
  grid-template-columns:2.45rem minmax(0,1fr);
  align-items:start;
  gap:.9rem;

  padding:1.1rem 1.15rem;

  background:#faf7ef;
  border:1px solid rgba(27,28,25,.075);
  border-radius:9px;

  box-shadow:
    0 2px 5px rgba(20,30,20,.018),
    0 7px 18px rgba(20,30,20,.035);
}


/* Gold / green line icon */
.clear-offer-card__icon{
  width:2.25rem;
  height:2.25rem;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--gold-600);
}

.clear-offer-card__icon svg{
  width:1.75rem;
  height:1.75rem;

  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Text */
.clear-offer-card__content{
  min-width:0;
  padding-top:.05rem;
}

.clear-offer-card h3{
  margin:0 0 .38rem;

  font-family:var(--font-display);
  font-size:.98rem;
  line-height:1.08;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;

  color:var(--ink-900);
}

.clear-offer-card p{
  margin:0;

  font-family:var(--font-body);
  font-size:.78rem;
  line-height:1.42;
  font-weight:500;

  color:var(--on-cream-muted);
}


/* Tablet */
@media(max-width:899px){

  .clear-offers__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* Mobile */
@media(max-width:599px){

  .clear-offers{
    padding:2.25rem 0;
  }

  .clear-offers__title{
    margin-bottom:1.4rem;
    font-size:1.85rem;
  }

  .clear-offers__grid{
    grid-template-columns:1fr;
    gap:.75rem;
  }

  .clear-offer-card{
    min-height:0;
    padding:1rem 1.05rem;
  }

}

/* =========================================================
   COMMENT ON TRAVAILLE
========================================================= */

.work-method{
  max-width:1080px;
  margin:2rem auto 0;
}

.work-method__title{
  margin:0 0 1.35rem;

  text-align:center;

  font-family:var(--font-display);
  font-size:1.55rem;
  line-height:1;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;

  color:var(--ink-900);
}


/* 4 cards */
.work-method__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}


/* Individual step */
.work-method-card{
  position:relative;

  min-width:0;
  min-height:106px;

  padding:1.95rem 1.15rem 1.05rem;

  background:#fffdf8;

  border:1px solid rgba(27,28,25,.08);
  border-radius:9px;

  box-shadow:
    0 2px 5px rgba(20,30,20,.025),
    0 7px 18px rgba(20,30,20,.045);
}


/* Number medallion */
.work-method-card__number{
  position:absolute;

  top:-.78rem;
  left:50%;
  transform:translateX(-50%);

  width:1.7rem;
  height:1.7rem;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#ead07a;
  border:2px solid #fffdf8;

  box-shadow:
    0 0 0 1px rgba(28,74,52,.55),
    0 2px 5px rgba(20,30,20,.10);

  font-family:var(--font-body);
  font-size:.7rem;
  line-height:1;
  font-weight:800;

  color:var(--forest);
}


/* Small horizontal marks beside the circle */
.work-method-card__number::before,
.work-method-card__number::after{
  content:"";

  position:absolute;
  top:50%;

  width:.42rem;
  height:1px;

  background:var(--forest);
  opacity:.65;
}

.work-method-card__number::before{
  right:100%;
  margin-right:.1rem;
}

.work-method-card__number::after{
  left:100%;
  margin-left:.1rem;
}


/* Card heading */
.work-method-card h3{
  margin:0 0 .45rem;

  font-family:var(--font-display);
  font-size:.92rem;
  line-height:1.1;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;

  color:var(--ink-900);
}


/* Description */
.work-method-card p{
  margin:0;

  font-family:var(--font-body);
  font-size:.76rem;
  line-height:1.45;
  font-weight:500;

  color:var(--on-cream-muted);
}


/* Tablet */
@media(max-width:899px){

  .work-method{
    margin-top:2.25rem;
  }

  .work-method__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem 1rem;
  }

}


/* Mobile */
@media(max-width:599px){

  .work-method{
    margin-top:2.25rem;
  }

  .work-method__title{
    margin-bottom:1.5rem;
    font-size:1.45rem;
  }

  .work-method__grid{
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .work-method-card{
    min-height:0;
    padding:1.9rem 1.1rem 1rem;
  }

}

/* =========================================================
   ENVOYEZ VOS PHOTOS CTA
========================================================= */

.photo-cta{
  position:relative;

  width:100%;
  min-height:148px;

  margin:1.45rem auto 0;

  display:grid;
  grid-template-columns:180px minmax(0,1fr) 320px;
  align-items:center;
  gap:1.25rem;

  padding:1.15rem 1.45rem;

  overflow:hidden;

  background:
    linear-gradient(
      100deg,
      #12472f 0%,
      #18563a 48%,
      #10452f 100%
    );

  border-radius:12px;

  box-shadow:
    0 5px 16px rgba(15,42,30,.10);

  color:#fff;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.photo-cta__visual{
  position:relative;

  width:160px;
  height:112px;

  justify-self:center;
}


/* gold base under phone */
.photo-cta__base{
  position:absolute;

  width:96px;
  height:25px;

  left:31px;
  bottom:0;

  border-radius:50%;

  background:var(--gold-500);

  transform:rotate(-6deg);

  box-shadow:0 4px 9px rgba(0,0,0,.13);
}


/* green phone */
.photo-cta__phone{
  position:absolute;

  left:49px;
  top:8px;

  width:66px;
  height:96px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:3px solid #e8e7df;
  border-radius:9px;

  background:#38a967;

  transform:rotate(-5deg);

  box-shadow:0 8px 16px rgba(0,0,0,.22);
}

.photo-cta__phone::before{
  content:"";

  position:absolute;

  top:4px;
  left:50%;

  width:20px;
  height:3px;

  transform:translateX(-50%);

  border-radius:999px;

  background:rgba(255,255,255,.65);
}

.photo-cta__phone svg{
  width:38px;
  height:38px;

  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* floating photo cards */
.photo-cta__photo{
  position:absolute;

  width:66px;
  height:48px;

  padding:3px;

  overflow:hidden;

  background:#fff;
  border-radius:6px;

  box-shadow:0 5px 12px rgba(0,0,0,.24);

  z-index:3;
}

.photo-cta__photo img{
  width:100%;
  height:100%;
  object-fit:cover;

  border-radius:3px;
}

.photo-cta__photo--left{
  left:4px;
  top:30px;

  transform:rotate(-8deg);
}

.photo-cta__photo--right{
  right:0;
  top:5px;

  transform:rotate(7deg);
}


/* little WhatsApp bubble */
.photo-cta__whatsapp-badge{
  position:absolute;

  right:24px;
  bottom:14px;

  width:25px;
  height:25px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#43c66e;

  color:#fff;

  box-shadow:0 3px 7px rgba(0,0,0,.18);

  z-index:4;
}

.photo-cta__whatsapp-badge svg{
  width:16px;
  height:16px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* =========================================================
   COPY
========================================================= */

.photo-cta__copy{
  min-width:0;
}

.photo-cta__copy h2{
  margin:0 0 .65rem;

  font-family:var(--font-display);
  font-size:1.85rem;
  line-height:.98;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;

  color:#fff;
}

.photo-cta__copy p{
  margin:0;

  font-family:var(--font-body);
  font-size:.88rem;
  line-height:1.4;
  font-weight:500;

  color:rgba(255,255,255,.78);
}


/* =========================================================
   BUTTONS
========================================================= */

.photo-cta__actions{
  width:100%;

  display:flex;
  flex-direction:column;

  gap:.65rem;
}

.photo-cta__btn{
  width:100%;
  min-height:47px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;

  padding:.75rem 1rem;

  border-radius:9px;

  font-family:var(--font-body);
  font-size:.82rem;
  line-height:1;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.025em;

  transition:
    transform .15s ease,
    background .15s ease;
}

.photo-cta__btn:hover{
  transform:translateY(-1px);
}

.photo-cta__btn svg{
  width:1.15rem;
  height:1.15rem;

  flex-shrink:0;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* gold top button */
.photo-cta__btn--whatsapp{
  background:var(--gold-500);

  border:1px solid var(--gold-500);

  color:var(--forest-deep);

  box-shadow:
    0 3px 8px rgba(0,0,0,.09);
}

.photo-cta__btn--whatsapp:hover{
  background:var(--gold-600);
}


/* outlined bottom button */
.photo-cta__btn--outline{
  background:transparent;

  border:1.5px solid rgba(236,217,165,.78);

  color:#fff;
}

.photo-cta__btn--outline:hover{
  background:rgba(255,255,255,.06);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:899px){

  .photo-cta{
    grid-template-columns:145px 1fr;

    gap:1.25rem;

    padding:1.35rem;
  }

  .photo-cta__visual{
    width:140px;
    transform:scale(.9);
    transform-origin:center;
  }

  .photo-cta__actions{
    grid-column:1 / -1;

    display:grid;
    grid-template-columns:1fr 1fr;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:599px){

  .photo-cta{
    display:flex;
    flex-direction:column;

    margin-top:1.5rem;

    padding:1.5rem 1.25rem;

    text-align:center;
  }

  .photo-cta__visual{
    height:102px;

    transform:scale(.88);
  }

  .photo-cta__copy h2{
    font-size:1.75rem;
  }

  .photo-cta__copy p{
    font-size:.86rem;
  }

  .photo-cta__actions{
    width:100%;

    display:flex;
    flex-direction:column;
  }

}

/* =========================================================
   ÉTANCHÉITÉ À MARRAKECH / ZONE
========================================================= */

.local-area{
  padding:1.7rem 0 2.2rem;
}


/* Main 3-column layout */
.local-area__grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(0,.9fr)
    minmax(0,.9fr);

  gap:1.15rem;

  align-items:stretch;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.local-area__intro{
  padding:.2rem .4rem 0 0;
}

.local-area__intro h2{
  margin:0 0 .75rem;

  font-family:var(--font-display);
  font-size:clamp(1.8rem,2.5vw,2.25rem);
  line-height:.98;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;

  color:var(--ink-900);
}

.local-area__intro p{
  max-width:52ch;

  margin:0 0 1rem;

  font-family:var(--font-body);
  font-size:.82rem;
  line-height:1.5;
  font-weight:500;

  color:var(--on-cream-muted);
}


/* Zone pills */
.local-area__zones{
  display:flex;
  flex-wrap:wrap;

  gap:.45rem .5rem;

  max-width:540px;
}

.local-area__zones span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:27px;

  padding:.3rem .9rem;

  border:1px solid rgba(28,74,52,.65);
  border-radius:var(--radius-pill);

  background:#fff;

  font-family:var(--font-body);
  font-size:.67rem;
  line-height:1;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.045em;

  color:var(--forest);
}


/* =========================================================
   RIGHT CARDS
========================================================= */

.local-area-card{
  min-width:0;

  padding:1.25rem 1.25rem 1.15rem;

  background:#fffdf8;

  border:1px solid rgba(27,28,25,.08);
  border-radius:10px;

  box-shadow:
    0 2px 5px rgba(20,30,20,.02),
    0 8px 20px rgba(20,30,20,.045);
}

.local-area-card h3{
  margin:0 0 .9rem;

  font-family:var(--font-display);
  font-size:.93rem;
  line-height:1.08;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;

  color:var(--ink-900);
}


/* First card checklist */
.local-area-card__list{
  display:flex;
  flex-direction:column;

  gap:.52rem;
}

.local-area-card__list li{
  display:grid;

  grid-template-columns:13px minmax(0,1fr);

  align-items:start;
  gap:.5rem;

  font-family:var(--font-body);
  font-size:.72rem;
  line-height:1.35;
  font-weight:500;

  color:var(--on-cream-muted);
}

.local-area-card__list svg{
  width:13px;
  height:13px;

  margin-top:.08rem;

  fill:none;
  stroke:var(--gold-500);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Zone card */
.local-area-card--zone p{
  margin:0 0 .75rem;

  font-family:var(--font-body);
  font-size:.74rem;
  line-height:1.45;
  font-weight:500;

  color:var(--on-cream-muted);
}

.local-area-card--zone p:last-child{
  margin-bottom:0;
}


/* =========================================================
   DURABLE CTA
========================================================= */

.durable-cta{
  width:100%;

  min-height:104px;

  margin-top:1.25rem;

  display:grid;

  grid-template-columns:72px minmax(0,1fr) 220px;

  align-items:center;
  gap:1.25rem;

  padding:1rem 1.7rem;

  overflow:hidden;

  background:
    linear-gradient(
      100deg,
      #12472f 0%,
      #18563a 50%,
      #10452f 100%
    );

  border-radius:11px;

  box-shadow:
    0 5px 16px rgba(15,42,30,.10);

  color:#fff;
}


/* Shield */
.durable-cta__icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:64px;
  height:64px;
}

.durable-cta__icon svg{
  width:58px;
  height:58px;

  fill:none;

  stroke:var(--gold-500);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Copy */
.durable-cta__copy{
  min-width:0;
}

.durable-cta__copy h2{
  margin:0 0 .32rem;

  font-family:var(--font-display);
  font-size:1.65rem;
  line-height:1;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.008em;

  color:#fff;
}

.durable-cta__copy p{
  margin:0;

  font-family:var(--font-body);
  font-size:.76rem;
  line-height:1.4;
  font-weight:500;

  color:rgba(255,255,255,.78);
}


/* Button */
.durable-cta__action{
  display:flex;
  justify-content:flex-end;
}

.durable-cta__btn{
  width:190px;
  min-height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:.75rem 1.2rem;

  border-radius:8px;

  background:var(--gold-500);

  font-family:var(--font-body);
  font-size:.77rem;
  line-height:1;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.04em;

  color:var(--forest-deep);

  box-shadow:0 3px 8px rgba(0,0,0,.08);

  transition:
    transform .15s ease,
    background .15s ease;
}

.durable-cta__btn:hover{
  transform:translateY(-1px);
  background:var(--gold-600);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:899px){

  .local-area__grid{
    grid-template-columns:1fr 1fr;
  }

  .local-area__intro{
    grid-column:1 / -1;

    padding-right:0;
  }

  .local-area__zones{
    max-width:none;
  }

  .durable-cta{
    grid-template-columns:64px 1fr;
  }

  .durable-cta__action{
    grid-column:1 / -1;

    justify-content:flex-start;

    padding-left:calc(64px + 1.25rem);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:599px){

  .local-area{
    padding:1.5rem 0 2rem;
  }

  .local-area__grid{
    grid-template-columns:1fr;

    gap:.9rem;
  }

  .local-area__intro{
    grid-column:auto;

    margin-bottom:.4rem;
  }

  .local-area__intro h2{
    font-size:1.9rem;
  }

  .local-area__zones{
    gap:.4rem;
  }

  .local-area__zones span{
    padding:.3rem .7rem;

    font-size:.63rem;
  }


  .durable-cta{
    display:flex;
    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:1.35rem 1.2rem;
  }

  .durable-cta__icon{
    width:56px;
    height:56px;
  }

  .durable-cta__icon svg{
    width:52px;
    height:52px;
  }

  .durable-cta__copy h2{
    font-size:1.55rem;
  }

  .durable-cta__copy p br{
    display:none;
  }

  .durable-cta__action{
    width:100%;

    padding-left:0;
  }

  .durable-cta__btn{
    width:100%;
  }

}

/* =========================================================
   D'AUTRES QUESTIONS CTA
========================================================= */

.questions-cta{
  width:100%;

  background:
    linear-gradient(
      100deg,
      #d1a642 0%,
      #d9b14f 52%,
      #d3a94b 100%
    );

  color:var(--forest-deep);
}

.questions-cta__inner{
  min-height:92px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:4.5rem;

  padding-top:1.15rem;
  padding-bottom:1.15rem;
}


/* Copy */
.questions-cta__copy{
  min-width:0;
}

.questions-cta__copy h2{
  margin:0 0 .18rem;

  font-family:var(--font-display);
  font-size:1.75rem;
  line-height:1;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.008em;

  color:var(--forest-deep);
}

.questions-cta__copy p{
  margin:0;

  font-family:var(--font-body);
  font-size:.76rem;
  line-height:1.35;
  font-weight:600;

  color:rgba(15,42,30,.78);
}


/* Button */
.questions-cta__btn{
  min-width:160px;
  min-height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.7rem 1.3rem;

  flex-shrink:0;

  background:var(--forest);
  border-radius:8px;

  font-family:var(--font-body);
  font-size:.76rem;
  line-height:1;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.04em;

  color:#fff;

  transition:
    transform .15s ease,
    background .15s ease;
}

.questions-cta__btn:hover{
  transform:translateY(-1px);
  background:var(--forest-deep);
}


/* Tablet */
@media(max-width:799px){

  .questions-cta__inner{
    justify-content:space-between;
    gap:2rem;
  }

}


/* Mobile */
@media(max-width:599px){

  .questions-cta__inner{
    min-height:0;

    flex-direction:column;

    gap:1rem;

    padding-top:1.4rem;
    padding-bottom:1.4rem;

    text-align:center;
  }

  .questions-cta__copy h2{
    font-size:1.65rem;
  }

  .questions-cta__copy p{
    font-size:.75rem;
  }

  .questions-cta__btn{
    width:100%;
  }

}

/* =========================================================
   BESOIN D'AIDE CTA
========================================================= */

.hcta{
  position:relative;

  padding:2.55rem 0;

  overflow:hidden;

  /* Same green as "Une étanchéité faite pour durer" */
  background:
    linear-gradient(
      100deg,
      #12472f 0%,
      #18563a 50%,
      #10452f 100%
    );

  color:var(--on-night-strong);
}


/* Decorative trees */
.hcta__pines{
  position:absolute;
  bottom:0;

  width:180px;
  height:auto;

  opacity:.28;

  pointer-events:none;
}

.hcta__pines--l{
  left:0;
}

.hcta__pines--r{
  right:0;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.hcta__inner{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;

  align-items:center;

  gap:3rem;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.hcta__call h2{
  margin:0 0 .45rem;

  color:#fff;
}

.hcta__phone{
  display:inline-flex;
  align-items:center;

  gap:.55rem;

  font-family:var(--font-display);
  font-size:1.55rem;
  line-height:1;

  color:var(--gold-500);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.hcta__book{
  position:relative;

  width:420px;
  height:115px;

  justify-self:end;
}


/*
   Text starts upper-left.
   Button sits lower-right.
   Arrow lands directly on the button.
*/
.hcta__note {
    position: absolute;
    top: 0;
    left: 20px;
    width: 180px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0rem;
    line-height: 1.35;
    font-weight: 600;
    text-align: left;
    color: rgba(255, 255, 255, .88);
}


/* Curved arrow */

.hcta__arrow {
    position: absolute;
    display: block;
    width: 105px;
    height: 78px;
    left: 200px;
    top: -18px;
    overflow: visible;
    transform: scaleY(-1) rotate(-35deg);
}

.hcta__arrow path{
  stroke:rgba(255,255,255,.9);
}


/* Button */
.hcta__bookbtn{
  position:absolute;

  right:0;
  bottom:6px;

  min-width:180px;

  justify-content:center;

  border-radius:8px;
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:799px){

  .hcta{
    padding:2.4rem 0;
  }

  .hcta__inner{
    display:flex;
    flex-direction:column;

    gap:1.6rem;

    text-align:center;
  }

  .hcta__book{
    position:static;

    width:100%;
    height:auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:.9rem;
  }

  .hcta__note{
    position:static;

    width:auto;

    text-align:center;
  }

  .hcta__arrow{
    display:none;
  }

  .hcta__bookbtn{
    position:static;

    min-width:180px;
  }

}
.hcta__pines{
  display:none;
}

/* =========================================================
   SERVICE CARDS (highlight, 2-up)
========================================================= */
.wh__head{margin-bottom:2.5rem}
.wh__grid{display:grid;grid-template-columns:1fr;gap:1.75rem}
@media(min-width:700px){.wh__grid{grid-template-columns:1fr 1fr}}
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;transition:transform .18s ease, box-shadow .18s ease}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.svc-card__media{aspect-ratio:16/10}
.svc-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:.6rem}
.svc-card__title{font-size:1.4rem}
.svc-card__text{color:var(--on-cream-muted);font-size:var(--fs-body-sm)}

/* =========================================================
   SEO SERVICES GRID
========================================================= */
.seo-top{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2.5rem}
.seo-top__lead{max-width:70ch}
.seo-fine{font-size:.85rem;color:var(--on-cream-muted)}
.seo-badges{display:flex;flex-wrap:wrap;gap:.6rem}
.seo-badge{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-pill);padding:.45rem 1rem;font-size:.8rem;font-weight:700;color:var(--forest)}
.seo-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem}
@media(min-width:560px){.seo-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.seo-grid{grid-template-columns:repeat(3,1fr)}}
.seo-card{display:block;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .18s ease, box-shadow .18s ease}
.seo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.seo-card__media{aspect-ratio:16/10}
.seo-card__body{padding:1.5rem}
.seo-card__chip{margin-bottom:.75rem}
.seo-mini{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:800px){.seo-mini{grid-template-columns:1fr 1fr}}
.seo-box{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-lg);padding:1.75rem}
.check-list{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.check-list li{display:flex;align-items:flex-start;gap:.55rem;font-size:.92rem;color:var(--on-cream-muted)}
.check-list li svg{color:var(--gold-600);flex-shrink:0;margin-top:.2rem}
/* =========================================================
   ROOF SOLUTIONS - CHOISIR LE BON SYSTÈME
========================================================= */

.services-primary{
  padding-bottom:1.5rem;
}

.roof-solutions-section{
  padding:0 0 3rem;
}

.roof-solutions{
  margin:0;
}

.roof-solutions__head{
  text-align:center;
  margin:0 auto 1.35rem;
}

.roof-solutions__head h2{
  margin:0 0 .15rem;
  font-family:var(--font-script);
  font-size:clamp(1.9rem,2.7vw,2.35rem);
  line-height:1.05;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  color:var(--gold-600);
}

.roof-solutions__head p{
  margin:0;
  font-size:.9rem;
  line-height:1.4;
  font-weight:600;
  color:var(--ink-900);
}

.roof-solutions__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.5rem;
}

.roof-solution-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;

  background:#fffaf2;
  border:1px solid rgba(27,28,25,.07);
  border-radius:12px;

  box-shadow:
    0 4px 10px rgba(20,30,20,.035),
    0 12px 26px rgba(20,30,20,.055);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.roof-solution-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 5px 12px rgba(20,30,20,.045),
    0 16px 32px rgba(20,30,20,.09);
}

.roof-solution-card__media{
  width:100%;
  aspect-ratio:2.25 / 1;
  overflow:hidden;
  background:#d8d1bf;
}

.roof-solution-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.roof-solution-card__body{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;

  padding:1.45rem 1.25rem 1.3rem;
}

.roof-solution-card__icon{
  position:absolute;
  top:-1.15rem;
  left:1.15rem;

  display:flex;
  align-items:center;
  justify-content:center;

  width:2.25rem;
  height:2.25rem;

  border-radius:50%;
  border:3px solid #fffaf2;

  background:#fff;
  color:var(--gold-600);

  box-shadow:0 3px 9px rgba(20,30,20,.08);
}

.roof-solution-card__icon svg{
  width:1.05rem;
  height:1.05rem;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.roof-solution-card h3{
  margin:.1rem 0 .85rem;

  font-family:var(--font-display);
  font-size:1.22rem;
  line-height:1.02;

  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;

  color:var(--ink-900);
}

.roof-solution-card__text{
  margin:0 0 .85rem;

  font-size:.87rem;
  line-height:1.48;

  color:var(--on-cream-muted);
}

.roof-solution-card__list{
  display:flex;
  flex-direction:column;
  gap:.35rem;

  margin-top:auto;
}

.roof-solution-card__list li{
  position:relative;

  padding-left:.9rem;

  font-size:.79rem;
  line-height:1.35;

  color:var(--on-cream-muted);
}

.roof-solution-card__list li::before{
  content:"";
  position:absolute;

  left:0;
  top:.48em;

  width:.28rem;
  height:.28rem;

  border-radius:50%;
  background:var(--gold-500);
}


/* 2 columns on tablets */
@media(max-width:999px){

  .roof-solutions{
    margin-top:0;
  }

  .roof-solutions__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .roof-solution-card__media{
    aspect-ratio:2.35 / 1;
  }

}


/* 1 column on phones */
@media(max-width:599px){

  .services-primary{
    padding-bottom:2rem;
  }

  .roof-solutions__head{
    margin-bottom:1.5rem;
  }

  .roof-solutions__head h2{
    font-size:2rem;
  }

  .roof-solutions__head p{
    font-size:.88rem;
  }

  .roof-solutions__grid{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .roof-solution-card__media{
    aspect-ratio:16 / 7;
  }

  .roof-solution-card__body{
    padding:1.5rem 1.25rem 1.3rem;
  }

}
/* =========================================================
   CAREERS CTA PANEL
========================================================= */
.careers-cta__panel{border-radius:var(--radius-lg);padding:2.5rem;color:var(--on-night-body)}
.careers-cta__panel h2{color:var(--on-night-strong)}
.careers-cta__inner{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:800px){.careers-cta__inner{grid-template-columns:1fr 2fr;align-items:start}}
.careers-cta__copy .lead{color:var(--on-night-body);max-width:60ch}

/* =========================================================
   FAQ
========================================================= */
.faq__list{display:grid;gap:0}
.faq__item{border-bottom:1px solid rgba(0,0,0,.09)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 0;cursor:pointer;list-style:none;font-weight:800;font-size:1.1rem}
.faq__q::-webkit-details-marker{display:none}
.faq__icon{width:1.4rem;height:1.4rem;flex-shrink:0;color:var(--forest);transition:transform .2s ease}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__a{padding:0 0 1.25rem;color:var(--on-cream-muted);max-width:100%;}

/* =========================================================
   CONTACT
========================================================= */
.contact-section__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2rem}
@media(min-width:900px){.contact-section__grid{grid-template-columns:1fr 1.3fr}}
.contact-details{display:flex;flex-direction:column;gap:1.5rem}
.contact-detail{display:flex;gap:1rem;align-items:flex-start}
.contact-detail .icon-chip{background:rgba(255,255,255,.1);color:var(--gold-500)}
.contact-detail__label{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--on-night-muted)}
.contact-detail__value{font-weight:800;font-size:1.05rem;color:var(--on-night-strong)}
.contact-detail__note{margin:0;font-size:.85rem;color:var(--on-night-muted)}

.cform{background:var(--cream);border-radius:var(--radius-lg);padding:2rem;color:var(--ink-900)}
.cform__hp{position:absolute;left:-9999px}
.cform__heading{margin-bottom:.25rem}
.cform__intro{color:var(--on-cream-muted);font-size:.92rem}
.cform__row{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:560px){.cform__row{grid-template-columns:1fr 1fr}}
.cform__field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.cform__field label{font-weight:700;font-size:.88rem}
.cform__req{color:#b5442e}
.cform__field input,.cform__field select,.cform__field textarea{
  font-family:var(--font-body);padding:.75rem .9rem;border-radius:8px;border:1px solid rgba(0,0,0,.15);
  font-size:.95rem;background:#fff;
}
.cform__submit{width:100%;justify-content:center;margin-top:.5rem}
.cform__note{font-size:.82rem;color:var(--on-cream-muted);margin-top:1rem;text-align:center}


/* =========================================================
   CONTACT / CONVERSION
========================================================= */

.contact-conversion{
  padding:4rem 0 3.5rem;

  background:
    linear-gradient(
      100deg,
      #12472f 0%,
      #18563a 50%,
      #10452f 100%
    );

  color:#fff;
}


/* Heading */
.contact-conversion__head{
  max-width:720px;

  margin:0 auto 2rem;

  text-align:center;
}

.contact-conversion__head .eyebrow{
  color:var(--gold-500);
}

.contact-conversion__head h2{
  margin:0 0 .65rem;

  color:#fff;
}

.contact-conversion__head p{
  margin:0 auto;

  max-width:58ch;

  font-size:.95rem;
  line-height:1.5;

  color:rgba(255,255,255,.78);
}


/* =========================================================
   ACTION CARDS
========================================================= */

.contact-conversion__actions{
  max-width:980px;

  margin:0 auto;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:1.25rem;
}


.contact-action-card{
  min-width:0;

  display:grid;
  grid-template-columns:58px minmax(0,1fr);

  gap:1.15rem;

  padding:1.6rem;

  background:#fffaf2;

  border-radius:11px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.12);
}


/* Icon */
.contact-action-card__icon{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f3e5ba;

  color:var(--forest);
}

.contact-action-card__icon svg{
  width:25px;
  height:25px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* Text */
.contact-action-card__content{
  min-width:0;
}

.contact-action-card__label{
  display:block;

  margin-bottom:.25rem;

  font-size:.7rem;
  line-height:1;

  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.1em;

  color:var(--gold-600);
}


.contact-action-card__phone{
  display:block;

  margin:0 0 .55rem;

  font-family:var(--font-display);
  font-size:1.75rem;
  line-height:1;

  color:var(--forest-deep);
}


.contact-action-card h3{
  margin:0 0 .55rem;

  font-size:1.35rem;
  line-height:1.05;

  color:var(--forest-deep);
}


.contact-action-card p{
  margin:0 0 1rem;

  min-height:42px;

  font-size:.82rem;
  line-height:1.45;

  color:var(--on-cream-muted);
}


/* Buttons */
.contact-action-card__btn{
  min-height:43px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:.55rem;

  padding:.7rem 1.2rem;

  border-radius:8px;

  font-size:.76rem;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.035em;

  transition:
    transform .15s ease,
    background .15s ease;
}

.contact-action-card__btn:hover{
  transform:translateY(-1px);
}

.contact-action-card__btn svg{
  width:1.1rem;
  height:1.1rem;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.contact-action-card__btn--green{
  background:var(--forest);
  color:#fff;
}

.contact-action-card__btn--green:hover{
  background:var(--forest-deep);
}


.contact-action-card__btn--gold{
  background:var(--gold-500);
  color:var(--forest-deep);
}

.contact-action-card__btn--gold:hover{
  background:var(--gold-600);
}


/* =========================================================
   PROOF STRIP
========================================================= */

.contact-conversion__proof{
  max-width:980px;

  margin:1.75rem auto 0;
  padding-top:1.4rem;

  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:1rem;

  border-top:1px solid rgba(255,255,255,.16);
}


.contact-proof-item{
  display:flex;
  align-items:flex-start;

  gap:.75rem;
}


.contact-proof-item svg{
  width:22px;
  height:22px;

  flex-shrink:0;

  fill:none;
  stroke:var(--gold-500);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


.contact-proof-item strong{
  display:block;

  margin-bottom:.15rem;

  font-size:.8rem;

  color:#fff;
}


.contact-proof-item span{
  display:block;

  font-size:.7rem;
  line-height:1.35;

  color:rgba(255,255,255,.65);
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media(max-width:799px){

  .contact-conversion{
    padding:3rem 0;
  }

  .contact-conversion__actions{
    grid-template-columns:1fr;
  }

  .contact-conversion__proof{
    grid-template-columns:1fr;

    gap:1.1rem;
  }

}


@media(max-width:499px){

  .contact-action-card{
    grid-template-columns:1fr;

    text-align:center;
  }

  .contact-action-card__icon{
    margin:0 auto;
  }

  .contact-action-card p{
    min-height:0;
  }

  .contact-action-card__btn{
    width:100%;
  }

}


/* =========================================================
   FOOTER
========================================================= */
.footer__inner{padding:3.5rem 0 1.5rem}
.footer__top{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(min-width:900px){.footer__top{grid-template-columns:1fr 2fr}}
.footer__brand{display:flex;flex-direction:column;gap:1.25rem}
.footer__logo-mark{width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--gold-500);font-family:var(--font-display);font-size:1rem;text-align:center}
.footer__label{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--on-night-muted)}
.footer__details p{margin:0 0 .25rem;color:var(--on-night-strong);font-weight:700}
.footer__social{display:flex;gap:.75rem}
.footer__social-link{width:2.3rem;height:2.3rem;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--on-night-strong)}
.footer__menus{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:600px){.footer__menus{grid-template-columns:1fr 1fr}}
.footer__col{display:flex;flex-direction:column;gap:.6rem}
.footer__col a,.footer__col span{color:var(--on-night-muted);font-size:.9rem}
.footer__col a:hover{color:var(--on-night-strong)}
.footer__bottom{display:flex;flex-direction:column;gap:.5rem;padding-top:1.5rem;font-size:.78rem;color:var(--on-night-muted)}
@media(min-width:700px){.footer__bottom{flex-direction:row;justify-content:space-between}}

/* =========================================================
   MIDDLE PAGE — MORE AIR / BETTER READABILITY
========================================================= */


/* ---------------------------------------------------------
   OFFRES CLAIRES
--------------------------------------------------------- */

.clear-offers{
  padding:3.75rem 0 3rem;
}

.clear-offers__title{
  margin-bottom:2rem;

  font-size:clamp(2.1rem,2.8vw,2.6rem);
}

.clear-offers__grid{
  max-width:1200px;

  gap:1.25rem;
}

.clear-offer-card{
  min-height:125px;

  grid-template-columns:3rem minmax(0,1fr);

  gap:1rem;

  padding:1.45rem 1.4rem;
}

.clear-offer-card__icon{
  width:2.7rem;
  height:2.7rem;
}

.clear-offer-card__icon svg{
  width:2rem;
  height:2rem;
}

.clear-offer-card h3{
  margin-bottom:.5rem;

  font-size:1.1rem;
  line-height:1.12;
}

.clear-offer-card p{
  font-size:.88rem;
  line-height:1.5;
}


/* =========================================================
   COMMENT ON TRAVAILLE — OPEN PROCESS
========================================================= */

.work-method{
  max-width:1200px;
  margin:3.75rem auto 0;
}

.work-method__title{
  margin:0 0 2.25rem;

  text-align:center;

  font-family:var(--font-display);
  font-size:1.9rem;
  line-height:1;

  font-weight:400;
  text-transform:uppercase;

  color:var(--ink-900);
}

.work-method__grid{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:2rem;
}


/* connecting line */
.work-method__grid::before{
  content:"";

  position:absolute;

  top:17px;
  left:8%;
  right:8%;

  height:1px;

  background:rgba(28,74,52,.22);

  z-index:0;
}


.work-method-card{
  position:relative;

  min-width:0;

  padding:0 1rem;

  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;

  text-align:center;

  z-index:1;
}


/* numbered circle */
.work-method-card__number{
  position:relative;

  top:auto;
  left:auto;
  transform:none;

  width:34px;
  height:34px;

  margin:0 auto 1rem;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:var(--paper);

  border:1.5px solid var(--forest);

  box-shadow:none;

  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:800;

  color:var(--forest);
}


/* remove old little side lines */
.work-method-card__number::before,
.work-method-card__number::after{
  display:none;
}


.work-method-card h3{
  margin:0 0 .65rem;

  font-family:var(--font-display);
  font-size:1.08rem;
  line-height:1.15;

  font-weight:400;
  text-transform:uppercase;

  color:var(--ink-900);
}


.work-method-card p{
  max-width:23ch;

  margin:0 auto;

  font-family:var(--font-body);
  font-size:.87rem;
  line-height:1.5;

  color:var(--on-cream-muted);
}


/* tablet */
@media(max-width:899px){

  .work-method__grid{
    grid-template-columns:repeat(2,1fr);

    gap:2.5rem 1.5rem;
  }

  .work-method__grid::before{
    display:none;
  }

}


/* mobile */
@media(max-width:599px){

  .work-method{
    margin-top:3rem;
  }

  .work-method__grid{
    grid-template-columns:1fr;

    gap:2rem;
  }

  .work-method-card{
    padding:0;
  }

}



/* ---------------------------------------------------------
   ENVOYEZ VOS PHOTOS
--------------------------------------------------------- */

.photo-cta{
  min-height:180px;

  margin-top:2.75rem;

  grid-template-columns:200px minmax(0,1fr) 330px;

  gap:1.75rem;

  padding:1.4rem 1.75rem;
}

.photo-cta__copy h2{
  margin-bottom:.75rem;

  font-size:2.15rem;
  line-height:1;
}

.photo-cta__copy p{
  font-size:.95rem;
  line-height:1.5;
}

.photo-cta__btn{
  min-height:50px;

  font-size:.86rem;
}

@media(min-width:900px){

  /* =========================================================
     DESKTOP — COMBINED PROCESS + PHOTO CTA
  ========================================================= */

  .work-method{
    max-width:none;
    width:100%;

    margin:3.75rem auto 0;

    padding:2.5rem 3rem 2.75rem;

    background:var(--gold-500);

    border-radius:12px 12px 0 0;
  }


  .work-method__title{
    margin:0 0 2.25rem;

    color:var(--forest-deep);
  }


  .work-method__grid{
    max-width:1200px;
    margin:0 auto;
  }


  .work-method__grid::before{
    background:rgba(15,42,30,.35);
  }


  .work-method-card__number{
    background:var(--forest);
    border:0;

    color:#fff;
  }


  .work-method-card h3{
    color:var(--forest-deep);
  }


  .work-method-card p{
    color:rgba(15,42,30,.78);
  }


  /* Attach green CTA directly underneath */
  .photo-cta{
    margin-top:0;

    border-radius:0 0 12px 12px;

    box-shadow:
      0 8px 18px rgba(15,42,30,.12);
  }

}

/* ---------------------------------------------------------
   MARRAKECH / ZONE
--------------------------------------------------------- */

.local-area{
  padding:3.25rem 0 3.5rem;
}

.local-area__grid{
  gap:1.5rem;
}

.local-area__intro{
  padding-top:.35rem;
}

.local-area__intro h2{
  margin-bottom:1rem;

  font-size:clamp(2rem,2.7vw,2.5rem);
}

.local-area__intro p{
  margin-bottom:1.25rem;

  font-size:.93rem;
  line-height:1.55;
}

.local-area__zones{
  gap:.55rem;
}

.local-area__zones span{
  min-height:31px;

  padding:.4rem 1rem;

  font-size:.72rem;
}


/* right cards */

.local-area-card{
  padding:1.5rem 1.45rem;
}

.local-area-card h3{
  margin-bottom:1rem;

  font-size:1.08rem;
}

.local-area-card__list{
  gap:.68rem;
}

.local-area-card__list li{
  grid-template-columns:15px minmax(0,1fr);

  gap:.6rem;

  font-size:.84rem;
  line-height:1.45;
}

.local-area-card__list svg{
  width:15px;
  height:15px;
}

.local-area-card--zone p{
  margin-bottom:.9rem;

  font-size:.86rem;
  line-height:1.5;
}


/* ---------------------------------------------------------
   UNE ÉTANCHÉITÉ FAITE POUR DURER
--------------------------------------------------------- */

.durable-cta{
  min-height:125px;

  margin-top:2rem;

  grid-template-columns:80px minmax(0,1fr) 220px;

  gap:1.5rem;

  padding:1.35rem 2rem;
}

.durable-cta__icon{
  width:70px;
  height:70px;
}

.durable-cta__icon svg{
  width:64px;
  height:64px;
}

.durable-cta__copy h2{
  margin-bottom:.45rem;

  font-size:1.95rem;
}

.durable-cta__copy p{
  font-size:.88rem;
  line-height:1.5;
}

.durable-cta__btn{
  width:200px;
  min-height:48px;

  font-size:.81rem;
}

/* =========================================================
   GOOGLE REVIEWS — COMPACT
========================================================= */

.tm.section{
  padding:3rem 0 3.25rem;
}

.tm__head{
  margin-bottom:1.5rem;
}

.tm__head .script-accent{
  font-size:1.7rem;
  margin-bottom:.1rem;
}

.tm__head h2{
  font-size:2.25rem;
}

.tm__proof{
  margin-top:.3rem;
}

.tm__grid{
  gap:1.25rem;
}

.tm__card{
  padding:1.35rem 1.45rem;
}

.tm__card blockquote{
  margin:0 0 .55rem;
  font-size:1rem;
  line-height:1.4;
}

.tm__stars{
  margin-bottom:.55rem;
}

.tm__more{
  margin-top:1.4rem;
}

.tm__more .btn{
  padding:.7rem 1.2rem;
  font-size:.78rem;
}
@media(max-width:799px){

  .tm.section{
    padding:2.4rem 0 2.6rem;
  }

  .tm__head{
    margin-bottom:1.3rem;
  }


  .tm__grid{
    display:grid;

    grid-auto-flow:column;
    grid-auto-columns:86%;

    grid-template-columns:none;

    /* ACTUAL gap now that figure margins are gone */
    gap:.4rem;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    /*
      7% + 86% + 7% = centered card.
      This keeps a visible piece of the neighbouring card.
    */
    padding-left:7%;
    padding-right:7%;
    padding-bottom:.5rem;

    scroll-padding-inline:7%;

    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }


  .tm__grid::-webkit-scrollbar{
    display:none;
  }


  .tm__card{
    margin:0;

    min-width:0;

    scroll-snap-align:center;
    scroll-snap-stop:always;
  }

}
@media(max-width:599px){

  .footer__inner{
    padding:3rem 1.5rem 1.5rem;
  }

}

/* =========================================================
   FUITE TOITURE / HUMIDITÉ BAND
========================================================= */

.problem-band{
  padding:3.25rem 0;
}

.problem-band__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.95fr) minmax(0,1fr);
  align-items:stretch;

  max-width:1280px;
  margin:0 auto;

  overflow:hidden;

  background:var(--cream);
  border:1px solid rgba(27,28,25,.07);
  border-radius:14px;

  box-shadow:
    0 4px 10px rgba(20,30,20,.035),
    0 12px 26px rgba(20,30,20,.055);
}


/* IMAGES */

.problem-band__media{
  min-height:290px;
  overflow:hidden;
}

.problem-band__media img{
  width:100%;
  height:100%;

  object-fit:cover;
}


/* CENTER */

.problem-band__copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:2.3rem 2rem;

  text-align:center;
}

.problem-band__copy h2{
  margin:0 0 1rem;

  font-family:var(--font-display);
  font-size:clamp(1.8rem,2.35vw,2.35rem);
  line-height:1.05;

  font-weight:400;
  text-transform:uppercase;
}

.problem-band__title-roof,
.problem-band__title-humidity{
  display:block;
}

.problem-band__title-roof{
  color:var(--forest-deep);
}

.problem-band__title-capillary{
  display:block;
  margin-top:.35rem;
  color:var(--forest-deep);
}

.problem-band__title-humidity{
  margin-top:.35rem;

  color:var(--gold-600);
}


.problem-band__copy p{
  max-width:39ch;

  margin:0 0 1.4rem;

  font-size:.9rem;
  line-height:1.55;
  font-weight:500;

  color:var(--on-cream-muted);
}


/* WHATSAPP CTA */

.problem-band__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  gap:.6rem;

  min-height:46px;

  padding:.8rem 1.2rem;

  background:var(--forest);
  border-radius:8px;

  font-family:var(--font-body);
  font-size:.78rem;
  line-height:1;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.025em;

  color:#fff;

  transition:
    transform .15s ease,
    background .15s ease;
}

.problem-band__btn:hover{
  transform:translateY(-1px);
  background:var(--forest-deep);
}

.problem-band__btn svg{
  width:1.15rem;
  height:1.15rem;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* TABLET */

@media(max-width:899px){

  .problem-band__inner{
    grid-template-columns:1fr 1fr;
  }

  .problem-band__copy{
    grid-column:1 / -1;
    grid-row:1;

    padding:2rem;
  }

  .problem-band__media{
    min-height:240px;
  }

}


/* =========================================================
   MOBILE — PROBLEM BAND REPLACES "BESOIN D'AIDE"
========================================================= */

@media(max-width:599px){

  /* New section becomes the green CTA band */
  .problem-band{
    padding:2.5rem 0;

    background:
      linear-gradient(
        100deg,
        #12472f 0%,
        #18563a 50%,
        #10452f 100%
      );
  }

  .problem-band__inner{
    display:block;

    max-width:none;

    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
  }


  /* Hide both photos on mobile */
  .problem-band__media{
    display:none;
  }


  /* Center copy */
  .problem-band__copy{
    display:flex;
    flex-direction:column;
    align-items:center;

    padding:0;

    text-align:center;
  }


  .problem-band__copy h2{
    margin:0 0 1rem;

    font-size:1.9rem;
    line-height:1.06;
  }


  /* First problem */
  .problem-band__title-roof{
    color:#fff;
  }


  /* Second problem */
  .problem-band__title-humidity{
    margin-top:.45rem;

    color:var(--gold-500);
  }

  .problem-band__title-capillary{
    margin-top:.45rem;
    color:#fff;
  }

  .problem-band__copy p{
    max-width:34ch;

    margin:0 auto 1.5rem;

    font-size:.88rem;
    line-height:1.55;

    color:rgba(255,255,255,.80);
  }


  /* WhatsApp button becomes gold */
  .problem-band__btn{
    width:100%;
    max-width:340px;

    min-height:48px;

    background:var(--gold-500);

    color:var(--forest-deep);
  }

  .problem-band__btn:hover{
    background:var(--gold-600);
  }


  /* Existing "Besoin d'aide aujourd'hui ?" disappears */
  .hcta{
    display:none;
  }

}
.diff__cards--three{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.diff__card-head{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin-bottom:.45rem;
}

.diff__card-head h3{
  margin:0;
}

.diff__icon{
  flex:0 0 auto;
  font-size:1rem;
  line-height:1;
  color:var(--gold-600);
}

.diff__card p{
  margin:0;
}

@media(max-width:799px){
  .diff__cards--three{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FONT AWESOME ICON SIZING
   Replaces former inline SVG icons only
========================================================= */
.btn i{flex-shrink:0}

.stars-row i{font-size:.85rem}
.home-hero__check i{font-size:.8rem}
.home-hero__stars i{font-size:1rem}
.tm__proof-stars i{font-size:.9rem}
.tm__stars i{font-size:1rem}

.clear-offer-card__icon i{
  font-size:1.75rem;
  line-height:1;
}
.photo-cta__phone i{
  font-size:38px;
  line-height:1;
  color:#fff;
}
.photo-cta__whatsapp-badge i{
  font-size:16px;
  line-height:1;
}
.photo-cta__btn i{
  width:1.15rem;
  font-size:1.15rem;
  line-height:1;
  text-align:center;
  flex-shrink:0;
}
.local-area-card__list i{
  width:13px;
  margin-top:.08rem;
  font-size:13px;
  line-height:1;
  text-align:center;
  color:var(--gold-500);
}
.durable-cta__icon i{
  font-size:58px;
  line-height:1;
  color:var(--gold-500);
}
.faq__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.contact-action-card__icon i{
  font-size:25px;
  line-height:1;
}
.contact-action-card__btn i{
  width:1.1rem;
  font-size:1.1rem;
  line-height:1;
  text-align:center;
  flex-shrink:0;
}
.contact-proof-item i{
  width:22px;
  height:22px;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  line-height:1;
  color:var(--gold-500);
}

@media(max-width:599px){
  .durable-cta__icon i{
    font-size:52px;
  }
}

@media(min-width:900px){
  .clear-offer-card__icon i{
    font-size:2rem;
  }
}

@media(max-width:599px){

  .problem-band__btn{
    width:100%;
    max-width:none;
  }

  .durable-cta__action{
    width:100%;
    justify-content:center;
    padding-left:0;
  }

  .durable-cta__btn{
    width:100%;
    max-width:none;
    margin:0 auto;
  }

}
@media(max-width:599px){

  .problem-band__btn{
    width:100%;
    max-width:none;
    min-height:54px;

    padding:1rem 1.2rem;

    font-size:.9rem;
    line-height:1.25;

    white-space:normal;
    text-align:center;

    background:var(--gold-500);
    color:var(--forest-deep);
  }

  .problem-band__btn i{
    flex:0 0 auto;
    font-size:1.4rem;
    line-height:1;
  }

}

/* User-editable typography overrides must remain last. */
body{font-size:var(--ae-body-size,16px)}
h2{font-size:clamp(1.9rem,3.4vw,var(--ae-h2-max,44px))}
.home-hero__heading{font-size:clamp(2.55rem,5.2vw,var(--ae-hero-max,64px))}