/* Charte Dopper (charte.css, chargée avant ce fichier). Voir ../charte/Dopper/DESIGN.md.
   Arbitrages tranchés une fois ici :
   - Dopper -> Fraunces 400, réservée aux titres d'affiche (58px et plus) ; Gilroy -> Manrope 400/600/700 pour le reste.
   - Rayon 20px partout (cartes, images, boutons), pilule seulement pour les étiquettes. Aucune ombre.
   - Le bouton principal est le bleu plein, toujours accompagné du bouton cerclé noir.
   - Fond de page #fcfaf2, bandes crème #f6ecc8 pour l'ouverture et les sections alternées. */
:root {
  --marge: var(--spacing-20);
  --encre: var(--color-midnight-navy);
  --bleu: var(--color-electric-blue);
  --creme: var(--color-warm-cream);
  --page: var(--color-soft-off-white);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--encre);
  font: var(--font-weight-regular) var(--text-body) / var(--leading-body) var(--font-gilroy); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--radius-buttons);
  font: var(--font-weight-semibold) var(--text-body-sm) / 1.2 var(--font-gilroy); text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
}
.btn--bleu { background: var(--bleu); color: var(--page); }
.btn--bleu:hover { background: var(--color-brand-blue-drift); }
.btn--ligne { background: transparent; color: var(--color-black-ink); border-color: var(--color-black-ink); }
.btn--ligne:hover { background: rgba(0, 15, 46, .05); }

/* ---------- barre du haut ---------- */
.nav {
  position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; padding: 0 var(--marge); background: var(--creme);
}
.nav__liens { display: flex; gap: var(--spacing-24); font-weight: var(--font-weight-semibold); }
.nav__liens a { text-decoration: none; }
.nav__logo { display: flex; align-items: flex-end; gap: 2px; color: var(--bleu); font: var(--font-weight-bold) 30px / 1 var(--font-gilroy); letter-spacing: -.03em; text-decoration: none; }
.nav__logo svg { width: 9px; height: 12px; fill: var(--color-deep-teal); margin-bottom: 4px; }
.nav__tel { justify-self: end; padding: 10px 16px; }

/* ---------- 1. l'eau ---------- */
.eau { position: relative; height: 430vh; background: var(--creme); }
.eau__scene {
  position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px);
  display: grid; grid-template-columns: minmax(360px, 420px) 1fr; gap: var(--spacing-40); align-items: center;
  padding: var(--spacing-20) var(--spacing-40) var(--spacing-40) var(--spacing-60);
}
.tag { display: inline-block; padding: 6px 14px; border-radius: var(--radius-tags); background: var(--page); font-weight: var(--font-weight-semibold); font-size: var(--text-caption); }
.eau h1 { margin: var(--spacing-20) 0 var(--spacing-16); font: var(--font-weight-regular) clamp(58px, 5vw, var(--text-display)) / var(--leading-display) var(--font-dopper); letter-spacing: -.01em; }
.eau__lead { max-width: 30em; }
.eau__ctas { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-24); }
.etapes-eau { display: grid; gap: var(--spacing-8); margin-top: var(--spacing-40); font-weight: var(--font-weight-semibold); }
.etapes-eau li { display: flex; align-items: center; gap: var(--spacing-12); color: var(--color-heather-violet); transition: color .3s ease; }
.etapes-eau b {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-tags); background: var(--page);
  font-size: var(--text-caption); transition: background .3s ease, color .3s ease;
}
.etapes-eau li.actif { color: var(--encre); }
.etapes-eau li.actif b { background: var(--bleu); color: var(--page); }

/* le cadre : aux proportions de la photo, arrondi, sans ombre */
.eau__cadre {
  position: relative; width: 100%; max-height: 100%; aspect-ratio: 3 / 2; justify-self: center; align-self: center;
  border-radius: var(--radius-images); overflow: hidden; background: var(--page);
}
/* la hauteur disponible : l'écran moins la barre (64px) et les marges de la scène (60px) */
.eau__cadre { width: min(100%, calc((100svh - 124px) * 1.5)); }
/* le plan : les calques de la photo, toujours aux proportions de l'image ; sur téléphone il déborde du cadre carré */
.eau__plan { position: absolute; inset: 0; }
.eau__plan > img, .eau__plan > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* le mur s'ouvre de bas en haut, avec un bord fondu */
.eau__tuyaux {
  --w: 0; opacity: var(--ouvert, 1);
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--w) * 112% - 12%), transparent calc(var(--w) * 112%));
  mask-image: linear-gradient(to top, #000 calc(var(--w) * 112% - 12%), transparent calc(var(--w) * 112%));
}
.eau__flux { opacity: var(--ouvert, 1); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .85)); }
.eau__douche { opacity: var(--douche, 0); }
/* les filets d'eau : trois colonnes de stries qui descendent, posées sur le jet de la photo */
.eau__filets { position: absolute; left: 75.5%; width: 11%; top: 11%; height: 78%; opacity: var(--douche, 0); mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent); }
.eau__filets i {
  position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(255, 255, 255, .55) 24px, transparent 34px);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 9px); mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 9px);
  animation: tombe .55s linear infinite;
}
.eau__filets i:nth-child(2) { left: 3px; animation-duration: .7s; opacity: .7; }
.eau__filets i:nth-child(3) { left: 6px; animation-duration: .45s; opacity: .5; }
@keyframes tombe { to { background-position: 0 34px; } }
.eau__filets i { background-size: 100% 34px; }

.eau__mesure {
  position: absolute; display: grid; padding: 8px 14px; border-radius: var(--radius-buttons); font-size: var(--text-caption); line-height: 1.2;
  opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease;
}
.eau__mesure b { font-size: var(--text-subheading); font-weight: var(--font-weight-bold); }
.eau__mesure--froid { left: 4%; bottom: 6%; background: var(--color-sky-wash); }
.eau__mesure--chaud { left: 66%; top: 18%; background: var(--color-signal-yellow); }
.eau.froid .eau__mesure--froid, .eau.chaud .eau__mesure--chaud { opacity: 1; transform: none; }
.eau__badge {
  position: absolute; left: 50%; bottom: 5%; padding: 10px 18px; border-radius: var(--radius-tags); background: var(--bleu); color: var(--page);
  font-weight: var(--font-weight-semibold); white-space: nowrap; transform: translate(-50%, 10px); opacity: 0; transition: opacity .5s ease, transform .5s ease;
}
.eau.fini .eau__badge { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 2. bandeau qui défile ---------- */
.defile { overflow: hidden; padding: var(--spacing-20) 0; background: var(--page); border-block: 1px solid rgba(0, 15, 46, .08); }
.defile__piste { display: flex; align-items: center; gap: var(--spacing-24); width: max-content; animation: defile 38s linear infinite; }
.defile span { font: var(--font-weight-bold) var(--text-heading-sm) / 1 var(--font-gilroy); white-space: nowrap; }
.defile i { width: 14px; height: 18px; background: var(--bleu); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0C4 4 1 7 1 10.5a5 5 0 0 0 10 0C11 7 8 4 6 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M6 0C4 4 1 7 1 10.5a5 5 0 0 0 10 0C11 7 8 4 6 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { max-width: var(--page-max-width); margin: 0 auto; padding: var(--section-gap) var(--marge); }
.titre { font: var(--font-weight-bold) clamp(32px, 3.4vw, var(--text-heading-lg)) / var(--leading-heading-lg) var(--font-gilroy); letter-spacing: -.02em; margin-bottom: var(--spacing-40); }
.grand { font: var(--font-weight-regular) clamp(58px, 5vw, var(--text-display)) / var(--leading-display) var(--font-dopper); letter-spacing: -.01em; }

.solutions { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-20); }
.solution {
  display: flex; flex-direction: column; gap: var(--spacing-12); min-height: 320px; padding: var(--card-padding); border-radius: var(--radius-cards);
}
.solution h3 { font: var(--font-weight-bold) var(--text-heading-sm) / var(--leading-heading-sm) var(--font-gilroy); }
.solution p { font-size: var(--text-body-sm); }
.solution a { margin-top: auto; font-weight: var(--font-weight-semibold); font-size: var(--text-body-sm); }
.solution--teal { background: var(--color-deep-teal); color: #fff; }
.solution--jaune { background: var(--color-signal-yellow); }
.solution--bleu { background: var(--bleu); color: var(--page); }
.solution--ciel { background: var(--color-sky-wash); }
.solution--photo { color: #fff; background: linear-gradient(to bottom, rgba(0, 15, 46, .82), rgba(0, 15, 46, .35) 55%, rgba(0, 15, 46, .7)), var(--photo) center / cover; }

.bloc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-60); align-items: center; }
.bloc img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-images); }
.bloc .titre { margin-bottom: var(--spacing-20); }
.points { display: grid; gap: var(--spacing-8); margin: var(--spacing-24) 0 var(--spacing-40); }
.points li { display: flex; gap: var(--spacing-12); align-items: baseline; font-weight: var(--font-weight-semibold); }
.points li::before { content: ""; flex: none; width: 10px; height: 13px; background: var(--bleu); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: translateY(1px); }

.bande-creme { background: var(--creme); }
.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-20); }
.avis blockquote { padding: var(--spacing-24); border-radius: var(--radius-cards); background: var(--page); }
.avis p { font-size: var(--text-body); }
.avis footer { margin-top: var(--spacing-16); font-weight: var(--font-weight-semibold); color: var(--color-heather-violet); font-size: var(--text-body-sm); }

.villes { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.villes li { padding: 10px 18px; border-radius: var(--radius-tags); background: var(--creme); font-weight: var(--font-weight-semibold); }
.villes li:first-child { background: var(--bleu); color: var(--page); }

.contact__in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-60); align-items: start; }
.contact__tel { display: inline-block; margin: var(--spacing-20) 0 var(--spacing-12); font: var(--font-weight-bold) var(--text-heading-lg) / 1 var(--font-gilroy); color: var(--bleu); text-decoration: none; }
.formulaire { display: grid; gap: var(--spacing-12); padding: var(--spacing-24); border-radius: var(--radius-cards); background: var(--page); }
.formulaire label { display: grid; gap: 6px; font-weight: var(--font-weight-semibold); font-size: var(--text-body-sm); }
.formulaire input {
  font: inherit; font-weight: var(--font-weight-regular); color: var(--encre); padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid rgba(0, 15, 46, .15); background: #fff0;
}
.formulaire input:focus { outline: none; border-color: var(--bleu); }
.formulaire .btn { justify-self: start; margin-top: var(--spacing-8); }
.formulaire__ok { font-weight: var(--font-weight-semibold); }

.pied { display: flex; justify-content: space-between; gap: var(--spacing-16); max-width: var(--page-max-width); margin: 0 auto; padding: var(--spacing-24) var(--marge); color: var(--color-heather-violet); font-size: var(--text-body-sm); }

.callbar {
  position: fixed; inset: auto var(--spacing-16) var(--spacing-16); z-index: 30; display: none; padding: 14px; text-align: center; text-decoration: none;
  background: var(--bleu); color: var(--page); border-radius: var(--radius-buttons); font-weight: var(--font-weight-semibold);
  margin-bottom: env(safe-area-inset-bottom); transition: transform .4s ease, opacity .4s ease;
}
.callbar.cache { transform: translateY(140%); opacity: 0; }

@media (max-width: 1100px) { .solutions { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__liens { display: none; }
  .eau { height: 380vh; }
  .eau__scene { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: start; align-items: start; gap: 0; padding: var(--spacing-16) var(--spacing-16) 0; }
  .eau__texte { display: contents; }
  .tag { justify-self: start; }
  .eau h1 { margin: var(--spacing-12) 0 var(--spacing-16); font-size: clamp(44px, 12.5vw, 58px); }
  .eau__lead { display: none; }
  .eau__ctas { order: 5; margin-top: var(--spacing-20); }
  .eau__ctas .btn { flex: 1; padding: 12px 8px; white-space: nowrap; }
  /* carré, recadré de 20 % à 87 % de la largeur de la photo : les tuyaux et le jet de la douche restent dedans */
  .eau__cadre { order: 3; width: 100%; max-height: none; aspect-ratio: 1; }
  .eau__plan { width: 150%; left: -30%; right: auto; }
  .etapes-eau { order: 4; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: var(--spacing-16); font-size: 12px; line-height: 1.2; }
  .etapes-eau li { flex-direction: column; text-align: center; gap: 6px; }
  .eau__mesure { padding: 5px 10px; font-size: 11px; }
  .eau__mesure b { font-size: 15px; }
  .eau__mesure--chaud { left: auto; right: 3%; top: 4%; }
  .eau__badge { font-size: 13px; padding: 8px 14px; }
  .solutions, .avis { grid-template-columns: 1fr; }
  .solution { min-height: 0; }
  .solution--photo { min-height: 260px; }
  .bloc, .contact__in { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .bloc img { aspect-ratio: 4 / 3; }
  .callbar { display: block; }
  .pied { flex-direction: column; padding-bottom: 96px; }
}

/* écrans bas (iPhone SE et semblables) : un cadre 6:5 recadré de 10 % à 90 % de la photo, sans étiquette ni boutons */
@media (max-width: 900px) and (max-height: 760px) {
  .tag, .eau__ctas { display: none; }
  .eau h1 { margin-top: 0; font-size: 40px; }
  .eau__cadre { aspect-ratio: 6 / 5; }
  .eau__plan { width: 125%; left: -12.5%; }
}

html.embarque { overflow: hidden; }
html.embarque .callbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .eau { height: auto; }
  .eau__scene { position: relative; }
  .defile__piste, .eau__filets i { animation: none; }
}