/* Accueil seul. Mesures rapportées à la référence sans cadre ni barre iPhone.
   390 px : photo/vague 365 px, appel 465 px, tuiles 593 px, bandeau 674 px.
   Aucun décor étiré : la photo conserve le rapport 828 / 780 de son recadrage. */
@font-face {
  font-family: 'SM Premium';
  src: url('assets/fonts/roboto-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.site-shell:has(#screen-home.is-active) { min-height: 0; }

#screen-home {
  container-type: inline-size;
  font-family: 'SM Premium', Arial, sans-serif;
  color: #081947;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
#screen-home button { font-family: inherit; }

/* Photo détourée des éléments de présentation, véhicule et textes indépendants. */
#screen-home .home-hero {
  position: relative;
  isolation: isolate;
  height: 93.6cqw;
  overflow: hidden;
  background: linear-gradient(180deg, #b9ddff, #f1f9ff 57%, #f0e8da 83%, #e2d7c7);
}
#screen-home .hero-sky {
  position: absolute;
  z-index: 0;
  inset: 0 0 35%;
  background:
    linear-gradient(180deg, #ffffff00 34%, #dcefff88 60%, #eff7fc 100%),
    url('assets/images/home-sky-ambient.webp') left top / 100% auto no-repeat,
    linear-gradient(140deg, #b8deff, #d9efff 60%, #edf7fe);
}
#screen-home .home-hero::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 38% 34% 0;
  background: radial-gradient(ellipse 81% 84% at 0% 31%, #ffffffa8 0%, #ffffff6b 48%, #ffffff00 100%);
  pointer-events: none;
}
#screen-home .house-photo {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  filter: brightness(1.035) saturate(1.07);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 52%), linear-gradient(180deg, transparent 53%, #000 69%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, #000 52%), linear-gradient(180deg, transparent 53%, #000 69%);
  -webkit-mask-composite: source-over;
  mask-composite: add;
  pointer-events: none;
}
/* Les plantations existantes prolongent discrètement la photo sur le bord gauche. */
#screen-home .hero-ground {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
#screen-home .hero-ground::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 14.5cqw;
  width: 31cqw;
  height: 22cqw;
  background: url('assets/images/home-garden-premium.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 38%, transparent), linear-gradient(180deg, transparent, #000 35%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, #000 38%, transparent), linear-gradient(180deg, transparent, #000 35%, #000 75%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
#screen-home .hero-header {
  position: absolute;
  z-index: 6;
  top: 1.2cqw;
  left: 3.95cqw;
  right: 3.75cqw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#screen-home .brand-logo {
  content: url('assets/images/home-brand-premium.svg');
  width: 32cqw;
  height: 21.1cqw;
  margin-top: 1cqw;
  object-fit: contain;
}
#screen-home .menu-button {
  display: grid;
  place-items: center;
  width: 10.9cqw;
  height: 10.4cqw;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 2.6cqw;
  color: #004bca;
  background: linear-gradient(145deg, #fff, #f8fcff);
  box-shadow: 0 4px 12px #164a8114, inset 0 1px 0 #fff;
}
#screen-home .menu-button svg { width: 6.8cqw; height: 6.8cqw; stroke-width: 2.7; }
#screen-home .hero-copy {
  position: absolute;
  z-index: 5;
  top: 25cqw;
  left: 3.6cqw;
  width: 51cqw;
  pointer-events: none;
}
#screen-home .hero-copy h1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-size: 8.05cqw;
  line-height: .923;
  font-weight: 800;
  letter-spacing: -.1cqw;
  color: #0036aa;
  text-shadow: 0 1px 1px #ffffffcc, 0 0 4px #ffffff33;
}
#screen-home .hero-copy h1 .red { color: #f0000b; }
#screen-home .hero-copy p {
  width: 36.65cqw;
  max-width: 100%;
  margin: .4cqw 0 0;
  font-size: 3.13cqw;
  line-height: 1.18;
  font-weight: 400;
  color: #101f49;
  text-shadow: 0 1px 2px #fff;
}
#screen-home .hero-van {
  position: absolute;
  z-index: 3;
  right: .6cqw;
  top: 42.6cqw;
  width: 79.6cqw;
  isolation: isolate;
  pointer-events: none;
  filter: none;
}
#screen-home .hero-van img {
  width: 100%;
  height: auto;
  filter: contrast(1.075) saturate(1.04);
}
#screen-home .hero-van::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 1%;
  bottom: -2%;
  height: 21%;
  background:
    radial-gradient(ellipse 8% 13% at 40% 78%, #24272c58 0%, #24272c26 48%, transparent 100%),
    radial-gradient(ellipse 7% 12% at 92% 28%, #24272c50 0%, #24272c23 48%, transparent 100%),
    radial-gradient(ellipse 15% 9% at 15% 21%, #27242b35 0%, transparent 100%);
  filter: blur(1.7px);
  pointer-events: none;
}
#screen-home .hero-van::after {
  content: '';
  position: absolute;
  z-index: -2;
  left: 45%;
  right: 9%;
  bottom: 9%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #30323538, #30323517 50%, transparent 83%);
  filter: blur(3px);
  transform: rotate(-4deg);
  pointer-events: none;
}

/* Ornement détouré de la référence, à son rapport naturel ; reflet mobile discret. */
#screen-home .home-hero::after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 1px;
  background: #fff;
  pointer-events: none;
}
#screen-home .hero-ripple {
  position: absolute;
  z-index: 4;
  inset: auto 0 .12cqw;
  height: 17.3913cqw;
  overflow: hidden;
  pointer-events: none;
}
#screen-home .hero-ripple::before,
#screen-home .hero-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/home-wave-reference.webp') center bottom / 100% 100% no-repeat;
}
#screen-home .hero-ripple::before { filter: saturate(1.22) contrast(1.16) brightness(1.015); }
#screen-home .hero-ripple::after {
  opacity: .14;
  mix-blend-mode: screen;
  filter: brightness(1.1) saturate(1.06);
  animation: home-water-shine 6s ease-in-out infinite alternate;
}
@keyframes home-water-shine {
  from { transform: translateY(-1px); }
  to { transform: translateY(1px); }
}

/* Porcelaine blanche : contour lisible, lèvre éclairée et ombre de contact. */
#screen-home .home-content {
  padding: 0 3.7cqw;
  background: linear-gradient(#eef5fc, #fff 26cqw, #fff 49cqw, #f0f6fc);
}
#screen-home .perks {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 23.8cqw;
  gap: .7cqw;
  align-items: start;
  transform: translateY(-.7cqw);
}
#screen-home .perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  font-size: 3.3cqw;
  line-height: 1.08;
  font-weight: 650;
  letter-spacing: -.06cqw;
  color: #081847;
}
#screen-home .perk-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 16cqw;
  height: 16cqw;
  border: .3cqw solid #d8e5f0;
  border-radius: 50%;
  color: #005cee;
  background:
    radial-gradient(ellipse at 30% 17%, #fff 0%, #fff 36%, #f8fcff 68%, #e6f1fa 100%);
  box-shadow:
    0 6px 12px #1d487738,
    0 1px 2px #3f6c9114,
    inset 0 2px 3px #fff,
    inset 0 -3px 6px #9ebed83d;
}
#screen-home .perk-icon::before {
  content: '';
  position: absolute;
  inset: 2px 4px 49%;
  border-radius: 50%;
  background: linear-gradient(#fff, #ffffff00);
  pointer-events: none;
}
#screen-home .perk-icon::after {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1px solid #ffffffed;
  border-radius: inherit;
  pointer-events: none;
}
#screen-home .perk-icon svg {
  position: relative;
  z-index: 1;
  width: var(--perk-glyph-size, 11.4cqw);
  height: var(--perk-glyph-size, 11.4cqw);
  filter: drop-shadow(0 -1px 0 #ffffff80) drop-shadow(0 1px 0 #0047c533) drop-shadow(0 3px 3px #006be92e);
}
#screen-home .perk:first-child { --perk-glyph-size: 11cqw; }
#screen-home .perk:nth-child(2),
#screen-home .perk:nth-child(3) { --perk-glyph-size: 11.8cqw; }

/* Ces deux serveurs de peinture SVG ne sont utilisés que par les avantages de l’Accueil. */
#home-royal-icon stop:first-child { stop-color: #0daeff; }
#home-royal-icon stop:nth-child(2) { stop-color: #0068ff; }
#home-royal-icon stop:last-child { stop-color: #003ac8; }
#home-drop-blue stop:first-child { stop-color: #14b5ff; }
#home-drop-blue stop:last-child { stop-color: #0055e8; }

/* Contacts bombés : reflet supérieur, tranche sombre et bord lumineux continu. */
#screen-home .primary-actions { display: grid; margin-top: 1.85cqw; gap: 1.9cqw; }
#screen-home .action-button {
  --cta-glass: #7ce9ff4d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 19.5cqw minmax(0, 1fr) 8cqw;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 14.65cqw;
  padding: 1.6cqw 8.55cqw 1.6cqw 3.8cqw;
  border: .3cqw solid #51d2ff;
  border-radius: 6.3cqw;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(ellipse 35% 130% at 0% 50%, #008cfa, #008cfa00 80%),
    radial-gradient(ellipse 35% 130% at 100% 50%, #009aff, #009aff00 80%),
    linear-gradient(180deg, #19acff 0%, #0078f5 18%, #0057da 46%, #003bb6 76%, #0054d3 88%, #0088ee 100%);
  box-shadow:
    0 6px 13px #007bf052,
    inset 0 1px 2px #ffffffc2,
    inset 0 -3px 5px #0031a35c;
  text-shadow: 0 1px 1px #003b861f;
  transition: transform .18s var(--ease);
}
#screen-home .whats-button {
  --cta-glass: #c1ffae4d;
  border-color: #65f68a;
  background:
    radial-gradient(ellipse 35% 130% at 0% 50%, #25dc5b, #25dc5b00 80%),
    radial-gradient(ellipse 35% 130% at 100% 50%, #00df56, #00df5600 80%),
    linear-gradient(180deg, #49ed7d 0%, #09cd51 16%, #00b83a 43%, #009a2a 76%, #00a931 90%, #00c846 100%);
  box-shadow:
    0 6px 13px #00ad4550,
    inset 0 1px 2px #ffffffc2,
    inset 0 -3px 5px #006b2859;
  text-shadow: 0 1px 1px #0073261a;
}
#screen-home .action-button::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px 2px 43%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 90% 95% at 45% 0%, #ffffff3d, #ffffff00 75%),
    linear-gradient(180deg, #ffffff73 0%, #ffffff1c 43%, #ffffff04 80%, #fff0);
  pointer-events: none;
}
#screen-home .action-button::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px;
  border: 1px solid #ffffff3b;
  border-radius: inherit;
  box-shadow: inset 0 0 4px var(--cta-glass);
  pointer-events: none;
}
#screen-home .action-button > span { position: relative; z-index: 1; }
#screen-home .action-button:active { transform: scale(.987); }
#screen-home .cta-mark {
  display: grid;
  place-items: center;
  width: auto;
  height: 100%;
  padding-left: 2.4cqw;
  background: none;
  border-radius: 0;
}
#screen-home .cta-mark svg { width: 10cqw; height: 10cqw; }
#screen-home .whats-button .cta-mark svg { width: 11cqw; height: 11cqw; }
#screen-home .cta-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: .55cqw;
  padding-left: 3.7cqw;
  border-left: 1px solid #ffffff54;
}
#screen-home .cta-copy strong {
  font-size: 4.05cqw;
  line-height: 1.03;
  font-weight: 650;
  letter-spacing: -.02cqw;
  white-space: nowrap;
}
#screen-home .cta-copy small {
  font-size: 4.8cqw;
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: 0;
  color: #fff;
  opacity: 1;
  white-space: nowrap;
}
#screen-home .cta-next { display: grid; place-items: center; }
#screen-home .cta-next svg { width: 7.9cqw; height: 7.9cqw; stroke-width: 2.2; }

/* Quatre actions distinctes, sans modification de leurs attributs data-action. */
#screen-home .quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.9cqw;
  margin-top: 1.6cqw;
}
#screen-home .quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 19.3cqw;
  gap: 1cqw;
  padding: 1.2cqw .4cqw;
  border: 1px solid #dfebf5;
  border-radius: 3.6cqw;
  color: #0043ce;
  background: linear-gradient(145deg, #fff 48%, #fbfdff 85%, #f4f9fe);
  box-shadow:
    0 5px 10px #24588c26,
    0 1px 2px #326b9e0d,
    inset 0 1px 1px #fff,
    inset 0 -2px 3px #bfd5ea29;
  transition: transform .18s var(--ease);
}
#screen-home .quick-tile:active { transform: scale(.97); }
#screen-home .quick-tile svg { width: 8.3cqw; height: 8.3cqw; filter: drop-shadow(0 -1px 0 #d0ecff99) drop-shadow(0 1px 0 #002f9729) drop-shadow(0 2px 2px #0759bc17); }
#screen-home .quick-tile span { font-size: 3.1cqw; line-height: 1.12; font-weight: 400; letter-spacing: -.03cqw; color: #081947; text-align: center; }

/* Bandeau interactif : un fond SVG animé, pas une image de l’interface. */
#screen-home .discover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15.1cqw;
  margin-top: 1.5cqw;
  padding: 0 14cqw;
  border: 0;
  border-top: 1px solid #8aedff;
  border-radius: 7.2cqw 7.2cqw 0 0;
  color: #fff;
  background: linear-gradient(180deg, #16aaff, #0066ef 37%, #003db0 70%, #002775);
  box-shadow: inset 0 2px 4px #b5f1ff99, 0 -2px 7px #019dff2e;
  font-size: 4.1cqw;
  font-weight: 600;
  letter-spacing: -.04cqw;
  text-shadow: 0 1px 2px #001f7066;
}
#screen-home .discover::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0 -1%;
  background: url('assets/images/home-footer-gloss.svg') center / 100% 100% no-repeat;
  animation: home-footer-flow 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes home-footer-flow {
  from { transform: translateX(-.5%); }
  to { transform: translateX(.5%); }
}
#screen-home .discover-label { position: relative; z-index: 1; white-space: nowrap; transform: translate(1.4cqw, -1.1cqw); }
#screen-home .discover-grid,
#screen-home .discover-next { position: absolute; z-index: 1; top: var(--discover-anchor-y, 50%); transform: translateY(-50%); display: grid; place-items: center; }
#screen-home .discover-grid { --discover-anchor-y: 45.5%; left: 9cqw; width: 7cqw; height: 7cqw; }
#screen-home .discover-grid svg { width: 6.3cqw; height: 6.3cqw; fill: currentColor; stroke: none; }
#screen-home .discover-next { --discover-anchor-y: 42%; right: 8.3cqw; width: 8cqw; height: 8cqw; border: 1px solid #fff; border-radius: 50%; color: #0043c9; background: linear-gradient(135deg, #fff 50%, #edf8ff); box-shadow: 0 2px 6px #00398f3b; }
#screen-home .discover-next svg { width: 5.1cqw; height: 5.1cqw; stroke-width: 2.5; }

/* SMWORKS_PLOMBERIE_VOILE_BLANC_V1 */
/* Voile blanc doux uniquement derriere le grand titre Plomberie */

#screen-home .hero-copy h1 > span:first-child {
    position: relative;
    isolation: isolate;
}

#screen-home .hero-copy h1 > span:first-child::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.35em;
    top: -0.22em;
    width: 6.5em;
    max-width: 80vw;
    height: 1.5em;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at 36% 50%,
        rgba(255,255,255,0.78) 0%,
        rgba(255,255,255,0.45) 43%,
        rgba(255,255,255,0) 83%
    );
    filter: blur(8px);
    pointer-events: none;
}