/* Les Espaces Bleus · démo Vixya
   Une page qui descend dans un bassin : l'eau de nuit du haut de page, le travertin des margelles,
   le plan bleu du chantier, la pierre verte des fonds, l'eau turquoise des avis, l'écume du devis, le bois du deck. */

@font-face { font-family: "Funnel Display"; src: url("polices/funnel-display.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Funnel Sans"; src: url("polices/funnel-sans.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  --nuit: #071F2A;
  --nuit-2: #0B2B3A;
  --plan: #0C3550;
  --cyan: #17B4CA;
  --cyan-clair: #9CEBF3;
  --bleu: #1D5FAE;
  --travertin: #ECE3D1;
  --travertin-2: #E0D3BA;
  --ecume: #F7F3EA;
  --pierre: #1B2F2B;
  --pierre-2: #24403A;
  --teck: #8C5A34;
  --encre: #0C2630;
  --encre-2: #3B5560;
  --titre: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --texte: "Funnel Sans", "Segoe UI", system-ui, sans-serif;
  --marge: clamp(18px, 5vw, 72px);
  --rayon: 22px;
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0; background: var(--nuit); color: var(--encre);
  font: 400 1.0625rem/1.6 var(--texte); font-optical-sizing: auto;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2rem, 7.2vw, 4rem); line-height: 1.04; letter-spacing: -0.022em; }
p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ecume); color: var(--encre); padding: 10px 14px; border-radius: 10px; }
.evitement:focus { top: 12px; }

/* ───────── Boutons et étiquettes ───────── */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: 0 1.4em; border-radius: 999px; border: 2px solid transparent;
  font: 700 1.0625rem/1.15 var(--texte); text-decoration: none; text-align: center;
  transition: transform .35s var(--sortie), background-color .25s, color .25s, border-color .25s, box-shadow .35s;
}
.bouton svg { width: 1.2em; height: 1.2em; flex: none; }
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(1px) scale(.98); }
.bouton-plein { background: var(--cyan); color: var(--nuit); box-shadow: 0 10px 26px -12px rgba(23, 180, 202, .8); }
.bouton-plein:hover { background: #3CC6D9; box-shadow: 0 16px 34px -12px rgba(23, 180, 202, .9); }
.bouton-trait { border-color: rgba(255, 255, 255, .55); color: #fff; }
.bouton-trait:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.bouton-trait-sombre { border-color: var(--encre); color: var(--encre); }
.bouton-trait-sombre:hover { background: var(--encre); color: var(--ecume); }
.bouton-clair { background: var(--ecume); color: var(--pierre); }
.bouton-clair:hover { background: #fff; }

.etiquette {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: 18px;
  font: 700 1rem/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu);
}
.etiquette::before { content: ""; width: 34px; height: 10px; flex: none; background: url("img/vague-bleue.svg") center / contain no-repeat; }
.etiquette-claire { color: var(--cyan-clair); }
.etiquette-claire::before { background-image: url("img/vague-cyan.svg"); }
.etiquette-nuit { color: var(--nuit); }
.etiquette-nuit::before { background-image: url("img/vague-nuit.svg"); }
.etiquette-bois { color: #FFE2B8; }
.etiquette-bois::before { background-image: url("img/vague-cyan.svg"); }

/* ───────── En-tête ───────── */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: 66px;
  display: flex; align-items: center; gap: 10px; padding: 0 max(14px, var(--marge));
  color: #fff; transition: background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.entete::before { content: ""; position: absolute; inset: 0 0 -30px 0; z-index: -1; background: linear-gradient(rgba(4, 18, 26, .62), rgba(4, 18, 26, 0)); transition: opacity .4s; pointer-events: none; }
.entete.pleine { background: rgba(7, 31, 42, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(156, 235, 243, .14); }
.entete.pleine::before { opacity: 0; }
.marque { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.marque-icone { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.marque-nom { font: 700 1.0625rem/1 var(--titre); letter-spacing: -.01em; max-width: 6.2em; }
.marque-nom span { font-weight: 400; }
.apercu {
  flex: none; padding: 5px 10px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px;
  font: 700 .8125rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; cursor: help;
}
.menu { display: none; }
.entete-tel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
  border-radius: 999px; background: var(--cyan); color: var(--nuit); font-weight: 700; text-decoration: none; flex: none;
  transition: background-color .25s, transform .3s var(--sortie);
}
.entete-tel:hover { background: #3CC6D9; transform: translateY(-1px); }
.entete-tel svg { width: 20px; height: 20px; }
.tel-long { display: none; }
@media (min-width: 420px) { .tel-long { display: inline; } .tel-court { display: none; } }
@media (min-width: 1080px) {
  .marque-nom { max-width: none; font-size: 1.1875rem; }
  .menu { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
  .menu a { text-decoration: none; font-weight: 600; opacity: .88; position: relative; padding: 6px 0; }
  .menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sortie); }
  .menu a:hover { opacity: 1; }
  .menu a:hover::after { transform: scaleX(1); }
  .entete-tel { margin-left: 18px; }
}

/* ───────── Haut de page : la photo du soir en plein écran, le texte posé dessus ───────── */
.heros { position: relative; background: var(--nuit); color: #fff; }
.heros-scene { position: relative; min-height: max(540px, 100svh); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--nuit-2); }
.heros-scene picture { position: absolute; inset: 0; }
.heros-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform-origin: 50% 60%; }
.heros-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 31, 42, 0) 30%, rgba(7, 31, 42, .45) 50%, rgba(7, 31, 42, .86) 72%, rgba(7, 31, 42, .96) 100%);
}
.heros-note {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4em; padding: 8px 14px; border-radius: 999px; margin: 0 0 16px;
  background: rgba(7, 31, 42, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22); font-size: 1rem;
}
.heros-note strong { font-weight: 800; }
.etoiles { color: #FFC94D; letter-spacing: .06em; }
.ligne-eau { position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; overflow: hidden; z-index: 1; pointer-events: none; }
.ligne-eau svg, .pied-vague svg { display: block; width: 200%; height: 100%; }
.le-fond { fill: var(--nuit); }
.le-trait { fill: none; stroke: var(--cyan); stroke-width: 3; vector-effect: non-scaling-stroke; }
.houle .ligne-eau svg, .houle .pied-vague svg { animation: houle 18s linear infinite; }
.houle.hors-ecran .ligne-eau svg, .pied.hors-ecran .pied-vague svg { animation-play-state: paused; }
@keyframes houle { to { transform: translateX(-50%); } }

.heros-texte { position: relative; z-index: 2; padding: 0 var(--marge) calc(var(--barre-h, 0px) + 40px); display: flex; flex-direction: column; }
.surtitre { color: var(--cyan-clair); font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-shadow: 0 1px 12px rgba(4, 18, 26, .7); }
.heros-titre { font-size: clamp(1.9rem, 8.1vw, 4.6rem); line-height: 1.03; letter-spacing: -.024em; margin: .25em 0 .45em; max-width: 13.5em; text-shadow: 0 2px 24px rgba(4, 18, 26, .6); }
.heros-chapo { color: rgba(255, 255, 255, .86); max-width: 34em; }
.heros-texte .actions .bouton { flex: 1 1 auto; }
.bureau-etat { display: inline-flex; align-items: center; gap: 10px; font-size: 1rem; color: rgba(255, 255, 255, .86); }
.pastille { width: 10px; height: 10px; border-radius: 50%; background: #8FA3AA; flex: none; }
.ouvert .pastille { background: #4BE08A; box-shadow: 0 0 0 0 rgba(75, 224, 138, .55); animation: pouls 2.4s ease-out infinite; }
@keyframes pouls { 70% { box-shadow: 0 0 0 9px rgba(75, 224, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(75, 224, 138, 0); } }
.heros-suite { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px var(--marge) 30px; }
.heros-suite .bouton { align-self: stretch; }
@media (max-width: 899px) { .seul-ordi { display: none !important; } }
@media (min-width: 900px) {
  .seul-tel { display: none !important; }
  .heros-scene { min-height: max(640px, 100svh); }
  .heros-scene img { object-position: 50% 55%; }
  .heros-scene::after { background: linear-gradient(90deg, rgba(7, 31, 42, .94) 0%, rgba(7, 31, 42, .78) 34%, rgba(7, 31, 42, .18) 66%, rgba(7, 31, 42, 0) 100%), linear-gradient(0deg, rgba(7, 31, 42, .55), rgba(7, 31, 42, 0) 40%); }
  .ligne-eau { height: 64px; }
  .heros-texte { padding: 120px var(--marge) 120px; max-width: 900px; }
  .heros-titre { font-size: clamp(3rem, 5vw, 4.4rem); }
  .heros-chapo { margin: 0 0 24px; font-size: 1.1875rem; }
  .heros-note { margin-bottom: 22px; }
  .heros-texte .actions .bouton { flex: 0 0 auto; }
  .heros-texte .bureau-etat { margin-top: 18px; }
}

/* ───────── Les repères : les chiffres en grand, séparés par la vague du logo ───────── */
.reperes { position: relative; background: var(--nuit); color: #fff; padding: 26px var(--marge) 60px; }
.reperes-vague { display: block; width: 100%; max-width: 1240px; height: 22px; margin: 0 auto 8px; overflow: visible; }
.reperes-vague path { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.reperes-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; }
.reperes-liste li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 20px 0 22px;
  background: url("img/vague-ligne.svg") left bottom / 120px 16px repeat-x;
}
.reperes-liste li:last-child { background: none; }
.rep-chiffre {
  display: inline-flex; align-items: baseline; gap: .12em; white-space: nowrap;
  font: 600 clamp(3.4rem, 17vw, 4.6rem)/.92 var(--titre); letter-spacing: -.045em; color: var(--cyan-clair);
}
.rep-chiffre small { font-size: .4em; font-weight: 500; letter-spacing: -.01em; color: #fff; }
.rep-chiffre small:first-child { align-self: flex-start; margin-top: .2em; margin-right: .08em; }
.rep-texte { color: rgba(255, 255, 255, .82); font-size: 1rem; line-height: 1.4; max-width: 13em; }
.reperes-hotels {
  max-width: 1240px; margin: 26px auto 0; padding: 16px 20px; border-radius: 16px;
  background: rgba(23, 180, 202, .1); border: 1px solid rgba(156, 235, 243, .25);
  font: 500 1.25rem/1.35 var(--titre); color: #fff;
}
@media (min-width: 900px) {
  .reperes { padding: 40px var(--marge) 90px; }
  .reperes-vague { margin-bottom: 30px; }
  .reperes-liste { display: grid; grid-template-columns: repeat(4, 1fr); }
  .reperes-liste li {
    grid-template-columns: 1fr; align-content: start; gap: 14px; padding: 0 28px; background: none;
  }
  .reperes-liste li:first-child { padding-left: 0; }
  .rep-chiffre { font-size: clamp(4.4rem, 6.6vw, 6.6rem); }
  .rep-texte { font-size: 1.0625rem; }
  .reperes-hotels { display: inline-block; margin: 46px 0 0; font-size: 1.5rem; }
  .reperes-hotels { margin-left: max(0px, calc((100% - 1240px) / 2)); }
}

/* ───────── Savoir-faire : le travertin des margelles ───────── */
.savoir {
  position: relative; background: var(--travertin) url("img/travertin.svg") 0 0 / 520px; color: var(--encre);
  padding: 76px var(--marge) 90px;
}
/* la margelle : le bord du bassin, en pierre claire, entre l'eau de nuit et le travertin */
.savoir::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 18px;
  background: linear-gradient(#F6F0E3, #E6DAC2); border-radius: 0; box-shadow: 0 6px 14px -8px rgba(60, 40, 10, .45);
}
.savoir-tete { max-width: 1240px; margin: 0 auto 42px; }
.savoir-tete h2 { max-width: 15em; }
.savoir-corps { max-width: 1240px; margin: 0 auto; }
.savoir-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 58px; }
.savoir-nom { display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.2rem, 9vw, 3.8rem); line-height: 1; letter-spacing: -.03em; color: var(--encre); }
.savoir-num { font: 600 1.125rem/1 var(--texte); color: var(--bleu); letter-spacing: .04em; padding: 6px 9px; border: 2px solid currentColor; border-radius: 999px; transform: translateY(-.35em); }
.savoir-item p { margin-top: 16px; max-width: 30em; color: var(--encre-2); font-size: 1.125rem; }
.cadre-margelle {
  margin: 0; border: 10px solid var(--ecume); border-radius: 28px; overflow: hidden; background: var(--travertin-2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 26px 50px -26px rgba(52, 36, 12, .55), 0 2px 0 #D2C3A5;
}
.savoir-photo-tel { margin-top: 20px; }
.savoir-photo-tel img { width: 100%; height: 100%; object-fit: cover; }
.savoir-item:nth-child(1) .savoir-photo-tel { aspect-ratio: 4 / 5; }
.savoir-item:nth-child(2) .savoir-photo-tel { aspect-ratio: 1; width: 86%; margin-left: auto; }
.savoir-item:nth-child(3) .savoir-photo-tel { aspect-ratio: 4 / 3; width: 92%; }
.savoir-vitrine { display: none; }
@media (min-width: 900px) {
  .savoir { padding: 120px var(--marge) 130px; }
  .savoir-corps { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
  .savoir-liste { gap: 0; padding-top: 10px; }
  .savoir-item { padding: 34px 0; border-top: 1px solid rgba(12, 38, 48, .16); opacity: .5; transition: opacity .5s; cursor: default; }
  .savoir-item:last-child { border-bottom: 1px solid rgba(12, 38, 48, .16); }
  .savoir-item.actif { opacity: 1; }
  .savoir-photo-tel { display: none; }
  .savoir-vitrine { display: block; position: relative; aspect-ratio: 4 / 5; max-height: 78vh; width: 100%; }
  .savoir-vitrine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.2s var(--sortie); }
  .savoir-vitrine img.visible { opacity: 1; transform: none; }
}

/* ───────── Le chantier : le plan bleu ───────── */
.chantier {
  position: relative; color: #fff; padding: 84px var(--marge) 90px;
  background-color: var(--plan);
  background-image:
    linear-gradient(rgba(156, 235, 243, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 235, 243, .09) 1px, transparent 1px),
    linear-gradient(rgba(156, 235, 243, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 235, 243, .045) 1px, transparent 1px);
  background-size: 140px 140px, 140px 140px, 28px 28px, 28px 28px;
}
.chantier-tete { max-width: 1240px; margin: 0 auto 30px; }
.chantier-tete h2 { max-width: 17em; }
.chantier-chapo { margin-top: 18px; max-width: 38em; color: rgba(255, 255, 255, .82); font-size: 1.125rem; }
.chantier-corps { max-width: 1240px; margin: 0 auto; }
.coupe { margin: 0; }
.coupe-cadre { position: relative; margin-inline: calc(-1 * var(--marge)); }
.coupe-svg { display: block; width: 100%; height: auto; aspect-ratio: 560 / 640; overflow: hidden; }
.c-cote-txt { font: 700 24px var(--texte); fill: #fff; letter-spacing: .04em; }
.c-rep circle { fill: var(--plan); stroke: var(--cyan-clair); stroke-width: 4; transition: fill .35s; }
.c-rep text { font: 800 21px var(--texte); fill: #fff; text-anchor: middle; }
.c-rep.fait circle { fill: var(--cyan); stroke: #fff; }
.c-rep.fait text { fill: var(--nuit); }
.c-flux { opacity: .85; }
@keyframes flux { to { stroke-dashoffset: -44; } }
/* le tracé du projet, ses cotes, ses piquets et le tas de terre ne servent qu'au début : sans animation, le bassin est fini */
.c-trace, .c-cotes, .c-cote-txt, .c-piquet, .c-tas { opacity: 0; }

/* les étapes : une liste sous le dessin du bassin plein, sans script ou avec « réduire les animations » */
.etapes { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1240px; display: grid; gap: 30px; }
.etapes li { position: relative; padding-left: 58px; }
.etapes h3 { display: flex; align-items: center; font-size: 1.5rem; line-height: 1.15; margin-bottom: 8px; }
.etapes h3 > span {
  position: absolute; left: 0; top: -4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--cyan-clair); background: var(--cyan); color: var(--nuit); font: 800 1.0625rem/1 var(--texte);
}
.etapes p { color: rgba(255, 255, 255, .86); }
.etapes blockquote { margin: 12px 0 0; padding-left: 14px; border-left: 3px solid var(--cyan); color: var(--cyan-clair); font-size: 1rem; line-height: 1.5; }
.etapes cite { display: block; margin-top: 4px; font-style: normal; font-weight: 700; color: rgba(255, 255, 255, .72); font-size: 1rem; }

/* avec le script : une planche par étape, à peu près une hauteur d'écran, rien d'épinglé */
.planches .coupe { display: none; }
.planches .etapes { display: block; margin: 0; }
.planche { padding: 0 !important; margin: 0 0 64px; display: grid; grid-template-areas: "texte" "dessin" "citation"; }
.planche:last-child { margin-bottom: 0; }
.planche-texte { grid-area: texte; }
.planche h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; font-size: 1.5rem; }
.planche h3 > span {
  position: static; flex: none; width: auto; height: auto; border: 0; border-radius: 0; background: none; display: block;
  font: 600 3.4rem/.9 var(--titre); letter-spacing: -.04em; color: var(--cyan);
}
.planche p { max-width: 34em; font-size: 1.0625rem; }
.planche-dessin { grid-area: dessin; margin: 22px calc(-1 * var(--marge)) 0; }
.planche-dessin .coupe-svg { aspect-ratio: 4 / 3; }
.planche blockquote { grid-area: citation; margin-top: 18px; font-size: 1.0625rem; }
.planches .c-flux { opacity: 0; transition: opacity .6s; }
.planches .en-eau .c-flux { opacity: .85; animation: flux 1.4s linear infinite; }
.planches.hors-ecran .c-flux { animation-play-state: paused; }

@media (min-width: 900px) {
  .chantier { padding: 120px var(--marge) 120px; }
  .coupe-cadre { margin-inline: 0; }
  .coupe-svg { aspect-ratio: 960 / 690; border-radius: 22px; }
  .etapes { display: block; margin: 0; }
  .etapes li { margin-bottom: 30px; }
  .chantier-corps { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: clamp(36px, 4vw, 64px); align-items: center; }
  /* les planches alternent le dessin à droite puis à gauche */
  .planches .chantier-corps { display: block; }
  .planche {
    margin-bottom: 72px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(40px, 5vw, 80px);
    grid-template-areas: "texte dessin" "citation dessin"; align-content: center; align-items: end;
  }
  .planche:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "dessin texte" "dessin citation"; }
  .planche-texte { align-self: end; }
  .planche blockquote { align-self: start; }
  .planche h3 { font-size: 2rem; }
  .planche h3 > span { font-size: 4.6rem; }
  .planche p { font-size: 1.125rem; }
  .planche-dessin { margin: 0; }
  .planche-dessin .coupe-svg { border-radius: 22px; }
}
.chantier-fin { max-width: 1240px; margin: 46px auto 0; padding-top: 30px; border-top: 1px dashed rgba(156, 235, 243, .4); display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.chantier-fin p { font: 500 1.375rem/1.3 var(--titre); }
@media (min-width: 900px) { .chantier-fin { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ───────── Réalisations : la pierre verte, le titre géant posé sur la première photo ───────── */
.realisations {
  position: relative; color: #EAF2EF; padding: 0 0 96px;
  background: var(--pierre) url("img/pierre.svg") 0 0 / 600px;
}
.real-entree { position: relative; min-height: min(78svh, 680px); display: flex; align-items: flex-end; overflow: hidden; margin-bottom: 14px; }
.real-entree picture { position: absolute; inset: 0; }
.real-entree img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%; will-change: transform; }
.real-entree::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 47, 43, .35) 0%, rgba(27, 47, 43, 0) 30%, rgba(27, 47, 43, .2) 52%, rgba(27, 47, 43, .92) 100%);
}
.real-entree-texte { position: relative; z-index: 1; padding: 0 var(--marge) 34px; width: 100%; max-width: calc(1400px + 2 * var(--marge)); margin: 0 auto; }
.real-titre { font-size: clamp(2.6rem, 12vw, 7.4rem); line-height: .98; letter-spacing: -.04em; max-width: 12em; text-shadow: 0 4px 30px rgba(7, 20, 18, .45); }
.real-entree-texte p { margin-top: 16px; font-size: 1.0625rem; color: rgba(255, 255, 255, .88); }

.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; max-width: 1400px; margin: 0 auto; }
.tuile { position: relative; margin: 0; border-radius: 18px; overflow: hidden; background: var(--pierre-2); cursor: zoom-in; outline-offset: 3px; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.tuile figcaption {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px);
  padding: 8px 12px; border-radius: 12px; background: rgba(7, 31, 42, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 1rem; line-height: 1.3; font-weight: 600;
  opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .45s var(--sortie);
}
.tuile:is(:hover, :focus-visible, .montre) figcaption { opacity: 1; transform: none; }
.tuile:is(:hover, :focus-visible, .montre) img { transform: scale(1.05); }
.t-ciel, .t-pierre, .t-longueur { grid-column: span 2; }
.t-ciel { aspect-ratio: 16 / 9; }
.t-pierre, .t-longueur { aspect-ratio: 4 / 5; }
.t-courbe, .t-couloir, .t-cour, .t-rond { aspect-ratio: 4 / 5; }
.real-suite { text-align: center; margin-top: 40px; padding: 0 var(--marge); }
@media (min-width: 900px) {
  .realisations { padding: 0 0 120px; }
  .real-entree { min-height: min(72vh, 660px); margin-bottom: 18px; }
  .real-entree img { height: 110%; }
  .real-entree img { object-position: 50% 50%; }
  .real-entree-texte { padding-bottom: 56px; }
  .mosaique { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(100px, 9vw, 140px); gap: 14px; padding: 0 var(--marge); }
  .tuile { aspect-ratio: auto !important; grid-column: auto; }
  .t-ocean { grid-column: 1 / 5; grid-row: 1 / 7; }
  .t-courbe { grid-column: 5 / 9; grid-row: 1 / 4; }
  .t-couloir { grid-column: 9 / 13; grid-row: 1 / 4; }
  .t-pierre { grid-column: 5 / 8; grid-row: 4 / 7; }
  .t-cour { grid-column: 8 / 10; grid-row: 4 / 7; }
  .t-longueur { grid-column: 10 / 13; grid-row: 4 / 7; }
}

/* ───────── Avis : l'eau du bassin, la note en grand, deux paroles mises en scène, une bande qui glisse ───────── */
.avis {
  position: relative; overflow: hidden; color: #fff; padding: 92px var(--marge) 90px;
  background: linear-gradient(180deg, #168EA3 0%, #0F7590 45%, #0A5A74 100%);
}
.avis::before { /* la surface : la vague du logo, du fond de pierre vers l'eau */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 40px; z-index: 1;
  background: url("img/surface.svg") center top / 100% 100% no-repeat;
}
.avis-eau { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.avis-eau span { position: absolute; inset: -240px; background: url("img/reflets.svg") 0 0 / 560px; opacity: .2; will-change: transform; }
.avis-eau span + span { background-size: 820px; opacity: .12; }
.reflets-actifs .avis-eau span { animation: derive 46s linear infinite alternate; }
.reflets-actifs .avis-eau span + span { animation-duration: 63s; animation-direction: alternate-reverse; }
.avis.hors-ecran .avis-eau span { animation-play-state: paused; }
@keyframes derive { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(180px, 120px, 0); } }
.avis > *:not(.avis-eau) { position: relative; z-index: 2; }

/* l'ancre : la note en très grand */
.avis-ancre { max-width: 1240px; margin: 0 auto 48px; display: grid; gap: 26px; }
.avis-note { display: flex; align-items: flex-end; gap: 14px; }
.avis-note-chiffre { font: 600 clamp(6.6rem, 34vw, 12rem)/.8 var(--titre); letter-spacing: -.06em; color: #fff; text-shadow: 0 10px 40px rgba(4, 40, 52, .35); }
.avis-note-detail { display: flex; flex-direction: column; gap: 6px; padding-bottom: .5em; font-weight: 600; line-height: 1.3; }
.avis-note-detail .etoiles { font-size: 1.6rem; color: #FFD25E; letter-spacing: .04em; }
.avis-tete h2 { max-width: 15em; margin-bottom: 22px; }
.avis-tete .bouton svg { color: #E8A800; }

/* la première parole, en typographie géante sur l'eau */
.avis-geant { max-width: 1240px; margin: 0 auto 56px; }
.avis-geant p { font: 500 clamp(1.3rem, 5.6vw, 2.7rem)/1.24 var(--titre); letter-spacing: -.02em; }
.avis-geant mark { background: linear-gradient(transparent 58%, rgba(156, 235, 243, .45) 58%) 0 0 / 100% 100% no-repeat; color: #fff; padding: 0 .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.avis-geant cite, .avis-dalle cite, .avis-verre cite { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; font-style: normal; font-weight: 700; }
.avis-geant cite::before, .avis-verre cite::before { content: ""; width: 26px; height: 8px; background: url("img/vague-cyan.svg") center / contain no-repeat; }

/* la deuxième, gravée dans une dalle de pierre verte, comme le fond de leurs bassins */
.avis-dalle {
  max-width: 1240px; margin: 0 auto; padding: 30px 24px 26px; border-radius: 6px; color: #EAF2EF;
  background: #2E5A51 url("img/pierre.svg") 0 0 / 420px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08), 0 0 0 6px #E9DFC9, 0 26px 50px -20px rgba(3, 30, 38, .7);
}
.avis-dalle p { font: 500 1.25rem/1.45 var(--titre); }
.avis-dalle cite { color: #fff; }
.avis-dalle cite::before { content: ""; width: 26px; height: 8px; background: url("img/vague-cyan.svg") center / contain no-repeat; }

/* les autres, sur une bande qui glisse au doigt : un seul traitement, du verre posé sur l'eau */
.avis-bande-cadre { max-width: 1240px; margin: 56px auto 0; }
.avis-bande {
  display: flex; gap: 14px; margin: 0 calc(-1 * var(--marge)); padding: 4px var(--marge) 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; overscroll-behavior-x: contain;
}
.avis-bande::-webkit-scrollbar { display: none; }
.avis-bande:focus-visible { outline: 3px solid var(--cyan-clair); outline-offset: 2px; }
.avis-verre {
  flex: 0 0 min(80vw, 360px); scroll-snap-align: start; margin: 0; padding: 22px 22px 20px; border-radius: 20px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  background: rgba(4, 44, 58, .42); border: 1px solid rgba(156, 235, 243, .3); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.avis-verre p { font-size: 1.0625rem; line-height: 1.55; }
.avis-verre cite { margin-top: 0; }
.avis-fleches { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.fleche {
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: background-color .25s, border-color .25s, transform .3s var(--sortie);
}
.fleche:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.fleche:active { transform: scale(.94); }
.fleche:disabled { opacity: .35; cursor: default; }
.fleche svg { width: 22px; height: 22px; }
.avis-compte { font-weight: 700; min-width: 4.4em; text-align: center; }
@media (min-width: 900px) {
  .avis { padding: 140px var(--marge) 120px; }
  .avis::before { height: 64px; }
  .avis-ancre { grid-template-columns: auto 1fr; align-items: end; gap: 60px; margin-bottom: 80px; }
  .avis-geant { display: grid; grid-template-columns: repeat(12, 1fr); margin-bottom: 0; }
  .avis-geant > * { grid-column: 1 / 10; }
  .avis-dalle { margin: -10px 0 0 auto; max-width: 560px; padding: 36px 34px 30px; position: relative; }
  .avis-dalle p { font-size: 1.375rem; }
  .avis-bande-cadre { margin-top: 80px; }
  .avis-bande { margin: 0; padding: 4px 0 16px; scroll-padding-inline: 0; }
  .avis-verre { flex-basis: calc((100% - 28px) / 3); }
}

/* ───────── Devis : l'écume et les dalles claires ───────── */
.devis {
  position: relative; color: var(--encre); padding: 84px var(--marge) 90px;
  background-color: var(--ecume);
  background-image: linear-gradient(rgba(140, 120, 80, .1) 2px, transparent 2px), linear-gradient(90deg, rgba(140, 120, 80, .1) 2px, transparent 2px), url("img/travertin.svg");
  background-size: 180px 120px, 180px 120px, 520px;
}
.devis-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 34px; }
.devis-tete h2 { max-width: 16em; }
.devis-tete p:last-child { margin-top: 16px; color: var(--encre-2); font-size: 1.125rem; }
.message-titre { padding: 0; margin-bottom: 12px; font: 600 1.25rem/1.2 var(--titre); }
.message { padding: 22px; border-radius: 22px; background: #fff; border: 2px dashed rgba(23, 180, 202, .7); }
.devis-numero { display: inline-block; margin-bottom: 18px; font: 700 clamp(2rem, 1.4rem + 3.2vw, 3.25rem)/1 var(--titre); color: var(--bleu); text-decoration: none; white-space: nowrap; border-bottom: 3px solid var(--cyan); padding-bottom: 4px; }
.message-texte { font-size: 1.125rem; line-height: 1.55; padding: 14px 16px; border-radius: 14px; background: #EFF9FA; margin-bottom: 18px; }
.actions-devis .bouton { flex: 1 1 220px; }
.message-note { margin-top: 14px; color: var(--encre-2); font-size: 1rem; }
@media (min-width: 900px) {
  .devis { padding: 120px var(--marge) 120px; }
  .devis-in { grid-template-columns: 1fr 1.1fr; column-gap: clamp(40px, 6vw, 90px); align-items: center; }
}

/* ───────── Contact : le bois du deck ───────── */
.contact {
  position: relative; color: #FFF7EA; padding: 84px var(--marge) 96px;
  background: linear-gradient(rgba(38, 22, 10, .52), rgba(38, 22, 10, .64)), #6E4428 url("img/deck.svg") 0 0 / 640px;
}
.contact-tete { max-width: 1240px; margin: 0 auto 36px; }
.contact-tete h2 { max-width: 13em; text-shadow: 0 2px 18px rgba(30, 16, 6, .5); }
.contact-corps { max-width: 1240px; margin: 0 auto; display: grid; gap: 40px; }
.gros-tel { display: inline-flex; flex-direction: column; text-decoration: none; font: 600 clamp(2.4rem, 11vw, 4.6rem)/1 var(--titre); letter-spacing: -.03em; color: #fff; }
.gros-tel span { font: 700 1rem/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; color: #FFE2B8; margin-bottom: 10px; }
.gros-tel:hover { color: var(--cyan-clair); }
.contact-ligne { margin-top: 18px; display: grid; gap: 2px; font-size: 1.125rem; }
.contact-ligne span { font-weight: 700; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: #FFE2B8; }
.contact-ligne a { text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-joindre .actions { margin-top: 28px; }
.contact-joindre .actions .bouton { flex: 1 1 auto; }
.reseaux { margin-top: 24px; display: flex; gap: 22px; }
.reseaux a { font-weight: 700; text-underline-offset: 4px; display: inline-flex; min-height: 44px; align-items: center; }
.dalle {
  align-self: start; padding: 26px 24px; border-radius: 24px; color: var(--encre);
  background: var(--travertin) url("img/travertin.svg") 0 0 / 520px;
  box-shadow: 0 2px 0 #D2C3A5, 0 30px 60px -28px rgba(20, 10, 2, .8);
}
.dalle-titre { font: 600 1.5rem/1.2 var(--titre); }
.bureau-etat-dalle { color: var(--encre); margin: 12px 0 14px; font-weight: 600; }
.horaires { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.horaires th { text-align: left; font-weight: 600; padding: 11px 10px 11px 0; vertical-align: top; }
.horaires td { text-align: right; padding: 11px 0; }
.horaires tr + tr { border-top: 1px solid rgba(12, 38, 48, .14); }
.horaires tr.aujourdhui th, .horaires tr.aujourdhui td { color: var(--bleu); font-weight: 800; }
.horaires tr.aujourdhui th::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 8px; vertical-align: middle; }
@media (min-width: 900px) {
  .contact { padding: 120px var(--marge) 130px; }
  .contact-corps { grid-template-columns: 1.2fr 1fr; gap: 80px; }
}

/* ───────── Pied de page ───────── */
.pied { position: relative; background: var(--nuit); color: rgba(255, 255, 255, .82); padding: 70px var(--marge) 40px; text-align: center; }
.pied-vague { position: absolute; left: 0; right: 0; top: 0; height: 40px; overflow: hidden; }
.pied-marque { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pied-marque svg { width: clamp(110px, 26vw, 170px); height: auto; aspect-ratio: 1; }
.pied-marque p { font: 600 clamp(2.4rem, 10vw, 5rem)/1 var(--titre); letter-spacing: -.03em; color: #fff; }
.pied-marque p span { font-weight: 300; }
.pied-ligne { margin: 22px auto 0; max-width: 46em; font-size: 1rem; }
.pied-ligne a, .pied-mention a { color: var(--cyan-clair); }
.pied-mention { margin: 18px auto 0; max-width: 46em; font-size: 1rem; color: rgba(255, 255, 255, .62); }

/* ───────── Barre d'appel (procédé), habillée aux couleurs du site ───────── */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: var(--nuit); border-top: 1px solid rgba(156, 235, 243, .25); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5);
    transition: transform .25s ease, visibility .25s;
  }
  .barre-appel a {
    display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 50px; padding: 0 12px;
    border: 2px solid var(--cyan); border-radius: 999px; background: var(--cyan); color: var(--nuit);
    font-size: 1rem; font-weight: 700; line-height: 1.1; text-decoration: none;
  }
  .barre-appel a:not(:first-child) { background: transparent; color: var(--cyan-clair); }
  .barre-appel svg { width: 1.25em; height: 1.25em; flex: none; }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
  html:has(.barre-appel) { scroll-padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  body:has(:is(input[type=text]):focus) .barre-appel { transform: translateY(105%); visibility: hidden; }
}

/* ───────── Titre découpé (procédé) ───────── */
.js [data-titre-decoupe]:not(.pret) { visibility: hidden; animation: td-secours 0s linear 3s forwards; }
@keyframes td-secours { to { visibility: visible; } }
[data-titre-decoupe] > div[style*="clip"] { padding-block: 0.14em; margin-block: -0.14em; }

/* ───────── Sans animation : tout est là, immobile ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-titre-decoupe]:not(.pret) { visibility: visible; }
}
@media print { .barre-appel, .entete { display: none; } }
.entete, .pied, .heros, .chantier { --logo-bleu: #4C8FDB; }
@media (max-width: 419px) {
  .entete { gap: 6px; padding: 0 12px; }
  .marque-icone { width: 34px; height: 34px; }
  .marque-nom { font-size: .9375rem; }
  .apercu { padding: 4px 8px; font-size: .75rem; }
  .entete-tel { padding: 0 12px; gap: 6px; }
}

/* ───────── Finition à 1 490 € ───────── */
/* contact : le titre gravé sur une planche de bois clair, vissée sur le deck */
.enseigne-bois {
  position: relative; display: inline-block; max-width: 100%; padding: 26px 28px 24px; border-radius: 8px;
  background:
    repeating-linear-gradient(180deg, rgba(120, 72, 34, 0) 0 9px, rgba(120, 72, 34, .12) 9px 10px),
    linear-gradient(176deg, #D7A472 0%, #C98F5A 45%, #B97D49 100%);
  box-shadow: inset 0 2px 0 rgba(255, 230, 200, .45), inset 0 -3px 0 rgba(90, 50, 20, .35), 0 18px 34px -16px rgba(20, 10, 2, .85);
}
.enseigne-bois::before, .enseigne-bois::after {
  content: ""; position: absolute; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F4EBDD 0 30%, #8A8F92 60%, #55595C 100%); box-shadow: 0 1px 0 rgba(255, 235, 210, .5);
}
.enseigne-bois::before { left: 12px; }
.enseigne-bois::after { right: 12px; }
.enseigne-bois h2 {
  max-width: 13em; color: #5B3214; text-shadow: 0 1px 0 rgba(255, 228, 196, .7), 0 -1px 0 rgba(60, 28, 6, .45);
}
.pastille-lien {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px;
  border: 2px solid rgba(255, 226, 184, .55); color: #FFF7EA; font-weight: 700; text-decoration: none;
  transition: background-color .25s, border-color .25s;
}
.pastille-lien:hover { background: rgba(255, 226, 184, .12); border-color: #FFE2B8; }
.reseaux { gap: 12px; }

/* savoir-faire sur grand écran : les lignes inactives lisibles, la photo plus grande */
@media (min-width: 900px) {
  .savoir { padding: 100px var(--marge) 110px; }
  .savoir-tete { margin-bottom: 34px; }
  .savoir-corps { grid-template-columns: .9fr 1.15fr; align-items: center; }
  .savoir-item { padding: 24px 0; opacity: .75; }
  .savoir-item p { margin-top: 12px; }
  .savoir-vitrine { max-height: 84vh; }
}

/* haut de page sur téléphone : le voile tire vers l'eau du bassin plutôt que vers la nuit */
@media (max-width: 899px) {
  .heros-scene img { object-position: 64% 50%; }
  .heros-scene::after {
    background: linear-gradient(180deg, rgba(7, 31, 42, .38) 0%, rgba(7, 31, 42, 0) 16%, rgba(6, 52, 64, 0) 34%, rgba(6, 52, 64, .55) 52%, rgba(5, 40, 52, .9) 72%, rgba(7, 31, 42, .97) 100%);
  }
}