/* WIZIYO, scènes de démonstration de l'Agence (« Relier », « Reprendre »).
   Un même langage, deux compositions : du papier blanc, des filets, des titres en italique, le trait d'encre, des
   chiffres alignés, et le bleu de l'eau comme seul accent (la goutte, le bord de l'eau, les cotes). Le fil de données
   est une table de documents posés sur le décor ; la ligne d'eau, une seule grande page.
   Les variables --d-* viennent de .demo (css/pieces.css). Le préfixe .fd évite le « fil » de la Méthode (.fil). */

/* ---------- Une scène : une ligne de tête, puis la démonstration sur toute la largeur ---------- */
.service.scene { display: block; min-height: 0; padding: 13vh 0 15vh; }
.scene-tete { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.4rem min(6rem, 6vw); align-items: end; margin-bottom: min(3.4rem, 7vh); }
.scene-tete .service-idee { margin: 0; }
.service.scene .prestations { display: flex; flex-wrap: wrap; max-width: none; margin: 1rem 0 0; font-size: max(.95rem, 13.5px); color: var(--doux); }
.service.scene .prestations li { padding: 0; border: 0; }
.service.scene .prestations li + li::before { content: '·'; margin: 0 .7em; }
.scene-tete .service-reserve { margin-top: .7rem; }
.papier { position: relative; z-index: 1; border-radius: .7rem; background: #fbfcfe; box-shadow: var(--d-ombre); }

/* ---------- Relier : le fil de données ---------- */
.fd { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) repeat(3, minmax(0, 1fr)); gap: 1.5rem min(2.2rem, 2.4vw); align-items: start; color: var(--d-encre); font-size: max(.92rem, 13px); line-height: 1.35; }
.fd > .demo-note { grid-column: 1 / -1; margin-top: .2rem; }
.fd-trace { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; color: var(--doux); pointer-events: none; }
.fd-lit { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 1 7; stroke-linecap: round; }
.fd-eau { fill: none; stroke: #6f9bff; stroke-width: 2.5; stroke-linecap: round; }
.fd-goutte { fill: #fff; stroke: #6f9bff; stroke-width: 3; opacity: 0; transition: opacity .3s ease; }
.fd.en-cours .fd-goutte { opacity: 1; }
.fd-demande { grid-column: 1; grid-row: 1 / span 2; padding: 1.35rem 1.45rem 1.45rem; }
.fd-titre, .doc-titre { margin: 0; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; }
.fd-sous { margin: .4rem 0 0; color: var(--d-doux); }
.fd fieldset { min-width: 0; margin: 1.1rem 0 0; padding: 0; border: 0; }
.fd legend { margin-bottom: .45rem; padding: 0; font-weight: 500; }
.fd legend small { margin-left: .5em; font-size: .9em; font-weight: 400; color: var(--d-doux); }
.fd-choix { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Les ouvrages : une liste, chaque ligne avec son prix (le devis en découle). */
.fd-liste { display: grid; gap: .3rem; }
.fd-liste label span { justify-content: space-between; gap: 1rem; border-radius: .6rem; }
.fd-liste label small { font-size: .94em; color: var(--d-doux); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
.fd-liste input:checked + span small { color: rgba(255, 255, 255, .78); }
.fd label { position: relative; cursor: pointer; }
.fd input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fd label span { display: flex; align-items: center; min-height: max(2.5rem, 40px); padding: 0 .9rem; border: 1px solid var(--d-filet); border-radius: 99rem; line-height: 1.2; transition: background-color .3s, color .3s, border-color .3s; }
.fd label:hover span { border-color: var(--d-encre); }
.fd input:checked + span { background: var(--d-encre); border-color: var(--d-encre); color: #fff; }
.fd input:focus-visible + span { outline: 2px solid var(--d-eau); outline-offset: 2px; }
.fd-envoi { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: max(2.9rem, 44px); margin-top: 1.4rem; padding: 0 1.2rem; border: 0; border-radius: 99rem; background: var(--d-eau); font-size: 1em; color: #fff; cursor: pointer; transition: transform .5s var(--courbe), background-color .3s; }
.fd-envoi:hover { background: #2456bf; }
.fd-envoi:active { transform: scale(.97); }
.fd-envoi:focus-visible { outline: 2px solid var(--d-encre); outline-offset: 3px; }
.fd-envoi svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--courbe); }
.fd.en-cours .fd-envoi svg { transform: translateX(.3em); }
/* Les œillets : là où le fil sort de la demande, et là où il entre dans chaque document. */
.fd-depart, .doc-port { position: absolute; z-index: 2; width: 1rem; height: 1rem; border: 2px solid #c9d2e6; border-radius: 50%; background: #fbfcfe; transition: background-color .4s ease, border-color .4s ease, transform .6s var(--courbe); }
.fd-depart { right: -.5rem; bottom: 2.4rem; border-color: var(--d-eau); background: var(--d-eau); }
.doc-port { left: -.5rem; top: 1.75rem; }
.doc.recu .doc-port { border-color: var(--d-eau); background: var(--d-eau); }
.doc.touche .doc-port { transform: scale(1.5); transition-duration: .12s; }
/* Un document n'existe pas encore : il n'a que sa place, en pointillé, et son nom. Quand la goutte atteint son œillet,
   le papier s'étend à partir de lui (comme le bleu de la Méthode part de sa pastille), puis ses lignes se remplissent
   l'une après l'autre. Le papier (::before) et son ombre (::after) sont deux calques : l'un s'étend, l'autre paraît.
   Sans script (.pret absent), tout est là et lisible d'emblée. */
.doc { padding: 1.2rem 1.35rem 1.2rem; border: 1px dashed transparent; background: none; box-shadow: none; }
.doc::before, .doc::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; }
.doc::before { z-index: -1; background: #fbfcfe; clip-path: circle(200% at 0 2.3rem); transition: clip-path .9s var(--courbe); }
.doc::after { z-index: -2; box-shadow: var(--d-ombre); transition: opacity .6s ease .35s; }
.doc > dl, .doc > .doc-corps, .doc-ref, .doc-etat { transition: opacity .45s ease .3s; }
.doc-titre { transition: color .45s ease .12s; }
.fd.pret .doc:not(.recu) { border-color: var(--filet); }
.fd.pret .doc:not(.recu)::before { clip-path: circle(0% at 0 2.3rem); transition-duration: .01s; }
.fd.pret .doc:not(.recu)::after, .fd.pret .doc:not(.recu) > :not(header, .doc-port), .fd.pret .doc:not(.recu) :is(.doc-etat, .doc-ref) { opacity: 0; transition-duration: .01s; transition-delay: 0s; }
.fd.pret .doc:not(.recu) .doc-titre { color: var(--texte); transition-duration: .01s; transition-delay: 0s; }
/* La commande vit dans un autre logiciel que le devis et la facture : elle en a l'allure. */
.doc[data-doc="commande"] { margin-top: 2.8rem; color: #eef2fb; --d-encre: #eef2fb; --d-doux: rgba(238, 242, 251, .66); --d-filet: rgba(238, 242, 251, .16); --d-eau: #8fb0ff; }
.doc[data-doc="commande"]::before { background: #17203a; }
.doc[data-doc="message"] { grid-column: 3 / span 2; grid-row: 2; }
.doc header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 .8rem; padding-left: .55rem; }
.doc-ref { font-size: max(.76rem, 11.5px); letter-spacing: .03em; color: var(--d-doux); font-variant-numeric: tabular-nums; }
.doc-etat { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; margin: .5rem 0 0; font-size: max(.82rem, 12px); line-height: 1.25; color: var(--d-doux); }
.doc-etat i { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--d-eau); }
.doc-etat.attend i { background: none; box-shadow: inset 0 0 0 1.5px var(--d-eau); }
.doc dl { margin: .8rem 0 0; }
.doc dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .46rem 0; border-top: 1px solid var(--d-filet); }
.doc dt { color: var(--d-doux); }
.doc dt[data-champ] { color: var(--d-encre); }
.doc dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc .doc-total { border-top-color: var(--d-encre); font-weight: 500; }
.doc .doc-total dd { font-size: 1.22em; }
.doc-corps { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--d-filet); font-size: 1.06em; line-height: 1.5; text-wrap: pretty; }
.doc-corps b { font-weight: 500; }
.doc .doc-envoi div { justify-content: flex-start; gap: 0; }
.doc .doc-envoi dt { flex: none; width: 3.6rem; }
.doc .doc-envoi dd { text-align: left; white-space: normal; }
.doc-envoi + .doc-corps { margin-top: 0; }
/* Une ligne qui vient de changer reste bleue un instant, puis reprend son encre (un fondu court : chaque image de ce
   fondu redessine le document et son ombre). Pendant que la goutte court, les documents et le fil ont chacun leur
   calque : leurs déplacements ne redessinent rien. */
.fd [data-champ] { border-radius: .25em; transition: color .28s ease; }
.fd.pret [data-champ]:not(.plein) { background: var(--d-filet); color: transparent; }
.fd [data-champ].vif { color: var(--d-eau); transition-duration: .08s; }
.fd.en-cours .fd-cours, .fd.en-cours .doc::before { will-change: transform; }
.fd.en-cours .doc::after { will-change: opacity; }
/* La phrase de conclusion, posée sur le décor sous le devis. */
.fd-bilan { grid-column: 2; grid-row: 2; align-self: end; margin: 0; padding: 0 0 .4rem .55rem; color: var(--doux); font-size: max(.95rem, 13.5px); line-height: 1.45; text-wrap: pretty; }
.fd-bilan b { display: block; margin-bottom: .5rem; font-size: min(1.9rem, 7vw); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; color: var(--texte); text-wrap: balance; }

/* ---------- Reprendre : la ligne d'eau ----------
   v18 : trois volets, ceux des trois prestations du chapitre (le moderniser, le sécuriser, le mettre en règle). Les
   deux pages ont la même charpente, aux mêmes places (barre du navigateur, en-tête, texte et action à gauche, image à
   droite, produits, pied) : en tirant le bord de l'eau, chaque bloc se transforme sur place. Chaque volet pose ses
   constats sur les pages (pastilles) et les dit en clair dessous. Tailles en cqw : la page suit la largeur de sa scène,
   comme une vraie page dans une fenêtre ; celle d'avant n'est pas faite pour les petits écrans, et cela se voit. */
.eau { display: grid; gap: 1.25rem; max-width: calc(66svh * 16 / 9); }
/* Les volets : trois pastilles, comme les familles du sommaire. */
.eau-volets { display: flex; flex-wrap: wrap; gap: .5rem; }
.eau-volets button { display: inline-flex; align-items: baseline; gap: .55rem; min-height: 2.75rem; padding: .55rem 1.2rem .6rem 1rem; border: 1px solid var(--filet); border-radius: 99rem; background: none; font-size: max(1rem, 14.5px); line-height: 1.2; color: var(--doux); cursor: pointer; transition: background-color .35s, color .35s, border-color .35s; }
.eau-volets b { font: italic 400 1.08em var(--serif); color: var(--eau); transition: color .35s; }
.eau-volets button:hover { border-color: var(--texte); color: var(--texte); }
.eau-volets button[aria-selected="true"] { background: var(--plein); border-color: var(--plein); color: var(--sur-plein); }
.eau-volets button[aria-selected="true"] b { color: inherit; }
.eau-volets button:focus-visible { outline: 2px solid var(--eau); outline-offset: 3px; }
.eau-panneau { display: grid; gap: 1.3rem; }

/* La scène : deux pages superposées ; celle d'après est découpée par le bord de l'eau (js/demo-eau.js). */
.eau-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: .9rem; overflow: hidden; background: #f4efe6; box-shadow: var(--d-ombre); container-type: inline-size; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.eau-page { position: absolute; inset: 0; overflow: hidden; line-height: 1.35; }
/* Chaque page est sa propre couche : l'avis de cookies et les pastilles d'avant restent sous la page refaite. */
.eau-avant { z-index: 0; } .eau-apres { z-index: 1; }
.eau-page :is(p, ul, figure) { margin: 0; padding: 0; list-style: none; }

/* Avant : une page d'il y a quinze ans, telle qu'on en reprend. Reconstitution, pas le site d'un client.
   Une boîte de largeur fixe au milieu d'un fond gris, du Verdana minuscule et gris clair, des liens soulignés, une photo
   étirée et fanée, un compteur de visites. */
.eau-avant { display: grid; grid-template-rows: 6.4% minmax(0, 1fr); background: #d6d3cb; color: #8a8a8a; font: 400 1.02cqw / 1.42 Verdana, Geneva, Tahoma, sans-serif; }
.ea-nav { position: relative; display: flex; align-items: center; gap: .9em; padding: 0 1.6%; background: linear-gradient(#efefef, #d8d8d8); border-bottom: 1px solid #a9a9a9; font: 400 .98cqw / 1 Arial, Helvetica, sans-serif; color: #4b4b4b; }
.ea-alerte { padding: .25em .6em; border-radius: .3em; background: #e9e9e9; color: #6a6a6a; transition: background-color .35s, color .35s; }
.ea-alerte::before { content: '\26A0\FE0E'; margin-right: .35em; }
.eau[data-volet="securiser"] .ea-alerte { background: #c2410c; color: #fff; }
.ea-adresse { padding: .35em .8em; border: 1px solid #b9b9b9; background: #fff; }
.ea-cadre { justify-self: center; display: grid; grid-template-rows: 14.5% 6.5% minmax(0, 1fr) 10% 8.5%; width: 78%; border: 1px solid #9a9a9a; border-top: 0; background: #fff; }
.ea-bandeau { display: grid; align-content: center; padding: 0 1.6em; background: linear-gradient(#4a6da3, #27406b); color: #fff; font-family: 'Times New Roman', Times, serif; }
.ea-bandeau b { font-size: 2.9em; line-height: 1; letter-spacing: .04em; text-shadow: .07em .07em 0 rgba(0, 0, 0, .45); }
.ea-bandeau i { margin-top: .25em; font-size: 1.15em; }
.ea-menu { display: flex; border-bottom: 1px solid #9a9a9a; background: linear-gradient(#f2f2f2, #cfcfcf); font-size: .92em; }
.ea-menu span { display: grid; align-content: center; padding: 0 1.15em; border-right: 1px solid #aaa; color: #1a3a9c; text-decoration: underline; }
.ea-hero { display: grid; grid-template-columns: minmax(0, 58%) minmax(0, 1fr); gap: 4%; align-items: center; padding: 0 3%; }
.ea-titre { margin-bottom: .7em !important; font: 700 1.75em / 1.15 'Times New Roman', Times, serif; color: #27406b; }
.ea-texte { text-align: justify; }
.ea-action { position: relative; display: flex; align-items: center; gap: .9em; margin-top: 1em !important; }
.ea-action [data-action] { font-size: .95em; color: #1a3a9c; text-decoration: underline; }
.ea-photo { display: grid; gap: .45em; justify-items: center; }
.ea-photo svg { display: block; width: 100%; aspect-ratio: 4 / 3; border: .25em ridge #cfcfcf; filter: sepia(.5) saturate(.55) contrast(.78) brightness(1.06) blur(.35px); }
.ea-photo figcaption { font-size: .82em; color: #9a9a9a; }
.ea-produits { display: flex; align-items: center; gap: 1.2em; margin: 0 3% !important; padding: 0 1em !important; border: 1px solid #b5b5b5; background: #f3f3f3; }
.ea-produits b { color: #27406b; }
.ea-produits span { color: #1a3a9c; text-decoration: underline; }
.ea-produits span::before { content: '» '; color: #8a8a8a; text-decoration: none; display: inline-block; margin-right: .2em; }
.ea-pied { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.6em; border-top: 1px solid #b5b5b5; font-size: .82em; color: #8a8a8a; }
.ea-compteur { padding: .2em .55em; background: #111; color: #4ade80; font-family: 'Courier New', monospace; letter-spacing: .06em; }
/* Le bandeau des cookies d'avant : il annonce, il ne demande pas. */
.ea-cookies { position: absolute; left: 14.5%; bottom: 13%; z-index: 2; display: flex; align-items: center; gap: 1.2em; width: 29%; padding: 1em 1.2em 1em 2.6em; border: 1px solid #555; background: rgba(44, 44, 44, .95); color: #e6e6e6; font: 400 .95cqw / 1.35 Arial, Helvetica, sans-serif; box-shadow: .25em .25em 0 rgba(0, 0, 0, .25);
  opacity: 0; translate: 0 1em; transition: opacity .35s ease, translate .6s var(--courbe); }
.ea-cookies b { padding: .35em 1em; border: 1px solid #9a9a9a; background: linear-gradient(#f4f4f4, #cfcfcf); color: #222; font-weight: 400; }
.eau[data-volet="regle"] .ea-cookies { opacity: 1; translate: 0 0; }

/* Après : la même maison, les mêmes contenus, à la même place. Le corps ne descend pas sous 13,5 px : c'est une vraie
   page, pas une vignette. */
.eau-apres { display: grid; grid-template-rows: 6.4% 12% minmax(0, 1fr) 15.5% 8.5%; padding: 0 3.6%; background: #f4efe6; color: #211b14; font: 400 clamp(13.5px, 1.3cqw, 18px) / 1.45 var(--grot); clip-path: inset(0 0 0 var(--part)); }
.ep-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: .55em; margin: 0 -3.6% !important; padding: 0 3.6% !important; border-bottom: 1px solid rgba(33, 27, 20, .1); background: #fbf8f3; font-size: .82em; color: rgba(33, 27, 20, .72); }
.ep-adresse { display: inline-flex; align-items: center; gap: .5em; padding: .3em 1.1em; border-radius: 99em; background: rgba(33, 27, 20, .06); }
.ep-nav svg { width: 1.05em; height: 1.05em; fill: none; stroke: #2f66d8; stroke-width: 1.6; stroke-linecap: round; }
.ep-barre { display: flex; align-items: center; gap: 2em; font-size: .95em; }
.ep-barre b { margin-right: auto; font: 400 1.85em / 1 var(--serif); letter-spacing: -.01em; }
.ep-hero { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 7%; align-items: center; min-height: 0; padding: .4em 0 1.2em; }
.ep-titre { margin-bottom: .32em !important; font: 400 2.85em / .98 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.ep-titre em { font-style: italic; }
.ep-texte { max-width: 26em; font-size: 1.08em; line-height: 1.45; }
.ep-actions { position: relative; display: flex; align-items: center; gap: 1.2em; margin-top: 1.1em !important; }
/* Le bouton principal : au moins 46 points de haut, au-dessus du repère pour le doigt (44). */
.ep-bouton { display: inline-flex; align-items: center; min-height: max(3.3em, 46px); padding: 0 1.6em; border-radius: 99em; background: #211b14; line-height: 1.2; color: #f4efe6; }
.ep-lien { padding-bottom: .15em; border-bottom: 1px solid currentColor; }
.ep-image { height: 100%; max-height: 100%; border-radius: 1.1em; overflow: hidden; background: #e6d9c6; }
.ep-image svg { display: block; width: 100%; height: 100%; }
.ep-bas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em; align-content: center; border-top: 1px solid rgba(33, 27, 20, .18); font-size: .9em; }
.ep-bas b { display: block; font-weight: 500; }
.ep-bas span { color: rgba(33, 27, 20, .7); }
.ep-pied { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 1.6em; border-top: 1px solid rgba(33, 27, 20, .12); font-size: .8em; color: rgba(33, 27, 20, .72); }
.ep-lien-pied { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(33, 27, 20, .35); transition: color .35s, text-decoration-color .35s; }
.eau[data-volet="regle"] .ep-lien-pied { color: #211b14; text-decoration-color: #2f66d8; }
.ep-signe { margin-right: 1.4em; }
/* Le choix des cookies d'après : demandé avant, refuser aussi visible qu'accepter. */
.ep-cookies { position: absolute; right: 3.6%; bottom: 13%; z-index: 2; display: grid; gap: .7em; width: min(24em, 42%); padding: 1.1em 1.2em 1em; border-radius: .9em; background: #fff; box-shadow: 0 1.2em 2.6em -1em rgba(33, 27, 20, .45), 0 0 0 1px rgba(33, 27, 20, .08); font-size: .86em;
  opacity: 0; translate: 0 1.2em; transition: opacity .4s ease, translate .7s var(--courbe); }
.ep-choix { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.ep-choix > span { position: relative; padding: .7em 0; border: 1px solid #211b14; border-radius: 99em; text-align: center; font-weight: 500; }
.ep-choix > span:last-child { background: #211b14; color: #f4efe6; }
.ep-perso { text-align: center; font-size: .92em; text-decoration: underline; text-underline-offset: .2em; color: rgba(33, 27, 20, .72); }
.eau[data-volet="regle"] .ep-cookies { opacity: 1; translate: 0 0; transition-delay: .15s; }

/* Les pastilles : les constats d'un volet, posés sur chaque page à l'endroit même qu'ils désignent (la barre d'adresse,
   le formulaire, le pied, l'avis de cookies), numérotés comme les constats écrits sous la scène. Rouge brique avant ;
   bleu, coché, après. Chacune tombe comme une goutte, avec son onde. Elles ne prennent pas de place dans la page. */
.eau-pastille { position: relative; display: inline-block; flex: none; width: 0; height: 1em; vertical-align: middle; --rang: 0; }
.eau-pastille i { position: absolute; left: .45em; top: 50%; z-index: 3; display: grid; place-content: center; width: max(1.9cqw, 19px); height: max(1.9cqw, 19px); margin-top: calc(max(1.9cqw, 19px) / -2); border-radius: 50%;
  background: #c2410c; color: #fff; font: 600 max(1.05cqw, 11px) / 1 var(--grot); font-style: normal; box-shadow: 0 .3em .8em -.2em rgba(19, 26, 46, .55), 0 0 0 2px #fff;
  opacity: 0; scale: .3; translate: 0 -.8em; transition: opacity .25s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1), translate .5s cubic-bezier(.3, 1.4, .5, 1); }
.eau-pastille i::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #c2410c; opacity: 0; }
.eau-apres .eau-pastille i { background: #2f66d8; }
.eau-apres .eau-pastille i::after { border-color: #2f66d8; }
.eau-apres .eau-pastille i::before { content: ''; width: .62em; height: .32em; border-left: .17em solid #fff; border-bottom: .17em solid #fff; transform: translate(.02em, -.08em) rotate(-45deg); }
.eau[data-volet="securiser"] .eau-pastille[data-pour="securiser"] i, .eau[data-volet="regle"] .eau-pastille[data-pour="regle"] i { opacity: 1; scale: 1; translate: 0 0; transition-delay: calc(.35s + var(--rang) * .14s); }
.eau[data-volet="securiser"] .eau-pastille[data-pour="securiser"] i::after, .eau[data-volet="regle"] .eau-pastille[data-pour="regle"] i::after { animation: eau-onde 1.3s ease-out calc(.55s + var(--rang) * .14s) 2; }
@keyframes eau-onde { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
/* Les pastilles qui ouvrent une ligne se posent devant elle. */
.ea-pied .eau-pastille i, .ea-cookies .eau-pastille:first-child i, .ep-cookies > p:first-child .eau-pastille i { left: calc(-.5em - max(1.9cqw, 19px)); }
/* Sur le bouton Refuser : en badge, sur son coin. */
.ep-choix .eau-pastille { position: absolute; top: 0; right: 0; }
.ep-choix .eau-pastille i { left: calc(max(1.9cqw, 19px) / -1.6); top: 0; }
.ea-action .eau-pastille, .ep-actions .eau-pastille, .ea-cookies .eau-pastille + span + b + .eau-pastille, .ep-choix .eau-pastille { --rang: 1; }
.ea-pied .eau-pastille, .ep-pied .eau-pastille { --rang: 2; }

/* Les cotes : chaque mesure du premier volet écrite là où elle a été prise, comme sur un plan. Sur demande. */
.cote { display: inline-flex; align-items: center; gap: .5em; font-family: var(--grot); font-size: max(1.02cqw, 11px); font-style: normal; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-align: left; text-decoration: none; white-space: nowrap; color: #1f4fb8; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-.5em); transition: opacity .3s ease, transform .6s var(--courbe); }
.eau.mesures[data-volet="moderniser"] .cote { opacity: 1; transform: none; }
.cote b { font-weight: 600; }
.eau-page .cote-texte { display: flex; gap: .6em; margin-top: .55em; }
.cote-texte::before { content: ''; flex: none; width: 1.8em; height: 1.5px; background: currentColor; }
.cote-haut { position: relative; align-self: stretch; padding-left: .6em; border-left: 1.5px solid currentColor; }
.cote-haut::before, .cote-haut::after { content: ''; position: absolute; left: -4.5px; width: 7.5px; height: 1.5px; background: currentColor; }
.cote-haut::before { top: 0; } .cote-haut::after { bottom: 0; }

/* Écran étroit (la scène fait moins de 560 points) : la page d'avant reste une page d'ordinateur, réduite d'un bloc en
   haut de l'écran, illisible ; la page d'après se range en une colonne, à taille de doigt. */
@container (max-width: 560px) {
  .eau-avant { grid-template-rows: 4.4% auto minmax(0, 1fr); }
  .ea-cadre { aspect-ratio: 16 / 10.5; }
  .ea-cookies { left: 4%; width: 52%; font-size: 2.3cqw; padding: .8em .9em .8em 2.2em; gap: .7em; }
  /* (Au repos, l'eau couvre le bord gauche de la page refaite : sa marge gauche est plus large que la droite.) */
  .eau-apres { grid-template-rows: 5.5% 9% minmax(0, 1fr) auto 7%; padding: 0 5% 0 11%; font-size: 4.3cqw; }
  .ep-nav { margin: 0 -5% 0 -11% !important; padding: 0 5% 0 11% !important; }
  .ep-barre span { display: none; }
  .ep-barre::after { content: ''; width: 1.3em; height: .8em; border-block: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
  .ep-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .8em; align-items: start; padding: .4em 0 .8em; }
  .ep-titre { font-size: 2.2em; }
  /* Le texte courant de la page refaite, au téléphone : 16 points au moins (la mesure le relève). */
  .ep-texte { font-size: max(1em, 16px); line-height: 1.4; }
  .ep-actions { flex-wrap: wrap; gap: .6em 1em; margin-top: .8em !important; }
  .ep-lien { display: none; }
  .ep-image { display: none; }
  .ep-bas { grid-template-columns: minmax(0, 1fr); gap: 0; padding: .5em 0 !important; }
  .ep-bas li { display: flex; justify-content: space-between; padding: .45em 0; }
  .ep-bas li + li { border-top: 1px solid rgba(33, 27, 20, .1); }
  .ep-bas span { display: none; }
  .ep-pied { gap: .9em; font-size: .72em; }
  .ep-signe { display: none; }
  .ep-cookies { left: 30%; right: 5%; bottom: 9%; width: auto; font-size: .78em; }
  .ep-image { order: 2; }
  .cote { font-size: 10.5px; }
  /* Les étiquettes Avant / Après montent dans la barre du navigateur : l'en-tête de la page refaite est juste dessous. */
  .eau-scene .eau-etiquette { top: .3rem; }
}

/* Le bord de l'eau, sa poignée, les deux étiquettes. */
.eau-bord { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.eau-bord path { fill: none; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.eau-bord .large { stroke: #fff; stroke-width: 4; }
.eau-bord .fine { stroke: #3f7cf0; stroke-width: 1.6; }
.eau-etiquette { position: absolute; top: calc(6.4% + .75rem); z-index: 4; padding: .3rem .8rem; border-radius: 99rem; background: rgba(19, 26, 46, .84); font-size: max(.74rem, 11.5px); line-height: 1.2; color: #fff; pointer-events: none; transition: opacity .3s ease; }
.eau-etiquette.avant { right: calc(100% - var(--part) + .55rem); } .eau-etiquette.apres { left: calc(var(--part) + .55rem); }
/* Une étiquette s'efface quand sa page n'est presque plus à l'écran. */
.eau[data-reste="apres"] .eau-etiquette.avant, .eau[data-reste="avant"] .eau-etiquette.apres { opacity: 0; }
.eau-poignee { position: absolute; left: var(--part); top: 50%; z-index: 5; display: grid; place-content: center; width: 3.2rem; height: 3.2rem; margin: -1.6rem; border: 3px solid #fff; border-radius: 50%; background: #131a2e; box-shadow: 0 .7rem 1.5rem -.3rem rgba(6, 12, 36, .6); cursor: ew-resize; touch-action: none; transition: transform .4s var(--courbe); will-change: transform; }
.eau-poignee svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eau-poignee:is(:hover, .saisie) { transform: scale(1.08); }
.eau-poignee:focus { outline: none; }
.eau-poignee:focus-visible { outline: 2px solid #6f9bff; outline-offset: 4px; }

/* Sous la scène : les trois constats du volet, en clair (mesurés à l'instant pour le premier), et le bouton qui écrit
   les mesures sur les pages. Chaque constat : son nom, ce qu'il était, ce qu'il devient. */
.eau-pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 1.1rem 2.4rem; }
.eau-legende { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.8rem; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.eau:not([data-volet="moderniser"]) .eau-legende[data-pour="moderniser"], .eau:not([data-volet="securiser"]) .eau-legende[data-pour="securiser"], .eau:not([data-volet="regle"]) .eau-legende[data-pour="regle"] { display: none; }
.eau-legende li { display: grid; align-content: start; gap: .3rem; padding-top: .85rem; border-top: 1px solid var(--filet); animation: eau-constat .6s var(--courbe) both; }
.eau-legende li:nth-child(2) { animation-delay: .08s; } .eau-legende li:nth-child(3) { animation-delay: .16s; }
@keyframes eau-constat { from { opacity: 0; transform: translateY(.5rem); } }
.eau-legende b { font-size: max(.86rem, 12.5px); font-weight: 500; letter-spacing: .02em; color: var(--doux); }
/* Les constats des volets 2 et 3, numérotés comme les pastilles posées sur la page d'avant. */
.eau-legende b i { display: inline-grid; place-content: center; width: 1.55em; height: 1.55em; margin-right: .55em; border-radius: 50%; background: #c2410c; color: #fff; font-size: .82em; font-style: normal; font-weight: 600; vertical-align: .05em; }
.eau-legende .m-de { font-size: max(.95rem, 13.5px); line-height: 1.35; color: var(--doux); }
.eau-legende .m-a { font-size: min(1.32rem, 5vw); line-height: 1.25; letter-spacing: -.01em; color: var(--texte); }
.eau-legende :is(.m-de, .m-a)::before { content: ''; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; vertical-align: .08em; background: #e2683c; }
.eau-legende .m-a::before { width: .55em; height: .3em; border-radius: 0; border-left: 2px solid var(--eau); border-bottom: 2px solid var(--eau); background: none; transform: rotate(-45deg) translateY(-.15em); }
.eau-legende small { margin-top: .2rem; font-size: max(.82rem, 12px); color: var(--doux); }
.eau-mesurer { grid-column: 2; grid-row: 1; flex: none; min-height: max(2.75rem, 44px); padding: 0 1.3rem; border: 1px solid var(--filet); border-radius: 99rem; background: none; font-size: max(1rem, 14px); color: var(--texte); cursor: pointer; transition: background-color .35s, color .35s, border-color .35s, opacity .3s; }
.eau-mesurer:is(:hover, :focus-visible, [aria-pressed="true"]) { background: var(--plein); border-color: var(--plein); color: var(--sur-plein); }
.eau:not([data-volet="moderniser"]) .eau-mesurer { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .eau-legende li { animation: none; } .ea-cookies, .ep-cookies, .eau-pastille { transition: none; } }

@media (max-width: 1100px) {
  .fd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-demande { grid-column: auto; grid-row: auto; }
  .doc[data-doc="commande"] { margin-top: 0; }
  .doc[data-doc="message"], .fd-bilan { grid-column: 1 / -1; grid-row: auto; }
  .fd-bilan { padding-left: 0; }
}
@media (max-width: 760px) {
  .service.scene { padding: 11vh 0 12vh; }
  .scene-tete { grid-template-columns: minmax(0, 1fr); margin-bottom: 2rem; }
  .service.scene .prestations { display: block; }
  .service.scene .prestations li + li::before { content: none; }
  .service.scene .prestations li { padding: .3rem 0; }
  .fd { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding-left: 1.3rem; }
  .fd-depart { right: auto; bottom: 1.2rem; left: -.5rem; }
  .doc { padding: 1.05rem 1.1rem 1rem; }
  .eau { max-width: none; }
  .eau-scene { aspect-ratio: 4 / 5; }
  .eau-pied { grid-template-columns: minmax(0, 1fr); }
  .eau-legende { grid-template-columns: minmax(0, 1fr); gap: .9rem 0; }
  .eau-mesurer { display: none; }
  .eau-volets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .eau-volets button { flex-direction: column; align-items: flex-start; gap: .15rem; padding: .55rem .8rem .65rem; border-radius: .9rem; font-size: 13.5px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .doc, .doc::before, .doc::after, .doc *, .cote { transition-duration: .01s; transition-delay: 0s; }
}

/* ---------- v22 — Reprendre avec Aplomb ----------
   L'après : l'accueil du site de démonstration Aplomb (sa photo en plein cadre sous un voile, son titre, ses boutons cuivre,
   ses lots) ; l'avant : une ancienne version reconstituée, avec la même photo, terne et petite. Le fond du bandeau d'après
   est celui de son voile : c'est sur lui que la mesure de contraste lit le texte (js/demo-eau.js, fond). */
.ea-aplomb .ea-bandeau { background: linear-gradient(#5d5d5d, #303030); font-family: Arial, Helvetica, sans-serif; }
.ea-aplomb .ea-bandeau b { font-size: 2.5em; letter-spacing: .14em; text-shadow: none; }
.ea-aplomb .ea-bandeau i { font-style: normal; color: #d9d9d9; }
.ea-aplomb .ea-menu span { color: #3a3a3a; text-decoration: none; }
.ea-aplomb .ea-menu span:first-child { background: #b25a34; color: #fff; }
.ea-aplomb .ea-titre { font-family: Arial, Helvetica, sans-serif; color: #b25a34; }
.ea-aplomb .ea-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: .25em solid #e1e1e1; filter: saturate(.7) contrast(.85) brightness(1.06); }
/* (La vieille photo à gauche : au repos, l'eau ne montre que la moitié gauche de la page d'avant.) */
.ea-aplomb .ea-hero { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
.ea-aplomb .ea-photo { order: -1; }
.ea-aplomb .ea-produits b { color: #b25a34; }
.ea-aplomb .ea-produits span { color: #4a4a4a; text-decoration: none; }
.ep-aplomb { background: #f3f1ed; color: #141619; }
.ep-aplomb .ep-barre b { font: 800 1.45em / 1 var(--grot); letter-spacing: .16em; }
.ep-aplomb .ep-barre-cta { padding: .5em 1.05em; border-radius: 6px; background: #b25a34; color: #fff; }
.ep-aplomb .ep-hero { position: relative; display: block; margin: 0 -3.6%; padding: 0; overflow: hidden; background: #0e1012; color: #fff; }
.ep-aplomb .ep-image { position: absolute; inset: 0; height: auto; max-height: none; border-radius: 0; background: none; }
.ep-aplomb .ep-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.ep-aplomb .ep-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 16, 18, .9), rgba(14, 16, 18, .55) 45%, rgba(14, 16, 18, .08) 80%), linear-gradient(270deg, rgba(14, 16, 18, .6), rgba(14, 16, 18, 0) 58%); }
/* (Le texte à droite : au repos, l'eau garde la page d'avant sur la moitié gauche.) */
.ep-aplomb .ep-bloc { position: absolute; left: 50%; right: 3.6%; bottom: 7%; }
.ep-aplomb .ep-titre { margin-bottom: .3em !important; font: 800 2.55em / .95 var(--grot); letter-spacing: -.035em; color: #fff; }
.ep-aplomb .ep-texte { max-width: 30em; font-size: 1em; color: #fff; }
.ep-aplomb .ep-bouton { padding: 0 1.25em; border-radius: 6px; background: #b25a34; color: #fff; white-space: nowrap; }
.ep-aplomb .ep-actions { flex-wrap: nowrap; }
.ep-aplomb .ep-lien { white-space: nowrap; }
.ep-aplomb .ep-lien { color: #fff; }
.ep-aplomb .ep-hero .cote { color: #a9c6ff; }
.ep-aplomb .ep-bas { gap: 1.4em; }
.ep-aplomb .ep-bas li { display: grid; grid-template-columns: 2.7em minmax(0, 1fr); column-gap: .7em; align-items: center; }
.ep-aplomb .ep-bas img { grid-row: span 2; width: 2.7em; height: 2.7em; border-radius: 4px; object-fit: cover; }
.ep-aplomb .ep-bas b { font-weight: 600; }
.ep-aplomb .ep-bas span { font-size: .9em; color: rgba(20, 22, 25, .72); }
.ep-aplomb .ep-choix > span:last-child { background: #141619; }
@container (max-width: 560px) {
  .ep-aplomb .ep-hero { display: block; margin: 0 -5% 0 -11%; }
  .ep-aplomb .ep-image { display: block; }
  .ep-aplomb .ep-bloc { left: 11%; right: 5%; bottom: 6%; }
  .ep-aplomb .ep-titre { font-size: 1.9em; }
  .ep-aplomb .ep-texte { font-size: max(1em, 16px); }          /* (au téléphone, 16 points au moins, comme la v21) */
  .ep-aplomb .ep-barre-cta { display: none; }
  .ep-aplomb .ep-bas li { display: flex; }
  .ep-aplomb .ep-bas img { display: none; }
}