/* Démo « Onde & Calcaire Piscines » — Lumière de fin d'après-midi sur l'eau. Entreprise fictive. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --bassin: #0B4F6C; --eau: #8FD0DE; --pierre: #E8E5DE; --encre: #0E1A1F; --soleil: #F2B33D;
  --pierre-2: #D9D4C8; --blanc: #FBFAF7;
  --gut: clamp(1.25rem, 4vw, 2.5rem); --wrap: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
body { background: var(--pierre); color: var(--encre); font-family: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; }
img { max-width: 100%; display: block; height: auto; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 96; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--soleil); outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.h2 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
.sec { color: #3E4C52; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* bandeau « concept » */
.concept { background: var(--encre); color: #fff; font-size: 1rem; }
.concept .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-block: .55rem; }
.concept a { color: var(--soleil); font-weight: 700; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 56px; padding: .8rem 1.6rem; border-radius: 999px; font-weight: 700; font-size: 1.125rem; text-decoration: none; background: var(--soleil); color: var(--encre); border: 0; cursor: pointer; transition: background .2s; }
.btn:hover { background: #F6C667; }
.btn-clair { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.7); }
.btn-clair:hover { background: rgba(255,255,255,.25); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* en-tête */
.entete { position: absolute; z-index: 5; left: 0; right: 0; color: #fff; }
.entete .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 80px; gap: 1rem; }
.marque { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.4rem; font-variation-settings: "SOFT" 100; text-decoration: none; line-height: 1.1; }
.marque small { display: block; font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: .875rem; font-weight: 400; opacity: .9; }
.entete .tel { font-weight: 700; text-decoration: none; display: none; }
@media (min-width: 720px) { .entete .tel { display: inline-flex; } }

/* hero + reflets */
.hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; color: #fff; overflow: hidden; background: var(--bassin); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,26,31,.8) 0%, rgba(14,26,31,.5) 38%, rgba(14,26,31,0) 68%), linear-gradient(180deg, rgba(14,26,31,.55) 0%, rgba(14,26,31,0) 22%, rgba(14,26,31,0) 72%, rgba(14,26,31,.55) 100%); }
/* signature : reflets de lumière, seulement sur l'eau du bassin, très lents */
.reflets { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: url("/img/demo/reflets.webp") 0 0 / 600px 600px repeat;
  -webkit-mask-image: radial-gradient(ellipse 40% 34% at 76% 90%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 40% 34% at 76% 90%, #000 25%, transparent 72%);
  animation: onde 70s linear infinite; }
@keyframes onde { to { background-position: 600px 300px; } }
@media (prefers-reduced-motion: reduce) { .reflets { animation: none; } }
.hero .wrap { position: relative; z-index: 2; text-shadow: 0 1px 14px rgba(14,26,31,.35); padding-block: 8rem clamp(2.5rem, 6vw, 4.5rem); }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem); max-width: 15ch; }
.hero p { max-width: 46ch; font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.lieu { display: inline-flex; gap: .5rem; align-items: center; font-weight: 700; margin-bottom: 1rem; color: var(--eau); }

/* services : liste éditoriale, pas de cartes */
.services { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--pierre-2); }
@media (min-width: 900px) { .services { grid-template-columns: 1fr 1fr; column-gap: 4rem; } }
.service { padding-block: 1.75rem; border-bottom: 1px solid var(--pierre-2); display: grid; grid-template-columns: 44px 1fr; gap: 1rem; }
.service svg { width: 36px; height: 36px; fill: none; stroke: var(--bassin); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service h3 { font-size: 1.6rem; }

/* contrat d'entretien */
.contrat { background: var(--bassin); color: #fff; position: relative; overflow: hidden; }
.contrat .grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 950px) { .contrat .grille { grid-template-columns: 6fr 5fr; gap: 4rem; } }
.contrat img { border-radius: 14px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.contrat .sec { color: #D5EDF2; }
.contrat ul { display: grid; gap: .8rem; margin-block: 1.5rem 2rem; }
.contrat li { display: flex; gap: .7rem; }
.contrat li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: .55em; border-radius: 50%; background: var(--eau); }

/* réalisations */
.galerie { display: grid; gap: .75rem; margin-top: 2.5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.galerie figure { position: relative; }
.galerie img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.galerie figcaption, .note-illu { font-size: 1rem; color: #3E4C52; margin-top: .35rem; }

.avap { margin-top: 3rem; display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 900px) { .avap { grid-template-columns: 7fr 4fr; gap: 3rem; } }
.comparer { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; --pos: 50%; }
.comparer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparer .avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.comparer .trait { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; transform: translateX(-50%); pointer-events: none; }
.comparer .trait::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--bassin); display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; }
.comparer input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.comparer .tag { position: absolute; top: .75rem; background: rgba(14,26,31,.72); color: #fff; font-size: .9375rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.comparer .tag.g { left: .75rem; } .comparer .tag.d { right: .75rem; }
.comparer:has(input:focus-visible) { outline: 3px solid var(--soleil); outline-offset: 3px; }

/* zone */
.zone { display: grid; gap: 2rem; }
@media (min-width: 900px) { .zone { grid-template-columns: 5fr 6fr; gap: 4rem; align-items: center; } }
.communes { display: flex; flex-wrap: wrap; gap: .6rem; }
.communes li { border: 1.5px solid var(--bassin); color: var(--bassin); border-radius: 999px; padding: .45rem 1rem; font-weight: 700; background: var(--blanc); }
.communes li:first-child { background: var(--bassin); color: #fff; }

/* contact */
.contact { background: var(--blanc); }
.contact .grille { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact .grille { grid-template-columns: 5fr 6fr; gap: 4rem; } }
.gros-tel { font-family: "Fraunces", Georgia, serif; font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); font-weight: 600; text-decoration: none; color: var(--bassin); display: inline-block; margin-top: 1rem; }
form { display: grid; gap: 1.1rem; background: #fff; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 14px; border: 1px solid var(--pierre-2); }
label { font-weight: 700; display: grid; gap: .35rem; }
input, textarea, select { font: inherit; min-height: 56px; padding: .7rem .9rem; border: 1.5px solid #8A9499; border-radius: 10px; background: var(--blanc); color: var(--encre); }
textarea { min-height: 120px; resize: vertical; }
.maquette-note { font-size: 1rem; color: #3E4C52; }
#envoi-factice[hidden] { display: none; }
.factice { background: #E6F4F7; border: 1.5px solid var(--bassin); padding: .8rem 1rem; border-radius: 10px; font-weight: 700; }

.pied { background: var(--encre); color: #C8D3D7; font-size: 1rem; padding-block: 2.5rem; }
.pied a { color: #fff; }
.pied .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.h-avap { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); }
.mt1 { margin-top: 1rem; }
.section.pt0 { padding-top: 0; }

/* barre d'appel fixe sur mobile */
.barre-appel { display: none; }
@media (max-width: 719px) {
  .barre-appel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(14,26,31,.94); backdrop-filter: blur(6px); }
  .barre-appel .btn { min-height: 56px; padding-inline: .5rem; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .hero::after { background: linear-gradient(180deg, rgba(14,26,31,.55) 0%, rgba(14,26,31,.15) 25%, rgba(14,26,31,.55) 55%, rgba(14,26,31,.88) 100%); }
  .reflets { -webkit-mask-image: radial-gradient(ellipse 90% 30% at 70% 88%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 90% 30% at 70% 88%, #000 30%, transparent 75%); opacity: .5; }
  .hero > img { object-position: 70% center; }
}
.btn-clair-fonce { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.75); }

@media (max-width: 719px) { .hero .actions { display: none; } }
.lieu { color: #fff; background: rgba(14,26,31,.55); padding: .2rem .7rem; border-radius: 999px; text-shadow: none; }